@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/app/page.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { LandingPage } from '../landing';
+import { App } from '../components/App';
+
+/**
+ * Detect if running in cloud mode (should show landing page at root)
+ * Local mode shows the dashboard directly at root
+ */
+function detectCloudMode(): boolean {
+  if (typeof window === 'undefined') return false;
+
+  const hostname = window.location.hostname;
+  const params = new URLSearchParams(window.location.search);
+
+  // Query param for testing: ?landing=true or ?cloud=true
+  if (params.get('landing') === 'true' || params.get('cloud') === 'true') return true;
+
+  // Cloud URL patterns
+  if (hostname.includes('agent-relay.com')) return true;
+  if (hostname.includes('agentrelay.dev')) return true;
+  if (hostname.includes('.fly.dev')) return true;
+
+  // Cloud mode flag in meta tags
+  const cloudMeta = document.querySelector('meta[name="agent-relay-cloud"]');
+  if (cloudMeta?.getAttribute('content') === 'true') return true;
+
+  // Cloud mode in local storage (for development)
+  if (localStorage.getItem('agent-relay-cloud-mode') === 'true') return true;
+
+  return false;
+}
+
+export default function HomePage() {
+  // Default to local mode (dashboard) - this is the most common case when
+  // running via agent-relay up. Cloud mode is only for hosted deployment.
+  const [isCloud, setIsCloud] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsCloud(detectCloudMode());
+    setIsReady(true);
+  }, []);
+
+  // Show dashboard-styled loading state while detecting mode
+  // This prevents flash of unstyled content
+  if (!isReady) {
+    return (
+      <div className="flex h-screen bg-bg-deep font-sans text-text-primary items-center justify-center">
+        <div className="text-text-muted">Loading...</div>
+      </div>
+    );
+  }
+
+  // Cloud mode: show landing page at root
+  // Local mode: show dashboard at root
+  return isCloud ? <LandingPage /> : <App />;
+}

package/src/app/pricing/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { PricingPage } from '../../landing';
+
+export default function PricingRoute() {
+  return <PricingPage />;
+}

package/src/app/privacy/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { PrivacyPage } from '../../landing';
+
+export default function PrivacyRoute() {
+  return <PrivacyPage />;
+}

package/src/app/providers/page.tsx

