claude-ws 0.3.97 → 0.3.99

package/src/components/task/conversation-view.tsx

@@ -230,22 +230,19 @@ export function ConversationView({
     }
   }, [isRunning]);
 
-  // Auto-scroll: during streaming, scroll if was near bottom recently (300ms threshold)
+  // Auto-scroll: during streaming, use sticky-to-bottom pattern
+  // When user scrolls up, stop auto-scrolling. Resume only when they scroll back to bottom.
   useEffect(() => {
     if (!isRunning) return;
 
     const contentContainer = scrollAreaRef.current;
     if (!contentContainer) return;
 
-    let lastNearBottomTime = Date.now();
-    const NEAR_BOTTOM_THRESHOLD = 300; // 300ms
+    // Start stuck to bottom
+    let isStuckToBottom = true;
 
     const observer = new MutationObserver(() => {
-      if (isNearBottom()) {
-        lastNearBottomTime = Date.now();
-      }
-      const wasNearBottomRecently = Date.now() - lastNearBottomTime < NEAR_BOTTOM_THRESHOLD;
-      if (wasNearBottomRecently) {
+      if (isStuckToBottom) {
         scrollToBottom();
       }
     });
@@ -256,14 +253,25 @@ export function ConversationView({
       characterData: true,
     });
 
-    // Resume auto-scroll when user scrolls back near bottom
-    const handleScroll = () => {
-      if (isNearBottom()) {
-        lastNearBottomTime = Date.now();
+    // Track user scroll: unstick when scrolling up, re-stick when at bottom
+    let lastScrollTop = 0;
+    const handleScroll = (e: Event) => {
+      const target = e.target as HTMLElement;
+      const currentScrollTop = target.scrollTop;
+      const atBottom = target.scrollHeight - currentScrollTop - target.clientHeight < 50;
+
+      if (atBottom) {
+        // User scrolled back to bottom — re-stick
+        isStuckToBottom = true;
+      } else if (currentScrollTop < lastScrollTop) {
+        // User scrolled up — unstick
+        isStuckToBottom = false;
       }
+      lastScrollTop = currentScrollTop;
     };
 
-    const viewport = contentContainer.querySelector('[data-slot="scroll-area-viewport"]');
+    const detachedContainer = contentContainer.closest('[data-detached-scroll-container]');
+    const viewport = detachedContainer || contentContainer.querySelector('[data-slot="scroll-area-viewport"]');
     viewport?.addEventListener('scroll', handleScroll, { passive: true });
 
     return () => {

package/src/components/task/floating-chat-window.tsx

@@ -42,6 +42,8 @@ interface FloatingChatWindowProps {
 
 export function FloatingChatWindow({ task, zIndex, onClose, onMaximize, onFocus }: FloatingChatWindowProps) {
   const t = useTranslations('chat');
+  const tCommon = useTranslations('common');
+  const tTask = useTranslations('task');
   const tk = useTranslations('kanban');
   const isMobile = useIsMobileViewport();
   const { updateTaskStatus, setTaskChatInit, moveTaskToInProgress, pendingAutoStartTask, pendingAutoStartPrompt, pendingAutoStartFileIds, setPendingAutoStartTask, renameTask } = useTaskStore();
@@ -90,6 +92,7 @@ export function FloatingChatWindow({ task, zIndex, onClose, onMaximize, onFocus
     activeQuestion,
     answerQuestion,
     cancelQuestion,
+    refetchQuestion,
   } = useAttemptStream({
     taskId: task.id,
     onComplete: handleTaskComplete,
@@ -218,7 +221,13 @@ export function FloatingChatWindow({ task, zIndex, onClose, onMaximize, onFocus
         currentFiles={isRunning ? currentAttemptFiles : undefined}
         isRunning={isRunning}
         activeQuestion={activeQuestion}
-        onOpenQuestion={() => setShowQuestionPrompt(true)}
+        onOpenQuestion={() => {
+          if (activeQuestion) {
+            setShowQuestionPrompt(true);
+          } else {
+            refetchQuestion();
+          }
+        }}
       />
     </div>
   );
@@ -227,7 +236,7 @@ export function FloatingChatWindow({ task, zIndex, onClose, onMaximize, onFocus
     <>
       <Separator />
       <div className="relative">
-        {showQuestionPrompt ? (
+        {showQuestionPrompt && activeQuestion ? (
           <div className="border-t bg-muted/30">
             {activeQuestion ? (
               <QuestionPrompt
@@ -249,7 +258,7 @@ export function FloatingChatWindow({ task, zIndex, onClose, onMaximize, onFocus
               <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>
+                  <span>{tTask('loadingQuestion')}</span>
                 </div>
               </div>
             )}
@@ -326,7 +335,7 @@ export function FloatingChatWindow({ task, zIndex, onClose, onMaximize, onFocus
               onMouseDown={(e) => e.stopPropagation()}
               className="p-0.5 hover:bg-accent rounded transition-colors shrink-0 cursor-pointer"
               data-no-drag
-              title="Edit title"
+              title={tCommon('editTitle')}
             >
               <Pencil className="size-3 text-muted-foreground" />
             </button>
@@ -384,7 +393,7 @@ export function FloatingChatWindow({ task, zIndex, onClose, onMaximize, onFocus
             variant="ghost"
             size="icon-sm"
             onClick={onMaximize}
-            title="Maximize to panel"
+            title={t('maximizeToPanel')}
           >
             <Maximize2 className="size-4" />
           </Button>

package/src/components/task/interactive-command/checkpoint-list.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useInteractiveCommandStore } from '@/stores/interactive-command-store';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
+import { useTranslations } from 'next-intl';
 
 interface Checkpoint {
   id: string;
@@ -27,6 +28,7 @@ interface CheckpointListProps {
 }
 
 export function CheckpointList({ taskId }: CheckpointListProps) {
+  const t = useTranslations('chat');
   const [checkpoints, setCheckpoints] = useState<Checkpoint[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -83,17 +85,17 @@ export function CheckpointList({ taskId }: CheckpointListProps) {
 
       // Determine toast type and message based on result
       if (hasFileRewind) {
-        toast.success('Rewound conversation & files to checkpoint', {
+        toast.success(t('rewoundToCheckpoint'), {
           description: 'Files restored via SDK checkpointing'
         });
       } else if (selectedCheckpoint?.gitCommitHash && fileRewindError) {
         // File checkpoint exists but rewind failed
-        toast.warning('Rewound conversation only', {
+        toast.warning(t('rewoundConversationOnly'), {
           description: fileRewindError,
           duration: 6000, // Show longer for error details
         });
       } else {
-        toast.success('Rewound conversation to checkpoint', {
+        toast.success(t('rewoundConversation'), {
           description: selectedCheckpoint?.gitCommitHash
             ? 'File rewind unavailable'
             : 'No file checkpoint for this attempt'

package/src/components/task/interactive-command/confirm-dialog.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react';
 import { AlertTriangle } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
@@ -18,12 +19,16 @@ interface ConfirmDialogProps {
 export function ConfirmDialog({
   title,
   message,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
+  confirmLabel,
+  cancelLabel,
   confirmVariant = 'default',
   onConfirm,
   onCancel,
 }: ConfirmDialogProps) {
+  const tCommon = useTranslations('common');
+  const resolvedConfirmLabel = confirmLabel ?? tCommon('confirm');
+  const resolvedCancelLabel = cancelLabel ?? tCommon('cancel');
+
   // Keyboard shortcuts
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -58,14 +63,14 @@ export function ConfirmDialog({
 
       <div className="flex items-center justify-end gap-2 mt-6">
         <Button variant="ghost" size="sm" onClick={onCancel}>
-          {cancelLabel}
+          {resolvedCancelLabel}
         </Button>
         <Button
           variant={confirmVariant}
           size="sm"
           onClick={onConfirm}
         >
-          {confirmLabel}
+          {resolvedConfirmLabel}
           <kbd className="ml-2 px-1.5 py-0.5 text-[10px] bg-background/20 rounded">Enter</kbd>
         </Button>
       </div>

package/src/components/task/interactive-command/interactive-command-overlay.tsx

@@ -14,6 +14,7 @@ import { ModelSelector } from './model-selector';
 import { ConfigEditor } from './config-editor';
 import { ConfirmDialog } from './confirm-dialog';
 import { cn } from '@/lib/utils';
+import { useTranslations } from 'next-intl';
 
 // Get icon for command type
 function getCommandIcon(command: InteractiveCommand) {
@@ -34,6 +35,8 @@ function getCommandIcon(command: InteractiveCommand) {
 }
 
 export function InteractiveCommandOverlay() {
+  const t = useTranslations('chat');
+  const tCommon = useTranslations('common');
   const { activeCommand, isOpen, isLoading, error, closeCommand } =
     useInteractiveCommandStore();
 
@@ -91,9 +94,9 @@ export function InteractiveCommandOverlay() {
         )}
         {activeCommand.type === 'clear' && (
           <ConfirmDialog
-            title="Clear Conversation"
-            message="Are you sure you want to clear all messages? This cannot be undone."
-            confirmLabel="Clear"
+            title={t('clearConversation')}
+            message={t('clearConversationConfirm')}
+            confirmLabel={tCommon('clear')}
             confirmVariant="destructive"
             onConfirm={() => {
               // TODO: Implement clear
@@ -104,12 +107,23 @@ export function InteractiveCommandOverlay() {
         )}
         {activeCommand.type === 'compact' && (
           <ConfirmDialog
-            title="Compact Conversation"
-            message="This will summarize the conversation to save context space. Continue?"
-            confirmLabel="Compact"
-            onConfirm={() => {
-              // TODO: Implement compact
-              closeCommand();
+            title={t('compactConversation')}
+            message={t('compactConversationConfirm')}
+            confirmLabel={t('compact')}
+            onConfirm={async () => {
+              const { setLoading, setError } = useInteractiveCommandStore.getState();
+              setLoading(true);
+              try {
+                const res = await fetch(`/api/tasks/${activeCommand.taskId}/compact`, { method: 'POST' });
+                if (!res.ok) {
+                  const data = await res.json();
+                  setError(data.error || 'Failed to compact');
+                  return;
+                }
+                closeCommand();
+              } catch (err) {
+                setError('Failed to compact conversation');
+              }
             }}
             onCancel={closeCommand}
           />

package/src/components/task/interactive-command/question-prompt.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
+import { useTranslations } from 'next-intl';
 import { cn } from '@/lib/utils';
 
 interface QuestionOption {
@@ -22,6 +23,9 @@ interface QuestionPromptProps {
 }
 
 export function QuestionPrompt({ questions, onAnswer, onCancel }: QuestionPromptProps) {
+  const t = useTranslations('task');
+  const tChat = useTranslations('chat');
+  const tCommon = useTranslations('common');
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [selectedMulti, setSelectedMulti] = useState<Set<number>>(new Set());
@@ -51,7 +55,7 @@ export function QuestionPrompt({ questions, onAnswer, onCancel }: QuestionPrompt
   // Add "Type something" as last option (like "Other" in Claude)
   // If user already typed a custom answer, show it instead of "Type something."
   const existingCustom = getCustomAnswer(currentQuestionIndex);
-  const typeOptionLabel = existingCustom ? `${existingCustom} (edit)` : 'Type something.';
+  const typeOptionLabel = existingCustom ? `${existingCustom} (edit)` : t('typeSomething');
   const allOptions = [...currentQuestion.options, { label: typeOptionLabel, description: '' }];
   const isLastOption = selectedIndex === allOptions.length - 1;
 
@@ -315,7 +319,7 @@ export function QuestionPrompt({ questions, onAnswer, onCancel }: QuestionPrompt
           <span className="text-[10px]">
             {allAnswered ? '✓' : '□'}
           </span>
-          Submit
+          {tCommon('submit')}
         </button>
 
         {/* Forward arrow (hidden for single question) */}
@@ -352,13 +356,13 @@ export function QuestionPrompt({ questions, onAnswer, onCancel }: QuestionPrompt
         <>
           {/* Review header */}
           <div className="px-4 mb-3">
-            <p className="text-sm font-bold">Review your answers</p>
+            <p className="text-sm font-bold">{t('reviewAnswers')}</p>
           </div>
 
           {/* Warning if not all answered */}
           {!allAnswered && (
             <div className="px-4 mb-3">
-              <p className="text-sm text-yellow-500">⚠ You have not answered all questions</p>
+              <p className="text-sm text-yellow-500">⚠ {t('notAllAnswered')}</p>
             </div>
           )}
 
@@ -392,7 +396,7 @@ export function QuestionPrompt({ questions, onAnswer, onCancel }: QuestionPrompt
 
           {/* Submit prompt */}
           <div className="px-4 mb-3">
-            <p className="text-sm text-muted-foreground">Ready to submit your answers?</p>
+            <p className="text-sm text-muted-foreground">{t('readyToSubmit')}</p>
           </div>
 
           {/* Submit / Cancel options */}
@@ -410,7 +414,7 @@ export function QuestionPrompt({ questions, onAnswer, onCancel }: QuestionPrompt
                 {selectedIndex === 0 ? '›' : ' '}
               </span>
               <span className="shrink-0 text-sm text-muted-foreground">1.</span>
-              <span className="text-sm font-medium">Submit answers{answeredCount > 0 ? ` (${answeredCount}/${questions.length})` : ''}</span>
+              <span className="text-sm font-medium">{t('submitAnswers')}{answeredCount > 0 ? ` (${answeredCount}/${questions.length})` : ''}</span>
             </button>
             <button
               onClick={() => onCancel()}
@@ -424,7 +428,7 @@ export function QuestionPrompt({ questions, onAnswer, onCancel }: QuestionPrompt
                 {selectedIndex === 1 ? '›' : ' '}
               </span>
               <span className="shrink-0 text-sm text-muted-foreground">2.</span>
-              <span className="text-sm font-medium">Cancel</span>
+              <span className="text-sm font-medium">{tCommon('cancel')}</span>
             </button>
           </div>
         </>
@@ -537,7 +541,7 @@ export function QuestionPrompt({ questions, onAnswer, onCancel }: QuestionPrompt
                 type="text"
                 value={customInput}
                 onChange={(e) => setCustomInput(e.target.value)}
-                placeholder="Type your answer..."
+                placeholder={tChat('typeYourAnswer')}
                 className="w-full px-3 py-2 text-sm border rounded bg-background focus:outline-none focus:ring-2 focus:ring-primary"
                 autoFocus
               />

package/src/components/task/pending-question-indicator.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { ExternalLink } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 
@@ -17,6 +18,7 @@ interface PendingQuestionIndicatorProps {
 }
 
 export function PendingQuestionIndicator({ questions, onOpen }: PendingQuestionIndicatorProps) {
+  const t = useTranslations('task');
   const firstQuestion = questions[0];
 
   return (
@@ -30,7 +32,7 @@ export function PendingQuestionIndicator({ questions, onOpen }: PendingQuestionI
                 {firstQuestion.header}
               </Badge>
               <span className="text-xs text-muted-foreground">
-                {questions.length} question{questions.length > 1 ? 's' : ''} pending
+                {t('questionsPending', { count: questions.length })}
               </span>
             </div>
             <p className="text-sm text-foreground truncate">
@@ -38,7 +40,7 @@ export function PendingQuestionIndicator({ questions, onOpen }: PendingQuestionI
             </p>
             {questions.length > 1 && (
               <p className="text-xs text-muted-foreground mt-1">
-                +{questions.length - 1} more question{questions.length - 1 > 1 ? 's' : ''}
+                {t('moreQuestions', { count: questions.length - 1 })}
               </p>
             )}
           </div>
@@ -49,7 +51,7 @@ export function PendingQuestionIndicator({ questions, onOpen }: PendingQuestionI
           onClick={onOpen}
           className="shrink-0"
         >
-          Open
+          {t('open')}
         </Button>
       </div>
     </div>

package/src/components/task/prompt-input.tsx

@@ -291,7 +291,7 @@ export const PromptInput = forwardRef<PromptInputRef, PromptInputProps>(({
 
     // Check if files are still uploading
     if (taskId && hasUploadingFiles(taskId)) {
-      toast.error('Please wait for files to finish uploading');
+      toast.error(t('waitForUpload'));
       return;
     }
 

package/src/components/task/shell-log-view.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef } from 'react';
 import { X } 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';
@@ -13,6 +14,7 @@ interface ShellLogViewProps {
 }
 
 export function ShellLogView({ shell, onClose, className }: ShellLogViewProps) {
+  const tCommon = useTranslations('common');
   const { shellLogs, getShellLogs } = useShellStore();
   const logContainerRef = useRef<HTMLDivElement>(null);
   const logs = shellLogs.get(shell.shellId) || [];
@@ -48,7 +50,7 @@ export function ShellLogView({ shell, onClose, className }: ShellLogViewProps) {
           size="icon"
           className="h-6 w-6 shrink-0"
           onClick={onClose}
-          title="Close (Esc)"
+          title={tCommon('close') + ' (Esc)'}
         >
           <X className="h-3 w-3" />
         </Button>

package/src/components/task/status-line.tsx

@@ -2,16 +2,43 @@
 
 import { useEffect, useState } from 'react';
 import { Clock, TrendingUp, GitBranch, Workflow, Gauge } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useSocket } from '@/hooks/use-socket';
 import { cn } from '@/lib/utils';
 import type { UsageStats } from '@/lib/usage-tracker';
 import type { GitStats } from '@/lib/git-stats-collector';
 
-interface WorkflowSummary {
-  chain: string[];
-  completedCount: number;
-  activeCount: number;
-  totalCount: number;
+interface SubagentNodeClient {
+  id: string;
+  type: string;
+  name?: string;
+  status: 'pending' | 'in_progress' | 'completed' | 'failed' | 'orphaned';
+  parentId: string | null;
+  depth: number;
+  teamName?: string;
+  startedAt?: number;
+  completedAt?: number;
+  durationMs?: number;
+  error?: string;
+}
+
+interface AgentMessageClient {
+  fromType: string;
+  toType: string;
+  content: string;
+  summary: string;
+  timestamp: number;
+}
+
+interface WorkflowData {
+  nodes: SubagentNodeClient[];
+  messages: AgentMessageClient[];
+  summary: {
+    chain: string[];
+    completedCount: number;
+    activeCount: number;
+    totalCount: number;
+  };
 }
 
 interface StatusLineProps {
@@ -33,10 +60,12 @@ interface StatusLineProps {
  * - Last completed attempt (if no running attempt)
  */
 export function StatusLine({ taskId, currentAttemptId, className }: StatusLineProps) {
+  const t = useTranslations('task');
   const socket = useSocket();
   const [usage, setUsage] = useState<UsageStats | null>(null);
   const [gitStats, setGitStats] = useState<GitStats | null>(null);
-  const [workflow, setWorkflow] = useState<WorkflowSummary | null>(null);
+  const [workflow, setWorkflow] = useState<WorkflowData | null>(null);
+  const [workflowExpanded, setWorkflowExpanded] = useState(false);
 
   // Reset state when task changes (not when attemptId changes)
   useEffect(() => {
@@ -63,10 +92,10 @@ export function StatusLine({ taskId, currentAttemptId, className }: StatusLinePr
     };
 
     // Workflow updates
-    const handleWorkflowUpdate = (data: { attemptId: string; workflow: WorkflowSummary }) => {
+    const handleWorkflowUpdate = (data: { attemptId: string; nodes: SubagentNodeClient[]; messages: AgentMessageClient[]; summary: WorkflowData['summary'] }) => {
       console.log('[StatusLine] Workflow update:', data);
       if (data.attemptId === currentAttemptId) {
-        setWorkflow(data.workflow);
+        setWorkflow({ nodes: data.nodes, messages: data.messages, summary: data.summary });
       }
     };
 
@@ -105,14 +134,14 @@ export function StatusLine({ taskId, currentAttemptId, className }: StatusLinePr
       {!hasRunningAttempt && !hasData && (
         <div className="flex items-center gap-1.5 text-muted-foreground/50">
           <TrendingUp className="size-3.5" />
-          <span>No attempt running. Send a message to start.</span>
+          <span>{t('noAttemptRunning')}</span>
         </div>
       )}
 
       {hasRunningAttempt && !hasData && (
         <div className="flex items-center gap-1.5 text-muted-foreground/50">
           <TrendingUp className="size-3.5 animate-pulse" />
-          <span>Waiting for tracking data...</span>
+          <span>{t('waitingForTracking')}</span>
         </div>
       )}
 
@@ -157,7 +186,7 @@ export function StatusLine({ taskId, currentAttemptId, className }: StatusLinePr
         <div className="flex items-center gap-1.5">
           <TrendingUp className="size-3.5" />
           <span className="font-medium">
-            {usage.totalTokens.toLocaleString()} tokens
+            {usage.totalTokens.toLocaleString()} {t('tokens')}
           </span>
           {usage.totalCostUSD > 0 && (
             <span className="text-muted-foreground/70">
@@ -166,7 +195,7 @@ export function StatusLine({ taskId, currentAttemptId, className }: StatusLinePr
           )}
           {usage.numTurns > 0 && (
             <span className="text-muted-foreground/70">
-              · {usage.numTurns} {usage.numTurns === 1 ? 'turn' : 'turns'}
+              · {usage.numTurns} {usage.numTurns === 1 ? t('turn') : t('turns')}
             </span>
           )}
           {usage.durationMs > 0 && (
@@ -188,22 +217,54 @@ export function StatusLine({ taskId, currentAttemptId, className }: StatusLinePr
             -{gitStats.deletions}
           </span>
           <span className="text-muted-foreground/70">
-            ({gitStats.filesChanged} {gitStats.filesChanged === 1 ? 'file' : 'files'})
+            ({gitStats.filesChanged} {gitStats.filesChanged === 1 ? t('file') : t('files')})
           </span>
         </div>
       )}
 
       {/* Workflow Section */}
-      {workflow && workflow.totalCount > 0 && (
-        <div className="flex items-center gap-1.5">
-          <Workflow className="size-3.5" />
-          <span className="font-medium">
-            {workflow.chain.slice(0, 3).join(' → ')}
-            {workflow.chain.length > 3 && ' ...'}
-          </span>
-          <span className="text-muted-foreground/70">
-            ({workflow.completedCount}/{workflow.totalCount} done)
-          </span>
+      {workflow && workflow.summary.totalCount > 0 && (
+        <div className="flex flex-col">
+          <div
+            className="flex items-center gap-1.5 cursor-pointer select-none"
+            onClick={() => setWorkflowExpanded(!workflowExpanded)}
+          >
+            <Workflow className="size-3.5" />
+            <span className="font-medium">
+              {workflowExpanded ? '▼' : '▶'} Workflow{workflowExpanded ? ` (${workflow.summary.totalCount} agents)` : `: ${workflow.summary.totalCount} agents (${workflow.summary.completedCount} done${workflow.summary.activeCount > 0 ? `, ${workflow.summary.activeCount} running` : ''})`}
+            </span>
+          </div>
+          {workflowExpanded && (
+            <div className="mt-1 ml-5 font-mono">
+              {workflow.nodes.map((node) => (
+                <div
+                  key={node.id}
+                  className="flex items-center gap-2"
+                  style={{ paddingLeft: `${node.depth * 16}px` }}
+                >
+                  <span className={cn(
+                    node.status === 'completed' && 'text-green-500',
+                    node.status === 'in_progress' && 'text-blue-500 animate-pulse',
+                    node.status === 'failed' && 'text-red-500',
+                    node.status === 'orphaned' && 'text-yellow-500'
+                  )}>
+                    {node.status === 'completed' && '✓'}
+                    {node.status === 'in_progress' && '●'}
+                    {node.status === 'failed' && '✗'}
+                    {node.status === 'orphaned' && '⊘'}
+                    {node.status === 'pending' && '○'}
+                  </span>
+                  <span className="font-medium">{node.name || node.type}</span>
+                  <span className="text-muted-foreground/70">
+                    {node.status === 'in_progress' && 'running...'}
+                    {node.status === 'completed' && node.durationMs != null && formatDuration(node.durationMs)}
+                    {node.status === 'failed' && 'failed'}
+                    {node.status === 'orphaned' && 'orphaned'}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       )}
     </div>