feat: show feature splash before login for new users

apps/code/src/renderer/App.tsx

@@ -7,6 +7,7 @@ import { AuthScreen } from "@features/auth/components/AuthScreen";
 import { InviteCodeScreen } from "@features/auth/components/InviteCodeScreen";
 import { useAuthStore } from "@features/auth/stores/authStore";
 import { OnboardingFlow } from "@features/onboarding/components/OnboardingFlow";
+import { PreAuthWelcome } from "@features/onboarding/components/PreAuthWelcome";
 import { Flex, Spinner, Text } from "@radix-ui/themes";
 import { initializeConnectivityStore } from "@renderer/stores/connectivityStore";
 import { useFocusStore } from "@renderer/stores/focusStore";
@@ -154,6 +155,14 @@ function App() {
 
   // Four-phase rendering: auth → access gate → onboarding → main app
   const renderContent = () => {
+    if (!isAuthenticated && !hasCompletedOnboarding) {
+      return (
+        <motion.div key="welcome" initial={{ opacity: 1 }}>
+          <PreAuthWelcome />
+        </motion.div>
+      );
+    }
+
     if (!isAuthenticated) {
       return (
         <motion.div key="auth" initial={{ opacity: 1 }}>

apps/code/src/renderer/features/onboarding/components/OnboardingFlow.tsx

@@ -12,7 +12,6 @@ import { OrgBillingStep } from "./OrgBillingStep";
 import { SignalsStep } from "./SignalsStep";
 import { StepIndicator } from "./StepIndicator";
 import { TutorialStep } from "./TutorialStep";
-import { WelcomeStep } from "./WelcomeStep";
 
 export function OnboardingFlow() {
   const { currentStep, activeSteps, next, back } = useOnboardingFlow();
@@ -81,19 +80,6 @@ export function OnboardingFlow() {
                   style={{ minHeight: 0 }}
                 >
                   <AnimatePresence mode="wait">
-                    {currentStep === "welcome" && (
-                      <motion.div
-                        key="welcome"
-                        initial={{ opacity: 0, x: 20 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        exit={{ opacity: 0, x: -20 }}
-                        transition={{ duration: 0.3 }}
-                        style={{ width: "100%", flex: 1, minHeight: 0 }}
-                      >
-                        <WelcomeStep onNext={next} />
-                      </motion.div>
-                    )}
-
                     {currentStep === "billing" && (
                       <motion.div
                         key="billing"

apps/code/src/renderer/features/onboarding/components/PreAuthWelcome.tsx

@@ -0,0 +1,77 @@
+import { DraggableTitleBar } from "@components/DraggableTitleBar";
+import { ZenHedgehog } from "@components/ZenHedgehog";
+import { AuthScreen } from "@features/auth/components/AuthScreen";
+import { Flex, Theme } from "@radix-ui/themes";
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
+import { WelcomeStep } from "./WelcomeStep";
+
+export function PreAuthWelcome() {
+  const [showAuth, setShowAuth] = useState(false);
+
+  if (showAuth) {
+    return <AuthScreen />;
+  }
+
+  return (
+    <Theme appearance="light" accentColor="orange">
+      <Flex
+        direction="column"
+        height="100vh"
+        style={{ position: "relative", overflow: "hidden" }}
+      >
+        <DraggableTitleBar />
+
+        {/* Background */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            backgroundColor: "rgb(243, 244, 240)",
+          }}
+        />
+
+        {/* Right panel — zen hedgehog */}
+        <Flex
+          align="center"
+          justify="center"
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: "55%",
+            backgroundColor: "rgb(243, 244, 240)",
+          }}
+        >
+          <ZenHedgehog />
+        </Flex>
+
+        {/* Content */}
+        <Flex
+          direction="column"
+          flexGrow="1"
+          style={{
+            position: "relative",
+            zIndex: 1,
+            minHeight: 0,
+            width: "45%",
+          }}
+        >
+          <AnimatePresence mode="wait">
+            <motion.div
+              key="welcome"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.3 }}
+              style={{ width: "100%", flex: 1, minHeight: 0 }}
+            >
+              <WelcomeStep onNext={() => setShowAuth(true)} />
+            </motion.div>
+          </AnimatePresence>
+        </Flex>
+      </Flex>
+    </Theme>
+  );
+}

apps/code/src/renderer/features/onboarding/components/WelcomeStep.tsx

@@ -91,7 +91,7 @@ export function WelcomeStep({ onNext }: WelcomeStepProps) {
 
         <Flex gap="3" align="center" flexShrink="0" mt="4">
           <Button size="3" onClick={onNext}>
-            Get Started
+            Sign in to get started
             <ArrowRight size={16} />
           </Button>
         </Flex>

apps/code/src/renderer/features/onboarding/hooks/useOnboardingFlow.ts

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import { ONBOARDING_STEPS, type OnboardingStep } from "../types";
 
 export function useOnboardingFlow() {
-  const [currentStep, setCurrentStep] = useState<OnboardingStep>("welcome");
+  const [currentStep, setCurrentStep] = useState<OnboardingStep>("billing");
   const billingEnabled = useFeatureFlag("twig-billing", false);
 
   // Show billing onboarding steps only when billing is enabled

apps/code/src/renderer/features/onboarding/types.ts

@@ -1,13 +1,11 @@
 export type OnboardingStep =
-  | "welcome"
   | "billing"
   | "org-billing"
   | "git-integration"
   | "signals"
   | "tutorial";
 
 export const ONBOARDING_STEPS: OnboardingStep[] = [
-  "welcome",
   "billing",
   "org-billing",
   "git-integration",