cowork-os 0.3.21 → 0.3.25

package/src/renderer/components/TaskTimeline.tsx

@@ -1,4 +1,23 @@
 import { TaskEvent, DEFAULT_QUIRKS } from '../../shared/types';
+import { ThemeIcon } from './ThemeIcon';
+import {
+  AlertTriangleIcon,
+  BanIcon,
+  CheckIcon,
+  ClipboardIcon,
+  DotIcon,
+  FileIcon,
+  PackageIcon,
+  PauseIcon,
+  PlayIcon,
+  ShieldIcon,
+  SlidersIcon,
+  StopIcon,
+  TargetIcon,
+  TrashIcon,
+  XIcon,
+  ZapIcon,
+} from './LineIcons';
 import type { AgentContext } from '../hooks/useAgentContext';
 import { getUiCopy, type UiCopyKey } from '../utils/agentMessages';
 
@@ -39,57 +58,57 @@ export function TaskTimeline({ events, agentContext }: TaskTimelineProps) {
   const getEventIcon = (type: TaskEvent['type']) => {
     switch (type) {
       case 'task_created':
-        return '🎯';
+        return <ThemeIcon emoji="🎯" icon={<TargetIcon size={16} />} />;
       case 'plan_created':
-        return '📋';
+        return <ThemeIcon emoji="📋" icon={<ClipboardIcon size={16} />} />;
       case 'step_started':
-        return '▶️';
+        return <ThemeIcon emoji="▶️" icon={<PlayIcon size={16} />} />;
       case 'step_completed':
-        return '✅';
+        return <ThemeIcon emoji="✅" icon={<CheckIcon size={16} />} />;
       case 'tool_call':
-        return '🔧';
+        return <ThemeIcon emoji="🔧" icon={<SlidersIcon size={16} />} />;
       case 'tool_result':
-        return '📦';
+        return <ThemeIcon emoji="📦" icon={<PackageIcon size={16} />} />;
       case 'file_created':
       case 'file_modified':
-        return '📄';
+        return <ThemeIcon emoji="📄" icon={<FileIcon size={16} />} />;
       case 'file_deleted':
-        return '🗑️';
+        return <ThemeIcon emoji="🗑️" icon={<TrashIcon size={16} />} />;
       case 'error':
-        return '❌';
+        return <ThemeIcon emoji="❌" icon={<XIcon size={16} />} />;
       case 'task_cancelled':
-        return '🛑';
+        return <ThemeIcon emoji="🛑" icon={<StopIcon size={16} />} />;
       case 'approval_requested':
-        return '⚠️';
+        return <ThemeIcon emoji="⚠️" icon={<AlertTriangleIcon size={16} />} />;
       case 'approval_granted':
-        return '✅';
+        return <ThemeIcon emoji="✅" icon={<CheckIcon size={16} />} />;
       case 'approval_denied':
-        return '⛔';
+        return <ThemeIcon emoji="⛔" icon={<BanIcon size={16} />} />;
       case 'task_paused':
-        return '⏸️';
+        return <ThemeIcon emoji="⏸️" icon={<PauseIcon size={16} />} />;
       case 'task_resumed':
-        return '▶️';
+        return <ThemeIcon emoji="▶️" icon={<PlayIcon size={16} />} />;
       case 'executing':
-        return '⚡';
+        return <ThemeIcon emoji="⚡" icon={<ZapIcon size={16} />} />;
       case 'task_completed':
-        return '✅';
+        return <ThemeIcon emoji="✅" icon={<CheckIcon size={16} />} />;
       case 'follow_up_completed':
-        return '✅';
+        return <ThemeIcon emoji="✅" icon={<CheckIcon size={16} />} />;
       default:
-        return '•';
+        return <ThemeIcon emoji="•" icon={<DotIcon size={8} />} />;
     }
   };
 
   const getEventTitle = (event: TaskEvent) => {
     switch (event.type) {
       case 'task_created':
-        return isCompanion ? "Session started - I'm here." : '🚀 Session Started';
+        return isCompanion ? "Session started - I'm here." : 'Session started';
       case 'plan_created':
         return isCompanion ? "Here's the path I'm taking" : "Here's our approach";
       case 'step_started':
         return `Working on: ${event.payload.step?.description || 'Getting started'}`;
       case 'step_completed':
-        return `✓ ${event.payload.step?.description || event.payload.message || 'Done'}`;
+        return event.payload.step?.description || event.payload.message || 'Done';
       case 'tool_call':
         return `Using: ${event.payload.tool}`;
       case 'tool_result':
@@ -119,9 +138,9 @@ export function TaskTimeline({ events, agentContext }: TaskTimelineProps) {
       case 'executing':
         return event.payload.message || 'Working on it';
       case 'task_completed':
-        return isCompanion ? 'All done.' : '✅ All done!';
+        return isCompanion ? 'All done.' : 'All done!';
       case 'follow_up_completed':
-        return '✅ All done!';
+        return 'All done!';
       case 'log':
         return event.payload.message;
       default:
@@ -156,12 +175,23 @@ export function TaskTimeline({ events, agentContext }: TaskTimelineProps) {
             <pre>{JSON.stringify(event.payload.result, null, 2)}</pre>
           </div>
         );
-      case 'error':
+      case 'error': {
+        const errorMessage = event.payload.error || event.payload.message;
+        const actionHint = event.payload.actionHint;
         return (
           <div className="event-details error">
-            {event.payload.error || event.payload.message}
+            <div>{errorMessage}</div>
+            {actionHint?.type === 'open_settings' && (
+              <button
+                className="button-primary button-small"
+                onClick={() => window.dispatchEvent(new CustomEvent('open-settings'))}
+              >
+                {actionHint.label || 'Open Settings'}
+              </button>
+            )}
           </div>
         );
+      }
       case 'task_cancelled':
         return (
           <div className="event-details cancelled">
@@ -200,7 +230,9 @@ export function TaskTimeline({ events, agentContext }: TaskTimelineProps) {
         {/* Show summary of blocked events if any - collapsed for cleaner UI */}
         {blockedEvents.length > 0 && (
           <div className="timeline-event timeline-event-muted">
-            <div className="event-icon">🛡️</div>
+            <div className="event-icon">
+              <ThemeIcon emoji="🛡️" icon={<ShieldIcon size={16} />} />
+            </div>
             <div className="event-content">
               <div className="event-header">
                 <div className="event-title">

package/src/renderer/components/TeamsSettings.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { ChannelData, ChannelUserData, SecurityMode, ContextType, ContextPolicy } from '../../shared/types';
 import { PairingCodeDisplay } from './PairingCodeDisplay';
 import { ContextPolicySettings } from './ContextPolicySettings';
@@ -32,11 +32,7 @@ export function TeamsSettings({ onStatusChange }: TeamsSettingsProps) {
   const [contextPolicies, setContextPolicies] = useState<Record<ContextType, ContextPolicy>>({} as Record<ContextType, ContextPolicy>);
   const [savingPolicy, setSavingPolicy] = useState(false);
 
-  useEffect(() => {
-    loadChannel();
-  }, []);
-
-  const loadChannel = async () => {
+  const loadChannel = useCallback(async () => {
     try {
       setLoading(true);
       const channels = await window.electronAPI.getGatewayChannels();
@@ -65,7 +61,22 @@ export function TeamsSettings({ onStatusChange }: TeamsSettingsProps) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [onStatusChange]);
+
+  useEffect(() => {
+    loadChannel();
+  }, [loadChannel]);
+
+  useEffect(() => {
+    const unsubscribe = window.electronAPI?.onGatewayUsersUpdated?.((data) => {
+      if (data?.channelType !== 'teams') return;
+      if (channel && data?.channelId && data.channelId !== channel.id) return;
+      loadChannel();
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [channel?.id, loadChannel]);
 
   const handleAddChannel = async () => {
     if (!appId.trim() || !appPassword.trim()) return;

package/src/renderer/components/TelegramSettings.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { ChannelData, ChannelUserData, SecurityMode, ContextType, ContextPolicy } from '../../shared/types';
 import { PairingCodeDisplay } from './PairingCodeDisplay';
 import { ContextPolicySettings } from './ContextPolicySettings';
@@ -29,11 +29,7 @@ export function TelegramSettings({ onStatusChange }: TelegramSettingsProps) {
   const [contextPolicies, setContextPolicies] = useState<Record<ContextType, ContextPolicy>>({} as Record<ContextType, ContextPolicy>);
   const [savingPolicy, setSavingPolicy] = useState(false);
 
-  useEffect(() => {
-    loadChannel();
-  }, []);
-
-  const loadChannel = async () => {
+  const loadChannel = useCallback(async () => {
     try {
       setLoading(true);
       const channels = await window.electronAPI.getGatewayChannels();
@@ -62,7 +58,22 @@ export function TelegramSettings({ onStatusChange }: TelegramSettingsProps) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [onStatusChange]);
+
+  useEffect(() => {
+    loadChannel();
+  }, [loadChannel]);
+
+  useEffect(() => {
+    const unsubscribe = window.electronAPI?.onGatewayUsersUpdated?.((data) => {
+      if (data?.channelType !== 'telegram') return;
+      if (channel && data?.channelId && data.channelId !== channel.id) return;
+      loadChannel();
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [channel?.id, loadChannel]);
 
   const handleAddChannel = async () => {
     if (!botToken.trim()) return;

package/src/renderer/components/ThemeIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface ThemeIconProps {
+  emoji: string;
+  icon: React.ReactNode;
+  className?: string;
+}
+
+export function ThemeIcon({ emoji, icon, className }: ThemeIconProps) {
+  return (
+    <span className={className} aria-hidden="true">
+      <span className="terminal-only">{emoji}</span>
+      <span className="modern-only">{icon}</span>
+    </span>
+  );
+}

package/src/renderer/components/TwitchSettings.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { ChannelData, ChannelUserData, SecurityMode, ContextType, ContextPolicy } from '../../shared/types';
 import { PairingCodeDisplay } from './PairingCodeDisplay';
 import { ContextPolicySettings } from './ContextPolicySettings';
@@ -32,11 +32,7 @@ export function TwitchSettings({ onStatusChange }: TwitchSettingsProps) {
   const [contextPolicies, setContextPolicies] = useState<Record<ContextType, ContextPolicy>>({} as Record<ContextType, ContextPolicy>);
   const [savingPolicy, setSavingPolicy] = useState(false);
 
-  useEffect(() => {
-    loadChannel();
-  }, []);
-
-  const loadChannel = async () => {
+  const loadChannel = useCallback(async () => {
     try {
       setLoading(true);
       const channels = await window.electronAPI.getGatewayChannels();
@@ -74,7 +70,22 @@ export function TwitchSettings({ onStatusChange }: TwitchSettingsProps) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [onStatusChange]);
+
+  useEffect(() => {
+    loadChannel();
+  }, [loadChannel]);
+
+  useEffect(() => {
+    const unsubscribe = window.electronAPI?.onGatewayUsersUpdated?.((data) => {
+      if (data?.channelType !== 'twitch') return;
+      if (channel && data?.channelId && data.channelId !== channel.id) return;
+      loadChannel();
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [channel?.id, loadChannel]);
 
   const handleAddChannel = async () => {
     if (!username.trim() || !oauthToken.trim() || !twitchChannels.trim()) {

package/src/renderer/components/VoiceSettings.tsx

@@ -391,63 +391,38 @@ export function VoiceSettings({ onStateChange }: VoiceSettingsProps) {
       <div className="settings-section">
         <h4>Text-to-Speech Provider</h4>
         <p className="settings-description">Choose the voice synthesis provider.</p>
-        <div className="provider-options">
+        <div className="llm-provider-tabs">
           <button
-            className={`provider-option ${settings.ttsProvider === 'elevenlabs' ? 'selected' : ''} ${settings.elevenLabsApiKey ? 'configured' : ''}`}
+            className={`llm-provider-tab ${settings.ttsProvider === 'elevenlabs' ? 'active' : ''}`}
             onClick={() => handleTTSProviderChange('elevenlabs')}
             disabled={saving}
           >
-            <div className="provider-option-header">
-              <span className="provider-name">ElevenLabs</span>
-              {settings.elevenLabsApiKey && (
-                <svg className="provider-configured-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              )}
-            </div>
-            <span className="provider-badge">Premium</span>
+            <span className="llm-provider-tab-label">ElevenLabs</span>
+            {settings.elevenLabsApiKey && <span className="llm-provider-tab-status" />}
           </button>
           <button
-            className={`provider-option ${settings.ttsProvider === 'openai' ? 'selected' : ''} ${settings.openaiApiKey ? 'configured' : ''}`}
+            className={`llm-provider-tab ${settings.ttsProvider === 'openai' ? 'active' : ''}`}
             onClick={() => handleTTSProviderChange('openai')}
             disabled={saving}
           >
-            <div className="provider-option-header">
-              <span className="provider-name">OpenAI</span>
-              {settings.openaiApiKey && (
-                <svg className="provider-configured-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              )}
-            </div>
+            <span className="llm-provider-tab-label">OpenAI</span>
+            {settings.openaiApiKey && <span className="llm-provider-tab-status" />}
           </button>
           <button
-            className={`provider-option ${settings.ttsProvider === 'azure' ? 'selected' : ''} ${settings.azureApiKey && settings.azureEndpoint ? 'configured' : ''}`}
+            className={`llm-provider-tab ${settings.ttsProvider === 'azure' ? 'active' : ''}`}
             onClick={() => handleTTSProviderChange('azure')}
             disabled={saving}
           >
-            <div className="provider-option-header">
-              <span className="provider-name">Azure OpenAI</span>
-              {settings.azureApiKey && settings.azureEndpoint && (
-                <svg className="provider-configured-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              )}
-            </div>
-            <span className="provider-badge">Enterprise</span>
+            <span className="llm-provider-tab-label">Azure OpenAI</span>
+            {settings.azureApiKey && settings.azureEndpoint && <span className="llm-provider-tab-status" />}
           </button>
           <button
-            className={`provider-option ${settings.ttsProvider === 'local' ? 'selected' : ''} configured`}
+            className={`llm-provider-tab ${settings.ttsProvider === 'local' ? 'active' : ''}`}
             onClick={() => handleTTSProviderChange('local')}
             disabled={saving}
           >
-            <div className="provider-option-header">
-              <span className="provider-name">System</span>
-              <svg className="provider-configured-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-            </div>
-            <span className="provider-badge">Free</span>
+            <span className="llm-provider-tab-label">System</span>
+            <span className="llm-provider-tab-status" />
           </button>
         </div>
       </div>
@@ -698,49 +673,30 @@ export function VoiceSettings({ onStateChange }: VoiceSettingsProps) {
       <div className="settings-section">
         <h4>Speech-to-Text Provider</h4>
         <p className="settings-description">Choose the speech recognition provider.</p>
-        <div className="provider-options">
+        <div className="llm-provider-tabs">
           <button
-            className={`provider-option ${settings.sttProvider === 'openai' ? 'selected' : ''} ${settings.openaiApiKey ? 'configured' : ''}`}
+            className={`llm-provider-tab ${settings.sttProvider === 'openai' ? 'active' : ''}`}
             onClick={() => handleSTTProviderChange('openai')}
             disabled={saving}
           >
-            <div className="provider-option-header">
-              <span className="provider-name">OpenAI Whisper</span>
-              {settings.openaiApiKey && (
-                <svg className="provider-configured-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              )}
-            </div>
-            <span className="provider-badge">Recommended</span>
+            <span className="llm-provider-tab-label">OpenAI Whisper</span>
+            {settings.openaiApiKey && <span className="llm-provider-tab-status" />}
           </button>
           <button
-            className={`provider-option ${settings.sttProvider === 'azure' ? 'selected' : ''} ${settings.azureApiKey && settings.azureEndpoint ? 'configured' : ''}`}
+            className={`llm-provider-tab ${settings.sttProvider === 'azure' ? 'active' : ''}`}
             onClick={() => handleSTTProviderChange('azure')}
             disabled={saving}
           >
-            <div className="provider-option-header">
-              <span className="provider-name">Azure Whisper</span>
-              {settings.azureApiKey && settings.azureEndpoint && (
-                <svg className="provider-configured-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              )}
-            </div>
-            <span className="provider-badge">Enterprise</span>
+            <span className="llm-provider-tab-label">Azure Whisper</span>
+            {settings.azureApiKey && settings.azureEndpoint && <span className="llm-provider-tab-status" />}
           </button>
           <button
-            className={`provider-option ${settings.sttProvider === 'local' ? 'selected' : ''} configured`}
+            className={`llm-provider-tab ${settings.sttProvider === 'local' ? 'active' : ''}`}
             onClick={() => handleSTTProviderChange('local')}
             disabled={saving}
           >
-            <div className="provider-option-header">
-              <span className="provider-name">System</span>
-              <svg className="provider-configured-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                <path d="M20 6L9 17l-5-5" />
-              </svg>
-            </div>
-            <span className="provider-badge">Free</span>
+            <span className="llm-provider-tab-label">System</span>
+            <span className="llm-provider-tab-status" />
           </button>
         </div>
       </div>
@@ -748,27 +704,27 @@ export function VoiceSettings({ onStateChange }: VoiceSettingsProps) {
       {/* Voice Input Mode */}
       <div className="settings-section">
         <h4>Voice Input Mode</h4>
-        <div className="provider-options">
+        <div className="llm-provider-tabs">
           <button
-            className={`provider-option ${settings.inputMode === 'push_to_talk' ? 'selected' : ''}`}
+            className={`llm-provider-tab ${settings.inputMode === 'push_to_talk' ? 'active' : ''}`}
             onClick={() => handleInputModeChange('push_to_talk')}
             disabled={saving}
           >
-            <span className="provider-name">Push to Talk</span>
+            <span className="llm-provider-tab-label">Push to Talk</span>
           </button>
           <button
-            className={`provider-option ${settings.inputMode === 'voice_activity' ? 'selected' : ''}`}
+            className={`llm-provider-tab ${settings.inputMode === 'voice_activity' ? 'active' : ''}`}
             onClick={() => handleInputModeChange('voice_activity')}
             disabled={saving}
           >
-            <span className="provider-name">Voice Activity</span>
+            <span className="llm-provider-tab-label">Voice Activity</span>
           </button>
           <button
-            className={`provider-option ${settings.inputMode === 'disabled' ? 'selected' : ''}`}
+            className={`llm-provider-tab ${settings.inputMode === 'disabled' ? 'active' : ''}`}
             onClick={() => handleInputModeChange('disabled')}
             disabled={saving}
           >
-            <span className="provider-name">Disabled</span>
+            <span className="llm-provider-tab-label">Disabled</span>
           </button>
         </div>
         <p className="settings-hint">

package/src/renderer/components/WhatsAppSettings.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { ChannelData, ChannelUserData, SecurityMode } from '../../shared/types';
 import QRCode from 'qrcode';
 
@@ -29,6 +29,41 @@ export function WhatsAppSettings({ onStatusChange }: WhatsAppSettingsProps) {
   // Pairing code state
   const [pairingCode, setPairingCode] = useState<string | null>(null);
 
+  const loadChannel = useCallback(async () => {
+    try {
+      setLoading(true);
+      const channels = await window.electronAPI.getGatewayChannels();
+      const whatsappChannel = channels.find((c: ChannelData) => c.type === 'whatsapp');
+
+      if (whatsappChannel) {
+        setChannel(whatsappChannel);
+        setChannelName(whatsappChannel.name);
+        setSecurityMode(whatsappChannel.securityMode);
+        onStatusChange?.(whatsappChannel.status === 'connected');
+
+        // Load self-chat mode settings from config
+        if (whatsappChannel.config) {
+          setSelfChatMode(whatsappChannel.config.selfChatMode ?? true);
+          setResponsePrefix(whatsappChannel.config.responsePrefix ?? '🤖');
+        }
+
+        // Load users for this channel
+        const channelUsers = await window.electronAPI.getGatewayUsers(whatsappChannel.id);
+        setUsers(channelUsers);
+
+        // Check for QR code
+        const info = await window.electronAPI.getWhatsAppInfo?.();
+        if (info?.qrCode) {
+          setQrCode(info.qrCode);
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load WhatsApp channel:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [onStatusChange]);
+
   useEffect(() => {
     loadChannel();
 
@@ -50,7 +85,18 @@ export function WhatsAppSettings({ onStatusChange }: WhatsAppSettingsProps) {
     return () => {
       // Cleanup listeners if needed
     };
-  }, []);
+  }, [loadChannel]);
+
+  useEffect(() => {
+    const unsubscribe = window.electronAPI?.onGatewayUsersUpdated?.((data) => {
+      if (data?.channelType !== 'whatsapp') return;
+      if (channel && data?.channelId && data.channelId !== channel.id) return;
+      loadChannel();
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [channel?.id, loadChannel]);
 
   // Render QR code when it changes
   useEffect(() => {
@@ -75,41 +121,6 @@ export function WhatsAppSettings({ onStatusChange }: WhatsAppSettingsProps) {
     }
   };
 
-  const loadChannel = async () => {
-    try {
-      setLoading(true);
-      const channels = await window.electronAPI.getGatewayChannels();
-      const whatsappChannel = channels.find((c: ChannelData) => c.type === 'whatsapp');
-
-      if (whatsappChannel) {
-        setChannel(whatsappChannel);
-        setChannelName(whatsappChannel.name);
-        setSecurityMode(whatsappChannel.securityMode);
-        onStatusChange?.(whatsappChannel.status === 'connected');
-
-        // Load self-chat mode settings from config
-        if (whatsappChannel.config) {
-          setSelfChatMode(whatsappChannel.config.selfChatMode ?? true);
-          setResponsePrefix(whatsappChannel.config.responsePrefix ?? '🤖');
-        }
-
-        // Load users for this channel
-        const channelUsers = await window.electronAPI.getGatewayUsers(whatsappChannel.id);
-        setUsers(channelUsers);
-
-        // Check for QR code
-        const info = await window.electronAPI.getWhatsAppInfo?.();
-        if (info?.qrCode) {
-          setQrCode(info.qrCode);
-        }
-      }
-    } catch (error) {
-      console.error('Failed to load WhatsApp channel:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
   const handleAddChannel = async () => {
     try {
       setSaving(true);

package/src/renderer/components/WorkingStateHistory.tsx

@@ -4,6 +4,8 @@ import {
   WorkingStateType,
 } from '../../electron/preload';
 import { useAgentContext } from '../hooks/useAgentContext';
+import { ThemeIcon } from './ThemeIcon';
+import { ChartIcon, ClipboardIcon, EditIcon, TargetIcon } from './LineIcons';
 
 interface WorkingStateHistoryProps {
   agentRoleId: string;
@@ -12,11 +14,11 @@ interface WorkingStateHistoryProps {
   onClose: () => void;
 }
 
-const STATE_TYPE_LABELS: Record<WorkingStateType, { label: string; icon: string }> = {
-  context: { label: 'Context', icon: '📋' },
-  progress: { label: 'Progress', icon: '📊' },
-  notes: { label: 'Notes', icon: '📝' },
-  plan: { label: 'Plan', icon: '🎯' },
+const STATE_TYPE_LABELS: Record<WorkingStateType, { label: string; icon: React.ReactNode }> = {
+  context: { label: 'Context', icon: <ThemeIcon emoji="📋" icon={<ClipboardIcon size={14} />} /> },
+  progress: { label: 'Progress', icon: <ThemeIcon emoji="📊" icon={<ChartIcon size={14} />} /> },
+  notes: { label: 'Notes', icon: <ThemeIcon emoji="📝" icon={<EditIcon size={14} />} /> },
+  plan: { label: 'Plan', icon: <ThemeIcon emoji="🎯" icon={<TargetIcon size={14} />} /> },
 };
 
 function formatDate(timestamp: number): string {