@@ -0,0 +1,193 @@
+/**
+ * Providers Page
+ *
+ * Connect AI providers (Anthropic, OpenAI, etc.) to enable workspace creation.
+ * Uses the shared ProviderConnectionList component for consistent UI with /app onboarding.
+ */
+
+'use client';
+
+import React, { useState, useEffect, Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { LogoIcon } from '../../components/Logo';
+import { ProviderConnectionList, type ProviderInfo } from '../../components/ProviderConnectionList';
+
+interface BackendProvider {
+  id: string;
+  name: string;
+  displayName: string;
+  description: string;
+  color: string;
+  isConnected: boolean;
+  connectedAs?: string;
+  cliCommand?: string;
+}
+
+// Available AI providers - same as /app page
+const AI_PROVIDERS: ProviderInfo[] = [
+  { id: 'anthropic', name: 'Anthropic', displayName: 'Claude', color: '#D97757', cliCommand: 'claude', requiresUrlCopy: true },
+  { id: 'codex', name: 'OpenAI', displayName: 'Codex', color: '#10A37F', cliCommand: 'codex login', requiresUrlCopy: true },
+  { id: 'google', name: 'Google', displayName: 'Gemini', color: '#4285F4', cliCommand: 'gemini' },
+  { id: 'opencode', name: 'OpenCode', displayName: 'OpenCode', color: '#00D4AA', cliCommand: 'opencode', comingSoon: true },
+  { id: 'droid', name: 'Factory', displayName: 'Droid', color: '#6366F1', cliCommand: 'droid', comingSoon: true },
+  { id: 'cursor', name: 'Cursor', displayName: 'Cursor', color: '#7C3AED', cliCommand: 'agent', requiresUrlCopy: true },
+];
+
+// Loading fallback for Suspense
+function ProvidersLoading() {
+  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">
+        <svg className="w-8 h-8 text-accent-cyan animate-spin mx-auto" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+        </svg>
+        <p className="mt-4 text-text-muted">Loading providers...</p>
+      </div>
+    </div>
+  );
+}
+
+// Main content component that uses useSearchParams
+function ProvidersContent() {
+  const searchParams = useSearchParams();
+  const workspaceId = searchParams.get('workspace');
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [csrfToken, setCsrfToken] = useState<string | null>(null);
+  const [connectedProviders, setConnectedProviders] = useState<string[]>([]);
+
+  useEffect(() => {
+    const fetchProviders = async () => {
+      try {
+        const res = await fetch('/api/providers', { credentials: 'include' });
+
+        // Capture CSRF token
+        const token = res.headers.get('X-CSRF-Token');
+        if (token) setCsrfToken(token);
+
+        if (!res.ok) {
+          if (res.status === 401) {
+            window.location.href = '/login';
+            return;
+          }
+          throw new Error('Failed to fetch providers');
+        }
+
+        const data = await res.json();
+        // Extract connected provider IDs
+        const connected = (data.providers || [])
+          .filter((p: BackendProvider) => p.isConnected && p.id !== 'github')
+          .map((p: BackendProvider) => p.id);
+        setConnectedProviders(connected);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load providers');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProviders();
+  }, []);
+
+  const handleProviderConnected = (providerId: string) => {
+    setConnectedProviders(prev => [...new Set([...prev, providerId])]);
+  };
+
+  const handleContinue = () => {
+    window.location.href = workspaceId ? `/app?workspace=${workspaceId}` : '/app';
+  };
+
+  if (loading) {
+    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">
+          <svg className="w-8 h-8 text-accent-cyan animate-spin mx-auto" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          <p className="mt-4 text-text-muted">Loading providers...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex flex-col items-center justify-center p-4">
+      {/* Background grid */}
+      <div className="fixed inset-0 opacity-10 pointer-events-none">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: `linear-gradient(rgba(0, 217, 255, 0.1) 1px, transparent 1px),
+                             linear-gradient(90deg, rgba(0, 217, 255, 0.1) 1px, transparent 1px)`,
+            backgroundSize: '50px 50px',
+          }}
+        />
+      </div>
+
+      <div className="relative z-10 w-full max-w-xl">
+        {/* Logo */}
+        <div className="flex flex-col items-center mb-8">
+          <LogoIcon size={48} withGlow={true} />
+          <h1 className="mt-4 text-2xl font-bold text-white">Connect AI Providers</h1>
+          <p className="mt-2 text-text-muted text-center">
+            Connect your AI providers to start using agents.
+          </p>
+        </div>
+
+        {error && (
+          <div className="mb-4 p-4 bg-error/10 border border-error/20 rounded-xl">
+            <p className="text-error">{error}</p>
+          </div>
+        )}
+
+        {/* No workspace warning */}
+        {!workspaceId && (
+          <div className="mb-4 p-4 bg-warning/10 border border-warning/20 rounded-xl">
+            <p className="text-warning text-sm">
+              <strong>Note:</strong> CLI-based authentication requires a running workspace.
+              Please{' '}
+              <a href="/app" className="underline hover:no-underline">create a workspace</a> first.
+            </p>
+          </div>
+        )}
+
+        {/* Shared provider connection component */}
+        {workspaceId ? (
+          <ProviderConnectionList
+            providers={AI_PROVIDERS}
+            connectedProviders={connectedProviders}
+            workspaceId={workspaceId}
+            csrfToken={csrfToken || undefined}
+            onProviderConnected={handleProviderConnected}
+            onContinue={handleContinue}
+            showDetailedInfo={true}
+          />
+        ) : (
+          <div className="bg-bg-primary/80 backdrop-blur-sm border border-border-subtle rounded-2xl p-6 text-center">
+            <p className="text-text-muted mb-4">
+              A workspace is required to connect providers via CLI authentication.
+            </p>
+            <a
+              href="/app"
+              className="inline-block py-3 px-6 bg-gradient-to-r from-accent-cyan to-[#00b8d9] text-bg-deep font-semibold rounded-xl hover:shadow-glow-cyan transition-all"
+            >
+              Create a Workspace
+            </a>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Export page wrapped in Suspense for static generation
+export default function ProvidersPage() {
+  return (
+    <Suspense fallback={<ProvidersLoading />}>
+      <ProvidersContent />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,197 @@
+/**
+ * Provider Setup Client Component
+ *
+ * Full-page interactive terminal for provider authentication and setup.
+ * Uses the shared TerminalProviderSetup component.
+ */
+
+'use client';
+
+import React from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { LogoIcon } from '../../../../components/Logo';
+import { TerminalProviderSetup } from '../../../../components/TerminalProviderSetup';
+import { ProviderAuthFlow } from '../../../../components/ProviderAuthFlow';
+import { PROVIDER_CONFIGS } from './constants';
+
+// Provider auth configuration - determines which auth method to use
+const PROVIDER_AUTH_CONFIG: Record<string, {
+  authMethod: 'terminal' | 'oauth';
+  requiresUrlCopy?: boolean;
+}> = {
+  anthropic: { authMethod: 'oauth', requiresUrlCopy: true },
+  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' },
+};
+
+export interface ProviderSetupClientProps {
+  provider: string;
+}
+
+export function ProviderSetupClient({ provider }: ProviderSetupClientProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const workspaceId = searchParams.get('workspace');
+
+  const config = PROVIDER_CONFIGS[provider];
+
+  if (!config) {
+    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">Unknown provider: {provider}</p>
+          <a href="/providers" className="mt-4 text-accent-cyan hover:underline">
+            Back to providers
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  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">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <a href="/app" className="flex items-center gap-3 group">
+            <LogoIcon className="w-8 h-8 text-accent-cyan group-hover:scale-105 transition-transform" />
+            <span className="text-lg font-bold text-white">Agent Relay</span>
+          </a>
+          <a
+            href={`/app?workspace=${workspaceId}`}
+            className="px-4 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
+          >
+            Skip for now →
+          </a>
+        </div>
+
+        {/* Title */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center gap-3 mb-4">
+            <div
+              className="w-12 h-12 rounded-xl flex items-center justify-center text-white font-bold text-xl shadow-lg"
+              style={{
+                backgroundColor: config.color,
+                boxShadow: `0 4px 20px ${config.color}40`,
+              }}
+            >
+              {config.displayName[0]}
+            </div>
+            <h1 className="text-2xl font-bold text-white">
+              Set up {config.displayName}
+            </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'
+            }
+          </p>
+        </div>
+
+        {/* Auth Component - OAuth or Terminal based on provider config */}
+        {isOAuthProvider ? (
+          <ProviderAuthFlow
+            provider={{
+              id: config.name,
+              name: config.name,
+              displayName: config.displayName,
+              color: config.color,
+              requiresUrlCopy: authConfig.requiresUrlCopy,
+            }}
+            workspaceId={workspaceId}
+            onSuccess={handleSuccess}
+            onCancel={handleCancel}
+            onError={(err) => console.error('Setup error:', err)}
+          />
+        ) : (
+          <TerminalProviderSetup
+            provider={{
+              id: config.id,
+              name: config.name,
+              displayName: config.displayName,
+              color: config.color,
+            }}
+            workspaceId={workspaceId}
+            maxHeight="500px"
+            showHeader={true}
+            onSuccess={handleSuccess}
+            onCancel={handleCancel}
+            onConnectAnother={handleConnectAnother}
+            onError={(err) => console.error('Setup error:', err)}
+            className="shadow-2xl"
+          />
+        )}
+
+        {/* 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 ? (
+            <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>
+            </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>
+            </ol>
+          )}
+        </div>
+
+        {/* Fallback link */}
+        <div className="mt-4 text-center">
+          <a
+            href={`/providers?connect=${config.id}&workspace=${workspaceId}`}
+            className="text-sm text-text-muted hover:text-accent-cyan transition-colors"
+          >
+            Having trouble? Try the popup-based login instead →
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProviderSetupClient;

package/src/app/providers/setup/[provider]/constants.ts

@@ -0,0 +1,35 @@
+/**
+ * Provider configurations for setup
+ */
+
+export interface ProviderConfig {
+  id: string;
+  name: string;
+  displayName: string;
+  color: string;
+  agentCommand: string;
+}
+
+export const PROVIDER_CONFIGS: Record<string, ProviderConfig> = {
+  claude: {
+    id: 'claude',
+    name: 'anthropic',
+    displayName: 'Claude',
+    color: '#D97706',
+    agentCommand: 'claude',
+  },
+  codex: {
+    id: 'codex',
+    name: 'codex',
+    displayName: 'Codex',
+    color: '#10A37F',
+    agentCommand: 'codex',
+  },
+  cursor: {
+    id: 'cursor',
+    name: 'cursor',
+    displayName: 'Cursor',
+    color: '#7C3AED', // Purple for Cursor
+    agentCommand: 'cursor',
+  },
+};

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

@@ -0,0 +1,42 @@
+/**
+ * Provider Setup Page (Server Component)
+ *
+ * Renders the client component with static params for Next.js export.
+ */
+
+import { Suspense } from 'react';
+import { ProviderSetupClient } from './ProviderSetupClient';
+import { PROVIDER_CONFIGS } from './constants';
+
+// Required for static export with dynamic routes
+export function generateStaticParams() {
+  return Object.keys(PROVIDER_CONFIGS).map((provider) => ({
+    provider,
+  }));
+}
+
+function LoadingFallback() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex items-center justify-center">
+      <div className="flex items-center gap-3">
+        <svg className="w-6 h-6 text-accent-cyan animate-spin" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+        </svg>
+        <span className="text-text-muted">Loading setup...</span>
+      </div>
+    </div>
+  );
+}
+
+export default function ProviderSetupPage({
+  params,
+}: {
+  params: { provider: string };
+}) {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <ProviderSetupClient provider={params.provider} />
+    </Suspense>
+  );
+}

package/src/app/security/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { SecurityPage } from '../../landing';
+
+export default function SecurityRoute() {
+  return <SecurityPage />;
+}