Merge main into massive-terminal-upgrade

Resolves merge conflicts:
- apps/server/src/routes/terminal/common.ts: Keep randomBytes import, use @automaker/utils for createLogger
- apps/ui/eslint.config.mjs: Use main's explicit globals list with XMLHttpRequest and MediaQueryListEvent additions
- apps/ui/src/components/views/terminal-view.tsx: Keep our terminal improvements (killAllSessions, beforeunload, better error handling)
- apps/ui/src/config/terminal-themes.ts: Keep our search highlight colors for all themes
- apps/ui/src/store/app-store.ts: Keep our terminal settings persistence improvements (merge function)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -1,86 +1,83 @@
-
-import { useSetupStore } from "@/store/setup-store";
-import { StepIndicator } from "./setup-view/components";
+import { useSetupStore } from '@/store/setup-store';
+import { StepIndicator } from './setup-view/components';
 import {
   WelcomeStep,
+  ThemeStep,
   CompleteStep,
   ClaudeSetupStep,
   GitHubSetupStep,
-} from "./setup-view/steps";
-import { useNavigate } from "@tanstack/react-router";
+} from './setup-view/steps';
+import { useNavigate } from '@tanstack/react-router';
 
 // Main Setup View
 export function SetupView() {
-  const {
-    currentStep,
-    setCurrentStep,
-    completeSetup,
-    setSkipClaudeSetup,
-  } = useSetupStore();
+  const { currentStep, setCurrentStep, completeSetup, setSkipClaudeSetup } = useSetupStore();
   const navigate = useNavigate();
 
-  const steps = ["welcome", "claude", "github", "complete"] as const;
+  const steps = ['welcome', 'theme', 'claude', '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 === "github") return "github";
-    return "complete";
+    if (currentStep === 'claude_detect' || currentStep === 'claude_auth') return 'claude';
+    if (currentStep === 'welcome') return 'welcome';
+    if (currentStep === 'theme') return 'theme';
+    if (currentStep === 'github') return 'github';
+    return 'complete';
   };
   const currentIndex = steps.indexOf(getStepName());
 
   const handleNext = (from: string) => {
-    console.log(
-      "[Setup Flow] handleNext called from:",
-      from,
-      "currentStep:",
-      currentStep
-    );
+    console.log('[Setup Flow] handleNext called from:', from, 'currentStep:', currentStep);
     switch (from) {
-      case "welcome":
-        console.log("[Setup Flow] Moving to claude_detect step");
-        setCurrentStep("claude_detect");
+      case 'welcome':
+        console.log('[Setup Flow] Moving to theme step');
+        setCurrentStep('theme');
         break;
-      case "claude":
-        console.log("[Setup Flow] Moving to github step");
-        setCurrentStep("github");
+      case 'theme':
+        console.log('[Setup Flow] Moving to claude_detect step');
+        setCurrentStep('claude_detect');
         break;
-      case "github":
-        console.log("[Setup Flow] Moving to complete step");
-        setCurrentStep("complete");
+      case 'claude':
+        console.log('[Setup Flow] Moving to github step');
+        setCurrentStep('github');
+        break;
+      case 'github':
+        console.log('[Setup Flow] Moving to complete step');
+        setCurrentStep('complete');
         break;
     }
   };
 
   const handleBack = (from: string) => {
-    console.log("[Setup Flow] handleBack called from:", from);
+    console.log('[Setup Flow] handleBack called from:', from);
     switch (from) {
-      case "claude":
-        setCurrentStep("welcome");
+      case 'theme':
+        setCurrentStep('welcome');
         break;
-      case "github":
-        setCurrentStep("claude_detect");
+      case 'claude':
+        setCurrentStep('theme');
+        break;
+      case 'github':
+        setCurrentStep('claude_detect');
         break;
     }
   };
 
   const handleSkipClaude = () => {
-    console.log("[Setup Flow] Skipping Claude setup");
+    console.log('[Setup Flow] Skipping Claude setup');
     setSkipClaudeSetup(true);
-    setCurrentStep("github");
+    setCurrentStep('github');
   };
 
   const handleSkipGithub = () => {
-    console.log("[Setup Flow] Skipping GitHub setup");
-    setCurrentStep("complete");
+    console.log('[Setup Flow] Skipping GitHub setup');
+    setCurrentStep('complete');
   };
 
   const handleFinish = () => {
-    console.log("[Setup Flow] handleFinish called - completing setup");
+    console.log('[Setup Flow] handleFinish called - completing setup');
     completeSetup();
-    console.log("[Setup Flow] Setup completed, redirecting to welcome view");
-    navigate({ to: "/" });
+    console.log('[Setup Flow] Setup completed, redirecting to welcome view');
+    navigate({ to: '/' });
   };
 
   return (
@@ -90,50 +87,42 @@ export function SetupView() {
         <div className="px-8 py-4">
           <div className="flex items-center gap-3 titlebar-no-drag">
             <img src="/logo.png" alt="Automaker" className="w-8 h-8" />
-            <span className="text-lg font-semibold text-foreground">
-              Automaker Setup
-            </span>
+            <span className="text-lg font-semibold text-foreground">Automaker Setup</span>
           </div>
         </div>
       </div>
 
       {/* Content */}
-      <div className="flex-1 overflow-y-auto min-h-0">
-        <div className="p-8">
-          <div className="w-full max-w-2xl mx-auto">
-            <div className="mb-8">
-              <StepIndicator
-                currentStep={currentIndex}
-                totalSteps={steps.length}
+      <div className="flex-1 overflow-y-auto min-h-0 flex items-center justify-center">
+        <div className="w-full max-w-2xl mx-auto px-8">
+          <div className="mb-8">
+            <StepIndicator currentStep={currentIndex} totalSteps={steps.length} />
+          </div>
+
+          <div>
+            {currentStep === 'welcome' && <WelcomeStep onNext={() => handleNext('welcome')} />}
+
+            {currentStep === 'theme' && (
+              <ThemeStep onNext={() => handleNext('theme')} onBack={() => handleBack('theme')} />
+            )}
+
+            {(currentStep === 'claude_detect' || currentStep === 'claude_auth') && (
+              <ClaudeSetupStep
+                onNext={() => handleNext('claude')}
+                onBack={() => handleBack('claude')}
+                onSkip={handleSkipClaude}
               />
-            </div>
+            )}
 
-            <div className="py-8">
-              {currentStep === "welcome" && (
-                <WelcomeStep onNext={() => handleNext("welcome")} />
-              )}
+            {currentStep === 'github' && (
+              <GitHubSetupStep
+                onNext={() => handleNext('github')}
+                onBack={() => handleBack('github')}
+                onSkip={handleSkipGithub}
+              />
+            )}
 
-              {(currentStep === "claude_detect" ||
-                currentStep === "claude_auth") && (
-                <ClaudeSetupStep
-                  onNext={() => handleNext("claude")}
-                  onBack={() => handleBack("claude")}
-                  onSkip={handleSkipClaude}
-                />
-              )}
-
-              {currentStep === "github" && (
-                <GitHubSetupStep
-                  onNext={() => handleNext("github")}
-                  onBack={() => handleBack("github")}
-                  onSkip={handleSkipGithub}
-                />
-              )}
-
-              {currentStep === "complete" && (
-                <CompleteStep onFinish={handleFinish} />
-              )}
-            </div>
+            {currentStep === 'complete' && <CompleteStep onFinish={handleFinish} />}
           </div>
         </div>
       </div>