@agent-relay/dashboard 2.0.82 → 2.0.84

package/src/app/app/onboarding/page.tsx

@@ -1,21 +1,18 @@
 /**
  * Onboarding Page - Dedicated route for new users and post-deletion flow
  *
- * This page provides a cleaner onboarding experience separate from workspace selection.
- * It handles two scenarios:
- * 1. First-time users with no workspaces
- * 2. Users who just deleted their workspace
- *
- * URL params:
- * - reason=deleted: User just deleted a workspace
- * - reason=new: First-time user (default)
+ * This page now supports provider-first onboarding after GitHub connection:
+ * 1. Determine current onboarding step via /api/onboarding/next-step
+ * 2. Connect an AI provider (API key or CLI auth)
+ * 3. Auto-create and provision workspace
  */
 
 'use client';
 
-import React, { useState, useEffect, useCallback, Suspense } from 'react';
+import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { LogoIcon } from '../../../components/Logo';
+import { ProvisioningProgress } from '../../../components/ProvisioningProgress';
 
 interface Repository {
   id: string;
@@ -26,28 +23,105 @@ interface Repository {
   hasNangoConnection: boolean;
 }
 
+interface NextStepResponse {
+  nextStep?: string;
+  selectedRepo?: string;
+  repositoryFullName?: string;
+  repository?: {
+    fullName?: string;
+  };
+  connectedProviders?: string[];
+}
+
+async function getOnboardingNextStep(): Promise<NextStepResponse> {
+  const response = await fetch('/api/onboarding/next-step', {
+    credentials: 'include',
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch onboarding next step');
+  }
+
+  return (await response.json()) as NextStepResponse;
+}
+
 type OnboardingReason = 'new' | 'deleted';
+type ProviderId = 'anthropic' | 'openai' | 'google' | 'cursor' | 'opencode' | 'droid';
+type AuthMode = 'api_key' | 'cli';
+type WorkspaceLifecycleState = 'idle' | 'provisioning' | 'running' | 'error';
 
-// Analytics event types for onboarding funnel
 type OnboardingEvent =
   | 'onboarding_page_view'
   | 'onboarding_repo_selected'
   | 'onboarding_workspace_created'
-  | 'onboarding_connect_repos_clicked'
-  | 'onboarding_skipped';
+  | 'onboarding_connect_repos_clicked';
+
+interface ProviderOption {
+  id: ProviderId;
+  label: string;
+  description: string;
+  color: string;
+}
+
+const PROVIDERS: ProviderOption[] = [
+  {
+    id: 'anthropic',
+    label: 'Anthropic',
+    description: 'Claude models via Anthropic',
+    color: '#D97757',
+  },
+  {
+    id: 'openai',
+    label: 'OpenAI',
+    description: 'Codex and GPT models',
+    color: '#10A37F',
+  },
+  {
+    id: 'cursor',
+    label: 'Cursor',
+    description: 'Cursor AI editor',
+    color: '#7C3AED',
+  },
+  {
+    id: 'google',
+    label: 'Google',
+    description: 'Gemini models via Google AI',
+    color: '#4285F4',
+  },
+  {
+    id: 'opencode',
+    label: 'OpenCode',
+    description: 'Coming soon',
+    color: '#6B7280',
+  },
+  {
+    id: 'droid',
+    label: 'Droid',
+    description: 'Coming soon',
+    color: '#6B7280',
+  },
+];
+
+const PROVIDER_STATUS_NAMES: Record<ProviderId, string[]> = {
+  anthropic: ['anthropic'],
+  openai: ['openai', 'codex'],
+  cursor: ['cursor'],
+  google: ['google'],
+  opencode: ['opencode'],
+  droid: ['droid'],
+};
+
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 
-// Simple analytics hook - can be extended to integrate with actual analytics service
 function useOnboardingAnalytics() {
   const trackEvent = useCallback((event: OnboardingEvent, properties?: Record<string, unknown>) => {
-    // Log to console in development
     if (process.env.NODE_ENV === 'development') {
       console.log('[Onboarding Analytics]', event, properties);
     }
 
-    // TODO: Integrate with actual analytics service (e.g., Posthog, Mixpanel, etc.)
-    // Example: posthog.capture(event, properties);
-
-    // For now, send to a hypothetical analytics endpoint
     try {
       fetch('/api/analytics/track', {
         method: 'POST',
@@ -55,10 +129,10 @@ function useOnboardingAnalytics() {
         credentials: 'include',
         body: JSON.stringify({ event, properties, timestamp: Date.now() }),
       }).catch(() => {
-        // Silently fail - analytics should not block user experience
+        // Analytics should never block onboarding
       });
     } catch {
-      // Silently fail
+      // Analytics should never block onboarding
     }
   }, []);
 
@@ -70,27 +144,282 @@ function OnboardingContent() {
   const reason = (searchParams.get('reason') as OnboardingReason) || 'new';
 
   const [repos, setRepos] = useState<Repository[]>([]);
+  const [selectedRepos, setSelectedRepos] = useState<Set<string>>(new Set());
+  const [nextStep, setNextStep] = useState<string | null>(null);
+  const [selectedProvider, setSelectedProvider] = useState<ProviderId>('anthropic');
+  const [authMode, setAuthMode] = useState<AuthMode>('api_key');
+  const [apiKey, setApiKey] = useState('');
+  const [cliCommand, setCliCommand] = useState<string | null>(null);
+
+  const [connectedProviders, setConnectedProviders] = useState<Set<ProviderId>>(new Set());
+
   const [isLoading, setIsLoading] = useState(true);
-  const [isCreating, setIsCreating] = useState(false);
+  const [isSubmittingProvider, setIsSubmittingProvider] = useState(false);
+  const [isPollingCli, setIsPollingCli] = useState(false);
+  const [isCreatingWorkspace, setIsCreatingWorkspace] = useState(false);
+
+  const [workspaceState, setWorkspaceState] = useState<WorkspaceLifecycleState>('idle');
+  const [workspaceId, setWorkspaceId] = useState<string | null>(null);
+  const [provisioningStage, setProvisioningStage] = useState<string | null>(null);
+
   const [error, setError] = useState<string | null>(null);
   const [csrfToken, setCsrfToken] = useState<string | null>(null);
+  const [providerFeedback, setProviderFeedback] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const cliPollingRef = useRef(false);
+  const workspacePollingRef = useRef(false);
 
   const { trackEvent } = useOnboardingAnalytics();
 
-  // Fetch repositories and check session
+  const selectedProviderMeta = useMemo(
+    () => PROVIDERS.find((provider) => provider.id === selectedProvider) || PROVIDERS[0],
+    [selectedProvider]
+  );
+
+  const buildHeaders = useCallback(
+    (includeContentType = true): Record<string, string> => {
+      const headers: Record<string, string> = includeContentType ? { 'Content-Type': 'application/json' } : {};
+      if (csrfToken) {
+        headers['X-CSRF-Token'] = csrfToken;
+      }
+      return headers;
+    },
+    [csrfToken]
+  );
+
+  const resolveSelectedRepos = useCallback((repositories: Repository[], stepData: NextStepResponse | null): Set<string> => {
+    const stepRepo =
+      stepData?.selectedRepo ||
+      stepData?.repositoryFullName ||
+      stepData?.repository?.fullName ||
+      '';
+
+    if (stepRepo && repositories.some((repo) => repo.fullName === stepRepo)) {
+      return new Set([stepRepo]);
+    }
+
+    return repositories.length > 0 ? new Set([repositories[0].fullName]) : new Set();
+  }, []);
+
+  const refreshNextStep = useCallback(async (): Promise<NextStepResponse | null> => {
+    try {
+      const data = (await getOnboardingNextStep()) as NextStepResponse;
+      if (typeof data.nextStep === 'string') {
+        setNextStep(data.nextStep);
+      }
+      return data;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  const verifyProviderConnected = useCallback(
+    async (statusWorkspaceId?: string): Promise<boolean> => {
+      if (statusWorkspaceId) {
+        try {
+          const statusRes = await fetch(`/api/auth/ssh/status/${statusWorkspaceId}`, {
+            credentials: 'include',
+          });
+
+          if (statusRes.ok) {
+            const statusData = (await statusRes.json()) as {
+              providers?: Array<{ name: string; status: string }>;
+            };
+
+            const connectedFromStatus = PROVIDER_STATUS_NAMES[selectedProvider].some((providerName) =>
+              statusData.providers?.some((provider) => provider.name === providerName && provider.status === 'connected')
+            );
+
+            if (connectedFromStatus) {
+              return true;
+            }
+          }
+        } catch {
+          // Fall through to onboarding next-step check.
+        }
+      }
+
+      const nextStepData = await refreshNextStep();
+      if (!nextStepData) {
+        return false;
+      }
+
+      if (nextStepData.nextStep && nextStepData.nextStep !== 'connect_ai_provider') {
+        return true;
+      }
+
+      const connectedProviders = Array.isArray(nextStepData.connectedProviders)
+        ? nextStepData.connectedProviders
+        : [];
+
+      return PROVIDER_STATUS_NAMES[selectedProvider].some((providerName) => connectedProviders.includes(providerName));
+    },
+    [refreshNextStep, selectedProvider]
+  );
+
+  const pollWorkspaceUntilRunning = useCallback(async (createdWorkspaceId: string): Promise<void> => {
+    workspacePollingRef.current = true;
+
+    try {
+      const maxAttempts = 150; // 5 minutes at 2s intervals
+      let attempts = 0;
+      let consecutiveErrors = 0;
+
+      while (workspacePollingRef.current && attempts < maxAttempts) {
+        try {
+          const statusRes = await fetch(`/api/workspaces/${createdWorkspaceId}/status`, {
+            credentials: 'include',
+          });
+
+          if (!statusRes.ok) {
+            consecutiveErrors++;
+            console.warn(`[onboarding] Status poll returned ${statusRes.status} (attempt ${consecutiveErrors})`);
+            if (consecutiveErrors >= 5) {
+              throw new Error(`Workspace status check failed (HTTP ${statusRes.status})`);
+            }
+            await sleep(2000);
+            attempts += 1;
+            continue;
+          }
+
+          consecutiveErrors = 0;
+
+          const statusData = (await statusRes.json()) as {
+            status?: string;
+            errorMessage?: string;
+            provisioning?: { stage?: string | null };
+          };
+
+          if (statusData.provisioning?.stage) {
+            setProvisioningStage(statusData.provisioning.stage);
+          }
+
+          if (statusData.status === 'running') {
+            setWorkspaceState('running');
+            return;
+          }
+
+          if (statusData.status === 'error' || statusData.status === 'stopped') {
+            throw new Error(statusData.errorMessage || `Workspace ${statusData.status === 'stopped' ? 'stopped unexpectedly' : 'provisioning failed'}`);
+          }
+        } catch (fetchErr) {
+          // Re-throw our intentional errors
+          if (fetchErr instanceof Error && (
+            fetchErr.message.includes('provisioning failed') ||
+            fetchErr.message.includes('stopped unexpectedly') ||
+            fetchErr.message.includes('status check failed')
+          )) {
+            throw fetchErr;
+          }
+          // Network errors — keep trying
+          consecutiveErrors++;
+          console.warn(`[onboarding] Status poll network error (attempt ${consecutiveErrors}):`, fetchErr);
+          if (consecutiveErrors >= 5) {
+            throw new Error('Unable to reach workspace status endpoint');
+          }
+        }
+
+        await sleep(2000);
+        attempts += 1;
+      }
+
+      throw new Error('Workspace provisioning timed out after 5 minutes.');
+    } finally {
+      workspacePollingRef.current = false;
+    }
+  }, []);
+
+  const startWorkspaceCreation = useCallback(
+    async (repoNames?: string[]) => {
+      const repositories = repoNames && repoNames.length > 0 ? repoNames : Array.from(selectedRepos);
+
+      if (repositories.length === 0 || isCreatingWorkspace || workspaceState === 'provisioning' || workspaceState === 'running') {
+        return;
+      }
+
+      setError(null);
+      setWorkspaceState('provisioning');
+      setProvisioningStage(null);
+      setIsCreatingWorkspace(true);
+
+      trackEvent('onboarding_repo_selected', { repositories });
+
+      try {
+        const res = await fetch('/api/workspaces/quick', {
+          method: 'POST',
+          credentials: 'include',
+          headers: buildHeaders(),
+          body: JSON.stringify({ repositories }),
+        });
+
+        const data = await res.json();
+
+        if (!res.ok) {
+          throw new Error(data.error || 'Failed to create workspace');
+        }
+
+        if (!data.workspaceId || typeof data.workspaceId !== 'string') {
+          throw new Error('Workspace created but no workspace ID was returned');
+        }
+
+        setWorkspaceId(data.workspaceId);
+        await pollWorkspaceUntilRunning(data.workspaceId);
+
+        trackEvent('onboarding_workspace_created', {
+          workspaceId: data.workspaceId,
+          repositories,
+        });
+      } catch (err) {
+        setWorkspaceState('error');
+        setError(err instanceof Error ? err.message : 'Failed to create workspace');
+      } finally {
+        setIsCreatingWorkspace(false);
+      }
+    },
+    [selectedRepos, isCreatingWorkspace, workspaceState, trackEvent, buildHeaders, pollWorkspaceUntilRunning]
+  );
+
+  const pollForCliCompletion = useCallback(
+    async (statusWorkspaceId?: string): Promise<boolean> => {
+      cliPollingRef.current = true;
+      setIsPollingCli(true);
+
+      try {
+        const maxAttempts = 120; // 10 minutes at 5s intervals
+        let attempts = 0;
+
+        while (cliPollingRef.current && attempts < maxAttempts) {
+          const connected = await verifyProviderConnected(statusWorkspaceId);
+          if (connected) {
+            setProviderFeedback({ type: 'success', text: `${selectedProviderMeta.label} connected successfully.` });
+            setNextStep('create_workspace');
+            return true;
+          }
+
+          await sleep(5000);
+          attempts += 1;
+        }
+
+        return false;
+      } finally {
+        cliPollingRef.current = false;
+        setIsPollingCli(false);
+      }
+    },
+    [selectedProviderMeta.label, verifyProviderConnected]
+  );
+
   useEffect(() => {
     const init = async () => {
       try {
-        // Check session
         const sessionRes = await fetch('/api/auth/session', { credentials: 'include' });
 
         if (sessionRes.status === 404) {
-          // Local mode - redirect to main app
           window.location.href = '/app';
           return;
         }
 
-        // Capture CSRF token
         const token = sessionRes.headers.get('X-CSRF-Token');
         if (token) {
           setCsrfToken(token);
@@ -103,83 +432,266 @@ function OnboardingContent() {
           return;
         }
 
-        // Check if user already has workspaces - if so, redirect to /app
-        const workspacesRes = await fetch('/api/workspaces', { credentials: 'include' });
-        if (workspacesRes.ok) {
-          const workspacesData = await workspacesRes.json();
-          if ((workspacesData.workspaces || []).length > 0) {
-            // User has workspaces, redirect to main app
-            window.location.href = '/app';
-            return;
-          }
-        }
+        // Note: we intentionally do NOT redirect to /app if workspaces exist.
+        // DashboardPageClient redirects here when no running workspaces, so redirecting
+        // back would cause an infinite loop. The onboarding page handles all states.
 
-        // Fetch repos
         const reposRes = await fetch('/api/github-app/repos', { credentials: 'include' });
+        const repositories: Repository[] = [];
+
         if (reposRes.ok) {
           const reposData = await reposRes.json();
-          setRepos(reposData.repositories || []);
+          repositories.push(...(reposData.repositories || []));
         }
 
-        // Track page view
-        trackEvent('onboarding_page_view', { reason });
+        setRepos(repositories);
+
+        let nextStepData: NextStepResponse | null = null;
+        try {
+          nextStepData = (await getOnboardingNextStep()) as NextStepResponse;
+        } catch {
+          nextStepData = null;
+        }
+
+        const calculatedStep =
+          nextStepData?.nextStep ||
+          (repositories.length > 0 ? 'connect_ai_provider' : 'connect_repos');
+
+        setNextStep(calculatedStep);
+        setSelectedRepos(resolveSelectedRepos(repositories, nextStepData));
+
+        // Initialize connected providers from API response
+        if (Array.isArray(nextStepData?.connectedProviders)) {
+          const providerMap: Record<string, ProviderId> = {
+            anthropic: 'anthropic',
+            openai: 'openai',
+            google: 'google',
+            cursor: 'cursor',
+          };
+          const initialConnected = new Set<ProviderId>();
+          for (const p of nextStepData.connectedProviders) {
+            const mapped = providerMap[p];
+            if (mapped) initialConnected.add(mapped);
+          }
+          setConnectedProviders(initialConnected);
+        }
 
+        trackEvent('onboarding_page_view', { reason, nextStep: calculatedStep });
         setIsLoading(false);
       } catch (err) {
-        console.error('Onboarding init error:', err);
         setError(err instanceof Error ? err.message : 'Failed to initialize');
         setIsLoading(false);
       }
     };
 
     init();
+
+    return () => {
+      cliPollingRef.current = false;
+      workspacePollingRef.current = false;
+    };
+  }, [reason, resolveSelectedRepos, trackEvent]);
+
+  useEffect(() => {
+    if (
+      !isLoading &&
+      repos.length > 0 &&
+      selectedRepos.size > 0 &&
+      nextStep !== null &&
+      nextStep !== 'connect_ai_provider' &&
+      nextStep !== 'provider_connected' &&
+      !workspaceId &&
+      workspaceState === 'idle' &&
+      !isCreatingWorkspace
+    ) {
+      startWorkspaceCreation(Array.from(selectedRepos));
+    }
+  }, [
+    isLoading,
+    repos.length,
+    selectedRepos,
+    nextStep,
+    workspaceId,
+    workspaceState,
+    isCreatingWorkspace,
+    startWorkspaceCreation,
+  ]);
+
+  const handleConnectRepos = useCallback(() => {
+    trackEvent('onboarding_connect_repos_clicked', { reason });
+    window.location.href = '/connect-repos';
   }, [reason, trackEvent]);
 
-  const handleCreateWorkspace = useCallback(async (repoFullName: string) => {
-    setIsCreating(true);
-    setError(null);
+  const handleConnectApiKey = useCallback(async () => {
+    if (!apiKey.trim()) {
+      setProviderFeedback({ type: 'error', text: 'Please enter an API key.' });
+      return;
+    }
 
-    trackEvent('onboarding_repo_selected', { repository: repoFullName });
+    if (selectedRepos.size === 0) {
+      setProviderFeedback({ type: 'error', text: 'Select at least one repository before connecting a provider.' });
+      return;
+    }
+
+    setIsSubmittingProvider(true);
+    setProviderFeedback(null);
+    setError(null);
 
     try {
-      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
-      if (csrfToken) {
-        headers['X-CSRF-Token'] = csrfToken;
+      const providerCandidates = selectedProvider === 'openai' ? ['openai', 'codex'] : [selectedProvider];
+      let lastError = 'Failed to connect provider';
+      let connected = false;
+
+      for (const providerName of providerCandidates) {
+        const res = await fetch(`/api/providers/${providerName}/api-key`, {
+          method: 'POST',
+          credentials: 'include',
+          headers: buildHeaders(),
+          body: JSON.stringify({ apiKey: apiKey.trim() }),
+        });
+
+        if (res.ok) {
+          connected = true;
+          break;
+        }
+
+        const data = await res.json().catch(() => ({}));
+        lastError = data.error || data.message || `Failed to connect ${selectedProviderMeta.label}`;
       }
 
-      const res = await fetch('/api/workspaces/quick', {
-        method: 'POST',
-        credentials: 'include',
-        headers,
-        body: JSON.stringify({ repositoryFullName: repoFullName }),
+      if (!connected) {
+        throw new Error(lastError);
+      }
+
+      setApiKey('');
+      setAuthMode('api_key');
+      setConnectedProviders(prev => new Set([...prev, selectedProvider]));
+      setProviderFeedback({ type: 'success', text: `${selectedProviderMeta.label} connected! Add another provider or continue to create your workspace.` });
+      setNextStep('provider_connected');
+    } catch (err) {
+      setProviderFeedback({
+        type: 'error',
+        text: err instanceof Error ? err.message : 'Failed to connect provider',
       });
+    } finally {
+      setIsSubmittingProvider(false);
+    }
+  }, [apiKey, selectedRepos, selectedProvider, selectedProviderMeta.label, buildHeaders]);
+
+  const handleStartCliAuth = useCallback(async () => {
+    if (selectedRepos.size === 0) {
+      setProviderFeedback({ type: 'error', text: 'Select at least one repository before starting provider auth.' });
+      return;
+    }
+
+    setIsSubmittingProvider(true);
+    setProviderFeedback(null);
+    setCliCommand(null);
+    setError(null);
+
+    try {
+      const headers = buildHeaders();
+      const providerCandidates = selectedProvider === 'openai' ? ['openai', 'codex'] : [selectedProvider];
+
+      let initData: { command?: string; commandWithUrl?: string; workspaceId?: string } | null = null;
+      let lastError = 'Failed to start CLI authentication';
+
+      for (const providerName of providerCandidates) {
+        const res = await fetch('/api/auth/ssh/init', {
+          method: 'POST',
+          credentials: 'include',
+          headers,
+          body: JSON.stringify({
+            provider: providerName,
+            mode: 'onboarding',
+          }),
+        });
+
+        if (res.ok) {
+          initData = (await res.json()) as { command?: string; commandWithUrl?: string; workspaceId?: string };
+          break;
+        }
+
+        const data = await res.json().catch(() => ({}));
+        lastError = data.error || data.message || 'Failed to start CLI authentication';
+      }
 
-      const data = await res.json();
+      if (!initData) {
+        throw new Error(lastError);
+      }
 
-      if (!res.ok) {
-        throw new Error(data.error || 'Failed to create workspace');
+      const rawCommand = initData.commandWithUrl || initData.command;
+      if (!rawCommand) {
+        throw new Error('Auth broker did not return a command');
       }
 
-      trackEvent('onboarding_workspace_created', {
-        workspaceId: data.workspaceId,
-        repository: repoFullName,
+      const commandWithNpx = rawCommand.trim().startsWith('npx ') ? rawCommand : `npx ${rawCommand}`;
+      setCliCommand(commandWithNpx);
+      setProviderFeedback({
+        type: 'info',
+        text: 'Run the command below in your terminal. This page will update automatically when auth completes.',
       });
 
-      // Redirect to main app - it will handle provisioning state
-      window.location.href = '/app';
+      const connected = await pollForCliCompletion(initData.workspaceId);
+      if (connected) {
+        setAuthMode('api_key');
+        setConnectedProviders(prev => new Set([...prev, selectedProvider]));
+        setCliCommand(null);
+        setNextStep('provider_connected');
+      } else {
+        setProviderFeedback({
+          type: 'error',
+          text: 'Still waiting for authentication. Complete the CLI flow, then click "Done".',
+        });
+      }
     } catch (err) {
-      console.error('Create workspace error:', err);
-      setError(err instanceof Error ? err.message : 'Failed to create workspace');
-      setIsCreating(false);
+      setProviderFeedback({
+        type: 'error',
+        text: err instanceof Error ? err.message : 'Failed to start CLI authentication',
+      });
+    } finally {
+      setIsSubmittingProvider(false);
     }
-  }, [csrfToken, trackEvent]);
+  }, [buildHeaders, selectedProvider, selectedRepos, pollForCliCompletion]);
 
-  const handleConnectRepos = useCallback(() => {
-    trackEvent('onboarding_connect_repos_clicked', { reason });
-    window.location.href = '/connect-repos';
-  }, [reason, trackEvent]);
+  const switchToCliMode = useCallback(() => {
+    setAuthMode('cli');
+    if (!cliCommand && !isSubmittingProvider && selectedRepos.size > 0) {
+      handleStartCliAuth();
+    }
+  }, [cliCommand, isSubmittingProvider, selectedRepos, handleStartCliAuth]);
+
+  const handleCliDone = useCallback(async () => {
+    setIsSubmittingProvider(true);
+    try {
+      const connected = await verifyProviderConnected();
+      if (!connected) {
+        setProviderFeedback({
+          type: 'error',
+          text: 'Provider is not connected yet. Complete the CLI authentication first.',
+        });
+        return;
+      }
+
+      setAuthMode('api_key');
+      setConnectedProviders(prev => new Set([...prev, selectedProvider]));
+      setCliCommand(null);
+      setProviderFeedback({ type: 'success', text: `${selectedProviderMeta.label} connected! Add another provider or continue to create your workspace.` });
+      setNextStep('provider_connected');
+    } finally {
+      setIsSubmittingProvider(false);
+    }
+  }, [selectedProviderMeta.label, selectedProvider, verifyProviderConnected]);
+
+  const handleCopyCommand = useCallback(async () => {
+    if (!cliCommand) {
+      return;
+    }
+    await navigator.clipboard.writeText(cliCommand);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [cliCommand]);
 
-  // Loading state
   if (isLoading) {
     return (
       <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex items-center justify-center">
@@ -188,34 +700,56 @@ function OnboardingContent() {
             <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...</p>
+          <p className="mt-4 text-text-muted">Loading onboarding...</p>
         </div>
       </div>
     );
   }
 
-  // Creating workspace state
-  if (isCreating) {
+  if (workspaceState === 'provisioning' || isCreatingWorkspace) {
     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-white font-medium">Creating your workspace...</p>
-          <p className="mt-2 text-text-muted text-sm">This may take a few minutes</p>
+      <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex items-center justify-center p-4">
+        <div className="w-full max-w-2xl">
+          <ProvisioningProgress
+            currentStage={provisioningStage}
+            isProvisioning={true}
+            workspaceName={Array.from(selectedRepos).join(', ')}
+            error={error}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (workspaceState === 'running' && workspaceId) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex items-center justify-center p-4">
+        <div className="w-full max-w-xl bg-bg-primary/80 backdrop-blur-sm border border-border-subtle rounded-2xl p-8 text-center">
+          <div className="w-16 h-16 rounded-full bg-success/20 flex items-center justify-center mx-auto mb-4">
+            <svg className="w-8 h-8 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h1 className="text-2xl font-bold text-white">Workspace Ready</h1>
+          <p className="mt-2 text-text-muted">
+            Your workspace is running and ready for your first agent.
+          </p>
+          <a
+            href={`/app?workspace=${workspaceId}&spawn=true`}
+            className="mt-6 inline-flex items-center gap-2 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"
+          >
+            Spawn your first agent
+          </a>
         </div>
       </div>
     );
   }
 
-  // Determine content based on reason
   const isDeletedWorkspace = reason === 'deleted';
+  const showProviderStep = repos.length > 0 && (nextStep === 'connect_ai_provider' || nextStep === 'provider_connected');
 
   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"
@@ -228,7 +762,6 @@ function OnboardingContent() {
       </div>
 
       <div className="relative z-10 w-full max-w-2xl">
-        {/* Logo and Header */}
         <div className="flex flex-col items-center mb-8">
           <LogoIcon size={56} withGlow={true} />
           <h1 className="mt-6 text-3xl font-bold text-white">
@@ -236,130 +769,279 @@ function OnboardingContent() {
           </h1>
           <p className="mt-3 text-text-muted text-center max-w-md">
             {isDeletedWorkspace
-              ? 'Your workspace has been deleted. Create a new one to continue working with AI agents.'
-              : 'Get started by creating your first workspace. Connect a repository and let AI agents help you build.'}
+              ? 'Your workspace was deleted. Reconnect and provision a new environment to continue.'
+              : 'Connect an AI provider, then we will automatically provision your first workspace.'}
           </p>
         </div>
 
-        {/* Error message */}
         {error && (
           <div className="mb-6 p-4 bg-error/10 border border-error/20 rounded-xl">
             <p className="text-error text-center">{error}</p>
           </div>
         )}
 
-        {/* Main content card */}
         <div className="bg-bg-primary/80 backdrop-blur-sm border border-border-subtle rounded-2xl p-8">
-          {/* Step indicator for first-time users */}
-          {!isDeletedWorkspace && (
+          {repos.length > 0 && (
             <div className="flex items-center justify-center gap-3 mb-8">
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-full bg-accent-cyan flex items-center justify-center text-bg-deep font-semibold text-sm">
-                  1
-                </div>
-                <span className="text-white font-medium">Select Repository</span>
-              </div>
+              <StepBadge label="Repository" active={selectedRepos.size > 0} done={selectedRepos.size > 0} />
               <div className="w-12 h-px bg-border-subtle" />
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-full bg-bg-tertiary border border-border-subtle flex items-center justify-center text-text-muted font-semibold text-sm">
-                  2
-                </div>
-                <span className="text-text-muted">Connect AI Provider</span>
-              </div>
+              <StepBadge
+                label="Provider"
+                active={showProviderStep}
+                done={nextStep !== 'connect_ai_provider'}
+              />
               <div className="w-12 h-px bg-border-subtle" />
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-full bg-bg-tertiary border border-border-subtle flex items-center justify-center text-text-muted font-semibold text-sm">
-                  3
-                </div>
-                <span className="text-text-muted">Start Building</span>
-              </div>
+              <StepBadge label="Provision" active={false} done={false} />
             </div>
           )}
 
-          <h2 className="text-xl font-semibold text-white mb-2">
-            {isDeletedWorkspace ? 'Create a New Workspace' : 'Choose a Repository'}
-          </h2>
-          <p className="text-text-muted mb-6">
-            {isDeletedWorkspace
-              ? 'Select a repository to create a new workspace for your AI agents.'
-              : 'Your workspace will be set up with this repository. You can add more repos later.'}
-          </p>
-
-          {repos.length > 0 ? (
-            <div className="space-y-3">
-              {repos.map((repo) => (
-                <button
-                  key={repo.id}
-                  onClick={() => handleCreateWorkspace(repo.fullName)}
-                  disabled={isCreating}
-                  className="w-full flex items-center gap-4 p-4 bg-bg-tertiary rounded-xl border border-border-subtle hover:border-accent-cyan/50 hover:bg-bg-hover transition-all text-left group disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  <div className="w-12 h-12 rounded-lg bg-bg-card border border-border-subtle flex items-center justify-center flex-shrink-0 group-hover:border-accent-cyan/30 transition-colors">
-                    <svg className="w-6 h-6 text-text-muted group-hover:text-accent-cyan transition-colors" fill="currentColor" viewBox="0 0 16 16">
-                      <path d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8z" />
-                    </svg>
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-white font-medium truncate group-hover:text-accent-cyan transition-colors">
-                      {repo.fullName}
-                    </p>
-                    <p className="text-text-muted text-sm mt-0.5">
-                      {repo.isPrivate ? 'Private repository' : 'Public repository'} · {repo.defaultBranch}
-                    </p>
-                  </div>
-                  <svg className="w-5 h-5 text-text-muted group-hover:text-accent-cyan group-hover:translate-x-1 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                  </svg>
-                </button>
-              ))}
-            </div>
-          ) : (
-            <div className="text-center py-12 bg-bg-tertiary rounded-xl border border-border-subtle">
-              <div className="w-16 h-16 mx-auto mb-4 bg-bg-card rounded-full flex items-center justify-center">
-                <svg className="w-8 h-8 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>
+          {repos.length === 0 ? (
+            <div className="text-center py-8 bg-bg-tertiary rounded-xl border border-border-subtle">
               <h3 className="text-lg font-semibold text-white mb-2">No Repositories Connected</h3>
               <p className="text-text-muted mb-6 max-w-sm mx-auto">
-                Connect your GitHub repositories to create a workspace and start working with AI agents.
+                Connect your GitHub repositories to continue onboarding.
               </p>
               <button
                 onClick={handleConnectRepos}
                 className="inline-flex items-center gap-2 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"
               >
-                <svg className="w-5 h-5" 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>
                 Connect GitHub
               </button>
             </div>
+          ) : showProviderStep ? (
+            <div className="space-y-6">
+              <div>
+                <label className="block text-sm text-text-muted mb-2">Repositories</label>
+                <div className="max-h-48 overflow-y-auto space-y-2 p-3 bg-bg-tertiary border border-border-subtle rounded-xl">
+                  {repos.map((repo) => (
+                    <label
+                      key={repo.id}
+                      className="flex items-center gap-3 p-2 rounded-lg hover:bg-bg-card cursor-pointer transition-colors"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedRepos.has(repo.fullName)}
+                        onChange={() => {
+                          setSelectedRepos(prev => {
+                            const next = new Set(prev);
+                            if (next.has(repo.fullName)) {
+                              next.delete(repo.fullName);
+                            } else {
+                              next.add(repo.fullName);
+                            }
+                            return next;
+                          });
+                        }}
+                        className="w-4 h-4 rounded border-border-subtle text-accent-cyan focus:ring-accent-cyan/50 bg-bg-deep"
+                      />
+                      <span className="text-white text-sm">{repo.fullName}</span>
+                      {repo.isPrivate && (
+                        <span className="text-xs text-text-muted bg-bg-deep px-1.5 py-0.5 rounded">private</span>
+                      )}
+                    </label>
+                  ))}
+                </div>
+                <p className="text-xs text-text-muted mt-1">{selectedRepos.size} selected</p>
+              </div>
+
+              <div>
+                <p className="text-sm text-text-muted mb-3">Select AI provider</p>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                  {PROVIDERS.map((provider) => {
+                    const isConnected = connectedProviders.has(provider.id);
+                    return (
+                      <button
+                        key={provider.id}
+                        type="button"
+                        onClick={() => {
+                          setSelectedProvider(provider.id);
+                          // Reset auth state so user can connect this provider
+                          setCliCommand(null);
+                          setApiKey('');
+                          setProviderFeedback(null);
+                          if (authMode !== 'api_key') setAuthMode('api_key');
+                        }}
+                        className={`p-3 rounded-xl border text-left transition-colors relative ${
+                          isConnected
+                            ? 'border-success/50 bg-success/10'
+                            : selectedProvider === provider.id
+                              ? 'border-accent-cyan bg-accent-cyan/10'
+                              : 'border-border-subtle bg-bg-tertiary hover:border-accent-cyan/40'
+                        }`}
+                      >
+                        <div className="flex items-center justify-between">
+                          <p className="text-white font-medium">{provider.label}</p>
+                          {isConnected && (
+                            <span className="flex items-center gap-1 text-xs text-success font-medium">
+                              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                              </svg>
+                              Connected
+                            </span>
+                          )}
+                        </div>
+                        <p className="text-xs text-text-muted mt-1">{provider.description}</p>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Show "Continue" button when at least one provider is connected */}
+              {connectedProviders.size > 0 && nextStep === 'provider_connected' && (
+                <div className="flex items-center justify-between p-4 bg-success/10 border border-success/30 rounded-xl">
+                  <p className="text-sm text-success">
+                    {connectedProviders.size} provider{connectedProviders.size > 1 ? 's' : ''} connected.
+                    {' '}Add more or continue to create your workspace.
+                  </p>
+                  <button
+                    type="button"
+                    onClick={() => startWorkspaceCreation()}
+                    className="px-5 py-2.5 bg-gradient-to-r from-accent-cyan to-[#00b8d9] text-bg-deep font-semibold rounded-xl hover:shadow-glow-cyan transition-all text-sm"
+                  >
+                    Create Workspace
+                  </button>
+                </div>
+              )}
+
+              {!connectedProviders.has(selectedProvider) && (
+              <div className="flex gap-2 p-1 bg-bg-tertiary rounded-xl border border-border-subtle">
+                <button
+                  type="button"
+                  onClick={() => setAuthMode('api_key')}
+                  className={`flex-1 py-2.5 px-4 text-sm rounded-lg transition-colors ${
+                    authMode === 'api_key' ? 'bg-accent-cyan text-bg-deep font-semibold' : 'text-text-muted hover:text-white'
+                  }`}
+                >
+                  API Key Input
+                </button>
+                <button
+                  type="button"
+                  onClick={switchToCliMode}
+                  className={`flex-1 py-2.5 px-4 text-sm rounded-lg transition-colors ${
+                    authMode === 'cli' ? 'bg-accent-cyan text-bg-deep font-semibold' : 'text-text-muted hover:text-white'
+                  }`}
+                >
+                  Authenticate via CLI
+                </button>
+              </div>
+              )}
+
+              {connectedProviders.has(selectedProvider) ? null : authMode === 'api_key' ? (
+                <div className="space-y-3">
+                  <label className="block text-sm text-text-muted">{selectedProviderMeta.label} API Key</label>
+                  <div className="flex gap-3">
+                    <input
+                      type="password"
+                      value={apiKey}
+                      onChange={(event) => setApiKey(event.target.value)}
+                      placeholder="Paste API key"
+                      className="flex-1 px-4 py-3 bg-bg-tertiary border border-border-subtle rounded-xl text-white placeholder:text-text-muted focus:outline-none focus:border-accent-cyan/50"
+                    />
+                    <button
+                      type="button"
+                      onClick={handleConnectApiKey}
+                      disabled={isSubmittingProvider || !apiKey.trim()}
+                      className="px-5 py-3 bg-accent-cyan text-bg-deep font-semibold rounded-xl hover:bg-accent-cyan/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    >
+                      {isSubmittingProvider ? 'Connecting...' : 'Connect'}
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {cliCommand ? (
+                    <div className="p-4 bg-bg-tertiary border border-border-subtle rounded-xl space-y-3">
+                      <p className="text-sm text-text-muted">Run this command in your terminal:</p>
+                      <code className="block px-3 py-2 bg-bg-deep rounded-lg text-sm text-white overflow-x-auto">
+                        {cliCommand}
+                      </code>
+                      <div className="flex gap-2">
+                        <button
+                          type="button"
+                          onClick={handleCopyCommand}
+                          className={`px-3 py-2 border rounded-lg text-xs transition-colors ${
+                            copied
+                              ? 'bg-success/20 border-success/50 text-success'
+                              : 'bg-bg-card border-border-subtle text-text-muted hover:text-white hover:border-accent-cyan/50'
+                          }`}
+                        >
+                          {copied ? 'Copied!' : 'Copy command'}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={handleCliDone}
+                          disabled={isSubmittingProvider}
+                          className="px-3 py-2 bg-accent-cyan text-bg-deep rounded-lg text-xs font-semibold hover:bg-accent-cyan/90 disabled:opacity-50 transition-colors"
+                        >
+                          Done
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-3 p-4 bg-bg-tertiary border border-border-subtle rounded-xl">
+                      <svg className="w-5 h-5 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-sm text-text-muted">Fetching CLI command...</span>
+                    </div>
+                  )}
+
+                  {isPollingCli && (
+                    <div className="flex items-center gap-2 text-sm text-success p-3 bg-success/10 border border-success/30 rounded-lg">
+                      <svg className="w-4 h-4 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>Waiting for authentication to complete...</span>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {providerFeedback && (
+                <div
+                  className={`p-3 rounded-lg text-sm ${
+                    providerFeedback.type === 'success'
+                      ? 'bg-success/10 border border-success/30 text-success'
+                      : providerFeedback.type === 'error'
+                        ? 'bg-error/10 border border-error/30 text-error'
+                        : 'bg-accent-cyan/10 border border-accent-cyan/30 text-accent-cyan'
+                  }`}
+                >
+                  {providerFeedback.text}
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="text-center py-8">
+              <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-white font-medium">Preparing workspace provisioning...</p>
+              <p className="mt-2 text-text-muted text-sm">You will be redirected automatically when ready.</p>
+            </div>
           )}
         </div>
 
-        {/* Footer navigation */}
         <div className="mt-8 flex justify-center gap-6 text-sm">
           {repos.length > 0 && (
-            <button
-              onClick={handleConnectRepos}
-              className="text-text-muted hover:text-white transition-colors"
-            >
+            <button onClick={handleConnectRepos} className="text-text-muted hover:text-white transition-colors">
               Connect More Repositories
             </button>
           )}
-          <a
-            href="/app"
-            className="text-text-muted hover:text-white transition-colors"
-          >
+          <a href="/app" className="text-text-muted hover:text-white transition-colors">
             Back to Dashboard
           </a>
           <button
             onClick={async () => {
-              const headers: Record<string, string> = {};
-              if (csrfToken) {
-                headers['X-CSRF-Token'] = csrfToken;
-              }
-              await fetch('/api/auth/logout', { method: 'POST', credentials: 'include', headers });
+              await fetch('/api/auth/logout', {
+                method: 'POST',
+                credentials: 'include',
+                headers: buildHeaders(false),
+              });
               window.location.href = '/login';
             }}
             className="text-text-muted hover:text-white transition-colors"
@@ -372,7 +1054,25 @@ function OnboardingContent() {
   );
 }
 
-// Wrap in Suspense for useSearchParams
+function StepBadge({ label, active, done }: { label: string; active: boolean; done: boolean }) {
+  return (
+    <div className="flex items-center gap-2">
+      <div
+        className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold ${
+          done
+            ? 'bg-success text-bg-deep'
+            : active
+              ? 'bg-accent-cyan text-bg-deep'
+              : 'bg-bg-tertiary border border-border-subtle text-text-muted'
+        }`}
+      >
+        {done ? '✓' : label[0]}
+      </div>
+      <span className={`${active || done ? 'text-white' : 'text-text-muted'} text-sm`}>{label}</span>
+    </div>
+  );
+}
+
 export default function OnboardingPage() {
   return (
     <Suspense