Show cancelled prompt in shimmer status bar instead of chat input placeholder

frontend/src/components/Chat/ActivityStatusBar.tsx

@@ -32,6 +32,7 @@ function statusLabel(status: ActivityStatus): string {
       return base;
     }
     case 'waiting-approval': return 'Waiting for approval';
+    case 'cancelled': return 'What should the agent do instead?';
     default: return '';
   }
 }
@@ -59,7 +60,7 @@ export default function ActivityStatusBar() {
           animation: `${shimmer} 4s ease-in-out infinite`,
         }}
       >
-        {label}…
+        {label}{activityStatus.type !== 'cancelled' && '…'}
       </Typography>
     </Box>
   );

frontend/src/components/SessionChat.tsx

@@ -5,7 +5,7 @@
  * runs — processing events — but only the active session renders visible
  * UI (MessageList + ChatInput).
  */
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useAgentChat } from '@/hooks/useAgentChat';
 import { useAgentStore } from '@/store/agentStore';
 import { useSessionStore } from '@/store/sessionStore';
@@ -24,8 +24,6 @@ export default function SessionChat({ sessionId, isActive, onSessionDead }: Sess
   const { isConnected, isProcessing, activityStatus, updateSession } = useAgentStore();
   const { updateSessionTitle } = useSessionStore();
 
-  const [wasCancelled, setWasCancelled] = useState(false);
-
   const { messages, sendMessage, stop, status, undoLastTurn, approveTools } = useAgentChat({
     sessionId,
     isActive,
@@ -57,11 +55,11 @@ export default function SessionChat({ sessionId, isActive, onSessionDead }: Sess
     return () => document.removeEventListener('visibilitychange', onVisible);
   }, [isActive, sessionId]);
 
-  // Wrap stop to track cancellation
+  // Wrap stop to show cancelled shimmer
   const handleStop = useCallback(() => {
     stop();
-    setWasCancelled(true);
-  }, [stop]);
+    updateSession(sessionId, { activityStatus: { type: 'cancelled' } });
+  }, [stop, updateSession, sessionId]);
 
   // SDK status is the ground truth — if it's streaming/submitted, agent is busy
   const sdkBusy = status === 'streaming' || status === 'submitted';
@@ -71,8 +69,7 @@ export default function SessionChat({ sessionId, isActive, onSessionDead }: Sess
     async (text: string) => {
       if (!text.trim() || busy) return;
 
-      setWasCancelled(false);
-      updateSession(sessionId, { isProcessing: true });
+      updateSession(sessionId, { isProcessing: true, activityStatus: { type: 'thinking' } });
       sendMessage({ text: text.trim(), metadata: { createdAt: new Date().toISOString() } });
 
       // Auto-title the session from the first user message
@@ -114,9 +111,7 @@ export default function SessionChat({ sessionId, isActive, onSessionDead }: Sess
         placeholder={
           activityStatus.type === 'waiting-approval'
             ? 'Approve or reject pending tools first...'
-            : wasCancelled
-              ? 'What should the agent do instead?'
-              : undefined
+            : undefined
         }
       />
     </>

frontend/src/store/agentStore.ts

@@ -50,7 +50,8 @@ export type ActivityStatus =
   | { type: 'thinking' }
   | { type: 'tool'; toolName: string; description?: string }
   | { type: 'waiting-approval' }
-  | { type: 'streaming' };
+  | { type: 'streaming' }
+  | { type: 'cancelled' };
 
 /** State that is tracked per-session (each session has its own copy). */
 export interface PerSessionState {
@@ -222,7 +223,7 @@ export const useAgentStore = create<AgentStore>()((set, get) => ({
     // Apply the processing→idle side effect
     const processingCleared = 'isProcessing' in updates && !updates.isProcessing;
     if (processingCleared) {
-      if (updated.activityStatus.type !== 'waiting-approval') {
+      if (updated.activityStatus.type !== 'waiting-approval' && updated.activityStatus.type !== 'cancelled') {
         updated.activityStatus = { type: 'idle' };
       }
     }
@@ -300,7 +301,7 @@ export const useAgentStore = create<AgentStore>()((set, get) => ({
 
   setProcessing: (isProcessing) => {
     const current = get().activityStatus;
-    const preserveStatus = current.type === 'waiting-approval';
+    const preserveStatus = current.type === 'waiting-approval' || current.type === 'cancelled';
     set({ isProcessing, ...(!isProcessing && !preserveStatus ? { activityStatus: { type: 'idle' } } : {}) });
   },
   setConnected: (isConnected) => set({ isConnected }),