feat: Add Cursor setup step to UI setup wizard

- Introduced a new `CursorSetupStep` component for optional Cursor CLI configuration during the setup process.
- Updated `SetupView` to include the cursor step in the setup flow, allowing users to skip or proceed with Cursor CLI setup.
- Enhanced state management to track Cursor CLI installation and authentication status.
- Updated Electron API to support fetching Cursor CLI status.
- Marked completion of the UI setup wizard phase in the integration plan.

apps/ui/src/components/views/setup-view.tsx

@@ -5,6 +5,7 @@ import {
   ThemeStep,
   CompleteStep,
   ClaudeSetupStep,
+  CursorSetupStep,
   GitHubSetupStep,
 } from './setup-view/steps';
 import { useNavigate } from '@tanstack/react-router';
@@ -14,12 +15,13 @@ export function SetupView() {
   const { currentStep, setCurrentStep, completeSetup, setSkipClaudeSetup } = useSetupStore();
   const navigate = useNavigate();
 
-  const steps = ['welcome', 'theme', 'claude', 'github', 'complete'] as const;
+  const steps = ['welcome', 'theme', 'claude', 'cursor', 'github', 'complete'] as const;
   type StepName = (typeof steps)[number];
   const getStepName = (): StepName => {
     if (currentStep === 'claude_detect' || currentStep === 'claude_auth') return 'claude';
     if (currentStep === 'welcome') return 'welcome';
     if (currentStep === 'theme') return 'theme';
+    if (currentStep === 'cursor') return 'cursor';
     if (currentStep === 'github') return 'github';
     return 'complete';
   };
@@ -37,6 +39,10 @@ export function SetupView() {
         setCurrentStep('claude_detect');
         break;
       case 'claude':
+        console.log('[Setup Flow] Moving to cursor step');
+        setCurrentStep('cursor');
+        break;
+      case 'cursor':
         console.log('[Setup Flow] Moving to github step');
         setCurrentStep('github');
         break;
@@ -56,15 +62,23 @@ export function SetupView() {
       case 'claude':
         setCurrentStep('theme');
         break;
-      case 'github':
+      case 'cursor':
         setCurrentStep('claude_detect');
         break;
+      case 'github':
+        setCurrentStep('cursor');
+        break;
     }
   };
 
   const handleSkipClaude = () => {
     console.log('[Setup Flow] Skipping Claude setup');
     setSkipClaudeSetup(true);
+    setCurrentStep('cursor');
+  };
+
+  const handleSkipCursor = () => {
+    console.log('[Setup Flow] Skipping Cursor setup');
     setCurrentStep('github');
   };
 
@@ -114,6 +128,14 @@ export function SetupView() {
               />
             )}
 
