feat: add activity status bar above chat input

Shows real-time agent activity with a pulsing dot and label:
- Thinking (yellow) — waiting for LLM response
- Writing (blue) — streaming assistant text
- Running <tool> (green) — executing a tool
- Waiting for approval (yellow) — needs user decision

Backed by activityStatus in agentStore, fed by side-channel
callbacks from the WebSocket transport.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/Chat/ActivityStatusBar.tsx

@@ -0,0 +1,81 @@
+import { Box, Typography } from '@mui/material';
+import { keyframes } from '@mui/system';
+import { useAgentStore, type ActivityStatus } from '@/store/agentStore';
+
+const pulse = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+`;
+
+const TOOL_LABELS: Record<string, string> = {
+  hf_jobs: 'Running job',
+  hf_repo_files: 'Uploading file',
+  hf_repo_git: 'Git operation',
+  hf_inspect_dataset: 'Inspecting dataset',
+  hf_search: 'Searching',
+  plan_tool: 'Planning',
+};
+
+function statusLabel(status: ActivityStatus): string {
+  switch (status.type) {
+    case 'thinking': return 'Thinking';
+    case 'streaming': return 'Writing';
+    case 'tool': return TOOL_LABELS[status.toolName] || `Running ${status.toolName}`;
+    case 'waiting-approval': return 'Waiting for approval';
+    default: return '';
+  }
+}
+
+function statusDot(status: ActivityStatus): string {
+  switch (status.type) {
+    case 'thinking': return 'var(--accent-yellow)';
+    case 'streaming': return 'var(--accent-blue, #58a6ff)';
+    case 'tool': return 'var(--accent-green, #3fb950)';
+    case 'waiting-approval': return 'var(--accent-yellow)';
+    default: return 'transparent';
+  }
+}
+
+export default function ActivityStatusBar() {
+  const activityStatus = useAgentStore(s => s.activityStatus);
+
+  if (activityStatus.type === 'idle') return null;
+
+  const label = statusLabel(activityStatus);
+  const dotColor = statusDot(activityStatus);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        px: 2,
+        py: 0.5,
+        minHeight: 28,
+      }}
+    >
+      <Box
+        sx={{
+          width: 6,
+          height: 6,
+          borderRadius: '50%',
+          bgcolor: dotColor,
+          animation: `${pulse} 1.5s ease-in-out infinite`,
+          flexShrink: 0,
+        }}
+      />
+      <Typography
+        sx={{
+          fontFamily: 'monospace',
+          fontSize: '0.72rem',
+          color: 'var(--muted-text)',
+          letterSpacing: '0.02em',
+          animation: `${pulse} 1.5s ease-in-out infinite`,
+        }}
+      >
+        {label}…
+      </Typography>
+    </Box>
+  );
+}

frontend/src/components/Layout/AppLayout.tsx

@@ -25,6 +25,7 @@ import { useAgentChat } from '@/hooks/useAgentChat';
 import SessionSidebar from '@/components/SessionSidebar/SessionSidebar';
 import CodePanel from '@/components/CodePanel/CodePanel';
 import ChatInput from '@/components/Chat/ChatInput';
+import ActivityStatusBar from '@/components/Chat/ActivityStatusBar';
 import MessageList from '@/components/Chat/MessageList';
 import WelcomeScreen from '@/components/WelcomeScreen/WelcomeScreen';
 import { apiFetch } from '@/utils/api';
@@ -359,6 +360,7 @@ export default function AppLayout() {
             {activeSessionId ? (
               <>
                 <MessageList messages={messages} isProcessing={isProcessing} approveTools={approveTools} onUndoLastTurn={undoLastTurn} />
+                <ActivityStatusBar />
                 <ChatInput
                   onSend={handleSendMessage}
                   onStop={stop}

frontend/src/hooks/useAgentChat.ts

@@ -28,6 +28,7 @@ export function useAgentChat({ sessionId, onReady, onError, onSessionDead }: Use
   const {
     setProcessing,
     setConnected,
+    setActivityStatus,
     setError,
     setPanelTab,
     setActivePanelTab,
@@ -57,6 +58,7 @@ export function useAgentChat({ sessionId, onReady, onError, onSessionDead }: Use
       },
       onProcessing: () => {
         setProcessing(true);
+        setActivityStatus({ type: 'thinking' });
       },
       onProcessingDone: () => {
         setProcessing(false);
@@ -110,6 +112,7 @@ export function useAgentChat({ sessionId, onReady, onError, onSessionDead }: Use
       },
       onApprovalRequired: (tools) => {
         if (!tools.length) return;
+        setActivityStatus({ type: 'waiting-approval' });
         const firstTool = tools[0];
         const args = firstTool.arguments as Record<string, string | undefined>;
 
@@ -172,6 +175,12 @@ export function useAgentChat({ sessionId, onReady, onError, onSessionDead }: Use
           if (!success) setActivePanelTab('output');
         }
       },
+      onStreaming: () => {
+        setActivityStatus({ type: 'streaming' });
+      },
+      onToolRunning: (toolName: string) => {
+        setActivityStatus({ type: 'tool', toolName });
+      },
     }),
     // Zustand setters are stable
     // eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/lib/ws-chat-transport.ts

@@ -31,6 +31,10 @@ export interface SideChannelCallbacks {
   onToolCallPanel: (tool: string, args: Record<string, unknown>) => void;
   /** Called when tool_output arrives with panel-relevant data */
   onToolOutputPanel: (tool: string, toolCallId: string, output: string, success: boolean) => void;
+  /** Called when assistant text starts streaming */
+  onStreaming: () => void;
+  /** Called when a tool starts running (non-plan) */
+  onToolRunning: (toolName: string) => void;
 }
 
 // ---------------------------------------------------------------------------
@@ -414,6 +418,7 @@ export class WebSocketChatTransport implements ChatTransport<UIMessage> {
         if (!this.textPartId) {
           this.textPartId = nextPartId('text');
           this.enqueue({ type: 'text-start', id: this.textPartId });
+          this.sideChannel.onStreaming();
         }
         this.enqueue({ type: 'text-delta', id: this.textPartId, delta });
         break;
@@ -445,6 +450,7 @@ export class WebSocketChatTransport implements ChatTransport<UIMessage> {
         this.enqueue({ type: 'tool-input-start', toolCallId, toolName, dynamic: true });
         this.enqueue({ type: 'tool-input-available', toolCallId, toolName, input: args, dynamic: true });
 
+        this.sideChannel.onToolRunning(toolName);
         this.sideChannel.onToolCallPanel(toolName, args as Record<string, unknown>);
         break;
       }

frontend/src/store/agentStore.ts

@@ -32,10 +32,18 @@ export interface LLMHealthError {
   model: string;
 }
 
+export type ActivityStatus =
+  | { type: 'idle' }
+  | { type: 'thinking' }
+  | { type: 'tool'; toolName: string }
+  | { type: 'waiting-approval' }
+  | { type: 'streaming' };
+
 interface AgentStore {
   // Global UI flags
   isProcessing: boolean;
   isConnected: boolean;
+  activityStatus: ActivityStatus;
   user: User | null;
   error: string | null;
   llmHealthError: LLMHealthError | null;
@@ -54,6 +62,7 @@ interface AgentStore {
   // Actions
   setProcessing: (isProcessing: boolean) => void;
   setConnected: (isConnected: boolean) => void;
+  setActivityStatus: (status: ActivityStatus) => void;
   setUser: (user: User | null) => void;
   setError: (error: string | null) => void;
   setLlmHealthError: (error: LLMHealthError | null) => void;
@@ -76,6 +85,7 @@ interface AgentStore {
 export const useAgentStore = create<AgentStore>()((set, get) => ({
   isProcessing: false,
   isConnected: false,
+  activityStatus: { type: 'idle' },
   user: null,
   error: null,
   llmHealthError: null,
@@ -90,8 +100,9 @@ export const useAgentStore = create<AgentStore>()((set, get) => ({
 
   // ── Global flags ──────────────────────────────────────────────────
 
-  setProcessing: (isProcessing) => set({ isProcessing }),
+  setProcessing: (isProcessing) => set({ isProcessing, ...(!isProcessing ? { activityStatus: { type: 'idle' } } : {}) }),
   setConnected: (isConnected) => set({ isConnected }),
+  setActivityStatus: (status) => set({ activityStatus: status }),
   setUser: (user) => set({ user }),
   setError: (error) => set({ error }),
   setLlmHealthError: (error) => set({ llmHealthError: error }),