cowork-os 0.3.21 → 0.3.23

package/src/renderer/components/ConnectorsSettings.tsx

@@ -0,0 +1,397 @@
+import { useEffect, useMemo, useState } from 'react';
+import { ConnectorSetupModal, ConnectorProvider } from './ConnectorSetupModal';
+import { ConnectorEnvModal, ConnectorEnvField } from './ConnectorEnvModal';
+
+// Types (matching preload types)
+type MCPConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'reconnecting' | 'error';
+
+type MCPServerConfig = {
+  id: string;
+  name: string;
+  description?: string;
+  enabled: boolean;
+  command?: string;
+  args?: string[];
+  env?: Record<string, string>;
+};
+
+type MCPServerStatus = {
+  id: string;
+  name: string;
+  status: MCPConnectionStatus;
+  error?: string;
+  tools: Array<{ name: string }>;
+};
+
+type MCPSettingsData = {
+  servers: MCPServerConfig[];
+};
+
+interface ConnectorDefinition {
+  key: string;
+  name: string;
+  registryId: string;
+  description: string;
+  supportsOAuth: boolean;
+  provider?: ConnectorProvider;
+  envFields?: ConnectorEnvField[];
+}
+
+const CONNECTORS: ConnectorDefinition[] = [
+  {
+    key: 'salesforce',
+    name: 'Salesforce',
+    registryId: 'salesforce',
+    description: 'CRM (accounts, cases, opportunities).',
+    supportsOAuth: true,
+    provider: 'salesforce',
+  },
+  {
+    key: 'jira',
+    name: 'Jira',
+    registryId: 'jira',
+    description: 'Issue tracking for teams.',
+    supportsOAuth: true,
+    provider: 'jira',
+  },
+  {
+    key: 'hubspot',
+    name: 'HubSpot',
+    registryId: 'hubspot',
+    description: 'CRM objects for contacts, companies, deals.',
+    supportsOAuth: true,
+    provider: 'hubspot',
+  },
+  {
+    key: 'zendesk',
+    name: 'Zendesk',
+    registryId: 'zendesk',
+    description: 'Support tickets and customer operations.',
+    supportsOAuth: true,
+    provider: 'zendesk',
+  },
+  {
+    key: 'servicenow',
+    name: 'ServiceNow',
+    registryId: 'servicenow',
+    description: 'ITSM records and table APIs.',
+    supportsOAuth: false,
+    envFields: [
+      { key: 'SERVICENOW_INSTANCE_URL', label: 'Instance URL', placeholder: 'https://instance.service-now.com' },
+      { key: 'SERVICENOW_INSTANCE', label: 'Instance Subdomain', placeholder: 'dev12345' },
+      { key: 'SERVICENOW_USERNAME', label: 'Username' },
+      { key: 'SERVICENOW_PASSWORD', label: 'Password', type: 'password' },
+      { key: 'SERVICENOW_ACCESS_TOKEN', label: 'Access Token', type: 'password' },
+    ],
+  },
+  {
+    key: 'linear',
+    name: 'Linear',
+    registryId: 'linear',
+    description: 'Project and issue tracking (GraphQL).',
+    supportsOAuth: false,
+    envFields: [
+      { key: 'LINEAR_API_KEY', label: 'API Key', type: 'password' },
+    ],
+  },
+  {
+    key: 'asana',
+    name: 'Asana',
+    registryId: 'asana',
+    description: 'Work management tasks and projects.',
+    supportsOAuth: false,
+    envFields: [
+      { key: 'ASANA_ACCESS_TOKEN', label: 'Access Token', type: 'password' },
+    ],
+  },
+  {
+    key: 'okta',
+    name: 'Okta',
+    registryId: 'okta',
+    description: 'User and directory management.',
+    supportsOAuth: false,
+    envFields: [
+      { key: 'OKTA_BASE_URL', label: 'Okta Base URL', placeholder: 'https://your-org.okta.com' },
+      { key: 'OKTA_API_TOKEN', label: 'API Token', type: 'password' },
+    ],
+  },
+];
+
+const getStatusColor = (status: MCPConnectionStatus): string => {
+  switch (status) {
+    case 'connected':
+      return 'var(--color-success)';
+    case 'connecting':
+    case 'reconnecting':
+      return 'var(--color-warning)';
+    case 'error':
+      return 'var(--color-error)';
+    default:
+      return 'var(--color-text-tertiary)';
+  }
+};
+
+const getStatusText = (status: MCPConnectionStatus): string => {
+  switch (status) {
+    case 'connected':
+      return 'Connected';
+    case 'connecting':
+      return 'Connecting';
+    case 'reconnecting':
+      return 'Reconnecting';
+    case 'error':
+      return 'Error';
+    default:
+      return 'Disconnected';
+  }
+};
+
+function matchConnector(config: MCPServerConfig, connector: ConnectorDefinition): boolean {
+  const nameMatch = config.name.toLowerCase().includes(connector.key);
+  const argsMatch = (config.args || []).some((arg) => arg.toLowerCase().includes(connector.key));
+  const commandMatch = (config.command || '').toLowerCase().includes(connector.key);
+  return nameMatch || argsMatch || commandMatch;
+}
+
+export function ConnectorsSettings() {
+  const [settings, setSettings] = useState<MCPSettingsData | null>(null);
+  const [serverStatuses, setServerStatuses] = useState<MCPServerStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [installingId, setInstallingId] = useState<string | null>(null);
+  const [connectingServer, setConnectingServer] = useState<string | null>(null);
+  const [connectionErrors, setConnectionErrors] = useState<Record<string, string>>({});
+
+  const [connectorSetup, setConnectorSetup] = useState<{
+    provider: ConnectorProvider;
+    serverId: string;
+    serverName: string;
+    env?: Record<string, string>;
+  } | null>(null);
+
+  const [envModal, setEnvModal] = useState<{
+    serverId: string;
+    serverName: string;
+    env?: Record<string, string>;
+    fields: ConnectorEnvField[];
+  } | null>(null);
+
+  useEffect(() => {
+    loadData();
+
+    const unsubscribe = window.electronAPI.onMCPStatusChange((statuses) => {
+      setServerStatuses(statuses);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const [loadedSettings, statuses] = await Promise.all([
+        window.electronAPI.getMCPSettings(),
+        window.electronAPI.getMCPStatus(),
+      ]);
+      setSettings(loadedSettings);
+      setServerStatuses(statuses);
+    } catch (error) {
+      console.error('Failed to load connector settings:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const connectorRows = useMemo(() => {
+    if (!settings) return [];
+    return CONNECTORS.map((connector) => {
+      const config = settings.servers.find((server) => matchConnector(server, connector));
+      const status = config
+        ? serverStatuses.find((s) => s.id === config.id)
+        : undefined;
+      return { connector, config, status };
+    });
+  }, [settings, serverStatuses]);
+
+  const handleInstall = async (connector: ConnectorDefinition) => {
+    try {
+      setInstallingId(connector.registryId);
+      await window.electronAPI.installMCPServer(connector.registryId);
+      await loadData();
+    } catch (error: any) {
+      alert(`Failed to install ${connector.name}: ${error.message}`);
+    } finally {
+      setInstallingId(null);
+    }
+  };
+
+  const handleConnectServer = async (serverId: string) => {
+    try {
+      setConnectingServer(serverId);
+      setConnectionErrors(prev => {
+        const { [serverId]: _, ...rest } = prev;
+        return rest;
+      });
+      await window.electronAPI.connectMCPServer(serverId);
+    } catch (error: any) {
+      setConnectionErrors(prev => ({
+        ...prev,
+        [serverId]: error.message || 'Connection failed',
+      }));
+    } finally {
+      setConnectingServer(null);
+    }
+  };
+
+  const handleDisconnectServer = async (serverId: string) => {
+    try {
+      setConnectingServer(serverId);
+      setConnectionErrors(prev => {
+        const { [serverId]: _, ...rest } = prev;
+        return rest;
+      });
+      await window.electronAPI.disconnectMCPServer(serverId);
+    } catch (error: any) {
+      setConnectionErrors(prev => ({
+        ...prev,
+        [serverId]: error.message || 'Disconnect failed',
+      }));
+    } finally {
+      setConnectingServer(null);
+    }
+  };
+
+  if (loading) {
+    return <div className="settings-loading">Loading connector settings...</div>;
+  }
+
+  return (
+    <div className="settings-section">
+      <div className="settings-section-header">
+        <h3>Connectors</h3>
+      </div>
+      <p className="settings-description">
+        Connect enterprise systems to your assistant. Configure credentials and monitor status here.
+      </p>
+
+      <div className="mcp-server-list">
+        {connectorRows.map(({ connector, config, status }) => {
+          const isInstalled = Boolean(config);
+          const serverStatus = status?.status || 'disconnected';
+          const isConnecting = connectingServer === config?.id;
+          return (
+            <div key={connector.key} className="mcp-server-card">
+              <div className="mcp-server-header">
+                <div className="mcp-server-info">
+                  <div className="mcp-server-name-row">
+                    <span className="mcp-server-name">{connector.name}</span>
+                    <span
+                      className="mcp-server-status"
+                      style={{ color: getStatusColor(serverStatus) }}
+                    >
+                      <span className="mcp-status-dot" style={{ backgroundColor: getStatusColor(serverStatus) }} />
+                      {isInstalled ? getStatusText(serverStatus) : 'Not installed'}
+                    </span>
+                  </div>
+                  <span className="mcp-server-command">{connector.description}</span>
+                </div>
+              </div>
+
+              {isInstalled && (status?.error || connectionErrors[config!.id]) && (
+                <div className="mcp-server-error">
+                  <span className="mcp-error-icon">⚠</span>
+                  {connectionErrors[config!.id] || status?.error}
+                </div>
+              )}
+
+              <div className="mcp-server-actions">
+                {!isInstalled ? (
+                  <button
+                    className="button-small button-primary"
+                    onClick={() => handleInstall(connector)}
+                    disabled={installingId === connector.registryId}
+                  >
+                    {installingId === connector.registryId ? 'Installing...' : 'Install'}
+                  </button>
+                ) : (
+                  <>
+                    {serverStatus === 'connected' ? (
+                      <button
+                        className="button-small button-secondary"
+                        onClick={() => handleDisconnectServer(config!.id)}
+                        disabled={isConnecting}
+                      >
+                        {isConnecting ? 'Disconnecting...' : 'Disconnect'}
+                      </button>
+                    ) : (
+                      <button
+                        className="button-small button-primary"
+                        onClick={() => handleConnectServer(config!.id)}
+                        disabled={isConnecting}
+                      >
+                        {isConnecting ? 'Connecting...' : 'Connect'}
+                      </button>
+                    )}
+
+                    {connector.supportsOAuth && connector.provider && (
+                      <button
+                        className="button-small button-primary"
+                        onClick={() =>
+                          setConnectorSetup({
+                            provider: connector.provider!,
+                            serverId: config!.id,
+                            serverName: config!.name,
+                            env: config!.env,
+                          })
+                        }
+                      >
+                        Setup
+                      </button>
+                    )}
+
+                    {!connector.supportsOAuth && connector.envFields && (
+                      <button
+                        className="button-small button-secondary"
+                        onClick={() =>
+                          setEnvModal({
+                            serverId: config!.id,
+                            serverName: config!.name,
+                            env: config!.env,
+                            fields: connector.envFields!,
+                          })
+                        }
+                      >
+                        Configure
+                      </button>
+                    )}
+                  </>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {connectorSetup && (
+        <ConnectorSetupModal
+          provider={connectorSetup.provider}
+          serverId={connectorSetup.serverId}
+          serverName={connectorSetup.serverName}
+          initialEnv={connectorSetup.env}
+          onClose={() => setConnectorSetup(null)}
+          onSaved={loadData}
+        />
+      )}
+
+      {envModal && (
+        <ConnectorEnvModal
+          serverId={envModal.serverId}
+          serverName={envModal.serverName}
+          initialEnv={envModal.env}
+          fields={envModal.fields}
+          onClose={() => setEnvModal(null)}
+          onSaved={loadData}
+        />
+      )}
+    </div>
+  );
+}

package/src/renderer/components/DropboxSettings.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useState } from 'react';
+import { DropboxSettingsData } from '../../shared/types';
+
+export function DropboxSettings() {
+  const [settings, setSettings] = useState<DropboxSettingsData | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<{ success: boolean; error?: string; name?: string; userId?: string; email?: 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.getDropboxSettings();
+      setSettings(loaded);
+    } catch (error) {
+      console.error('Failed to load Dropbox settings:', error);
+    }
+  };
+
+  const updateSettings = (updates: Partial<DropboxSettingsData>) => {
+    if (!settings) return;
+    setSettings({ ...settings, ...updates });
+  };
+
+  const handleSave = async () => {
+    if (!settings) return;
+    setSaving(true);
+    setTestResult(null);
+    try {
+      const payload: DropboxSettingsData = { ...settings };
+      await window.electronAPI.saveDropboxSettings(payload);
+      setSettings(payload);
+      await refreshStatus();
+    } catch (error) {
+      console.error('Failed to save Dropbox settings:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const refreshStatus = async () => {
+    try {
+      setStatusLoading(true);
+      const result = await window.electronAPI.getDropboxStatus();
+      setStatus(result);
+    } catch (error) {
+      console.error('Failed to load Dropbox status:', error);
+    } finally {
+      setStatusLoading(false);
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await window.electronAPI.testDropboxConnection();
+      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 Dropbox settings...</div>;
+  }
+
+  const statusLabel = !status?.configured
+    ? 'Missing Token'
+    : status.connected
+      ? 'Connected'
+      : 'Configured';
+
+  const statusClass = !status?.configured
+    ? 'missing'
+    : status.connected
+      ? 'connected'
+      : 'configured';
+
+  return (
+    <div className="dropbox-settings">
+      <div className="settings-section">
+        <div className="settings-section-header">
+          <div className="settings-title-with-badge">
+            <h3>Connect Dropbox</h3>
+            {status && (
+              <span
+                className={`dropbox-status-badge ${statusClass}`}
+                title={!status.configured ? 'Access token not configured' : status.connected ? 'Connected to Dropbox' : 'Configured'}
+              >
+                {statusLabel}
+              </span>
+            )}
+            {statusLoading && !status && (
+              <span className="dropbox-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 Dropbox using an access token, then use the built-in `dropbox_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://www.dropbox.com/developers/apps')}
+          >
+            Open Dropbox App 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="Dropbox access token"
+            value={settings.accessToken || ''}
+            onChange={(e) => updateSettings({ accessToken: e.target.value || undefined })}
+          />
+          <p className="settings-hint">Use a token with files.content.read/write or full access 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 folder contents
+dropbox_action({
+  action: "list_folder",
+  path: "/Projects"
+});
+
+// Upload a file
+dropbox_action({
+  action: "upload_file",
+  file_path: "reports/summary.pdf",
+  path: "/Reports/summary.pdf"
+});`}</pre>
+      </div>
+    </div>
+  );
+}