+            {currentStep === 'cursor' && (
+              <CursorSetupStep
+                onNext={() => handleNext('cursor')}
+                onBack={() => handleBack('cursor')}
+                onSkip={handleSkipCursor}
+              />
+            )}
+
             {currentStep === 'github' && (
               <GitHubSetupStep
                 onNext={() => handleNext('github')}

apps/ui/src/components/views/setup-view/steps/cursor-setup-step.tsx

@@ -0,0 +1,368 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { useSetupStore } from '@/store/setup-store';
+import { getElectronAPI } from '@/lib/electron';
+import {
+  CheckCircle2,
+  Loader2,
+  ArrowRight,
+  ArrowLeft,
+  ExternalLink,
+  Copy,
+  RefreshCw,
+  AlertTriangle,
+  Terminal,
+  XCircle,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { StatusBadge } from '../components';
+
+interface CursorSetupStepProps {
+  onNext: () => void;
+  onBack: () => void;
+  onSkip: () => void;
+}
+
+interface CursorCliStatus {
+  installed: boolean;
+  version?: string | null;
+  path?: string | null;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+  };
+  installCommand?: string;
+  loginCommand?: string;
+}
+
+export function CursorSetupStep({ onNext, onBack, onSkip }: CursorSetupStepProps) {
+  const { cursorCliStatus, setCursorCliStatus } = useSetupStore();
+  const [isChecking, setIsChecking] = useState(false);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getCursorStatus) {
+        return;
+      }
+      const result = await api.setup.getCursorStatus();
+      if (result.success) {
+        const status: CursorCliStatus = {
+          installed: result.installed ?? false,
+          version: result.version,
+          path: result.path,
+          auth: result.auth,
+          installCommand: result.installCommand,
+          loginCommand: result.loginCommand,
+        };
+        setCursorCliStatus(status);
+
+        if (result.auth?.authenticated) {
+          toast.success('Cursor CLI is ready!');
+        }
+      }
+    } catch (error) {
+      console.error('Failed to check Cursor status:', error);
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setCursorCliStatus]);
+
+  useEffect(() => {
+    checkStatus();
+    // Cleanup polling on unmount
+    return () => {
+      if (pollIntervalRef.current) {
+        clearInterval(pollIntervalRef.current);
+      }
+    };
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const handleLogin = async () => {
+    setIsLoggingIn(true);
+
+    try {
+      // Copy login command to clipboard and show instructions
+      const loginCommand = cursorCliStatus?.loginCommand || 'cursor-agent login';
+      await navigator.clipboard.writeText(loginCommand);
+      toast.info('Login command copied! Paste in terminal to authenticate.');
+
+      // Poll for auth status
+      let attempts = 0;
+      const maxAttempts = 60; // 2 minutes with 2s interval
+
+      pollIntervalRef.current = setInterval(async () => {
+        attempts++;
+
+        try {
+          const api = getElectronAPI();
+          if (!api.setup?.getCursorStatus) {
+            return;
+          }
+          const result = await api.setup.getCursorStatus();
+
+          if (result.auth?.authenticated) {
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current);
+              pollIntervalRef.current = null;
+            }
+            setCursorCliStatus({
+              ...cursorCliStatus,
+              installed: result.installed ?? true,
+              version: result.version,
+              path: result.path,
+              auth: result.auth,
+            } as CursorCliStatus);
+            setIsLoggingIn(false);
+            toast.success('Successfully logged in to Cursor!');
+          }
+        } catch {
+          // Ignore polling errors
+        }
+
+        if (attempts >= maxAttempts) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setIsLoggingIn(false);
+          toast.error('Login timed out. Please try again.');
+        }
+      }, 2000);
+    } catch (error) {
+      console.error('Login failed:', error);
+      toast.error('Failed to start login process');
+      setIsLoggingIn(false);
+    }
+  };
+
+  const isReady = cursorCliStatus?.installed && cursorCliStatus?.auth?.authenticated;
+
+  const getStatusBadge = () => {
+    if (isChecking) {
+      return <StatusBadge status="checking" label="Checking..." />;
+    }
+    if (cursorCliStatus?.auth?.authenticated) {
+      return <StatusBadge status="authenticated" label="Ready" />;
+    }
+    if (cursorCliStatus?.installed) {
+      return <StatusBadge status="unverified" label="Not Logged In" />;
+    }
+    return <StatusBadge status="not_installed" label="Not Installed" />;
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center mb-8">
+        <div className="w-16 h-16 rounded-xl bg-cyan-500/10 flex items-center justify-center mx-auto mb-4">
+          <Terminal className="w-8 h-8 text-cyan-500" />
+        </div>
+        <h2 className="text-2xl font-bold text-foreground mb-2">Cursor CLI Setup</h2>
+        <p className="text-muted-foreground">Optional - Use Cursor as an AI provider</p>
+      </div>
+
+      {/* Info Banner */}
+      <Card className="bg-cyan-500/10 border-cyan-500/20">
+        <CardContent className="pt-4">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="w-5 h-5 text-cyan-500 shrink-0 mt-0.5" />
+            <div>
+              <p className="font-medium text-foreground">This step is optional</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                Configure Cursor CLI as an alternative AI provider. You can skip this and use Claude
+                instead, or configure it later in Settings.
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Status Card */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg flex items-center gap-2">
+              <Terminal className="w-5 h-5" />
+              Cursor CLI Status
+              <Badge variant="outline" className="ml-2">
+                Optional
+              </Badge>
+            </CardTitle>
+            <div className="flex items-center gap-2">
+              {getStatusBadge()}
+              <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+                <RefreshCw className={`w-4 h-4 ${isChecking ? 'animate-spin' : ''}`} />
+              </Button>
+            </div>
+          </div>
+          <CardDescription>
+            {cursorCliStatus?.installed
+              ? cursorCliStatus.auth?.authenticated
+                ? `Authenticated via ${cursorCliStatus.auth.method === 'api_key' ? 'API Key' : 'Browser Login'}${cursorCliStatus.version ? ` (v${cursorCliStatus.version})` : ''}`
+                : 'Installed but not authenticated'
+              : 'Not installed on your system'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Success State */}
+          {isReady && (
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">Cursor CLI is ready!</p>
+                <p className="text-sm text-muted-foreground">
+                  You can use Cursor models for AI tasks.
+                  {cursorCliStatus?.version && (
+                    <span className="ml-1">Version: {cursorCliStatus.version}</span>
+                  )}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Not Installed */}
+          {!cursorCliStatus?.installed && !isChecking && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="font-medium text-foreground">Cursor CLI not found</p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Install the Cursor CLI to use Cursor models.
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <p className="font-medium text-foreground text-sm">Install Cursor CLI:</p>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                    {cursorCliStatus?.installCommand ||
+                      'curl https://cursor.com/install -fsS | bash'}
+                  </code>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() =>
+                      copyCommand(
+                        cursorCliStatus?.installCommand ||
+                          'curl https://cursor.com/install -fsS | bash'
+                      )
+                    }
+                  >
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+                <a
+                  href="https://cursor.com/docs/cli"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center text-sm text-brand-500 hover:underline mt-2"
+                >
+                  View installation docs
+                  <ExternalLink className="w-3 h-3 ml-1" />
+                </a>
+              </div>
+            </div>
+          )}
+
+          {/* Installed but not authenticated */}
+          {cursorCliStatus?.installed && !cursorCliStatus?.auth?.authenticated && !isChecking && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+                <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="font-medium text-foreground">Cursor CLI not authenticated</p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Run the login command to authenticate with Cursor.
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <p className="text-sm text-muted-foreground">
+                  Run the login command in your terminal, then complete authentication in your
+                  browser:
+                </p>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                    {cursorCliStatus?.loginCommand || 'cursor-agent login'}
+                  </code>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() =>
+                      copyCommand(cursorCliStatus?.loginCommand || 'cursor-agent login')
+                    }
+                  >
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+                <Button
+                  onClick={handleLogin}
+                  disabled={isLoggingIn}
+                  className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                >
+                  {isLoggingIn ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      Waiting for login...
+                    </>
+                  ) : (
+                    'Copy Command & Wait for Login'
+                  )}
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Loading State */}
+          {isChecking && (
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+              <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />
+              <div>
+                <p className="font-medium text-foreground">Checking Cursor CLI status...</p>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Navigation */}
+      <div className="flex justify-between pt-4">
+        <Button variant="ghost" onClick={onBack} className="text-muted-foreground">
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back
+        </Button>
+        <div className="flex gap-2">
+          <Button variant="ghost" onClick={onSkip} className="text-muted-foreground">
+            {isReady ? 'Skip' : 'Skip for now'}
+          </Button>
+          <Button
+            onClick={onNext}
+            className="bg-brand-500 hover:bg-brand-600 text-white"
+            data-testid="cursor-next-button"
+          >
+            {isReady ? 'Continue' : 'Continue without Cursor'}
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Info note */}
+      <p className="text-xs text-muted-foreground text-center">
+        You can always configure Cursor later in Settings
+      </p>
+    </div>
+  );
+}

apps/ui/src/components/views/setup-view/steps/index.ts

@@ -3,4 +3,5 @@ export { WelcomeStep } from './welcome-step';
 export { ThemeStep } from './theme-step';
 export { CompleteStep } from './complete-step';
 export { ClaudeSetupStep } from './claude-setup-step';
+export { CursorSetupStep } from './cursor-setup-step';
 export { GitHubSetupStep } from './github-setup-step';