cowork-os 0.3.21

package/src/renderer/components/MainContent.tsx

@@ -0,0 +1,2433 @@
+import { useState, useEffect, useRef, useCallback, useMemo, Fragment } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
+import { Task, TaskEvent, Workspace, ApprovalRequest, LLMModelInfo, SuccessCriteria, CustomSkill, EventType, TEMP_WORKSPACE_ID, DEFAULT_QUIRKS, CanvasSession } from '../../shared/types';
+import type { AgentRoleData } from '../../electron/preload';
+import { useVoiceInput } from '../hooks/useVoiceInput';
+import { useAgentContext, type AgentContext } from '../hooks/useAgentContext';
+import { getMessage } from '../utils/agentMessages';
+
+// localStorage key for verbose mode
+const VERBOSE_STEPS_KEY = 'cowork:verboseSteps';
+const TASK_TITLE_MAX_LENGTH = 50;
+const TITLE_ELLIPSIS_REGEX = /(\.\.\.|\u2026)$/u;
+
+// Important event types shown in non-verbose mode
+// These are high-level steps that represent meaningful progress
+const IMPORTANT_EVENT_TYPES: EventType[] = [
+  'task_created',
+  'task_completed',
+  'task_cancelled',
+  'plan_created',
+  'step_started',
+  'step_completed',
+  'step_failed',
+  'assistant_message',
+  'user_message',
+  'file_created',
+  'file_modified',
+  'file_deleted',
+  'error',
+  'verification_started',
+  'verification_passed',
+  'verification_failed',
+  'retry_started',
+  'approval_requested',
+];
+
+// Helper to check if an event is important (shown in non-verbose mode)
+const isImportantEvent = (event: TaskEvent): boolean => {
+  return IMPORTANT_EVENT_TYPES.includes(event.type);
+};
+
+const buildTaskTitle = (text: string): string => {
+  const trimmed = text.trim();
+  if (trimmed.length <= TASK_TITLE_MAX_LENGTH) {
+    return trimmed;
+  }
+  return `${trimmed.slice(0, TASK_TITLE_MAX_LENGTH)}...`;
+};
+
+type MentionOption = {
+  type: 'agent' | 'everyone';
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  color?: string;
+};
+
+const normalizeMentionSearch = (value: string): string =>
+  value.toLowerCase().replace(/[^a-z0-9]/g, '');
+import { ApprovalDialog } from './ApprovalDialog';
+import { SkillParameterModal } from './SkillParameterModal';
+import { FileViewer } from './FileViewer';
+import { CommandOutput } from './CommandOutput';
+import { CanvasPreview } from './CanvasPreview';
+
+// Code block component with copy button
+interface CodeBlockProps {
+  children?: React.ReactNode;
+  className?: string;
+  node?: unknown;
+}
+
+function CodeBlock({ children, className, ...props }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  // Check if this is a code block (has language class) vs inline code
+  const isCodeBlock = className?.startsWith('language-');
+  const language = className?.replace('language-', '') || '';
+
+  // Get the text content for copying
+  const getTextContent = (node: React.ReactNode): string => {
+    if (typeof node === 'string') return node;
+    if (Array.isArray(node)) return node.map(getTextContent).join('');
+    if (node && typeof node === 'object' && 'props' in node) {
+      return getTextContent((node as { props: { children?: React.ReactNode } }).props.children);
+    }
+    return '';
+  };
+
+  const handleCopy = async () => {
+    const text = getTextContent(children);
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  // For inline code, just render normally
+  if (!isCodeBlock) {
+    return <code className={className} {...props}>{children}</code>;
+  }
+
+  // For code blocks, wrap with copy button
+  return (
+    <div className="code-block-wrapper">
+      <div className="code-block-header">
+        {language && <span className="code-block-language">{language}</span>}
+        <button
+          className={`code-block-copy ${copied ? 'copied' : ''}`}
+          onClick={handleCopy}
+          title={copied ? 'Copied!' : 'Copy code'}
+        >
+          {copied ? (
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M20 6L9 17l-5-5" />
+            </svg>
+          ) : (
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+              <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+            </svg>
+          )}
+          <span>{copied ? 'Copied!' : 'Copy'}</span>
+        </button>
+      </div>
+      <code className={className} {...props}>{children}</code>
+    </div>
+  );
+}
+
+// Copy button for user messages
+function MessageCopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <button
+      className={`message-copy-btn ${copied ? 'copied' : ''}`}
+      onClick={handleCopy}
+      title={copied ? 'Copied!' : 'Copy message'}
+    >
+      {copied ? (
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M20 6L9 17l-5-5" />
+        </svg>
+      ) : (
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+          <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+        </svg>
+      )}
+      <span>{copied ? 'Copied' : 'Copy'}</span>
+    </button>
+  );
+}
+
+// Global audio state to ensure only one audio plays at a time
+let currentAudioContext: AudioContext | null = null;
+let currentAudioSource: AudioBufferSourceNode | null = null;
+let currentSpeakingCallback: (() => void) | null = null;
+
+function stopCurrentAudio() {
+  if (currentAudioSource) {
+    try {
+      currentAudioSource.stop();
+    } catch {
+      // Already stopped
+    }
+    currentAudioSource = null;
+  }
+  if (currentAudioContext) {
+    try {
+      currentAudioContext.close();
+    } catch {
+      // Already closed
+    }
+    currentAudioContext = null;
+  }
+  if (currentSpeakingCallback) {
+    currentSpeakingCallback();
+    currentSpeakingCallback = null;
+  }
+}
+
+// Speak button for assistant messages
+function MessageSpeakButton({ text, voiceEnabled }: { text: string; voiceEnabled: boolean }) {
+  const [speaking, setSpeaking] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    if (!voiceEnabled) return;
+
+    // If already speaking, stop the audio
+    if (speaking) {
+      stopCurrentAudio();
+      setSpeaking(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      // Strip markdown for cleaner speech
+      const cleanText = text
+        .replace(/```[\s\S]*?```/g, '') // Remove code blocks
+        .replace(/`[^`]+`/g, '') // Remove inline code
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // Keep link text only
+        .replace(/!\[([^\]]*)\]\([^)]+\)/g, '') // Remove images
+        .replace(/^#{1,6}\s+/gm, '') // Remove headers
+        .replace(/\*\*([^*]+)\*\*/g, '$1') // Remove bold
+        .replace(/\*([^*]+)\*/g, '$1') // Remove italic
+        .replace(/\[\[speak\]\]([\s\S]*?)\[\[\/speak\]\]/gi, '$1') // Extract speak tags
+        .trim();
+
+      if (cleanText) {
+        // Stop any currently playing audio first
+        stopCurrentAudio();
+
+        const result = await window.electronAPI.voiceSpeak(cleanText);
+        if (result.success && result.audioData) {
+          // Convert number array back to ArrayBuffer and play
+          const audioBuffer = new Uint8Array(result.audioData).buffer;
+          const audioContext = new AudioContext();
+          const decodedAudio = await audioContext.decodeAudioData(audioBuffer);
+          const source = audioContext.createBufferSource();
+          source.buffer = decodedAudio;
+          source.connect(audioContext.destination);
+
+          // Store references for stopping
+          currentAudioContext = audioContext;
+          currentAudioSource = source;
+          currentSpeakingCallback = () => setSpeaking(false);
+
+          source.onended = () => {
+            setSpeaking(false);
+            currentAudioContext = null;
+            currentAudioSource = null;
+            currentSpeakingCallback = null;
+            try {
+              audioContext.close();
+            } catch {
+              // Already closed
+            }
+          };
+
+          setLoading(false);
+          setSpeaking(true);
+          source.start(0);
+          return;
+        } else if (!result.success) {
+          console.error('TTS failed:', result.error);
+        }
+      }
+    } catch (err) {
+      console.error('Failed to speak:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!voiceEnabled) return null;
+
+  return (
+    <button
+      className={`message-speak-btn ${speaking ? 'speaking' : ''}`}
+      onClick={handleClick}
+      title={speaking ? 'Stop speaking' : loading ? 'Loading...' : 'Speak message'}
+      disabled={loading}
+    >
+      {speaking ? (
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2">
+          <rect x="4" y="4" width="16" height="16" rx="2" />
+        </svg>
+      ) : loading ? (
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="spin">
+          <circle cx="12" cy="12" r="10" strokeDasharray="32" strokeDashoffset="12" />
+        </svg>
+      ) : (
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+          <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
+          <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
+        </svg>
+      )}
+      <span>{speaking ? 'Stop' : loading ? 'Loading' : 'Speak'}</span>
+    </button>
+  );
+}
+
+// Custom components for ReactMarkdown
+const markdownComponents = {
+  code: CodeBlock,
+};
+
+const userMarkdownPlugins = [remarkGfm, remarkBreaks];
+
+// Searchable Model Dropdown Component
+interface ModelDropdownProps {
+  models: LLMModelInfo[];
+  selectedModel: string;
+  onModelChange: (model: string) => void;
+}
+
+function ModelDropdown({ models, selectedModel, onModelChange }: ModelDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const selectedModelInfo = models.find(m => m.key === selectedModel);
+
+  const filteredModels = models.filter(model =>
+    model.displayName.toLowerCase().includes(search.toLowerCase()) ||
+    model.key.toLowerCase().includes(search.toLowerCase()) ||
+    model.description.toLowerCase().includes(search.toLowerCase())
+  );
+
+  // Reset highlighted index when search changes
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [search]);
+
+  // Scroll highlighted option into view
+  useEffect(() => {
+    if (isOpen && listRef.current) {
+      const highlightedEl = listRef.current.querySelector(`[data-index="${highlightedIndex}"]`);
+      if (highlightedEl) {
+        highlightedEl.scrollIntoView({ block: 'nearest' });
+      }
+    }
+  }, [highlightedIndex, isOpen]);
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+        setSearch('');
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen) {
+      if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        setIsOpen(true);
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setHighlightedIndex(i => Math.min(i + 1, filteredModels.length - 1));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setHighlightedIndex(i => Math.max(i - 1, 0));
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (filteredModels[highlightedIndex]) {
+          onModelChange(filteredModels[highlightedIndex].key);
+          setIsOpen(false);
+          setSearch('');
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        setIsOpen(false);
+        setSearch('');
+        break;
+    }
+  };
+
+  const handleSelect = (modelKey: string) => {
+    onModelChange(modelKey);
+    setIsOpen(false);
+    setSearch('');
+  };
+
+  return (
+    <div className="model-dropdown-container" ref={containerRef}>
+      <button
+        className={`model-selector ${isOpen ? 'open' : ''}`}
+        onClick={() => {
+          setIsOpen(!isOpen);
+          if (!isOpen) {
+            setTimeout(() => inputRef.current?.focus(), 0);
+          }
+        }}
+        onKeyDown={handleKeyDown}
+      >
+        {selectedModelInfo?.displayName || 'Select Model'}
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+      {isOpen && (
+        <div className="model-dropdown">
+          <div className="model-dropdown-search">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <circle cx="11" cy="11" r="8" />
+              <path d="M21 21l-4.35-4.35" />
+            </svg>
+            <input
+              ref={inputRef}
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search models..."
+              autoFocus
+            />
+          </div>
+          <div ref={listRef} className="model-dropdown-list">
+            {filteredModels.length === 0 ? (
+              <div className="model-dropdown-no-results">No models found</div>
+            ) : (
+              filteredModels.map((model, index) => (
+                <button
+                  key={model.key}
+                  data-index={index}
+                  className={`model-dropdown-item ${model.key === selectedModel ? 'selected' : ''} ${index === highlightedIndex ? 'highlighted' : ''}`}
+                  onClick={() => handleSelect(model.key)}
+                  onMouseEnter={() => setHighlightedIndex(index)}
+                >
+                  <div className="model-dropdown-item-content">
+                    <span className="model-dropdown-item-name">{model.displayName}</span>
+                    <span className="model-dropdown-item-desc">{model.description}</span>
+                  </div>
+                  {model.key === selectedModel && (
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M20 6L9 17l-5-5" />
+                    </svg>
+                  )}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Clickable file path component - opens file viewer on click, shows in Finder on right-click
+function ClickableFilePath({
+  path,
+  workspacePath,
+  className = '',
+  onOpenViewer
+}: {
+  path: string;
+  workspacePath?: string;
+  className?: string;
+  onOpenViewer?: (path: string) => void;
+}) {
+  const handleClick = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // If viewer callback is provided and we have a workspace, use the in-app viewer
+    if (onOpenViewer && workspacePath) {
+      onOpenViewer(path);
+      return;
+    }
+
+    // Fallback to external app
+    try {
+      const error = await window.electronAPI.openFile(path, workspacePath);
+      if (error) {
+        console.error('Failed to open file:', error);
+      }
+    } catch (err) {
+      console.error('Error opening file:', err);
+    }
+  };
+
+  const handleContextMenu = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      await window.electronAPI.showInFinder(path, workspacePath);
+    } catch (err) {
+      console.error('Error showing in Finder:', err);
+    }
+  };
+
+  // Extract filename for display
+  const fileName = path.split('/').pop() || path;
+
+  return (
+    <span
+      className={`clickable-file-path ${className}`}
+      onClick={handleClick}
+      onContextMenu={handleContextMenu}
+      title={`${path}\n\nClick to preview • Right-click to show in Finder`}
+    >
+      {fileName}
+    </span>
+  );
+}
+
+interface GoalModeOptions {
+  successCriteria?: SuccessCriteria;
+  maxAttempts?: number;
+}
+
+type SettingsTab = 'appearance' | 'llm' | 'search' | 'telegram' | 'slack' | 'whatsapp' | 'teams' | 'morechannels' | 'updates' | 'guardrails' | 'queue' | 'skills' | 'voice';
+
+interface MainContentProps {
+  task: Task | undefined;
+  selectedTaskId: string | null;  // Added to distinguish "no task" from "task not in list"
+  workspace: Workspace | null;
+  events: TaskEvent[];
+  onSendMessage: (message: string) => void;
+  onCreateTask?: (title: string, prompt: string, options?: GoalModeOptions) => void;
+  onChangeWorkspace?: () => void;
+  onSelectWorkspace?: (workspace: Workspace) => void;
+  onOpenSettings?: (tab?: SettingsTab) => void;
+  onStopTask?: () => void;
+  selectedModel: string;
+  availableModels: LLMModelInfo[];
+  onModelChange: (model: string) => void;
+}
+
+// Track active command execution state
+interface ActiveCommand {
+  command: string;
+  output: string;
+  isRunning: boolean;
+  exitCode: number | null;
+  startTimestamp: number; // When the command started, for positioning in timeline
+}
+
+export function MainContent({ task, selectedTaskId, workspace, events, onSendMessage, onCreateTask, onChangeWorkspace, onSelectWorkspace, onOpenSettings, onStopTask, selectedModel, availableModels, onModelChange }: MainContentProps) {
+  // Agent personality context for personalized messages
+  const agentContext = useAgentContext();
+  const [pendingApproval, setPendingApproval] = useState<ApprovalRequest | null>(null);
+  const [inputValue, setInputValue] = useState('');
+  const [agentRoles, setAgentRoles] = useState<AgentRoleData[]>([]);
+  const [mentionQuery, setMentionQuery] = useState('');
+  const [mentionTarget, setMentionTarget] = useState<{ start: number; end: number } | null>(null);
+  const [mentionOpen, setMentionOpen] = useState(false);
+  const [mentionSelectedIndex, setMentionSelectedIndex] = useState(0);
+  // Shell permission state - tracks current workspace's shell permission
+  const [shellEnabled, setShellEnabled] = useState(workspace?.permissions?.shell ?? false);
+  // Active command execution state
+  const [activeCommand, setActiveCommand] = useState<ActiveCommand | null>(null);
+  // Track dismissed command outputs by task ID (persisted in localStorage)
+  const [dismissedCommandOutputs, setDismissedCommandOutputs] = useState<Set<string>>(() => {
+    try {
+      const saved = localStorage.getItem('dismissedCommandOutputs');
+      return saved ? new Set(JSON.parse(saved)) : new Set();
+    } catch {
+      return new Set();
+    }
+  });
+  // Goal Mode state
+  const [goalModeEnabled, setGoalModeEnabled] = useState(false);
+  const [verificationCommand, setVerificationCommand] = useState('');
+  const [maxAttempts, setMaxAttempts] = useState(3);
+  const [showSteps, setShowSteps] = useState(true);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [queuedMessage, setQueuedMessage] = useState<string | null>(null);
+  // Track toggled events by ID for stable state across filtering
+  const [toggledEvents, setToggledEvents] = useState<Set<string>>(new Set());
+  const [appVersion, setAppVersion] = useState<string>('');
+  const [customSkills, setCustomSkills] = useState<CustomSkill[]>([]);
+  const [showSkillsMenu, setShowSkillsMenu] = useState(false);
+  const [skillsSearchQuery, setSkillsSearchQuery] = useState('');
+  const [selectedSkillForParams, setSelectedSkillForParams] = useState<CustomSkill | null>(null);
+
+  // Voice input hook
+  const [showVoiceNotConfigured, setShowVoiceNotConfigured] = useState(false);
+  const voiceInput = useVoiceInput({
+    onTranscript: (text) => {
+      // Append transcribed text to input
+      setInputValue(prev => prev ? `${prev} ${text}` : text);
+    },
+    onError: (error) => {
+      console.error('Voice input error:', error);
+    },
+    onNotConfigured: () => {
+      setShowVoiceNotConfigured(true);
+    },
+  });
+  const [viewerFilePath, setViewerFilePath] = useState<string | null>(null);
+  // Canvas sessions state - track active canvas sessions for current task
+  const [canvasSessions, setCanvasSessions] = useState<CanvasSession[]>([]);
+  // Workspace dropdown state
+  const [showWorkspaceDropdown, setShowWorkspaceDropdown] = useState(false);
+  const [workspacesList, setWorkspacesList] = useState<Workspace[]>([]);
+  // Verbose mode - when false, only show important steps
+  const [verboseSteps, setVerboseSteps] = useState(() => {
+    const saved = localStorage.getItem(VERBOSE_STEPS_KEY);
+    return saved === 'true';
+  });
+  // Voice state - track if voice is enabled
+  const [voiceEnabled, setVoiceEnabled] = useState(false);
+  const [voiceResponseMode, setVoiceResponseMode] = useState<'auto' | 'manual' | 'smart'>('manual');
+  const lastSpokenMessageRef = useRef<string | null>(null);
+  const skillsMenuRef = useRef<HTMLDivElement>(null);
+  const workspaceDropdownRef = useRef<HTMLDivElement>(null);
+
+  // Filter events based on verbose mode
+  const filteredEvents = useMemo(() => {
+    const visibleEvents = verboseSteps ? events : events.filter(isImportantEvent);
+    // Command output is rendered separately via CommandOutput component
+    return visibleEvents.filter(event => event.type !== 'command_output');
+  }, [events, verboseSteps]);
+
+  const latestUserMessageTimestamp = useMemo(() => {
+    for (let i = events.length - 1; i >= 0; i--) {
+      if (events[i].type === 'user_message') {
+        return events[i].timestamp;
+      }
+    }
+    return null;
+  }, [events]);
+
+  const latestCanvasSessionId = useMemo(() => {
+    if (canvasSessions.length === 0) return null;
+    const eligibleSessions = latestUserMessageTimestamp
+      ? canvasSessions.filter(session => session.createdAt >= latestUserMessageTimestamp)
+      : canvasSessions;
+    const pool = eligibleSessions.length > 0 ? eligibleSessions : canvasSessions;
+    return pool.reduce((latest, session) => {
+      return session.createdAt > latest.createdAt ? session : latest;
+    }, pool[0]).id;
+  }, [canvasSessions, latestUserMessageTimestamp]);
+
+  const timelineItems = useMemo(() => {
+    const eventItems = filteredEvents.map((event, index) => ({
+      kind: 'event' as const,
+      event,
+      eventIndex: index,
+      timestamp: event.timestamp,
+    }));
+
+    const freezeBefore = latestUserMessageTimestamp;
+    const canvasItems = canvasSessions
+      .map((session) => ({
+        kind: 'canvas' as const,
+        session,
+        timestamp: session.createdAt,
+        forceSnapshot: Boolean(
+          (freezeBefore && session.createdAt < freezeBefore) ||
+          (latestCanvasSessionId && session.id !== latestCanvasSessionId)
+        ),
+      }))
+      .sort((a, b) => a.timestamp - b.timestamp);
+
+    if (canvasItems.length === 0) return eventItems;
+
+    const merged: Array<typeof eventItems[number] | typeof canvasItems[number]> = [];
+    let canvasIndex = 0;
+
+    for (const eventItem of eventItems) {
+      while (canvasIndex < canvasItems.length && canvasItems[canvasIndex].timestamp <= eventItem.timestamp) {
+        merged.push(canvasItems[canvasIndex]);
+        canvasIndex += 1;
+      }
+      merged.push(eventItem);
+    }
+
+    while (canvasIndex < canvasItems.length) {
+      merged.push(canvasItems[canvasIndex]);
+      canvasIndex += 1;
+    }
+
+    return merged;
+  }, [filteredEvents, canvasSessions, latestCanvasSessionId, latestUserMessageTimestamp]);
+
+  // Find the index where command output should be inserted (after the last event before command started)
+  const commandOutputInsertIndex = useMemo(() => {
+    if (!activeCommand || !activeCommand.startTimestamp) return -1;
+    // Find the last event that started before or at the same time as the command
+    for (let i = filteredEvents.length - 1; i >= 0; i--) {
+      if (filteredEvents[i].timestamp <= activeCommand.startTimestamp) {
+        return i;
+      }
+    }
+    // If no events before command, insert at beginning (index -1 means render before all events)
+    return -1;
+  }, [filteredEvents, activeCommand]);
+
+  // Toggle verbose mode and persist to localStorage
+  const toggleVerboseSteps = () => {
+    setVerboseSteps(prev => {
+      const newValue = !prev;
+      localStorage.setItem(VERBOSE_STEPS_KEY, String(newValue));
+      return newValue;
+    });
+  };
+
+  // Load app version
+  useEffect(() => {
+    window.electronAPI.getAppVersion()
+      .then(info => setAppVersion(info.version))
+      .catch(err => console.error('Failed to load version:', err));
+  }, []);
+
+  // Load voice settings
+  useEffect(() => {
+    window.electronAPI.getVoiceSettings()
+      .then(settings => {
+        setVoiceEnabled(settings.enabled);
+        setVoiceResponseMode(settings.responseMode);
+      })
+      .catch(err => console.error('Failed to load voice settings:', err));
+
+    // Subscribe to voice state changes
+    const unsubscribe = window.electronAPI.onVoiceEvent((event) => {
+      if (event.type === 'voice:state-changed' && typeof event.data === 'object' && 'isActive' in event.data) {
+        setVoiceEnabled(event.data.isActive);
+      }
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  // Auto-speak new assistant messages based on response mode
+  useEffect(() => {
+    if (!voiceEnabled || voiceResponseMode === 'manual') return;
+
+    const assistantMessages = events.filter(e => e.type === 'assistant_message');
+    if (assistantMessages.length === 0) return;
+
+    const lastMessage = assistantMessages[assistantMessages.length - 1];
+    const messageText = lastMessage.payload?.message || '';
+
+    // Skip if already spoken
+    if (lastSpokenMessageRef.current === messageText) return;
+
+    // Check if should speak based on mode
+    const hasDirective = /\[\[speak\]\]/i.test(messageText);
+
+    if (voiceResponseMode === 'auto' || (voiceResponseMode === 'smart' && hasDirective)) {
+      // Extract text to speak
+      let textToSpeak = messageText;
+
+      // If smart mode, only speak content within [[speak]] tags
+      if (voiceResponseMode === 'smart' && hasDirective) {
+        const matches = messageText.match(/\[\[speak\]\]([\s\S]*?)\[\[\/speak\]\]/gi);
+        if (matches) {
+          textToSpeak = matches
+            .map((m: string) => m.replace(/\[\[speak\]\]/gi, '').replace(/\[\[\/speak\]\]/gi, ''))
+            .join(' ')
+            .trim();
+        }
+      } else {
+        // Strip markdown for cleaner speech
+        textToSpeak = textToSpeak
+          .replace(/```[\s\S]*?```/g, '')
+          .replace(/`[^`]+`/g, '')
+          .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+          .replace(/!\[([^\]]*)\]\([^)]+\)/g, '')
+          .replace(/^#{1,6}\s+/gm, '')
+          .replace(/\*\*([^*]+)\*\*/g, '$1')
+          .replace(/\*([^*]+)\*/g, '$1')
+          .trim();
+      }
+
+      if (textToSpeak) {
+        lastSpokenMessageRef.current = messageText;
+        window.electronAPI.voiceSpeak(textToSpeak).catch(err => {
+          console.error('Failed to auto-speak:', err);
+        });
+      }
+    }
+  }, [events, voiceEnabled, voiceResponseMode]);
+
+  // Load custom skills (task skills only, excludes guidelines)
+  useEffect(() => {
+    window.electronAPI.listTaskSkills()
+      .then(skills => setCustomSkills(skills.filter(s => s.enabled !== false)))
+      .catch(err => console.error('Failed to load custom skills:', err));
+  }, []);
+
+  // Load active agent roles for @mention autocomplete
+  useEffect(() => {
+    window.electronAPI.getAgentRoles()
+      .then((roles) => setAgentRoles(roles.filter((role) => role.isActive)))
+      .catch(err => console.error('Failed to load agent roles:', err));
+  }, []);
+
+  // Load canvas sessions when task changes
+  useEffect(() => {
+    if (!task?.id) {
+      setCanvasSessions([]);
+      return;
+    }
+
+    // Load existing canvas sessions for this task
+    window.electronAPI.canvasListSessions(task.id)
+      .then(sessions => {
+        // Filter to only active/paused sessions
+        setCanvasSessions(sessions.filter(s => s.status !== 'closed'));
+      })
+      .catch(err => console.error('Failed to load canvas sessions:', err));
+  }, [task?.id]);
+
+  // Subscribe to canvas events
+  useEffect(() => {
+    const unsubscribe = window.electronAPI.onCanvasEvent((event) => {
+      // Only process events for the current task
+      if (task?.id && event.taskId === task.id) {
+        // Don't show preview on session_created - wait until content is actually pushed
+        if (event.type === 'content_pushed') {
+          // Content has been pushed, now show the preview if not already showing
+          // Fetch the session info and add it to the list
+          window.electronAPI.canvasGetSession(event.sessionId)
+            .then(session => {
+              if (session && session.status !== 'closed') {
+                setCanvasSessions(prev => {
+                  // Only add if not already in the list
+                  if (prev.some(s => s.id === session.id)) {
+                    return prev;
+                  }
+                  return [...prev, session];
+                });
+              }
+            })
+            .catch(err => console.error('Failed to get canvas session:', err));
+        } else if (event.type === 'session_updated' && event.session) {
+          const updatedSession = event.session;
+          setCanvasSessions(prev => {
+            const exists = prev.some(s => s.id === event.sessionId);
+            if (!exists && updatedSession.status !== 'closed') {
+              return [...prev, updatedSession];
+            }
+            return prev.map(s => s.id === event.sessionId ? updatedSession : s);
+          });
+        } else if (event.type === 'session_closed') {
+          setCanvasSessions(prev => prev.filter(s => s.id !== event.sessionId));
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [task?.id]);
+
+  // Handle removing a canvas session from the UI
+  const handleCanvasClose = useCallback((sessionId: string) => {
+    setCanvasSessions(prev => prev.filter(s => s.id !== sessionId));
+  }, []);
+
+  // Handle dismissing command output for current task
+  const handleDismissCommandOutput = useCallback(() => {
+    if (!task?.id) return;
+    setDismissedCommandOutputs(prev => {
+      const updated = new Set(prev);
+      updated.add(task.id);
+      // Persist to localStorage
+      localStorage.setItem('dismissedCommandOutputs', JSON.stringify([...updated]));
+      return updated;
+    });
+    setActiveCommand(null);
+  }, [task?.id]);
+
+  // Filter skills based on search query
+  const filteredSkills = useMemo(() => {
+    if (!skillsSearchQuery.trim()) return customSkills;
+    const query = skillsSearchQuery.toLowerCase();
+    return customSkills.filter(skill =>
+      skill.name.toLowerCase().includes(query) ||
+      skill.description?.toLowerCase().includes(query) ||
+      skill.category?.toLowerCase().includes(query)
+    );
+  }, [customSkills, skillsSearchQuery]);
+
+  // Sync shell permission state when workspace changes
+  useEffect(() => {
+    setShellEnabled(workspace?.permissions?.shell ?? false);
+  }, [workspace?.id, workspace?.permissions?.shell]);
+
+  // Toggle shell permission for current workspace
+  const handleShellToggle = async () => {
+    if (!workspace) return;
+    const newValue = !shellEnabled;
+    setShellEnabled(newValue);
+    try {
+      await window.electronAPI.updateWorkspacePermissions(workspace.id, { shell: newValue });
+    } catch (err) {
+      console.error('Failed to update shell permission:', err);
+      setShellEnabled(!newValue); // Revert on error
+    }
+  };
+
+  // Close skills menu on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (skillsMenuRef.current && !skillsMenuRef.current.contains(e.target as Node)) {
+        setShowSkillsMenu(false);
+        setSkillsSearchQuery('');
+      }
+    };
+    if (showSkillsMenu) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showSkillsMenu]);
+
+  // Close workspace dropdown on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (workspaceDropdownRef.current && !workspaceDropdownRef.current.contains(e.target as Node)) {
+        setShowWorkspaceDropdown(false);
+      }
+    };
+    if (showWorkspaceDropdown) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showWorkspaceDropdown]);
+
+  // Handle workspace dropdown toggle - load workspaces when opening
+  const handleWorkspaceDropdownToggle = async () => {
+    if (!showWorkspaceDropdown) {
+      try {
+        const workspaces = await window.electronAPI.listWorkspaces();
+        // Filter out temp workspace and sort by most recently created
+        const filteredWorkspaces = workspaces
+          .filter((w: Workspace) => w.id !== TEMP_WORKSPACE_ID)
+          .sort((a: Workspace, b: Workspace) => b.createdAt - a.createdAt);
+        setWorkspacesList(filteredWorkspaces);
+      } catch (error) {
+        console.error('Failed to load workspaces:', error);
+      }
+    }
+    setShowWorkspaceDropdown(!showWorkspaceDropdown);
+  };
+
+  // Handle selecting an existing workspace from dropdown
+  const handleWorkspaceSelect = (selectedWorkspace: Workspace) => {
+    setShowWorkspaceDropdown(false);
+    onSelectWorkspace?.(selectedWorkspace);
+  };
+
+  // Handle selecting a new folder via Finder
+  const handleSelectNewFolder = () => {
+    setShowWorkspaceDropdown(false);
+    onChangeWorkspace?.();
+  };
+
+  const handleSkillSelect = (skill: CustomSkill) => {
+    setShowSkillsMenu(false);
+    setSkillsSearchQuery('');
+    // If skill has parameters, show the parameter modal
+    if (skill.parameters && skill.parameters.length > 0) {
+      setSelectedSkillForParams(skill);
+    } else {
+      // No parameters, just set the prompt directly
+      setInputValue(skill.prompt);
+    }
+  };
+
+  const handleSkillParamSubmit = (expandedPrompt: string) => {
+    setSelectedSkillForParams(null);
+    // Create task directly with the expanded prompt
+    if (onCreateTask) {
+      const title = buildTaskTitle(expandedPrompt);
+      onCreateTask(title, expandedPrompt);
+    }
+  };
+
+  const handleSkillParamCancel = () => {
+    setSelectedSkillForParams(null);
+  };
+
+  // Toggle an event's expanded state using its ID
+  const toggleEventExpanded = (eventId: string) => {
+    setToggledEvents(prev => {
+      const next = new Set(prev);
+      if (next.has(eventId)) {
+        next.delete(eventId);
+      } else {
+        next.add(eventId);
+      }
+      return next;
+    });
+  };
+
+  // Check if an event has details to show
+  const hasEventDetails = (event: TaskEvent): boolean => {
+    return ['plan_created', 'tool_call', 'tool_result', 'assistant_message', 'error'].includes(event.type);
+  };
+
+  // Determine if an event should be expanded by default
+  // Important events (plan, assistant responses, errors) should be expanded
+  // Verbose events (tool calls/results) should be collapsed
+  const shouldDefaultExpand = (event: TaskEvent): boolean => {
+    return ['plan_created', 'assistant_message', 'error'].includes(event.type);
+  };
+
+  // Check if an event is currently expanded using its ID
+  // If the event should default expand, clicking toggles it to collapsed (and vice versa)
+  const isEventExpanded = (event: TaskEvent): boolean => {
+    const defaultExpanded = shouldDefaultExpand(event);
+    const isToggled = toggledEvents.has(event.id);
+    // XOR: if toggled, invert the default state
+    return defaultExpanded ? !isToggled : isToggled;
+  };
+
+  const timelineRef = useRef<HTMLDivElement>(null);
+  const mainBodyRef = useRef<HTMLDivElement>(null);
+  const prevTaskStatusRef = useRef<Task['status'] | undefined>(undefined);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const mentionContainerRef = useRef<HTMLDivElement>(null);
+  const mentionDropdownRef = useRef<HTMLDivElement>(null);
+  const placeholderMeasureRef = useRef<HTMLSpanElement>(null);
+  const [cursorLeft, setCursorLeft] = useState<number>(0);
+
+  // Auto-resize textarea as content changes
+  const autoResizeTextarea = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+    }
+  }, []);
+
+  // Auto-resize when input value changes
+  useEffect(() => {
+    autoResizeTextarea();
+  }, [inputValue, autoResizeTextarea]);
+
+  // Calculate cursor position based on placeholder text width
+  const placeholder = agentContext.getPlaceholder();
+  useEffect(() => {
+    if (placeholderMeasureRef.current) {
+      // Measure the placeholder text width
+      const measureEl = placeholderMeasureRef.current;
+      measureEl.textContent = placeholder;
+      // Get the width and add offset for: padding (16px) + prompt (~$ = ~24px) + gap (10px)
+      const padding = 16; // wrapper left padding
+      const promptWidth = 24; // ~$ prompt width
+      const gap = 10;
+      const textWidth = measureEl.offsetWidth;
+      setCursorLeft(padding + promptWidth + gap + textWidth);
+    }
+  }, [placeholder]);
+
+  // Check if user is near the bottom of the scroll container
+  const isNearBottom = useCallback((element: HTMLElement, threshold = 100) => {
+    const { scrollTop, scrollHeight, clientHeight } = element;
+    return scrollHeight - scrollTop - clientHeight < threshold;
+  }, []);
+
+  // Handle scroll events to detect manual scrolling
+  const handleScroll = useCallback(() => {
+    const container = mainBodyRef.current;
+    if (!container) return;
+
+    // If user scrolls to near bottom, re-enable auto-scroll
+    // If user scrolls away from bottom, disable auto-scroll
+    setAutoScroll(isNearBottom(container));
+  }, [isNearBottom]);
+
+  // Auto-scroll to bottom when new events arrive
+  useEffect(() => {
+    if (autoScroll && timelineRef.current && mainBodyRef.current) {
+      // Scroll the main body to show the latest event
+      mainBodyRef.current.scrollTop = mainBodyRef.current.scrollHeight;
+    }
+  }, [events, autoScroll]);
+
+  // Reset auto-scroll when task changes
+  useEffect(() => {
+    setAutoScroll(true);
+  }, [task?.id]);
+
+  // Send queued message when task finishes executing
+  useEffect(() => {
+    const prevStatus = prevTaskStatusRef.current;
+    const currentStatus = task?.status;
+
+    // If task was executing and now it's not, send the queued message
+    if (prevStatus === 'executing' && currentStatus !== 'executing' && queuedMessage) {
+      onSendMessage(queuedMessage);
+      setQueuedMessage(null);
+    }
+
+    prevTaskStatusRef.current = currentStatus;
+  }, [task?.status, queuedMessage, onSendMessage]);
+
+  // Process command_output events to track live command execution
+  useEffect(() => {
+    // Get the last command_output event
+    const commandOutputEvents = events.filter(e => e.type === 'command_output');
+    if (commandOutputEvents.length === 0) {
+      setActiveCommand(null);
+      return;
+    }
+
+    // Build the command state from events
+    let currentCommand: string | null = null;
+    let output = '';
+    let isRunning = false;
+    let exitCode: number | null = null;
+    let startTimestamp: number = 0;
+
+    for (const event of commandOutputEvents) {
+      const payload = event.payload;
+      if (payload.type === 'start') {
+        // New command started
+        currentCommand = payload.command;
+        output = payload.output || '';
+        isRunning = true;
+        exitCode = null;
+        startTimestamp = event.timestamp;
+      } else if (payload.type === 'stdout' || payload.type === 'stderr' || payload.type === 'stdin') {
+        // Append output (stdin shows what user typed)
+        output += payload.output || '';
+      } else if (payload.type === 'end') {
+        // Command finished
+        isRunning = false;
+        exitCode = payload.exitCode;
+      } else if (payload.type === 'error') {
+        // Error output
+        output += payload.output || '';
+      }
+    }
+
+    // Check if this task's command output was dismissed
+    const isDismissed = task?.id ? dismissedCommandOutputs.has(task.id) : false;
+
+    // If a new command is running, clear the dismissed state for this task
+    if (isRunning && task?.id && isDismissed) {
+      setDismissedCommandOutputs(prev => {
+        const updated = new Set(prev);
+        updated.delete(task.id);
+        localStorage.setItem('dismissedCommandOutputs', JSON.stringify([...updated]));
+        return updated;
+      });
+    }
+
+    // Show command output if:
+    // 1. There's a command AND it's not dismissed, OR
+    // 2. Command is currently running (always show while running)
+    const shouldShowOutput = currentCommand && (isRunning || !isDismissed);
+
+    // Limit output size in UI to prevent performance issues (keep last 50KB)
+    const MAX_UI_OUTPUT = 50 * 1024;
+    let truncatedOutput = output;
+    if (output.length > MAX_UI_OUTPUT) {
+      truncatedOutput = '[... earlier output truncated ...]\n\n' + output.slice(-MAX_UI_OUTPUT);
+    }
+
+    if (shouldShowOutput) {
+      setActiveCommand({
+        command: currentCommand!,
+        output: truncatedOutput,
+        isRunning,
+        exitCode,
+        startTimestamp,
+      });
+    } else {
+      setActiveCommand(null);
+    }
+  }, [events, task?.id, task?.status, dismissedCommandOutputs]);
+
+  // Check for approval requests in events
+  useEffect(() => {
+    // Get all approval IDs that have been resolved (granted or denied)
+    const resolvedApprovalIds = new Set(
+      events
+        .filter(e => e.type === 'approval_granted' || e.type === 'approval_denied')
+        .map(e => e.payload?.approvalId || e.payload?.approval?.id)
+        .filter(Boolean)
+    );
+
+    // Find an approval request that hasn't been resolved yet
+    const pendingApprovalEvent = events.find(e => {
+      if (e.type !== 'approval_requested' || !e.payload?.approval) return false;
+      const approvalId = e.payload.approval.id;
+      // Only show if not already resolved
+      return !resolvedApprovalIds.has(approvalId);
+    });
+
+    if (pendingApprovalEvent) {
+      setPendingApproval(pendingApprovalEvent.payload.approval);
+    } else {
+      // No pending approvals - clear the state
+      setPendingApproval(null);
+    }
+  }, [events]);
+
+  const handleApprovalResponse = async (approved: boolean) => {
+    if (!pendingApproval) return;
+    try {
+      await window.electronAPI.respondToApproval({
+        approvalId: pendingApproval.id,
+        approved,
+      });
+      setPendingApproval(null);
+    } catch (error) {
+      console.error('Failed to respond to approval:', error);
+    }
+  };
+
+  const handleSend = () => {
+    if (inputValue.trim()) {
+      // Use selectedTaskId to determine if we should follow-up or create new task
+      // This fixes the bug where old tasks (beyond the 100 most recent) would create new tasks
+      // instead of sending follow-up messages
+      if (!selectedTaskId && onCreateTask) {
+        // No task selected - create new task with optional Goal Mode options
+        const trimmedInput = inputValue.trim();
+        const title = buildTaskTitle(trimmedInput);
+        const options: GoalModeOptions | undefined = goalModeEnabled && verificationCommand
+          ? {
+              successCriteria: { type: 'shell_command' as const, command: verificationCommand },
+              maxAttempts,
+            }
+          : undefined;
+        onCreateTask(title, trimmedInput, options);
+        // Reset Goal Mode state
+        setGoalModeEnabled(false);
+        setVerificationCommand('');
+        setMaxAttempts(3);
+      } else {
+        // Task is selected (even if not in current list) - send follow-up message
+        onSendMessage(inputValue.trim());
+      }
+      setInputValue('');
+      setMentionOpen(false);
+      setMentionQuery('');
+      setMentionTarget(null);
+    }
+  };
+
+  const handleClearQueue = () => {
+    setQueuedMessage(null);
+  };
+
+  const findMentionAtCursor = (value: string, cursor: number | null) => {
+    if (cursor === null) return null;
+    const uptoCursor = value.slice(0, cursor);
+    const atIndex = uptoCursor.lastIndexOf('@');
+    if (atIndex === -1) return null;
+    if (atIndex > 0 && /[a-zA-Z0-9]/.test(uptoCursor[atIndex - 1])) {
+      return null;
+    }
+    const query = uptoCursor.slice(atIndex + 1);
+    if (query.startsWith(' ')) return null;
+    if (query.includes('\n') || query.includes('\r')) return null;
+    return { query, start: atIndex, end: cursor };
+  };
+
+  const mentionOptions = useMemo<MentionOption[]>(() => {
+    if (!mentionOpen) return [];
+    const query = normalizeMentionSearch(mentionQuery);
+    const options: MentionOption[] = [];
+    const includeEveryone = query.length > 0 && ['everybody', 'everyone', 'all'].some((alias) => alias.startsWith(query));
+    if (includeEveryone) {
+      options.push({
+        type: 'everyone',
+        id: 'everyone',
+        label: 'Everybody',
+        description: 'Auto-pick the best agents for this task',
+        icon: '👥',
+        color: '#64748b',
+      });
+    }
+
+    const filteredAgents = agentRoles
+      .filter((role) => role.isActive)
+      .filter((role) => {
+        if (!query) return true;
+        const haystacks = [role.displayName, role.name, role.description ?? ''];
+        return haystacks.some((text) => normalizeMentionSearch(text).includes(query));
+      })
+      .sort((a, b) => {
+        if (a.sortOrder !== b.sortOrder) {
+          return (a.sortOrder ?? 0) - (b.sortOrder ?? 0);
+        }
+        return a.displayName.localeCompare(b.displayName);
+      });
+
+    filteredAgents.forEach((role) => {
+      options.push({
+        type: 'agent',
+        id: role.id,
+        label: role.displayName,
+        description: role.description,
+        icon: role.icon,
+        color: role.color,
+      });
+    });
+
+    return options;
+  }, [mentionOpen, mentionQuery, agentRoles]);
+
+  useEffect(() => {
+    if (mentionSelectedIndex >= mentionOptions.length) {
+      setMentionSelectedIndex(0);
+    }
+  }, [mentionOptions, mentionSelectedIndex]);
+
+  useEffect(() => {
+    if (!mentionOpen) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (mentionContainerRef.current && !mentionContainerRef.current.contains(e.target as Node)) {
+        setMentionOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [mentionOpen]);
+
+  const updateMentionState = useCallback((value: string, cursor: number | null) => {
+    const mention = findMentionAtCursor(value, cursor);
+    if (!mention) {
+      setMentionOpen(false);
+      setMentionQuery('');
+      setMentionTarget(null);
+      return;
+    }
+    setMentionOpen(true);
+    setMentionQuery(mention.query);
+    setMentionTarget({ start: mention.start, end: mention.end });
+    setMentionSelectedIndex(0);
+  }, []);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    updateMentionState(value, e.target.selectionStart);
+  };
+
+  const handleInputClick = (e: React.MouseEvent<HTMLTextAreaElement>) => {
+    updateMentionState(inputValue, e.currentTarget.selectionStart);
+  };
+
+  const handleInputKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key)) {
+      updateMentionState(inputValue, (e.currentTarget as HTMLTextAreaElement).selectionStart);
+    }
+  };
+
+  const handleMentionSelect = (option: MentionOption) => {
+    if (!mentionTarget) return;
+    const insertText = option.type === 'everyone' ? '@everybody' : `@${option.label}`;
+    const before = inputValue.slice(0, mentionTarget.start);
+    const after = inputValue.slice(mentionTarget.end);
+    const needsSpace = after.length === 0 ? true : !after.startsWith(' ');
+    const nextValue = `${before}${insertText}${needsSpace ? ' ' : ''}${after}`;
+    setInputValue(nextValue);
+    setMentionOpen(false);
+    setMentionQuery('');
+    setMentionTarget(null);
+
+    requestAnimationFrame(() => {
+      const textarea = textareaRef.current;
+      if (textarea) {
+        const cursorPosition = before.length + insertText.length + (needsSpace ? 1 : 0);
+        textarea.focus();
+        textarea.setSelectionRange(cursorPosition, cursorPosition);
+      }
+    });
+  };
+
+  const renderMentionDropdown = () => {
+    if (!mentionOpen || mentionOptions.length === 0) return null;
+    return (
+      <div className="mention-autocomplete-dropdown" ref={mentionDropdownRef}>
+        {mentionOptions.map((option, index) => {
+          const displayLabel = option.type === 'everyone' ? '@everybody' : `@${option.label}`;
+          return (
+            <button
+              key={`${option.type}-${option.id}`}
+              className={`mention-autocomplete-item ${index === mentionSelectedIndex ? 'selected' : ''}`}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                handleMentionSelect(option);
+              }}
+              onMouseEnter={() => setMentionSelectedIndex(index)}
+            >
+              <span
+                className="mention-autocomplete-icon"
+                style={{ backgroundColor: option.color || '#64748b' }}
+              >
+                {option.icon || '👥'}
+              </span>
+              <div className="mention-autocomplete-details">
+                <span className="mention-autocomplete-name">{displayLabel}</span>
+                {option.description && (
+                  <span className="mention-autocomplete-desc">{option.description}</span>
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (mentionOpen && mentionOptions.length > 0) {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setMentionSelectedIndex((prev) => (prev + 1) % mentionOptions.length);
+          return;
+        case 'ArrowUp':
+          e.preventDefault();
+          setMentionSelectedIndex((prev) => (prev - 1 + mentionOptions.length) % mentionOptions.length);
+          return;
+        case 'Enter':
+        case 'Tab':
+          e.preventDefault();
+          handleMentionSelect(mentionOptions[mentionSelectedIndex]);
+          return;
+        case 'Escape':
+          e.preventDefault();
+          setMentionOpen(false);
+          return;
+      }
+    }
+
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleQuickAction = (action: string) => {
+    setInputValue(action);
+  };
+
+  const formatTime = (timestamp: number) => {
+    return new Date(timestamp).toLocaleTimeString(undefined, {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const getEventDotClass = (type: TaskEvent['type']) => {
+    if (type === 'error' || type === 'verification_failed') return 'error';
+    if (type === 'step_completed' || type === 'task_completed' || type === 'verification_passed') return 'success';
+    if (type === 'step_started' || type === 'executing' || type === 'verification_started' || type === 'retry_started') return 'active';
+    return '';
+  };
+
+  // Get the last assistant message to always show the response
+  const lastAssistantMessage = useMemo(() => {
+    const assistantMessages = events.filter(e => e.type === 'assistant_message');
+    return assistantMessages.length > 0 ? assistantMessages[assistantMessages.length - 1] : null;
+  }, [events]);
+
+  // Welcome/Empty state
+  if (!task) {
+    return (
+      <div className="main-content">
+        <div className="main-body welcome-view">
+          <div className="welcome-content cli-style">
+            {/* Logo */}
+            <div className="welcome-logo">
+              <img src="./cowork-os-logo.png" alt="CoWork OS" className="welcome-logo-img" />
+            </div>
+
+            {/* ASCII Terminal Header */}
+            <div className="cli-header">
+              <pre className="ascii-art">{`
+  ██████╗ ██████╗ ██╗    ██╗ ██████╗ ██████╗ ██╗  ██╗      ██████╗ ███████╗
+ ██╔════╝██╔═══██╗██║    ██║██╔═══██╗██╔══██╗██║ ██╔╝     ██╔═══██╗██╔════╝
+ ██║     ██║   ██║██║ █╗ ██║██║   ██║██████╔╝█████╔╝      ██║   ██║███████╗
+ ██║     ██║   ██║██║███╗██║██║   ██║██╔══██╗██╔═██╗      ██║   ██║╚════██║
+ ╚██████╗╚██████╔╝╚███╔███╔╝╚██████╔╝██║  ██║██║  ██╗     ╚██████╔╝███████║
+  ╚═════╝ ╚═════╝  ╚══╝╚══╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝      ╚═════╝ ╚══════╝`}</pre>
+              <div className="cli-version">{appVersion ? `v${appVersion}` : ''}</div>
+            </div>
+
+            {/* Terminal Info */}
+            <div className="cli-info">
+              <div className="cli-line">
+                <span className="cli-prompt">$</span>
+                <span className="cli-text" title={agentContext.getMessage('welcome')}>{agentContext.getMessage('welcome')}</span>
+              </div>
+              <div className="cli-line cli-line-secondary">
+                <span className="cli-prompt">&gt;</span>
+                <span className="cli-text">{agentContext.getMessage('welcomeSubtitle')}</span>
+              </div>
+              <div className="cli-line cli-line-disclosure">
+                <span className="cli-prompt">#</span>
+                <span className="cli-text cli-text-muted" title={agentContext.getMessage('disclaimer')}>{agentContext.getMessage('disclaimer')}</span>
+              </div>
+            </div>
+
+            {/* Quick Start */}
+            <div className="cli-commands">
+              <div className="cli-commands-header">
+                <span className="cli-prompt">&gt;</span>
+                <span>QUICK START</span>
+              </div>
+              <div className="quick-start-grid">
+                <button className="quick-start-card" onClick={() => handleQuickAction('Let\'s organize the files in this folder together. Sort them by type and rename them with clear, consistent names.')} title="Let's sort and tidy up the workspace">
+                  <span className="quick-start-icon">📁</span>
+                  <span className="quick-start-title">Organize files</span>
+                  <span className="quick-start-desc">Let's sort and tidy up the workspace</span>
+                </button>
+                <button className="quick-start-card" onClick={() => handleQuickAction('Let\'s write a document together. I\'ll describe what I need and we can create it.')} title="Co-create reports, summaries, or notes">
+                  <span className="quick-start-icon">📝</span>
+                  <span className="quick-start-title">Write together</span>
+                  <span className="quick-start-desc">Co-create reports, summaries, or notes</span>
+                </button>
+                <button className="quick-start-card" onClick={() => handleQuickAction('Let\'s analyze the data files in this folder together. We\'ll summarize the key findings and create a report.')} title="Work through spreadsheets or data files">
+                  <span className="quick-start-icon">📊</span>
+                  <span className="quick-start-title">Analyze data</span>
+                  <span className="quick-start-desc">Work through spreadsheets or data files</span>
+                </button>
+                <button className="quick-start-card" onClick={() => handleQuickAction('Let\'s generate documentation for this project together. We can create a README, API docs, or code comments as needed.')} title="Build documentation for the project">
+                  <span className="quick-start-icon">📖</span>
+                  <span className="quick-start-title">Generate docs</span>
+                  <span className="quick-start-desc">Build documentation for the project</span>
+                </button>
+                <button className="quick-start-card" onClick={() => handleQuickAction('Let\'s research and summarize information from the files in this folder together.')} title="Dig through files and find insights">
+                  <span className="quick-start-icon">🔍</span>
+                  <span className="quick-start-title">Research together</span>
+                  <span className="quick-start-desc">Dig through files and find insights</span>
+                </button>
+                <button className="quick-start-card" onClick={() => handleQuickAction('Let\'s prepare for a meeting together. We\'ll create an agenda, talking points, and organize materials needed.')} title="Get everything ready for a clean meeting">
+                  <span className="quick-start-icon">📋</span>
+                  <span className="quick-start-title">Meeting prep</span>
+                  <span className="quick-start-desc">Get everything ready for a clean meeting</span>
+                </button>
+              </div>
+            </div>
+
+            {/* Input Area */}
+            <div className="welcome-input-container cli-input-container">
+              {showVoiceNotConfigured && (
+                <div className="voice-not-configured-banner">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+                    <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                    <line x1="12" y1="19" x2="12" y2="23" />
+                    <line x1="8" y1="23" x2="16" y2="23" />
+                  </svg>
+                  <span>Voice input is not configured.</span>
+                  <button
+                    className="voice-settings-link"
+                    onClick={() => {
+                      setShowVoiceNotConfigured(false);
+                      onOpenSettings?.('voice');
+                    }}
+                  >
+                    Open Voice Settings
+                  </button>
+                  <button
+                    className="voice-banner-close"
+                    onClick={() => setShowVoiceNotConfigured(false)}
+                    title="Dismiss"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M18 6L6 18M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+              )}
+              <div className="cli-input-wrapper">
+                <span className="cli-input-prompt">~$</span>
+                <span ref={placeholderMeasureRef} className="cli-placeholder-measure" aria-hidden="true" />
+                <div className="mention-autocomplete-wrapper" ref={mentionContainerRef}>
+                  <textarea
+                    ref={textareaRef}
+                    className="welcome-input cli-input input-textarea"
+                    placeholder={placeholder}
+                    value={inputValue}
+                    onChange={handleInputChange}
+                    onKeyDown={handleKeyDown}
+                    onClick={handleInputClick}
+                    onKeyUp={handleInputKeyUp}
+                    rows={1}
+                  />
+                  {renderMentionDropdown()}
+                </div>
+                {!inputValue && <span className="cli-cursor" style={{ left: cursorLeft }} />}
+              </div>
+
+              {/* Goal Mode Options */}
+              <div className="goal-mode-section">
+                <label className="goal-mode-toggle">
+                  <input
+                    type="checkbox"
+                    checked={goalModeEnabled}
+                    onChange={(e) => setGoalModeEnabled(e.target.checked)}
+                  />
+                  <span className="goal-mode-label">Goal Mode</span>
+                  <span className="goal-mode-hint">Verify & retry until success</span>
+                </label>
+                {goalModeEnabled && (
+                  <div className="goal-mode-options">
+                    <div className="goal-mode-command">
+                      <span className="goal-mode-prompt">$</span>
+                      <input
+                        type="text"
+                        className="goal-mode-input"
+                        placeholder="Verification command (e.g., npm test)"
+                        value={verificationCommand}
+                        onChange={(e) => setVerificationCommand(e.target.value)}
+                      />
+                    </div>
+                    <div className="goal-mode-attempts">
+                      <label>
+                        Max attempts:
+                        <input
+                          type="number"
+                          min="1"
+                          max="10"
+                          value={maxAttempts}
+                          onChange={(e) => setMaxAttempts(Math.min(10, Math.max(1, Number(e.target.value))))}
+                        />
+                      </label>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="welcome-input-footer">
+                <div className="input-left-actions">
+                  <div className="workspace-dropdown-container" ref={workspaceDropdownRef}>
+                    <button className="folder-selector" onClick={handleWorkspaceDropdownToggle}>
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
+                      </svg>
+                      <span>{workspace?.id === TEMP_WORKSPACE_ID ? 'Work in a folder' : (workspace?.name || 'Work in a folder')}</span>
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={showWorkspaceDropdown ? 'chevron-up' : ''}>
+                        <path d="M6 9l6 6 6-6" />
+                      </svg>
+                    </button>
+                    {showWorkspaceDropdown && (
+                      <div className="workspace-dropdown">
+                        {workspacesList.length > 0 && (
+                          <>
+                            <div className="workspace-dropdown-header">Recent Folders</div>
+                            <div className="workspace-dropdown-list">
+                              {workspacesList.slice(0, 5).map((w) => (
+                                <button
+                                  key={w.id}
+                                  className={`workspace-dropdown-item ${workspace?.id === w.id ? 'active' : ''}`}
+                                  onClick={() => handleWorkspaceSelect(w)}
+                                >
+                                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                    <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
+                                  </svg>
+                                  <div className="workspace-item-info">
+                                    <span className="workspace-item-name">{w.name}</span>
+                                    <span className="workspace-item-path">{w.path}</span>
+                                  </div>
+                                  {workspace?.id === w.id && (
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="check-icon">
+                                      <path d="M20 6L9 17l-5-5" />
+                                    </svg>
+                                  )}
+                                </button>
+                              ))}
+                            </div>
+                            <div className="workspace-dropdown-divider" />
+                          </>
+                        )}
+                        <button className="workspace-dropdown-item new-folder" onClick={handleSelectNewFolder}>
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <path d="M12 5v14M5 12h14" />
+                          </svg>
+                          <span>Work in another folder...</span>
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                  <button
+                    className={`shell-toggle ${shellEnabled ? 'enabled' : ''}`}
+                    onClick={handleShellToggle}
+                    title={shellEnabled ? 'Shell commands enabled - click to disable' : 'Shell commands disabled - click to enable'}
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M4 17l6-6-6-6M12 19h8" />
+                    </svg>
+                    <span>Shell {shellEnabled ? 'ON' : 'OFF'}</span>
+                  </button>
+                </div>
+                <div className="input-right-actions">
+                  <ModelDropdown
+                    models={availableModels}
+                    selectedModel={selectedModel}
+                    onModelChange={onModelChange}
+                  />
+                  {/* Skills Menu Button */}
+                  <div className="skills-menu-container" ref={skillsMenuRef}>
+                    <button
+                      className={`skills-menu-btn ${showSkillsMenu ? 'active' : ''}`}
+                      onClick={() => setShowSkillsMenu(!showSkillsMenu)}
+                      title="Custom Skills"
+                    >
+                      <span>/</span>
+                    </button>
+                    {showSkillsMenu && (
+                      <div className="skills-dropdown">
+                        <div className="skills-dropdown-header">Custom Skills</div>
+                        <div className="skills-dropdown-search">
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <circle cx="11" cy="11" r="8" />
+                            <path d="M21 21l-4.35-4.35" />
+                          </svg>
+                          <input
+                            type="text"
+                            placeholder="Search skills..."
+                            value={skillsSearchQuery}
+                            onChange={(e) => setSkillsSearchQuery(e.target.value)}
+                            autoFocus
+                          />
+                        </div>
+                        {customSkills.length > 0 ? (
+                          filteredSkills.length > 0 ? (
+                            <div className="skills-dropdown-list">
+                              {filteredSkills.map(skill => (
+                                <div
+                                  key={skill.id}
+                                  className="skills-dropdown-item"
+                                  style={{ cursor: 'pointer' }}
+                                  onClick={() => handleSkillSelect(skill)}
+                                >
+                                  <span className="skills-dropdown-icon">{skill.icon}</span>
+                                  <div className="skills-dropdown-info">
+                                    <span className="skills-dropdown-name">{skill.name}</span>
+                                    <span className="skills-dropdown-desc">{skill.description}</span>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          ) : (
+                            <div className="skills-dropdown-empty">
+                              No skills match "{skillsSearchQuery}"
+                            </div>
+                          )
+                        ) : (
+                          <div className="skills-dropdown-empty">
+                            No custom skills yet.
+                          </div>
+                        )}
+                        <div className="skills-dropdown-footer">
+                          <button
+                            className="skills-dropdown-create"
+                            onClick={() => {
+                              setShowSkillsMenu(false);
+                              setSkillsSearchQuery('');
+                              onOpenSettings?.('skills');
+                            }}
+                          >
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                              <line x1="12" y1="5" x2="12" y2="19" />
+                              <line x1="5" y1="12" x2="19" y2="12" />
+                            </svg>
+                            <span>Create New Skill</span>
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                  <button
+                    className={`voice-input-btn ${voiceInput.state}`}
+                    onClick={voiceInput.toggleRecording}
+                    disabled={voiceInput.state === 'processing'}
+                    title={
+                      voiceInput.state === 'idle' ? 'Start voice input' :
+                      voiceInput.state === 'recording' ? 'Stop recording' :
+                      'Processing...'
+                    }
+                  >
+                    {voiceInput.state === 'processing' ? (
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="voice-processing-spin">
+                        <circle cx="12" cy="12" r="10" />
+                        <path d="M12 6v6l4 2" />
+                      </svg>
+                    ) : voiceInput.state === 'recording' ? (
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                        <rect x="6" y="6" width="12" height="12" rx="2" />
+                      </svg>
+                    ) : (
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+                        <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                        <line x1="12" y1="19" x2="12" y2="23" />
+                        <line x1="8" y1="23" x2="16" y2="23" />
+                      </svg>
+                    )}
+                    {voiceInput.state === 'recording' && (
+                      <span className="voice-recording-indicator" style={{ width: `${voiceInput.audioLevel}%` }} />
+                    )}
+                  </button>
+                  <button
+                    className="lets-go-btn lets-go-btn-sm"
+                    onClick={handleSend}
+                    disabled={!inputValue.trim()}
+                  >
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M12 19V5M5 12l7-7 7 7" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Modal for skills with parameters - Welcome View */}
+        {selectedSkillForParams && (
+          <SkillParameterModal
+            skill={selectedSkillForParams}
+            onSubmit={handleSkillParamSubmit}
+            onCancel={handleSkillParamCancel}
+          />
+        )}
+
+        {/* File Viewer Modal - Welcome View */}
+        {viewerFilePath && workspace?.path && (
+          <FileViewer
+            filePath={viewerFilePath}
+            workspacePath={workspace.path}
+            onClose={() => setViewerFilePath(null)}
+          />
+        )}
+      </div>
+    );
+  }
+
+  const trimmedPrompt = task.prompt.trim();
+  const baseTitle = task.title || buildTaskTitle(trimmedPrompt);
+  const normalizedTitle = baseTitle.replace(TITLE_ELLIPSIS_REGEX, '');
+  const titleMatchesPrompt = normalizedTitle.length > 0 && trimmedPrompt.startsWith(normalizedTitle);
+  const isTitleTruncated = titleMatchesPrompt && trimmedPrompt.length > normalizedTitle.length;
+  const headerTitle = isTitleTruncated && !TITLE_ELLIPSIS_REGEX.test(baseTitle)
+    ? `${baseTitle}...`
+    : baseTitle;
+  const headerTooltip = isTitleTruncated ? trimmedPrompt : baseTitle;
+  const latestPauseEvent = [...events].reverse().find(event => event.type === 'task_paused');
+  const latestApprovalEvent = [...events].reverse().find(event => event.type === 'approval_requested');
+
+  // Task view
+  return (
+    <div className="main-content">
+      {/* Header */}
+      <div className="main-header">
+        <div className="main-header-title" title={headerTooltip}>{headerTitle}</div>
+      </div>
+
+      {/* Body */}
+      <div className="main-body" ref={mainBodyRef} onScroll={handleScroll}>
+        <div className="task-content">
+          {/* User Prompt - Right aligned like chat */}
+          <div className="chat-message user-message">
+            <div className="chat-bubble user-bubble markdown-content">
+              <ReactMarkdown remarkPlugins={userMarkdownPlugins} components={markdownComponents}>
+                {task.prompt}
+              </ReactMarkdown>
+            </div>
+            <MessageCopyButton text={task.prompt} />
+          </div>
+
+          {/* View steps toggle - show right after original prompt */}
+          {events.some(e => e.type !== 'user_message' && e.type !== 'assistant_message') && (
+            <div className="timeline-controls">
+              <button
+                className={`view-steps-btn ${showSteps ? 'expanded' : ''}`}
+                onClick={() => setShowSteps(!showSteps)}
+              >
+                {showSteps ? 'Hide steps' : 'View steps'}
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M9 18l6-6-6-6" />
+                </svg>
+              </button>
+              {showSteps && (
+                <button
+                  className={`verbose-toggle-btn ${verboseSteps ? 'active' : ''}`}
+                  onClick={toggleVerboseSteps}
+                  title={verboseSteps ? 'Show important steps only' : 'Show all steps (verbose)'}
+                >
+                  {verboseSteps ? 'Verbose' : 'Summary'}
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Conversation Flow - renders all events in order */}
+          {events.length > 0 && (
+            <div className="conversation-flow" ref={timelineRef}>
+              {/* Render CommandOutput at beginning if it should appear before all events */}
+              {activeCommand && commandOutputInsertIndex === -1 && (
+                <CommandOutput
+                  command={activeCommand.command}
+                  output={activeCommand.output}
+                  isRunning={activeCommand.isRunning}
+                  exitCode={activeCommand.exitCode}
+                  taskId={task?.id}
+                  onClose={handleDismissCommandOutput}
+                />
+              )}
+              {timelineItems.map((item) => {
+                if (item.kind === 'canvas') {
+                  return (
+                    <CanvasPreview
+                      key={item.session.id}
+                      session={item.session}
+                      onClose={() => handleCanvasClose(item.session.id)}
+                      forceSnapshot={item.forceSnapshot}
+                    />
+                  );
+                }
+
+                const event = item.event;
+                const isUserMessage = event.type === 'user_message';
+                const isAssistantMessage = event.type === 'assistant_message';
+                // Check if CommandOutput should be rendered after this event
+                const shouldRenderCommandOutput = activeCommand && item.eventIndex === commandOutputInsertIndex;
+
+                // Render user messages as chat bubbles on the right
+                if (isUserMessage) {
+                  const messageText = event.payload?.message || 'User message';
+                  return (
+                    <Fragment key={event.id || `event-${item.eventIndex}`}>
+                      <div className="chat-message user-message">
+                        <div className="chat-bubble user-bubble markdown-content">
+                          <ReactMarkdown remarkPlugins={userMarkdownPlugins} components={markdownComponents}>
+                            {messageText}
+                          </ReactMarkdown>
+                        </div>
+                        <MessageCopyButton text={messageText} />
+                      </div>
+                      {shouldRenderCommandOutput && (
+                        <CommandOutput
+                          command={activeCommand.command}
+                          output={activeCommand.output}
+                          isRunning={activeCommand.isRunning}
+                          exitCode={activeCommand.exitCode}
+                          taskId={task?.id}
+                          onClose={handleDismissCommandOutput}
+                        />
+                      )}
+                    </Fragment>
+                  );
+                }
+
+                // Render assistant messages as chat bubbles on the left
+                if (isAssistantMessage) {
+                  const messageText = event.payload?.message || '';
+                  const isLastAssistant = event === lastAssistantMessage;
+                  return (
+                    <Fragment key={event.id || `event-${item.eventIndex}`}>
+                      <div className="chat-message assistant-message">
+                        <div className="chat-bubble assistant-bubble">
+                          {isLastAssistant && (
+                            <div className="chat-bubble-header">
+                              {task.status === 'completed' && <span className="chat-status">{agentContext.getMessage('taskComplete')}</span>}
+                              {task.status === 'paused' && <span className="chat-status">{agentContext.getMessage('taskPaused') || 'Paused'}</span>}
+                              {task.status === 'blocked' && <span className="chat-status">{agentContext.getMessage('taskBlocked') || 'Needs approval'}</span>}
+                              {task.status === 'executing' && (
+                                <span className="chat-status executing">
+                                  <svg className="spinner" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                    <circle cx="12" cy="12" r="10" strokeOpacity="0.25" />
+                                    <path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round" />
+                                  </svg>
+                                  {agentContext.getMessage('taskWorking')}
+                                </span>
+                              )}
+                            </div>
+                          )}
+                          <div className="chat-bubble-content markdown-content">
+                            <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+                              {messageText.replace(/\[\[speak\]\]([\s\S]*?)\[\[\/speak\]\]/gi, '$1')}
+                            </ReactMarkdown>
+                          </div>
+                        </div>
+                        <div className="message-actions">
+                          <MessageCopyButton text={messageText} />
+                          <MessageSpeakButton text={messageText} voiceEnabled={voiceEnabled} />
+                        </div>
+                      </div>
+                      {shouldRenderCommandOutput && (
+                        <CommandOutput
+                          command={activeCommand.command}
+                          output={activeCommand.output}
+                          isRunning={activeCommand.isRunning}
+                          exitCode={activeCommand.exitCode}
+                          taskId={task?.id}
+                          onClose={handleDismissCommandOutput}
+                        />
+                      )}
+                    </Fragment>
+                  );
+                }
+
+                // Technical events - only show when showSteps is true
+                const alwaysVisibleEvents = new Set(['approval_requested', 'approval_granted', 'approval_denied']);
+                if (!showSteps && !alwaysVisibleEvents.has(event.type)) {
+                  // Even if we're not showing steps, we may still need to render CommandOutput here
+                  if (shouldRenderCommandOutput) {
+                    return (
+                      <Fragment key={event.id || `event-${item.eventIndex}`}>
+                        <CommandOutput
+                          command={activeCommand.command}
+                          output={activeCommand.output}
+                          isRunning={activeCommand.isRunning}
+                          exitCode={activeCommand.exitCode}
+                          taskId={task?.id}
+                          onClose={handleDismissCommandOutput}
+                        />
+                      </Fragment>
+                    );
+                  }
+                  return null;
+                }
+
+                const isExpandable = hasEventDetails(event);
+                const isExpanded = isEventExpanded(event);
+
+                return (
+                  <Fragment key={event.id || `event-${item.eventIndex}`}>
+                    <div className="timeline-event">
+                      <div className="event-indicator">
+                        <div className={`event-dot ${getEventDotClass(event.type)}`} />
+                      </div>
+                      <div className="event-content">
+                        <div
+                          className={`event-header ${isExpandable ? 'expandable' : ''} ${isExpanded ? 'expanded' : ''}`}
+                          onClick={isExpandable ? () => toggleEventExpanded(event.id) : undefined}
+                        >
+                          <div className="event-header-left">
+                            {isExpandable && (
+                              <svg className="event-expand-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                <path d="M9 18l6-6-6-6" />
+                              </svg>
+                            )}
+                            <div className="event-title">{renderEventTitle(event, workspace?.path, setViewerFilePath, agentContext)}</div>
+                          </div>
+                          <div className="event-time">{formatTime(event.timestamp)}</div>
+                        </div>
+                        {isExpanded && renderEventDetails(event, voiceEnabled)}
+                      </div>
+                    </div>
+                    {shouldRenderCommandOutput && (
+                      <CommandOutput
+                        command={activeCommand.command}
+                        output={activeCommand.output}
+                        isRunning={activeCommand.isRunning}
+                        exitCode={activeCommand.exitCode}
+                        taskId={task?.id}
+                        onClose={handleDismissCommandOutput}
+                      />
+                    )}
+                  </Fragment>
+                );
+              })}
+            </div>
+          )}
+
+        </div>
+      </div>
+
+      {/* Footer with Input */}
+      <div className="main-footer">
+        <div className="input-container">
+          {/* Queued message display */}
+          {queuedMessage && (
+            <div className="queued-message-frame">
+              <div className="queued-message-content">
+                <svg className="queued-message-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M12 19V5M5 12l7-7 7 7" />
+                </svg>
+                <span className="queued-message-label">Queue:</span>
+                <span className="queued-message-text">{queuedMessage}</span>
+              </div>
+              <button className="queued-message-clear" onClick={handleClearQueue} title="Remove from queue">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          )}
+          {showVoiceNotConfigured && (
+            <div className="voice-not-configured-banner">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                <line x1="12" y1="19" x2="12" y2="23" />
+                <line x1="8" y1="23" x2="16" y2="23" />
+              </svg>
+              <span>Voice input is not configured.</span>
+              <button
+                className="voice-settings-link"
+                onClick={() => {
+                  setShowVoiceNotConfigured(false);
+                  onOpenSettings?.('voice');
+                }}
+              >
+                Open Voice Settings
+              </button>
+              <button
+                className="voice-banner-close"
+                onClick={() => setShowVoiceNotConfigured(false)}
+                title="Dismiss"
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          )}
+          {task.status === 'paused' && (
+            <div className="task-status-banner task-status-banner-paused">
+              <div className="task-status-banner-content">
+                <strong>Paused — waiting on your input</strong>
+                {latestPauseEvent?.payload?.message && (
+                  <span className="task-status-banner-detail">{latestPauseEvent.payload.message}</span>
+                )}
+              </div>
+              <button className="btn-secondary" onClick={() => window.electronAPI.resumeTask(task.id)}>
+                Resume
+              </button>
+            </div>
+          )}
+          {task.status === 'blocked' && (
+            <div className="task-status-banner task-status-banner-blocked">
+              <div className="task-status-banner-content">
+                <strong>Blocked — needs approval</strong>
+                {latestApprovalEvent?.payload?.approval?.description && (
+                  <span className="task-status-banner-detail">{latestApprovalEvent.payload.approval.description}</span>
+                )}
+              </div>
+            </div>
+          )}
+          <div className="input-row">
+            <div className="mention-autocomplete-wrapper" ref={mentionContainerRef}>
+              <textarea
+                ref={textareaRef}
+                className="input-field input-textarea"
+                placeholder={queuedMessage ? agentContext.getUiCopy('inputPlaceholderQueued') : agentContext.getMessage('placeholderActive')}
+                value={inputValue}
+                onChange={handleInputChange}
+                onKeyDown={handleKeyDown}
+                onClick={handleInputClick}
+                onKeyUp={handleInputKeyUp}
+                rows={1}
+              />
+              {renderMentionDropdown()}
+            </div>
+            <div className="input-actions">
+              <ModelDropdown
+                models={availableModels}
+                selectedModel={selectedModel}
+                onModelChange={onModelChange}
+              />
+              <button
+                className={`voice-input-btn ${voiceInput.state}`}
+                onClick={voiceInput.toggleRecording}
+                disabled={voiceInput.state === 'processing'}
+                title={
+                  voiceInput.state === 'idle' ? 'Start voice input' :
+                  voiceInput.state === 'recording' ? 'Stop recording' :
+                  'Processing...'
+                }
+              >
+                {voiceInput.state === 'processing' ? (
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="voice-processing-spin">
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M12 6v6l4 2" />
+                  </svg>
+                ) : voiceInput.state === 'recording' ? (
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                    <rect x="6" y="6" width="12" height="12" rx="2" />
+                  </svg>
+                ) : (
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+                    <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+                    <line x1="12" y1="19" x2="12" y2="23" />
+                    <line x1="8" y1="23" x2="16" y2="23" />
+                  </svg>
+                )}
+                {voiceInput.state === 'recording' && (
+                  <span className="voice-recording-indicator" style={{ width: `${voiceInput.audioLevel}%` }} />
+                )}
+              </button>
+              <button
+                className="lets-go-btn lets-go-btn-sm"
+                onClick={handleSend}
+                disabled={!inputValue.trim()}
+                title="Send message"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M12 19V5M5 12l7-7 7 7" />
+                </svg>
+              </button>
+              {task.status === 'executing' && onStopTask && (
+                <button
+                  className="stop-btn-simple"
+                  onClick={onStopTask}
+                  title="Stop task"
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <rect x="3" y="3" width="18" height="18" rx="2" />
+                  </svg>
+                </button>
+              )}
+            </div>
+          </div>
+          <div className="input-below-actions">
+            <button
+              className={`shell-toggle ${shellEnabled ? 'enabled' : ''}`}
+              onClick={handleShellToggle}
+              title={shellEnabled ? 'Shell commands enabled - click to disable' : 'Shell commands disabled - click to enable'}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M4 17l6-6-6-6M12 19h8" />
+              </svg>
+              <span>Shell {shellEnabled ? 'ON' : 'OFF'}</span>
+            </button>
+          </div>
+        </div>
+        <div className="footer-disclaimer">
+          {agentContext.getMessage('disclaimer')}
+        </div>
+      </div>
+
+      {pendingApproval && (
+        <ApprovalDialog
+          approval={pendingApproval}
+          onApprove={() => handleApprovalResponse(true)}
+          onDeny={() => handleApprovalResponse(false)}
+        />
+      )}
+
+      {selectedSkillForParams && (
+        <SkillParameterModal
+          skill={selectedSkillForParams}
+          onSubmit={handleSkillParamSubmit}
+          onCancel={handleSkillParamCancel}
+        />
+      )}
+
+      {/* File Viewer Modal - Task View */}
+      {viewerFilePath && workspace?.path && (
+        <FileViewer
+          filePath={viewerFilePath}
+          workspacePath={workspace.path}
+          onClose={() => setViewerFilePath(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+/**
+ * Truncate long text for display, with expand option handled via CSS
+ */
+function truncateForDisplay(text: string, maxLength: number = 2000): string {
+  if (!text || text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + '\n\n... [content truncated for display]';
+}
+
+function renderEventTitle(
+  event: TaskEvent,
+  workspacePath?: string,
+  onOpenViewer?: (path: string) => void,
+  agentCtx?: AgentContext
+): React.ReactNode {
+  // Build message context for personalized messages
+  const msgCtx = agentCtx ? {
+    agentName: agentCtx.agentName,
+    userName: agentCtx.userName,
+    personality: agentCtx.personality,
+    persona: agentCtx.persona,
+    emojiUsage: agentCtx.emojiUsage,
+    quirks: agentCtx.quirks,
+  } : {
+    agentName: 'CoWork',
+    userName: undefined,
+    personality: 'professional' as const,
+    persona: undefined,
+    emojiUsage: 'minimal' as const,
+    quirks: DEFAULT_QUIRKS,
+  };
+
+  switch (event.type) {
+    case 'task_created':
+      return getMessage('taskStart', msgCtx);
+    case 'task_completed':
+      return getMessage('taskComplete', msgCtx);
+    case 'plan_created':
+      return getMessage('planCreated', msgCtx);
+    case 'step_started':
+      return getMessage('stepStarted', msgCtx, event.payload.step?.description || 'Getting started...');
+    case 'step_completed':
+      return getMessage('stepCompleted', msgCtx, event.payload.step?.description || event.payload.message);
+    case 'tool_call':
+      return `Using: ${event.payload.tool}`;
+    case 'tool_result': {
+      const result = event.payload.result;
+      const success = result?.success !== false && !result?.error;
+      const status = success ? 'done' : 'issue';
+
+      // Extract useful info from result to show inline
+      let detail = '';
+      if (result) {
+        if (!success && result.error) {
+          // Show error message for failed tools
+          const errorMsg = typeof result.error === 'string' ? result.error : 'Unknown error';
+          detail = `: ${errorMsg.slice(0, 60)}${errorMsg.length > 60 ? '...' : ''}`;
+        } else if (result.path) {
+          detail = ` → ${result.path}`;
+        } else if (result.content && typeof result.content === 'string') {
+          const lines = result.content.split('\n').length;
+          detail = ` → ${lines} lines`;
+        } else if (result.size !== undefined) {
+          detail = ` → ${result.size} bytes`;
+        } else if (result.files) {
+          detail = ` → ${result.files.length} items`;
+        } else if (result.matches) {
+          detail = ` → ${result.matches.length} matches`;
+        } else if (result.exitCode !== undefined) {
+          detail = result.exitCode === 0 ? '' : ` → exit ${result.exitCode}`;
+        }
+      }
+      return `${event.payload.tool} ${status}${detail}`;
+    }
+    case 'assistant_message':
+      return msgCtx.agentName;
+    case 'file_created':
+      return (
+        <span>
+          Created: <ClickableFilePath path={event.payload.path} workspacePath={workspacePath} onOpenViewer={onOpenViewer} />
+        </span>
+      );
+    case 'file_modified':
+      return (
+        <span>
+          Updated: <ClickableFilePath path={event.payload.path || event.payload.from} workspacePath={workspacePath} onOpenViewer={onOpenViewer} />
+        </span>
+      );
+    case 'file_deleted':
+      return `Removed: ${event.payload.path}`;
+    case 'error':
+      return getMessage('error', msgCtx);
+    case 'approval_requested':
+      return `${getMessage('approval', msgCtx)} ${event.payload.approval?.description}`;
+    case 'log':
+      return event.payload.message;
+    // Goal Mode verification events
+    case 'verification_started':
+      return getMessage('verifying', msgCtx);
+    case 'verification_passed':
+      return `${getMessage('verifyPassed', msgCtx)} (attempt ${event.payload.attempt})`;
+    case 'verification_failed':
+      return `${getMessage('verifyFailed', msgCtx)} (attempt ${event.payload.attempt}/${event.payload.maxAttempts})`;
+    case 'retry_started':
+      return getMessage('retrying', msgCtx, String(event.payload.attempt));
+    default:
+      return event.type;
+  }
+}
+
+function renderEventDetails(event: TaskEvent, voiceEnabled: boolean) {
+  switch (event.type) {
+    case 'plan_created':
+      return (
+        <div className="event-details">
+          <div style={{ marginBottom: 8, fontWeight: 500 }}>{event.payload.plan?.description}</div>
+          {event.payload.plan?.steps && (
+            <ul style={{ margin: 0, paddingLeft: 18 }}>
+              {event.payload.plan.steps.map((step: any, i: number) => (
+                <li key={i} style={{ marginBottom: 4 }}>{step.description}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+      );
+    case 'tool_call':
+      return (
+        <div className="event-details event-details-scrollable">
+          <pre>{truncateForDisplay(JSON.stringify(event.payload.input, null, 2))}</pre>
+        </div>
+      );
+    case 'tool_result':
+      return (
+        <div className="event-details event-details-scrollable">
+          <pre>{truncateForDisplay(JSON.stringify(event.payload.result, null, 2))}</pre>
+        </div>
+      );
+    case 'assistant_message':
+      return (
+        <div className="event-details assistant-message event-details-scrollable">
+          <div className="markdown-content">
+            <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+              {event.payload.message.replace(/\[\[speak\]\]([\s\S]*?)\[\[\/speak\]\]/gi, '$1')}
+            </ReactMarkdown>
+          </div>
+          <div className="message-actions">
+            <MessageCopyButton text={event.payload.message} />
+            <MessageSpeakButton text={event.payload.message} voiceEnabled={voiceEnabled} />
+          </div>
+        </div>
+      );
+    case 'error':
+      return (
+        <div className="event-details" style={{ background: 'rgba(239, 68, 68, 0.1)', borderColor: 'rgba(239, 68, 68, 0.2)' }}>
+          {event.payload.error || event.payload.message}
+        </div>
+      );
+    default:
+      return null;
+  }
+}