From e348383c1f807bc1563f7b173e4b439ffb09317b Mon Sep 17 00:00:00 2001
From: Auto <leon.vanzyl@gmail.com>
Date: Sun, 1 Feb 2026 10:24:41 +0200
Subject: [PATCH] fix: add user-visible error handling for spec creation agent
 start

The onComplete handler in the empty Kanban spec creation flow only
logged errors to console.error, leaving users with no feedback when
the agent failed to start. This wires up the SpecCreationChat
component's built-in error UI (spinner, error banner, retry button)
via initializerStatus, initializerError, and onRetryInitializer props.

Changes:
- Add InitializerStatus type and specInitializerStatus/Error state
- Set status to 'starting' before startAgent call (shows spinner)
- On error, keep spec chat open so the error banner is visible
- On success, close chat and refresh queries (same as before)
- Wire up onRetryInitializer to reset state to idle
- Reset initializer status on cancel/exit for clean re-entry

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 ui/src/App.tsx | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index a78a4aa..16fc4c0 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -41,6 +41,8 @@ const VIEW_MODE_KEY = 'autocoder-view-mode'
 // Bottom padding for main content when debug panel is collapsed (40px header + 8px margin)
 const COLLAPSED_DEBUG_PANEL_CLEARANCE = 48
 
+type InitializerStatus = 'idle' | 'starting' | 'error'
+
 function App() {
   // Initialize selected project from localStorage
   const [selectedProject, setSelectedProject] = useState<string | null>(() => {
@@ -63,6 +65,8 @@ function App() {
   const [isSpecCreating, setIsSpecCreating] = useState(false)
   const [showResetModal, setShowResetModal] = useState(false)
   const [showSpecChat, setShowSpecChat] = useState(false)  // For "Create Spec" button in empty kanban
+  const [specInitializerStatus, setSpecInitializerStatus] = useState<InitializerStatus>('idle')
+  const [specInitializerError, setSpecInitializerError] = useState<string | null>(null)
   const [viewMode, setViewMode] = useState<ViewMode>(() => {
     try {
       const stored = localStorage.getItem(VIEW_MODE_KEY)
@@ -496,22 +500,30 @@ function App() {
           <SpecCreationChat
             projectName={selectedProject}
             onComplete={async (_specPath, yoloMode) => {
-              // Auto-start the agent after spec creation (same as NewProjectModal)
+              setSpecInitializerStatus('starting')
               try {
                 await startAgent(selectedProject, {
                   yoloMode: yoloMode ?? false,
                   maxConcurrency: 3,
                 })
+                // Success — close chat and refresh
+                setShowSpecChat(false)
+                setSpecInitializerStatus('idle')
+                queryClient.invalidateQueries({ queryKey: ['projects'] })
+                queryClient.invalidateQueries({ queryKey: ['features', selectedProject] })
               } catch (err) {
-                console.error('Failed to start agent:', err)
+                setSpecInitializerStatus('error')
+                setSpecInitializerError(err instanceof Error ? err.message : 'Failed to start agent')
               }
-              setShowSpecChat(false)
-              // Refresh projects to update has_spec
-              queryClient.invalidateQueries({ queryKey: ['projects'] })
-              queryClient.invalidateQueries({ queryKey: ['features', selectedProject] })
             }}
-            onCancel={() => setShowSpecChat(false)}
-            onExitToProject={() => setShowSpecChat(false)}
+            onCancel={() => { setShowSpecChat(false); setSpecInitializerStatus('idle') }}
+            onExitToProject={() => { setShowSpecChat(false); setSpecInitializerStatus('idle') }}
+            initializerStatus={specInitializerStatus}
+            initializerError={specInitializerError}
+            onRetryInitializer={() => {
+              setSpecInitializerError(null)
+              setSpecInitializerStatus('idle')
+            }}
           />
         </div>
       )}