cowork-os 0.3.21 → 0.3.25

package/src/renderer/App.tsx

@@ -5,11 +5,12 @@ import { RightPanel } from './components/RightPanel';
 import { Settings } from './components/Settings';
 import { DisclaimerModal } from './components/DisclaimerModal';
 import { Onboarding } from './components/Onboarding';
+import { BrowserView } from './components/BrowserView';
 // TaskQueuePanel moved to RightPanel
 import { ToastContainer } from './components/Toast';
 import { QuickTaskFAB } from './components/QuickTaskFAB';
 import { NotificationPanel } from './components/NotificationPanel';
-import { Task, Workspace, TaskEvent, LLMModelInfo, LLMProviderInfo, SuccessCriteria, UpdateInfo, ThemeMode, AccentColor, QueueStatus, ToastNotification } from '../shared/types';
+import { Task, Workspace, TaskEvent, LLMModelInfo, LLMProviderInfo, SuccessCriteria, UpdateInfo, ThemeMode, VisualTheme, AccentColor, QueueStatus, ToastNotification, TEMP_WORKSPACE_ID } from '../shared/types';
 
 
 // Helper to get effective theme based on system preference
@@ -20,14 +21,15 @@ function getEffectiveTheme(themeMode: ThemeMode): 'light' | 'dark' {
   return themeMode;
 }
 
