fix(agent-ui): keep chat runs alive after New Task + show running indicator (#1580)

Clicking New Task (or switching sessions) while an agent was still
generating used to abort the run: the SSE was torn down on the old view's
unmount, the backend cancelled the turn, and the in-flight answer was
discarded with no trace it had ever been running. The user lost both the
work and any way to tell the original agent was still going.

Now a chat turn is a first-class background run that outlives the SSE
connection. Navigating away leaves it running server-side; it finishes and
persists to the DB on its own. The sidebar shows a spinner on any session
with a live run (backend-truth, so it survives refresh and revisit), and
re-opening a running session re-attaches to its live stream so progress
resumes in the view.

- RunManager owns each run (producer thread + persistence) in a detached
  task; the SSE endpoint is now a thin subscriber over a replay buffer with
  multi-subscriber fan-out.
- GET /api/chat/active surfaces running session ids; GET /api/chat/attach
  reconnects to an in-flight run.
- Stop now calls the cancel endpoint explicitly (a client disconnect no
  longer cancels the run), and deleting a session cancels its run so it
  can't persist to a dead session.

Author: Ovtcharov

src/gaia/apps/webui/src/App.tsx

@@ -80,6 +80,7 @@ function App() {
         setSystemStatus,
         setBackendConnected,
         setAgents,
+        setRunningSessions,
     } = useChatStore();
     const showNotificationPanel = useNotificationStore((s) => s.showPanel);
     const setShowNotificationPanel = useNotificationStore((s) => s.setShowPanel);
@@ -270,6 +271,25 @@ function App() {
         };
     }, [setSessions, addSession, removeSession, updateSessionInList, setBackendConnected]);
 
