agent-relay 2.0.21 → 2.0.23

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

@@ -1,464 +0,0 @@
-'use client';
-
-/**
- * Agent Relay Cloud - Link Machine Page
- *
- * Flow:
- * 1. User runs `agent-relay cloud link` in terminal
- * 2. CLI opens this page with ?code=<temp>&machine=<id>&name=<name>
- * 3. User confirms machine details and clicks "Link Machine"
- * 4. Server generates API key via POST /api/daemons/link
- * 5. User copies API key back to terminal
- */
-
-import { useEffect, useState, useCallback, Suspense } from 'react';
-import { useSearchParams } from 'next/navigation';
-import { api } from '../../../lib/api';
-
-type LinkState = 'loading' | 'auth-required' | 'ready' | 'linking' | 'success' | 'error';
-
-interface MachineInfo {
-  code: string;
-  machineId: string;
-  machineName: string;
-}
-
-interface Workspace {
-  id: string;
-  name: string;
-  status: string;
-}
-
-interface LinkResult {
-  apiKey: string;
-  daemonId: string;
-  workspaceId: string | null;
-}
-
-// Loading fallback for Suspense
-function CloudLinkLoading() {
-  return (
-    <div className="relative min-h-screen flex items-center justify-center p-8 bg-bg-deep overflow-hidden">
-      <div className="bg-gradient-to-br from-bg-secondary to-bg-primary border border-accent-cyan/15 rounded-2xl p-12 shadow-xl backdrop-blur-xl">
-        <div className="w-12 h-12 mx-auto mb-6 border-3 border-accent-cyan/20 border-t-accent-cyan rounded-full animate-spin" />
-        <p className="text-center text-text-secondary">Loading...</p>
-      </div>
-    </div>
-  );
-}
-
-// Main content component that uses useSearchParams
-function CloudLinkContent() {
-  const searchParams = useSearchParams();
-  const [state, setState] = useState<LinkState>('loading');
-  const [machineInfo, setMachineInfo] = useState<MachineInfo | null>(null);
-  const [linkResult, setLinkResult] = useState<LinkResult | null>(null);
-  const [error, setError] = useState<string>('');
-  const [copied, setCopied] = useState(false);
-  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
-  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState<string | null>(null);
-
-  // Extract machine info from URL params
-  useEffect(() => {
-    const code = searchParams.get('code');
-    const machineId = searchParams.get('machine');
-    const machineName = searchParams.get('name');
-
-    if (!code || !machineId || !machineName) {
-      setState('error');
-      setError('Invalid link URL. Please run agent-relay cloud link again.');
-      return;
-    }
-
-    setMachineInfo({ code, machineId, machineName });
-    checkAuth();
-  }, [searchParams]);
-
-  const checkAuth = async () => {
-    try {
-      const data = await api.get<{ authenticated?: boolean; user?: { id: string } }>('/api/auth/session');
-      if (data.authenticated && data.user?.id) {
-        // Fetch user's workspaces
-        const workspacesData = await api.get<{ workspaces: Workspace[] }>('/api/workspaces');
-        setWorkspaces(workspacesData.workspaces || []);
-        // Auto-select first workspace if only one exists
-        if (workspacesData.workspaces?.length === 1) {
-          setSelectedWorkspaceId(workspacesData.workspaces[0].id);
-        }
-        setState('ready');
-      } else {
-        setState('auth-required');
-      }
-    } catch (err) {
-      console.error('Auth check failed:', err);
-      setState('auth-required');
-    }
-  };
-
-  const handleLink = async () => {
-    if (!machineInfo) return;
-
-    // Require workspace selection if workspaces exist
-    if (workspaces.length > 0 && !selectedWorkspaceId) {
-      setError('Please select a workspace');
-      return;
-    }
-
-    setState('linking');
-    setError('');
-
-    try {
-      const result = await api.post<{ apiKey: string; daemonId: string; workspaceId: string | null }>('/api/daemons/link', {
-        machineId: machineInfo.machineId,
-        name: machineInfo.machineName,
-        workspaceId: selectedWorkspaceId,
-        metadata: {
-          linkedVia: 'cli',
-          userAgent: navigator.userAgent,
-        },
-      });
-
-      setLinkResult({
-        apiKey: result.apiKey,
-        daemonId: result.daemonId,
-        workspaceId: result.workspaceId,
-      });
-      setState('success');
-    } catch (err: any) {
-      console.error('Link failed:', err);
-      setError(err.message || 'Failed to link machine. Please try again.');
-      setState('error');
-    }
-  };
-
-  const handleCopy = useCallback(async () => {
-    if (!linkResult?.apiKey) return;
-
-    try {
-      await navigator.clipboard.writeText(linkResult.apiKey);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Copy failed:', err);
-    }
-  }, [linkResult?.apiKey]);
-
-  const handleLogin = () => {
-    const returnUrl = window.location.href;
-    window.location.href = `/login?return=${encodeURIComponent(returnUrl)}`;
-  };
-
-  return (
-    <div className="relative min-h-screen flex items-center justify-center p-8 bg-bg-deep overflow-hidden">
-      {/* Animated background */}
-      <div className="fixed inset-0 pointer-events-none">
-        {/* Grid */}
-        <div
-          className="absolute inset-0 opacity-30"
-          style={{
-            backgroundImage: 'linear-gradient(rgba(0, 217, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 217, 255, 0.03) 1px, transparent 1px)',
-            backgroundSize: '80px 80px',
-            maskImage: 'radial-gradient(ellipse 70% 50% at 50% 50%, black 20%, transparent 80%)',
-            animation: 'grid-drift 20s linear infinite',
-          }}
-        />
-
-        {/* Glow */}
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-accent-cyan/10 rounded-full blur-3xl animate-pulse-glow" />
-
-        {/* Particles */}
-        <div className="absolute inset-0">
-          {[...Array(20)].map((_, i) => (
-            <div
-              key={i}
-              className="absolute w-0.5 h-0.5 bg-accent-cyan rounded-full shadow-glow-cyan opacity-0"
-              style={{
-                left: `${Math.random() * 100}%`,
-                top: `${Math.random() * 100}%`,
-                animation: `particle-float ${3 + Math.random() * 4}s ease-in-out infinite`,
-                animationDelay: `${Math.random() * 5}s`,
-              }}
-            />
-          ))}
-        </div>
-      </div>
-
-      {/* Main content */}
-      <div className="relative z-10 w-full max-width-[600px] animate-slide-up">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <div className="inline-flex mb-6 text-accent-cyan animate-pulse">
-            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="drop-shadow-glow-cyan">
-              <path d="M16 4L28 11V21L16 28L4 21V11L16 4Z" stroke="currentColor" strokeWidth="2" />
-              <circle cx="16" cy="16" r="4" fill="currentColor" />
-            </svg>
-          </div>
-          <h1 className="font-display text-4xl font-bold mb-3 bg-gradient-to-r from-text-primary to-accent-cyan bg-clip-text text-transparent">
-            Link Machine
-          </h1>
-          <p className="text-xl text-text-secondary">
-            Connect this machine to Agent Relay Cloud
-          </p>
-        </div>
-
-        {/* Loading state */}
-        {state === 'loading' && (
-          <div className="bg-gradient-to-br from-bg-secondary to-bg-primary border border-accent-cyan/15 rounded-2xl p-12 shadow-xl backdrop-blur-xl">
-            <div className="w-12 h-12 mx-auto mb-6 border-3 border-accent-cyan/20 border-t-accent-cyan rounded-full animate-spin" />
-            <p className="text-center text-text-secondary">Verifying session...</p>
-          </div>
-        )}
-
-        {/* Auth required */}
-        {state === 'auth-required' && (
-          <div className="bg-gradient-to-br from-bg-secondary to-bg-primary border border-accent-cyan/15 rounded-2xl p-12 shadow-xl backdrop-blur-xl">
-            <div className="text-center">
-              <div className="text-5xl mb-6 animate-bounce">🔐</div>
-              <h2 className="font-display text-2xl font-semibold mb-4 text-text-primary">
-                Authentication Required
-              </h2>
-              <p className="text-text-secondary mb-8 leading-relaxed">
-                Sign in to link this machine to your Agent Relay account.
-              </p>
-              <button
-                onClick={handleLogin}
-                className="w-full flex items-center justify-center gap-3 px-8 py-4 bg-gradient-to-r from-accent-cyan to-accent-cyan/80 hover:from-accent-cyan/90 hover:to-accent-cyan/70 text-text-inverse font-display font-semibold text-lg rounded-xl shadow-glow-cyan transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl"
-              >
-                Sign In with GitHub
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* Ready to link */}
-        {state === 'ready' && machineInfo && (
-          <div className="bg-gradient-to-br from-bg-secondary to-bg-primary border border-accent-cyan/15 rounded-2xl p-12 shadow-xl backdrop-blur-xl">
-            {/* Machine details */}
-            <div className="bg-black/30 border border-border-subtle rounded-xl p-6 mb-8">
-              <div className="flex justify-between items-center py-3 border-b border-border-subtle">
-                <span className="text-sm font-medium text-text-secondary">Machine Name</span>
-                <span className="text-base font-medium text-text-primary">{machineInfo.machineName}</span>
-              </div>
-              <div className="flex justify-between items-center pt-3">
-                <span className="text-sm font-medium text-text-secondary">Machine ID</span>
-                <span className="font-mono text-sm text-accent-cyan">{machineInfo.machineId}</span>
-              </div>
-            </div>
-
-            {/* Workspace selector */}
-            {workspaces.length > 0 && (
-              <div className="mb-8">
-                <label className="block text-sm font-medium text-text-secondary mb-3">
-                  Select Workspace
-                </label>
-                <p className="text-sm text-text-muted mb-4">
-                  Local agents from this machine will appear in the selected workspace&apos;s dashboard.
-                </p>
-                <div className="space-y-2">
-                  {workspaces.map((workspace) => (
-                    <button
-                      key={workspace.id}
-                      onClick={() => setSelectedWorkspaceId(workspace.id)}
-                      className={`w-full flex items-center gap-3 p-4 rounded-xl border transition-all ${
-                        selectedWorkspaceId === workspace.id
-                          ? 'bg-accent-cyan/10 border-accent-cyan/50 shadow-glow-cyan'
-                          : 'bg-black/20 border-border-subtle hover:border-accent-cyan/30'
-                      }`}
-                    >
-                      <div className={`w-3 h-3 rounded-full ${
-                        workspace.status === 'running' ? 'bg-success' : 'bg-gray-500'
-                      }`} />
-                      <span className="text-text-primary font-medium">{workspace.name}</span>
-                      {selectedWorkspaceId === workspace.id && (
-                        <span className="ml-auto text-accent-cyan">✓</span>
-                      )}
-                    </button>
-                  ))}
-                </div>
-                {error && !error.includes('Failed') && (
-                  <p className="mt-2 text-sm text-error">{error}</p>
-                )}
-              </div>
-            )}
-
-            {/* No workspaces warning */}
-            {workspaces.length === 0 && (
-              <div className="flex gap-4 bg-accent-cyan/8 border border-accent-cyan/20 rounded-xl p-5 mb-8">
-                <div className="text-2xl flex-shrink-0">📁</div>
-                <div>
-                  <p className="text-text-primary text-[15px] leading-relaxed mb-2">
-                    No workspaces found. Create a workspace first to link this machine.
-                  </p>
-                  <a
-                    href="/app"
-                    className="text-accent-cyan hover:underline text-sm"
-                  >
-                    Go to Dashboard →
-                  </a>
-                </div>
-              </div>
-            )}
-
-            {/* Warning */}
-            <div className="flex gap-4 bg-warning/8 border border-warning/20 rounded-xl p-5 mb-8">
-              <div className="text-2xl flex-shrink-0 animate-kill-pulse">⚠️</div>
-              <p className="text-text-primary text-[15px] leading-relaxed">
-                This will generate an API key that grants full access to your Agent Relay account.
-                Keep it secure and never share it publicly.
-              </p>
-            </div>
-
-            {/* Link button */}
-            <button
-              onClick={handleLink}
-              disabled={workspaces.length === 0}
-              className={`w-full flex items-center justify-center gap-3 px-8 py-4 font-display font-semibold text-lg rounded-xl transition-all duration-200 ${
-                workspaces.length === 0
-                  ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
-                  : 'bg-gradient-to-r from-accent-cyan to-success hover:from-accent-cyan/90 hover:to-success/90 text-text-inverse shadow-glow-cyan hover:-translate-y-0.5 hover:shadow-2xl animate-pulse-glow'
-              }`}
-            >
-              <span className="text-xl">🔗</span>
-              <span>Link This Machine</span>
-            </button>
-          </div>
-        )}
-
-        {/* Linking in progress */}
-        {state === 'linking' && (
-          <div className="bg-gradient-to-br from-bg-secondary to-bg-primary border border-accent-cyan/15 rounded-2xl p-12 shadow-xl backdrop-blur-xl">
-            <div className="relative w-30 h-30 mx-auto mb-8">
-              <div className="absolute inset-0 border-3 border-accent-cyan rounded-full animate-ping opacity-75" />
-              <div className="absolute inset-10 bg-accent-cyan rounded-full shadow-glow-cyan animate-pulse" />
-            </div>
-            <p className="text-center text-lg text-text-secondary">Generating API key...</p>
-          </div>
-        )}
-
-        {/* Success - show API key */}
-        {state === 'success' && linkResult && (
-          <div className="bg-gradient-to-br from-bg-secondary to-success/5 border border-success/30 rounded-2xl p-12 shadow-xl backdrop-blur-xl">
-            {/* Success header */}
-            <div className="text-center mb-10">
-              <div className="inline-flex items-center justify-center w-16 h-16 mb-6 bg-gradient-to-r from-success to-accent-cyan text-text-inverse text-3xl font-bold rounded-full shadow-glow-green animate-bounce">
-                ✓
-              </div>
-              <h2 className="font-display text-2xl font-semibold mb-3 text-text-primary">
-                Machine Linked Successfully
-              </h2>
-              <p className="text-text-secondary">
-                Copy this API key and paste it into your terminal
-              </p>
-              {linkResult.workspaceId && (
-                <p className="mt-2 text-sm text-accent-cyan">
-                  Linked to workspace: {workspaces.find(w => w.id === linkResult.workspaceId)?.name || 'Unknown'}
-                </p>
-              )}
-            </div>
-
-            {/* API key box */}
-            <div className="mb-10">
-              <div className="font-mono text-xs font-semibold uppercase tracking-wide text-accent-cyan mb-3">
-                API Key
-              </div>
-              <div className="relative flex items-center gap-4 bg-black/50 border-2 border-accent-cyan/30 rounded-xl p-5 shadow-glow-cyan">
-                <code className="flex-1 font-mono text-[15px] text-success break-all select-all drop-shadow-glow-green">
-                  {linkResult.apiKey}
-                </code>
-                <button
-                  onClick={handleCopy}
-                  className={`flex-shrink-0 w-11 h-11 flex items-center justify-center rounded-lg text-xl transition-all duration-200 ${
-                    copied
-                      ? 'bg-success/20 border border-success/50 text-success'
-                      : 'bg-accent-cyan/15 border border-accent-cyan/30 text-accent-cyan hover:bg-accent-cyan/25 hover:border-accent-cyan/50 hover:scale-105'
-                  }`}
-                  title="Copy to clipboard"
-                >
-                  {copied ? '✓' : '📋'}
-                </button>
-              </div>
-            </div>
-
-            {/* Instructions */}
-            <div className="bg-black/30 border border-border-subtle rounded-xl p-6 mb-6">
-              <h3 className="font-display text-lg font-semibold mb-4 text-text-primary">
-                Next Steps:
-              </h3>
-              <ol className="space-y-2 text-text-secondary leading-relaxed pl-5">
-                <li>Copy the API key above</li>
-                <li>Return to your terminal</li>
-                <li>Paste the key when prompted</li>
-                <li>Your machine is now linked to Agent Relay Cloud</li>
-              </ol>
-            </div>
-
-            {/* Important note */}
-            <div className="p-5 bg-warning/8 border border-warning/20 rounded-xl text-text-primary text-[15px] leading-relaxed">
-              <strong className="text-warning font-semibold">Important:</strong> This key will only be shown once. Store it securely
-              if you need it later. You can regenerate a new key by running{' '}
-              <code className="font-mono text-sm px-1.5 py-0.5 bg-black/30 rounded text-accent-cyan">
-                agent-relay cloud link
-              </code>{' '}
-              again.
-            </div>
-          </div>
-        )}
-
-        {/* Error state */}
-        {state === 'error' && (
-          <div className="bg-gradient-to-br from-bg-secondary to-error/5 border border-error/30 rounded-2xl p-12 shadow-xl backdrop-blur-xl text-center">
-            <div className="inline-flex items-center justify-center w-16 h-16 mb-6 bg-error/15 text-error text-3xl font-bold rounded-full border-2 border-error/30">
-              ✕
-            </div>
-            <h2 className="font-display text-2xl font-semibold mb-4 text-text-primary">
-              Link Failed
-            </h2>
-            <p className="text-error mb-8 leading-relaxed">
-              {error}
-            </p>
-            <button
-              onClick={() => window.location.reload()}
-              className="w-full px-8 py-4 bg-bg-hover hover:bg-bg-active border border-border-light hover:border-border-medium text-text-primary font-display font-semibold text-lg rounded-xl transition-all duration-200"
-            >
-              Try Again
-            </button>
-          </div>
-        )}
-
-        {/* Footer */}
-        <div className="mt-8 text-center">
-          <a
-            href="/app"
-            className="inline-flex items-center gap-2 text-text-secondary hover:text-accent-cyan transition-colors duration-200"
-          >
-            <span>←</span>
-            <span>Back to Dashboard</span>
-          </a>
-        </div>
-      </div>
-
-      <style jsx>{`
-        @keyframes grid-drift {
-          0% { transform: translate(0, 0); }
-          100% { transform: translate(80px, 80px); }
-        }
-
-        @keyframes particle-float {
-          0% { opacity: 0; transform: translateY(0); }
-          10% { opacity: 0.6; }
-          90% { opacity: 0.6; }
-          100% { opacity: 0; transform: translateY(-100px); }
-        }
-      `}</style>
-    </div>
-  );
-}
-
-// Export page wrapped in Suspense for static generation
-export default function CloudLinkPage() {
-  return (
-    <Suspense fallback={<CloudLinkLoading />}>
-      <CloudLinkContent />
-    </Suspense>
-  );
-}

package/packages/dashboard/ui/app/complete-profile/page.tsx

@@ -1,204 +0,0 @@
-/**
- * Complete Profile Page
- *
- * Prompts users to provide missing information after GitHub OAuth signup.
- * Currently used to collect email address for GitHub users whose email
- * is not publicly available.
- */
-
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { LogoIcon } from '../../react-components/Logo';
-
-export default function CompleteProfilePage() {
-  const [email, setEmail] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState('');
-  const [user, setUser] = useState<{
-    githubUsername?: string;
-    avatarUrl?: string;
-    email?: string;
-  } | null>(null);
-
-  // Check if user is logged in and needs email
-  useEffect(() => {
-    const checkSession = async () => {
-      try {
-        const response = await fetch('/api/auth/me', { credentials: 'include' });
-        if (!response.ok) {
-          // Not logged in - redirect to login
-          window.location.href = '/login';
-          return;
-        }
-
-        const data = await response.json();
-
-        // If user already has email, redirect to app
-        if (data.user?.email) {
-          window.location.href = '/app';
-          return;
-        }
-
-        setUser(data.user);
-        setIsLoading(false);
-      } catch (err) {
-        console.error('Error checking session:', err);
-        window.location.href = '/login';
-      }
-    };
-
-    checkSession();
-  }, []);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setIsSubmitting(true);
-
-    try {
-      // Get CSRF token first
-      const csrfResponse = await fetch('/api/auth/session', { credentials: 'include' });
-      const csrfToken = csrfResponse.headers.get('x-csrf-token');
-
-      const response = await fetch('/api/auth/email/set-email', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          ...(csrfToken && { 'x-csrf-token': csrfToken }),
-        },
-        credentials: 'include',
-        body: JSON.stringify({ email }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        setError(data.error || 'Failed to set email');
-        setIsSubmitting(false);
-        return;
-      }
-
-      // Success - redirect to app
-      window.location.href = '/app';
-    } catch (err) {
-      console.error('Error setting email:', err);
-      setError('Failed to connect. Please try again.');
-      setIsSubmitting(false);
-    }
-  };
-
-  if (isLoading) {
-    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">
-        <div className="relative z-10 w-full max-w-md">
-          <div className="flex flex-col items-center mb-8">
-            <LogoIcon size={48} withGlow={true} />
-            <h1 className="mt-4 text-2xl font-bold text-white">Agent Relay</h1>
-            <p className="mt-2 text-text-muted">Loading...</p>
-          </div>
-        </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">
-        <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>
-
-      {/* Content */}
-      <div className="relative z-10 w-full max-w-md">
-        {/* 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">Almost there!</h1>
-          <p className="mt-2 text-text-muted text-center">
-            Please provide your email to complete your account setup
-          </p>
-        </div>
-
-        {/* Card */}
-        <div className="bg-bg-primary/80 backdrop-blur-sm border border-border-subtle rounded-2xl p-8 shadow-xl">
-          {/* User info */}
-          {user && (
-            <div className="flex items-center gap-4 mb-6 pb-6 border-b border-border-subtle">
-              {user.avatarUrl ? (
-                <img
-                  src={user.avatarUrl}
-                  alt={user.githubUsername || 'User'}
-                  className="w-12 h-12 rounded-full"
-                />
-              ) : (
-                <div className="w-12 h-12 rounded-full bg-bg-secondary flex items-center justify-center">
-                  <svg className="w-6 h-6 text-text-muted" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
-                  </svg>
-                </div>
-              )}
-              <div>
-                <p className="font-medium text-white">{user.githubUsername}</p>
-                <p className="text-sm text-text-muted">Connected via GitHub</p>
-              </div>
-            </div>
-          )}
-
-          {error && (
-            <div className="mb-4 p-3 bg-error/10 border border-error/20 rounded-lg">
-              <p className="text-error text-sm">{error}</p>
-            </div>
-          )}
-
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-text-secondary mb-2">
-                Email Address
-              </label>
-              <input
-                type="email"
-                id="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-                disabled={isSubmitting}
-                className="w-full px-4 py-3 bg-bg-secondary border border-border-subtle rounded-xl text-white placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 focus:border-accent-cyan disabled:opacity-50"
-                placeholder="you@example.com"
-              />
-              <p className="mt-2 text-xs text-text-muted">
-                We'll use this email to notify you about important updates and account activity.
-              </p>
-            </div>
-
-            <button
-              type="submit"
-              disabled={isSubmitting || !email}
-              className="w-full py-4 px-6 bg-accent-cyan hover:bg-accent-cyan/90 rounded-xl text-black font-medium flex items-center justify-center gap-3 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {isSubmitting ? (
-                <>
-                  <svg className="w-5 h-5 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>Saving...</span>
-                </>
-              ) : (
-                <span>Continue</span>
-              )}
-            </button>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}