-type AppView = 'main' | 'settings';
+type AppView = 'main' | 'settings' | 'browser';
 
 export function App() {
   const [currentWorkspace, setCurrentWorkspace] = useState<Workspace | null>(null);
   const [tasks, setTasks] = useState<Task[]>([]);
   const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
   const [currentView, setCurrentView] = useState<AppView>('main');
-  const [settingsTab, setSettingsTab] = useState<'appearance' | 'llm' | 'search' | 'telegram' | 'slack' | 'whatsapp' | 'teams' | 'morechannels' | 'updates' | 'guardrails' | 'queue' | 'skills' | 'scheduled' | 'voice'>('appearance');
+  const [browserUrl, setBrowserUrl] = useState<string>('');
+  const [settingsTab, setSettingsTab] = useState<'appearance' | 'llm' | 'search' | 'telegram' | 'slack' | 'whatsapp' | 'teams' | 'x' | 'morechannels' | 'integrations' | 'updates' | 'guardrails' | 'queue' | 'skills' | 'scheduled' | 'voice' | 'missioncontrol'>('appearance');
   const [events, setEvents] = useState<TaskEvent[]>([]);
 
   // Model selection state
@@ -41,6 +43,7 @@ export function App() {
 
   // Theme state (loaded from main process on mount)
   const [themeMode, setThemeMode] = useState<ThemeMode>('dark');
+  const [visualTheme, setVisualTheme] = useState<VisualTheme>('terminal');
   const [accentColor, setAccentColor] = useState<AccentColor>('cyan');
 
   // Queue state
@@ -82,6 +85,11 @@ export function App() {
     loadLLMConfig();
   };
 
+  const handleOpenBrowserView = (url?: string) => {
+    setBrowserUrl(url || '');
+    setCurrentView('browser');
+  };
+
   const handleShowOnboarding = () => {
     // Reset onboarding state to show the wizard again
     setOnboardingCompleted(false);
@@ -106,12 +114,22 @@ export function App() {
     loadLLMConfig();
   }, []);
 
+  useEffect(() => {
+    const handler = () => {
+      setSettingsTab('llm');
+      setCurrentView('settings');
+    };
+    window.addEventListener('open-settings', handler as EventListener);
+    return () => window.removeEventListener('open-settings', handler as EventListener);
+  }, []);
+
   // Load appearance settings on mount
   useEffect(() => {
     const loadAppearanceSettings = async () => {
       try {
         const settings = await window.electronAPI.getAppearanceSettings();
         setThemeMode(settings.themeMode);
+        setVisualTheme(settings.visualTheme || 'terminal');
         setAccentColor(settings.accentColor);
         setDisclaimerAccepted(settings.disclaimerAccepted ?? false);
         setOnboardingCompleted(settings.onboardingCompleted ?? false);
@@ -218,17 +236,23 @@ export function App() {
     // Remove existing theme classes
     root.classList.remove('theme-light', 'theme-dark');
 
-    // Apply theme class (only light needs explicit class, dark is default)
+    // Apply theme mode class
     if (effectiveTheme === 'light') {
       root.classList.add('theme-light');
     }
+    // dark is default, no class needed unless specified otherwise by visual styles
+
+    // Remove existing visual theme classes
+    root.classList.remove('visual-terminal', 'visual-warm', 'visual-oblivion');
+    const resolvedVisualTheme = visualTheme === 'warm' ? 'oblivion' : visualTheme;
+    root.classList.add(`visual-${resolvedVisualTheme}`);
 
     // Remove existing accent classes
-    root.classList.remove('accent-cyan', 'accent-blue', 'accent-purple', 'accent-pink', 'accent-rose', 'accent-orange', 'accent-green', 'accent-teal');
+    root.classList.remove('accent-cyan', 'accent-blue', 'accent-purple', 'accent-pink', 'accent-rose', 'accent-orange', 'accent-green', 'accent-teal', 'accent-coral');
 
     // Apply accent class
     root.classList.add(`accent-${accentColor}`);
-  }, [themeMode, accentColor]);
+  }, [themeMode, visualTheme, accentColor]);
 
   // Listen for system theme changes when in 'system' mode
   useEffect(() => {
@@ -277,6 +301,42 @@ export function App() {
     }
   }, [currentWorkspace]);
 
+  // Sync current workspace to the selected task's workspace
+  useEffect(() => {
+    if (!selectedTaskId) return;
+    const task = tasks.find(t => t.id === selectedTaskId);
+    if (!task) return;
+    if (currentWorkspace?.id === task.workspaceId) return;
+
+    let cancelled = false;
+
+    const loadTaskWorkspace = async () => {
+      try {
+        const resolved = task.workspaceId === TEMP_WORKSPACE_ID
+          ? await window.electronAPI.getTempWorkspace()
+          : await window.electronAPI.selectWorkspace(task.workspaceId);
+        if (!cancelled && resolved) {
+          setCurrentWorkspace(resolved);
+        }
+      } catch (error) {
+        console.error('Failed to load task workspace:', error);
+      }
+    };
+
+    void loadTaskWorkspace();
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedTaskId, tasks, currentWorkspace?.id]);
+
+  // Track recency when the active workspace changes
+  useEffect(() => {
+    if (!currentWorkspace || currentWorkspace.id === TEMP_WORKSPACE_ID) return;
+    window.electronAPI.touchWorkspace(currentWorkspace.id).catch((error: unknown) => {
+      console.error('Failed to update workspace recency:', error);
+    });
+  }, [currentWorkspace?.id]);
+
   // Toast helper functions
   const addToast = (toast: Omit<ToastNotification, 'id'>) => {
     const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
@@ -334,6 +394,38 @@ export function App() {
         void window.electronAPI.resumeTask(event.taskId);
       }
 
+      if (event.type === 'task_paused' || event.type === 'approval_requested') {
+        const isApproval = event.type === 'approval_requested';
+        const task = tasksRef.current.find(t => t.id === event.taskId);
+        const baseTitle = isApproval ? 'Approval needed' : 'Input needed';
+        const title = task?.title ? `${baseTitle} · ${task.title}` : baseTitle;
+        const message =
+          (isApproval
+            ? event.payload?.approval?.description
+            : event.payload?.message) || 'Awaiting your input.';
+
+        void (async () => {
+          try {
+            const existing = await window.electronAPI.listNotifications();
+            const hasExisting = existing.some((n) =>
+              n.type === 'input_required' &&
+              n.taskId === event.taskId &&
+              !n.read
+            );
+            if (hasExisting) return;
+            await window.electronAPI.addNotification({
+              type: 'input_required',
+              title,
+              message,
+              taskId: event.taskId,
+              workspaceId: task?.workspaceId,
+            });
+          } catch (error) {
+            console.error('Failed to add input-required notification:', error);
+          }
+        })();
+      }
+
       // Show toast notifications for task completion/failure
       if (event.type === 'task_completed') {
         const task = tasksRef.current.find(t => t.id === event.taskId);
@@ -515,13 +607,19 @@ export function App() {
   const handleThemeChange = (theme: ThemeMode) => {
     setThemeMode(theme);
     // Persist to main process
-    window.electronAPI.saveAppearanceSettings({ themeMode: theme, accentColor });
+    window.electronAPI.saveAppearanceSettings({ themeMode: theme, visualTheme, accentColor });
+  };
+
+  const handleVisualThemeChange = (visual: VisualTheme) => {
+    setVisualTheme(visual);
+    // Persist to main process
+    window.electronAPI.saveAppearanceSettings({ themeMode, visualTheme: visual, accentColor });
   };
 
   const handleAccentChange = (accent: AccentColor) => {
     setAccentColor(accent);
     // Persist to main process
-    window.electronAPI.saveAppearanceSettings({ themeMode, accentColor: accent });
+    window.electronAPI.saveAppearanceSettings({ themeMode, visualTheme, accentColor: accent });
   };
 
   // Show loading state while checking disclaimer/onboarding status
@@ -710,6 +808,10 @@ export function App() {
                 selectedTaskId={selectedTaskId}
                 onSelectTask={setSelectedTaskId}
                 onOpenSettings={() => setCurrentView('settings')}
+                onOpenMissionControl={() => {
+                  setSettingsTab('missioncontrol');
+                  setCurrentView('settings');
+                }}
                 onTasksChanged={loadTasks}
               />
             )}
@@ -727,6 +829,7 @@ export function App() {
                 setCurrentView('settings');
               }}
               onStopTask={handleCancelTask}
+              onOpenBrowserView={handleOpenBrowserView}
               selectedModel={selectedModel}
               availableModels={availableModels}
               onModelChange={handleModelChange}
@@ -762,14 +865,22 @@ export function App() {
           onBack={() => setCurrentView('main')}
           onSettingsChanged={loadLLMConfig}
           themeMode={themeMode}
+          visualTheme={visualTheme}
           accentColor={accentColor}
           onThemeChange={handleThemeChange}
+          onVisualThemeChange={handleVisualThemeChange}
           onAccentChange={handleAccentChange}
           initialTab={settingsTab}
           onShowOnboarding={handleShowOnboarding}
           onboardingCompletedAt={onboardingCompletedAt}
         />
       )}
+      {currentView === 'browser' && (
+        <BrowserView
+          initialUrl={browserUrl}
+          onBack={() => setCurrentView('main')}
+        />
+      )}
     </div>
   );
 }

package/src/renderer/components/ActivityFeedItem.tsx

@@ -1,4 +1,21 @@
 import { ActivityData, ActivityType, ActivityActorType } from '../../electron/preload';
+import { ThemeIcon } from './ThemeIcon';
+import {
+  AlertTriangleIcon,
+  AtIcon,
+  BotIcon,
+  CheckIcon,
+  ClipboardIcon,
+  CodeIcon,
+  FileIcon,
+  InfoIcon,
+  MessageIcon,
+  PauseIcon,
+  PlayIcon,
+  SlidersIcon,
+  TrashIcon,
+  XIcon,
+} from './LineIcons';
 
 interface ActivityFeedItemProps {
   activity: ActivityData;
@@ -8,23 +25,23 @@ interface ActivityFeedItemProps {
   compact?: boolean;
 }
 
-const ACTIVITY_ICONS: Record<ActivityType, string> = {
-  task_created: '📋',
-  task_started: '▶️',
-  task_completed: '✅',
-  task_failed: '❌',
-  task_paused: '⏸️',
-  task_resumed: '▶️',
-  comment: '💬',
-  file_created: '📄',
-  file_modified: '✏️',
-  file_deleted: '🗑️',
-  command_executed: '💻',
-  tool_used: '🔧',
-  mention: '@',
-  agent_assigned: '🤖',
-  error: '⚠️',
-  info: 'ℹ️',
+const ACTIVITY_ICONS: Record<ActivityType, React.ReactNode> = {
+  task_created: <ThemeIcon emoji="📋" icon={<ClipboardIcon size={16} />} />,
+  task_started: <ThemeIcon emoji="▶️" icon={<PlayIcon size={16} />} />,
+  task_completed: <ThemeIcon emoji="✅" icon={<CheckIcon size={16} />} />,
+  task_failed: <ThemeIcon emoji="❌" icon={<XIcon size={16} />} />,
+  task_paused: <ThemeIcon emoji="⏸️" icon={<PauseIcon size={16} />} />,
+  task_resumed: <ThemeIcon emoji="▶️" icon={<PlayIcon size={16} />} />,
+  comment: <ThemeIcon emoji="💬" icon={<MessageIcon size={16} />} />,
+  file_created: <ThemeIcon emoji="📄" icon={<FileIcon size={16} />} />,
+  file_modified: <ThemeIcon emoji="✏️" icon={<FileIcon size={16} />} />,
+  file_deleted: <ThemeIcon emoji="🗑️" icon={<TrashIcon size={16} />} />,
+  command_executed: <ThemeIcon emoji="💻" icon={<CodeIcon size={16} />} />,
+  tool_used: <ThemeIcon emoji="🔧" icon={<SlidersIcon size={16} />} />,
+  mention: <ThemeIcon emoji="@" icon={<AtIcon size={16} />} />,
+  agent_assigned: <ThemeIcon emoji="🤖" icon={<BotIcon size={16} />} />,
+  error: <ThemeIcon emoji="⚠️" icon={<AlertTriangleIcon size={16} />} />,
+  info: <ThemeIcon emoji="ℹ️" icon={<InfoIcon size={16} />} />,
 };
 
 const ACTIVITY_COLORS: Record<ActivityType, string> = {

package/src/renderer/components/AgentWorkingStatePanel.tsx

@@ -5,6 +5,8 @@ import {
   AgentRoleData,
 } from '../../electron/preload';
 import { useAgentContext } from '../hooks/useAgentContext';
+import { ThemeIcon } from './ThemeIcon';
+import { ChartIcon, ClipboardIcon, EditIcon, TargetIcon } from './LineIcons';
 
 interface AgentWorkingStatePanelProps {
   agentRoleId: string;
@@ -13,25 +15,25 @@ interface AgentWorkingStatePanelProps {
   onEdit?: (state: AgentWorkingStateData) => void;
 }
 
-const STATE_TYPE_LABELS: Record<WorkingStateType, { label: string; icon: string; description: string }> = {
+const STATE_TYPE_LABELS: Record<WorkingStateType, { label: string; icon: React.ReactNode; description: string }> = {
   context: {
     label: 'Context',
-    icon: '📋',
+    icon: <ThemeIcon emoji="📋" icon={<ClipboardIcon size={16} />} />,
     description: 'Background information and current understanding',
   },
   progress: {
     label: 'Progress',
-    icon: '📊',
+    icon: <ThemeIcon emoji="📊" icon={<ChartIcon size={16} />} />,
     description: 'Current work progress and status',
   },
   notes: {
     label: 'Notes',
-    icon: '📝',
+    icon: <ThemeIcon emoji="📝" icon={<EditIcon size={16} />} />,
     description: 'Important observations and reminders',
   },
   plan: {
     label: 'Plan',
-    icon: '🎯',
+    icon: <ThemeIcon emoji="🎯" icon={<TargetIcon size={16} />} />,
     description: 'Action plan and next steps',
   },
 };

package/src/renderer/components/AppearanceSettings.tsx

@@ -1,9 +1,11 @@
-import { ThemeMode, AccentColor, ACCENT_COLORS } from '../../shared/types';
+import { ThemeMode, AccentColor, VisualTheme, ACCENT_COLORS } from '../../shared/types';
 
 interface AppearanceSettingsProps {
   themeMode: ThemeMode;
+  visualTheme: VisualTheme;
   accentColor: AccentColor;
   onThemeChange: (theme: ThemeMode) => void;
+  onVisualThemeChange: (theme: VisualTheme) => void;
   onAccentChange: (accent: AccentColor) => void;
   onShowOnboarding?: () => void;
   onboardingCompletedAt?: string;
@@ -11,12 +13,15 @@ interface AppearanceSettingsProps {
 
 export function AppearanceSettings({
   themeMode,
+  visualTheme,
   accentColor,
   onThemeChange,
+  onVisualThemeChange,
   onAccentChange,
   onShowOnboarding,
   onboardingCompletedAt,
 }: AppearanceSettingsProps) {
+  const isWarmVisualTheme = visualTheme === 'warm' || visualTheme === 'oblivion';
   const formatCompletedDate = (isoString?: string) => {
     if (!isoString) return null;
     try {
@@ -62,9 +67,39 @@ export function AppearanceSettings({
         </p>
       </div>
 
+      {/* Visual Style */}
+      <div className="appearance-section">
+        <h4>Visual Style</h4>
+        <div className="theme-switcher">
+          <button
+            className={`theme-option ${visualTheme === 'terminal' ? 'selected' : ''}`}
+            onClick={() => onVisualThemeChange('terminal')}
+          >
+            <div className="theme-option-preview terminal">
+              <div className="theme-option-preview-line code-line" />
+              <div className="theme-option-preview-line code-line" />
+              <div className="theme-option-preview-line code-line" />
+            </div>
+            <span className="theme-option-label">Terminal</span>
+          </button>
+
+          <button
+            className={`theme-option ${isWarmVisualTheme ? 'selected' : ''}`}
+            onClick={() => onVisualThemeChange('warm')}
+          >
+            <div className="theme-option-preview warm">
+              <div className="theme-option-preview-line ui-line" />
+              <div className="theme-option-preview-line ui-line" />
+              <div className="theme-option-preview-line ui-line" />
+            </div>
+            <span className="theme-option-label">Studio</span>
+          </button>
+        </div>
+      </div>
+
       {/* Theme Mode */}
       <div className="appearance-section">
-        <h4>Theme</h4>
+        <h4>Color Mode</h4>
         <div className="theme-switcher">
           <button
             className={`theme-option ${themeMode === 'light' ? 'selected' : ''}`}

package/src/renderer/components/BlueBubblesSettings.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 BlueBubblesSettings({ onStatusChange }: BlueBubblesSettingsProps
   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 BlueBubblesSettings({ onStatusChange }: BlueBubblesSettingsProps
     } finally {
       setLoading(false);
     }
-  };
+  }, [onStatusChange]);
+
+  useEffect(() => {
+    loadChannel();
+  }, [loadChannel]);
+
+  useEffect(() => {
+    const unsubscribe = window.electronAPI?.onGatewayUsersUpdated?.((data) => {
+      if (data?.channelType !== 'bluebubbles') return;
+      if (channel && data?.channelId && data.channelId !== channel.id) return;
+      loadChannel();
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [channel?.id, loadChannel]);
 
   const handleAddChannel = async () => {
     if (!serverUrl.trim() || !password.trim()) {

package/src/renderer/components/BoxSettings.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useState } from 'react';
+import { BoxSettingsData } from '../../shared/types';
+
+export function BoxSettings() {
+  const [settings, setSettings] = useState<BoxSettingsData | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<{ success: boolean; error?: string; name?: string; userId?: 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.getBoxSettings();
+      setSettings(loaded);
+    } catch (error) {
+      console.error('Failed to load Box settings:', error);
+    }
+  };
+
+  const updateSettings = (updates: Partial<BoxSettingsData>) => {
+    if (!settings) return;
+    setSettings({ ...settings, ...updates });
+  };
+
+  const handleSave = async () => {
+    if (!settings) return;
+    setSaving(true);
+    setTestResult(null);
+    try {
+      const payload: BoxSettingsData = { ...settings };
+      await window.electronAPI.saveBoxSettings(payload);
+      setSettings(payload);
+      await refreshStatus();
+    } catch (error) {
+      console.error('Failed to save Box settings:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const refreshStatus = async () => {
+    try {
+      setStatusLoading(true);
+      const result = await window.electronAPI.getBoxStatus();
+      setStatus(result);
+    } catch (error) {
+      console.error('Failed to load Box status:', error);
+    } finally {
+      setStatusLoading(false);
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await window.electronAPI.testBoxConnection();
+      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 Box settings...</div>;
+  }
+
+  const statusLabel = !status?.configured
+    ? 'Missing Token'
+    : status.connected
+      ? 'Connected'
+      : 'Configured';
+
+  const statusClass = !status?.configured
+    ? 'missing'
+    : status.connected
+      ? 'connected'
+      : 'configured';
+
+  return (
+    <div className="box-settings">
+      <div className="settings-section">
+        <div className="settings-section-header">
+          <div className="settings-title-with-badge">
+            <h3>Connect Box</h3>
+            {status && (
+              <span
+                className={`box-status-badge ${statusClass}`}
+                title={!status.configured ? 'Access token not configured' : status.connected ? 'Connected to Box' : 'Configured'}
+              >
+                {statusLabel}
+              </span>
+            )}
+            {statusLoading && !status && (
+              <span className="box-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 Box using a developer token or OAuth access token, then use the built-in `box_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://app.box.com/developers/console')}
+          >
+            Open Box Console
+          </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="Box access token"
+            value={settings.accessToken || ''}
+            onChange={(e) => updateSettings({ accessToken: e.target.value || undefined })}
+          />
+          <p className="settings-hint">Use a developer token or OAuth access token with required scopes.</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 folder items
+box_action({
+  action: "list_folder_items",
+  folder_id: "0",
+  limit: 25
+});
+
+// Upload a file to root
+box_action({
+  action: "upload_file",
+  file_path: "reports/summary.pdf",
+  parent_id: "0"
+});`}</pre>
+      </div>
+    </div>
+  );
+}