feat: dashboard SSE streaming progress (#1007)

Author: theonlychant

src/gaia/agents/base/tools.py

@@ -20,6 +20,7 @@ def tool(
     func: Callable = None,
     *,
     atomic: bool = False,
+    display_label: str | None = None,
     **kwargs,  # pylint: disable=unused-argument
 ) -> Callable:
     """
@@ -67,14 +68,17 @@ def decorator(f: Callable) -> Callable:
 
             params[name] = param_info
 
-        # Register the tool with atomic metadata
-        _TOOL_REGISTRY[tool_name] = {
+        # Register the tool with atomic metadata and optional display label
+        entry = {
             "name": tool_name,
             "description": f.__doc__ or "",
             "parameters": params,
             "function": f,
             "atomic": atomic,
         }
+        if display_label:
+            entry["display_label"] = display_label
+        _TOOL_REGISTRY[tool_name] = entry
 
         # Return the function unchanged
         return f
@@ -110,6 +114,23 @@ def get_tool_display_name(tool_name: str) -> str:
     return tool.get("display_name", tool_name)
 
 
+def get_tool_display_label(tool_name: str) -> str:
+    """Return human-friendly display label for a tool if available.
+
+    Falls back to `display_name` (for MCP tools) and finally the raw tool name.
+    """
+    tool = _TOOL_REGISTRY.get(tool_name)
+    if not tool:
+        return tool_name
+    # Preferred explicit label
+    if tool.get("display_label"):
+        return tool["display_label"]
+    # MCP display_name compatibility
+    if tool.get("display_name"):
+        return tool["display_name"]
+    return tool_name
+
+
 def get_tool_metadata(tool_name: str):
     """Return the full registry entry for a tool, or ``None`` if not found.
 

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

@@ -9,6 +9,7 @@ import { useNotificationStore, ALWAYS_ALLOW_TOOLS_KEY } from '../stores/notifica
 import type { GaiaNotification } from '../types/agent';
 import * as api from '../services/api';
 import { log } from '../utils/logger';
+import ProgressStrip from './ProgressStrip';
 import { getSessionHash } from '../utils/format';
 import { bugReportUrl } from './UnsupportedFeature';
 import type { Message, StreamEvent, AgentStep, Attachment, Session } from '../types';
@@ -121,8 +122,8 @@ function agentEventToStep(event: StreamEvent, stepIdRef: React.MutableRefObject<
         case 'tool_start':
             return {
                 id, type: 'tool',
-                // Label is determined by AgentActivity based on tool name
-                label: 'Using tool',
+                // Prefer server-provided human-friendly label when available
+                label: event.display_label || 'Using tool',
                 tool: event.tool,
                 detail: event.detail,
                 active: true, timestamp: ts,
@@ -175,6 +176,8 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
         agents, activeAgentId, setActiveAgentId,
     } = useChatStore();
 
+    const surfacedCards = useChatStore((s) => s.surfacedCards);
+
     const { addNotification } = useNotificationStore();
     const pendingPrompt = useChatStore((s) => s.pendingPrompt);
 
@@ -192,6 +195,8 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
     const [attachments, setAttachments] = useState<Attachment[]>([]);
     const [docsExpanded, setDocsExpanded] = useState(false);
     const [deletingMsgId, setDeletingMsgId] = useState<number | null>(null);
+    // Progress strip state for streaming tool progress
+    const [progress, setProgress] = useState<{ label?: string; detail?: string; latencyMs?: number; active?: boolean }>({ active: false });
     // Agent picker dropdown state
     const [agentPickerOpen, setAgentPickerOpen] = useState(false);
     const agentPickerRef = useRef<HTMLDivElement>(null);
@@ -838,6 +843,16 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
                         };
                     }
                     updateLastToolStep(updates);
+                    // Stream incremental surfaced cards for retrieval/classify results
+                    if (event.result_data?.chunks && event.result_data.chunks.length > 0) {
+                        const addCard = useChatStore.getState().addSurfacedCard;
+                        for (const c of event.result_data.chunks) {
+                            addCard({ id: `${Date.now()}-${Math.random().toString(36).slice(2,8)}`, preview: c.preview, content: c.content, source: c.source, score: c.score });
+                        }
+                    }
+                    if (typeof event.latency_ms === 'number') {
+                        setProgress((p) => ({ ...p, latencyMs: event.latency_ms }));
+                    }
                     return;
                 }
                 // Tool args update the last TOOL step with detail