+    // Poll which sessions have a running turn so the sidebar can show a
+    // "still running" spinner on backgrounded runs. Backend-truth
+    // (/api/chat/active), independent of any open SSE stream (#1580).
+    const activeRunsPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+    useEffect(() => {
+        const poll = () => {
+            api.getActiveRuns()
+                .then((data) => setRunningSessions(data.session_ids || []))
+                .catch(() => { /* non-critical — sidebar just won't show spinners */ });
+        };
+        poll();
+        // 2.6s (off the :00/:30 marks) — responsive enough to feel live without
+        // hammering the backend.
+        activeRunsPollRef.current = setInterval(poll, 2_600);
+        return () => {
+            if (activeRunsPollRef.current) clearInterval(activeRunsPollRef.current);
+        };
+    }, [setRunningSessions]);
+
     // Support URL-based session navigation (?session=<id> or #<hash>)
     useEffect(() => {
         if (currentSessionId) return; // Already have a session selected

src/gaia/apps/webui/src/components/ChatView.tsx

@@ -280,7 +280,7 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
     const abortRef = useRef<AbortController | null>(null);
     const stepIdRef = useRef(0);
     const toolOccurredRef = useRef(false);
-    const sendMessageRef = useRef<(text?: string) => void>(() => {});
+    const sendMessageRef = useRef<(text?: string, options?: { attach?: boolean }) => void>(() => {});
 
     // ── Streaming chunk buffer ──────────────────────────────────────
     // Buffer SSE chunks in a ref and flush to the store via rAF.
@@ -471,6 +471,12 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
     // Stop streaming — reads fresh state from store to avoid stale closures
     const handleStop = useCallback(() => {
         log.stream.warn('User stopped generation');
+        // Tell the backend to cancel the run. Since runs now outlive the SSE
+        // connection (#1580), aborting the client alone only detaches us — the
+        // agent would keep generating in the background. The cancel endpoint
+        // sets the handler's cancelled flag so the producer bails at its next
+        // step boundary.
+        api.cancelStream(sessionId).catch(() => { /* best-effort */ });
         if (abortRef.current) {
             abortRef.current.abort();
             abortRef.current = null;
@@ -632,7 +638,13 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
     }, []);
 
     // Send message
-    const sendMessage = useCallback(async (overrideText?: string) => {
+    const sendMessage = useCallback(async (overrideText?: string, options?: { attach?: boolean }) => {
+        // attach=true re-subscribes to a run already in flight server-side
+        // (revisiting a backgrounded session, #1580). It reuses the entire
+        // stream-event handling below but skips composing/sending a new turn:
+        // no optimistic user message, no input/attachment handling, and the
+        // controller comes from api.attachToRun instead of api.sendMessageStream.
+        const attach = options?.attach === true;
         const text = (overrideText || input).trim();
         const hasAttachments = attachments.length > 0 && attachments.some(a => a.uploaded);
 
@@ -641,7 +653,10 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
         isNearBottomRef.current = true;
 
         const isInitializing = systemStatus?.init_state === 'initializing';
-        if ((!text && !hasAttachments) || isStreaming || isInitializing) {
+        if (attach) {
+            // Don't double-attach if a stream is already live in this view.
+            if (isStreaming) return;
+        } else if ((!text && !hasAttachments) || isStreaming || isInitializing) {
             if (!text && !hasAttachments) log.chat.debug('Send blocked: empty message');
             if (isStreaming) log.chat.debug('Send blocked: already streaming');
             if (isInitializing) log.chat.debug('Send blocked: system initializing');
@@ -650,43 +665,47 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
 
         // Build message text with attachment references
         let messageText = text;
-        const uploadedAttachments = attachments.filter(a => a.uploaded && a.serverUrl);
-        if (uploadedAttachments.length > 0) {
-            const attachmentLines = uploadedAttachments.map(a => {
-                if (a.isImage) {
-                    return `![${a.name}](${a.serverUrl})`;
-                }
-                return `[${a.name}](${a.serverUrl})`;
-            }).join('\n');
-            messageText = messageText
-                ? `${messageText}\n\n${attachmentLines}`
-                : attachmentLines;
-        }
+        if (!attach) {
+            const uploadedAttachments = attachments.filter(a => a.uploaded && a.serverUrl);
+            if (uploadedAttachments.length > 0) {
+                const attachmentLines = uploadedAttachments.map(a => {
+                    if (a.isImage) {
+                        return `![${a.name}](${a.serverUrl})`;
+                    }
+                    return `[${a.name}](${a.serverUrl})`;
+                }).join('\n');
+                messageText = messageText
+                    ? `${messageText}\n\n${attachmentLines}`
+                    : attachmentLines;
+            }
 
-        log.chat.info(`Sending message to session=${sessionId}`, { length: messageText.length, preview: messageText.slice(0, 80) });
+            log.chat.info(`Sending message to session=${sessionId}`, { length: messageText.length, preview: messageText.slice(0, 80) });
 
-        setInput('');
-        if (inputRef.current) {
-            inputRef.current.style.height = 'auto';
-            inputRef.current.focus();
-        }
+            setInput('');
+            if (inputRef.current) {
+                inputRef.current.style.height = 'auto';
+                inputRef.current.focus();
+            }
 
-        // Clear attachments
-        setAttachments(prev => {
-            prev.forEach(a => { if (a.url) URL.revokeObjectURL(a.url); });
-            return [];
-        });
+            // Clear attachments
+            setAttachments(prev => {
+                prev.forEach(a => { if (a.url) URL.revokeObjectURL(a.url); });
+                return [];
+            });
 
-        // Optimistic user message
-        const userMsg: Message = {
-            id: Date.now(),
-            session_id: sessionId,
-            role: 'user',
-            content: messageText,
-            created_at: new Date().toISOString(),
-            rag_sources: null,
-        };
-        addMessage(userMsg);
+            // Optimistic user message
+            const userMsg: Message = {
+                id: Date.now(),
+                session_id: sessionId,
+                role: 'user',
+                content: messageText,
+                created_at: new Date().toISOString(),
+                rag_sources: null,
+            };
+            addMessage(userMsg);
+        } else {
+            log.chat.info(`Re-attaching to background run for session=${sessionId}`);
+        }
 
         // Start streaming
         setStreaming(true);
@@ -703,7 +722,7 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
         let doneHandled = false;
         streamBufferRef.current = '';
 
-        const controller = api.sendMessageStream(sessionId, messageText, {
+        const streamCallbacks: api.StreamCallbacks = {
             onChunk: (event) => {
                 if (isStale()) return; // stop writing after a session switch (#1580)
                 const content = event.content || '';
@@ -1046,7 +1065,9 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
                 }, 300);
 
                 // Auto-title on first message
-                if (session && session.title === 'New Task') {
+                // Skip client-side auto-title when re-attaching (no user text in
+                // hand and the run's lifecycle already titles server-side, #1580).
+                if (!attach && session && session.title === 'New Task') {
                     const autoTitle = text.slice(0, 50) + (text.length > 50 ? '...' : '');
                     api.updateSession(sessionId, { title: autoTitle })
                         .then(() => updateSessionInList(sessionId, { title: autoTitle }))
@@ -1113,14 +1134,51 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
                     .then((data) => useChatStore.getState().setAgents(data.agents || []))
                     .catch(() => { /* non-critical */ });
             },
-        }, undefined, undefined, activeAgentId);
+        };
+
+        const controller = attach
+            ? api.attachToRun(sessionId, streamCallbacks)
+            : api.sendMessageStream(sessionId, messageText, streamCallbacks, undefined, undefined, activeAgentId);
 
         abortRef.current = controller;
     }, [input, attachments, isStreaming, sessionId, session, addMessage, setMessages, setStreaming, flushStreamBuffer, clearStreamContent, updateSessionInList, addAgentStep, updateLastAgentStep, appendThinkingContent, updateLastToolStep, clearAgentSteps, activeAgentId, addNotification, isStale]);
 
     // Keep ref in sync so event listeners always call the latest sendMessage
     sendMessageRef.current = sendMessage;
 
+    // Re-attach to an in-flight background run on mount (#1580). When the
+    // user revisits a session whose turn is still running server-side, hook
+    // back into its live stream so progress resumes in the view instead of
+    // sitting static until the run finishes. Once per session mount; the
+    // attach path no-ops if a stream is already live here.
+    const reattachedRef = useRef(false);
+    useEffect(() => {
+        reattachedRef.current = false;
+    }, [sessionId]);
+    useEffect(() => {
+        const attemptAttach = () => {
+            if (reattachedRef.current) return;
+            if (useChatStore.getState().isStreaming) return;
+            reattachedRef.current = true;
+            log.chat.info(`Resuming live view of background run for session=${sessionId}`);
+            sendMessageRef.current(undefined, { attach: true });
+        };
+        // Fast path: the global poll already knows this session is running.
+        if (useChatStore.getState().runningSessionIds.includes(sessionId)) {
+            attemptAttach();
+            return;
+        }
+        // Otherwise confirm once with the backend on mount.
+        let cancelled = false;
+        api.getActiveRuns()
+            .then(({ session_ids }) => {
+                if (cancelled) return;
+                if (session_ids.includes(sessionId)) attemptAttach();
+            })
+            .catch(() => { /* non-critical — sidebar spinner still signals running */ });
+        return () => { cancelled = true; };
+    }, [sessionId]);
+
     // Listen for programmatic message dispatches from rich-content
     // components (currently the EmailPreScanCard's Approve / Reply
     // buttons). Wired as a window-level CustomEvent rather than prop

src/gaia/apps/webui/src/components/Sidebar.css

@@ -335,6 +335,16 @@
     vertical-align: middle;
 }
 
+/* Spinner shown inline before the title while a session's agent is still
+   running in the background (#1580). Uses the global `spin` keyframe. */
+.session-running-spinner {
+    flex-shrink: 0;
+    margin-right: 4px;
+    color: var(--accent, var(--text-muted));
+    vertical-align: middle;
+    animation: spin 1s linear infinite;
+}
+
 /* Session hash link -- short permalink for troubleshooting */
 .session-hash {
     font-size: 9px;

src/gaia/apps/webui/src/components/Sidebar.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import { Plus, Search, Settings, Sun, Moon, Trash2, PanelLeftClose, PanelLeftOpen, Smartphone, Brain, EyeOff, Clock } from 'lucide-react';
+import { Plus, Search, Settings, Sun, Moon, Trash2, PanelLeftClose, PanelLeftOpen, Smartphone, Brain, EyeOff, Clock, Loader2 } from 'lucide-react';
 import { useChatStore } from '../stores/chatStore';
 import * as api from '../services/api';
 import { log } from '../utils/logger';
@@ -34,9 +34,10 @@ interface SidebarProps {
 }
 
 /** Extracted session row to share between grouped and flat rendering. */
-function SessionItem({ session: s, isActive, isPendingDelete, isDeleting, onSelect, onKeyDown, onDelete, formatTime }: {
+function SessionItem({ session: s, isActive, isRunning, isPendingDelete, isDeleting, onSelect, onKeyDown, onDelete, formatTime }: {
     session: Session;
     isActive: boolean;
+    isRunning: boolean;
     isPendingDelete: boolean;
     isDeleting: boolean;
     onSelect: (id: string) => void;
@@ -64,6 +65,13 @@ function SessionItem({ session: s, isActive, isPendingDelete, isDeleting, onSele
         >
             <span className="session-title">
                 {s.private && <EyeOff size={10} className="session-private-icon" aria-label="Private session" />}
+                {isRunning && (
+                    <Loader2
+                        size={11}
+                        className="session-running-spinner"
+                        aria-label="Agent running"
+                    />
+                )}
                 {s.title}
             </span>
             <a
@@ -110,6 +118,7 @@ export function Sidebar({ onNewTask, onHome, tunnelActive, tunnelLoading, onMobi
         sidebarCollapsed, toggleSidebarCollapsed,
         sidebarWidth, setSidebarWidth,
         addPendingDelete, removePendingDelete,
+        runningSessionIds,
     } = useChatStore();
 
     const [search, setSearch] = useState('');
@@ -403,6 +412,7 @@ export function Sidebar({ onNewTask, onHome, tunnelActive, tunnelLoading, onMobi
                                     key={s.id}
                                     session={s}
                                     isActive={s.id === currentSessionId}
+                                    isRunning={runningSessionIds.includes(s.id)}
                                     isPendingDelete={pendingDeleteId === s.id}
                                     isDeleting={deletingId === s.id}
                                     onSelect={handleSelect}
@@ -420,6 +430,7 @@ export function Sidebar({ onNewTask, onHome, tunnelActive, tunnelLoading, onMobi
                             key={s.id}
                             session={s}
                             isActive={s.id === currentSessionId}
+                            isRunning={runningSessionIds.includes(s.id)}
                             isPendingDelete={pendingDeleteId === s.id}
                             isDeleting={deletingId === s.id}
                             onSelect={handleSelect}