@agent-relay/dashboard 2.0.82 → 2.0.84

package/src/app/providers/setup/[provider]/ProviderSetupClient.tsx

@@ -1,13 +1,14 @@
 /**
  * Provider Setup Client Component
  *
- * Full-page interactive terminal for provider authentication and setup.
- * Uses the shared TerminalProviderSetup component.
+ * Full-page provider setup that supports both workspace mode and onboarding mode.
+ * - Workspace mode: optionally route back to a specific workspace
+ * - Onboarding mode: no workspaceId required; use auth mode "onboarding"
  */
 
 'use client';
 
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { LogoIcon } from '../../../../components/Logo';
 import { TerminalProviderSetup } from '../../../../components/TerminalProviderSetup';
@@ -23,12 +24,13 @@ const PROVIDER_AUTH_CONFIG: Record<string, {
   codex: { authMethod: 'oauth', requiresUrlCopy: true },
   openai: { authMethod: 'oauth', requiresUrlCopy: true },
   cursor: { authMethod: 'oauth', requiresUrlCopy: true },
-  // Gemini uses terminal - CLI shows interactive menu for OAuth vs API key
   google: { authMethod: 'terminal' },
   opencode: { authMethod: 'terminal' },
   droid: { authMethod: 'terminal' },
 };
 
+type SetupMode = 'api_key' | 'cli';
+
 export interface ProviderSetupClientProps {
   provider: string;
 }