@@ -911,6 +926,7 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
                     addAgentStep(step);
                     if (event.type === 'tool_start') {
                         toolOccurredRef.current = true;
+                        setProgress({ label: event.display_label || event.tool || 'Using tool', detail: event.detail, active: true });
                     }
                 }
             },
@@ -954,6 +970,9 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
                 clearStreamContent();
                 clearAgentSteps();
 
+                // Clear progress strip
+                setProgress((p) => ({ ...p, active: false }));
+
                 // Refocus input so user can immediately type the next message
                 if (inputRef.current) inputRef.current.focus();
 
@@ -1128,6 +1147,19 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
         }).catch(() => {
             log.ui.warn('Clipboard write failed');
         });
+        // Keep a reference so UI can cancel the stream
+        abortRef.current = controller;
+
+        const handleCancel = () => {
+            try {
+                if (abortRef.current) {
+                    abortRef.current.abort();
+                }
+            } catch (err) {
+                console.error('Failed to abort stream', err);
+            }
+            setProgress((p) => ({ ...p, active: false }));
+        };
     }, [sessionId]);
 
     // Title editing
@@ -1297,6 +1329,28 @@ export function ChatView({ sessionId, onCreateAgent, onAgentChange }: ChatViewPr
                 </div>
             </header>
 
+            {/* Progress strip (shows current tool/status during streaming) */}
+            {progress?.active && (
+                <div style={{ padding: '8px 12px' }}>
+                    <ProgressStrip label={progress.label} detail={progress.detail} latencyMs={progress.latencyMs} active={progress.active} onCancel={() => { if (abortRef.current) abortRef.current.abort(); setProgress((p) => ({ ...p, active: false })); }} />
+                </div>
+            )}
+
+            {/* Surfaced incremental cards (streamed from tool_result events) */}
+            {surfacedCards && surfacedCards.length > 0 && (
+                <div className="surfaced-panel">
+                    <div className="surfaced-header">Surfaced</div>
+                    <div className="surfaced-cards">
+                        {surfacedCards.map((c: any) => (
+                            <div key={c.id} className="surfaced-card">
+                                <div className="surfaced-preview">{c.preview}</div>
+                                <div className="surfaced-source">{c.source}</div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
             {/* Indexed documents context bar — shows only docs attached to this session */}
             {sessionDocs.length > 0 && (() => {
                 // Sort by most recently accessed (last_accessed_at), falling back to indexed_at

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import './ProgressStrip.css';
+
+interface Props {
+    label?: string;
+    detail?: string;
+    latencyMs?: number;
+    onCancel?: () => void;
+    active?: boolean;
+}
+
+export default function ProgressStrip({ label, detail, latencyMs, onCancel, active }: Props) {
+    return (
+        <div className={`progress-strip ${active ? 'active' : 'idle'}`} role="region" aria-live="polite">
+            <div className="progress-main">
+                <div className="progress-label">{label || 'Working'}</div>
+                {detail && <div className="progress-detail">{detail}</div>}
+            </div>
+            <div className="progress-meta">
+                {typeof latencyMs === 'number' && <div className="progress-latency">{latencyMs} ms</div>}
+                {onCancel && (
+                    <button className="btn-icon progress-cancel" onClick={onCancel} aria-label="Cancel">
+                        Cancel
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}

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

@@ -204,6 +204,12 @@ export const useChatStore = create<ChatState>((set, get) => ({
     documents: [],
     setDocuments: (docs) => set({ documents: docs }),
 
+    // Surfaced cards (incremental results shown on the dashboard)
+    surfacedCards: [],
+    setSurfacedCards: (cards: any[]) => set({ surfacedCards: cards }),
+    addSurfacedCard: (card: any) => set((state) => ({ surfacedCards: [...state.surfacedCards, card] })),
+    clearSurfacedCards: () => set({ surfacedCards: [] }),
+
     // Connection / system status
     systemStatus: null,
     backendConnected: true, // Assume connected until proven otherwise

src/gaia/apps/webui/src/stores/chatStore.ts

@@ -216,6 +216,9 @@ def print_tool_usage(self, tool_name: str):
             mcp_server = meta.get("_mcp_server")
             if mcp_server:
                 event["mcp_server"] = mcp_server
+            # Optional human-friendly label for frontend progress strips
+            if meta.get("display_label"):
+                event["display_label"] = meta.get("display_label")
         self._emit(event)
 
     def print_tool_complete(self):