agent-orcha 0.0.5 → 0.0.8

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

@@ -1,9 +1,15 @@
 
 import { Component } from '../utils/Component.js';
 import { api } from '../services/ApiService.js';
+import { sessionStore } from '../services/SessionStore.js';
+import { streamManager } from '../services/StreamManager.js';
+import { escapeHtml as sharedEscapeHtml } from '../utils/card.js';
 import { store } from '../store.js';
 import { markdownRenderer } from '../utils/markdown.js';
 
+// Survives component remount (tab navigation) but not page refresh
+const workflowTasks = new Map();
+
 export class AgentsView extends Component {
     constructor() {
         super();
@@ -12,19 +18,28 @@ export class AgentsView extends Component {
         this.streamStartTime = null;
         this.streamTimerInterval = null;
         this.streamUsageData = null;
+        this.pendingAttachments = [];
+        this._streamUnsubscribe = null;
     }
 
     async connectedCallback() {
         super.connectedCallback();
-        await Promise.all([this.loadAgents(), this.loadLLMs()]);
+        await Promise.all([this.loadAgents(), this.loadLLMs(), this.loadWorkflows()]);
+        this.restoreActiveSession();
     }
 
     disconnectedCallback() {
-        this.stopStreamTimer();
-        if (this.currentAbortController) {
-            this.currentAbortController.abort();
-            this.currentAbortController = null;
+        if (this._streamUnsubscribe) {
+            this._streamUnsubscribe();
+            this._streamUnsubscribe = null;
+        }
+        if (this.streamTimerInterval) {
+            clearInterval(this.streamTimerInterval);
+            this.streamTimerInterval = null;
         }
+        this.currentAbortController = null;
+        // Workflow streams continue via AbortController — no cleanup needed on tab switch
+        // (state is preserved in the module-level workflowTasks map)
     }
 
     formatElapsedTime(ms) {
@@ -41,13 +56,33 @@ export class AgentsView extends Component {
     }
 
     cancelCurrentStream() {
+        const activeId = sessionStore.getActiveId();
+
+        // Cancel via server tasks API if we have a task ID
+        if (activeId) {
+            const streamState = streamManager.getState(activeId);
+            const wfState = workflowTasks.get(activeId);
+            const taskId = streamState?.taskId || wfState?.taskId;
+            if (taskId) {
+                api.cancelTask(taskId).catch(() => {});
+            }
+        }
+
         if (this.currentAbortController) {
             this.currentAbortController.abort();
+            return;
+        }
+        if (!activeId) return;
+        const wfState = workflowTasks.get(activeId);
+        if (wfState?.abortController) {
+            wfState.abortController.abort();
+            return;
         }
+        streamManager.cancel(activeId);
     }
 
-    startStreamTimer(responseId) {
-        this.streamStartTime = Date.now();
+    startStreamTimer(responseId, startTime) {
+        this.streamStartTime = startTime || Date.now();
         this.streamTimerInterval = setInterval(() => {
             const elapsed = Date.now() - this.streamStartTime;
             const bubble = this.querySelector(`#${responseId}`);
@@ -75,7 +110,7 @@ export class AgentsView extends Component {
         const statusBar = wrapper.querySelector('.stream-status-bar');
         const statsBar = wrapper.querySelector('.stream-stats-bar');
 
-        if (statusBar) statusBar.classList.add('hidden');
+        if (statusBar) statusBar.remove();
 
         if (statsBar) {
             const elapsedEl = statsBar.querySelector('.stats-elapsed');
@@ -104,27 +139,20 @@ export class AgentsView extends Component {
 
             if (wasCancelled) {
                 const cancelBadge = document.createElement('span');
-                cancelBadge.className = 'text-xs text-amber-400 font-medium ml-2';
+                cancelBadge.className = 'badge badge-amber';
                 cancelBadge.textContent = 'Cancelled';
                 statsBar.appendChild(cancelBadge);
             }
 
-            statsBar.classList.remove('hidden');
+            statsBar.classList.add('visible');
         }
     }
 
     async loadAgents() {
         try {
             const agents = await api.getAgents();
+            agents.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
             store.set('agents', agents);
-
-            if (agents.length > 0 && !store.get('selectedAgent') && !store.get('selectedLlm')) {
-                store.set('selectedAgent', agents[agents.length - 1]);
-                store.set('selectionType', 'agent');
-            }
-
-            this.renderAgentDropdown();
-            this.updateSelectedAgentUI();
         } catch (e) {
             console.error('Failed to load agents', e);
         }
@@ -132,494 +160,1653 @@ export class AgentsView extends Component {
 
     async loadLLMs() {
         try {
-            const llms = await api.getLLMs();
+            const [llms, llmConfig] = await Promise.all([api.getLLMs(), api.getLlmConfig()]);
+            // Resolve the default model name from the config pointer
+            const defaultPointer = llmConfig?.models?.default;
+            const defaultLlmName = typeof defaultPointer === 'string' ? defaultPointer : null;
             store.set('llms', llms);
-            this.renderAgentDropdown();
+            store.set('defaultLlmName', defaultLlmName);
         } catch (e) {
             console.error('Failed to load LLMs', e);
         }
     }
 
-    renderAgentDropdown() {
-        const list = this.querySelector('#agentDropdownList');
+    async loadWorkflows() {
+        try {
+            const workflows = await api.getWorkflows();
+            workflows.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+            store.set('workflows', workflows);
+        } catch (e) {
+            console.error('Failed to load workflows', e);
+        }
+    }
+
+    // --- Sidebar toggle (mobile) ---
+
+    _isMobile() {
+        return !window.matchMedia('(min-width: 768px)').matches;
+    }
+
+    toggleSidebar(show) {
+        const sidebar = this.querySelector('#sidebar');
+        const backdrop = this.querySelector('#sidebarBackdrop');
+        if (!sidebar || !backdrop) return;
+
+        if (show) {
+            sidebar.classList.add('open');
+            backdrop.classList.add('visible');
+        } else {
+            sidebar.classList.remove('open');
+            backdrop.classList.remove('visible');
+        }
+    }
+
+    // --- Session management ---
+
+    restoreActiveSession() {
+        const activeId = sessionStore.getActiveId();
+        if (activeId && sessionStore.get(activeId)) {
+            this.switchToSession(activeId);
+        } else {
+            this.showEmptyState();
+        }
+        this.renderSessionList();
+    }
+
+    renderSessionList() {
+        const list = this.querySelector('#sessionList');
+        if (!list) return;
+
+        const sessions = sessionStore.getAll();
+        const activeId = sessionStore.getActiveId();
+
+        if (sessions.length === 0) {
+            list.innerHTML = '<div class="text-muted text-sm text-center py-8">No conversations yet</div>';
+            return;
+        }
+
+        list.innerHTML = sessions.map(s => {
+            const isActive = s.id === activeId;
+            let displayName, icon;
+            if (s.agentType === 'workflow') {
+                displayName = s.workflowName || 'Workflow';
+                icon = 'fa-project-diagram';
+            } else if (s.agentType === 'agent') {
+                displayName = s.agentName || 'Agent';
+                icon = 'fa-robot';
+            } else {
+                displayName = s.llmName || 'LLM';
+                icon = 'fa-microchip';
+            }
+
+            return `
+                <div data-session-id="${s.id}" class="session-item${isActive ? ' active' : ''}">
+                    <div class="flex-1 min-w-0">
+                        <div class="text-sm text-primary truncate">${this.escapeHtml(s.title)}</div>
+                        <div class="flex items-center gap-1 mt-1 text-xs text-muted">
+                            <i class="fas ${icon} text-2xs"></i>
+                            <span class="truncate">${this.escapeHtml(displayName)}</span>
+                        </div>
+                    </div>
+                    <button data-delete-id="${s.id}" class="session-delete-btn" title="Delete">
+                        <i class="fas fa-xmark text-xs"></i>
+                    </button>
+                </div>
+            `;
+        }).join('');
+
+        // Event listeners
+        list.querySelectorAll('.session-item').forEach(item => {
+            item.addEventListener('click', (e) => {
+                if (e.target.closest('.session-delete-btn')) return;
+                this.switchToSession(item.dataset.sessionId);
+            });
+        });
+
+        list.querySelectorAll('.session-delete-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.deleteSession(btn.dataset.deleteId);
+            });
+        });
+    }
+
+    switchToSession(sessionId) {
+        // Detach from current stream rendering (don't abort — let it continue in background)
+        if (this._streamUnsubscribe) {
+            this._streamUnsubscribe();
+            this._streamUnsubscribe = null;
+        }
+        if (this.streamTimerInterval) {
+            clearInterval(this.streamTimerInterval);
+            this.streamTimerInterval = null;
+        }
+        this.streamStartTime = null;
+        this.currentAbortController = null;
+        this.isLoading = false;
+
+        const session = sessionStore.get(sessionId);
+        if (!session) return;
+
+        sessionStore.setActiveId(sessionId);
+
+        // Update store with this session's agent/LLM
         const agents = store.get('agents') || [];
         const llms = store.get('llms') || [];
-        const selectionType = store.get('selectionType');
-        const selectedAgent = store.get('selectedAgent');
-        const selectedLlm = store.get('selectedLlm');
 
-        if (!list) return;
+        if (session.agentType === 'workflow') {
+            const workflows = store.get('workflows') || [];
+            const wf = workflows.find(w => w.name === session.workflowName);
+            store.set('selectedWorkflow', wf || null);
+            store.set('selectedAgent', null);
+            store.set('selectedLlm', null);
+            store.set('selectionType', 'workflow');
+        } else if (session.agentType === 'agent') {
+            const agent = agents.find(a => a.name === session.agentName);
+            store.set('selectedAgent', agent || null);
+            store.set('selectedLlm', null);
+            store.set('selectedWorkflow', null);
+            store.set('selectionType', 'agent');
+        } else {
+            const llm = llms.find(l => l.name === session.llmName);
+            store.set('selectedLlm', llm || null);
+            store.set('selectedAgent', null);
+            store.set('selectedWorkflow', null);
+            store.set('selectionType', 'llm');
+        }
+
+        this.restoreMessages(session);
+        this.updateChatHeader(session);
+        this.renderSessionList();
+
+        // Reconnect to active stream if one exists for this session
+        const wfState = workflowTasks.get(sessionId);
+        if (wfState && wfState.status !== 'done') {
+            this._reconnectWorkflowStream(sessionId);
+        } else if (streamManager.isActive(sessionId)) {
+            this._reconnectToStream(sessionId);
+        }
 
-        if (agents.length === 0 && llms.length === 0) {
-            list.innerHTML = '<div class="text-gray-500 text-sm text-center py-4">No agents or LLMs available</div>';
+        this.updateUiState();
+
+        // Close sidebar on mobile after selecting
+        if (this._isMobile()) {
+            this.toggleSidebar(false);
+        }
+
+        const input = this.querySelector('#chatInput');
+        if (input) {
+            input.disabled = false;
+            input.readOnly = false;
+            input.classList.remove('cursor-pointer');
+            input.focus();
+        }
+    }
+
+    async restoreMessages(session) {
+        const container = this.querySelector('#chatMessages');
+        if (!container) return;
+        container.innerHTML = '';
+
+        if (session.messages.length === 0) {
+            this._appendWelcomeMessage(container);
             return;
         }
 
-        let html = '';
+        for (const msg of session.messages) {
+            if (msg.role === 'user') {
+                this.appendMessage('user', msg.content);
+            } else {
+                this.appendRestoredAssistantMessage(msg.content, msg.meta);
+            }
+        }
+
+        // Check if server still has this session (survives restarts)
+        try {
+            const exists = await api.checkSession(session.id);
+            if (!exists) {
+                this._appendSessionResetBanner(container);
+            }
+        } catch {
+            // Server unreachable — skip banner
+        }
+    }
+
+    appendRestoredAssistantMessage(content, meta) {
+        const container = this.querySelector('#chatMessages');
+        const div = document.createElement('div');
+        div.className = 'response-wrapper';
+
+        const bubble = document.createElement('div');
+        bubble.className = 'flex justify-start';
+        bubble.innerHTML = `
+            <div class="response-bubble-inner group">
+                <div class="response-content markdown-content"></div>
+                <div class="tool-invocations"></div>
+            </div>
+        `;
+
+        const contentDiv = bubble.querySelector('.response-content');
+        if (content) {
+            const rendered = markdownRenderer.render(content);
+            contentDiv.innerHTML = rendered;
+            markdownRenderer.highlightCode(contentDiv);
+        }
+
+        // Render persisted thinking/tool pills
+        if (meta) {
+            const toolsDiv = bubble.querySelector('.tool-invocations');
+
+            if (meta.thinking) {
+                for (const thinkingContent of meta.thinking) {
+                    this._createThinkingPill(toolsDiv, thinkingContent);
+                }
+            }
+
+            if (meta.tools) {
+                for (const t of meta.tools) {
+                    if (t.output !== undefined) {
+                        this._createToolPill(toolsDiv, t.runId, t.tool, t.input, t.output);
+                    }
+                }
+            }
+
+            // Hide empty tool-invocations div
+            if (!toolsDiv.children.length) {
+                toolsDiv.classList.add('hidden');
+            }
+        } else {
+            bubble.querySelector('.tool-invocations').classList.add('hidden');
+        }
+
+        div.appendChild(bubble);
+
+        if (meta?.stats) {
+            const s = meta.stats;
+            const prefix = s.estimated ? '~' : '';
+            const tps = s.elapsed > 0 ? (s.outputTokens / (s.elapsed / 1000)).toFixed(1) : '0';
+            const statsBar = document.createElement('div');
+            statsBar.className = 'stream-stats-bar visible';
+            statsBar.innerHTML = `
+                <span class="flex items-center gap-1">
+                    <i class="far fa-clock"></i>
+                    <span>${this.formatElapsedTime(s.elapsed)}</span>
+                </span>
+                <span class="divider">|</span>
+                <span class="flex items-center gap-1">
+                    <i class="fas fa-arrow-up text-2xs"></i>
+                    <span>${prefix}${s.inputTokens} input</span>
+                </span>
+                <span class="divider">|</span>
+                <span class="flex items-center gap-1">
+                    <i class="fas fa-arrow-down text-2xs"></i>
+                    <span>${prefix}${s.outputTokens} output</span>
+                </span>
+                <span class="divider">|</span>
+                <span class="flex items-center gap-1">
+                    <i class="fas fa-bolt text-2xs"></i>
+                    <span>${prefix}${tps} tok/s</span>
+                </span>
+            `;
+            if (s.cancelled) {
+                const badge = document.createElement('span');
+                badge.className = 'badge badge-amber';
+                badge.textContent = 'Cancelled';
+                statsBar.appendChild(badge);
+            }
+            div.appendChild(statsBar);
+        }
+
+        container.appendChild(div);
+        container.scrollTop = container.scrollHeight;
+    }
+
+    showNewSessionModal() {
+        // Remove existing modal if any
+        const existing = document.querySelector('#newSessionModal');
+        if (existing) existing.remove();
+
+        const agents = store.get('agents') || [];
+        const workflows = store.get('workflows') || [];
+        const llms = store.get('llms') || [];
+
+        const overlay = document.createElement('div');
+        overlay.id = 'newSessionModal';
+        overlay.className = 'modal-backdrop';
+
+        let itemsHtml = '';
 
-        // Agents section
         if (agents.length > 0) {
-            html += '<div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider bg-dark-bg/50">Agents</div>';
-            html += agents.map(agent => {
-                const isSelected = selectionType === 'agent' && selectedAgent?.name === agent.name;
-                return `
-                    <div data-type="agent" data-name="${agent.name}" class="selection-item px-4 py-3 hover:bg-dark-hover cursor-pointer transition-colors border-b border-dark-border ${isSelected ? 'bg-dark-hover' : ''}">
-                        <div class="flex items-start justify-between">
-                            <div class="flex-1">
-                                <div class="font-medium text-gray-200 mb-0.5">${agent.name}</div>
-                                <div class="text-xs text-gray-500 line-clamp-2">${agent.description}</div>
-                            </div>
-                            ${isSelected ? '<i class="fas fa-check text-blue-400 ml-2 mt-1"></i>' : ''}
-                        </div>
+            itemsHtml += '<div class="modal-section-label">Agents</div>';
+            itemsHtml += agents.map(a => `
+                <button data-type="agent" data-name="${this.escapeHtml(a.name)}" class="modal-pick-item">
+                    <i class="fas fa-robot text-blue text-sm"></i>
+                    <div class="flex-1 min-w-0">
+                        <div class="text-sm font-medium text-primary">${this.escapeHtml(a.name)}</div>
+                        <div class="text-xs text-muted truncate">${this.escapeHtml(a.description || '')}</div>
                     </div>
-                `;
-            }).join('');
+                </button>
+            `).join('');
+        }
+
+        if (workflows.length > 0) {
+            itemsHtml += '<div class="modal-section-label">Workflows</div>';
+            itemsHtml += workflows.map(w => `
+                <button data-type="workflow" data-name="${this.escapeHtml(w.name)}" class="modal-pick-item">
+                    <i class="fas fa-project-diagram text-orange text-sm"></i>
+                    <div class="flex-1 min-w-0">
+                        <div class="text-sm font-medium text-primary">${this.escapeHtml(w.name)}</div>
+                        <div class="text-xs text-muted truncate">${this.escapeHtml(w.description || '')}</div>
+                    </div>
+                </button>
+            `).join('');
         }
 
-        // LLMs section
         if (llms.length > 0) {
-            html += '<div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider bg-dark-bg/50">LLMs</div>';
-            html += llms.map(llm => {
-                const isSelected = selectionType === 'llm' && selectedLlm?.name === llm.name;
+            const defaultLlmName = store.get('defaultLlmName');
+            itemsHtml += '<div class="modal-section-label">LLMs</div>';
+            itemsHtml += llms.map(l => {
+                const isDefault = l.name === defaultLlmName;
                 return `
-                    <div data-type="llm" data-name="${llm.name}" class="selection-item px-4 py-3 hover:bg-dark-hover cursor-pointer transition-colors border-b border-dark-border last:border-b-0 ${isSelected ? 'bg-dark-hover' : ''}">
-                        <div class="flex items-start justify-between">
-                            <div class="flex-1">
-                                <div class="font-medium text-gray-200 mb-0.5">${llm.name}</div>
-                                <div class="text-xs text-gray-500 line-clamp-2">${llm.model}</div>
-                            </div>
-                            ${isSelected ? '<i class="fas fa-check text-blue-400 ml-2 mt-1"></i>' : ''}
+                <button data-type="llm" data-name="${this.escapeHtml(l.name)}" class="modal-pick-item">
+                    <i class="fas fa-microchip text-purple text-sm"></i>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-center gap-2">
+                            <span class="text-sm font-medium text-primary">${this.escapeHtml(l.name)}</span>
+                            ${isDefault ? '<span class="badge badge-green text-2xs">default</span>' : ''}
                         </div>
+                        <div class="text-xs text-muted truncate">${this.escapeHtml(l.model || '')}</div>
                     </div>
-                `;
-            }).join('');
+                </button>
+            `}).join('');
         }
 
-        list.innerHTML = html;
+        if (!itemsHtml) {
+            itemsHtml = '<div class="text-muted text-sm text-center py-8">No agents, workflows or LLMs available</div>';
+        }
 
-        list.querySelectorAll('.selection-item').forEach(item => {
+        overlay.innerHTML = `
+            <div class="modal-content modal-content-sm">
+                <div class="modal-header">
+                    <h3 class="text-lg font-semibold text-primary">New conversation</h3>
+                    <button id="closeNewSessionModal" class="modal-close-btn">
+                        <i class="fas fa-xmark"></i>
+                    </button>
+                </div>
+                <div class="overflow-y-auto custom-scrollbar flex-1">
+                    ${itemsHtml}
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(overlay);
+
+        // Close on backdrop click
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) overlay.remove();
+        });
+
+        overlay.querySelector('#closeNewSessionModal').addEventListener('click', () => overlay.remove());
+
+        // Pick handler
+        overlay.querySelectorAll('.modal-pick-item').forEach(item => {
             item.addEventListener('click', () => {
                 const type = item.dataset.type;
                 const name = item.dataset.name;
 
-                // Check if we're actually switching to a different agent/llm
-                const currentType = store.get('selectionType');
-                const currentAgent = store.get('selectedAgent');
-                const currentLlm = store.get('selectedLlm');
-                const currentName = currentType === 'agent' ? currentAgent?.name : currentLlm?.name;
-
-                const isSwitching = !(type === currentType && name === currentName);
-
-                if (type === 'agent') {
-                    const agent = agents.find(a => a.name === name);
-                    store.set('selectedAgent', agent);
-                    store.set('selectedLlm', null);
-                    store.set('selectionType', 'agent');
-                } else if (type === 'llm') {
-                    const llm = llms.find(l => l.name === name);
-                    store.set('selectedLlm', llm);
-                    store.set('selectedAgent', null);
-                    store.set('selectionType', 'llm');
+                const session = sessionStore.create({
+                    agentName: type === 'agent' ? name : null,
+                    agentType: type,
+                    llmName: type === 'llm' ? name : null,
+                    workflowName: type === 'workflow' ? name : null
+                });
+
+                overlay.remove();
+                this.switchToSession(session.id);
+            });
+        });
+    }
+
+    showNewAgentModal() {
+        const existing = document.querySelector('#newAgentModal');
+        if (existing) existing.remove();
+
+        const agents = store.get('agents') || [];
+        const hasArchitect = agents.some(a => a.name === 'architect');
+
+        const overlay = document.createElement('div');
+        overlay.id = 'newAgentModal';
+        overlay.className = 'modal-backdrop';
+
+        overlay.innerHTML = `
+            <div class="modal-content modal-content-sm">
+                <div class="modal-header">
+                    <h3 class="text-lg font-semibold text-primary">Create a new agent</h3>
+                    <button id="closeNewAgentModal" class="modal-close-btn">
+                        <i class="fas fa-xmark"></i>
+                    </button>
+                </div>
+                <div class="p-4 flex flex-col gap-3">
+                    ${hasArchitect ? `
+                    <button id="agentViaArchitect" class="new-agent-option">
+                        <div class="new-agent-option-icon bg-blue">
+                            <i class="fas fa-comments"></i>
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <div class="text-sm font-medium text-primary">Chat with Architect</div>
+                            <div class="text-xs text-muted">Describe what you need and the Architect agent will build it for you</div>
+                        </div>
+                        <i class="fas fa-chevron-right text-xs text-muted"></i>
+                    </button>
+                    ` : ''}
+                    <button id="agentViaIde" class="new-agent-option">
+                        <div class="new-agent-option-icon bg-green">
+                            <i class="fas fa-code"></i>
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <div class="text-sm font-medium text-primary">Create in IDE</div>
+                            <div class="text-xs text-muted">Open the IDE editor with a blank agent template</div>
+                        </div>
+                        <i class="fas fa-chevron-right text-xs text-muted"></i>
+                    </button>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(overlay);
+
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) overlay.remove();
+        });
+
+        overlay.querySelector('#closeNewAgentModal').addEventListener('click', () => overlay.remove());
+
+        if (hasArchitect) {
+            overlay.querySelector('#agentViaArchitect').addEventListener('click', () => {
+                overlay.remove();
+                const session = sessionStore.create({
+                    agentName: 'architect',
+                    agentType: 'agent',
+                    llmName: null,
+                    workflowName: null,
+                });
+                this.switchToSession(session.id);
+            });
+        }
+
+        overlay.querySelector('#agentViaIde').addEventListener('click', () => {
+            overlay.remove();
+            store.set('activeTab', 'ide');
+            window.location.hash = 'ide';
+            // Wait for IDE to mount, then trigger the new agent dialog
+            setTimeout(() => {
+                const ide = document.querySelector('ide-view');
+                if (ide && ide._selectResourceType) {
+                    ide._selectResourceType('agent');
                 }
+            }, 200);
+        });
+    }
+
+    deleteSession(sessionId) {
+        sessionStore.delete(sessionId);
+        const activeId = sessionStore.getActiveId();
+
+        if (!activeId || activeId === sessionId) {
+            // Switch to most recent remaining session
+            const sessions = sessionStore.getAll();
+            if (sessions.length > 0) {
+                this.switchToSession(sessions[0].id);
+            } else {
+                this.showEmptyState();
+                this.renderSessionList();
+            }
+        } else {
+            this.renderSessionList();
+        }
+    }
+
+    showEmptyState() {
+        const container = this.querySelector('#chatMessages');
+        if (container) {
+            container.innerHTML = `
+                <div class="flex-1 flex items-center justify-center h-full">
+                    <div class="text-center text-muted">
+                        <i class="fas fa-comments text-4xl mb-4 text-muted"></i>
+                        <p class="text-lg">Start a new conversation</p>
+                        <p class="text-sm mt-1">Click "New chat" to begin</p>
+                    </div>
+                </div>
+            `;
+        }
 
-                // Clear chat history when switching
-                if (isSwitching) {
-                    this.clearChatHistory();
+        this.updateChatHeader(null);
+
+        const input = this.querySelector('#chatInput');
+        if (input) {
+            input.disabled = false;
+            input.readOnly = true;
+            input.classList.add('cursor-pointer');
+        }
+
+        const btn = this.querySelector('#sendMessageBtn');
+        if (btn) btn.disabled = true;
+    }
+
+    updateChatHeader(session) {
+        const header = this.querySelector('#chatHeader');
+        if (!header) return;
+
+        if (!session) {
+            header.innerHTML = '<span class="text-muted">No conversation selected</span>';
+            return;
+        }
+
+        let name, badgeText, badgeVariant, icon;
+        if (session.agentType === 'workflow') {
+            name = session.workflowName || 'Workflow';
+            badgeText = 'Workflow';
+            badgeVariant = 'badge-orange';
+            icon = 'fa-project-diagram';
+        } else if (session.agentType === 'agent') {
+            name = session.agentName || 'Agent';
+            badgeText = 'Agent';
+            badgeVariant = 'badge-blue';
+            icon = 'fa-robot';
+        } else {
+            name = session.llmName || 'LLM';
+            badgeText = 'LLM';
+            badgeVariant = 'badge-purple';
+            icon = 'fa-microchip';
+        }
+        const isAgent = session.agentType === 'agent';
+
+        let extraBadges = '';
+        if (isAgent) {
+            const agents = store.get('agents') || [];
+            const agent = agents.find(a => a.name === session.agentName);
+            if (agent) {
+                if (agent.publish?.enabled) {
+                    const chatUrl = `/chat/${encodeURIComponent(agent.name)}`;
+                    extraBadges += `<a href="${chatUrl}" target="_blank" class="badge badge-pill badge-green no-underline" title="Open published chat"><i class="fas fa-globe text-2xs"></i> Published</a>`;
                 }
 
-                this.updateSelectedAgentUI();
-                this.toggleDropdown(false);
-                this.renderAgentDropdown(); // Re-render to update selection checkmark
+                const hasMemory = agent.memory === true || (agent.memory && agent.memory.enabled);
+                if (hasMemory) {
+                    extraBadges += `<span class="badge badge-pill badge-amber" title="Persistent memory enabled"><i class="fas fa-brain text-2xs"></i> Memory</span>`;
+                }
+
+                if (agent.tools?.length) {
+                    const toolNames = agent.tools.map(t => typeof t === 'string' ? t : t.name);
+                    const toolListHtml = toolNames.map(t => `<div class="tools-popover-item">${this.escapeHtml(t)}</div>`).join('');
+                    extraBadges += `
+                        <span class="tools-badge-wrapper">
+                            <span class="badge badge-pill badge-gray"><i class="fas fa-wrench text-2xs"></i> ${toolNames.length} tool${toolNames.length !== 1 ? 's' : ''}</span>
+                            <div class="tools-popover">${toolListHtml}</div>
+                        </span>`;
+                }
+            }
+        }
+
+        header.innerHTML = `
+            <div class="flex items-center gap-2 flex-wrap">
+                <i class="fas ${icon} text-sm text-secondary"></i>
+                <span class="font-medium text-primary">${this.escapeHtml(name)}</span>
+                <span class="badge badge-pill ${badgeVariant}">${badgeText}</span>
+                ${extraBadges}
+            </div>
+        `;
+    }
+
+    // --- File Attachments ---
+
+    handleFileSelect(e) {
+        const files = Array.from(e.target.files);
+        e.target.value = '';
+
+        const needsConversion = ['image/webp', 'image/bmp', 'image/tiff'];
+
+        for (const file of files) {
+            if (needsConversion.includes(file.type)) {
+                this.convertImageToJpeg(file);
+            } else {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    const dataUrl = reader.result;
+                    const commaIdx = dataUrl.indexOf(',');
+                    const base64 = dataUrl.slice(commaIdx + 1);
+                    const mediaType = file.type || 'application/octet-stream';
+
+                    this.pendingAttachments.push({ data: base64, mediaType, name: file.name });
+                    this.renderAttachmentPreview();
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+    }
+
+    convertImageToJpeg(file) {
+        const img = new Image();
+        const url = URL.createObjectURL(file);
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            canvas.getContext('2d').drawImage(img, 0, 0);
+            URL.revokeObjectURL(url);
+
+            const dataUrl = canvas.toDataURL('image/jpeg', 0.92);
+            const base64 = dataUrl.split(',')[1];
+            this.pendingAttachments.push({ data: base64, mediaType: 'image/jpeg', name: file.name });
+            this.renderAttachmentPreview();
+        };
+        img.src = url;
+    }
+
+    renderAttachmentPreview() {
+        const preview = this.querySelector('#attachmentPreview');
+        if (!preview) return;
+
+        if (this.pendingAttachments.length === 0) {
+            preview.classList.remove('visible');
+            preview.innerHTML = '';
+            return;
+        }
+
+        preview.classList.add('visible');
+        preview.innerHTML = this.pendingAttachments.map((att, i) => {
+            const isImage = att.mediaType.startsWith('image/');
+            const thumb = isImage
+                ? `<img src="data:${att.mediaType};base64,${att.data}">`
+                : `<i class="fas fa-file text-secondary text-lg"></i>`;
+            return `
+                <div class="attachment-pill">
+                    ${thumb}
+                    <span class="truncate attachment-name">${this.escapeHtml(att.name)}</span>
+                    <button class="attachment-remove" data-index="${i}">
+                        <i class="fas fa-xmark text-xs"></i>
+                    </button>
+                </div>
+            `;
+        }).join('');
+
+        preview.querySelectorAll('.attachment-remove').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const idx = parseInt(e.currentTarget.dataset.index, 10);
+                this.pendingAttachments.splice(idx, 1);
+                this.renderAttachmentPreview();
             });
         });
     }
 
-    updateSelectedAgentUI() {
+    clearAttachments() {
+        this.pendingAttachments = [];
+        this.renderAttachmentPreview();
+    }
+
+    // --- Messaging ---
+
+    async sendMessage() {
+        const input = this.querySelector('#chatInput');
+        const message = input.value.trim();
         const selectionType = store.get('selectionType');
         const agent = store.get('selectedAgent');
         const llm = store.get('selectedLlm');
-        const nameEl = this.querySelector('#selectedAgentName');
-        const btn = this.querySelector('#sendMessageBtn');
+        const activeId = sessionStore.getActiveId();
+
+        const hasAttachments = this.pendingAttachments.length > 0;
+        if ((!message && !hasAttachments) || this.isLoading || !activeId) return;
+
+        // Handle workflow messages (including interrupt responses)
+        if (selectionType === 'workflow') {
+            return this._sendWorkflowMessage(message);
+        }
 
         const selected = selectionType === 'agent' ? agent : llm;
+        if (!selected) return;
+
+        const attachments = hasAttachments ? [...this.pendingAttachments] : null;
+
+        this.appendMessage('user', message || '(attached files)', { attachments });
+        sessionStore.addMessage(activeId, 'user', message || '(attached files)');
+        input.value = '';
+        input.style.height = 'auto';
+        this.clearAttachments();
+
+        this.isLoading = true;
+        this.updateUiState();
+
+        const responseId = 'response-' + Date.now();
+        this.createResponseBubble(responseId);
+
+        const abortController = new AbortController();
+        this.currentAbortController = abortController;
+        this.streamUsageData = null;
+        this.startStreamTimer(responseId);
+
+        try {
+            let response;
+            if (selectionType === 'agent') {
+                const inputVars = agent.inputVariables || ['message'];
+                const inputObj = {};
+                inputObj[inputVars[0] || 'message'] = message;
+                if (attachments) inputObj.attachments = attachments;
+                response = await api.streamAgent(agent.name, inputObj, activeId, { signal: abortController.signal });
+            } else {
+                response = await api.streamLLM(llm.name, message, activeId, attachments, { signal: abortController.signal });
+            }
+
+            streamManager.start(activeId, {
+                response,
+                abortController,
+                streamType: selectionType === 'agent' ? 'agent' : 'llm',
+                inputMessage: message,
+                responseId,
+            });
 
-        if (nameEl && selected) {
-            nameEl.textContent = selected.name;
-        } else if (nameEl) {
-            nameEl.textContent = 'Select Agent/LLM';
+            this._attachToStream(activeId, responseId);
+        } catch (e) {
+            const wasCancelled = e.name === 'AbortError';
+            if (!wasCancelled) {
+                this.updateResponseError(responseId, `Error: ${e.message}`);
+            }
+            this.stopStreamTimer(responseId, message, '', wasCancelled);
+            this.currentAbortController = null;
+            this.isLoading = false;
+            this.updateUiState();
         }
 
-        if (btn) btn.disabled = !selected || this.isLoading;
+        this.renderSessionList();
     }
 
-    toggleDropdown(show) {
-        const dropdown = this.querySelector('#agentDropdown');
-        if (dropdown) {
-            if (show === undefined) {
-                dropdown.classList.toggle('hidden');
-            } else if (show) {
-                dropdown.classList.remove('hidden');
+    _attachToStream(sessionId, responseId, initialThinkingState) {
+        const state = streamManager.getState(sessionId);
+        if (!state) return;
+
+        const thinkingState = initialThinkingState || {
+            inThinking: false,
+            thinkingSections: [],
+            currentSection: null,
+            thinkingContent: '',
+            thinkingPill: null,
+        };
+
+        // For LLM streams, remove loading dots (skip if reconnecting with no content yet)
+        if (state.streamType === 'llm') {
+            const hasContent = state.content || state.events.length > 0;
+            if (hasContent || !initialThinkingState) {
+                const bubble = this.querySelector(`#${responseId}`);
+                if (bubble) {
+                    const contentDiv = bubble.querySelector('.response-content');
+                    const loadingDots = contentDiv?.querySelector('.loading-dots');
+                    if (loadingDots) {
+                        loadingDots.remove();
+                        bubble.querySelector('.response-bubble-inner')?.classList.remove('loading');
+                        contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
+                        contentDiv.innerHTML = '';
+                    }
+                }
+            }
+        }
+
+        let hasToolCalls = false;
+
+        this._streamUnsubscribe = streamManager.subscribe(sessionId, (event) => {
+            if (event.type === '_stream_end') {
+                this.streamUsageData = state.usageData;
+                const wasCancelled = event.status === 'cancelled';
+
+                // Finalize any in-progress thinking pill
+                const bubble = this.querySelector(`#${responseId}`);
+                if (bubble) {
+                    const toolsDiv = bubble.querySelector('.tool-invocations');
+                    this.finalizeThinkingPill(toolsDiv, thinkingState);
+                }
+
+                if (state.streamType === 'agent') {
+                    if (hasToolCalls && !state.content.trim()) {
+                        const bubble = this.querySelector(`#${responseId}`);
+                        if (bubble) {
+                            const contentDiv = bubble.querySelector('.response-content');
+                            const loadingDots = contentDiv?.querySelector('.loading-dots');
+                            if (loadingDots) {
+                                loadingDots.remove();
+                                bubble.querySelector('.response-bubble-inner')?.classList.remove('loading');
+                                contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
+                                contentDiv.innerHTML = '';
+                            }
+                        }
+                    }
+                }
+
+                this.stopStreamTimer(responseId, state.inputMessage, state.content, wasCancelled);
+                this.currentAbortController = null;
+                this.isLoading = false;
+                this.updateUiState();
+                this.renderSessionList();
+                this._streamUnsubscribe = null;
+
+                const input = this.querySelector('#chatInput');
+                if (input) input.focus();
+                return;
+            }
+
+            if (state.streamType === 'agent') {
+                if (event.type === 'tool_start' || event.type === 'tool_end') hasToolCalls = true;
+                this.handleStreamEvent(event, responseId, state.content, thinkingState);
+            } else {
+                if (event.type === 'usage') {
+                    this.streamUsageData = state.usageData;
+                    return;
+                }
+                if (event.error) {
+                    this.updateResponseError(responseId, `Error: ${event.error}`);
+                    return;
+                }
+                if (event.type === 'thinking') {
+                    const bubble = this.querySelector(`#${responseId}`);
+                    if (bubble) {
+                        const toolsDiv = bubble.querySelector('.tool-invocations');
+                        const container = this.querySelector('#chatMessages');
+                        const loadingDots = bubble.querySelector('.response-content .loading-dots');
+                        if (loadingDots) {
+                            loadingDots.remove();
+                            bubble.querySelector('.response-bubble-inner')?.classList.remove('loading');
+                            const contentDiv = bubble.querySelector('.response-content');
+                            contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
+                            contentDiv.innerHTML = '';
+                        }
+                        this.handleThinkingEvent(event, toolsDiv, thinkingState, container);
+                    }
+                    return;
+                }
+                if (event.content) {
+                    const bubble = this.querySelector(`#${responseId}`);
+                    if (bubble) {
+                        const contentDiv = bubble.querySelector('.response-content');
+                        const toolsDiv = bubble.querySelector('.tool-invocations');
+                        const loadingDots = contentDiv?.querySelector('.loading-dots');
+                        if (loadingDots) {
+                            loadingDots.remove();
+                            bubble.querySelector('.response-bubble-inner')?.classList.remove('loading');
+                            contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
+                            contentDiv.innerHTML = '';
+                        }
+                        this.finalizeThinkingPill(toolsDiv, thinkingState);
+                        const container = this.querySelector('#chatMessages');
+                        this.renderLlmContentStreaming(contentDiv, state.content, responseId, thinkingState);
+                        if (container) container.scrollTop = container.scrollHeight;
+                    }
+                }
+            }
+        });
+    }
+
+    _reconnectToStream(sessionId) {
+        const state = streamManager.getState(sessionId);
+        if (!state || state.status !== 'streaming') return false;
+
+        this.createResponseBubble(state.responseId);
+        const snapshotState = this._renderStreamSnapshot(state.responseId, state);
+
+        const thinkingState = {
+            inThinking: false,
+            thinkingSections: [],
+            currentSection: null,
+            thinkingContent: snapshotState.thinkingContent || '',
+            thinkingPill: snapshotState.thinkingPill || null,
+        };
+
+        this.streamUsageData = state.usageData;
+        this.startStreamTimer(state.responseId, state.startTime);
+
+        this.isLoading = true;
+        this.currentAbortController = state.abortController;
+        this.updateUiState();
+
+        this._attachToStream(sessionId, state.responseId, thinkingState);
+        return true;
+    }
+
+    _renderStreamSnapshot(responseId, state) {
+        const bubble = this.querySelector(`#${responseId}`);
+        if (!bubble) return {};
+
+        const contentDiv = bubble.querySelector('.response-content');
+        const toolsDiv = bubble.querySelector('.tool-invocations');
+
+        const hasVisualContent = state.content ||
+            state.events.some(e => e.type === 'thinking' || e.type === 'tool_start' || e.type === 'content');
+        const loadingDots = contentDiv.querySelector('.loading-dots');
+        if (loadingDots && hasVisualContent) {
+            loadingDots.remove();
+            bubble.querySelector('.response-bubble-inner').classList.remove('loading');
+            contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
+            contentDiv.innerHTML = '';
+        }
+
+        let activeThinkingPill = null;
+        let activeThinkingContent = '';
+
+        if (state.streamType === 'agent') {
+            const tools = new Map();
+            const completedThinking = [];
+            let currentThinking = '';
+            let lastWasThinking = false;
+            let lastReactIteration = null;
+
+            for (const event of state.events) {
+                if (event.type === 'thinking') {
+                    currentThinking += event.content;
+                    lastWasThinking = true;
+                } else {
+                    if (lastWasThinking && currentThinking) {
+                        completedThinking.push(currentThinking);
+                        currentThinking = '';
+                    }
+                    lastWasThinking = false;
+                }
+
+                if (event.type === 'tool_start') {
+                    tools.set(event.runId, { tool: event.tool, input: event.input, done: false });
+                }
+                if (event.type === 'tool_end') {
+                    const t = tools.get(event.runId);
+                    if (t) { t.output = event.output; t.done = true; }
+                }
+                if (event.type === 'react_iteration') {
+                    lastReactIteration = event;
+                }
+            }
+
+            for (const content of completedThinking) {
+                this._createThinkingPill(toolsDiv, content);
+            }
+
+            if (lastWasThinking && currentThinking) {
+                const pill = document.createElement('div');
+                pill.className = 'tool-pill thinking';
+                pill.innerHTML = '<i class="fas fa-brain animate-pulse text-2xs"></i><span>Thinking...</span>';
+                toolsDiv.appendChild(pill);
+                activeThinkingPill = pill;
+                activeThinkingContent = currentThinking;
+            }
+
+            for (const [runId, t] of tools) {
+                if (t.done) {
+                    this._createToolPill(toolsDiv, runId, t.tool, t.input, t.output);
+                } else {
+                    const toolEl = document.createElement('div');
+                    toolEl.id = `tool-${runId}`;
+                    toolEl.className = 'tool-pill';
+                    toolEl.dataset.toolInput = typeof t.input === 'string' ? t.input : JSON.stringify(t.input, null, 2);
+                    toolEl.innerHTML = `<i class="fas fa-circle-notch animate-spin text-blue text-2xs"></i><span>${this.escapeHtml(t.tool)}</span>`;
+                    toolsDiv.appendChild(toolEl);
+                }
+            }
+
+            if (lastReactIteration) {
+                const wrapper = bubble.closest('.response-wrapper');
+                const statusText = wrapper?.querySelector('.stream-status-text');
+                if (statusText) {
+                    const contextKB = (lastReactIteration.contextChars / 1024).toFixed(1);
+                    statusText.textContent = `Iteration ${lastReactIteration.iteration} · ${contextKB} KB context`;
+                }
+            }
+        }
+
+        if (state.content) {
+            const div = document.createElement('div');
+            div.className = 'content-text markdown-content';
+            div.innerHTML = markdownRenderer.render(state.content);
+            markdownRenderer.highlightCode(div);
+            contentDiv.appendChild(div);
+        }
+
+        const container = this.querySelector('#chatMessages');
+        if (container) container.scrollTop = container.scrollHeight;
+
+        return { thinkingPill: activeThinkingPill, thinkingContent: activeThinkingContent };
+    }
+
+    // --- Workflow chat integration ---
+
+    async _sendWorkflowMessage(message) {
+        const activeId = sessionStore.getActiveId();
+        const wfState = workflowTasks.get(activeId);
+
+        if (wfState?.interruptState) {
+            return this._respondToWorkflowInterrupt(activeId, message);
+        }
+
+        const workflow = store.get('selectedWorkflow');
+        if (!workflow) return;
+
+        const schema = workflow.inputSchema || {};
+        const firstField = Object.keys(schema)[0] || 'input';
+        const inputObj = { [firstField]: message };
+
+        const input = this.querySelector('#chatInput');
+        this.appendMessage('user', message);
+        sessionStore.addMessage(activeId, 'user', message);
+        input.value = '';
+        input.style.height = 'auto';
+        this.clearAttachments();
+
+        const responseId = 'response-' + Date.now();
+        this.createResponseBubble(responseId);
+        this.isLoading = true;
+        this.updateUiState();
+        this.startStreamTimer(responseId);
+
+        const abortController = new AbortController();
+        workflowTasks.set(activeId, {
+            responseId,
+            startTime: Date.now(),
+            chatOutputFormat: workflow.chatOutputFormat || 'json',
+            workflowName: workflow.name,
+            abortController,
+            interruptState: null,
+            status: 'streaming',
+            events: [],
+            inputMessage: message,
+            taskId: null,
+        });
+
+        try {
+            const response = await api.startWorkflowStream(workflow.name, inputObj, abortController.signal);
+            await this._processWorkflowStream(response, activeId, responseId);
+        } catch (e) {
+            if (e.name === 'AbortError') {
+                this._finishWorkflowStream(activeId, responseId, null, null, true);
             } else {
-                dropdown.classList.add('hidden');
+                this.updateResponseError(responseId, `Error: ${e.message}`);
+                this.stopStreamTimer(responseId, message, '', false);
+                this.isLoading = false;
+                this.updateUiState();
             }
         }
-    }
 
-    async sendMessage() {
-        const input = this.querySelector('#chatInput');
-        const message = input.value.trim();
-        const selectionType = store.get('selectionType');
-        const agent = store.get('selectedAgent');
-        const llm = store.get('selectedLlm');
+        this.renderSessionList();
+    }
 
-        const selected = selectionType === 'agent' ? agent : llm;
+    async _respondToWorkflowInterrupt(sessionId, message) {
+        const wfState = workflowTasks.get(sessionId);
+        if (!wfState?.interruptState) return;
 
-        if (!message || !selected || this.isLoading) return;
+        const { threadId, workflowName } = wfState.interruptState;
 
-        // Add user message
+        const input = this.querySelector('#chatInput');
         this.appendMessage('user', message);
+        sessionStore.addMessage(sessionId, 'user', message);
         input.value = '';
         input.style.height = 'auto';
 
-        this.isLoading = true;
-        this.updateUiState();
-
         const responseId = 'response-' + Date.now();
         this.createResponseBubble(responseId);
 
-        this.currentAbortController = new AbortController();
-        this.streamUsageData = null;
-        this.startStreamTimer(responseId);
+        const abortController = new AbortController();
+        wfState.responseId = responseId;
+        wfState.interruptState = null;
+        wfState.status = 'streaming';
+        wfState.abortController = abortController;
 
-        let finalContent = '';
-        let wasCancelled = false;
+        this.isLoading = true;
+        this.updateUiState();
+        this.startStreamTimer(responseId);
 
         try {
-            if (selectionType === 'agent') {
-                finalContent = await this.sendAgentMessage(agent, message, responseId);
-            } else if (selectionType === 'llm') {
-                finalContent = await this.sendLlmMessage(llm, message, responseId);
-            }
+            const response = await api.resumeWorkflowStream(workflowName, threadId, message, abortController.signal);
+            await this._processWorkflowStream(response, sessionId, responseId);
         } catch (e) {
             if (e.name === 'AbortError') {
-                wasCancelled = true;
+                this._finishWorkflowStream(sessionId, responseId, null, null, true);
             } else {
                 this.updateResponseError(responseId, `Error: ${e.message}`);
+                this.stopStreamTimer(responseId, message, '', false);
+                this.isLoading = false;
+                this.updateUiState();
             }
-        } finally {
-            this.stopStreamTimer(responseId, message, finalContent, wasCancelled);
-            this.currentAbortController = null;
-            this.isLoading = false;
-            this.updateUiState();
-            input.focus();
         }
+
+        this.renderSessionList();
     }
 
-    async sendAgentMessage(agent, message, responseId) {
-        const inputVars = agent.inputVariables || ['message'];
-        const inputObj = {};
-        inputObj[inputVars[0] || 'message'] = message;
+    async _processWorkflowStream(response, sessionId, responseId) {
+        if (!response.ok) {
+            const text = await response.text();
+            let msg = `HTTP ${response.status}`;
+            try { msg = JSON.parse(text).error || msg; } catch { /* use status */ }
+            throw new Error(msg);
+        }
 
-        const res = await api.streamAgent(agent.name, inputObj, store.get('sessionId'), { signal: this.currentAbortController?.signal });
-        const reader = res.body.getReader();
+        const reader = response.body.getReader();
         const decoder = new TextDecoder();
-
-        const bubble = this.querySelector(`#${responseId}`);
-        const contentDiv = bubble.querySelector('.response-content');
-        const container = this.querySelector('#chatMessages');
-        const thinkingState = {
-            inThinking: false,
-            thinkingSections: [],
-            currentSection: null
-        };
-
-        let currentContent = '';
         let buffer = '';
-        let hasToolCalls = false;
 
         while (true) {
             const { done, value } = await reader.read();
             if (done) break;
 
-            const chunk = decoder.decode(value, { stream: true });
-            buffer += chunk;
-
+            buffer += decoder.decode(value, { stream: true });
             const lines = buffer.split('\n');
             buffer = lines.pop() || '';
 
             for (const line of lines) {
-                if (line.trim() === '') continue;
-
-                if (line.startsWith('data: ')) {
-                    const data = line.slice(6);
-                    if (data === '[DONE]') continue;
-
-                    try {
-                        const event = JSON.parse(data);
-
-                        // Handle server-side errors
-                        if (event.error) {
-                            this.updateResponseError(responseId, `Error: ${event.error}`);
-                            return currentContent;
-                        }
-
-                        if (event.type === 'content') {
-                            currentContent += event.content;
-                        }
-                        if (event.type === 'tool_start' || event.type === 'tool_end') {
-                            hasToolCalls = true;
-                        }
-                        this.handleStreamEvent(event, responseId, currentContent, thinkingState);
-                    } catch (e) {
-                        console.error('Error parsing stream event', e, data);
-                    }
+                if (!line.startsWith('data: ')) continue;
+                const payload = line.slice(6).trim();
+                if (payload === '[DONE]') continue;
+
+                try {
+                    const update = JSON.parse(payload);
+                    this._handleWorkflowStreamEvent(update, sessionId, responseId);
+                } catch (e) {
+                    console.error('Workflow stream parse error:', e);
                 }
             }
         }
 
-        // If tools were called but no text content was produced, clear loading state
-        if (hasToolCalls && !currentContent.trim()) {
-            const loadingDots = contentDiv.querySelector('.loading-dots');
-            if (loadingDots) {
-                loadingDots.remove();
-                bubble.querySelector('.response-bubble-inner').classList.remove('py-4');
-                bubble.querySelector('.response-bubble-inner').classList.add('py-3');
-                contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
-                contentDiv.innerHTML = '';
+        // Process any remaining buffer
+        if (buffer.startsWith('data: ')) {
+            const payload = buffer.slice(6).trim();
+            if (payload && payload !== '[DONE]') {
+                try {
+                    const update = JSON.parse(payload);
+                    this._handleWorkflowStreamEvent(update, sessionId, responseId);
+                } catch (e) { /* ignore */ }
             }
         }
 
-        return currentContent;
+        // If stream ended without a result/error event, treat as error
+        const wfState = workflowTasks.get(sessionId);
+        if (wfState && wfState.status === 'streaming') {
+            this._finishWorkflowStream(sessionId, responseId, null, 'Stream ended unexpectedly', false);
+        }
     }
 
-    async sendLlmMessage(llm, message, responseId) {
-        const res = await api.streamLLM(llm.name, message, { signal: this.currentAbortController?.signal });
-        const reader = res.body.getReader();
-        const decoder = new TextDecoder();
+    _handleWorkflowStreamEvent(update, sessionId, responseId) {
+        const wfState = workflowTasks.get(sessionId);
+        if (!wfState) return;
+
+        // Capture task ID from server
+        if (update.type === 'task_id') {
+            wfState.taskId = update.taskId;
+            return;
+        }
 
         const bubble = this.querySelector(`#${responseId}`);
+
+        if (update.type === 'status' && bubble) {
+            const event = update.data;
+            wfState.events.push(event);
+
+            const toolsDiv = bubble.querySelector('.tool-invocations');
+            this._renderWorkflowEvent(event, toolsDiv, bubble);
+
+            // Handle interrupt — the stream returns a result with interrupted output
+        }
+
+        if (update.type === 'result') {
+            const result = update.data;
+            // Check if it's an interrupt
+            if (result?.output?.interrupted && result?.output?.threadId) {
+                this._handleWorkflowInterrupt(sessionId, responseId, result.output);
+            } else if (result?.error) {
+                this._finishWorkflowStream(sessionId, responseId, null, result.error, false);
+            } else {
+                this._finishWorkflowStream(sessionId, responseId, result, null, false);
+            }
+        }
+
+        if (update.type === 'error') {
+            this._finishWorkflowStream(sessionId, responseId, null, update.error, false);
+        }
+    }
+
+    _renderWorkflowEvent(event, toolsDiv, bubble) {
         const contentDiv = bubble.querySelector('.response-content');
-        const loadingDots = contentDiv.querySelector('.loading-dots');
-        const container = this.querySelector('#chatMessages');
 
-        if (loadingDots) {
+        if (event.type === 'step_start') {
+            const pill = document.createElement('div');
+            pill.id = `wf-step-${event.stepId}`;
+            pill.className = 'tool-pill';
+            pill.innerHTML = `<i class="fas fa-circle-notch animate-spin text-blue text-2xs"></i><span>${this.escapeHtml(event.stepId)}</span>`;
+            toolsDiv.appendChild(pill);
+        }
+
+        if (event.type === 'step_complete') {
+            const pill = toolsDiv.querySelector(`#wf-step-${event.stepId}`);
+            if (pill) {
+                pill.className = 'tool-pill done';
+                pill.innerHTML = `<i class="fas fa-check text-green text-2xs"></i><span>${this.escapeHtml(event.stepId)}</span>`;
+            }
+        }
+
+        if (event.type === 'step_error') {
+            const pill = toolsDiv.querySelector(`#wf-step-${event.stepId}`);
+            if (pill) {
+                pill.className = 'tool-pill done';
+                pill.innerHTML = `<i class="fas fa-times text-red text-2xs"></i><span>${this.escapeHtml(event.stepId)}</span>`;
+            }
+        }
+
+        if (event.type === 'tool_call') {
+            const toolName = event.message?.replace(/^Calling:?\s*/i, '').split(/\s/)[0] || 'tool';
+            const pill = document.createElement('div');
+            pill.className = 'tool-pill wf-tool-active';
+
+            const pillContent = document.createElement('span');
+            pillContent.className = 'inline-flex items-center gap-1';
+            pillContent.innerHTML = `<i class="fas fa-circle-notch animate-spin text-blue text-2xs"></i><span>${this.escapeHtml(toolName)}</span>`;
+            pill.appendChild(pillContent);
+
+            // Create details panel (populated on tool_result)
+            const details = document.createElement('div');
+            details.className = 'tool-invocation-details';
+            if (event.toolInput) {
+                const inputSection = document.createElement('div');
+                inputSection.className = 'tool-detail-section';
+                inputSection.innerHTML = '<h4>Input</h4>';
+                const inputPre = document.createElement('pre');
+                inputPre.className = 'tool-detail-pre custom-scrollbar';
+                inputPre.textContent = event.toolInput;
+                inputSection.appendChild(inputPre);
+                details.appendChild(inputSection);
+            }
+            pill.appendChild(details);
+            pill.addEventListener('click', (e) => {
+                if (details.contains(e.target)) return;
+                e.preventDefault();
+                e.stopPropagation();
+                toolsDiv.querySelectorAll('.tool-invocation-details.visible').forEach(d => {
+                    if (d !== details) d.classList.remove('visible');
+                });
+                details.classList.toggle('visible');
+            });
+            toolsDiv.appendChild(pill);
+        }
+
+        if (event.type === 'tool_result') {
+            const activePill = toolsDiv.querySelector('.wf-tool-active');
+            if (activePill) {
+                activePill.classList.remove('wf-tool-active');
+                activePill.classList.add('done');
+                const icon = activePill.querySelector('i');
+                if (icon) icon.className = 'fas fa-check text-green text-2xs';
+
+                // Append output to the details panel
+                if (event.toolOutput) {
+                    const details = activePill.querySelector('.tool-invocation-details');
+                    if (details) {
+                        const outputSection = document.createElement('div');
+                        outputSection.className = 'tool-detail-section';
+                        outputSection.innerHTML = '<h4>Output</h4>';
+                        const outputPre = document.createElement('pre');
+                        outputPre.className = 'tool-detail-pre custom-scrollbar';
+                        outputPre.textContent = event.toolOutput;
+                        outputSection.appendChild(outputPre);
+                        details.appendChild(outputSection);
+                    }
+                }
+            }
+        }
+
+        if (event.type === 'tool_discovery') {
+            // Only show the final summary pill (e.g. "35 total tools ready"), skip intermediate progress
+            if (event.message?.includes('total tools')) {
+                const pill = document.createElement('div');
+                pill.className = 'tool-pill done';
+                pill.innerHTML = `<i class="fas fa-plug text-purple text-2xs"></i><span>${this.escapeHtml(event.message)}</span>`;
+                toolsDiv.appendChild(pill);
+            }
+            const wrapper = bubble.closest('.response-wrapper');
+            const statusText = wrapper?.querySelector('.stream-status-text');
+            if (statusText) statusText.textContent = event.message || 'Discovering tools...';
+        }
+
+        if (event.type === 'react_iteration' || event.type === 'workflow_start') {
+            const wrapper = bubble.closest('.response-wrapper');
+            const statusText = wrapper?.querySelector('.stream-status-text');
+            if (statusText) statusText.textContent = event.message || 'Processing...';
+        }
+
+        // Remove loading dots on first meaningful event
+        const loadingDots = contentDiv?.querySelector('.loading-dots');
+        if (loadingDots && (event.type === 'step_start' || event.type === 'workflow_start' || event.type === 'tool_call' || event.type === 'tool_discovery' || event.type === 'react_iteration')) {
             loadingDots.remove();
-            bubble.querySelector('.response-bubble-inner').classList.remove('py-4');
-            bubble.querySelector('.response-bubble-inner').classList.add('py-3');
+            bubble.querySelector('.response-bubble-inner')?.classList.remove('loading');
             contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
             contentDiv.innerHTML = '';
         }
 
-        let buffer = '';
-        let fullContent = '';
-        const thinkingState = {
-            inThinking: false,
-            thinkingSections: [],
-            currentSection: null
-        };
+        const container = this.querySelector('#chatMessages');
+        if (container) container.scrollTop = container.scrollHeight;
+    }
 
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
+    _handleWorkflowInterrupt(sessionId, responseId, interruptData) {
+        const wfState = workflowTasks.get(sessionId);
+        if (!wfState) return;
 
-            const chunk = decoder.decode(value, { stream: true });
-            buffer += chunk;
+        wfState.status = 'interrupted';
+        const question = interruptData?.question || 'Input required';
+        wfState.interruptState = {
+            question,
+            threadId: interruptData?.threadId,
+            workflowName: wfState.workflowName,
+        };
 
-            const lines = buffer.split('\n');
-            buffer = lines.pop() || '';
+        const bubble = this.querySelector(`#${responseId}`);
+        if (bubble) {
+            const contentDiv = bubble.querySelector('.response-content');
+            const loadingDots = contentDiv?.querySelector('.loading-dots');
+            if (loadingDots) {
+                loadingDots.remove();
+                bubble.querySelector('.response-bubble-inner')?.classList.remove('loading');
+                contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
+                contentDiv.innerHTML = '';
+            }
 
-            for (const line of lines) {
-                if (line.trim() === '') continue;
+            const div = document.createElement('div');
+            div.className = 'content-text markdown-content';
+            div.innerHTML = markdownRenderer.render(question);
+            markdownRenderer.highlightCode(div);
+            contentDiv.appendChild(div);
+
+            const wrapper = bubble.closest('.response-wrapper');
+            const statusBar = wrapper?.querySelector('.stream-status-bar');
+            if (statusBar) {
+                const statusText = statusBar.querySelector('.stream-status-text');
+                if (statusText) statusText.textContent = 'Waiting for input...';
+            }
+        }
 
-                if (line.startsWith('data: ')) {
-                    const data = line.slice(6);
+        sessionStore.addMessage(sessionId, 'assistant', question);
 
-                    if (data === '[DONE]') continue;
+        if (this.streamTimerInterval) {
+            clearInterval(this.streamTimerInterval);
+            this.streamTimerInterval = null;
+        }
+        this.isLoading = false;
+        this.updateUiState();
 
-                    try {
-                        const parsed = JSON.parse(data);
+        const input = this.querySelector('#chatInput');
+        if (input) input.focus();
+    }
 
-                        if (parsed.error) {
-                            this.updateResponseError(responseId, `Error: ${parsed.error}`);
-                            return fullContent;
-                        }
+    _finishWorkflowStream(sessionId, responseId, result, error, wasCancelled) {
+        const wfState = workflowTasks.get(sessionId);
+        if (!wfState) return;
 
-                        if (parsed.type === 'usage') {
-                            this.streamUsageData = {
-                                input_tokens: parsed.input_tokens || 0,
-                                output_tokens: parsed.output_tokens || 0,
-                                total_tokens: parsed.total_tokens || 0,
-                            };
-                            continue;
-                        }
+        wfState.status = 'done';
+        wfState.abortController = null;
+
+        const bubble = this.querySelector(`#${responseId}`);
+        if (bubble) {
+            const contentDiv = bubble.querySelector('.response-content');
+            const loadingDots = contentDiv?.querySelector('.loading-dots');
+            if (loadingDots) {
+                loadingDots.remove();
+                bubble.querySelector('.response-bubble-inner')?.classList.remove('loading');
+                contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
+                contentDiv.innerHTML = '';
+            }
 
-                        const text = parsed.content || '';
+            if (error) {
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'text-red text-sm';
+                errorDiv.textContent = `Error: ${error}`;
+                contentDiv.appendChild(errorDiv);
+            } else if (wasCancelled) {
+                // No output content for cancelled
+            } else if (result?.output) {
+                this._renderWorkflowOutput(contentDiv, result.output, wfState.chatOutputFormat);
+            }
+        }
 
-                        if (text) {
-                            fullContent += text;
-                            this.renderLlmContentStreaming(contentDiv, fullContent, responseId, thinkingState);
-                            container.scrollTop = container.scrollHeight;
-                        }
-                    } catch (e) {
-                        console.error('Error parsing stream chunk:', e, data);
-                    }
-                }
+        let content = '';
+        if (error) {
+            content = `Error: ${error}`;
+        } else if (result?.output) {
+            if (wfState.chatOutputFormat === 'text') {
+                content = Object.values(result.output).join('\n\n');
+            } else {
+                content = '```json\n' + JSON.stringify(result.output, null, 2) + '\n```';
             }
         }
 
-        return fullContent;
+        const elapsed = wfState.startTime ? Date.now() - wfState.startTime : 0;
+        const meta = {
+            thinking: [],
+            tools: wfState.events
+                .filter(e => e.type === 'step_complete')
+                .map(e => ({ runId: e.stepId, tool: e.stepId, input: e.agent || '', output: e.message || 'Completed' })),
+            stats: {
+                elapsed,
+                inputTokens: Math.round((wfState.inputMessage || '').length / 4),
+                outputTokens: Math.round(content.length / 4),
+                cancelled: wasCancelled,
+                estimated: true,
+            },
+        };
+        sessionStore.addMessage(sessionId, 'assistant', content, meta);
+
+        this.stopStreamTimer(responseId, wfState.inputMessage || '', content, wasCancelled);
+        this.isLoading = false;
+        this.updateUiState();
+        this.renderSessionList();
+
+        setTimeout(() => workflowTasks.delete(sessionId), 10000);
+
+        const input = this.querySelector('#chatInput');
+        if (input) input.focus();
     }
 
-    renderLlmContentStreaming(contentDiv, fullContent, responseId, state) {
-        // Parse content to find think sections and regular text
-        const parts = [];
-        let pos = 0;
-        let thinkIndex = 0;
-
-        while (pos < fullContent.length) {
-            const thinkStart = fullContent.indexOf('[THINK]', pos);
-
-            if (thinkStart === -1) {
-                // No more think sections, add remaining text
-                const text = fullContent.slice(pos).trim();
-                if (text) {
-                    parts.push({ type: 'text', content: text });
-                }
-                break;
-            }
+    _renderWorkflowOutput(contentDiv, output, format) {
+        const div = document.createElement('div');
+        div.className = 'content-text markdown-content';
+        if (format === 'text') {
+            div.innerHTML = markdownRenderer.render(Object.values(output).join('\n\n'));
+        } else {
+            div.innerHTML = markdownRenderer.render('```json\n' + JSON.stringify(output, null, 2) + '\n```');
+        }
+        markdownRenderer.highlightCode(div);
+        contentDiv.appendChild(div);
+    }
 
-            // Add text before [THINK]
-            if (thinkStart > pos) {
-                const text = fullContent.slice(pos, thinkStart).trim();
-                if (text) {
-                    parts.push({ type: 'text', content: text });
-                }
-            }
+    _reconnectWorkflowStream(sessionId) {
+        const wfState = workflowTasks.get(sessionId);
+        if (!wfState || wfState.status === 'done') return false;
 
-            // Find the end of this think section
-            const thinkContentStart = thinkStart + 7; // After [THINK]
-            const thinkEnd = fullContent.indexOf('[/THINK]', thinkContentStart);
+        if (wfState.interruptState) {
+            this.isLoading = false;
+            this.updateUiState();
+            return true;
+        }
 
-            if (thinkEnd === -1) {
-                // Think section is still streaming
-                const thinkContent = fullContent.slice(thinkContentStart).trim();
-                parts.push({ type: 'think', content: thinkContent, complete: false, index: thinkIndex });
-                thinkIndex++;
-                break;
-            } else {
-                // Complete think section
-                const thinkContent = fullContent.slice(thinkContentStart, thinkEnd).trim();
-                parts.push({ type: 'think', content: thinkContent, complete: true, index: thinkIndex });
-                thinkIndex++;
-                pos = thinkEnd + 8; // After [/THINK]
+        // Re-create the response bubble and replay cached events
+        this.createResponseBubble(wfState.responseId);
+        const bubble = this.querySelector(`#${wfState.responseId}`);
+        if (bubble && wfState.events.length > 0) {
+            const toolsDiv = bubble.querySelector('.tool-invocations');
+            for (const event of wfState.events) {
+                this._renderWorkflowEvent(event, toolsDiv, bubble);
             }
         }
 
-        // Update DOM incrementally instead of rebuilding
-        let currentChildIndex = 0;
+        this.startStreamTimer(wfState.responseId, wfState.startTime);
+        this.isLoading = true;
+        this.currentAbortController = null;
+        this.updateUiState();
 
-        for (let i = 0; i < parts.length; i++) {
-            const part = parts[i];
-            const existingChild = contentDiv.children[currentChildIndex];
+        return true;
+    }
 
-            if (part.type === 'text') {
-                if (existingChild && existingChild.classList.contains('content-text')) {
-                    // Update existing text element with markdown
-                    const renderedHtml = markdownRenderer.render(part.content);
-                    existingChild.innerHTML = renderedHtml;
-                    markdownRenderer.highlightCode(existingChild);
+    _attachClickDetails(pillEl, detailsEl, toolsDiv, container) {
+        pillEl.addEventListener('click', (e) => {
+            if (detailsEl.contains(e.target)) return;
+            e.preventDefault();
+            e.stopPropagation();
+            toolsDiv.querySelectorAll('.tool-invocation-details.visible').forEach(d => {
+                if (d !== detailsEl) d.classList.remove('visible');
+            });
+            const wasHidden = !detailsEl.classList.contains('visible');
+            detailsEl.classList.toggle('visible');
+            if (wasHidden && container) {
+                const pillRect = pillEl.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+                const spaceRight = containerRect.right - pillRect.left;
+                if (spaceRight < 420) {
+                    detailsEl.style.right = '0';
+                    detailsEl.style.left = 'auto';
                 } else {
-                    // Create new text element
-                    const div = document.createElement('div');
-                    div.className = 'content-text markdown-content';
-                    const renderedHtml = markdownRenderer.render(part.content);
-                    div.innerHTML = renderedHtml;
-                    markdownRenderer.highlightCode(div);
-                    if (existingChild) {
-                        contentDiv.insertBefore(div, existingChild);
-                    } else {
-                        contentDiv.appendChild(div);
-                    }
+                    detailsEl.style.left = '0';
+                    detailsEl.style.right = 'auto';
                 }
-                currentChildIndex++;
-            } else if (part.type === 'think') {
-                const thinkId = `think-${responseId}-${part.index}`;
-
-                if (existingChild && existingChild.classList.contains('think-section')) {
-                    // Update existing think section
-                    const label = existingChild.querySelector('.think-label');
-                    const content = existingChild.querySelector('.think-content');
-                    if (label) {
-                        label.textContent = part.complete ? 'Thinking' : 'Thinking...';
-                    }
-                    if (content) {
-                        const renderedHtml = markdownRenderer.render(part.content);
-                        content.innerHTML = renderedHtml;
-                        content.classList.add('markdown-content');
-                        markdownRenderer.highlightCode(content);
-                    }
-                } else {
-                    // Create new think section with event listener
-                    const section = document.createElement('div');
-                    section.className = 'think-section mb-3 border-l-2 border-blue-500/40 pl-3 py-1';
-                    section.dataset.thinkIndex = part.index;
-
-                    const toggle = document.createElement('button');
-                    toggle.className = 'think-toggle flex items-center gap-1.5 text-xs text-blue-400 hover:text-blue-300 py-1 cursor-pointer';
-                    toggle.dataset.thinkId = thinkId;
-
-                    toggle.innerHTML = `
-                        <i class="fas fa-brain text-xs"></i>
-                        <span class="font-medium think-label">${part.complete ? 'Thinking' : 'Thinking...'}</span>
-                        <i class="fas fa-chevron-right text-[10px] transition-transform think-chevron"></i>
-                    `;
-
-                    const thinkContent = document.createElement('div');
-                    thinkContent.id = thinkId;
-                    thinkContent.className = 'think-content hidden text-sm text-gray-400 markdown-content mt-1 leading-relaxed';
-                    const renderedHtml = markdownRenderer.render(part.content);
-                    thinkContent.innerHTML = renderedHtml;
-                    markdownRenderer.highlightCode(thinkContent);
-
-                    // Add click handler ONCE when creating
-                    toggle.addEventListener('click', (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        const content = section.querySelector('.think-content');
-                        const chevron = section.querySelector('.think-chevron');
-
-                        if (content && chevron) {
-                            if (content.classList.contains('hidden')) {
-                                content.classList.remove('hidden');
-                                chevron.classList.remove('fa-chevron-right');
-                                chevron.classList.add('fa-chevron-down');
-                            } else {
-                                content.classList.add('hidden');
-                                chevron.classList.remove('fa-chevron-down');
-                                chevron.classList.add('fa-chevron-right');
-                            }
-                        }
-                    });
+            }
+        });
+        document.addEventListener('click', (e) => {
+            if (!pillEl.contains(e.target)) detailsEl.classList.remove('visible');
+        }, { capture: true });
+    }
 
-                    section.appendChild(toggle);
-                    section.appendChild(thinkContent);
+    _createThinkingPill(toolsDiv, content) {
+        const container = this.querySelector('#chatMessages');
+        const pill = document.createElement('div');
+        pill.className = 'tool-pill done thinking';
+
+        const pillContent = document.createElement('span');
+        pillContent.className = 'inline-flex items-center gap-1';
+        pillContent.innerHTML = '<i class="fas fa-brain text-purple text-2xs"></i><span>Thinking</span>';
+        pill.appendChild(pillContent);
+
+        const details = document.createElement('div');
+        details.className = 'tool-invocation-details';
+
+        const section = document.createElement('div');
+        section.className = 'tool-detail-section';
+        const pre = document.createElement('div');
+        pre.className = 'tool-detail-pre markdown-content custom-scrollbar';
+        pre.innerHTML = markdownRenderer.render(content);
+        markdownRenderer.highlightCode(pre);
+        section.appendChild(pre);
+        details.appendChild(section);
+        pill.appendChild(details);
+
+        this._attachClickDetails(pill, details, toolsDiv, container);
+        toolsDiv.appendChild(pill);
+    }
 
-                    if (existingChild) {
-                        contentDiv.insertBefore(section, existingChild);
-                    } else {
-                        contentDiv.appendChild(section);
-                    }
-                }
-                currentChildIndex++;
-            }
+    _createToolPill(toolsDiv, runId, toolName, input, output) {
+        const container = this.querySelector('#chatMessages');
+        const toolInput = typeof input === 'string' ? input : JSON.stringify(input, null, 2);
+        const toolOutput = typeof output === 'string' ? output : JSON.stringify(output, null, 2);
+
+        const toolEl = document.createElement('div');
+        toolEl.id = `tool-${runId}`;
+        toolEl.className = 'tool-pill done';
+
+        const pillContent = document.createElement('span');
+        pillContent.className = 'inline-flex items-center gap-1';
+        pillContent.innerHTML = `<i class="fas fa-check text-green text-2xs"></i><span>${this.escapeHtml(toolName)}</span>`;
+        toolEl.appendChild(pillContent);
+
+        const details = document.createElement('div');
+        details.className = 'tool-invocation-details';
+
+        if (toolInput) {
+            const inputSection = document.createElement('div');
+            inputSection.className = 'tool-detail-section';
+            inputSection.innerHTML = '<h4>Input</h4>';
+            const inputPre = document.createElement('pre');
+            inputPre.className = 'tool-detail-pre custom-scrollbar';
+            inputPre.textContent = toolInput;
+            inputSection.appendChild(inputPre);
+            details.appendChild(inputSection);
+        }
+
+        const outputSection = document.createElement('div');
+        outputSection.className = 'tool-detail-section';
+        outputSection.innerHTML = '<h4>Output</h4>';
+        const outputPre = document.createElement('pre');
+        outputPre.className = 'tool-detail-pre custom-scrollbar';
+        outputPre.textContent = toolOutput;
+        outputSection.appendChild(outputPre);
+        details.appendChild(outputSection);
+
+        toolEl.appendChild(details);
+
+        this._attachClickDetails(toolEl, details, toolsDiv, container);
+        toolsDiv.appendChild(toolEl);
+    }
+
+    renderLlmContentStreaming(contentDiv, fullContent, responseId, state) {
+        const existing = contentDiv.querySelector('.content-text');
+        if (existing) {
+            const renderedHtml = markdownRenderer.render(fullContent);
+            existing.innerHTML = renderedHtml;
+            markdownRenderer.highlightCode(existing);
+        } else {
+            const div = document.createElement('div');
+            div.className = 'content-text markdown-content';
+            div.innerHTML = markdownRenderer.render(fullContent);
+            markdownRenderer.highlightCode(div);
+            contentDiv.appendChild(div);
         }
+    }
 
-        // Remove any extra children
-        while (contentDiv.children.length > currentChildIndex) {
-            contentDiv.removeChild(contentDiv.lastChild);
+    handleThinkingEvent(event, toolsDiv, thinkingState, container) {
+        if (!thinkingState.thinkingContent) {
+            thinkingState.thinkingContent = '';
+        }
+        thinkingState.thinkingContent += event.content;
+
+        // Create pill on first thinking chunk
+        if (!thinkingState.thinkingPill) {
+            const pill = document.createElement('div');
+            pill.className = 'tool-pill thinking';
+            pill.innerHTML = `
+                <i class="fas fa-brain animate-pulse text-2xs"></i>
+                <span>Thinking...</span>
+            `;
+            toolsDiv.appendChild(pill);
+            thinkingState.thinkingPill = pill;
+            container.scrollTop = container.scrollHeight;
         }
     }
 
+    finalizeThinkingPill(toolsDiv, thinkingState) {
+        const container = this.querySelector('#chatMessages');
+        const pill = thinkingState.thinkingPill;
+        if (!pill) return;
+
+        const content = thinkingState.thinkingContent || '';
+        thinkingState.thinkingPill = null;
+        thinkingState.thinkingContent = '';
+
+        pill.className = 'tool-pill done thinking';
+        pill.innerHTML = '';
+
+        const pillContent = document.createElement('span');
+        pillContent.className = 'inline-flex items-center gap-1';
+        pillContent.innerHTML = '<i class="fas fa-brain text-purple text-2xs"></i><span>Thinking</span>';
+        pill.appendChild(pillContent);
+
+        const details = document.createElement('div');
+        details.className = 'tool-invocation-details';
+
+        const section = document.createElement('div');
+        section.className = 'tool-detail-section';
+        const pre = document.createElement('div');
+        pre.className = 'tool-detail-pre markdown-content custom-scrollbar';
+        pre.innerHTML = markdownRenderer.render(content);
+        markdownRenderer.highlightCode(pre);
+        section.appendChild(pre);
+        details.appendChild(section);
+        pill.appendChild(details);
+
+        this._attachClickDetails(pill, details, toolsDiv, container);
+    }
+
     createResponseBubble(id) {
         const container = this.querySelector('#chatMessages');
         const wrapper = document.createElement('div');
@@ -629,57 +1816,52 @@ export class AgentsView extends Component {
         div.id = id;
         div.className = 'flex justify-start';
         div.innerHTML = `
-            <div class="response-bubble-inner max-w-4xl bg-dark-surface border border-dark-border rounded-3xl px-5 py-4 text-gray-100 text-[15px] leading-relaxed relative group">
+            <div class="response-bubble-inner loading group">
                 <div class="response-content whitespace-pre-wrap flex items-center">
-                    <div class="loading-dots flex gap-1">
-                        <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
-                        <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce animation-delay-200"></div>
-                        <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce animation-delay-400"></div>
+                    <div class="loading-dots">
+                        <div></div>
+                        <div></div>
+                        <div></div>
                     </div>
                 </div>
-                <div class="tool-invocations flex flex-wrap gap-1.5 mt-2"></div>
+                <div class="tool-invocations"></div>
             </div>
         `;
 
         wrapper.appendChild(div);
 
-        // Stream status bar (visible during streaming)
         const statusBar = document.createElement('div');
-        statusBar.className = 'stream-status-bar flex items-center gap-2 mt-1.5 ml-1 text-xs text-gray-400';
+        statusBar.className = 'stream-status-bar';
         statusBar.innerHTML = `
-            <div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse-dot"></div>
+            <div class="status-dot-pulse"></div>
             <span class="stream-status-text">Generating...</span>
-            <span class="stream-elapsed text-gray-500">0.0s</span>
-            <button class="stream-cancel-btn ml-auto text-gray-500 hover:text-gray-300 text-xs px-2 py-0.5 rounded border border-dark-border hover:border-gray-500 transition-colors">
-                Stop
-            </button>
+            <span class="stream-elapsed text-muted">0.0s</span>
+            <button class="stream-cancel-btn">Stop</button>
         `;
         wrapper.appendChild(statusBar);
 
-        // Wire up cancel button
         statusBar.querySelector('.stream-cancel-btn').addEventListener('click', () => this.cancelCurrentStream());
 
-        // Stats bar (visible after completion)
         const statsBar = document.createElement('div');
-        statsBar.className = 'stream-stats-bar hidden flex items-center gap-3 mt-1.5 ml-1 text-xs text-gray-500';
+        statsBar.className = 'stream-stats-bar';
         statsBar.innerHTML = `
             <span class="flex items-center gap-1">
                 <i class="far fa-clock"></i>
                 <span class="stats-elapsed"></span>
             </span>
-            <span class="text-dark-border">|</span>
+            <span class="divider">|</span>
             <span class="flex items-center gap-1">
-                <i class="fas fa-arrow-up text-[9px]"></i>
+                <i class="fas fa-arrow-up text-2xs"></i>
                 <span class="stats-input-tokens"></span>
             </span>
-            <span class="text-dark-border">|</span>
+            <span class="divider">|</span>
             <span class="flex items-center gap-1">
-                <i class="fas fa-arrow-down text-[9px]"></i>
+                <i class="fas fa-arrow-down text-2xs"></i>
                 <span class="stats-output-tokens"></span>
             </span>
-            <span class="text-dark-border">|</span>
+            <span class="divider">|</span>
             <span class="flex items-center gap-1">
-                <i class="fas fa-bolt text-[9px]"></i>
+                <i class="fas fa-bolt text-2xs"></i>
                 <span class="stats-tps"></span>
             </span>
         `;
@@ -698,24 +1880,28 @@ export class AgentsView extends Component {
         const loadingDots = contentDiv.querySelector('.loading-dots');
         const container = this.querySelector('#chatMessages');
 
-        if (event.type === 'content') {
+        if (event.type === 'thinking') {
+            this.handleThinkingEvent(event, toolsDiv, thinkingState, container);
+        } else if (event.type === 'content') {
+            // Finalize any in-progress thinking pill
+            this.finalizeThinkingPill(toolsDiv, thinkingState);
             if (loadingDots) {
                 loadingDots.remove();
-                bubble.querySelector('.response-bubble-inner').classList.remove('py-4');
-                bubble.querySelector('.response-bubble-inner').classList.add('py-3');
+                bubble.querySelector('.response-bubble-inner').classList.remove('loading');
                 contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
                 contentDiv.innerHTML = '';
             }
             this.renderLlmContentStreaming(contentDiv, currentContent, responseId, thinkingState);
             container.scrollTop = container.scrollHeight;
         } else if (event.type === 'tool_start') {
+            this.finalizeThinkingPill(toolsDiv, thinkingState);
             const toolId = `tool-${event.runId}`;
             const toolEl = document.createElement('div');
             toolEl.id = toolId;
-            toolEl.className = 'tool-pill inline-flex items-center gap-1.5 bg-dark-bg/50 border border-dark-border/60 rounded-full px-2.5 py-1 text-xs text-gray-400 font-mono';
+            toolEl.className = 'tool-pill';
             toolEl.dataset.toolInput = typeof event.input === 'string' ? event.input : JSON.stringify(event.input, null, 2);
             toolEl.innerHTML = `
-                <i class="fas fa-circle-notch animate-spin text-blue-400 text-[10px]"></i>
+                <i class="fas fa-circle-notch animate-spin text-blue text-2xs"></i>
                 <span>${this.escapeHtml(event.tool)}</span>
              `;
             toolsDiv.appendChild(toolEl);
@@ -728,106 +1914,101 @@ export class AgentsView extends Component {
                 const toolInput = toolEl.dataset.toolInput || '';
                 const toolOutput = typeof event.output === 'string' ? event.output : JSON.stringify(event.output, null, 2);
 
-                toolEl.className = 'tool-pill relative inline-flex items-center gap-1.5 bg-dark-bg/30 border border-dark-border/50 rounded-full px-2.5 py-1 text-xs text-gray-500 font-mono cursor-pointer hover:bg-dark-bg/60 hover:border-dark-border transition-colors';
+                toolEl.className = 'tool-pill done';
                 toolEl.innerHTML = '';
 
-                // Pill content (icon + name)
                 const pillContent = document.createElement('span');
-                pillContent.className = 'inline-flex items-center gap-1.5';
+                pillContent.className = 'inline-flex items-center gap-1';
                 pillContent.innerHTML = `
-                    <i class="fas fa-check text-green-500 text-[10px]"></i>
+                    <i class="fas fa-check text-green text-2xs"></i>
                     <span>${this.escapeHtml(event.tool)}</span>
                 `;
                 toolEl.appendChild(pillContent);
 
-                // Popover details panel (positioned below the pill)
                 const details = document.createElement('div');
-                details.className = 'tool-invocation-details hidden absolute left-0 top-full mt-1 z-50 bg-dark-surface border border-dark-border rounded-lg shadow-xl w-[400px] max-w-[90vw]';
+                details.className = 'tool-invocation-details';
 
-                // Input section
                 if (toolInput) {
                     const inputSection = document.createElement('div');
-                    inputSection.className = 'p-3 border-b border-dark-border/50';
-                    inputSection.innerHTML = `<div class="text-xs font-semibold text-gray-400 mb-1">Input</div>`;
+                    inputSection.className = 'tool-detail-section';
+                    inputSection.innerHTML = '<h4>Input</h4>';
                     const inputPre = document.createElement('pre');
-                    inputPre.className = 'text-xs text-gray-400 bg-dark-bg/60 rounded-md p-2 overflow-x-auto max-h-48 overflow-y-auto whitespace-pre-wrap break-all custom-scrollbar';
+                    inputPre.className = 'tool-detail-pre custom-scrollbar';
                     inputPre.textContent = toolInput;
                     inputSection.appendChild(inputPre);
                     details.appendChild(inputSection);
                 }
 
-                // Output section
                 const outputSection = document.createElement('div');
-                outputSection.className = 'p-3';
-                outputSection.innerHTML = `<div class="text-xs font-semibold text-gray-400 mb-1">Output</div>`;
+                outputSection.className = 'tool-detail-section';
+                outputSection.innerHTML = '<h4>Output</h4>';
                 const outputPre = document.createElement('pre');
-                outputPre.className = 'text-xs text-gray-400 bg-dark-bg/60 rounded-md p-2 overflow-x-auto max-h-48 overflow-y-auto whitespace-pre-wrap break-all custom-scrollbar';
+                outputPre.className = 'tool-detail-pre custom-scrollbar';
                 outputPre.textContent = toolOutput;
                 outputSection.appendChild(outputPre);
                 details.appendChild(outputSection);
 
                 toolEl.appendChild(details);
 
-                // Toggle popover on click
-                toolEl.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    // Close any other open popovers
-                    toolsDiv.querySelectorAll('.tool-invocation-details:not(.hidden)').forEach(d => {
-                        if (d !== details) d.classList.add('hidden');
-                    });
-                    details.classList.toggle('hidden');
-                });
-
-                // Close popover when clicking outside
-                const closeHandler = (e) => {
-                    if (!toolEl.contains(e.target)) {
-                        details.classList.add('hidden');
-                    }
-                };
-                document.addEventListener('click', closeHandler, { capture: true });
+                this._attachClickDetails(toolEl, details, toolsDiv, container);
                 container.scrollTop = container.scrollHeight;
+
+                if (event.tool === 'workspace_write' || event.tool === 'workspace_delete') {
+                    try {
+                        const result = JSON.parse(typeof event.output === 'string' ? event.output : JSON.stringify(event.output));
+                        if (result.success && (result.reloaded === 'agent' || result.unloaded === 'agent')) this.loadAgents();
+                    } catch { /* ignore parse errors */ }
+                }
             }
         } else if (event.type === 'result') {
             if (loadingDots) {
                 loadingDots.remove();
-                bubble.querySelector('.response-bubble-inner').classList.remove('py-4');
-                bubble.querySelector('.response-bubble-inner').classList.add('py-3');
+                bubble.querySelector('.response-bubble-inner').classList.remove('loading');
                 contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
                 contentDiv.innerHTML = '';
             }
 
-            // Display structured output as formatted JSON
             const resultContainer = document.createElement('div');
-            resultContainer.className = 'bg-dark-bg/50 border border-dark-border rounded-lg p-4';
+            resultContainer.className = 'panel';
 
             const resultPre = document.createElement('pre');
-            resultPre.className = 'text-sm text-gray-300 font-mono whitespace-pre-wrap overflow-x-auto';
+            resultPre.className = 'text-sm text-primary font-mono whitespace-pre-wrap overflow-x-auto';
             resultPre.textContent = JSON.stringify(event.output, null, 2);
 
             resultContainer.appendChild(resultPre);
             contentDiv.appendChild(resultContainer);
 
-            // Scroll to bottom
             container.scrollTop = container.scrollHeight;
         } else if (event.type === 'error') {
             if (loadingDots) {
                 loadingDots.remove();
-                bubble.querySelector('.response-bubble-inner').classList.remove('py-4');
-                bubble.querySelector('.response-bubble-inner').classList.add('py-3');
+                bubble.querySelector('.response-bubble-inner').classList.remove('loading');
                 contentDiv.classList.remove('flex', 'items-center', 'whitespace-pre-wrap');
             }
             const errorDiv = document.createElement('div');
-            errorDiv.className = 'text-red-400 text-sm mt-2';
+            errorDiv.className = 'text-red text-sm';
             errorDiv.textContent = `Error: ${event.error}`;
             contentDiv.appendChild(errorDiv);
             container.scrollTop = container.scrollHeight;
+        } else if (event.type === 'warning') {
+            const warningDiv = document.createElement('div');
+            warningDiv.className = 'text-yellow text-sm';
+            warningDiv.textContent = event.message;
+            contentDiv.appendChild(warningDiv);
+            container.scrollTop = container.scrollHeight;
         } else if (event.type === 'usage') {
             this.streamUsageData = {
                 input_tokens: event.input_tokens || 0,
                 output_tokens: event.output_tokens || 0,
                 total_tokens: event.total_tokens || 0,
             };
+        } else if (event.type === 'react_iteration') {
+            const wrapper = bubble.closest('.response-wrapper');
+            const statusText = wrapper?.querySelector('.stream-status-text');
+            if (statusText) {
+                const contextKB = (event.contextChars / 1024).toFixed(1);
+                statusText.textContent = `Iteration ${event.iteration} · ${contextKB} KB context`;
+            }
         }
     }
 
@@ -835,15 +2016,20 @@ export class AgentsView extends Component {
         const bubble = this.querySelector(`#${id}`);
         if (bubble) {
             const content = bubble.querySelector('.response-content');
-            content.innerHTML = `<span class="text-red-400">${errorMsg}</span>`;
+            content.innerHTML = `<span class="text-red">${errorMsg}</span>`;
         }
     }
 
     updateUiState() {
         const btn = this.querySelector('#sendMessageBtn');
         const input = this.querySelector('#chatInput');
-        if (btn) btn.disabled = this.isLoading;
-        if (input) input.disabled = this.isLoading;
+        const hasActiveSession = !!sessionStore.getActiveId();
+        if (btn) btn.disabled = this.isLoading || !hasActiveSession;
+        if (input) {
+            input.disabled = this.isLoading;
+            input.readOnly = !hasActiveSession;
+            input.classList.toggle('cursor-pointer', !hasActiveSession);
+        }
     }
 
     appendMessage(role, content, metadata = {}) {
@@ -854,14 +2040,29 @@ export class AgentsView extends Component {
         const div = document.createElement('div');
         div.className = isUser ? 'flex justify-end' : 'flex justify-start';
 
-        const bubbleColor = isUser ? 'bg-dark-surface' : (hasError ? 'bg-red-900/20 border-red-900/30' : 'bg-dark-surface');
-        const textColor = hasError ? 'text-red-300' : 'text-gray-100';
+        const bubbleClass = isUser ? 'user-bubble' : (hasError ? 'response-bubble-inner error' : 'response-bubble-inner');
+
+        // Build attachment thumbnails for user messages
+        let attachmentHtml = '';
+        if (isUser && metadata.attachments && metadata.attachments.length > 0) {
+            const thumbs = metadata.attachments.map(att => {
+                if (att.mediaType.startsWith('image/')) {
+                    return `<img src="data:${att.mediaType};base64,${att.data}" class="attachment-thumb">`;
+                }
+                return `<div class="attachment-pill">
+                    <i class="fas fa-file"></i>
+                    <span class="truncate attachment-name">${this.escapeHtml(att.name)}</span>
+                </div>`;
+            }).join('');
+            attachmentHtml = `<div class="flex flex-wrap gap-2 mb-2">${thumbs}</div>`;
+        }
 
         div.innerHTML = `
-            <div class="max-w-4xl ${bubbleColor} border ${isUser ? 'border-transparent' : 'border-dark-border'} rounded-3xl px-5 py-3 ${textColor} text-[15px] leading-relaxed relative group">
+            <div class="${bubbleClass} group">
+                ${attachmentHtml}
                 <div class="whitespace-pre-wrap">${this.escapeHtml(content)}</div>
                 ${!isUser && !hasError ? `
-                    <button class="copy-btn absolute -bottom-6 left-0 text-gray-500 hover:text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity p-1" title="Copy">
+                    <button class="copy-btn" title="Copy">
                         <i class="far fa-copy"></i>
                     </button>
                 ` : ''}
@@ -888,11 +2089,11 @@ export class AgentsView extends Component {
         div.id = id;
         div.className = 'flex justify-start';
         div.innerHTML = `
-            <div class="max-w-4xl bg-dark-surface border border-dark-border rounded-3xl px-5 py-4">
-                <div class="flex gap-1">
-                    <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
-                    <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce animation-delay-200"></div>
-                    <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce animation-delay-400"></div>
+            <div class="response-bubble-inner loading">
+                <div class="loading-dots">
+                    <div></div>
+                    <div></div>
+                    <div></div>
                 </div>
             </div>
         `;
@@ -907,35 +2108,120 @@ export class AgentsView extends Component {
     }
 
     escapeHtml(text) {
+        return sharedEscapeHtml(text);
+    }
+
+    _getRandomWelcomeMessage() {
+        const messages = [
+            'Awaiting your command, master.',
+            'The agents are restless. Give them purpose.',
+            'Ready when you are. No pressure... okay, maybe a little.',
+            'Spinning up neurons... just kidding, I was already ready.',
+            'All systems nominal. Your move, human.',
+            'The orchestrator awaits. What shall we build today?',
+            'Standing by. The agents are stretching their digital legs.',
+            'Another day, another chance to orchestrate greatness.',
+            'Agents assembled. Awaiting mission briefing.',
+            'The stage is set. You are the conductor.',
+        ];
+        return messages[Math.floor(Math.random() * messages.length)];
+    }
+
+    _appendWelcomeMessage(container) {
         const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
+        div.className = 'welcome-container';
+        div.innerHTML = `
+            <svg class="welcome-orca" viewBox="0 0 220 140" xmlns="http://www.w3.org/2000/svg">
+                <!-- Main body -->
+                <path class="orca-body" d="
+                    M 30,68
+                    C 28,58 38,42 58,38
+                    C 68,35 74,30 78,18
+                    C 80,12 84,12 85,18
+                    C 87,28 86,35 92,38
+                    C 112,34 148,40 172,54
+                    C 176,50 182,44 188,40
+                    C 192,38 194,42 190,46
+                    C 186,50 184,54 182,56
+                    C 186,60 188,66 184,68
+                    C 180,70 178,66 176,62
+                    C 168,72 142,78 112,76
+                    C 82,74 52,70 38,66
+                    C 34,64 30,68 30,68 Z
+                "/>
+                <!-- Dorsal fin accent line -->
+                <path class="orca-detail" d="M 72,38 C 74,28 78,18 80,14"/>
+                <!-- Belly line -->
+                <path class="orca-detail" d="M 42,64 C 62,70 100,74 140,72 C 158,70 170,66 176,62"/>
+                <!-- Saddle patch -->
+                <path class="orca-patch" d="M 92,40 C 102,38 112,40 108,48 C 104,54 90,50 92,40 Z"/>
+                <!-- Eye patch -->
+                <path class="orca-patch" d="M 44,52 C 50,48 60,50 56,58 C 52,62 42,58 44,52 Z"/>
+                <!-- Eye -->
+                <circle class="orca-eye" cx="42" cy="54" r="2.5"/>
+                <!-- Pectoral fin -->
+                <path class="orca-body" d="M 65,66 C 70,74 64,82 58,76 C 54,72 60,66 65,66 Z"/>
+                <!-- Tail detail -->
+                <path class="orca-detail" d="M 172,54 C 176,52 180,48 184,44"/>
+                <path class="orca-detail" d="M 176,62 C 180,64 184,66 186,64"/>
+            </svg>
+            <div class="welcome-text">${this._getRandomWelcomeMessage()}</div>
+            ${this._renderSampleQuestionChips()}
+        `;
+        container.appendChild(div);
+
+        div.querySelectorAll('.sample-question-chip').forEach(chip => {
+            chip.addEventListener('click', () => {
+                const input = this.querySelector('#chatInput');
+                if (input) {
+                    input.value = chip.textContent;
+                    input.focus();
+                }
+            });
+        });
     }
 
-    clearChatHistory() {
-        const container = this.querySelector('#chatMessages');
-        if (!container) return;
+    _renderSampleQuestionChips() {
+        const agent = store.get('selectedAgent');
+        const workflow = store.get('selectedWorkflow');
+        const questions = agent?.sampleQuestions || workflow?.sampleQuestions;
+        if (!questions || questions.length === 0) return '';
 
-        // Clear all messages
-        container.innerHTML = '';
+        const chips = questions.map(q =>
+            `<button class="sample-question-chip">${this.escapeHtml(q)}</button>`
+        ).join('');
+
+        return `
+            <div class="sample-questions-wrap">${chips}</div>
+        `;
+    }
 
-        // Add welcome message
+    _appendSessionResetBanner(container) {
         const div = document.createElement('div');
-        div.className = 'flex justify-start';
+        div.className = 'session-reset-banner';
         div.innerHTML = `
-            <div class="max-w-4xl bg-dark-surface border border-dark-border rounded-3xl px-5 py-3 text-gray-100 text-[15px] leading-relaxed">
-                Welcome to Agent Orcha. Start chatting with your AI agents and LLMs.
-            </div>
+            <div class="session-reset-line"></div>
+            <span class="session-reset-label">
+                <i class="fas fa-rotate-right"></i>
+                Server restarted — new session
+            </span>
+            <div class="session-reset-line"></div>
         `;
         container.appendChild(div);
-
-        // Generate a new session ID for fresh conversation
-        store.set('sessionId', 'session-' + Date.now() + '-' + Math.random().toString(36).substring(2, 9));
+        container.scrollTop = container.scrollHeight;
     }
 
     postRender() {
         const input = this.querySelector('#chatInput');
 
+        // Open new conversation modal when clicking input with no active session
+        input.addEventListener('mousedown', (e) => {
+            if (!sessionStore.getActiveId()) {
+                e.preventDefault();
+                this.showNewSessionModal();
+            }
+        });
+
         // Auto-resize
         input.addEventListener('input', () => {
             input.style.height = 'auto';
@@ -952,60 +2238,78 @@ export class AgentsView extends Component {
 
         this.querySelector('#sendMessageBtn').addEventListener('click', () => this.sendMessage());
 
-        // Dropdown toggle
-        const selectorBtn = this.querySelector('#agentSelectorBtn');
-        const dropdown = this.querySelector('#agentDropdown');
+        // Attach button + file input
+        this.querySelector('#attachBtn').addEventListener('click', () => this.querySelector('#fileInput').click());
+        this.querySelector('#fileInput').addEventListener('change', (e) => this.handleFileSelect(e));
 
-        selectorBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.toggleDropdown();
-        });
+        // New chat button
+        this.querySelector('#newChatBtn').addEventListener('click', () => this.showNewSessionModal());
 
-        document.addEventListener('click', (e) => {
-            if (!selectorBtn.contains(e.target) && !dropdown.contains(e.target)) {
-                this.toggleDropdown(false);
-            }
-        });
+        // New agent button
+        this.querySelector('#newAgentBtn').addEventListener('click', () => this.showNewAgentModal());
+
+        // Mobile sidebar toggle
+        this.querySelector('#sidebarToggleBtn').addEventListener('click', () => this.toggleSidebar(true));
+        this.querySelector('#sidebarBackdrop').addEventListener('click', () => this.toggleSidebar(false));
     }
 
     template() {
         return `
-            <div class="flex flex-col h-[calc(100vh-220px)]">
-                <!-- Chat Messages -->
-                <div id="chatMessages" class="flex-1 overflow-y-auto mb-6 space-y-4 pr-2 custom-scrollbar">
-                    <div class="flex justify-start">
-                        <div class="max-w-4xl bg-dark-surface border border-dark-border rounded-3xl px-5 py-3 text-gray-100 text-[15px] leading-relaxed">
-                            Welcome to Agent Orcha. Start chatting with your AI agents and LLMs.
-                        </div>
+            <div class="agent-shell">
+                <!-- Mobile sidebar backdrop -->
+                <div id="sidebarBackdrop" class="sidebar-backdrop"></div>
+
+                <!-- Sidebar -->
+                <div id="sidebar" class="agent-sidebar">
+                    <div class="p-3">
+                        <button id="newChatBtn" class="new-chat-btn">
+                            <i class="fas fa-plus text-xs text-accent"></i>
+                            <span>New chat</span>
+                        </button>
+                    </div>
+                    <div id="sessionList" class="flex-1 overflow-y-auto custom-scrollbar px-2 pb-2"></div>
+                    <div class="px-3 sidebar-bottom-action">
+                        <button id="newAgentBtn" class="sidebar-secondary-btn">
+                            <i class="fas fa-robot text-xs text-blue"></i>
+                            <span>New agent</span>
+                        </button>
                     </div>
                 </div>
 
-                <!-- Input Area -->
-                <div class="border-t border-dark-border pt-4">
-                    <div class="relative bg-dark-surface border border-dark-border rounded-2xl focus-within:border-gray-500 transition-colors">
-                        <textarea id="chatInput" rows="1"
-                            class="w-full bg-transparent px-4 py-3 pr-32 text-gray-100 placeholder-gray-500 resize-none focus:outline-none max-h-[200px]"
-                            placeholder="Reply..."></textarea>
-                        
-                        <div class="absolute bottom-2 right-2 flex items-center gap-2">
-                            <!-- Agent Selector -->
-                            <div class="relative">
-                                <button id="agentSelectorBtn" class="flex items-center gap-2 px-3 py-1.5 bg-dark-bg hover:bg-dark-hover rounded-lg text-sm font-medium text-gray-300 transition-colors">
-                                    <span id="selectedAgentName">Select Agent/LLM</span>
-                                    <i class="fas fa-chevron-down text-xs text-gray-400"></i>
-                                </button>
+                <!-- Chat Area -->
+                <div class="chat-area">
+                    <!-- Chat Header -->
+                    <div class="chat-header">
+                        <button id="sidebarToggleBtn" class="sidebar-toggle-btn">
+                            <i class="fas fa-bars"></i>
+                        </button>
+                        <div id="chatHeader" class="flex-1 min-w-0">
+                            <span class="text-muted">No conversation selected</span>
+                        </div>
+                    </div>
+
+                    <!-- Chat Messages -->
+                    <div id="chatMessages" class="chat-messages custom-scrollbar"></div>
 
-                                <div id="agentDropdown" class="hidden absolute bottom-full mb-2 right-0 w-80 bg-dark-surface border border-dark-border rounded-xl shadow-2xl overflow-hidden z-10 max-h-96 flex flex-col">
-                                    <div id="agentDropdownList" class="overflow-y-auto custom-scrollbar">
-                                        <div class="text-gray-500 text-sm text-center py-4">Loading...</div>
-                                    </div>
-                                </div>
+                    <!-- Input Area -->
+                    <div class="chat-input-area">
+                        <div id="attachmentPreview" class="attachment-preview"></div>
+                        <div class="chat-input-wrap">
+                            <input type="file" id="fileInput" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.pptx,.txt,.md,.csv,.json,.yaml,.yml,.xml,.html,.css,.js,.ts,.py,.java,.c,.cpp,.go,.rs,.rb,.php,.sql,.sh,.log,.ini,.toml,.env" class="hidden">
+                            <textarea id="chatInput" rows="1" readonly
+                                placeholder="Ask anything"></textarea>
+
+                            <div class="chat-input-actions left">
+                                <button id="attachBtn" type="button" class="attach-btn" title="Attach files">
+                                    <i class="fas fa-plus text-sm"></i>
+                                </button>
                             </div>
 
-                            <button id="sendMessageBtn" disabled
-                                class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white p-2 rounded-lg transition-all shadow-lg shadow-blue-900/20">
-                                <i class="fas fa-paper-plane text-sm"></i>
-                            </button>
+                            <div class="chat-input-actions right">
+                                <button id="sendMessageBtn" disabled class="send-btn">
+                                    <i class="fas fa-paper-plane text-sm"></i>
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>