@agent-relay/dashboard 2.0.81 → 2.0.82

package/src/components/TerminalProviderSetup.tsx

@@ -0,0 +1,517 @@
+/**
+ * TerminalProviderSetup Component
+ *
+ * Reusable component for terminal-based provider authentication setup.
+ * Handles agent spawning, interactive terminal, and cleanup.
+ * Users copy and paste auth URLs from the terminal output.
+ *
+ * Used in:
+ * - /providers/setup/[provider] page (full-page setup)
+ * - WorkspaceSettingsPanel (embedded setup)
+ */
+
+import React, { useRef, useEffect, useCallback, useState } from 'react';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+
+export interface ProviderConfig {
+  id: string;
+  name: string;
+  displayName: string;
+  color: string;
+}
+
+export interface TerminalProviderSetupProps {
+  /** Provider configuration */
+  provider: ProviderConfig;
+  /** Workspace ID to spawn agent in */
+  workspaceId: string;
+  /** CSRF token for API requests */
+  csrfToken?: string;
+  /** Maximum height of the terminal */
+  maxHeight?: string;
+  /** Called when authentication is detected as complete */
+  onSuccess?: () => void;
+  /** Called when an error occurs */
+  onError?: (error: string) => void;
+  /** Called when cancel is requested */
+  onCancel?: () => void;
+  /** Called when user wants to connect another provider */
+  onConnectAnother?: () => void;
+  /** Whether to show header with close button */
+  showHeader?: boolean;
+  /** Custom class name */
+  className?: string;
+}
+
+// Terminal theme matching dashboard dark theme
+const TERMINAL_THEME = {
+  background: '#0d0f14',
+  foreground: '#c9d1d9',
+  cursor: '#58a6ff',
+  cursorAccent: '#0d0f14',
+  selectionBackground: '#264f78',
+  selectionForeground: '#ffffff',
+  black: '#484f58',
+  red: '#f85149',
+  green: '#3fb950',
+  yellow: '#d29922',
+  blue: '#58a6ff',
+  magenta: '#bc8cff',
+  cyan: '#39c5cf',
+  white: '#b1bac4',
+  brightBlack: '#6e7681',
+  brightRed: '#ff7b72',
+  brightGreen: '#56d364',
+  brightYellow: '#e3b341',
+  brightBlue: '#79c0ff',
+  brightMagenta: '#d2a8ff',
+  brightCyan: '#56d4dd',
+  brightWhite: '#ffffff',
+};
+
+
+export function TerminalProviderSetup({
+  provider,
+  workspaceId,
+  csrfToken: initialCsrfToken,
+  maxHeight = '400px',
+  onSuccess,
+  onError,
+  onCancel,
+  onConnectAnother,
+  showHeader = true,
+  className = '',
+}: TerminalProviderSetupProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const terminalRef = useRef<Terminal | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const hasShownConnectedRef = useRef(false); // Prevent duplicate "Connected" messages
+  const onDataDisposableRef = useRef<{ dispose: () => void } | null>(null); // Track onData handler for cleanup
+
+  const [isSpawning, setIsSpawning] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [agentName, setAgentName] = useState<string | null>(null);
+  const [isComplete, setIsComplete] = useState(false);
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(initialCsrfToken);
+
+  // Generate unique agent name
+  const generateAgentName = useCallback(() => {
+    const timestamp = Date.now().toString(36);
+    const random = Math.random().toString(36).substring(2, 6);
+    return `__setup__${provider.id}-${timestamp}${random}`;
+  }, [provider.id]);
+
+  // Fetch CSRF token if not provided
+  useEffect(() => {
+    if (!csrfToken) {
+      fetch('/api/auth/session', { credentials: 'include' })
+        .then(res => {
+          const token = res.headers.get('X-CSRF-Token');
+          if (token) setCsrfToken(token);
+        })
+        .catch(() => {});
+    }
+  }, [csrfToken]);
+
+  // Cleanup agent
+  const cleanupAgent = useCallback(async () => {
+    if (!workspaceId || !agentName) return;
+
+    try {
+      const headers: Record<string, string> = {};
+      if (csrfToken) headers['X-CSRF-Token'] = csrfToken;
+
+      await fetch(`/api/workspaces/${workspaceId}/agents/${encodeURIComponent(agentName)}`, {
+        method: 'DELETE',
+        credentials: 'include',
+        headers,
+      });
+    } catch {
+      // Ignore cleanup errors
+    }
+  }, [workspaceId, agentName, csrfToken]);
+
+  // Spawn agent
+  const spawnAgent = useCallback(async () => {
+    if (!workspaceId || !csrfToken) return;
+
+    setIsSpawning(true);
+    setError(null);
+
+    const name = generateAgentName();
+
+    try {
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+      if (csrfToken) headers['X-CSRF-Token'] = csrfToken;
+
+      const res = await fetch(`/api/workspaces/${workspaceId}/agents`, {
+        method: 'POST',
+        credentials: 'include',
+        headers,
+        body: JSON.stringify({
+          name,
+          provider: provider.id === 'anthropic' ? 'claude' : provider.id,
+          interactive: true, // Disable auto-accept prompts
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || 'Failed to spawn agent');
+      }
+
+      setAgentName(name);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to spawn agent';
+      setError(message);
+      onError?.(message);
+    } finally {
+      setIsSpawning(false);
+    }
+  }, [workspaceId, csrfToken, provider.id, generateAgentName, onError]);
+
+  // Initialize terminal
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const terminal = new Terminal({
+      theme: TERMINAL_THEME,
+      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+      fontSize: 12,
+      lineHeight: 1.4,
+      convertEol: true,
+      scrollback: 10000,
+      cursorBlink: true,
+      cursorStyle: 'block',
+      disableStdin: false,
+      allowProposedApi: true,
+    });
+
+    const fitAddon = new FitAddon();
+    terminal.loadAddon(fitAddon);
+    terminal.open(containerRef.current);
+    fitAddon.fit();
+
+    terminalRef.current = terminal;
+    fitAddonRef.current = fitAddon;
+
+    // Handle resize
+    const resizeObserver = new ResizeObserver(() => {
+      fitAddon.fit();
+    });
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+      terminal.dispose();
+      terminalRef.current = null;
+      fitAddonRef.current = null;
+    };
+  }, []);
+
+  // Connect WebSocket when agent is spawned
+  useEffect(() => {
+    if (!agentName || !workspaceId) return;
+
+    // Reset the connected message flag when agent changes
+    hasShownConnectedRef.current = false;
+
+    const connectWebSocket = () => {
+      // Don't reconnect if we already have an open connection
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        return;
+      }
+
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const wsUrl = `${protocol}//${window.location.host}/ws/logs/${encodeURIComponent(workspaceId)}/${encodeURIComponent(agentName)}`;
+
+      setIsConnecting(true);
+      const ws = new WebSocket(wsUrl);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        setIsConnected(true);
+        setIsConnecting(false);
+        // Only show connected message once per session
+        if (!hasShownConnectedRef.current) {
+          hasShownConnectedRef.current = true;
+          terminalRef.current?.writeln('\x1b[90m[Connected - Interactive Mode]\x1b[0m');
+          terminalRef.current?.writeln('\x1b[90m[Type directly to respond to prompts]\x1b[0m\n');
+        }
+      };
+
+      ws.onclose = () => {
+        setIsConnected(false);
+        setIsConnecting(false);
+
+        // Reconnect after delay (only if not intentionally closed)
+        reconnectTimeoutRef.current = setTimeout(connectWebSocket, 2000);
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+
+          if (data.type === 'history' && Array.isArray(data.lines)) {
+            data.lines.forEach((line: string) => {
+              terminalRef.current?.writeln(line);
+            });
+          } else if (data.type === 'log' || data.type === 'output') {
+            const content = data.content || data.data || data.message || '';
+            if (content) {
+              terminalRef.current?.write(content);
+            }
+          }
+        } catch {
+          if (typeof event.data === 'string') {
+            terminalRef.current?.write(event.data);
+          }
+        }
+      };
+
+      // Clean up previous onData handler before adding new one
+      if (onDataDisposableRef.current) {
+        onDataDisposableRef.current.dispose();
+        onDataDisposableRef.current = null;
+      }
+
+      // Handle user input - store disposable for cleanup
+      // Suppress input when user has text selected (e.g., copying OAuth URL)
+      if (terminalRef.current) {
+        onDataDisposableRef.current = terminalRef.current.onData((data: string) => {
+          // Don't send input if user has text selected (likely copying a URL)
+          const selection = terminalRef.current?.getSelection();
+          if (selection && selection.length > 0) {
+            return; // User is selecting/copying text, don't send input
+          }
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: 'input', agent: agentName, data }));
+          }
+        });
+      }
+    };
+
+    connectWebSocket();
+
+    return () => {
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
+      if (onDataDisposableRef.current) {
+        onDataDisposableRef.current.dispose();
+        onDataDisposableRef.current = null;
+      }
+      wsRef.current?.close();
+      wsRef.current = null;
+    };
+  }, [agentName, workspaceId]);
+
+  // Auto-spawn on mount
+  useEffect(() => {
+    if (csrfToken && !agentName && !isSpawning) {
+      spawnAgent();
+    }
+  }, [csrfToken, agentName, isSpawning, spawnAgent]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      cleanupAgent();
+    };
+  }, [cleanupAgent]);
+
+  const handleComplete = useCallback(async () => {
+    // Mark provider as connected in the database
+    // Use provider.name (canonical backend name e.g. 'codex', 'anthropic')
+    const providerName = provider.name || provider.id;
+    try {
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+      if (csrfToken) headers['X-CSRF-Token'] = csrfToken;
+
+      const response = await fetch(`/api/onboarding/mark-connected/${providerName}`, {
+        method: 'POST',
+        credentials: 'include',
+        headers,
+        body: JSON.stringify({ workspaceId }),
+      });
+
+      if (!response.ok) {
+        console.error('Failed to mark provider as connected:', await response.text());
+      }
+    } catch (err) {
+      console.error('Error marking provider as connected:', err);
+    }
+
+    await cleanupAgent();
+    setIsComplete(true);
+  }, [cleanupAgent, provider.id, provider.name, csrfToken, workspaceId]);
+
+  const handleDone = useCallback(() => {
+    onSuccess?.();
+  }, [onSuccess]);
+
+  const handleConnectAnother = useCallback(() => {
+    onConnectAnother?.();
+  }, [onConnectAnother]);
+
+  const handleCancel = useCallback(async () => {
+    await cleanupAgent();
+    onCancel?.();
+  }, [cleanupAgent, onCancel]);
+
+  return (
+    <div className={`flex flex-col rounded-xl overflow-hidden border border-border-subtle ${className}`}>
+      {/* Header */}
+      {showHeader && (
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border-subtle bg-bg-tertiary">
+          <div className="flex items-center gap-3">
+            <div
+              className="w-8 h-8 rounded-lg flex items-center justify-center text-white font-bold text-sm"
+              style={{ backgroundColor: provider.color }}
+            >
+              {provider.displayName[0]}
+            </div>
+            <div>
+              <h4 className="text-sm font-semibold text-text-primary">
+                {provider.displayName} Setup
+              </h4>
+              <p className="text-xs text-text-muted">Interactive terminal</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {isConnected && (
+              <span className="flex items-center gap-1 px-2 py-1 rounded-full bg-success/15 text-xs text-success">
+                <span className="w-1.5 h-1.5 rounded-full bg-success animate-pulse" />
+                Connected
+              </span>
+            )}
+            {onCancel && (
+              <button
+                onClick={handleCancel}
+                className="p-1.5 rounded-lg hover:bg-bg-hover text-text-muted hover:text-text-primary transition-colors"
+              >
+                <CloseIcon />
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Success State */}
+      {isComplete ? (
+        <div className="flex flex-col items-center justify-center py-12 px-6">
+          <div
+            className="w-16 h-16 rounded-full flex items-center justify-center mb-4"
+            style={{ backgroundColor: `${provider.color}20` }}
+          >
+            <CheckIcon className="w-8 h-8" style={{ color: provider.color }} />
+          </div>
+          <h3 className="text-lg font-semibold text-text-primary mb-2">
+            {provider.displayName} Connected!
+          </h3>
+          <p className="text-sm text-text-muted mb-6 text-center">
+            Your {provider.displayName} account has been successfully connected.
+          </p>
+          <div className="flex gap-3">
+            {onConnectAnother && (
+              <button
+                onClick={handleConnectAnother}
+                className="px-4 py-2 bg-bg-hover text-text-primary text-sm font-medium rounded-lg hover:bg-bg-tertiary transition-colors border border-border-subtle"
+              >
+                Connect Another Provider
+              </button>
+            )}
+            <button
+              onClick={handleDone}
+              className="px-4 py-2 bg-accent-cyan text-bg-deep text-sm font-semibold rounded-lg hover:bg-accent-cyan/90 transition-colors"
+            >
+              Continue to Dashboard
+            </button>
+          </div>
+        </div>
+      ) : (
+        <>
+          {/* Error */}
+          {error && (
+            <div className="px-4 py-3 bg-error/10 border-b border-error/30 text-sm text-error flex items-center gap-2">
+              <AlertIcon />
+              <span>{error}</span>
+              <button
+                onClick={spawnAgent}
+                className="ml-auto text-xs px-2 py-1 rounded bg-error/20 hover:bg-error/30 transition-colors"
+              >
+                Retry
+              </button>
+            </div>
+          )}
+
+          {/* Spawning indicator */}
+          {isSpawning && (
+            <div className="px-4 py-3 bg-accent-cyan/10 border-b border-accent-cyan/30 text-sm text-accent-cyan flex items-center gap-2">
+              <div className="w-4 h-4 border-2 border-accent-cyan/30 border-t-accent-cyan rounded-full animate-spin" />
+              <span>Starting {provider.displayName}...</span>
+            </div>
+          )}
+
+          {/* Terminal */}
+          <div
+            ref={containerRef}
+            className="flex-1 bg-[#0d0f14]"
+            style={{ minHeight: '300px', maxHeight }}
+            onClick={() => terminalRef.current?.focus()}
+          />
+
+          {/* Footer with actions */}
+          <div className="flex items-center justify-between px-4 py-3 border-t border-border-subtle bg-bg-tertiary">
+            <p className="text-xs text-text-muted">
+              Respond to prompts above to complete setup
+            </p>
+            <button
+              onClick={handleComplete}
+              className="px-4 py-2 bg-accent-cyan text-bg-deep text-sm font-semibold rounded-lg hover:bg-accent-cyan/90 transition-colors"
+            >
+              Done - Continue
+            </button>
+          </div>
+        </>
+      )}
+
+    </div>
+  );
+}
+
+// Icons
+function CloseIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+function AlertIcon() {
+  return (
+    <svg width="14" height="14" 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>
+  );
+}
+
+function CheckIcon({ className, style }: { className?: string; style?: React.CSSProperties }) {
+  return (
+    <svg className={className} style={style} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+export default TerminalProviderSetup;

package/src/components/ThemeProvider.tsx

@@ -0,0 +1,159 @@
+/**
+ * ThemeProvider Component
+ *
+ * Provides theme context for light/dark mode support.
+ * Handles system preference detection and persistence.
+ *
+ * Note: Theme colors are defined as CSS variables in globals.css
+ * and referenced by Tailwind config. This enables automatic theme
+ * switching without duplicate style definitions.
+ */
+
+import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
+
+export type Theme = 'light' | 'dark' | 'system';
+export type ResolvedTheme = 'light' | 'dark';
+
+export interface ThemeContextValue {
+  theme: Theme;
+  resolvedTheme: ResolvedTheme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'dashboard-theme',
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    // Try to get from storage
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === 'light' || stored === 'dark' || stored === 'system') {
+        return stored;
+      }
+    }
+    return defaultTheme;
+  });
+
+  const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(() => {
+    if (typeof window !== 'undefined') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return 'light';
+  });
+
+  // Listen for system theme changes
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      setSystemTheme(e.matches ? 'dark' : 'light');
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  // Resolve theme
+  const resolvedTheme: ResolvedTheme = theme === 'system' ? systemTheme : theme;
+
+  // Apply theme to document
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    const root = document.documentElement;
+    root.classList.remove('theme-light', 'theme-dark');
+    root.classList.add(`theme-${resolvedTheme}`);
+    root.style.colorScheme = resolvedTheme;
+  }, [resolvedTheme]);
+
+  // Set theme with persistence
+  const setTheme = useCallback(
+    (newTheme: Theme) => {
+      setThemeState(newTheme);
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(storageKey, newTheme);
+      }
+    },
+    [storageKey]
+  );
+
+  // Toggle between light and dark
+  const toggleTheme = useCallback(() => {
+    setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+  }, [resolvedTheme, setTheme]);
+
+  const value = useMemo(
+    () => ({ theme, resolvedTheme, setTheme, toggleTheme }),
+    [theme, resolvedTheme, setTheme, toggleTheme]
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+/**
+ * ThemeToggle Component
+ * A simple button to toggle between themes
+ */
+export interface ThemeToggleProps {
+  showLabel?: boolean;
+  className?: string;
+}
+
+export function ThemeToggle({ showLabel = false, className = '' }: ThemeToggleProps) {
+  const { resolvedTheme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      className={`flex items-center gap-2 p-2 bg-bg-tertiary border border-border rounded-lg text-text-secondary hover:bg-bg-hover hover:text-text-primary transition-all text-sm ${className}`}
+      onClick={toggleTheme}
+      aria-label={`Switch to ${resolvedTheme === 'light' ? 'dark' : 'light'} mode`}
+    >
+      {resolvedTheme === 'light' ? <MoonIcon /> : <SunIcon />}
+      {showLabel && <span>{resolvedTheme === 'light' ? 'Dark' : 'Light'} mode</span>}
+    </button>
+  );
+}
+
+function SunIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+  );
+}
+
+function MoonIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}