cowork-os 0.3.21 → 0.3.25

package/src/renderer/components/SharePointSettings.tsx

@@ -0,0 +1,224 @@
+import { useEffect, useState } from 'react';
+import { SharePointSettingsData } from '../../shared/types';
+
+export function SharePointSettings() {
+  const [settings, setSettings] = useState<SharePointSettingsData | 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.getSharePointSettings();
+      setSettings(loaded);
+    } catch (error) {
+      console.error('Failed to load SharePoint settings:', error);
+    }
+  };
+
+  const updateSettings = (updates: Partial<SharePointSettingsData>) => {
+    if (!settings) return;
+    setSettings({ ...settings, ...updates });
+  };
+
+  const handleSave = async () => {
+    if (!settings) return;
+    setSaving(true);
+    setTestResult(null);
+    try {
+      const payload: SharePointSettingsData = { ...settings };
+      await window.electronAPI.saveSharePointSettings(payload);
+      setSettings(payload);
+      await refreshStatus();
+    } catch (error) {
+      console.error('Failed to save SharePoint settings:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const refreshStatus = async () => {
+    try {
+      setStatusLoading(true);
+      const result = await window.electronAPI.getSharePointStatus();
+      setStatus(result);
+    } catch (error) {
+      console.error('Failed to load SharePoint status:', error);
+    } finally {
+      setStatusLoading(false);
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await window.electronAPI.testSharePointConnection();
+      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 SharePoint settings...</div>;
+  }
+
+  const statusLabel = !status?.configured
+    ? 'Missing Token'
+    : status.connected
+      ? 'Connected'
+      : 'Configured';
+
+  const statusClass = !status?.configured
+    ? 'missing'
+    : status.connected
+      ? 'connected'
+      : 'configured';
+
+  return (
+    <div className="sharepoint-settings">
+      <div className="settings-section">
+        <div className="settings-section-header">
+          <div className="settings-title-with-badge">
+            <h3>Connect SharePoint</h3>
+            {status && (
+              <span
+                className={`sharepoint-status-badge ${statusClass}`}
+                title={!status.configured ? 'Access token not configured' : status.connected ? 'Connected to SharePoint' : 'Configured'}
+              >
+                {statusLabel}
+              </span>
+            )}
+            {statusLoading && !status && (
+              <span className="sharepoint-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 SharePoint using a Microsoft Graph access token, then use the built-in `sharepoint_action`
+          tool to search sites and manage drive items.
+        </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 a token with Sites.ReadWrite.All or Files.ReadWrite.All scope.</p>
+        </div>
+
+        <div className="settings-field">
+          <label>Site ID (optional)</label>
+          <input
+            type="text"
+            className="settings-input"
+            placeholder="SharePoint site ID"
+            value={settings.siteId || ''}
+            onChange={(e) => updateSettings({ siteId: e.target.value || undefined })}
+          />
+        </div>
+
+        <div className="settings-field">
+          <label>Drive ID (optional)</label>
+          <input
+            type="text"
+            className="settings-input"
+            placeholder="Default drive ID"
+            value={settings.driveId || ''}
+            onChange={(e) => updateSettings({ driveId: e.target.value || undefined })}
+          />
+          <p className="settings-hint">Set a default drive to simplify tool calls.</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">{`// Search sites
+sharepoint_action({
+  action: "search_sites",
+  query: "Marketing"
+});
+
+// Upload a file to the default drive
+sharepoint_action({
+  action: "upload_file",
+  file_path: "reports/summary.pdf"
+});`}</pre>
+      </div>
+    </div>
+  );
+}

package/src/renderer/components/Sidebar.tsx

@@ -7,6 +7,7 @@ interface SidebarProps {
   selectedTaskId: string | null;
   onSelectTask: (id: string | null) => void;
   onOpenSettings: () => void;
+  onOpenMissionControl: () => void;
   onTasksChanged: () => void;
 }
 
@@ -22,6 +23,7 @@ export function Sidebar({
   selectedTaskId,
   onSelectTask,
   onOpenSettings,
+  onOpenMissionControl,
   onTasksChanged,
 }: SidebarProps) {
   const [menuOpenTaskId, setMenuOpenTaskId] = useState<string | null>(null);
@@ -140,19 +142,61 @@ export function Sidebar({
   const getStatusIndicator = (status: Task['status']) => {
     switch (status) {
       case 'completed':
-        return '[✓]';
+        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"></polyline></svg>
+            </span>
+          </>
+        );
       case 'paused':
-        return '[P]';
+        return (
+          <>
+            <span className="terminal-only">[P]</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"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg>
+            </span>
+          </>
+        );
       case 'blocked':
-        return '[!]';
+        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"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+            </span>
+          </>
+        );
       case 'failed':
       case 'cancelled':
-        return '[✗]';
+        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><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </span>
+          </>
+        );
       case 'executing':
       case 'planning':
-        return '[~]';
+        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"></circle></svg>
+            </span>
+          </>
+        );
       default:
-        return '[ ]';
+        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"></circle></svg>
+            </span>
+          </>
+        );
     }
   };
 
@@ -302,25 +346,51 @@ export function Sidebar({
     <div className="sidebar cli-sidebar">
       {/* New Session Button */}
       <div className="sidebar-header">
-        <button className="new-task-btn cli-new-task-btn" onClick={handleNewTask}>
-          <span className="cli-btn-bracket">[</span>
-          <span className="cli-btn-plus">+</span>
-          <span className="cli-btn-bracket">]</span>
-          <span className="cli-btn-text">new_session</span>
-        </button>
+        <div className="cli-header-actions">
+          <button
+            className="cli-action-btn cli-mission-control-btn"
+            onClick={onOpenMissionControl}
+            title="Mission Control"
+          >
+            <span className="terminal-only">
+              <span className="cli-btn-bracket">[</span>
+              <span className="cli-btn-accent">MC</span>
+              <span className="cli-btn-bracket">]</span>
+            </span>
+            <span className="cli-btn-text">
+              <span className="terminal-only">mission_control</span>
+              <span className="modern-only">Mission Control</span>
+            </span>
+          </button>
+          <button className="new-task-btn cli-new-task-btn cli-action-btn" onClick={handleNewTask}>
+            <span className="terminal-only">
+              <span className="cli-btn-bracket">[</span>
+              <span className="cli-btn-plus">+</span>
+              <span className="cli-btn-bracket">]</span>
+            </span>
+            <span className="cli-btn-text">
+              <span className="terminal-only">new_session</span>
+              <span className="modern-only">New Session</span>
+            </span>
+          </button>
+        </div>
       </div>
 
       {/* Sessions List */}
       <div className="task-list cli-task-list">
         <div className="task-list-header cli-list-header">
           <span className="cli-section-prompt">&gt;</span>
-          <span>SESSIONS</span>
+          <span className="terminal-only">SESSIONS</span>
+          <span className="modern-only">Sessions</span>
         </div>
         {taskTree.length === 0 ? (
           <div className="sidebar-empty cli-empty">
-            <pre className="cli-tree">{`├── (no sessions yet)
+            <pre className="cli-tree terminal-only">{`├── (no sessions yet)
 └── ...`}</pre>
-            <p className="cli-hint"># start a new session above</p>
+            <p className="cli-hint">
+              <span className="terminal-only"># start a new session above</span>
+              <span className="modern-only">Start a new session to begin</span>
+            </p>
           </div>
         ) : (
           taskTree.map((node, index) =>
@@ -332,12 +402,17 @@ export function Sidebar({
       {/* Footer */}
       <div className="sidebar-footer cli-sidebar-footer">
         <div className="cli-footer-info">
-          <span className="cli-footer-label">SYS:</span>
+          <span className="cli-footer-label">
+            <span className="terminal-only">SYS:</span>
+          </span>
           <span className="cli-footer-value">CoWork OS</span>
         </div>
-        <button className="settings-btn cli-settings-btn" onClick={onOpenSettings} title="Settings">
-          [cfg]
-        </button>
+        <div className="cli-footer-actions">
+          <button className="settings-btn cli-settings-btn" onClick={onOpenSettings} title="Settings">
+            <span className="terminal-only">[cfg]</span>
+            <span className="modern-only">Settings</span>
+          </button>
+        </div>
       </div>
     </div>
   );

package/src/renderer/components/SignalSettings.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { ChannelData, ChannelUserData, SecurityMode } from '../../shared/types';
 
 interface SignalSettingsProps {
@@ -35,11 +35,7 @@ export function SignalSettings({ onStatusChange }: SignalSettingsProps) {
   // Pairing code state
   const [pairingCode, setPairingCode] = useState<string | null>(null);
 
-  useEffect(() => {
-    loadChannel();
-  }, []);
-
-  const loadChannel = async () => {
+  const loadChannel = useCallback(async () => {
     try {
       setLoading(true);
       const channels = await window.electronAPI.getGatewayChannels();
@@ -75,7 +71,22 @@ export function SignalSettings({ onStatusChange }: SignalSettingsProps) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [onStatusChange]);
+
+  useEffect(() => {
+    loadChannel();
+  }, [loadChannel]);
+
+  useEffect(() => {
+    const unsubscribe = window.electronAPI?.onGatewayUsersUpdated?.((data) => {
+      if (data?.channelType !== 'signal') return;
+      if (channel && data?.channelId && data.channelId !== channel.id) return;
+      loadChannel();
+    });
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [channel?.id, loadChannel]);
 
   const handleAddChannel = async () => {
     if (!phoneNumber.trim()) {