cowork-os 0.3.21 → 0.3.23

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>
+  );
+}

package/src/renderer/components/BrowserView.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface BrowserViewProps {
+  initialUrl?: string;
+  onBack: () => void;
+}
+
+export function BrowserView({ initialUrl, onBack }: BrowserViewProps) {
+  const [url, setUrl] = useState(initialUrl || '');
+  const [activeUrl, setActiveUrl] = useState(initialUrl || '');
+  const webviewRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (initialUrl) {
+      setUrl(initialUrl);
+      setActiveUrl(initialUrl);
+    }
+  }, [initialUrl]);
+
+  const navigate = (nextUrl?: string) => {
+    const target = (nextUrl || url).trim();
+    if (!target) return;
+    const normalized = /^https?:\/\//i.test(target) ? target : `https://${target}`;
+    setActiveUrl(normalized);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      navigate();
+    }
+  };
+
+  return (
+    <div className="browser-view">
+      <div className="browser-toolbar">
+        <button className="browser-toolbar-btn" onClick={onBack} title="Back to app">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+          Back
+        </button>
+        <button
+          className="browser-toolbar-btn"
+          onClick={() => webviewRef.current?.goBack()}
+          title="Back"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+        </button>
+        <button
+          className="browser-toolbar-btn"
+          onClick={() => webviewRef.current?.goForward()}
+          title="Forward"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+        <button
+          className="browser-toolbar-btn"
+          onClick={() => webviewRef.current?.reload()}
+          title="Reload"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="23 4 23 10 17 10" />
+            <polyline points="1 20 1 14 7 14" />
+            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+          </svg>
+        </button>
+        <div className="browser-url">
+          <input
+            value={url}
+            onChange={(event) => setUrl(event.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="https://example.com"
+          />
+          <button className="browser-toolbar-btn primary" onClick={() => navigate()} title="Go">
+            Go
+          </button>
+        </div>
+      </div>
+      <div className="browser-surface">
+        {activeUrl ? (
+          <webview
+            ref={webviewRef}
+            src={activeUrl}
+            className="browser-webview"
+            allowpopups={true}
+            webpreferences="contextIsolation=yes, nodeIntegration=no"
+          />
+        ) : (
+          <div className="browser-empty">
+            Enter a URL above to start browsing.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/renderer/components/BuiltinToolsSettings.tsx

@@ -17,6 +17,8 @@ interface BuiltinToolsSettingsData {
     image: ToolCategoryConfig;
   };
   toolOverrides: Record<string, { enabled: boolean; priority?: 'high' | 'normal' | 'low' }>;
+  toolTimeouts: Record<string, number>;
+  toolAutoApprove: Record<string, boolean>;
   version: string;
 }
 
@@ -182,6 +184,62 @@ export function BuiltinToolsSettings() {
     }
   };
 
+  const handleRunCommandAutoApprove = async (enabled: boolean) => {
+    if (!settings) return;
+
+    const nextAutoApprove = { ...(settings.toolAutoApprove || {}) };
+    if (enabled) {
+      nextAutoApprove.run_command = true;
+    } else {
+      delete nextAutoApprove.run_command;
+    }
+
+    const newSettings = {
+      ...settings,
+      toolAutoApprove: nextAutoApprove,
+    };
+
+    setSettings(newSettings);
+
+    try {
+      setSaving(true);
+      await window.electronAPI.saveBuiltinToolsSettings(newSettings);
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleRunCommandTimeout = async (value: string) => {
+    if (!settings) return;
+
+    const parsed = Number(value);
+    const nextTimeouts = { ...(settings.toolTimeouts || {}) };
+
+    if (!value || !Number.isFinite(parsed) || parsed <= 0) {
+      delete nextTimeouts.run_command;
+    } else {
+      nextTimeouts.run_command = Math.round(parsed);
+    }
+
+    const newSettings = {
+      ...settings,
+      toolTimeouts: nextTimeouts,
+    };
+
+    setSettings(newSettings);
+
+    try {
+      setSaving(true);
+      await window.electronAPI.saveBuiltinToolsSettings(newSettings);
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
   if (loading) {
     return <div className="settings-loading">Loading settings...</div>;
   }
@@ -205,6 +263,12 @@ export function BuiltinToolsSettings() {
           const info = CATEGORY_INFO[category];
           const config = settings.categories[category];
           const tools = categories[category] || [];
+          const runCommandAutoApprove = category === 'shell'
+            ? Boolean(settings.toolAutoApprove?.run_command)
+            : false;
+          const runCommandTimeout = category === 'shell'
+            ? (settings.toolTimeouts?.run_command ?? '')
+            : '';
 
           return (
             <div
@@ -267,6 +331,47 @@ export function BuiltinToolsSettings() {
                 </div>
               </div>
 
+              {category === 'shell' && expandedCategory === category && (
+                <div className="builtin-tool-advanced">
+                  <div className="builtin-tool-advanced-row">
+                    <div className="builtin-tool-advanced-text">
+                      <div className="builtin-tool-advanced-label">Auto-approve safe commands</div>
+                      <div className="builtin-tool-advanced-hint">
+                        Skips approval prompts for non-destructive commands.
+                      </div>
+                    </div>
+                    <label className="builtin-tool-toggle">
+                      <input
+                        type="checkbox"
+                        checked={runCommandAutoApprove}
+                        onChange={(e) => handleRunCommandAutoApprove(e.target.checked)}
+                        disabled={!config.enabled}
+                      />
+                      <span className="builtin-tool-toggle-slider"></span>
+                    </label>
+                  </div>
+
+                  <div className="builtin-tool-advanced-row">
+                    <div className="builtin-tool-advanced-text">
+                      <div className="builtin-tool-advanced-label">run_command timeout (ms)</div>
+                      <div className="builtin-tool-advanced-hint">
+                        Used when the command doesn't set its own timeout.
+                      </div>
+                    </div>
+                    <input
+                      className="builtin-tool-timeout-input"
+                      type="number"
+                      min={1000}
+                      step={1000}
+                      value={runCommandTimeout}
+                      onChange={(e) => handleRunCommandTimeout(e.target.value)}
+                      disabled={!config.enabled}
+                      placeholder="30000"
+                    />
+                  </div>
+                </div>
+              )}
+
               {expandedCategory === category && tools.length > 0 && (
                 <div className="builtin-tool-list">
                   {tools.map((tool) => (

package/src/renderer/components/CanvasPreview.tsx

@@ -6,6 +6,7 @@ interface CanvasPreviewProps {
   session: CanvasSession;
   onClose?: () => void;
   forceSnapshot?: boolean;
+  onOpenBrowser?: (url?: string) => void;
 }
 
 interface SnapshotHistoryEntry {
@@ -132,7 +133,7 @@ const CanvasImage = memo(function CanvasImage({
   );
 });
 
-export function CanvasPreview({ session, onClose, forceSnapshot = false }: CanvasPreviewProps) {
+export function CanvasPreview({ session, onClose, forceSnapshot = false, onOpenBrowser }: CanvasPreviewProps) {
   const isBrowserCanvas = session.mode === 'browser';
   const agentContext = useAgentContext();
   const [imageData, setImageData] = useState<string | null>(null);
@@ -158,8 +159,11 @@ export function CanvasPreview({ session, onClose, forceSnapshot = false }: Canva
   const [showConsole, setShowConsole] = useState(false);
   const [showExportMenu, setShowExportMenu] = useState(false);
   const [isInteractiveMode, setIsInteractiveMode] = useState(!isBrowserCanvas && !forceSnapshot);
+  const [showBrowserUrlInput, setShowBrowserUrlInput] = useState(false);
+  const [browserUrl, setBrowserUrl] = useState('');
 
   const refreshIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const browserInputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const retryCountRef = useRef(0);
   const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -593,6 +597,27 @@ export function CanvasPreview({ session, onClose, forceSnapshot = false }: Canva
     }
   }, [session.id]);
 
+  // Open a remote web page inside the canvas window
+  const handleOpenBrowserCanvas = useCallback(() => {
+    setShowExportMenu(false);
+    if (!onOpenBrowser) {
+      setCopyFeedback('Browser view unavailable');
+      setTimeout(() => setCopyFeedback(null), 2000);
+      return;
+    }
+    onOpenBrowser(session.url || '');
+  }, [onOpenBrowser, session.url]);
+
+  // Submit URL from browser input
+  const handleSubmitBrowserUrl = useCallback(() => {
+    if (!browserUrl.trim()) return;
+    setShowBrowserUrlInput(false);
+    if (onOpenBrowser) {
+      onOpenBrowser(browserUrl.trim());
+    }
+    setBrowserUrl('');
+  }, [browserUrl, onOpenBrowser]);
+
   // Open session folder in Finder
   const handleOpenFolder = useCallback(async () => {
     setShowExportMenu(false);
@@ -1021,6 +1046,18 @@ export function CanvasPreview({ session, onClose, forceSnapshot = false }: Canva
               <line x1="10" y1="14" x2="21" y2="3" />
             </svg>
           </button>
+          {/* Open web page in canvas */}
+          <button
+            className="canvas-action-btn"
+            onClick={handleOpenBrowserCanvas}
+            title="Open in browser view"
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="2" y1="12" x2="22" y2="12" />
+              <path d="M12 2a15.3 15.3 0 0 1 0 20a15.3 15.3 0 0 1 0-20" />
+            </svg>
+          </button>
           {/* Minimize */}
           <button
             className="canvas-action-btn"
@@ -1048,6 +1085,36 @@ export function CanvasPreview({ session, onClose, forceSnapshot = false }: Canva
           </button>
         </div>
       </div>
+      {showBrowserUrlInput && (
+        <div className="canvas-browser-input-row">
+          <input
+            ref={browserInputRef}
+            className="canvas-browser-input"
+            type="text"
+            value={browserUrl}
+            onChange={(e) => setBrowserUrl(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                handleSubmitBrowserUrl();
+              } else if (e.key === 'Escape') {
+                e.preventDefault();
+                setShowBrowserUrlInput(false);
+              }
+            }}
+            placeholder="https://example.com"
+          />
+          <button className="canvas-browser-btn" onClick={handleSubmitBrowserUrl}>
+            Open
+          </button>
+          <button
+            className="canvas-browser-btn ghost"
+            onClick={() => setShowBrowserUrlInput(false)}
+          >
+            Cancel
+          </button>
+        </div>
+      )}
       {!isMinimized && (
         <>
           <div className="canvas-preview-content">

package/src/renderer/components/ConnectorEnvModal.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react';
+
+export interface ConnectorEnvField {
+  key: string;
+  label: string;
+  placeholder?: string;
+  type?: 'text' | 'password';
+}
+
+interface ConnectorEnvModalProps {
+  serverId: string;
+  serverName: string;
+  initialEnv?: Record<string, string>;
+  fields: ConnectorEnvField[];
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+export function ConnectorEnvModal({
+  serverId,
+  serverName,
+  initialEnv = {},
+  fields,
+  onClose,
+  onSaved,
+}: ConnectorEnvModalProps) {
+  const [values, setValues] = useState<Record<string, string>>(() => {
+    const seeded: Record<string, string> = {};
+    fields.forEach((field) => {
+      seeded[field.key] = initialEnv[field.key] || '';
+    });
+    return seeded;
+  });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const mergeEnv = (): Record<string, string> => {
+    const merged: Record<string, string> = { ...initialEnv };
+    Object.entries(values).forEach(([key, value]) => {
+      if (!value) {
+        delete merged[key];
+      } else {
+        merged[key] = value;
+      }
+    });
+    return merged;
+  };
+
+  const reconnectServer = async () => {
+    try {
+      await window.electronAPI.disconnectMCPServer(serverId);
+    } catch {
+      // ignore
+    }
+    await window.electronAPI.connectMCPServer(serverId);
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      await window.electronAPI.updateMCPServer(serverId, { env: mergeEnv() });
+      await reconnectServer();
+      onSaved();
+      onClose();
+    } catch (err: any) {
+      setError(err.message || 'Failed to save credentials');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="mcp-modal-overlay" onClick={onClose}>
+      <div className="mcp-modal connector-setup-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="mcp-modal-header">
+          <div className="registry-details-title">
+            <h3>{serverName} Configuration</h3>
+          </div>
+          <button className="mcp-modal-close" onClick={onClose}>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="mcp-modal-content">
+          {fields.map((field) => (
+            <div key={field.key} className="settings-field">
+              <label>{field.label}</label>
+              <input
+                className="settings-input"
+                type={field.type || 'text'}
+                placeholder={field.placeholder}
+                value={values[field.key] || ''}
+                onChange={(e) => setValues({ ...values, [field.key]: e.target.value })}
+              />
+            </div>
+          ))}
+
+          <div className="connector-setup-actions">
+            <button className="button-primary" onClick={handleSave} disabled={saving}>
+              {saving ? 'Saving...' : 'Save Credentials'}
+            </button>
+          </div>
+
+          {error && (
+            <div className="mcp-server-error">
+              <span className="mcp-error-icon">⚠</span>
+              {error}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}