Redesign research subagent display with live stats and rolling steps

- Add researchStats (toolCount, tokenCount, elapsed) to session state
- Parse tokens:/tools: log events into stats instead of step list
- Show live stats in chip (running · N tools · Xk tokens · Ys)
- Rolling 2-line window of sub-tool calls, hidden on completion
- Format step labels with specifics (dataset name, paper query, etc.)
- Handle truncated JSON args from backend via regex fallback
- Fix stale tool spinners on page reload (coerce to completed)
- Clean activity status bar labels for research tool logs

frontend/src/components/Chat/ActivityStatusBar.tsx

@@ -20,11 +20,81 @@ const TOOL_LABELS: Record<string, string> = {
   research: 'Researching',
 };
 
+/** Format raw research log into a clean status label. */
+function formatResearchStatus(raw: string): string {
+  const s = raw.replace(/^▸\s*/, '');
+  const jsonStart = s.indexOf('{');
+  const toolName = jsonStart > 0 ? s.slice(0, jsonStart).trim() : s.trim();
+  let args: Record<string, string> = {};
+  if (jsonStart > 0) {
+    const jsonStr = s.slice(jsonStart);
+    try {
+      const parsed = JSON.parse(jsonStr);
+      for (const [k, v] of Object.entries(parsed)) {
+        if (typeof v === 'string') args[k] = v;
+      }
+    } catch {
+      for (const m of jsonStr.matchAll(/"(\w+)":\s*"([^"]*)"/g)) {
+        args[m[1]] = m[2];
+      }
+    }
+  }
+
+  if (toolName === 'github_find_examples') {
+    const d = (args.keyword) || (args.repo);
+    return d ? `Finding examples: ${d}` : 'Finding examples';
+  }
+  if (toolName === 'github_read_file') {
+    const f = ((args.path) || '').split('/').pop();
+    return f ? `Reading ${f}` : 'Reading file';
+  }
+  if (toolName === 'explore_hf_docs') {
+    const d = (args.endpoint) || (args.query);
+    return d ? `Exploring docs: ${d}` : 'Exploring docs';
+  }
+  if (toolName === 'fetch_hf_docs') {
+    const p = ((args.url) || '').split('/').pop()?.replace(/\.md$/, '');
+    return p ? `Reading docs: ${p}` : 'Fetching docs';
+  }
+  if (toolName === 'hf_inspect_dataset') {
+    const d = args.dataset as string;
+    return d ? `Inspecting dataset: ${d}` : 'Inspecting dataset';
+  }
+  if (toolName === 'hf_papers') {
+    const op = args.operation as string;
+    const detail = (args.query) || (args.arxiv_id);
+    const opLabels: Record<string, string> = {
+      trending: 'Browsing trending papers',
+      search: 'Searching papers',
+      paper_details: 'Reading paper details',
+      read_paper: 'Reading paper',
+      find_datasets: 'Finding paper datasets',
+      find_models: 'Finding paper models',
+      find_collections: 'Finding paper collections',
+      find_all_resources: 'Finding paper resources',
+    };
+    const base = (op && opLabels[op]) || 'Searching papers';
+    return detail ? `${base}: ${detail}` : base;
+  }
+  if (toolName === 'find_hf_api') {
+    const d = (args.query) || (args.tag);
+    return d ? `Finding API: ${d}` : 'Finding API endpoints';
+  }
+  if (toolName === 'hf_repo_files') {
+    const d = (args.repo_id) || (args.repo);
+    return d ? `Reading ${d} files` : 'Reading repo files';
+  }
+  return 'Researching';
+}
+
 function statusLabel(status: ActivityStatus): string {
   switch (status.type) {
     case 'thinking': return 'Thinking';
     case 'streaming': return 'Writing';
     case 'tool': {
+      if (status.toolName === 'research' && status.description) {
+        return formatResearchStatus(status.description);
+      }
       const base = status.description || TOOL_LABELS[status.toolName] || `Running ${status.toolName}`;
       if (status.toolName === 'bash' && status.description && /install/i.test(status.description)) {
         return `${base} — this can take a few minutes, sit tight`;

frontend/src/components/Chat/ToolCallGroup.tsx

@@ -35,37 +35,142 @@ interface ToolCallGroupProps {
 // Research sub-steps (inline under the research tool row)
 // ---------------------------------------------------------------------------
 
+/** Hook that ticks every second while startedAt is set, returning elapsed seconds. */
+function useElapsed(startedAt: number | null): number | null {
+  const [elapsed, setElapsed] = useState<number | null>(null);
+  useEffect(() => {
+    if (startedAt === null) { setElapsed(null); return; }
+    setElapsed(Math.round((Date.now() - startedAt) / 1000));
+    const id = setInterval(() => setElapsed(Math.round((Date.now() - startedAt) / 1000)), 1000);
+    return () => clearInterval(id);
+  }, [startedAt]);
+  return elapsed;
+}
+
+/** Format token count like the CLI: "12.4k" or "800". */
+function formatTokens(tokens: number): string {
+  return tokens >= 1000 ? `${(tokens / 1000).toFixed(1)}k` : String(tokens);
+}
+
+/** Format elapsed seconds like the CLI: "18s" or "2m 5s". */
+function formatElapsed(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+}
+
+/** Build the research stats chip label. */
+function researchChipLabel(
+  stats: { toolCount: number; tokenCount: number; startedAt: number | null; finalElapsed: number | null },
+  liveElapsed: number | null,
+): string | null {
+  const elapsed = stats.finalElapsed ?? liveElapsed;
+  if (elapsed === null && stats.toolCount === 0) return null;
+  const parts: string[] = [];
+  if (stats.startedAt !== null) parts.push('running');
+  if (stats.toolCount > 0) parts.push(`${stats.toolCount} tools`);
+  if (stats.tokenCount > 0) parts.push(`${formatTokens(stats.tokenCount)} tokens`);
+  if (elapsed !== null) parts.push(formatElapsed(elapsed));
+  return parts.join(' \u00B7 ');
+}
+
+/** Parse JSON args from a step string like "tool_name  {json}" (may be truncated at 80 chars). */
+function parseStepArgs(step: string): Record<string, string> {
+  const jsonStart = step.indexOf('{');
+  if (jsonStart < 0) return {};
+  const jsonStr = step.slice(jsonStart);
+  try {
+    const parsed = JSON.parse(jsonStr);
+    const result: Record<string, string> = {};
+    for (const [k, v] of Object.entries(parsed)) {
+      if (typeof v === 'string') result[k] = v;
+    }
+    return result;
+  } catch {
+    // JSON likely truncated — extract key-value pairs via regex
+    const result: Record<string, string> = {};
+    for (const m of jsonStr.matchAll(/"(\w+)":\s*"([^"]*)"/g)) {
+      result[m[1]] = m[2];
+    }
+    return result;
+  }
+}
+
 /** Pretty labels for research sub-agent tool calls */
-function formatResearchStep(step: string): { icon: string; label: string } {
-  if (step === 'Starting research sub-agent...') return { icon: '🔍', label: 'Starting research' };
-  if (step === 'Research complete.') return { icon: '✓', label: 'Research complete' };
-  if (step.startsWith('github_find_examples')) return { icon: '📂', label: step.replace('github_find_examples', 'Finding examples') };
+function formatResearchStep(raw: string): { label: string } {
+  // Backend sends logs like "▸ tool_name  {args}" — strip the prefix
+  const step = raw.replace(/^▸\s*/, '');
+  const args = parseStepArgs(step);
+
+  if (step.startsWith('github_find_examples')) {
+    const detail = (args.keyword) || (args.repo);
+    return { label: detail ? `Finding examples: ${detail}` : 'Finding examples' };
+  }
   if (step.startsWith('github_read_file')) {
-    const path = step.match(/\(([^)]+)\)/)?.[1] || '';
+    const path = (args.path) || '';
     const filename = path.split('/').pop() || path;
-    return { icon: '📄', label: `Reading ${filename}` };
+    return { label: filename ? `Reading ${filename}` : 'Reading file' };
+  }
+  if (step.startsWith('explore_hf_docs')) {
+    const endpoint = (args.endpoint) || (args.query);
+    return { label: endpoint ? `Exploring docs: ${endpoint}` : 'Exploring docs' };
+  }
+  if (step.startsWith('fetch_hf_docs')) {
+    const url = (args.url) || '';
+    const page = url.split('/').pop()?.replace(/\.md$/, '');
+    return { label: page ? `Reading docs: ${page}` : 'Fetching docs' };
+  }
+  if (step.startsWith('hf_inspect_dataset')) {
+    const dataset = (args.dataset);
+    return { label: dataset ? `Inspecting dataset: ${dataset}` : 'Inspecting dataset' };
+  }
+  if (step.startsWith('hf_papers')) {
+    const op = args.operation as string;
+    const detail = (args.query) || (args.arxiv_id);
+    const opLabels: Record<string, string> = {
+      trending: 'Browsing trending papers',
+      search: 'Searching papers',
+      paper_details: 'Reading paper details',
+      read_paper: 'Reading paper',
+      find_datasets: 'Finding paper datasets',
+      find_models: 'Finding paper models',
+      find_collections: 'Finding paper collections',
+      find_all_resources: 'Finding paper resources',
+    };
+    const base = (op && opLabels[op]) || 'Searching papers';
+    return { label: detail ? `${base}: ${detail}` : base };
+  }
+  if (step.startsWith('find_hf_api')) {
+    const detail = (args.query) || (args.tag);
+    return { label: detail ? `Finding API: ${detail}` : 'Finding API endpoints' };
+  }
+  if (step.startsWith('hf_repo_files')) {
+    const repo = (args.repo_id) || (args.repo);
+    return { label: repo ? `Reading ${repo} files` : 'Reading repo files' };
+  }
+  if (step.startsWith('read')) {
+    const path = (args.path) || '';
+    const filename = path.split('/').pop();
+    return { label: filename ? `Reading ${filename}` : 'Reading file' };
+  }
+  if (step.startsWith('bash')) {
+    const cmd = args.command as string;
+    const short = cmd && cmd.length > 40 ? cmd.slice(0, 40) + '...' : cmd;
+    return { label: short ? `Running: ${short}` : 'Running command' };
   }
-  if (step.startsWith('explore_hf_docs')) return { icon: '📚', label: step.replace('explore_hf_docs', 'Exploring docs') };
-  if (step.startsWith('fetch_hf_docs')) return { icon: '📖', label: step.replace('fetch_hf_docs', 'Fetching docs') };
-  if (step.startsWith('hf_inspect_dataset')) return { icon: '🗃️', label: step.replace('hf_inspect_dataset', 'Inspecting dataset') };
-  if (step.startsWith('hf_papers')) return { icon: '📑', label: 'Searching papers' };
-  if (step.startsWith('find_hf_api')) return { icon: '🔌', label: 'Finding API endpoints' };
-  if (step.startsWith('hf_repo_files')) return { icon: '📁', label: 'Reading repo files' };
-  return { icon: '→', label: step };
+  return { label: step.replace(/^▸\s*/, '') };
 }
 
+/** Rolling 2-line display of research sub-tool calls — hidden when complete. */
 function ResearchSteps({ steps, isRunning }: { steps: string[]; isRunning: boolean }) {
-  // Filter out the "Starting..." and "complete" meta-steps for the list
-  const toolSteps = steps.filter(
-    s => s !== 'Starting research sub-agent...' && s !== 'Research complete.',
-  );
-  if (toolSteps.length === 0) return null;
+  if (!isRunning) return null;
+  const visible = steps.slice(-2);
+  if (visible.length === 0) return null;
 
   return (
     <Box sx={{ pl: 4.5, pr: 1.5, pb: 1, pt: 0.25 }}>
-      {toolSteps.map((step, i) => {
-        const { icon, label } = formatResearchStep(step);
-        const isLast = i === toolSteps.length - 1;
+      {visible.map((step, i) => {
+        const { label } = formatResearchStep(step);
+        const isLast = i === visible.length - 1;
         return (
           <Stack
             key={i}
@@ -74,17 +179,16 @@ function ResearchSteps({ steps, isRunning }: { steps: string[]; isRunning: boole
             spacing={0.75}
             sx={{ py: 0.2 }}
           >
-            <Typography sx={{ fontSize: '0.65rem', lineHeight: 1, width: 14, textAlign: 'center', flexShrink: 0 }}>
-              {isLast && isRunning ? '' : icon}
-            </Typography>
-            {isLast && isRunning && (
+            {isLast ? (
               <CircularProgress size={10} thickness={5} sx={{ color: 'var(--accent-yellow)', flexShrink: 0 }} />
+            ) : (
+              <CheckCircleOutlineIcon sx={{ fontSize: 12, color: 'var(--muted-text)', flexShrink: 0 }} />
             )}
             <Typography
               sx={{
                 fontFamily: '"JetBrains Mono", ui-monospace, SFMono-Regular, monospace',
                 fontSize: '0.68rem',
-                color: isLast && isRunning ? 'var(--text)' : 'var(--muted-text)',
+                color: isLast ? 'var(--text)' : 'var(--muted-text)',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
@@ -402,6 +506,12 @@ export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProp
     const activeId = s.activeSessionId;
     return activeId ? (s.sessionStates[activeId]?.researchSteps) : undefined;
   }) ?? EMPTY_STEPS;
+  const researchStats = useAgentStore(s => {
+    const activeId = s.activeSessionId;
+    return activeId ? s.sessionStates[activeId]?.researchStats : undefined;
+  }) ?? { toolCount: 0, tokenCount: 0, startedAt: null, finalElapsed: null };
+  const liveElapsed = useElapsed(researchStats.startedAt);
+  const isProcessing = useAgentStore(s => s.isProcessing);
   const { setRightPanelOpen, setLeftSidebarOpen } = useLayoutStore();
 
   // ── Batch approval state ──────────────────────────────────────────
@@ -680,19 +790,21 @@ export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProp
           const clickable =
             state === 'output-available' ||
             state === 'output-error' ||
-            !!tool.input;
+            !!tool.input ||
+            (!isProcessing && (state === 'input-available' || state === 'input-streaming'));
           const localDecision = decisions[tool.toolCallId];
 
           const cancelled = isCancelledTool(tool);
           const currentlyHasError = state === 'output-error';
           const persistedError = getToolError(tool.toolCallId);
-
-          // Use persisted error OR current error (persisting happens in useEffect)
           const hasError = persistedError || currentlyHasError;
 
-          const displayState = isPending && localDecision
-            ? (localDecision.approved ? 'input-available' : 'output-denied')
-            : state;
+          // Stale in-progress tools after page reload: treat as completed
+          const stale = !isProcessing && (state === 'input-available' || state === 'input-streaming');
+          const displayState = stale ? 'output-available'
+            : isPending && localDecision
+              ? (localDecision.approved ? 'input-available' : 'output-denied')
+              : state;
           const label = cancelled ? 'cancelled'
             : hasError ? 'error'
             : statusLabel(displayState as ToolPartState);
@@ -762,25 +874,37 @@ export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProp
                 </Typography>
 
                 {/* Status chip (non hf_jobs, or hf_jobs without final status) */}
-                {label && !(tool.toolName === 'hf_jobs' && jobMeta.jobStatus) && (
-                  <Chip
-                    label={label}
-                    size="small"
-                    sx={{
-                      height: 20,
-                      fontSize: '0.65rem',
-                      fontWeight: 600,
-                      bgcolor: cancelled ? 'rgba(255,255,255,0.05)'
-                        : hasError ? 'rgba(224,90,79,0.12)'
-                        : displayState === 'output-denied' ? 'rgba(255,255,255,0.05)'
-                        : 'var(--accent-yellow-weak)',
-                      color: cancelled ? 'var(--muted-text)'
-                        : hasError ? 'var(--accent-red)'
-                        : statusColor(displayState as ToolPartState),
-                      letterSpacing: '0.03em',
-                    }}
-                  />
-                )}
+                {(() => {
+                  // Research tool: override chip label with live stats (but not if cancelled/done)
+                  const researchDone = cancelled || state === 'output-available' || state === 'output-error' || state === 'output-denied';
+                  const researchLabel = tool.toolName === 'research' && !researchDone
+                    ? researchChipLabel(researchStats, liveElapsed)
+                    : (tool.toolName === 'research' && researchDone && researchStats.finalElapsed !== null)
+                      ? researchChipLabel({ ...researchStats, startedAt: null }, null)
+                      : null;
+                  const chipLabel = researchLabel || label;
+                  if (!chipLabel || (tool.toolName === 'hf_jobs' && jobMeta.jobStatus)) return null;
+                  return (
+                    <Chip
+                      label={chipLabel}
+                      size="small"
+                      sx={{
+                        height: 20,
+                        fontSize: '0.65rem',
+                        fontWeight: 600,
+                        bgcolor: cancelled ? 'rgba(255,255,255,0.05)'
+                          : hasError ? 'rgba(224,90,79,0.12)'
+                          : displayState === 'output-denied' ? 'rgba(255,255,255,0.05)'
+                          : (researchLabel && displayState === 'output-available') ? 'rgba(47,204,113,0.12)'
+                          : 'var(--accent-yellow-weak)',
+                        color: cancelled ? 'var(--muted-text)'
+                          : hasError ? 'var(--accent-red)'
+                          : statusColor(displayState as ToolPartState),
+                        letterSpacing: '0.03em',
+                      }}
+                    />
+                  );
+                })()}
 
                 {/* HF Jobs: final status chip from job metadata */}
                 {tool.toolName === 'hf_jobs' && jobMeta.jobStatus && (
@@ -834,11 +958,11 @@ export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProp
                 )}
               </Stack>
 
-              {/* Research sub-agent steps */}
-              {tool.toolName === 'research' && researchSteps.length > 0 && (
+              {/* Research sub-agent rolling steps (visible only while running) */}
+              {tool.toolName === 'research' && !cancelled && state !== 'output-available' && state !== 'output-error' && state !== 'output-denied' && (
                 <ResearchSteps
                   steps={researchSteps}
-                  isRunning={state === 'input-streaming' || state === 'input-available'}
+                  isRunning={researchStats.startedAt !== null}
                 />
               )}
 

frontend/src/hooks/useAgentChat.ts

@@ -86,14 +86,39 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
         }
       },
       onToolLog: (tool: string, log: string) => {
-        // Research sub-agent: accumulate steps + update activity status
+        // Research sub-agent: parse stats vs step logs
         if (tool === 'research') {
           const sessState = useAgentStore.getState().getSessionState(sessionId);
-          const steps = [...sessState.researchSteps, log];
-          updateSession(sessionId, {
-            researchSteps: steps,
-            activityStatus: { type: 'tool', toolName: 'research', description: log },
-          });
+          const stats = { ...sessState.researchStats };
+
+          if (log === 'Starting research sub-agent...') {
+            updateSession(sessionId, {
+              researchSteps: [],
+              researchStats: { toolCount: 0, tokenCount: 0, startedAt: Date.now(), finalElapsed: null },
+              activityStatus: { type: 'tool', toolName: 'research', description: log },
+            });
+          } else if (log.startsWith('tokens:')) {
+            stats.tokenCount = parseInt(log.slice(7), 10);
+            updateSession(sessionId, { researchStats: stats });
+          } else if (log.startsWith('tools:')) {
+            stats.toolCount = parseInt(log.slice(6), 10);
+            updateSession(sessionId, { researchStats: stats });
+          } else if (log === 'Research complete.') {
+            const elapsed = stats.startedAt
+              ? Math.round((Date.now() - stats.startedAt) / 1000)
+              : null;
+            updateSession(sessionId, {
+              researchStats: { ...stats, startedAt: null, finalElapsed: elapsed },
+              activityStatus: { type: 'tool', toolName: 'research', description: log },
+            });
+          } else {
+            // Regular tool call step — append
+            const steps = [...sessState.researchSteps, log];
+            updateSession(sessionId, {
+              researchSteps: steps,
+              activityStatus: { type: 'tool', toolName: 'research', description: log },
+            });
+          }
           return;
         }
 
@@ -235,8 +260,11 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
         const updates: Partial<import('@/store/agentStore').PerSessionState> = {
           activityStatus: { type: 'tool', toolName, description },
         };
-        // Clear research steps when a new research call starts
-        if (toolName === 'research') updates.researchSteps = [];
+        // Clear research steps + stats when a new research call starts
+        if (toolName === 'research') {
+          updates.researchSteps = [];
+          updates.researchStats = { toolCount: 0, tokenCount: 0, startedAt: null, finalElapsed: null };
+        }
         updateSession(sessionId, updates);
       },
       onInterrupted: () => { /* no-op — handled by stop() caller */ },

frontend/src/store/agentStore.ts

@@ -63,6 +63,8 @@ export interface PerSessionState {
   plan: PlanItem[];
   /** Steps completed by the research sub-agent (tool_log events). */
   researchSteps: string[];
+  /** Live stats from the research sub-agent. */
+  researchStats: { toolCount: number; tokenCount: number; startedAt: number | null; finalElapsed: number | null };
 }
 
 const defaultSessionState: PerSessionState = {
@@ -73,6 +75,7 @@ const defaultSessionState: PerSessionState = {
   panelEditable: false,
   plan: [],
   researchSteps: [],
+  researchStats: { toolCount: 0, tokenCount: 0, startedAt: null, finalElapsed: null },
 };
 
 interface AgentStore {
@@ -271,6 +274,7 @@ export const useAgentStore = create<AgentStore>()((set, get) => ({
         panelEditable: state.panelEditable,
         plan: state.plan,
         researchSteps: state.sessionStates[state.activeSessionId]?.researchSteps ?? [],
+        researchStats: state.sessionStates[state.activeSessionId]?.researchStats ?? defaultSessionState.researchStats,
       };
     }