\n Checking...\n

\n );\n }\n\n if (!serverInfo) {\n return (\n

\n Unknown\n

\n );\n }\n\n const statusClass = `server-status server-${serverInfo.status}`;\n return (\n

\n \n {serverInfo.status === 'online' \n ? `Online (Queue: ${serverInfo.queue_running || 0} running, ${serverInfo.queue_remaining || 0} pending)`\n : serverInfo.status === 'offline' \n ? 'Offline' \n : 'Unknown'\n }\n \n

\n );\n };\n\n return (\n

\n {/* Header */}\n

ComfyUI Frontend

\n Connect to any ComfyUI instance and execute workflows\n

\n \n 🔄 Refresh Status\n \n

\n\n {/* Server Configuration */}\n

Server Configuration

\n \n ComfyUI Server Address (IP:Port)\n \n setServerIp(e.target.value)}\n placeholder=\"127.0.0.1:8188 or localhost:8188\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n {serverIp && !isValidIpAddress(serverIp) && (\n

Please enter a valid IP:port address (e.g., 127.0.0.1:8188)

\n )}\n

\n Status\n {renderServerStatus()}\n

\n\n {/* Navigation Tabs */}\n

\n {[\n { id: 'upload', label: 'Upload Workflow', icon: '📤' },\n { id: 'status', label: 'Job Status', icon: '📊' },\n { id: 'history', label: 'History', icon: '📜' }\n ].map((tab) => (\n setActiveTab(tab.id as any)}\n className={`py-4 px-1 border-b-2 font-medium text-sm ${\n activeTab === tab.id\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n {tab.icon}\n {tab.label}\n \n ))}\n

\n\n {/* Tab Content */}\n

\n {activeTab === 'upload' && (\n \n )}\n\n {activeTab === 'status' && (\n \n )}\n\n {activeTab === 'history' && (\n

Execution History

\n \n 🔄 Refresh\n \n

\n \n {history.length === 0 ? (\n

📭

No execution history yet

Execute a workflow to see it here

\n ) : (\n

\n {history.map((item) => (\n {\n // Load this job into status view\n const jobStatus: JobStatusType = {\n prompt_id: item.prompt_id,\n status: item.status,\n created_at: item.created_at,\n completed_at: item.completed_at,\n images: item.images\n };\n setCurrentJob(jobStatus);\n setActiveTab('status');\n }}\n >\n

\n {item.workflow_title || 'Untitled Workflow'}\n

\n ID: {item.prompt_id}\n

\n Created: {new Date(item.created_at).toLocaleString()}\n

\n {item.completed_at && (\n

\n Completed: {new Date(item.completed_at).toLocaleString()}\n

\n )}\n

\n \n {item.status}\n \n {item.images && item.images.length > 0 && (\n \n 🖼️ {item.images.length}\n \n )}\n

\n ))}\n

\n )}\n

\n \n );\n}","deleted","label",[171,172,153],"frontend","components","permalink","https://www.val.town/x/anibalpw/comfy-frontend/code/frontend/components/App.tsx","extension","actionData","errors"]