@@ -36,10 +38,122 @@ export interface ProviderSetupClientProps {
 export function ProviderSetupClient({ provider }: ProviderSetupClientProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const workspaceId = searchParams.get('workspace');
+  const workspaceId = searchParams.get('workspace') || undefined;
+
+  const [csrfToken, setCsrfToken] = useState<string | null>(null);
+  const [setupMode, setSetupMode] = useState<SetupMode>(workspaceId ? 'cli' : 'api_key');
+  const [apiKey, setApiKey] = useState('');
+  const [apiKeyError, setApiKeyError] = useState<string | null>(null);
+  const [apiKeySuccess, setApiKeySuccess] = useState<string | null>(null);
+  const [isSubmittingApiKey, setIsSubmittingApiKey] = useState(false);
 
   const config = PROVIDER_CONFIGS[provider];
 
+  useEffect(() => {
+    fetch('/api/auth/session', { credentials: 'include' })
+      .then((res) => {
+        const token = res.headers.get('X-CSRF-Token');
+        if (token) {
+          setCsrfToken(token);
+        }
+      })
+      .catch(() => {
+        // Ignore CSRF bootstrap errors here; requests still run without token if server allows.
+      });
+  }, []);
+
+  const returnPath = workspaceId ? `/app?workspace=${workspaceId}` : '/app/onboarding';
+
+  const handleSuccess = useCallback(() => {
+    router.push(returnPath);
+  }, [router, returnPath]);
+
+  const handleCancel = useCallback(() => {
+    router.push(returnPath);
+  }, [router, returnPath]);
+
+  const handleConnectAnother = useCallback(() => {
+    if (workspaceId) {
+      router.push(`/providers?workspace=${workspaceId}`);
+      return;
+    }
+
+    router.push('/app/onboarding');
+  }, [router, workspaceId]);
+
+  const supportsApiKey = useMemo(
+    () => ['anthropic', 'codex', 'openai', 'google'].includes(config?.name || ''),
+    [config?.name]
+  );
+
+  const authConfig = config ? PROVIDER_AUTH_CONFIG[config.name] : undefined;
+  const isOAuthProvider = authConfig?.authMethod === 'oauth';
+
+  const submitApiKey = useCallback(async () => {
+    if (!config) {
+      return;
+    }
+
+    if (!apiKey.trim()) {
+      setApiKeyError('Please enter an API key');
+      return;
+    }
+
+    setIsSubmittingApiKey(true);
+    setApiKeyError(null);
+    setApiKeySuccess(null);
+
+    try {
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+      if (csrfToken) {
+        headers['X-CSRF-Token'] = csrfToken;
+      }
+
+      const providerCandidates = config.name === 'codex'
+        ? ['openai', 'codex']
+        : [config.name];
+
+      let connected = false;
+      let lastError = 'Failed to connect API key';
+
+      for (const providerName of providerCandidates) {
+        const body: Record<string, string> = { apiKey: apiKey.trim() };
+        if (workspaceId) {
+          body.workspaceId = workspaceId;
+        }
+
+        const res = await fetch(`/api/providers/${providerName}/api-key`, {
+          method: 'POST',
+          credentials: 'include',
+          headers,
+          body: JSON.stringify(body),
+        });
+
+        if (res.ok) {
+          connected = true;
+          break;
+        }
+
+        const data = await res.json().catch(() => ({}));
+        lastError = data.error || data.message || 'Failed to connect API key';
+      }
+
+      if (!connected) {
+        throw new Error(lastError);
+      }
+
+      setApiKey('');
+      setApiKeySuccess(`${config.displayName} connected successfully.`);
+      setTimeout(() => {
+        handleSuccess();
+      }, 800);
+    } catch (err) {
+      setApiKeyError(err instanceof Error ? err.message : 'Failed to connect API key');
+    } finally {
+      setIsSubmittingApiKey(false);
+    }
+  }, [apiKey, config, csrfToken, handleSuccess, workspaceId]);
+
   if (!config) {
     return (
       <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex items-center justify-center">
@@ -53,36 +167,6 @@ export function ProviderSetupClient({ provider }: ProviderSetupClientProps) {
     );
   }
 
-  if (!workspaceId) {
-    return (
-      <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex items-center justify-center">
-        <div className="text-center">
-          <p className="text-error">No workspace specified</p>
-          <a href="/app" className="mt-4 text-accent-cyan hover:underline">
-            Back to dashboard
-          </a>
-        </div>
-      </div>
-    );
-  }
-
-  const handleSuccess = () => {
-    router.push(`/app?workspace=${workspaceId}`);
-  };
-
-  const handleCancel = () => {
-    router.push(`/app?workspace=${workspaceId}`);
-  };
-
-  const handleConnectAnother = () => {
-    // Navigate to providers page to select another provider
-    router.push(`/providers?workspace=${workspaceId}`);
-  };
-
-  // Get auth configuration for this provider
-  const authConfig = PROVIDER_AUTH_CONFIG[config.name];
-  const isOAuthProvider = authConfig?.authMethod === 'oauth';
-
   return (
     <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] p-8">
       <div className="max-w-4xl mx-auto">
@@ -93,7 +177,7 @@ export function ProviderSetupClient({ provider }: ProviderSetupClientProps) {
             <span className="text-lg font-bold text-white">Agent Relay</span>
           </a>
           <a
-            href={`/app?workspace=${workspaceId}`}
+            href={returnPath}
             className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
           >
             Skip for now →
@@ -117,29 +201,93 @@ export function ProviderSetupClient({ provider }: ProviderSetupClientProps) {
             </h1>
           </div>
           <p className="text-text-muted">
-            {isOAuthProvider
-              ? 'Follow the instructions below to authenticate using your local terminal'
-              : 'Complete the authentication flow in the interactive terminal below'
-            }
+            {workspaceId
+              ? 'Authenticate provider access for this workspace.'
+              : 'Authenticate provider access during onboarding before workspace provisioning.'}
           </p>
         </div>
 
-        {/* Auth Component - OAuth or Terminal based on provider config */}
-        {isOAuthProvider ? (
+        {/* Setup mode selector */}
+        {supportsApiKey && (
+          <div className="mb-6 flex gap-2 p-1 bg-bg-primary/80 backdrop-blur-sm border border-border-subtle rounded-xl">
+            <button
+              onClick={() => setSetupMode('api_key')}
+              className={`flex-1 py-2.5 px-4 rounded-lg text-sm transition-colors ${
+                setupMode === 'api_key'
+                  ? 'bg-accent-cyan text-bg-deep font-semibold'
+                  : 'text-text-muted hover:text-white'
+              }`}
+            >
+              API Key Input
+            </button>
+            <button
+              onClick={() => setSetupMode('cli')}
+              className={`flex-1 py-2.5 px-4 rounded-lg text-sm transition-colors ${
+                setupMode === 'cli'
+                  ? 'bg-accent-cyan text-bg-deep font-semibold'
+                  : 'text-text-muted hover:text-white'
+              }`}
+            >
+              Authenticate via CLI
+            </button>
+          </div>
+        )}
+
+        {/* API key setup */}
+        {supportsApiKey && setupMode === 'api_key' ? (
+          <div className="bg-bg-primary/80 backdrop-blur-sm border border-border-subtle rounded-2xl p-6 shadow-2xl space-y-4">
+            <p className="text-sm text-text-muted">
+              Enter your {config.displayName} API key. In onboarding mode, this is stored at the user level and reused during workspace provisioning.
+            </p>
+            <div className="flex gap-3">
+              <input
+                type="password"
+                value={apiKey}
+                onChange={(event) => setApiKey(event.target.value)}
+                placeholder={`Enter ${config.displayName} API key`}
+                className="flex-1 px-4 py-3 bg-bg-tertiary border border-border-subtle rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent-cyan focus:ring-1 focus:ring-accent-cyan/30 transition-all"
+              />
+              <button
+                onClick={submitApiKey}
+                disabled={isSubmittingApiKey || !apiKey.trim()}
+                className="px-5 py-3 bg-accent-cyan text-bg-deep font-semibold rounded-lg text-sm hover:bg-accent-cyan/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+              >
+                {isSubmittingApiKey ? 'Connecting...' : 'Connect'}
+              </button>
+            </div>
+
+            {apiKeyError && (
+              <div className="p-3 bg-error/10 border border-error/30 rounded-lg text-sm text-error">
+                {apiKeyError}
+              </div>
+            )}
+
+            {apiKeySuccess && (
+              <div className="p-3 bg-success/10 border border-success/30 rounded-lg text-sm text-success">
+                {apiKeySuccess}
+              </div>
+            )}
+          </div>
+        ) : isOAuthProvider ? (
           <ProviderAuthFlow
             provider={{
               id: config.name,
               name: config.name,
               displayName: config.displayName,
               color: config.color,
-              requiresUrlCopy: authConfig.requiresUrlCopy,
+              requiresUrlCopy: authConfig?.requiresUrlCopy,
             }}
             workspaceId={workspaceId}
+            mode={workspaceId ? 'workspace' : 'onboarding'}
+            csrfToken={csrfToken || undefined}
+            showManualDone={!workspaceId}
             onSuccess={handleSuccess}
             onCancel={handleCancel}
-            onError={(err) => console.error('Setup error:', err)}
+            onError={(err) => {
+              setApiKeyError(err);
+            }}
           />
-        ) : (
+        ) : workspaceId ? (
           <TerminalProviderSetup
             provider={{
               id: config.id,
@@ -153,29 +301,31 @@ export function ProviderSetupClient({ provider }: ProviderSetupClientProps) {
             onSuccess={handleSuccess}
             onCancel={handleCancel}
             onConnectAnother={handleConnectAnother}
-            onError={(err) => console.error('Setup error:', err)}
+            onError={(err) => setApiKeyError(err)}
             className="shadow-2xl"
           />
+        ) : (
+          <div className="bg-bg-primary/80 backdrop-blur-sm border border-border-subtle rounded-2xl p-6 text-center">
+            <p className="text-text-muted text-sm">
+              Interactive terminal setup requires a workspace. Use API key input or CLI authentication for onboarding mode.
+            </p>
+          </div>
         )}
 
         {/* Help text */}
         <div className="mt-6 p-4 bg-bg-primary/80 backdrop-blur-sm border border-border-subtle rounded-xl">
           <h3 className="text-white font-medium mb-2">How this works:</h3>
-          {isOAuthProvider ? (
+          {setupMode === 'api_key' && supportsApiKey ? (
             <ol className="text-sm text-text-muted space-y-1 list-decimal list-inside">
-              <li>Copy the command shown above and run it in your terminal</li>
-              <li>The CLI will open your browser automatically for OAuth login</li>
-              <li>Complete the authentication in your browser</li>
-              <li>The CLI will capture the callback and complete the setup</li>
-              <li>Return here to continue to the dashboard</li>
+              <li>Paste your provider API key</li>
+              <li>Click connect to store credentials securely</li>
+              <li>Continue back to onboarding or dashboard</li>
             </ol>
           ) : (
             <ol className="text-sm text-text-muted space-y-1 list-decimal list-inside">
-              <li>The terminal above is interactive - respond to any prompts by typing directly</li>
-              <li>When a login URL appears, copy and paste it into your browser</li>
-              <li>Complete the login in your browser, then return here</li>
-              <li>Answer any remaining prompts (skills, permissions, etc.) in the terminal</li>
-              <li>Once connected, click &quot;Done - Continue&quot; to go to the dashboard</li>
+              <li>Copy the command shown and run it in your terminal</li>
+              <li>Complete the authentication flow in browser/CLI</li>
+              <li>Return here and continue once connected</li>
             </ol>
           )}
         </div>
@@ -183,10 +333,10 @@ export function ProviderSetupClient({ provider }: ProviderSetupClientProps) {
         {/* Fallback link */}
         <div className="mt-4 text-center">
           <a
-            href={`/providers?connect=${config.id}&workspace=${workspaceId}`}
+            href={workspaceId ? `/providers?connect=${config.id}&workspace=${workspaceId}` : '/app/onboarding'}
             className="text-sm text-text-muted hover:text-accent-cyan transition-colors"
           >
-            Having trouble? Try the popup-based login instead →
+            Having trouble? Try another connection method →
           </a>
         </div>
       </div>

package/src/components/AgentCard.tsx

@@ -185,7 +185,7 @@ export function AgentCard({
               <span
                 className="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-medium uppercase tracking-wider
                            bg-warning-light text-warning border border-warning/30"
-                title={`Local agent from ${agent.daemonName || 'linked daemon'}`}
+                title={`Local agent from ${agent.brokerName || 'linked broker'}`}
               >
                 Local
               </span>
@@ -329,7 +329,7 @@ export function AgentCard({
               <span
                 className="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-medium uppercase tracking-wider
                            bg-warning-light text-warning border border-warning/30"
-                title={`Local agent from ${agent.daemonName || 'linked daemon'}`}
+                title={`Local agent from ${agent.brokerName || 'linked broker'}`}
               >
                 Local
               </span>
@@ -352,9 +352,9 @@ export function AgentCard({
             )}
           </div>
           {showBreadcrumb ? (
-            <span className="text-xs text-text-muted truncate block">{agent.isLocal ? agent.daemonName || agent.machineId : getAgentBreadcrumb(agent.name)}</span>
+            <span className="text-xs text-text-muted truncate block">{agent.isLocal ? agent.brokerName || agent.machineId : getAgentBreadcrumb(agent.name)}</span>
           ) : (
-            <span className="text-xs text-text-muted truncate block">{agent.isLocal ? agent.daemonName || agent.machineId : agent.name}</span>
+            <span className="text-xs text-text-muted truncate block">{agent.isLocal ? agent.brokerName || agent.machineId : agent.name}</span>
           )}
           {agent.agentId && (
             <span className="text-[10px] text-text-muted font-mono opacity-70" title="Agent ID (use to resume)">

package/src/components/AgentLogPreview.tsx

@@ -8,6 +8,7 @@
 import React, { useMemo } from 'react';
 import { useAgentLogs } from './hooks/useAgentLogs';
 import { getAgentColor } from '../lib/colors';
+import { sanitizeLogContent, isSpinnerFragment } from '../lib/sanitize-logs';
 
 export interface AgentLogPreviewProps {
   agentName: string;
@@ -33,8 +34,6 @@ export function AgentLogPreview({
   const colors = getAgentColor(agentName);
 
   const previewLines = useMemo(() => {
-    const spinnerPattern = /^[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⣾⣽⣻⢿⡿⣟⣯⣷◐◓◑◒●○◉◎|\\\/\-*.\u2800-\u28FF]+$/;
-
     const allLines: string[] = [];
     for (const log of logs) {
       if (log.type === 'system') continue;
@@ -42,7 +41,7 @@ export function AgentLogPreview({
       for (const rawLine of sanitized.split('\n')) {
         const trimmed = rawLine.trim();
         if (trimmed.length === 0) continue;
-        if (trimmed.length <= 2 && spinnerPattern.test(trimmed)) continue;
+        if (isSpinnerFragment(trimmed)) continue;
         allLines.push(rawLine.replace(/\s+$/g, ''));
       }
     }
@@ -136,38 +135,3 @@ function ExpandIcon() {
   );
 }
 
-/**
- * Strip ANSI escape codes (including degraded sequences like "[38;5;216m")
- * and control characters so logs render as clean text.
- */
-function sanitizeLogContent(text: string): string {
-  if (!text) return '';
-
-  let result = text;
-
-  // Remove OSC sequences (like window title): \x1b]...(\x07|\x1b\\)
-  result = result.replace(/\x1b\].*?(?:\x07|\x1b\\)/gs, '');
-
-  // Remove DCS (Device Control String) sequences: \x1bP...\x1b\\
-  result = result.replace(/\x1bP.*?\x1b\\/gs, '');
-
-  // Remove standard ANSI escape sequences (CSI, SGR, etc.)
-  result = result.replace(/\x1b\[[0-9;?]*[ -/]*[@-~]/g, '');
-
-  // Remove single-character escapes
-  result = result.replace(/\x1b[@-Z\\-_]/g, '');
-
-  // Remove orphaned CSI sequences that lost their escape byte
-  result = result.replace(/^\[\??\d+[hlKJHfABCDGPXsu]/gm, '');
-
-  // Remove literal SGR sequences that show up without ESC (e.g. "[38;5;216m")
-  result = result.replace(/\[\d+(?:;\d+)*m/g, '');
-
-  // Remove carriage returns/backspaces and other control chars (except newline/tab)
-  result = result.replace(/\r/g, '');
-  result = result.replace(/.\x08/g, '');
-  result = result.replace(/\x08+/g, '');
-  result = result.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, '');
-
-  return result;
-}