agent-relay 2.0.21 → 2.0.23

package/packages/dashboard/ui/app/page.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { LandingPage } from '../landing';
-import { App } from '../react-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/packages/dashboard/ui/app/pricing/page.tsx

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

package/packages/dashboard/ui/app/providers/page.tsx

@@ -1,193 +0,0 @@
-/**
- * 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 '../../react-components/Logo';
-import { ProviderConnectionList, type ProviderInfo } from '../../react-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' },
-  { id: 'codex', name: 'OpenAI', displayName: 'Codex', color: '#10A37F', cliCommand: 'codex login', supportsDeviceFlow: true, 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' },
-];
-
-// 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/packages/dashboard/ui/app/providers/setup/[provider]/ProviderSetupClient.tsx

@@ -1,148 +0,0 @@
-/**
- * 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 '../../../../react-components/Logo';
-import { TerminalProviderSetup } from '../../../../react-components/TerminalProviderSetup';
-import { PROVIDER_CONFIGS } from './constants';
-
-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}`);
-  };
-
-  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">
-            Complete the authentication flow in the interactive terminal below
-          </p>
-        </div>
-
-        {/* Terminal Setup Component */}
-        <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>
-          <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, we&apos;ll detect it and show a popup to help you open it</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/packages/dashboard/ui/app/providers/setup/[provider]/constants.ts

@@ -1,35 +0,0 @@
-/**
- * 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: 'openai',
-    displayName: 'Codex',
-    color: '#10A37F',
-    agentCommand: 'codex',
-  },
-  cursor: {
-    id: 'cursor',
-    name: 'cursor',
-    displayName: 'Cursor',
-    color: '#7C3AED', // Purple for Cursor
-    agentCommand: 'cursor',
-  },
-};

package/packages/dashboard/ui/app/providers/setup/[provider]/page.tsx

@@ -1,42 +0,0 @@
-/**
- * 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>
-  );
-}