agent-orcha 0.0.4 → 0.0.7

package/dist/public/src/components/WorkflowsView.js

@@ -2,12 +2,28 @@
 import { Component } from '../utils/Component.js';
 import { api } from '../services/ApiService.js';
 
+const LOG_CONFIG = {
+    workflow_start: { icon: 'fa-play', color: 'blue' },
+    workflow_complete: { icon: 'fa-check-circle', color: 'green' },
+    workflow_error: { icon: 'fa-times-circle', color: 'red' },
+    workflow_interrupt: { icon: 'fa-pause-circle', color: 'amber' },
+    step_start: { icon: 'fa-arrow-right', color: 'blue' },
+    step_complete: { icon: 'fa-check', color: 'green' },
+    step_error: { icon: 'fa-exclamation-triangle', color: 'red' },
+    tool_discovery: { icon: 'fa-search', color: 'purple' },
+    react_iteration: { icon: 'fa-sync-alt', color: 'blue' },
+    tool_call: { icon: 'fa-wrench', color: 'cyan' },
+    tool_result: { icon: 'fa-reply', color: 'teal' },
+};
+
 export class WorkflowsView extends Component {
     constructor() {
         super();
-        this.isLoading = false;
+        this.workflows = [];
         this.selectedWorkflow = null;
         this.chartInterval = null;
+        this.activeTaskId = null;
+        this.eventSource = null;
     }
 
     async connectedCallback() {
@@ -17,223 +33,532 @@ export class WorkflowsView extends Component {
 
     disconnectedCallback() {
         this.stopChartUpdate();
+        this.closeEventSource();
+    }
+
+    closeEventSource() {
+        if (this.eventSource) {
+            this.eventSource.close();
+            this.eventSource = null;
+        }
     }
 
+    // ── Data ──
+
     async loadWorkflows() {
         try {
-            const workflows = await api.getWorkflows();
-            const select = this.querySelector('#workflowSelect');
-            select.innerHTML = '<option value="">-- Select Workflow --</option>' +
-                workflows.map(wf => `<option value="${wf.name}">${wf.name} - ${wf.description}</option>`).join('');
+            this.workflows = await api.getWorkflows();
+            this.renderCards();
         } catch (e) {
             console.error('Failed to load workflows', e);
         }
     }
 
-    async onWorkflowSelected(name) {
-        if (!name) {
-            this.selectedWorkflow = null;
-            this.renderDiagram([]);
-            this.querySelector('#workflowInputs').innerHTML = '';
-            this.querySelector('#runWorkflow').disabled = true;
-            return;
-        }
+    async selectWorkflow(name) {
+        if (this.selectedWorkflow?.name === name) return;
 
         try {
-            const workflow = await api.getWorkflow(name);
-            this.selectedWorkflow = workflow;
-            this.renderInputs(workflow.input?.schema || {});
-            this.renderDiagram(workflow.steps || []);
-            this.querySelector('#runWorkflow').disabled = false;
+            const full = await api.getWorkflow(name);
+            this.selectedWorkflow = full;
+            this.renderCards();
+            this.renderDetail();
         } catch (e) {
             console.error('Failed to load workflow details', e);
         }
     }
 
-    renderInputs(schema) {
-        const container = this.querySelector('#workflowInputs');
-        container.innerHTML = '';
+    // ── Left sidebar: cards ──
 
-        if (Object.keys(schema).length === 0) return;
+    renderCards() {
+        const container = this.querySelector('#workflowCards');
+        if (!container) return;
 
-        container.innerHTML = `
-            <label class="block text-sm font-medium text-gray-300 mb-2">Workflow Inputs</label>
-            <div class="space-y-2">
-                ${Object.entries(schema).map(([key, field]) => `
-                    <input type="text" id="wf-${key}" 
-                        placeholder="${key}${field.required ? ' *' : ''}${field.default ? ` (default: ${field.default})` : ''}"
-                        value="${field.default || ''}"
-                        class="w-full bg-dark-surface border border-dark-border rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
-                `).join('')}
-            </div>
-        `;
+        if (!this.workflows.length) {
+            container.innerHTML = `
+                <div class="text-gray-500 text-center py-12">
+                    <i class="fas fa-project-diagram text-4xl mb-4 block text-gray-600"></i>
+                    <p class="text-sm">No workflows found</p>
+                </div>`;
+            return;
+        }
+
+        container.innerHTML = this.workflows.map(wf => {
+            const isSelected = this.selectedWorkflow?.name === wf.name;
+            const isReact = wf.type === 'react';
+            const badgeClass = isReact ? 'bg-amber-500/20 text-amber-400' : 'bg-blue-500/20 text-blue-400';
+
+            return `
+                <div class="workflow-card cursor-pointer rounded-lg p-3 border transition-colors
+                    ${isSelected ? 'bg-dark-surface border-purple-500' : 'bg-dark-surface/50 border-dark-border hover:border-purple-500/50'}"
+                    data-name="${wf.name}">
+                    <div class="flex items-center justify-between mb-1">
+                        <span class="font-semibold text-gray-100 text-sm truncate">${this.escapeHtml(wf.name)}</span>
+                        <span class="text-xs px-1.5 py-0.5 rounded ${badgeClass} flex-shrink-0">${wf.type || 'steps'}</span>
+                    </div>
+                    <div class="text-xs text-gray-500 line-clamp-2">${this.escapeHtml(wf.description || 'No description')}</div>
+                    <div class="text-xs text-gray-600 mt-1">v${wf.version || '1.0.0'}${!isReact && wf.steps ? ` · ${wf.steps} steps` : ''}</div>
+                </div>`;
+        }).join('');
+
+        container.querySelectorAll('.workflow-card').forEach(card => {
+            card.addEventListener('click', () => this.selectWorkflow(card.dataset.name));
+        });
     }
 
-    renderDiagram(steps) {
-        const container = this.querySelector('#flowDiagram');
-        if (!steps.length) {
-            container.innerHTML = '<div class="text-gray-500 italic text-center py-8">No steps defined</div>';
+    // ── Right panel: detail ──
+
+    renderDetail() {
+        const container = this.querySelector('#workflowDetail');
+        if (!container || !this.selectedWorkflow) {
+            if (container) container.innerHTML = '<div class="text-gray-500 italic text-center py-12">Select a workflow to view details</div>';
             return;
         }
 
+        const wf = this.selectedWorkflow;
+        const isReact = wf.type === 'react';
+
         container.innerHTML = `
-            <div class="flex items-center gap-3 flex-nowrap min-w-max">
-                <div class="flex flex-col items-center px-5 py-3 bg-green-500/10 border border-green-500/30 rounded-lg min-w-[100px] text-center">
-                    <span class="font-semibold text-green-400 text-sm">Input</span>
+            ${this.buildInfoHtml(wf)}
+            ${!isReact ? this.buildDiagramHtml(wf.steps || []) : ''}
+            ${this.buildInputsHtml(wf.input?.schema || {})}
+            <button id="runWorkflow"
+                class="bg-purple-600 hover:bg-purple-700 disabled:bg-gray-700 disabled:cursor-not-allowed text-white font-medium px-5 py-2 rounded-lg transition-colors flex items-center gap-2 text-sm">
+                <i class="fas fa-play text-xs"></i>
+                Run Workflow
+            </button>
+        `;
+
+        this.querySelector('#runWorkflow')?.addEventListener('click', () => this.runWorkflow());
+    }
+
+    buildInfoHtml(wf) {
+        const isReact = wf.type === 'react';
+        const badgeClass = isReact ? 'bg-amber-500/20 text-amber-400' : 'bg-blue-500/20 text-blue-400';
+
+        let metaHtml = '';
+        if (isReact) {
+            const g = wf.graph || {};
+            metaHtml = `
+                <div class="grid grid-cols-4 gap-3 mt-3 pt-3 border-t border-dark-border">
+                    <div><span class="text-gray-500 text-xs block">Model</span><span class="text-gray-300 text-sm">${this.escapeHtml(g.model || 'default')}</span></div>
+                    <div><span class="text-gray-500 text-xs block">Mode</span><span class="text-gray-300 text-sm">${g.executionMode || 'react'}</span></div>
+                    <div><span class="text-gray-500 text-xs block">Max Iter</span><span class="text-gray-300 text-sm">${g.maxIterations ?? 10}</span></div>
+                    <div><span class="text-gray-500 text-xs block">Tools</span><span class="text-gray-300 text-sm">${g.tools?.mode || 'all'}</span></div>
+                </div>`;
+        } else {
+            const c = wf.config || {};
+            metaHtml = `
+                <div class="grid grid-cols-3 gap-3 mt-3 pt-3 border-t border-dark-border">
+                    <div><span class="text-gray-500 text-xs block">Steps</span><span class="text-gray-300 text-sm">${(wf.steps || []).length}</span></div>
+                    <div><span class="text-gray-500 text-xs block">On Error</span><span class="text-gray-300 text-sm">${c.onError || 'stop'}</span></div>
+                    <div><span class="text-gray-500 text-xs block">Timeout</span><span class="text-gray-300 text-sm">${((c.timeout || 300000) / 1000)}s</span></div>
+                </div>`;
+        }
+
+        return `
+            <div class="bg-dark-surface border border-dark-border rounded-lg p-4">
+                <div class="flex items-center gap-3">
+                    <i class="fas ${isReact ? 'fa-atom' : 'fa-project-diagram'} text-purple-400"></i>
+                    <div class="min-w-0">
+                        <div class="flex items-center gap-2 flex-wrap">
+                            <span class="font-semibold text-gray-100">${this.escapeHtml(wf.name)}</span>
+                            <span class="text-xs px-2 py-0.5 rounded-full ${badgeClass}">${wf.type || 'steps'}</span>
+                            <span class="text-xs text-gray-500">v${wf.version || '1.0.0'}</span>
+                        </div>
+                        <p class="text-xs text-gray-400 mt-0.5">${this.escapeHtml(wf.description || '')}</p>
+                    </div>
                 </div>
-                ${steps.map(step => `
-                    <span class="text-gray-600 text-xl flex-shrink-0">→</span>
-                    <div id="step-${step.id}" class="step-node flex flex-col items-center px-4 py-3 bg-blue-500/10 border border-blue-500/30 rounded-lg min-w-[120px] text-center transition-all">
-                        <span class="font-semibold text-blue-300 text-sm">${step.id}</span>
-                        <span class="text-xs text-gray-400 mt-0.5">${step.agent}</span>
+                ${metaHtml}
+            </div>`;
+    }
+
+    buildDiagramHtml(steps) {
+        if (!steps.length) return '';
+
+        const nodes = steps.map(step => `
+            <span class="text-gray-600 text-lg flex-shrink-0">&rarr;</span>
+            <div id="step-${step.id}" class="step-node flex flex-col items-center px-3 py-2 bg-blue-500/10 border border-blue-500/30 rounded-lg min-w-[100px] text-center transition-all">
+                <span class="font-semibold text-blue-300 text-xs">${step.id}</span>
+                <span class="text-xs text-gray-400">${step.agent}</span>
+            </div>
+        `).join('');
+
+        return `
+            <div class="bg-dark-surface border border-dark-border rounded-lg p-4 overflow-x-auto">
+                <div class="flex items-center gap-2 flex-nowrap min-w-max">
+                    <div class="flex flex-col items-center px-3 py-2 bg-green-500/10 border border-green-500/30 rounded-lg min-w-[80px] text-center">
+                        <span class="font-semibold text-green-400 text-xs">Input</span>
+                    </div>
+                    ${nodes}
+                    <span class="text-gray-600 text-lg flex-shrink-0">&rarr;</span>
+                    <div class="flex flex-col items-center px-3 py-2 bg-green-500/10 border border-green-500/30 rounded-lg min-w-[80px] text-center">
+                        <span class="font-semibold text-green-400 text-xs">Output</span>
                     </div>
-                `).join('')}
-                <span class="text-gray-600 text-xl flex-shrink-0">→</span>
-                <div class="flex flex-col items-center px-5 py-3 bg-green-500/10 border border-green-500/30 rounded-lg min-w-[100px] text-center">
-                    <span class="font-semibold text-green-400 text-sm">Output</span>
                 </div>
+            </div>`;
+    }
+
+    buildInputsHtml(schema) {
+        const entries = Object.entries(schema);
+        if (!entries.length) return '';
+
+        const fields = entries.map(([key, field]) => `
+            <div class="bg-dark-surface/50 border border-dark-border rounded-lg p-3">
+                <div class="flex items-center justify-between mb-1">
+                    <label class="text-sm font-medium text-gray-300" for="wf-${key}">
+                        ${this.escapeHtml(key)}${field.required ? '<span class="text-red-400 ml-1">*</span>' : ''}
+                    </label>
+                    <span class="text-xs px-1.5 py-0.5 rounded bg-gray-700 text-gray-500">${field.type || 'string'}</span>
+                </div>
+                <input type="text" id="wf-${key}"
+                    placeholder="${field.default ? `Default: ${field.default}` : field.required ? 'Required' : 'Optional'}"
+                    value="${field.default || ''}"
+                    class="w-full bg-dark-bg border border-dark-border rounded-lg px-3 py-2 text-sm text-gray-100 placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                ${field.description ? `<p class="text-xs text-gray-500 mt-1">${this.escapeHtml(field.description)}</p>` : ''}
             </div>
-        `;
+        `).join('');
+
+        return `
+            <div class="space-y-3">
+                <h3 class="text-sm font-semibold text-gray-300 flex items-center gap-2">
+                    <i class="fas fa-keyboard text-gray-500 text-xs"></i>
+                    Inputs
+                </h3>
+                ${fields}
+            </div>`;
     }
 
-    async runWorkflow() {
-        if (!this.selectedWorkflow) return;
+    // ── Execution ──
 
+    resetRunUI() {
+        const logEl = this.querySelector('#statusLog');
+        const outputEl = this.querySelector('#workflowOutput');
+
+        logEl.innerHTML = '';
+        outputEl.textContent = 'No output yet';
+        outputEl.className = outputEl.className.replace('text-gray-300', 'text-gray-500');
+        this.querySelector('#statusMessage').textContent = 'Starting...';
+        this.querySelector('#statusDot').className = 'inline-block w-2 h-2 rounded-full bg-blue-400 animate-pulse';
+        this.clearInterruptPrompt();
+        this.closeEventSource();
+        this.activeTaskId = null;
+    }
+
+    collectInputs() {
         const inputs = {};
         this.querySelectorAll('input[id^="wf-"]').forEach(input => {
             const key = input.id.replace('wf-', '');
             if (input.value) inputs[key] = input.value;
         });
+        return inputs;
+    }
 
-        const outputEl = this.querySelector('#workflowOutput');
-        const statusEl = this.querySelector('#workflowStatus');
-        const runBtn = this.querySelector('#runWorkflow');
-
-        statusEl.classList.remove('hidden');
-        outputEl.textContent = 'Starting workflow...';
-        runBtn.disabled = true;
+    async runWorkflow() {
+        if (!this.selectedWorkflow) return;
 
+        const inputs = this.collectInputs();
+        const runBtn = this.querySelector('#runWorkflow');
+        this.resetRunUI();
+        if (runBtn) runBtn.disabled = true;
         this.startChartUpdate();
 
+        const isReact = this.selectedWorkflow.type === 'react';
+
         try {
-            const res = await api.startWorkflowStream(this.selectedWorkflow.name, inputs);
-            const reader = res.body.getReader();
-            const decoder = new TextDecoder();
-
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done) break;
-
-                const chunk = decoder.decode(value);
-                const lines = chunk.split('\n');
-
-                for (const line of lines) {
-                    if (line.startsWith('data: ')) {
-                        const data = line.slice(6);
-                        if (data === '[DONE]') continue;
-                        try {
-                            const update = JSON.parse(data);
-                            this.handleStatusUpdate(update);
-                        } catch (e) { }
-                    }
-                }
+            if (isReact) {
+                await this.runReactWorkflow(inputs);
+            } else {
+                await this.runStepsWorkflow(inputs);
             }
         } catch (e) {
-            outputEl.textContent = 'Error: ' + e.message;
+            this.addLog(`Error: ${e.message}`, 'workflow_error');
+            this.querySelector('#statusMessage').textContent = 'Error';
+            this.querySelector('#statusDot').className = 'inline-block w-2 h-2 rounded-full bg-red-400';
         } finally {
-            runBtn.disabled = false;
-            this.stopChartUpdate();
+            if (!isReact) {
+                if (runBtn) runBtn.disabled = false;
+                this.stopChartUpdate();
+            }
+        }
+    }
+
+    async runStepsWorkflow(inputs) {
+        const res = await api.startWorkflowStream(this.selectedWorkflow.name, inputs);
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            const chunk = decoder.decode(value);
+            for (const line of chunk.split('\n')) {
+                if (!line.startsWith('data: ')) continue;
+                const data = line.slice(6);
+                if (data === '[DONE]') continue;
+                try { this.handleStatusUpdate(JSON.parse(data)); } catch (e) { }
+            }
+        }
+    }
+
+    async runReactWorkflow(inputs) {
+        const { id: taskId } = await api.submitWorkflowTask(this.selectedWorkflow.name, inputs);
+        this.activeTaskId = taskId;
+        this.addLog('Task submitted', 'workflow_start');
+
+        this.eventSource = api.streamTask(taskId);
+
+        this.eventSource.onmessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                this.handleTaskSSE(data);
+            } catch { /* ignore parse errors */ }
+        };
+
+        this.eventSource.onerror = () => {
+            this.closeEventSource();
+            this.finishReactRun();
+        };
+    }
+
+    handleTaskSSE(data) {
+        if (data.type === 'status') {
+            const statusMsg = this.querySelector('#statusMessage');
+            const statusDot = this.querySelector('#statusDot');
+
+            if (data.status === 'working') {
+                statusMsg.textContent = 'Working...';
+                statusDot.className = 'inline-block w-2 h-2 rounded-full bg-blue-400 animate-pulse';
+                this.clearInterruptPrompt();
+                this.addLog('Workflow running', 'react_iteration');
+            } else if (data.status === 'input-required') {
+                const question = data.inputRequest?.question || 'Input required';
+                statusMsg.textContent = 'Awaiting input';
+                statusDot.className = 'inline-block w-2 h-2 rounded-full bg-amber-400';
+                this.addLog(`Input required: ${question}`, 'workflow_interrupt');
+                this.showInterruptPrompt(question);
+            } else if (data.status === 'completed') {
+                statusMsg.textContent = 'Completed';
+                statusDot.className = 'inline-block w-2 h-2 rounded-full bg-green-400';
+                this.addLog('Workflow completed', 'workflow_complete');
+                if (data.result) {
+                    const outputEl = this.querySelector('#workflowOutput');
+                    outputEl.className = outputEl.className.replace('text-gray-500', 'text-gray-300');
+                    outputEl.textContent = JSON.stringify(data.result, null, 2);
+                }
+            } else if (data.status === 'failed') {
+                statusMsg.textContent = 'Error';
+                statusDot.className = 'inline-block w-2 h-2 rounded-full bg-red-400';
+                this.addLog(`Error: ${data.error || 'Unknown error'}`, 'workflow_error');
+            } else if (data.status === 'canceled') {
+                statusMsg.textContent = 'Canceled';
+                statusDot.className = 'inline-block w-2 h-2 rounded-full bg-yellow-400';
+                this.addLog('Task canceled', 'workflow_error');
+            }
+        }
+
+        if (data.type === 'done') {
+            this.closeEventSource();
+            this.finishReactRun();
+        }
+    }
+
+    finishReactRun() {
+        const runBtn = this.querySelector('#runWorkflow');
+        if (runBtn) runBtn.disabled = false;
+        this.stopChartUpdate();
+        this.activeTaskId = null;
+    }
+
+    showInterruptPrompt(question) {
+        const container = this.querySelector('#interruptPrompt');
+        if (!container) return;
+
+        container.innerHTML = `
+            <div class="bg-amber-500/10 border border-amber-500/30 rounded-lg p-4">
+                <div class="flex items-center gap-2 mb-3">
+                    <i class="fas fa-question-circle text-amber-400"></i>
+                    <span class="text-sm font-medium text-amber-400">Input Required</span>
+                </div>
+                <p class="text-sm text-gray-300 mb-3">${this.escapeHtml(question)}</p>
+                <div class="flex gap-2">
+                    <input id="interruptInput" type="text" placeholder="Type your response..."
+                        class="flex-1 bg-dark-bg border border-dark-border rounded-lg px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-amber-500" />
+                    <button id="interruptSendBtn" class="px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white text-sm font-medium rounded-lg transition-colors">
+                        Send
+                    </button>
+                </div>
+            </div>`;
+
+        this.querySelector('#interruptSendBtn').addEventListener('click', () => this.handleInterruptResponse());
+        this.querySelector('#interruptInput').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') this.handleInterruptResponse();
+        });
+        this.querySelector('#interruptInput').focus();
+    }
+
+    clearInterruptPrompt() {
+        const container = this.querySelector('#interruptPrompt');
+        if (container) container.innerHTML = '';
+    }
+
+    async handleInterruptResponse() {
+        const input = this.querySelector('#interruptInput');
+        const response = input?.value?.trim();
+        if (!response || !this.activeTaskId) return;
+
+        try {
+            await api.respondToTask(this.activeTaskId, response);
+            this.clearInterruptPrompt();
+            this.addLog(`Responded: ${response}`, 'tool_result');
+            this.querySelector('#statusMessage').textContent = 'Resuming...';
+            this.querySelector('#statusDot').className = 'inline-block w-2 h-2 rounded-full bg-blue-400 animate-pulse';
+        } catch (e) {
+            this.addLog(`Failed to respond: ${e.message}`, 'workflow_error');
         }
     }
 
     handleStatusUpdate(update) {
         if (update.type === 'status') {
             const { message, type, stepId } = update.data;
-            this.querySelector('#statusMessage').textContent = message;
+            const statusMsg = this.querySelector('#statusMessage');
+            const statusDot = this.querySelector('#statusDot');
+
+            if (type === 'workflow_complete') {
+                statusMsg.textContent = 'Completed';
+                statusDot.className = 'inline-block w-2 h-2 rounded-full bg-green-400';
+            } else if (type === 'workflow_error') {
+                statusMsg.textContent = 'Error';
+                statusDot.className = 'inline-block w-2 h-2 rounded-full bg-red-400';
+            } else if (type === 'workflow_interrupt') {
+                statusMsg.textContent = 'Interrupted — Awaiting input';
+                statusDot.className = 'inline-block w-2 h-2 rounded-full bg-amber-400';
+            } else {
+                statusMsg.textContent = message;
+            }
+
             this.addLog(message, type);
 
             if (stepId) {
                 const stepEl = this.querySelector(`#step-${stepId}`);
                 if (stepEl) {
-                    if (type === 'step_start') stepEl.className = stepEl.className.replace('bg-blue-500/10', 'bg-yellow-500/10 animate-pulse').replace('border-blue-500/30', 'border-yellow-500/30');
-                    if (type === 'step_complete') stepEl.className = stepEl.className.replace('bg-yellow-500/10 animate-pulse', 'bg-green-500/10').replace('border-yellow-500/30', 'border-green-500/30');
+                    if (type === 'step_start') {
+                        stepEl.className = stepEl.className
+                            .replace('bg-blue-500/10', 'bg-yellow-500/10 animate-pulse')
+                            .replace('border-blue-500/30', 'border-yellow-500/30');
+                    }
+                    if (type === 'step_complete') {
+                        stepEl.className = stepEl.className
+                            .replace('bg-yellow-500/10 animate-pulse', 'bg-green-500/10')
+                            .replace('border-yellow-500/30', 'border-green-500/30');
+                    }
                 }
             }
         } else if (update.type === 'result') {
             const outputEl = this.querySelector('#workflowOutput');
-            outputEl.textContent = JSON.stringify(update.data.output, null, 2);
+            outputEl.className = outputEl.className.replace('text-gray-500', 'text-gray-300');
+            outputEl.textContent = JSON.stringify(update.data.output || update.data, null, 2);
         }
     }
 
     addLog(msg, type) {
         const log = this.querySelector('#statusLog');
+        const config = LOG_CONFIG[type] || { icon: 'fa-circle', color: 'gray' };
+
         const div = document.createElement('div');
-        div.className = 'text-xs font-mono';
-        if (type === 'step_error') div.classList.add('text-red-400');
-        else if (type === 'step_complete') div.classList.add('text-green-400');
-        else div.classList.add('text-gray-400');
+        div.className = 'text-xs font-mono flex items-start gap-2 py-0.5';
+
+        const time = new Date().toLocaleTimeString();
+        div.innerHTML = `
+            <span class="text-gray-600 flex-shrink-0">${time}</span>
+            <i class="fas ${config.icon} text-${config.color}-400 text-xs mt-0.5 flex-shrink-0 w-3 text-center"></i>
+            <span class="text-${config.color}-400">${this.escapeHtml(msg)}</span>
+        `;
 
-        div.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
         log.appendChild(div);
         log.scrollTop = log.scrollHeight;
     }
 
+    // ── Timer ──
+
     startChartUpdate() {
+        this.stopChartUpdate();
         const start = Date.now();
         const timeEl = this.querySelector('#statusTime');
+        timeEl.textContent = '0s';
         this.chartInterval = setInterval(() => {
-            const seconds = Math.floor((Date.now() - start) / 1000);
-            timeEl.textContent = `${seconds}s`;
+            timeEl.textContent = `${Math.floor((Date.now() - start) / 1000)}s`;
         }, 1000);
     }
 
     stopChartUpdate() {
-        if (this.chartInterval) clearInterval(this.chartInterval);
+        if (this.chartInterval) {
+            clearInterval(this.chartInterval);
+            this.chartInterval = null;
+        }
+    }
+
+    // ── Helpers ──
+
+    escapeHtml(text) {
+        if (!text) return '';
+        return String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
     }
 
     postRender() {
-        this.querySelector('#workflowSelect').addEventListener('change', (e) => {
-            this.onWorkflowSelected(e.target.value);
-        });
-        this.querySelector('#runWorkflow').addEventListener('click', () => {
-            this.runWorkflow();
-        });
+        // No static event bindings needed — cards and run button bind dynamically
     }
 
     template() {
         return `
-            <div class="space-y-6 h-full overflow-y-auto pb-8 custom-scrollbar">
-                <div>
-                    <label class="block text-sm font-medium text-gray-300 mb-2">Select Workflow</label>
-                    <select id="workflowSelect"
-                        class="w-full bg-dark-surface border border-dark-border rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
-                        <option value="">Loading...</option>
-                    </select>
-                </div>
-
-                <div id="flowDiagram" class="bg-dark-surface border border-dark-border rounded-lg p-6 overflow-x-auto min-h-[120px] flex items-center justify-center">
-                    <div class="text-gray-500 italic">Select a workflow</div>
-                </div>
-
-                <div id="workflowInputs" class="space-y-3"></div>
-
-                <div id="workflowStatus" class="bg-dark-surface border border-dark-border rounded-lg p-5 hidden">
-                    <div class="flex justify-between items-center mb-3">
-                        <div id="statusMessage" class="font-medium text-gray-200">Ready</div>
-                        <div id="statusTime" class="text-sm text-gray-400">0s</div>
+            <div class="flex h-full gap-4">
+                <!-- Left sidebar -->
+                <div class="w-64 flex-shrink-0 overflow-y-auto custom-scrollbar pr-2">
+                    <div class="flex items-center justify-between mb-3">
+                        <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Workflows</h3>
+                    </div>
+                    <div id="workflowCards" class="space-y-2">
+                        <div class="text-gray-500 italic text-center py-8 text-sm">Loading...</div>
                     </div>
-                    <div id="statusLog" class="bg-dark-bg rounded-lg p-3 h-32 overflow-y-auto space-y-1 border border-dark-border"></div>
                 </div>
 
-                <button id="runWorkflow" disabled
-                    class="bg-purple-600 hover:bg-purple-700 disabled:bg-gray-700 disabled:cursor-not-allowed text-white font-medium px-6 py-2.5 rounded-lg transition-colors w-full sm:w-auto">
-                    Run Workflow
-                </button>
+                <!-- Right panel -->
+                <div class="flex-1 flex flex-col h-full overflow-hidden pl-4 border-l border-dark-border">
+                    <!-- Detail area (scrollable) -->
+                    <div id="workflowDetail" class="flex-1 overflow-y-auto custom-scrollbar space-y-3 pb-3 min-h-0">
+                        <div class="text-gray-500 italic text-center py-12">Select a workflow to view details</div>
+                    </div>
 
-                <div>
-                    <label class="block text-sm font-medium text-gray-300 mb-2">Output</label>
-                    <div id="workflowOutput"
-                        class="bg-dark-surface border border-dark-border rounded-lg p-4 min-h-[200px] font-mono text-sm text-gray-300 whitespace-pre-wrap overflow-x-auto"></div>
+                    <!-- Activity & Output (always visible, pinned bottom) -->
+                    <div class="flex-shrink-0 pt-3 border-t border-dark-border space-y-3">
+                        <!-- Activity log -->
+                        <div>
+                            <div class="flex justify-between items-center mb-1.5">
+                                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider flex items-center gap-1.5">
+                                    <i class="fas fa-terminal"></i>
+                                    Activity
+                                </h3>
+                                <div class="flex items-center gap-2">
+                                    <span id="statusDot" class="inline-block w-2 h-2 rounded-full bg-gray-600"></span>
+                                    <span id="statusMessage" class="text-xs text-gray-500">Idle</span>
+                                    <span id="statusTime" class="text-xs font-mono text-gray-600">&mdash;</span>
+                                </div>
+                            </div>
+                            <div id="statusLog" class="bg-dark-bg rounded-lg p-2.5 h-32 overflow-y-auto space-y-0.5 border border-dark-border custom-scrollbar"></div>
+                        </div>
+
+                        <!-- Interrupt prompt (shown when HITL input required) -->
+                        <div id="interruptPrompt"></div>
+
+                        <!-- Output -->
+                        <div>
+                            <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1.5 flex items-center gap-1.5">
+                                <i class="fas fa-code"></i>
+                                Output
+                            </h3>
+                            <div id="workflowOutput" class="bg-dark-bg border border-dark-border rounded-lg p-2.5 h-24 font-mono text-xs text-gray-500 whitespace-pre-wrap overflow-auto custom-scrollbar">No output yet</div>
+                        </div>
+                    </div>
                 </div>
             </div>
         `;