cowork-os 0.3.21 → 0.3.25

package/src/renderer/components/Onboarding/Onboarding.tsx

@@ -20,6 +20,9 @@ const PROVIDERS: {
   { id: 'gemini', name: 'Gemini', requiresKey: true },
   { id: 'ollama', name: 'Ollama', requiresKey: false },
   { id: 'openrouter', name: 'OpenRouter', requiresKey: true },
+  { id: 'groq', name: 'Groq', requiresKey: true },
+  { id: 'xai', name: 'Grok', requiresKey: true },
+  { id: 'kimi', name: 'Kimi', requiresKey: true },
   { id: 'bedrock', name: 'AWS Bedrock', requiresKey: false },
 ];
 
@@ -29,6 +32,9 @@ const PROVIDER_URLS: Record<string, string> = {
   openai: 'https://platform.openai.com/api-keys',
   gemini: 'https://aistudio.google.com/app/apikey',
   openrouter: 'https://openrouter.ai/keys',
+  groq: 'https://console.groq.com/keys',
+  xai: 'https://console.x.ai/',
+  kimi: 'https://platform.moonshot.ai/',
 };
 
 export function Onboarding({ onComplete }: OnboardingProps) {
@@ -252,7 +258,13 @@ export function Onboarding({ onComplete }: OnboardingProps) {
                   ? 'OpenAI'
                   : provider === 'gemini'
                     ? 'Google AI Studio'
-                    : 'OpenRouter'}
+                    : provider === 'openrouter'
+                      ? 'OpenRouter'
+                      : provider === 'groq'
+                        ? 'Groq Console'
+                        : provider === 'xai'
+                          ? 'xAI Console'
+                          : 'Moonshot Platform'}
             </a>
           </p>
         )}

package/src/renderer/components/OnboardingModal.tsx

