claude-ws 0.3.97 → 0.3.99

package/src/components/task/task-detail-panel.tsx

@@ -114,6 +114,7 @@ export function TaskDetailPanel({ className }: TaskDetailPanelProps) {
     activeQuestion,
     answerQuestion,
     cancelQuestion,
+    refetchQuestion,
   } = useAttemptStream({
     taskId: selectedTask?.id,
     onComplete: handleTaskComplete,
@@ -311,7 +312,15 @@ export function TaskDetailPanel({ className }: TaskDetailPanelProps) {
         currentFiles={isRunning ? currentAttemptFiles : undefined}
         isRunning={isRunning}
         activeQuestion={activeQuestion}
-        onOpenQuestion={() => setShowQuestionPrompt(true)}
+        onOpenQuestion={() => {
+          if (activeQuestion) {
+            setShowQuestionPrompt(true);
+          } else {
+            // activeQuestion not yet loaded — re-fetch from server
+            // useEffect on activeQuestion will show the prompt when it arrives
+            refetchQuestion();
+          }
+        }}
       />
     </div>
   );
@@ -320,32 +329,23 @@ export function TaskDetailPanel({ className }: TaskDetailPanelProps) {
     <>
       <Separator />
       <div className="relative">
-        {showQuestionPrompt ? (
+        {showQuestionPrompt && activeQuestion ? (
           <div className="border-t bg-muted/30">
-            {activeQuestion ? (
-              <QuestionPrompt
-                key={activeQuestion.toolUseId}
-                questions={activeQuestion.questions}
-                onAnswer={(answers) => {
-                  if (selectedTask?.status !== 'in_progress') {
-                    moveTaskToInProgress(selectedTask.id);
-                  }
-                  answerQuestion(activeQuestion.questions, answers as Record<string, string>);
-                  setShowQuestionPrompt(false);
-                }}
-                onCancel={() => {
-                  cancelQuestion();
-                  setShowQuestionPrompt(false);
-                }}
-              />
-            ) : (
-              <div className="py-8 px-4 text-center">
-                <div className="inline-flex items-center gap-2 text-muted-foreground text-sm">
-                  <div className="size-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
-                  <span>Loading question...</span>
-                </div>
-              </div>
-            )}
+            <QuestionPrompt
+              key={activeQuestion.toolUseId}
+              questions={activeQuestion.questions}
+              onAnswer={(answers) => {
+                if (selectedTask?.status !== 'in_progress') {
+                  moveTaskToInProgress(selectedTask.id);
+                }
+                answerQuestion(activeQuestion.questions, answers as Record<string, string>);
+                setShowQuestionPrompt(false);
+              }}
+              onCancel={() => {
+                cancelQuestion();
+                setShowQuestionPrompt(false);
+              }}
+            />
           </div>
         ) : shellPanelExpanded && currentProjectId ? (
           <ShellExpandedPanel
@@ -458,7 +458,7 @@ export function TaskDetailPanel({ className }: TaskDetailPanelProps) {
                 variant="ghost"
                 size="icon-sm"
                 onClick={handleDetach}
-                title="Detach to floating window"
+                title={t('detachToFloating')}
               >
                 <Minimize2 className="size-4" />
               </Button>

package/src/components/task/task-shell-indicator.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { ChevronDown, ChevronUp, Terminal, Square, Circle } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { useShellStore, type ShellInfo } from '@/stores/shell-store';
@@ -15,6 +16,7 @@ interface ShellItemProps {
 }
 
 function ShellItem({ shell, isSelected, onSelect, onStop }: ShellItemProps) {
+  const t = useTranslations('task');
   const displayCommand =
     shell.command.length > 40 ? shell.command.slice(0, 40) + '...' : shell.command;
 
@@ -53,7 +55,7 @@ function ShellItem({ shell, isSelected, onSelect, onStop }: ShellItemProps) {
             e.stopPropagation();
             onStop();
           }}
-          title="Stop shell (K)"
+          title={t('stopShell')}
         >
           <Square className="h-3 w-3" />
         </Button>
@@ -72,6 +74,7 @@ interface ShellToggleBarProps {
 }
 
 export function ShellToggleBar({ projectId, isExpanded, onToggle }: ShellToggleBarProps) {
+  const t = useTranslations('task');
   const { shells, subscribeToProject } = useShellStore();
 
   useEffect(() => {
@@ -103,7 +106,7 @@ export function ShellToggleBar({ projectId, isExpanded, onToggle }: ShellToggleB
       )}
       <Terminal className="h-3 w-3" />
       <span>
-        <span className="text-green-500 font-medium">{runningCount}</span> running background task{runningCount !== 1 ? 's' : ''}
+        {t('runningBackgroundTasks', { count: runningCount })}
       </span>
     </button>
   );
@@ -119,6 +122,7 @@ interface ShellExpandedPanelProps {
 }
 
 export function ShellExpandedPanel({ projectId, onClose, className }: ShellExpandedPanelProps) {
+  const t = useTranslations('task');
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [viewingShellId, setViewingShellId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -237,10 +241,10 @@ export function ShellExpandedPanel({ projectId, onClose, className }: ShellExpan
       </div>
       {/* Keyboard hints */}
       <div className="text-[10px] text-muted-foreground/60 pt-2 flex gap-3 justify-center">
-        <span>↑↓ navigate</span>
-        <span>⏎ view logs</span>
-        <span>K kill</span>
-        <span>Esc close</span>
+        <span>↑↓ {t('navigateHint')}</span>
+        <span>⏎ {t('viewLogsHint')}</span>
+        <span>K {t('killHint')}</span>
+        <span>Esc {t('closeHint')}</span>
       </div>
     </div>
   );

package/src/components/terminal/terminal-context-menu.tsx

@@ -10,6 +10,7 @@ import {
   ContextMenuShortcut,
 } from '@/components/ui/context-menu';
 import { useTerminalStore } from '@/stores/terminal-store';
+import { useTranslations } from 'next-intl';
 
 interface TerminalContextMenuProps {
   terminalId: string;
@@ -17,6 +18,7 @@ interface TerminalContextMenuProps {
 }
 
 export function TerminalContextMenu({ terminalId, children }: TerminalContextMenuProps) {
+  const tCommon = useTranslations('common');
   const copySelection = useTerminalStore((s) => s.copySelection);
   const pasteClipboard = useTerminalStore((s) => s.pasteClipboard);
   const selectAll = useTerminalStore((s) => s.selectAll);
@@ -30,23 +32,23 @@ export function TerminalContextMenu({ terminalId, children }: TerminalContextMen
       <ContextMenuContent className="w-52">
         <ContextMenuItem onClick={() => copySelection(terminalId)}>
           <Copy className="mr-2 h-4 w-4" />
-          Copy
+          {tCommon('copy')}
           <ContextMenuShortcut>Ctrl+Shift+C</ContextMenuShortcut>
         </ContextMenuItem>
         <ContextMenuItem onClick={() => pasteClipboard(terminalId)}>
           <ClipboardPaste className="mr-2 h-4 w-4" />
-          Paste
+          {tCommon('paste')}
           <ContextMenuShortcut>Ctrl+Shift+V</ContextMenuShortcut>
         </ContextMenuItem>
         <ContextMenuSeparator />
         <ContextMenuItem onClick={() => selectAll(terminalId)}>
           <TextSelect className="mr-2 h-4 w-4" />
-          Select All
+          {tCommon('selectAll')}
         </ContextMenuItem>
         <ContextMenuSeparator />
         <ContextMenuItem onClick={() => clearTerminal(terminalId)}>
           <Trash2 className="mr-2 h-4 w-4" />
-          Clear Terminal
+          {tCommon('clearTerminal')}
         </ContextMenuItem>
       </ContextMenuContent>
     </ContextMenu>

package/src/components/terminal/terminal-instance.tsx

@@ -5,6 +5,7 @@ import { useTerminalStore } from '@/stores/terminal-store';
 import { getSocket } from '@/lib/socket-service';
 import { useTheme } from 'next-themes';
 import { toast } from 'sonner';
+import { useTranslations } from 'next-intl';
 
 interface TerminalInstanceProps {
   terminalId: string;
@@ -70,6 +71,13 @@ export function TerminalInstance({ terminalId, isVisible, isMobile }: TerminalIn
 
   const { sendInput, sendResize, panelHeight } = useTerminalStore();
   const { resolvedTheme } = useTheme();
+  const tShells = useTranslations('shells');
+  const copiedMsgRef = useRef(tShells('copiedToClipboard'));
+  const failedCopyMsgRef = useRef(tShells('failedToCopy'));
+  const clipboardDeniedMsgRef = useRef(tShells('clipboardDenied'));
+  copiedMsgRef.current = tShells('copiedToClipboard');
+  failedCopyMsgRef.current = tShells('failedToCopy');
+  clipboardDeniedMsgRef.current = tShells('clipboardDenied');
 
   // Initialize xterm on mount
   useEffect(() => {
@@ -133,8 +141,8 @@ export function TerminalInstance({ terminalId, isVisible, isMobile }: TerminalIn
         const sel = terminal.getSelection();
         if (!sel) return;
         const ok = await writeClipboard(sel);
-        if (ok) toast.success('Copied to clipboard');
-        else toast.error('Failed to copy');
+        if (ok) toast.success(copiedMsgRef.current);
+        else toast.error(failedCopyMsgRef.current);
       };
 
       const pasteFromClipboard = async () => {
@@ -142,7 +150,7 @@ export function TerminalInstance({ terminalId, isVisible, isMobile }: TerminalIn
           const text = await navigator.clipboard.readText();
           if (text) terminal.paste(text);
         } catch {
-          toast.error('Clipboard access denied — use the shortcut bar Paste button on mobile');
+          toast.error(clipboardDeniedMsgRef.current);
         }
       };
 

package/src/components/terminal/terminal-panel.tsx

@@ -11,8 +11,11 @@ import { TerminalTabBar } from './terminal-tab-bar';
 import { TerminalInstance } from './terminal-instance';
 import { TerminalShortcutBar } from './terminal-shortcut-bar';
 import { TerminalContextMenu } from './terminal-context-menu';
+import { useTranslations } from 'next-intl';
 
 export function TerminalPanel() {
+  const tShells = useTranslations('shells');
+  const tCommon = useTranslations('common');
   const isOpen = useTerminalStore((s) => s.isOpen);
   const panelHeight = useTerminalStore((s) => s.panelHeight);
   const setPanelHeight = useTerminalStore((s) => s.setPanelHeight);
@@ -140,14 +143,14 @@ export function TerminalPanel() {
       {isCreating ? (
         <div className="flex items-center gap-2 text-muted-foreground text-sm">
           <Loader2 className="h-4 w-4 animate-spin" />
-          <span>Creating terminal...</span>
+          <span>{tShells('creatingTerminal')}</span>
         </div>
       ) : createFailed ? (
         <div className="flex flex-col items-center gap-3 text-sm">
-          <p className="text-muted-foreground">Failed to create terminal</p>
+          <p className="text-muted-foreground">{tShells('failedToCreateTerminal')}</p>
           <Button variant="outline" size="sm" onClick={handleRetryCreate}>
             <RefreshCw className="h-3.5 w-3.5 mr-1.5" />
-            Retry
+            {tCommon('retry')}
           </Button>
         </div>
       ) : null}

package/src/components/terminal/terminal-shortcut-bar.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback, useRef, type PointerEvent as ReactPointerEvent }
 import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight, TextCursorInput, X, Copy, ClipboardPaste, TextSelect } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useTerminalStore } from '@/stores/terminal-store';
+import { useTranslations } from 'next-intl';
 
 /**
  * Mobile paste: always show dialog, pre-fill from clipboard if possible.
@@ -65,6 +66,7 @@ const SHORTCUT_KEYS: { label: string; input?: string; modifier?: 'ctrl' | 'alt';
 ];
 
 export function TerminalShortcutBar() {
+  const t = useTranslations('shells');
   const activeTabId = useTerminalStore((s) => s.activeTabId);
   const sendInput = useTerminalStore((s) => s.sendInput);
   const selectionMode = useTerminalStore((s) => activeTabId ? s.selectionMode[activeTabId] : false);
@@ -202,7 +204,7 @@ export function TerminalShortcutBar() {
         onPointerDown={onDown}
         onPointerUp={(e) => { if (isTap(e)) setSelectionMode(activeTabId, true); }}
         className={cn(btnBase, 'bg-muted text-muted-foreground')}
-        title="Selection mode"
+        title={t('selectionMode')}
       >
         <TextCursorInput className="h-4 w-4" />
       </button>

package/src/components/terminal/terminal-tab-bar.tsx

@@ -5,12 +5,14 @@ import { Plus, X, Terminal, ChevronDown, Square } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { useTerminalStore } from '@/stores/terminal-store';
+import { useTranslations } from 'next-intl';
 
 interface TerminalTabBarProps {
   projectId?: string;
 }
 
 export function TerminalTabBar({ projectId }: TerminalTabBarProps) {
+  const t = useTranslations('shells');
   const { tabs, activeTabId, setActiveTab, createTerminal, closeTerminal, closePanel, renameTerminal, sendInput } =
     useTerminalStore();
 
@@ -103,7 +105,7 @@ export function TerminalTabBar({ projectId }: TerminalTabBarProps) {
         size="icon"
         className="h-6 w-6 ml-1"
         onClick={handleNewTerminal}
-        title="New Terminal"
+        title={t('newTerminal')}
       >
         <Plus className="h-3.5 w-3.5" />
       </Button>
@@ -116,7 +118,7 @@ export function TerminalTabBar({ projectId }: TerminalTabBarProps) {
           size="icon"
           className="h-6 w-6 text-muted-foreground hover:text-red-500"
           onClick={() => sendInput(activeTabId, '\x03')}
-          title="Send Ctrl+C (SIGINT)"
+          title={t('sendCtrlC')}
         >
           <Square className="h-3 w-3 fill-current" />
         </Button>
@@ -127,7 +129,7 @@ export function TerminalTabBar({ projectId }: TerminalTabBarProps) {
         size="icon"
         className="h-6 w-6"
         onClick={closePanel}
-        title="Close Panel"
+        title={t('closePanel')}
       >
         <ChevronDown className="h-3.5 w-3.5" />
       </Button>

package/src/components/workflow/workflow-panel.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import { Network, X, ExternalLink } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useWorkflowStore, type WorkflowEntry } from '@/stores/workflow-store';
+import { useTaskStore } from '@/stores/task-store';
+import { cn } from '@/lib/utils';
+import type { SubagentNode, AgentMessage } from '@/lib/workflow-tracker';
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function StatusIcon({ status }: { status: SubagentNode['status'] }) {
+  switch (status) {
+    case 'completed':
+      return <span className="text-green-500 text-xs shrink-0">&#10003;</span>;
+    case 'in_progress':
+      return <span className="text-blue-500 text-xs shrink-0 animate-pulse">&#9679;</span>;
+    case 'failed':
+      return <span className="text-red-500 text-xs shrink-0">&#10007;</span>;
+    case 'orphaned':
+      return <span className="text-yellow-500 text-xs shrink-0">&#8856;</span>;
+    default:
+      return <span className="text-muted-foreground text-xs shrink-0">&#9679;</span>;
+  }
+}
+
+function WorkflowEntryItem({ entry }: { entry: WorkflowEntry }) {
+  const { selectTask } = useTaskStore();
+  const { closePanel } = useWorkflowStore();
+
+  const handleGoToTask = () => {
+    selectTask(entry.taskId);
+    closePanel();
+  };
+
+  return (
+    <div className="border-b border-border last:border-b-0 px-4 py-3">
+      {/* Task header */}
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm font-medium truncate">{entry.taskTitle}</span>
+        <button
+          onClick={handleGoToTask}
+          className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors shrink-0 ml-2"
+        >
+          <ExternalLink className="size-3" />
+          Go to task
+        </button>
+      </div>
+
+      {/* Agent tree */}
+      <div className="space-y-1">
+        {entry.nodes.map((node) => (
+          <div
+            key={node.id}
+            className="flex items-center gap-1.5 text-xs"
+            style={{ paddingLeft: node.depth * 16 }}
+          >
+            <StatusIcon status={node.status} />
+            <span className="text-foreground truncate">
+              {node.name || node.type}
+            </span>
+            {node.teamName && (
+              <Badge variant="outline" className="text-[9px] px-1 py-0 shrink-0">
+                {node.teamName}
+              </Badge>
+            )}
+            <span className="text-muted-foreground shrink-0 ml-auto">
+              {node.status === 'in_progress'
+                ? 'running...'
+                : node.durationMs !== undefined
+                  ? formatDuration(node.durationMs)
+                  : ''}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Messages */}
+      {entry.messages.length > 0 && (
+        <div className="mt-2 pt-2 border-t border-border/50 space-y-1">
+          {entry.messages.map((msg, idx) => (
+            <div key={idx} className="flex items-start gap-1.5 text-xs text-muted-foreground">
+              <span className="shrink-0">
+                [{msg.fromType} &rarr; {msg.toType}]
+              </span>
+              <span className="truncate">&quot;{msg.summary}&quot;</span>
+              <span className="shrink-0 ml-auto text-[10px]">
+                {formatTimestamp(msg.timestamp)}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface WorkflowPanelProps {
+  className?: string;
+}
+
+export function WorkflowPanel({ className }: WorkflowPanelProps) {
+  const { isOpen, closePanel, workflows, getActiveAgentCount } = useWorkflowStore();
+  const entries = Array.from(workflows.values());
+  const activeAgentCount = getActiveAgentCount();
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Overlay for mobile */}
+      <div
+        className="fixed inset-0 bg-black/50 z-40 sm:hidden"
+        onClick={closePanel}
+      />
+
+      {/* Sidebar */}
+      <div
+        className={cn(
+          'fixed right-0 top-0 h-full w-96 bg-background border-l shadow-lg z-50',
+          'flex flex-col',
+          className
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b">
+          <div className="flex items-center gap-2">
+            <Network className="size-4 text-muted-foreground" />
+            <h2 className="font-semibold text-sm">Agent Workflow</h2>
+            {activeAgentCount > 0 && (
+              <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+                {activeAgentCount}
+              </Badge>
+            )}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={closePanel}
+            className="h-8 w-8"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto">
+          {entries.length === 0 ? (
+            <div className="px-4 py-12 text-center">
+              <Network className="size-10 text-muted-foreground/30 mx-auto mb-3" />
+              <p className="text-sm text-muted-foreground">No active workflows</p>
+              <p className="text-xs text-muted-foreground/70 mt-1">
+                Agent workflows will appear here when tasks use subagents
+              </p>
+            </div>
+          ) : (
+            entries.map((entry) => (
+              <WorkflowEntryItem
+                key={entry.attemptId}
+                entry={entry}
+              />
+            ))
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/hooks/use-attempt-stream.ts

@@ -4,6 +4,8 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import { io, Socket } from 'socket.io-client';
 import type { ClaudeOutput, WsAttemptFinished } from '@/types';
 import { useRunningTasksStore } from '@/stores/running-tasks-store';
+import { useQuestionsStore } from '@/stores/questions-store';
+import { useWorkflowStore } from '@/stores/workflow-store';
 import { createLogger } from '@/lib/logger';
 
 const log = createLogger('AttemptStreamHook');
@@ -44,6 +46,7 @@ interface UseAttemptStreamResult {
   activeQuestion: ActiveQuestion | null;
   answerQuestion: (questions: Question[], answers: Record<string, string>) => void;
   cancelQuestion: () => void;
+  refetchQuestion: () => Promise<void>;
 }
 
 export function useAttemptStream(
@@ -330,14 +333,94 @@ export function useAttemptStream(
 
     socketInstance.on('question:ask', (data: any) => {
       log.debug({ data }, 'Received question:ask event');
-      // Filter by current attemptId to prevent cross-task question leaking
-      if (currentAttemptIdRef.current && data.attemptId !== currentAttemptIdRef.current) {
+      // Only accept questions for the current attempt — reject if ref is null or mismatched
+      if (!currentAttemptIdRef.current || data.attemptId !== currentAttemptIdRef.current) {
         log.debug({ receivedAttemptId: data.attemptId, currentAttemptId: currentAttemptIdRef.current }, 'Ignoring question from different attempt');
         return;
       }
       setActiveQuestion({ attemptId: data.attemptId, toolUseId: data.toolUseId, questions: data.questions });
     });
 
+    // Listen for global question events (for questions panel)
+    socketInstance.on('question:new', (data: any) => {
+      useQuestionsStore.getState().addQuestion({
+        attemptId: data.attemptId,
+        taskId: data.taskId,
+        taskTitle: data.taskTitle,
+        projectId: data.projectId,
+        toolUseId: data.toolUseId,
+        questions: data.questions,
+        timestamp: data.timestamp,
+      });
+    });
+
+    socketInstance.on('question:resolved', (data: { attemptId: string }) => {
+      useQuestionsStore.getState().removeQuestion(data.attemptId);
+    });
+
+    // Listen for per-attempt workflow updates (full data including nodes/messages)
+    socketInstance.on('status:workflow', (data: { attemptId: string; nodes: unknown[]; messages: unknown[]; summary: { chain: string[]; completedCount: number; activeCount: number; totalCount: number } }) => {
+      // Feed workflow store with full node data for the workflow panel
+      useWorkflowStore.getState().updateWorkflow(data.attemptId, {
+        nodes: data.nodes as any,
+        messages: data.messages as any,
+        summary: data.summary,
+      });
+    });
+
+    // Listen for global workflow updates (for workflow panel cross-task tracking)
+    socketInstance.on('workflow:update', (data: { attemptId: string; taskId: string; taskTitle: string; summary: { chain: string[]; completedCount: number; activeCount: number; totalCount: number } }) => {
+      useWorkflowStore.getState().updateWorkflow(data.attemptId, {
+        taskId: data.taskId,
+        taskTitle: data.taskTitle,
+        summary: data.summary,
+      });
+      // Clean up entries with no active agents
+      if (data.summary.activeCount === 0 && data.summary.totalCount > 0) {
+        // Keep for a bit so user can see final state, then remove
+        setTimeout(() => {
+          const entry = useWorkflowStore.getState().workflows.get(data.attemptId);
+          if (entry && entry.summary.activeCount === 0) {
+            useWorkflowStore.getState().removeWorkflow(data.attemptId);
+          }
+        }, 30000);
+      }
+    });
+
+    // Listen for stderr output (error messages from agent)
+    socketInstance.on('output:stderr', (data: { attemptId: string; content: string }) => {
+      if (currentAttemptIdRef.current && data.attemptId !== currentAttemptIdRef.current) return;
+      setMessages((prev) => [...prev, {
+        type: 'system' as any,
+        content: data.content,
+        isError: true,
+        _attemptId: data.attemptId,
+        _msgId: Math.random().toString(36),
+      }]);
+    });
+
+    // Listen for context compacting status
+    socketInstance.on('context:compacting', (data: { attemptId: string; taskId: string }) => {
+      setMessages((prev) => [...prev, {
+        type: 'system' as any,
+        content: 'Compacting conversation context...',
+        _attemptId: data.attemptId,
+        _msgId: Math.random().toString(36),
+      }]);
+    });
+
+    // Listen for prompt-too-long error
+    socketInstance.on('context:prompt-too-long', (data: { attemptId: string; message: string }) => {
+      if (currentAttemptIdRef.current && data.attemptId !== currentAttemptIdRef.current) return;
+      setMessages((prev) => [...prev, {
+        type: 'system' as any,
+        content: data.message,
+        isError: true,
+        _attemptId: data.attemptId,
+        _msgId: Math.random().toString(36),
+      }]);
+    });
+
     return () => {
       socketInstance.close();
       socketRef.current = null;
@@ -346,6 +429,10 @@ export function useAttemptStream(
 
   // Clear messages and reset state when taskId changes
   useEffect(() => {
+    // Unsubscribe from old attempt room to stop receiving its events
+    if (currentAttemptIdRef.current && socketRef.current) {
+      socketRef.current.emit('attempt:unsubscribe', { attemptId: currentAttemptIdRef.current });
+    }
     // Clear previous task's messages
     setMessages([]);
     setCurrentAttemptId(null);
@@ -371,6 +458,12 @@ export function useAttemptStream(
     }
   }, []);
 
+  // Re-fetch pending question for current attempt (used by UI to recover stuck questions)
+  const refetchQuestion = useCallback(async () => {
+    if (!currentAttemptIdRef.current) return;
+    await fetchPendingQuestion(currentAttemptIdRef.current);
+  }, [fetchPendingQuestion]);
+
   // Check for running attempt on mount/taskId change
   useEffect(() => {
     if (!taskId) return;
@@ -541,5 +634,5 @@ export function useAttemptStream(
     startAttempt(taskId, prompt, displayPrompt, fileIds, model);
   }, [isConnected, startAttempt]);
 
-  return { messages, isConnected, startAttempt, cancelAttempt, interruptAndSend, currentAttemptId, currentPrompt, isRunning, activeQuestion, answerQuestion, cancelQuestion };
+  return { messages, isConnected, startAttempt, cancelAttempt, interruptAndSend, currentAttemptId, currentPrompt, isRunning, activeQuestion, answerQuestion, cancelQuestion, refetchQuestion };
 }