From 7e6a5682fa55c769ff8a73d00e2d798e146ddcc4 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Wed, 11 Mar 2026 13:55:49 -0500
Subject: [PATCH] Animate onboarding layout when switching between Company and
 Agent steps

When on the Company step (step 1), the form takes up the left half with
ASCII art on the right. Switching to Agent or any other step smoothly
animates the form to full width while fading out the ASCII art panel.
Switching back reverses the animation.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/components/OnboardingWizard.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/OnboardingWizard.tsx b/ui/src/components/OnboardingWizard.tsx
index 52997372..49addd6c 100644
--- a/ui/src/components/OnboardingWizard.tsx
+++ b/ui/src/components/OnboardingWizard.tsx
@@ -553,7 +553,10 @@ export function OnboardingWizard() {
           </button>
 
           {/* Left half — form */}
-          <div className="w-full md:w-1/2 flex flex-col overflow-y-auto">
+          <div className={cn(
+            "w-full flex flex-col overflow-y-auto transition-[width] duration-500 ease-in-out",
+            step === 1 ? "md:w-1/2" : "md:w-full"
+          )}>
             <div className="w-full max-w-md mx-auto my-auto px-8 py-12 shrink-0">
               {/* Progress tabs */}
               <div className="flex items-center gap-0 mb-8 border-b border-border">
@@ -1186,7 +1189,10 @@ export function OnboardingWizard() {
           </div>
 
           {/* Right half — ASCII art (hidden on mobile) */}
-          <div className="hidden md:block w-1/2 overflow-hidden bg-[#1d1d1d]">
+          <div className={cn(
+            "hidden md:block overflow-hidden bg-[#1d1d1d] transition-[width,opacity] duration-500 ease-in-out",
+            step === 1 ? "w-1/2 opacity-100" : "w-0 opacity-0"
+          )}>
             <AsciiArtAnimation />
           </div>
         </div>