cowork-os 0.3.21

package/src/renderer/components/HooksSettings.tsx

@@ -0,0 +1,581 @@
+import { useState, useEffect } from 'react';
+import type { HooksSettingsData, HooksStatus, GmailHooksSettingsData } from '../../shared/types';
+
+export function HooksSettings() {
+  const [settings, setSettings] = useState<HooksSettingsData | null>(null);
+  const [status, setStatus] = useState<HooksStatus | null>(null);
+  const [gmailStatus, setGmailStatus] = useState<{
+    configured: boolean;
+    running: boolean;
+    account?: string;
+    topic?: string;
+    gogAvailable: boolean;
+  } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  // Gmail configuration state
+  const [gmailAccount, setGmailAccount] = useState('');
+  const [gmailTopic, setGmailTopic] = useState('');
+
+  useEffect(() => {
+    loadSettings();
+    loadStatus();
+    loadGmailStatus();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      const data = await window.electronAPI.getHooksSettings();
+      setSettings(data);
+      if (data.gmail) {
+        setGmailAccount(data.gmail.account || '');
+        setGmailTopic(data.gmail.topic || '');
+      }
+    } catch (err) {
+      console.error('Failed to load hooks settings:', err);
+      setError('Failed to load hooks settings');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadStatus = async () => {
+    try {
+      const data = await window.electronAPI.getHooksStatus();
+      setStatus(data);
+    } catch (err) {
+      console.error('Failed to load hooks status:', err);
+    }
+  };
+
+  const loadGmailStatus = async () => {
+    try {
+      const data = await window.electronAPI.getGmailHooksStatus();
+      setGmailStatus(data);
+    } catch (err) {
+      console.error('Failed to load Gmail status:', err);
+    }
+  };
+
+  const handleEnableHooks = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      const result = await window.electronAPI.enableHooks();
+      if (result.gmailWatcherError) {
+        setSuccess(`Webhooks enabled, but Gmail watcher failed: ${result.gmailWatcherError}`);
+      } else {
+        setSuccess('Webhooks enabled successfully');
+      }
+      await loadSettings();
+      await loadStatus();
+    } catch (err: any) {
+      setError(err.message || 'Failed to enable webhooks');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDisableHooks = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      await window.electronAPI.disableHooks();
+      setSuccess('Webhooks disabled');
+      await loadSettings();
+      await loadStatus();
+      await loadGmailStatus();
+    } catch (err: any) {
+      setError(err.message || 'Failed to disable webhooks');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleRegenerateToken = async () => {
+    if (!confirm('This will invalidate all existing webhook clients. Continue?')) {
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const result = await window.electronAPI.regenerateHookToken();
+      // Show the new token in an alert so user can copy it (it won't be visible after refresh)
+      alert(`New token generated:\n\n${result.token}\n\nCopy this token now - it won't be shown again.`);
+      setSuccess('Token regenerated successfully.');
+      await loadSettings();
+    } catch (err: any) {
+      setError(err.message || 'Failed to regenerate token');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleConfigureGmail = async () => {
+    if (!gmailAccount.trim()) {
+      setError('Gmail account is required');
+      return;
+    }
+    if (!gmailTopic.trim()) {
+      setError('Pub/Sub topic is required');
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      const config: GmailHooksSettingsData = {
+        account: gmailAccount.trim(),
+        topic: gmailTopic.trim(),
+      };
+      await window.electronAPI.configureGmailHooks(config);
+      setSuccess('Gmail hooks configured');
+      await loadSettings();
+      await loadGmailStatus();
+    } catch (err: any) {
+      setError(err.message || 'Failed to configure Gmail hooks');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleStartGmailWatcher = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      const result = await window.electronAPI.startGmailWatcher();
+      if (result.ok) {
+        setSuccess('Gmail watcher started');
+      } else {
+        setError(result.error || 'Failed to start Gmail watcher');
+      }
+      await loadGmailStatus();
+    } catch (err: any) {
+      setError(err.message || 'Failed to start Gmail watcher');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleStopGmailWatcher = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      await window.electronAPI.stopGmailWatcher();
+      setSuccess('Gmail watcher stopped');
+      await loadGmailStatus();
+    } catch (err: any) {
+      setError(err.message || 'Failed to stop Gmail watcher');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Clear success/error messages after delay
+  useEffect(() => {
+    if (success) {
+      const timer = setTimeout(() => setSuccess(null), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [success]);
+
+  useEffect(() => {
+    if (error) {
+      const timer = setTimeout(() => setError(null), 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [error]);
+
+  if (loading) {
+    return <div className="settings-loading">Loading hooks settings...</div>;
+  }
+
+  const isEnabled = settings?.enabled && status?.serverRunning;
+
+  return (
+    <div className="settings-subsection">
+      {/* Status Messages */}
+      {success && (
+        <div className="settings-message success">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+            <polyline points="22 4 12 14.01 9 11.01" />
+          </svg>
+          {success}
+        </div>
+      )}
+      {error && (
+        <div className="settings-message error">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+          {error}
+        </div>
+      )}
+
+      {/* Webhooks Section */}
+      <div className="settings-section">
+        <h3>Webhooks</h3>
+        <p className="settings-description">
+          Enable webhook endpoints to trigger tasks from external services. The webhook server
+          listens for HTTP requests and can create tasks based on incoming data.
+        </p>
+
+        {/* Status Indicator */}
+        <div className="hooks-status">
+          <div className="status-indicator">
+            <span className={`status-dot ${isEnabled ? 'connected' : 'disconnected'}`} />
+            <span>{isEnabled ? 'Server Running' : 'Server Stopped'}</span>
+          </div>
+          {status?.serverAddress && (
+            <span className="status-address">
+              http://{status.serverAddress.host}:{status.serverAddress.port}
+            </span>
+          )}
+        </div>
+
+        {/* Enable/Disable Button */}
+        <div className="settings-row">
+          <button
+            className={`settings-button ${isEnabled ? 'danger' : 'primary'}`}
+            onClick={isEnabled ? handleDisableHooks : handleEnableHooks}
+            disabled={saving}
+          >
+            {saving ? 'Processing...' : isEnabled ? 'Disable Webhooks' : 'Enable Webhooks'}
+          </button>
+        </div>
+
+        {/* Token Configuration */}
+        {settings?.enabled && (
+          <div className="hooks-token-section">
+            <div className="settings-row">
+              <label>Authentication Token</label>
+              <div className="token-display">
+                <code>{settings.token || '(not configured)'}</code>
+                <button
+                  className="settings-button small"
+                  onClick={handleRegenerateToken}
+                  disabled={saving}
+                >
+                  Regenerate
+                </button>
+              </div>
+            </div>
+            <p className="settings-hint">
+              Include this token in webhook requests via <code>Authorization: Bearer &lt;token&gt;</code> header
+              or <code>X-CoWork-Token</code> header.
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* Webhook Endpoints */}
+      {settings?.enabled && (
+        <div className="settings-section">
+          <h3>Available Endpoints</h3>
+          <div className="endpoints-list">
+            <div className="endpoint-item">
+              <code>POST /hooks/wake</code>
+              <span className="endpoint-desc">Enqueue a system event</span>
+            </div>
+            <div className="endpoint-item">
+              <code>POST /hooks/agent</code>
+              <span className="endpoint-desc">Run an isolated agent task</span>
+            </div>
+            {settings.presets.includes('gmail') && (
+              <div className="endpoint-item">
+                <code>POST /hooks/gmail</code>
+                <span className="endpoint-desc">Gmail Pub/Sub notifications (preset)</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Gmail Pub/Sub Section */}
+      <div className="settings-section">
+        <h3>Gmail Pub/Sub</h3>
+        <p className="settings-description">
+          Receive notifications when emails arrive in your Gmail inbox. Requires{' '}
+          <a href="https://gogcli.sh/" target="_blank" rel="noopener noreferrer">
+            gog (gogcli)
+          </a>{' '}
+          to be installed and configured.
+        </p>
+
+        {/* gog availability status */}
+        <div className="hooks-status">
+          <div className="status-indicator">
+            <span className={`status-dot ${gmailStatus?.gogAvailable ? 'connected' : 'error'}`} />
+            <span>
+              {gmailStatus?.gogAvailable
+                ? 'gog CLI available'
+                : 'gog CLI not found (install from gogcli.sh)'}
+            </span>
+          </div>
+        </div>
+
+        {/* Gmail Watcher Status */}
+        {gmailStatus?.running && (
+          <div className="hooks-status">
+            <div className="status-indicator">
+              <span className="status-dot connected" />
+              <span>Gmail watcher running for {gmailStatus.account}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Gmail Configuration */}
+        <div className="settings-row">
+          <label>Gmail Account</label>
+          <input
+            type="email"
+            value={gmailAccount}
+            onChange={(e) => setGmailAccount(e.target.value)}
+            placeholder="your-email@gmail.com"
+            disabled={saving || !settings?.enabled}
+          />
+        </div>
+
+        <div className="settings-row">
+          <label>Pub/Sub Topic</label>
+          <input
+            type="text"
+            value={gmailTopic}
+            onChange={(e) => setGmailTopic(e.target.value)}
+            placeholder="projects/your-project/topics/gmail-watch"
+            disabled={saving || !settings?.enabled}
+          />
+          <p className="settings-hint">
+            Full topic path from your GCP project.
+          </p>
+        </div>
+
+        {/* Gmail Actions */}
+        <div className="settings-row button-row">
+          <button
+            className="settings-button"
+            onClick={handleConfigureGmail}
+            disabled={saving || !settings?.enabled || !gmailAccount.trim() || !gmailTopic.trim()}
+          >
+            {saving ? 'Saving...' : 'Save Gmail Configuration'}
+          </button>
+
+          {gmailStatus?.configured && (
+            <>
+              {gmailStatus.running ? (
+                <button
+                  className="settings-button danger"
+                  onClick={handleStopGmailWatcher}
+                  disabled={saving}
+                >
+                  Stop Watcher
+                </button>
+              ) : (
+                <button
+                  className="settings-button primary"
+                  onClick={handleStartGmailWatcher}
+                  disabled={saving || !settings?.enabled || !gmailStatus.gogAvailable}
+                >
+                  Start Watcher
+                </button>
+              )}
+            </>
+          )}
+        </div>
+
+        {!settings?.enabled && (
+          <p className="settings-hint warning">
+            Enable webhooks first to configure Gmail Pub/Sub.
+          </p>
+        )}
+      </div>
+
+      {/* Usage Examples */}
+      <div className="settings-section">
+        <h3>Usage Examples</h3>
+        <div className="code-example">
+          <p className="example-title">Trigger an agent task:</p>
+          <pre>
+{`curl -X POST http://127.0.0.1:${settings?.port || 9877}/hooks/agent \\
+  -H 'Authorization: Bearer YOUR_TOKEN' \\
+  -H 'Content-Type: application/json' \\
+  -d '{"message": "Summarize my inbox", "name": "Email"}'`}
+          </pre>
+        </div>
+
+        <div className="code-example">
+          <p className="example-title">Wake the agent:</p>
+          <pre>
+{`curl -X POST http://127.0.0.1:${settings?.port || 9877}/hooks/wake \\
+  -H 'X-CoWork-Token: YOUR_TOKEN' \\
+  -H 'Content-Type: application/json' \\
+  -d '{"text": "New event received", "mode": "now"}'`}
+          </pre>
+        </div>
+      </div>
+
+      <style>{`
+        .hooks-status {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+          margin-bottom: 16px;
+          padding: 8px 12px;
+          background: var(--bg-secondary);
+          border-radius: 6px;
+        }
+
+        .status-indicator {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .status-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+        }
+
+        .status-dot.connected {
+          background: #10b981;
+        }
+
+        .status-dot.disconnected {
+          background: #6b7280;
+        }
+
+        .status-dot.error {
+          background: #ef4444;
+        }
+
+        .status-address {
+          font-family: monospace;
+          font-size: 12px;
+          color: var(--text-secondary);
+        }
+
+        .hooks-token-section {
+          margin-top: 16px;
+          padding: 12px;
+          background: var(--bg-secondary);
+          border-radius: 6px;
+        }
+
+        .token-display {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+        }
+
+        .token-display code {
+          flex: 1;
+          padding: 6px 10px;
+          background: var(--bg-primary);
+          border-radius: 4px;
+          font-size: 12px;
+          word-break: break-all;
+        }
+
+        .endpoints-list {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+
+        .endpoint-item {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 8px 12px;
+          background: var(--bg-secondary);
+          border-radius: 6px;
+        }
+
+        .endpoint-item code {
+          font-family: monospace;
+          font-size: 13px;
+          color: var(--accent-color);
+        }
+
+        .endpoint-desc {
+          font-size: 13px;
+          color: var(--text-secondary);
+        }
+
+        .button-row {
+          display: flex;
+          gap: 12px;
+        }
+
+        .settings-button.small {
+          padding: 4px 12px;
+          font-size: 12px;
+        }
+
+        .settings-button.danger {
+          background: #ef4444;
+          color: white;
+        }
+
+        .settings-button.danger:hover {
+          background: #dc2626;
+        }
+
+        .settings-hint.warning {
+          color: #f59e0b;
+        }
+
+        .code-example {
+          margin-bottom: 16px;
+          padding: 12px;
+          background: var(--bg-secondary);
+          border-radius: 6px;
+        }
+
+        .example-title {
+          margin-bottom: 8px;
+          font-size: 13px;
+          color: var(--text-secondary);
+        }
+
+        .code-example pre {
+          margin: 0;
+          padding: 10px;
+          background: var(--bg-primary);
+          border-radius: 4px;
+          font-size: 12px;
+          overflow-x: auto;
+          white-space: pre-wrap;
+          word-break: break-all;
+        }
+
+        .settings-message {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 10px 12px;
+          margin-bottom: 16px;
+          border-radius: 6px;
+          font-size: 13px;
+        }
+
+        .settings-message.success {
+          background: rgba(16, 185, 129, 0.1);
+          color: #10b981;
+        }
+
+        .settings-message.error {
+          background: rgba(239, 68, 68, 0.1);
+          color: #ef4444;
+        }
+      `}</style>
+    </div>
+  );
+}