@@ -12,7 +12,16 @@ interface OnboardingModalProps {
 type OnboardingStep = 'welcome' | 'llm' | 'channels';
 
 // LLM Provider types for the simplified setup
-type LLMProviderType = 'anthropic' | 'openai' | 'gemini' | 'ollama' | 'openrouter' | 'bedrock';
+type LLMProviderType =
+  | 'anthropic'
+  | 'openai'
+  | 'gemini'
+  | 'ollama'
+  | 'openrouter'
+  | 'bedrock'
+  | 'groq'
+  | 'xai'
+  | 'kimi';
 
 interface ProviderOption {
   type: LLMProviderType;
@@ -105,6 +114,48 @@ const PROVIDER_OPTIONS: ProviderOption[] = [
     apiKeyPlaceholder: 'sk-or-...',
     apiKeyLink: 'https://openrouter.ai/keys',
   },
+  {
+    type: 'groq',
+    name: 'Groq',
+    description: 'Fast, low-latency models',
+    icon: (
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M4 12h16" />
+        <path d="M12 4v16" />
+        <circle cx="12" cy="12" r="9" />
+      </svg>
+    ),
+    requiresApiKey: true,
+    apiKeyPlaceholder: 'gsk_...',
+    apiKeyLink: 'https://console.groq.com/keys',
+  },
+  {
+    type: 'xai',
+    name: 'xAI (Grok)',
+    description: 'Grok models from xAI',
+    icon: (
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M4 4l16 16" />
+        <path d="M20 4L4 20" />
+      </svg>
+    ),
+    requiresApiKey: true,
+    apiKeyPlaceholder: 'xai-...',
+    apiKeyLink: 'https://console.x.ai/',
+  },
+  {
+    type: 'kimi',
+    name: 'Kimi',
+    description: 'Kimi models via Moonshot',
+    icon: (
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z" />
+      </svg>
+    ),
+    requiresApiKey: true,
+    apiKeyPlaceholder: 'sk-...',
+    apiKeyLink: 'https://platform.moonshot.ai/',
+  },
   {
     type: 'bedrock',
     name: 'AWS Bedrock',
@@ -263,6 +314,12 @@ export function OnboardingModal({
         testConfig.openrouter = { apiKey };
       } else if (selectedProvider === 'ollama') {
         testConfig.ollama = { baseUrl: ollamaUrl };
+      } else if (selectedProvider === 'groq') {
+        testConfig.groq = { apiKey };
+      } else if (selectedProvider === 'xai') {
+        testConfig.xai = { apiKey };
+      } else if (selectedProvider === 'kimi') {
+        testConfig.kimi = { apiKey };
       }
 
       const result = await window.electronAPI.testLLMProvider(testConfig);
@@ -295,6 +352,12 @@ export function OnboardingModal({
           settings.ollama = { baseUrl: ollamaUrl, model: 'llama3.2' };
         } else if (selectedProvider === 'bedrock') {
           settings.bedrock = { region: 'us-east-1', useDefaultCredentials: true };
+        } else if (selectedProvider === 'groq') {
+          settings.groq = { apiKey, model: 'llama-3.1-8b-instant' };
+        } else if (selectedProvider === 'xai') {
+          settings.xai = { apiKey, model: 'grok-4-fast-non-reasoning' };
+        } else if (selectedProvider === 'kimi') {
+          settings.kimi = { apiKey, model: 'kimi-k2.5' };
         }
 
         await window.electronAPI.saveLLMSettings(settings);
@@ -339,6 +402,12 @@ export function OnboardingModal({
         return 'anthropic/claude-3.5-sonnet';
       case 'bedrock':
         return 'sonnet-4-5';
+      case 'groq':
+        return 'llama-3.1-8b-instant';
+      case 'xai':
+        return 'grok-4-fast-non-reasoning';
+      case 'kimi':
+        return 'kimi-k2.5';
       default:
         return 'sonnet-4';
     }

package/src/renderer/components/OneDriveSettings.tsx

@@ -0,0 +1,212 @@
+import { useEffect, useState } from 'react';
+import { OneDriveSettingsData } from '../../shared/types';
+
+export function OneDriveSettings() {
+  const [settings, setSettings] = useState<OneDriveSettingsData | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<{ success: boolean; error?: string; name?: string; userId?: string; driveId?: string } | null>(null);
+  const [status, setStatus] = useState<{ configured: boolean; connected: boolean; name?: string; error?: string } | null>(null);
+  const [statusLoading, setStatusLoading] = useState(false);
+
+  useEffect(() => {
+    loadSettings();
+    refreshStatus();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      const loaded = await window.electronAPI.getOneDriveSettings();
+      setSettings(loaded);
+    } catch (error) {
+      console.error('Failed to load OneDrive settings:', error);
+    }
+  };
+
+  const updateSettings = (updates: Partial<OneDriveSettingsData>) => {
+    if (!settings) return;
+    setSettings({ ...settings, ...updates });
+  };
+
+  const handleSave = async () => {
+    if (!settings) return;
+    setSaving(true);
+    setTestResult(null);
+    try {
+      const payload: OneDriveSettingsData = { ...settings };
+      await window.electronAPI.saveOneDriveSettings(payload);
+      setSettings(payload);
+      await refreshStatus();
+    } catch (error) {
+      console.error('Failed to save OneDrive settings:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const refreshStatus = async () => {
+    try {
+      setStatusLoading(true);
+      const result = await window.electronAPI.getOneDriveStatus();
+      setStatus(result);
+    } catch (error) {
+      console.error('Failed to load OneDrive status:', error);
+    } finally {
+      setStatusLoading(false);
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await window.electronAPI.testOneDriveConnection();
+      setTestResult(result);
+      await refreshStatus();
+    } catch (error: any) {
+      setTestResult({ success: false, error: error.message || 'Failed to test connection' });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  if (!settings) {
+    return <div className="settings-loading">Loading OneDrive settings...</div>;
+  }
+
+  const statusLabel = !status?.configured
+    ? 'Missing Token'
+    : status.connected
+      ? 'Connected'
+      : 'Configured';
+
+  const statusClass = !status?.configured
+    ? 'missing'
+    : status.connected
+      ? 'connected'
+      : 'configured';
+
+  return (
+    <div className="onedrive-settings">
+      <div className="settings-section">
+        <div className="settings-section-header">
+          <div className="settings-title-with-badge">
+            <h3>Connect OneDrive</h3>
+            {status && (
+              <span
+                className={`onedrive-status-badge ${statusClass}`}
+                title={!status.configured ? 'Access token not configured' : status.connected ? 'Connected to OneDrive' : 'Configured'}
+              >
+                {statusLabel}
+              </span>
+            )}
+            {statusLoading && !status && (
+              <span className="onedrive-status-badge configured">Checking…</span>
+            )}
+          </div>
+          <button className="btn-secondary btn-sm" onClick={refreshStatus} disabled={statusLoading}>
+            {statusLoading ? 'Checking...' : 'Refresh Status'}
+          </button>
+        </div>
+        <p className="settings-description">
+          Connect the agent to OneDrive using a Microsoft Graph access token, then use the built-in `onedrive_action`
+          tool to search and manage files.
+        </p>
+        {status?.error && (
+          <p className="settings-hint">Status check: {status.error}</p>
+        )}
+        <div className="settings-actions">
+          <button
+            className="btn-secondary btn-sm"
+            onClick={() => window.electronAPI.openExternal('https://portal.azure.com')}
+          >
+            Open Azure Portal
+          </button>
+        </div>
+      </div>
+
+      <div className="settings-section">
+        <div className="settings-field">
+          <label>Enable Integration</label>
+          <label className="settings-toggle">
+            <input
+              type="checkbox"
+              checked={settings.enabled}
+              onChange={(e) => updateSettings({ enabled: e.target.checked })}
+            />
+            <span className="toggle-slider" />
+          </label>
+        </div>
+
+        <div className="settings-field">
+          <label>Access Token</label>
+          <input
+            type="password"
+            className="settings-input"
+            placeholder="Microsoft Graph access token"
+            value={settings.accessToken || ''}
+            onChange={(e) => updateSettings({ accessToken: e.target.value || undefined })}
+          />
+          <p className="settings-hint">Use an access token with Files.ReadWrite or Files.Read scope.</p>
+        </div>
+
+        <div className="settings-field">
+          <label>Drive ID (optional)</label>
+          <input
+            type="text"
+            className="settings-input"
+            placeholder="Default: /me/drive"
+            value={settings.driveId || ''}
+            onChange={(e) => updateSettings({ driveId: e.target.value || undefined })}
+          />
+          <p className="settings-hint">Leave blank to use your default drive.</p>
+        </div>
+
+        <div className="settings-field">
+          <label>Timeout (ms)</label>
+          <input
+            type="number"
+            className="settings-input"
+            min={1000}
+            max={120000}
+            value={settings.timeoutMs ?? 20000}
+            onChange={(e) => updateSettings({ timeoutMs: Number(e.target.value) })}
+          />
+        </div>
+
+        <div className="settings-actions">
+          <button className="btn-secondary btn-sm" onClick={handleTestConnection} disabled={testing}>
+            {testing ? 'Testing...' : 'Test Connection'}
+          </button>
+          <button className="btn-primary btn-sm" onClick={handleSave} disabled={saving}>
+            {saving ? 'Saving...' : 'Save Settings'}
+          </button>
+        </div>
+
+        {testResult && (
+          <div className={`test-result ${testResult.success ? 'success' : 'error'}`}>
+            {testResult.success ? (
+              <span>Connected{testResult.name ? ` as ${testResult.name}` : ''}</span>
+            ) : (
+              <span>Connection failed: {testResult.error}</span>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="settings-section">
+        <h4>Quick Usage</h4>
+        <pre className="settings-info-box">{`// List root items
+onedrive_action({
+  action: "list_children"
+});
+
+// Upload a file to root
+onedrive_action({
+  action: "upload_file",
+  file_path: "reports/summary.pdf"
+});`}</pre>
+      </div>
+    </div>
+  );
+}

package/src/renderer/components/RightPanel.tsx

@@ -207,13 +207,54 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
     return Array.from(files).slice(0, 10); // Limit to 10 most recent
   }, [events]);
 
-  // Get status indicator for CLI style
+  // Get status indicator (terminal vs modern)
   const getStatusIndicator = (status: string) => {
     switch (status) {
-      case 'completed': return '[✓]';
-      case 'in_progress': return '[~]';
-      case 'failed': return '[✗]';
-      default: return '[ ]';
+      case 'completed':
+        return (
+          <>
+            <span className="terminal-only">[✓]</span>
+            <span className="modern-only">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </span>
+          </>
+        );
+      case 'in_progress':
+        return (
+          <>
+            <span className="terminal-only">[~]</span>
+            <span className="modern-only">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="10" />
+              </svg>
+            </span>
+          </>
+        );
+      case 'failed':
+        return (
+          <>
+            <span className="terminal-only">[✗]</span>
+            <span className="modern-only">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </span>
+          </>
+        );
+      default:
+        return (
+          <>
+            <span className="terminal-only">[ ]</span>
+            <span className="modern-only">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="10" opacity="0.3" />
+              </svg>
+            </span>
+          </>
+        );
     }
   };
 
@@ -232,8 +273,14 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
       <div className="right-panel-section cli-section">
         <div className="cli-section-header" onClick={() => toggleSection('progress')}>
           <span className="cli-section-prompt">&gt;</span>
-          <span className="cli-section-title">{agentContext.getUiCopy('rightProgressTitle')}</span>
-          <span className="cli-section-toggle">{expandedSections.progress ? '[-]' : '[+]'}</span>
+          <span className="cli-section-title">
+            <span className="terminal-only">{agentContext.getUiCopy('rightProgressTitle')}</span>
+            <span className="modern-only">Progress</span>
+          </span>
+          <span className="cli-section-toggle">
+            <span className="terminal-only">{expandedSections.progress ? '[-]' : '[+]'}</span>
+            <span className="modern-only">{expandedSections.progress ? '−' : '+'}</span>
+          </span>
         </div>
         {expandedSections.progress && (
           <div className="cli-section-content">
@@ -256,7 +303,10 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
                   │   {task?.status === 'executing' ? '◉ WORKING...' : task?.status === 'paused' ? '⏸ PAUSED' : task?.status === 'blocked' ? '! BLOCKED' : task?.status === 'completed' ? '✓ ALL DONE' : '○ READY'}{'     '}│
                   └─────────────────────┘
                 </div>
-                <p className="cli-hint">{agentContext.getUiCopy('rightProgressEmptyHint')}</p>
+                <p className="cli-hint">
+                  <span className="terminal-only">{agentContext.getUiCopy('rightProgressEmptyHint')}</span>
+                  <span className="modern-only">Standing by when you are ready.</span>
+                </p>
               </div>
             )}
           </div>
@@ -268,18 +318,32 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
         <div className="right-panel-section cli-section">
           <div className="cli-section-header" onClick={() => toggleSection('queue')}>
             <span className="cli-section-prompt">&gt;</span>
-            <span className="cli-section-title">{agentContext.getUiCopy('rightQueueTitle')}</span>
+            <span className="cli-section-title">
+              <span className="terminal-only">{agentContext.getUiCopy('rightQueueTitle')}</span>
+              <span className="modern-only">Queue</span>
+            </span>
             <span className="cli-queue-badge">{queueStatus?.runningCount}/{queueStatus?.maxConcurrent}{queueStatus && queueStatus.queuedCount > 0 && ` +${queueStatus.queuedCount}`}</span>
-            <span className="cli-section-toggle">{expandedSections.queue ? '[-]' : '[+]'}</span>
+            <span className="cli-section-toggle">
+              <span className="terminal-only">{expandedSections.queue ? '[-]' : '[+]'}</span>
+              <span className="modern-only">{expandedSections.queue ? '−' : '+'}</span>
+            </span>
           </div>
           {expandedSections.queue && (
             <div className="cli-section-content">
               {runningTasks.length > 0 && (
                 <div className="cli-queue-group">
-                  <div className="cli-context-label">{agentContext.getUiCopy('rightQueueActiveLabel')}</div>
+                  <div className="cli-context-label">
+                    <span className="terminal-only">{agentContext.getUiCopy('rightQueueActiveLabel')}</span>
+                    <span className="modern-only">Active</span>
+                  </div>
                   {runningTasks.map(t => (
                     <div key={t.id} className="cli-queue-item running">
-                      <span className="cli-queue-status">[~]</span>
+                      <span className="cli-queue-status">
+                        <span className="terminal-only">[~]</span>
+                        <span className="modern-only">
+                          <span className="queue-status-dot running" />
+                        </span>
+                      </span>
                       <span className="cli-queue-title" onClick={() => onSelectTask?.(t.id)}>
                         {(t.title || t.prompt).slice(0, 25)}{(t.title || t.prompt).length > 25 ? '...' : ''}
                       </span>
@@ -290,10 +354,18 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
               )}
               {queuedTasks.length > 0 && (
                 <div className="cli-queue-group">
-                  <div className="cli-context-label">{agentContext.getUiCopy('rightQueueNextLabel')}</div>
+                  <div className="cli-context-label">
+                    <span className="terminal-only">{agentContext.getUiCopy('rightQueueNextLabel')}</span>
+                    <span className="modern-only">Up next</span>
+                  </div>
                   {queuedTasks.map((t, i) => (
                     <div key={t.id} className="cli-queue-item queued">
-                      <span className="cli-queue-status">[{i + 1}]</span>
+                      <span className="cli-queue-status">
+                        <span className="terminal-only">[{i + 1}]</span>
+                        <span className="modern-only">
+                          <span className="queue-status-pill">{i + 1}</span>
+                        </span>
+                      </span>
                       <span className="cli-queue-title" onClick={() => onSelectTask?.(t.id)}>
                         {(t.title || t.prompt).slice(0, 25)}{(t.title || t.prompt).length > 25 ? '...' : ''}
                       </span>
@@ -311,8 +383,14 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
       <div className="right-panel-section cli-section">
         <div className="cli-section-header" onClick={() => toggleSection('folder')}>
           <span className="cli-section-prompt">&gt;</span>
-          <span className="cli-section-title">{agentContext.getUiCopy('rightFilesTitle')}</span>
-          <span className="cli-section-toggle">{expandedSections.folder ? '[-]' : '[+]'}</span>
+          <span className="cli-section-title">
+            <span className="terminal-only">{agentContext.getUiCopy('rightFilesTitle')}</span>
+            <span className="modern-only">Files</span>
+          </span>
+          <span className="cli-section-toggle">
+            <span className="terminal-only">{expandedSections.folder ? '[-]' : '[+]'}</span>
+            <span className="modern-only">{expandedSections.folder ? '−' : '+'}</span>
+          </span>
         </div>
         {expandedSections.folder && (
           <div className="cli-section-content">
@@ -320,7 +398,12 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
               <div className="cli-file-list">
                 {files.map((file, index) => (
                   <div key={`${file.path}-${index}`} className={`cli-file-item ${file.action}`}>
-                    <span className={`cli-file-action ${file.action}`}>{getFileActionSymbol(file.action)}</span>
+                    <span className={`cli-file-action ${file.action}`}>
+                      <span className="terminal-only">{getFileActionSymbol(file.action)}</span>
+                      <span className="modern-only">
+                        <span className="file-action-dot" />
+                      </span>
+                    </span>
                     <ClickableFilePath path={file.path} workspacePath={workspace?.path} className="cli-file-name" onOpenViewer={setViewerFilePath} />
                   </div>
                 ))}
@@ -331,12 +414,18 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
 {`├── (empty)
 └── ...`}
                 </pre>
-                <p className="cli-hint">{agentContext.getUiCopy('rightFilesEmptyHint')}</p>
+                <p className="cli-hint">
+                  <span className="terminal-only">{agentContext.getUiCopy('rightFilesEmptyHint')}</span>
+                  <span className="modern-only">No file changes yet.</span>
+                </p>
               </div>
             )}
             {workspace && (
               <div className="cli-workspace-path">
-                <span className="cli-label">PWD:</span>
+                <span className="cli-label">
+                  <span className="terminal-only">PWD:</span>
+                  <span className="modern-only">Workspace</span>
+                </span>
                 <span className="cli-path" title={workspace.path}>{workspace.name}/</span>
               </div>
             )}
@@ -348,8 +437,14 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
       <div className="right-panel-section cli-section">
         <div className="cli-section-header" onClick={() => toggleSection('context')}>
           <span className="cli-section-prompt">&gt;</span>
-          <span className="cli-section-title">{agentContext.getUiCopy('rightContextTitle')}</span>
-          <span className="cli-section-toggle">{expandedSections.context ? '[-]' : '[+]'}</span>
+          <span className="cli-section-title">
+            <span className="terminal-only">{agentContext.getUiCopy('rightContextTitle')}</span>
+            <span className="modern-only">Context</span>
+          </span>
+          <span className="cli-section-toggle">
+            <span className="terminal-only">{expandedSections.context ? '[-]' : '[+]'}</span>
+            <span className="modern-only">{expandedSections.context ? '−' : '+'}</span>
+          </span>
         </div>
         {expandedSections.context && (
           <div className="cli-section-content">
@@ -357,7 +452,10 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
               <div className="cli-context-list">
                 {toolUsage.length > 0 && (
                   <div className="cli-context-group">
-                    <div className="cli-context-label"># tools_used:</div>
+                    <div className="cli-context-label">
+                      <span className="terminal-only"># tools_used:</span>
+                      <span className="modern-only">Tools used</span>
+                    </div>
                     {toolUsage.map((tool, index) => (
                       <div key={`${tool.name}-${index}`} className="cli-context-item">
                         <span className="cli-context-key">{tool.name}</span>
@@ -369,7 +467,10 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
                 )}
                 {referencedFiles.length > 0 && (
                   <div className="cli-context-group">
-                    <div className="cli-context-label"># files_read:</div>
+                    <div className="cli-context-label">
+                      <span className="terminal-only"># files_read:</span>
+                      <span className="modern-only">Files read</span>
+                    </div>
                     {referencedFiles.map((file, index) => (
                       <div key={`${file}-${index}`} className="cli-context-item">
                         <ClickableFilePath path={file} workspacePath={workspace?.path} className="cli-context-file" onOpenViewer={setViewerFilePath} />
@@ -381,10 +482,16 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
             ) : (
               <div className="cli-empty-state">
                 <div className="cli-context-empty">
-                  tools: 0
-                  files: 0
+                  <span className="terminal-only">
+                    tools: 0
+                    files: 0
+                  </span>
+                  <span className="modern-only">Nothing shared yet.</span>
                 </div>
-                <p className="cli-hint">{agentContext.getUiCopy('rightContextEmptyHint')}</p>
+                <p className="cli-hint">
+                  <span className="terminal-only">{agentContext.getUiCopy('rightContextEmptyHint')}</span>
+                  <span className="modern-only">Share tools or files to populate this panel.</span>
+                </p>
               </div>
             )}
           </div>
@@ -396,8 +503,14 @@ export function RightPanel({ task, workspace, events, tasks = [], queueStatus, o
 
       {/* Footer note */}
       <div className="cli-panel-footer">
-        <span className="cli-footer-prompt">$</span>
-        <span className="cli-footer-text">{agentContext.getUiCopy('rightFooterText')}</span>
+        <span className="cli-footer-prompt">
+          <span className="terminal-only">$</span>
+          <span className="modern-only">•</span>
+        </span>
+        <span className="cli-footer-text">
+          <span className="terminal-only">{agentContext.getUiCopy('rightFooterText')}</span>
+          <span className="modern-only">Local work only</span>
+        </span>
       </div>
 
       {/* File Viewer Modal */}