From 779e36fb2bc0534d39ac3eb5a3120e8d800b037b Mon Sep 17 00:00:00 2001
From: AndyMik90 <andre@mikalsenutvikling.no>
Date: Mon, 15 Dec 2025 17:29:41 +0100
Subject: [PATCH] auto-claude: subtask-3-1 - Add first-run detection to App.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Import OnboardingWizard component from onboarding module
- Add isOnboardingWizardOpen state to track wizard visibility
- Add useEffect to detect first run (onboardingCompleted === false)
- Wire OnboardingWizard with callbacks for task creator and settings

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 auto-claude-ui/src/renderer/App.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/auto-claude-ui/src/renderer/App.tsx b/auto-claude-ui/src/renderer/App.tsx
index 02ecb939..8584b762 100644
--- a/auto-claude-ui/src/renderer/App.tsx
+++ b/auto-claude-ui/src/renderer/App.tsx
@@ -31,6 +31,7 @@ import { Worktrees } from './components/Worktrees';
 import { WelcomeScreen } from './components/WelcomeScreen';
 import { RateLimitModal } from './components/RateLimitModal';
 import { SDKRateLimitModal } from './components/SDKRateLimitModal';
+import { OnboardingWizard } from './components/onboarding';
 import { useProjectStore, loadProjects, addProject, initializeProject } from './stores/project-store';
 import { useTaskStore, loadTasks } from './stores/task-store';
 import { useSettingsStore, loadSettings } from './stores/settings-store';
@@ -54,6 +55,7 @@ export function App() {
   const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false);
   const [settingsInitialSection, setSettingsInitialSection] = useState<AppSection | undefined>(undefined);
   const [activeView, setActiveView] = useState<SidebarView>('kanban');
+  const [isOnboardingWizardOpen, setIsOnboardingWizardOpen] = useState(false);
 
   // Initialize dialog state
   const [showInitDialog, setShowInitDialog] = useState(false);
@@ -70,6 +72,15 @@ export function App() {
     loadSettings();
   }, []);
 
+  // First-run detection - show onboarding wizard if not completed
+  useEffect(() => {
+    // Only show wizard if onboardingCompleted is explicitly false (not undefined)
+    // This ensures we don't show the wizard before settings are loaded
+    if (settings.onboardingCompleted === false) {
+      setIsOnboardingWizardOpen(true);
+    }
+  }, [settings.onboardingCompleted]);
+
   // Listen for open-app-settings events (e.g., from project settings)
   useEffect(() => {
     const handleOpenAppSettings = (event: Event) => {
@@ -423,6 +434,20 @@ export function App() {
 
         {/* SDK Rate Limit Modal - shows when SDK/CLI operations hit limits (changelog, tasks, etc.) */}
         <SDKRateLimitModal />
+
+        {/* Onboarding Wizard - shows on first launch when onboardingCompleted is false */}
+        <OnboardingWizard
+          open={isOnboardingWizardOpen}
+          onOpenChange={setIsOnboardingWizardOpen}
+          onOpenTaskCreator={() => {
+            setIsOnboardingWizardOpen(false);
+            setIsNewTaskDialogOpen(true);
+          }}
+          onOpenSettings={() => {
+            setIsOnboardingWizardOpen(false);
+            setIsSettingsDialogOpen(true);
+          }}
+        />
       </div>
     </TooltipProvider>
   );