Show progress timing for thinking/agents

Author: zwaetschge

packages/frontend/src/pages/SessionPage.tsx

@@ -51,6 +51,7 @@ export function SessionPage() {
   const cliToolAbortRef = useRef<AbortController | null>(null);
   const [mobileView, setMobileView] = useState<MobileView>('chat');
   const [showAllowedDirsDialog, setShowAllowedDirsDialog] = useState(false);
+  const [now, setNow] = useState(Date.now());
 
   const { usage, addMessage } = useSessionStore();
   const { uiProvider } = useProviderStore();
@@ -125,6 +126,13 @@ export function SessionPage() {
   const currentSelectedFile = selectedFile[id || ''];
   const currentOpenFiles = openFiles[id || ''] || [];
   const hasOpenFiles = currentOpenFiles.length > 0;
+  const isActive = currentActivity.type === 'thinking' || !!currentActiveAgent;
+
+  useEffect(() => {
+    if (!isActive) return;
+    const intervalId = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(intervalId);
+  }, [isActive]);
 
   // Combine messages and generated images into a single timeline
   // Tool executions are NOT added to timeline - they're shown inline with activity indicator
@@ -198,6 +206,47 @@ export function SessionPage() {
     return agentMap[agentType] || agentType;
   }, []);
 
+  const getAgentDescription = useCallback((agentType: string) => {
+    const descriptions: Record<string, string> = {
+      'Explore': 'Exploring project',
+      'Plan': 'Drafting a plan',
+      'general-purpose': 'Handling general tasks',
+      'claude-code-guide': 'Checking docs',
+      'research-bot': 'Researching',
+      'frontend-developer': 'Working on UI',
+      'mobile-developer': 'Working on mobile',
+      'backend-dev': 'Working on backend',
+      'fullstack-dev': 'Working across stack',
+      'api-designer': 'Designing API',
+      'ui-designer': 'Designing UI',
+      'devops': 'Handling infra',
+      'devops-engineer': 'Handling infra',
+      'database': 'Working on database',
+      'database-specialist': 'Working on database',
+      'git-ops': 'Managing git tasks',
+      'git-operations': 'Managing git tasks',
+      'debugger': 'Debugging',
+      'debugging-expert': 'Debugging',
+      'architect': 'Designing architecture',
+      'system-architect': 'Designing architecture',
+    };
+    return descriptions[agentType] || `Running ${agentType} agent`;
+  }, []);
+
+  const formatElapsed = useCallback((ms: number) => {
+    const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    if (hours > 0) {
+      return `${hours}h ${minutes}m`;
+    }
+    if (minutes > 0) {
+      return `${minutes}m ${seconds}s`;
+    }
+    return `${seconds}s`;
+  }, []);
+
   // Fetch session details
   const { data: session, isLoading: sessionLoading } = useQuery({
     queryKey: ['session', id],
@@ -830,9 +879,10 @@ export function SessionPage() {
                         <span className="text-sm font-medium text-purple-600 dark:text-purple-400">
                           Agent: {getAgentDisplay(currentActiveAgent.agentType)}
                         </span>
-                        {currentActiveAgent.description && (
-                          <span className="text-xs text-muted-foreground">{currentActiveAgent.description}</span>
-                        )}
+                        <span className="text-xs text-muted-foreground">
+                          {currentActiveAgent.description || getAgentDescription(currentActiveAgent.agentType)}
+                          {currentActiveAgent.startedAt ? ` (${formatElapsed(now - currentActiveAgent.startedAt)})` : ''}
+                        </span>
                       </div>
                     </>
                   ) : currentActivity.type === 'thinking' ? (
@@ -841,7 +891,9 @@ export function SessionPage() {
                       <div className="flex flex-col">
                         <span className="text-sm font-medium">{providerLabel} is thinking...</span>
                         <span className="text-xs text-muted-foreground">
-                          {currentActivity.message || 'Analyzing request'}
+                          {currentActivity.message
+                            ? `• ${currentActivity.message}${currentActivity.messageStartedAt ? ` (${formatElapsed(now - currentActivity.messageStartedAt)})` : ''}`
+                            : 'Analyzing request'}
                         </span>
                       </div>
                     </>

packages/frontend/src/services/socket.ts

@@ -80,8 +80,13 @@ class SocketService {
       if (data.isThinking) {
         this.activeSessions.add(data.sessionId);
         const existing = activity[data.sessionId];
+        const now = Date.now();
         const message = data.message ?? (existing?.type === 'thinking' ? existing.message : undefined);
-        setActivity(data.sessionId, { type: 'thinking', message });
+        const startedAt = existing?.type === 'thinking' ? (existing.startedAt ?? now) : now;
+        const messageStartedAt = message && message !== existing?.message
+          ? now
+          : (existing?.messageStartedAt ?? (message ? now : undefined));
+        setActivity(data.sessionId, { type: 'thinking', message, startedAt, messageStartedAt });
       } else {
         // Claude stopped thinking - check if task is complete
         const wasActive = this.activeSessions.has(data.sessionId);
@@ -144,6 +149,7 @@ class SocketService {
           agentType: data.agentType,
           description: data.description,
           status: data.status,
+          startedAt: Date.now(),
         });
       } else {
         // Clear agent when completed or error

packages/frontend/src/stores/sessionStore.ts

@@ -7,13 +7,16 @@ export interface ActivityState {
   toolName?: string;
   toolStatus?: 'started' | 'completed' | 'error';
   message?: string;
+  startedAt?: number;
+  messageStartedAt?: number;
 }
 
 // Active agent state
 export interface AgentState {
   agentType: string;
   description?: string;
   status: 'started' | 'completed' | 'error';
+  startedAt?: number;
 }
 
 // Todo item from Claude's TodoWrite tool