Merge remote-tracking branch 'origin/main' into feat/extend-models-support

app/src/components/layout/sidebar.tsx

@@ -16,9 +16,12 @@ import {
   PanelLeft,
   PanelLeftClose,
   ChevronDown,
+  Redo2,
   Check,
   BookOpen,
   GripVertical,
+  RotateCw,
+  RotateCcw,
   Trash2,
   Undo2,
   UserCircle,
@@ -45,8 +48,15 @@ import {
   KeyboardShortcut,
 } from "@/hooks/use-keyboard-shortcuts";
 import { getElectronAPI, Project, TrashedProject } from "@/lib/electron";
-import { initializeProject } from "@/lib/project-init";
+import {
+  initializeProject,
+  hasAppSpec,
+  hasAutomakerDir,
+} from "@/lib/project-init";
 import { toast } from "sonner";
+import { Sparkles, Loader2 } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import type { SpecRegenerationEvent } from "@/types/electron";
 import {
   DndContext,
   DragEndEvent,
@@ -156,6 +166,7 @@ export function Sidebar() {
     currentProject,
     currentView,
     sidebarOpen,
+    projectHistory,
     addProject,
     setCurrentProject,
     setCurrentView,
@@ -164,6 +175,8 @@ export function Sidebar() {
     deleteTrashedProject,
     emptyTrash,
     reorderProjects,
+    cyclePrevProject,
+    cycleNextProject,
   } = useAppStore();
 
   // State for project picker dropdown
@@ -172,6 +185,17 @@ export function Sidebar() {
   const [activeTrashId, setActiveTrashId] = useState<string | null>(null);
   const [isEmptyingTrash, setIsEmptyingTrash] = useState(false);
 
+  // State for new project setup dialog
+  const [showSetupDialog, setShowSetupDialog] = useState(false);
+  const [setupProjectPath, setSetupProjectPath] = useState("");
+  const [projectOverview, setProjectOverview] = useState("");
+  const [isCreatingSpec, setIsCreatingSpec] = useState(false);
+  const [creatingSpecProjectPath, setCreatingSpecProjectPath] = useState<
+    string | null
+  >(null);
+  const [generateFeatures, setGenerateFeatures] = useState(true);
+  const [showSpecIndicator, setShowSpecIndicator] = useState(true);
+
   // Sensors for drag-and-drop
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -198,6 +222,93 @@ export function Sidebar() {
     [projects, reorderProjects]
   );
 
+  // Subscribe to spec regeneration events
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    const unsubscribe = api.specRegeneration.onEvent(
+      (event: SpecRegenerationEvent) => {
+        console.log("[Sidebar] Spec regeneration event:", event.type);
+
+        if (event.type === "spec_regeneration_complete") {
+          setIsCreatingSpec(false);
+          setCreatingSpecProjectPath(null);
+          setShowSetupDialog(false);
+          setProjectOverview("");
+          setSetupProjectPath("");
+          toast.success("App specification created", {
+            description: "Your project is now set up and ready to go!",
+          });
+          // Navigate to spec view to show the new spec
+          setCurrentView("spec");
+        } else if (event.type === "spec_regeneration_error") {
+          setIsCreatingSpec(false);
+          setCreatingSpecProjectPath(null);
+          toast.error("Failed to create specification", {
+            description: event.error,
+          });
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [setCurrentView]);
+
+  // Handle creating initial spec for new project
+  const handleCreateInitialSpec = useCallback(async () => {
+    if (!setupProjectPath || !projectOverview.trim()) return;
+
+    setIsCreatingSpec(true);
+    setCreatingSpecProjectPath(setupProjectPath);
+    setShowSpecIndicator(true);
+    setShowSetupDialog(false);
+
+    try {
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        toast.error("Spec regeneration not available");
+        setIsCreatingSpec(false);
+        setCreatingSpecProjectPath(null);
+        return;
+      }
+      const result = await api.specRegeneration.create(
+        setupProjectPath,
+        projectOverview.trim(),
+        generateFeatures
+      );
+
+      if (!result.success) {
+        console.error("[Sidebar] Failed to start spec creation:", result.error);
+        setIsCreatingSpec(false);
+        setCreatingSpecProjectPath(null);
+        toast.error("Failed to create specification", {
+          description: result.error,
+        });
+      }
+      // If successful, we'll wait for the events to update the state
+    } catch (error) {
+      console.error("[Sidebar] Failed to create spec:", error);
+      setIsCreatingSpec(false);
+      setCreatingSpecProjectPath(null);
+      toast.error("Failed to create specification", {
+        description: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
+  }, [setupProjectPath, projectOverview]);
+
+  // Handle skipping setup
+  const handleSkipSetup = useCallback(() => {
+    setShowSetupDialog(false);
+    setProjectOverview("");
+    setSetupProjectPath("");
+    toast.info("Setup skipped", {
+      description: "You can set up your app_spec.txt later from the Spec view.",
+    });
+  }, []);
+
   /**
    * Opens the system folder selection dialog and initializes the selected project.
    * Used by both the 'O' keyboard shortcut and the folder icon button.
@@ -211,6 +322,9 @@ export function Sidebar() {
       const name = path.split("/").pop() || "Untitled Project";
 
       try {
+        // Check if this is a brand new project (no .automaker directory)
+        const hadAutomakerDir = await hasAutomakerDir(path);
+
         // Initialize the .automaker directory structure
         const initResult = await initializeProject(path);
 
@@ -231,7 +345,20 @@ export function Sidebar() {
         addProject(project);
         setCurrentProject(project);
 
-        if (initResult.createdFiles && initResult.createdFiles.length > 0) {
+        // Check if app_spec.txt exists
+        const specExists = await hasAppSpec(path);
+
+        if (!hadAutomakerDir && !specExists) {
+          // This is a brand new project - show setup dialog
+          setSetupProjectPath(path);
+          setShowSetupDialog(true);
+          toast.success("Project opened", {
+            description: `Opened ${name}. Let's set up your app specification!`,
+          });
+        } else if (
+          initResult.createdFiles &&
+          initResult.createdFiles.length > 0
+        ) {
           toast.success(
             initResult.isNewProject ? "Project initialized" : "Project updated",
             {
@@ -428,6 +555,20 @@ export function Sidebar() {
       });
     }
 
+    // Project cycling shortcuts - only when we have project history
+    if (projectHistory.length > 1) {
+      shortcuts.push({
+        key: ACTION_SHORTCUTS.cyclePrevProject,
+        action: () => cyclePrevProject(),
+        description: "Cycle to previous project (MRU)",
+      });
+      shortcuts.push({
+        key: ACTION_SHORTCUTS.cycleNextProject,
+        action: () => cycleNextProject(),
+        description: "Cycle to next project (LRU)",
+      });
+    }
+
     // Only enable nav shortcuts if there's a current project
     if (currentProject) {
       navSections.forEach((section) => {
@@ -457,6 +598,9 @@ export function Sidebar() {
     toggleSidebar,
     projects.length,
     handleOpenFolder,
+    projectHistory.length,
+    cyclePrevProject,
+    cycleNextProject,
   ]);
 
   // Register keyboard shortcuts
@@ -470,7 +614,7 @@ export function Sidebar() {
     <aside
       className={cn(
         "flex-shrink-0 border-r border-sidebar-border bg-sidebar backdrop-blur-md flex flex-col z-30 transition-all duration-300 relative",
-        sidebarOpen ? "w-16 lg:w-60" : "w-16"
+        sidebarOpen ? "w-16 lg:w-72" : "w-16"
       )}
       data-testid="sidebar"
     >
@@ -572,16 +716,16 @@ export function Sidebar() {
           </div>
         )}
 
-        {/* Project Selector */}
+        {/* Project Selector with Cycle Buttons */}
         {sidebarOpen && projects.length > 0 && (
-          <div className="px-2 mt-3">
+          <div className="px-2 mt-3 flex items-center gap-1.5">
             <DropdownMenu
               open={isProjectPickerOpen}
               onOpenChange={setIsProjectPickerOpen}
             >
               <DropdownMenuTrigger asChild>
                 <button
-                  className="w-full flex items-center justify-between px-3 py-2.5 rounded-lg bg-sidebar-accent/10 border border-sidebar-border hover:bg-sidebar-accent/20 transition-all text-foreground titlebar-no-drag"
+                  className="flex-1 flex items-center justify-between px-3 py-2.5 rounded-lg bg-sidebar-accent/10 border border-sidebar-border hover:bg-sidebar-accent/20 transition-all text-foreground titlebar-no-drag min-w-0"
                   data-testid="project-selector"
                 >
                   <div className="flex items-center gap-2 flex-1 min-w-0">
@@ -631,6 +775,34 @@ export function Sidebar() {
                 </DndContext>
               </DropdownMenuContent>
             </DropdownMenu>
+
+            {/* Project Cycle Buttons - only show when there's history */}
+            {projectHistory.length > 1 && (
+              <div className="hidden lg:flex items-center gap-1">
+                <button
+                  onClick={cyclePrevProject}
+                  className="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 border border-sidebar-border transition-all titlebar-no-drag group relative"
+                  title={`Previous project (${ACTION_SHORTCUTS.cyclePrevProject})`}
+                  data-testid="cycle-prev-project"
+                >
+                  <RotateCcw className="w-4 h-4" />
+                  <span className="absolute -bottom-5 px-1 py-0.5 text-[9px] font-mono rounded bg-sidebar-accent/20 border border-sidebar-border text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity z-10">
+                    {ACTION_SHORTCUTS.cyclePrevProject}
+                  </span>
+                </button>
+                <button
+                  onClick={cycleNextProject}
+                  className="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50 border border-sidebar-border transition-all titlebar-no-drag group relative"
+                  title={`Next project (${ACTION_SHORTCUTS.cycleNextProject})`}
+                  data-testid="cycle-next-project"
+                >
+                  <RotateCw className="w-4 h-4" />
+                  <span className="absolute -bottom-5 px-1 py-0.5 text-[9px] font-mono rounded bg-sidebar-accent/20 border border-sidebar-border text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity z-10">
+                    {ACTION_SHORTCUTS.cycleNextProject}
+                  </span>
+                </button>
+              </div>
+            )}
           </div>
         )}
 
@@ -871,6 +1043,103 @@ export function Sidebar() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* New Project Setup Dialog */}
+      <Dialog
+        open={showSetupDialog}
+        onOpenChange={(open) => {
+          if (!open && !isCreatingSpec) {
+            handleSkipSetup();
+          }
+        }}
+      >
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Set Up Your Project</DialogTitle>
+            <DialogDescription className="text-muted-foreground">
+              We didn&apos;t find an app_spec.txt file. Let us help you generate
+              your app_spec.txt to help describe your project for our system.
+              We&apos;ll analyze your project&apos;s tech stack and create a
+              comprehensive specification.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Project Overview</label>
+              <p className="text-xs text-muted-foreground">
+                Describe what your project does and what features you want to
+                build. Be as detailed as you want - this will help us create a
+                better specification.
+              </p>
+              <textarea
+                className="w-full h-48 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={projectOverview}
+                onChange={(e) => setProjectOverview(e.target.value)}
+                placeholder="e.g., A project management tool that allows teams to track tasks, manage sprints, and visualize progress through kanban boards. It should support user authentication, real-time updates, and file attachments..."
+                autoFocus
+              />
+            </div>
+
+            <div className="flex items-start space-x-3 pt-2">
+              <Checkbox
+                id="sidebar-generate-features"
+                checked={generateFeatures}
+                onCheckedChange={(checked) =>
+                  setGenerateFeatures(checked === true)
+                }
+              />
+              <div className="space-y-1">
+                <label
+                  htmlFor="sidebar-generate-features"
+                  className="text-sm font-medium cursor-pointer"
+                >
+                  Generate feature list
+                </label>
+                <p className="text-xs text-muted-foreground">
+                  Automatically populate feature_list.json with all features
+                  from the implementation roadmap after the spec is generated.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="ghost" onClick={handleSkipSetup}>
+              Skip for now
+            </Button>
+            <Button
+              onClick={handleCreateInitialSpec}
+              disabled={!projectOverview.trim()}
+            >
+              <Sparkles className="w-4 h-4 mr-2" />
+              Generate Spec
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Spec Creation Indicator - Bottom Right Toast */}
+      {isCreatingSpec &&
+        showSpecIndicator &&
+        currentProject?.path === creatingSpecProjectPath && (
+          <div className="fixed bottom-4 right-4 z-50 flex items-center gap-3 bg-card border border-border rounded-lg shadow-lg p-4 max-w-sm">
+            <Loader2 className="w-5 h-5 animate-spin text-primary flex-shrink-0" />
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium">Creating App Specification</p>
+              <p className="text-xs text-muted-foreground truncate">
+                Working on your project...
+              </p>
+            </div>
+            <button
+              onClick={() => setShowSpecIndicator(false)}
+              className="p-1 hover:bg-muted rounded-md transition-colors flex-shrink-0"
+              aria-label="Dismiss notification"
+            >
+              <X className="w-4 h-4 text-muted-foreground" />
+            </button>
+          </div>
+        )}
     </aside>
   );
 }

app/src/components/views/board-view.tsx

@@ -56,6 +56,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { KanbanColumn } from "./kanban-column";
 import { KanbanCard } from "./kanban-card";
 import { AgentOutputModal } from "./agent-output-modal";
+import { FeatureSuggestionsDialog } from "./feature-suggestions-dialog";
 import {
   Plus,
   RefreshCw,
@@ -77,6 +78,7 @@ import {
   Rocket,
   Sparkles,
   UserCircle,
+  Lightbulb,
 } from "lucide-react";
 import { toast } from "sonner";
 import { Slider } from "@/components/ui/slider";
@@ -180,7 +182,6 @@ export function BoardView() {
     updateFeature,
     removeFeature,
     moveFeature,
-    runningAutoTasks,
     maxConcurrency,
     setMaxConcurrency,
     defaultSkipTests,
@@ -227,6 +228,8 @@ export function BoardView() {
   // Local state to temporarily show advanced options when profiles-only mode is enabled
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
   const [showEditAdvancedOptions, setShowEditAdvancedOptions] = useState(false);
+  const [showSuggestionsDialog, setShowSuggestionsDialog] = useState(false);
+  const [suggestionsCount, setSuggestionsCount] = useState(0);
 
   // Make current project available globally for modal
   useEffect(() => {
@@ -238,12 +241,30 @@ export function BoardView() {
     };
   }, [currentProject]);
 
+  // Listen for suggestions events to update count
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.suggestions) return;
+
+    const unsubscribe = api.suggestions.onEvent((event) => {
+      if (event.type === "suggestions_complete" && event.suggestions) {
+        setSuggestionsCount(event.suggestions.length);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
   // Track previous project to detect switches
   const prevProjectPathRef = useRef<string | null>(null);
   const isSwitchingProjectRef = useRef<boolean>(false);
 
   // Auto mode hook
   const autoMode = useAutoMode();
+  // Get runningTasks from the hook (scoped to current project)
+  const runningAutoTasks = autoMode.runningTasks;
 
   // Window state hook for compact dialog mode
   const { isMaximized } = useWindowState();
@@ -449,11 +470,15 @@ export function BoardView() {
   // Listen for auto mode feature completion and errors to reload features
   useEffect(() => {
     const api = getElectronAPI();
-    if (!api?.autoMode) return;
+    if (!api?.autoMode || !currentProject) return;
 
     const { removeRunningTask } = useAppStore.getState();
+    const projectId = currentProject.id;
 
     const unsubscribe = api.autoMode.onEvent((event) => {
+      // Use event's projectId if available, otherwise use current project
+      const eventProjectId = event.projectId || projectId;
+
       if (event.type === "auto_mode_feature_complete") {
         // Reload features when a feature is completed
         console.log("[Board] Feature completed, reloading features...");
@@ -467,7 +492,7 @@ export function BoardView() {
 
         // Remove from running tasks so it moves to the correct column
         if (event.featureId) {
-          removeRunningTask(event.featureId);
+          removeRunningTask(eventProjectId, event.featureId);
         }
 
         loadFeatures();
@@ -479,7 +504,7 @@ export function BoardView() {
     });
 
     return unsubscribe;
-  }, [loadFeatures]);
+  }, [loadFeatures, currentProject]);
 
   useEffect(() => {
     loadFeatures();
@@ -492,6 +517,8 @@ export function BoardView() {
 
   // Sync running tasks from electron backend on mount
   useEffect(() => {
+    if (!currentProject) return;
+
     const syncRunningTasks = async () => {
       try {
         const api = getElectronAPI();
@@ -504,13 +531,14 @@ export function BoardView() {
             status.runningFeatures
           );
 
-          // Clear existing running tasks and add the actual running ones
+          // Clear existing running tasks for this project and add the actual running ones
           const { clearRunningTasks, addRunningTask } = useAppStore.getState();
-          clearRunningTasks();
+          const projectId = currentProject.id;
+          clearRunningTasks(projectId);
 
           // Add each running feature to the store
           status.runningFeatures.forEach((featureId: string) => {
-            addRunningTask(featureId);
+            addRunningTask(projectId, featureId);
           });
         }
       } catch (error) {
@@ -519,7 +547,7 @@ export function BoardView() {
     };
 
     syncRunningTasks();
-  }, []);
+  }, [currentProject]);
 
   // Check which features have context files
   useEffect(() => {
@@ -1542,21 +1570,42 @@ export function BoardView() {
                           <Trash2 className="w-3 h-3 mr-1" />
                           Delete All
                         </Button>
-                      ) : column.id === "backlog" &&
-                        columnFeatures.length > 0 ? (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 px-2 text-xs text-primary hover:text-primary hover:bg-primary/10"
-                          onClick={handleStartNextFeatures}
-                          data-testid="start-next-button"
-                        >
-                          <FastForward className="w-3 h-3 mr-1" />
-                          Start Next
-                          <span className="ml-1 px-1 py-0.5 text-[9px] font-mono rounded bg-accent border border-border-glass">
-                            {ACTION_SHORTCUTS.startNext}
-                          </span>
-                        </Button>
+                      ) : column.id === "backlog" ? (
+                        <div className="flex items-center gap-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 w-6 p-0 text-yellow-500 hover:text-yellow-400 hover:bg-yellow-500/10 relative"
+                            onClick={() => setShowSuggestionsDialog(true)}
+                            title="Feature Suggestions"
+                            data-testid="feature-suggestions-button"
+                          >
+                            <Lightbulb className="w-3.5 h-3.5" />
+                            {suggestionsCount > 0 && (
+                              <span
+                                className="absolute -top-1 -right-1 w-4 h-4 text-[9px] font-mono rounded-full bg-yellow-500 text-black flex items-center justify-center"
+                                data-testid="suggestions-count"
+                              >
+                                {suggestionsCount}
+                              </span>
+                            )}
+                          </Button>
+                          {columnFeatures.length > 0 && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-6 px-2 text-xs text-primary hover:text-primary hover:bg-primary/10"
+                              onClick={handleStartNextFeatures}
+                              data-testid="start-next-button"
+                            >
+                              <FastForward className="w-3 h-3 mr-1" />
+                              Start Next
+                              <span className="ml-1 px-1 py-0.5 text-[9px] font-mono rounded bg-accent border border-border-glass">
+                                {ACTION_SHORTCUTS.startNext}
+                              </span>
+                            </Button>
+                          )}
+                        </div>
                       ) : undefined
                     }
                   >
@@ -2512,6 +2561,16 @@ export function BoardView() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Feature Suggestions Dialog */}
+      <FeatureSuggestionsDialog
+        open={showSuggestionsDialog}
+        onClose={() => {
+          setShowSuggestionsDialog(false);
+          // Clear the count when dialog is closed (suggestions were either imported or dismissed)
+        }}
+        projectPath={currentProject.path}
+      />
     </div>
   );
 }

app/src/components/views/context-view.tsx

@@ -371,7 +371,7 @@ export function ContextView() {
             <Plus className="w-4 h-4 mr-2" />
             Add File
             <span
-              className="ml-2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-white/10 border border-white/20"
+              className="ml-2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-secondary border border-border"
               data-testid="shortcut-add-context-file"
             >
               {ACTION_SHORTCUTS.addContextFile}
@@ -387,9 +387,9 @@ export function ContextView() {
         onDragOver={handleDragOver}
       >
         {/* Left Panel - File List */}
-        <div className="w-64 border-r border-white/10 flex flex-col overflow-hidden">
-          <div className="p-3 border-b border-white/10">
-            <h2 className="text-sm font-semibold text-zinc-400">
+        <div className="w-64 border-r border-border flex flex-col overflow-hidden">
+          <div className="p-3 border-b border-border">
+            <h2 className="text-sm font-semibold text-muted-foreground">
               Context Files ({contextFiles.length})
             </h2>
           </div>
@@ -399,8 +399,8 @@ export function ContextView() {
           >
             {contextFiles.length === 0 ? (
               <div className="flex flex-col items-center justify-center h-full text-center p-4">
-                <Upload className="w-8 h-8 text-zinc-500 mb-2" />
-                <p className="text-sm text-zinc-500">
+                <Upload className="w-8 h-8 text-muted-foreground mb-2" />
+                <p className="text-sm text-muted-foreground">
                   No context files yet.
                   <br />
                   Drop files here or click Add File.
@@ -415,8 +415,8 @@ export function ContextView() {
                     className={cn(
                       "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors",
                       selectedFile?.path === file.path
-                        ? "bg-brand-500/20 text-white border border-brand-500/30"
-                        : "text-zinc-400 hover:bg-white/5 hover:text-white"
+                        ? "bg-primary/20 text-foreground border border-primary/30"
+                        : "text-muted-foreground hover:bg-accent hover:text-foreground"
                     )}
                     data-testid={`context-file-${file.name}`}
                   >
@@ -438,12 +438,12 @@ export function ContextView() {
           {selectedFile ? (
             <>
               {/* File toolbar */}
-              <div className="flex items-center justify-between p-3 border-b border-white/10 bg-zinc-900/50">
+              <div className="flex items-center justify-between p-3 border-b border-border bg-card">
                 <div className="flex items-center gap-2">
                   {selectedFile.type === "image" ? (
-                    <ImageIcon className="w-4 h-4 text-zinc-400" />
+                    <ImageIcon className="w-4 h-4 text-muted-foreground" />
                   ) : (
-                    <FileText className="w-4 h-4 text-zinc-400" />
+                    <FileText className="w-4 h-4 text-muted-foreground" />
                   )}
                   <span className="text-sm font-medium">
                     {selectedFile.name}
@@ -477,7 +477,7 @@ export function ContextView() {
               <div className="flex-1 overflow-hidden p-4">
                 {selectedFile.type === "image" ? (
                   <div
-                    className="h-full flex items-center justify-center bg-zinc-900/50 rounded-lg"
+                    className="h-full flex items-center justify-center bg-card rounded-lg"
                     data-testid="image-preview"
                   >
                     <img
@@ -503,9 +503,9 @@ export function ContextView() {
           ) : (
             <div className="flex-1 flex items-center justify-center">
               <div className="text-center">
-                <File className="w-12 h-12 text-zinc-600 mx-auto mb-3" />
-                <p className="text-zinc-500">Select a file to view or edit</p>
-                <p className="text-zinc-600 text-sm mt-1">
+                <File className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
+                <p className="text-foreground-secondary">Select a file to view or edit</p>
+                <p className="text-muted-foreground text-sm mt-1">
                   Or drop files here to add them
                 </p>
               </div>
@@ -516,7 +516,10 @@ export function ContextView() {
 
       {/* Add File Dialog */}
       <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
-        <DialogContent data-testid="add-context-dialog">
+        <DialogContent
+          data-testid="add-context-dialog"
+          className="w-[60vw] max-w-[60vw] max-h-[80vh] flex flex-col"
+        >
           <DialogHeader>
             <DialogTitle>Add Context File</DialogTitle>
             <DialogDescription>
@@ -564,7 +567,7 @@ export function ContextView() {
                 <div
                   className={cn(
                     "relative rounded-lg transition-colors",
-                    isDropHovering && "ring-2 ring-brand-500"
+                    isDropHovering && "ring-2 ring-primary"
                   )}
                 >
                   <textarea
@@ -576,15 +579,15 @@ export function ContextView() {
                     onDragLeave={handleTextAreaDragLeave}
                     placeholder="Enter context content here or drag & drop a .txt or .md file..."
                     className={cn(
-                      "w-full h-40 p-3 font-mono text-sm bg-zinc-900 border border-zinc-700 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent",
-                      isDropHovering && "border-brand-500 bg-brand-500/10"
+                      "w-full h-40 p-3 font-mono text-sm bg-background border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent",
+                      isDropHovering && "border-primary bg-primary/10"
                     )}
                     spellCheck={false}
                     data-testid="new-file-content"
                   />
                   {isDropHovering && (
-                    <div className="absolute inset-0 flex items-center justify-center bg-brand-500/20 rounded-lg pointer-events-none">
-                      <div className="flex flex-col items-center text-brand-400">
+                    <div className="absolute inset-0 flex items-center justify-center bg-primary/20 rounded-lg pointer-events-none">
+                      <div className="flex flex-col items-center text-primary">
                         <Upload className="w-8 h-8 mb-2" />
                         <span className="text-sm font-medium">
                           Drop .txt or .md file here
@@ -593,7 +596,7 @@ export function ContextView() {
                     </div>
                   )}
                 </div>
-                <p className="text-xs text-zinc-500">
+                <p className="text-xs text-muted-foreground">
                   Drag & drop .txt or .md files to import their content
                 </p>
               </div>
@@ -602,7 +605,7 @@ export function ContextView() {
             {newFileType === "image" && (
               <div className="space-y-2">
                 <Label>Upload Image</Label>
-                <div className="border-2 border-dashed border-zinc-700 rounded-lg p-4 text-center">
+                <div className="border-2 border-dashed border-border rounded-lg p-4 text-center">
                   <input
                     type="file"
                     accept="image/*"
@@ -622,9 +625,9 @@ export function ContextView() {
                         className="max-w-32 max-h-32 object-contain mb-2"
                       />
                     ) : (
-                      <Upload className="w-8 h-8 text-zinc-500 mb-2" />
+                      <Upload className="w-8 h-8 text-muted-foreground mb-2" />
                     )}
-                    <span className="text-sm text-zinc-400">
+                    <span className="text-sm text-muted-foreground">
                       {uploadedImageData
                         ? "Click to change"
                         : "Click to upload"}

app/src/components/views/feature-suggestions-dialog.tsx

@@ -0,0 +1,433 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  Loader2,
+  Lightbulb,
+  Download,
+  StopCircle,
+  ChevronDown,
+  ChevronRight,
+} from "lucide-react";
+import { getElectronAPI, FeatureSuggestion, SuggestionsEvent } from "@/lib/electron";
+import { useAppStore, Feature } from "@/store/app-store";
+import { toast } from "sonner";
+
+interface FeatureSuggestionsDialogProps {
+  open: boolean;
+  onClose: () => void;
+  projectPath: string;
+}
+
+export function FeatureSuggestionsDialog({
+  open,
+  onClose,
+  projectPath,
+}: FeatureSuggestionsDialogProps) {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [progress, setProgress] = useState<string[]>([]);
+  const [suggestions, setSuggestions] = useState<FeatureSuggestion[]>([]);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [isImporting, setIsImporting] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const autoScrollRef = useRef(true);
+
+  const { features, setFeatures } = useAppStore();
+
+  // Auto-scroll progress when new content arrives
+  useEffect(() => {
+    if (autoScrollRef.current && scrollRef.current && isGenerating) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [progress, isGenerating]);
+
+  // Listen for suggestion events
+  useEffect(() => {
+    if (!open) return;
+
+    const api = getElectronAPI();
+    if (!api?.suggestions) return;
+
+    const unsubscribe = api.suggestions.onEvent((event: SuggestionsEvent) => {
+      if (event.type === "suggestions_progress") {
+        setProgress((prev) => [...prev, event.content || ""]);
+      } else if (event.type === "suggestions_tool") {
+        const toolName = event.tool || "Unknown Tool";
+        setProgress((prev) => [...prev, `Using tool: ${toolName}\n`]);
+      } else if (event.type === "suggestions_complete") {
+        setIsGenerating(false);
+        if (event.suggestions && event.suggestions.length > 0) {
+          setSuggestions(event.suggestions);
+          // Select all by default
+          setSelectedIds(new Set(event.suggestions.map((s) => s.id)));
+          toast.success(`Generated ${event.suggestions.length} feature suggestions!`);
+        } else {
+          toast.info("No suggestions generated. Try again.");
+        }
+      } else if (event.type === "suggestions_error") {
+        setIsGenerating(false);
+        toast.error(`Error: ${event.error}`);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [open]);
+
+  // Start generating suggestions
+  const handleGenerate = useCallback(async () => {
+    const api = getElectronAPI();
+    if (!api?.suggestions) {
+      toast.error("Suggestions API not available");
+      return;
+    }
+
+    setIsGenerating(true);
+    setProgress([]);
+    setSuggestions([]);
+    setSelectedIds(new Set());
+
+    try {
+      const result = await api.suggestions.generate(projectPath);
+      if (!result.success) {
+        toast.error(result.error || "Failed to start generation");
+        setIsGenerating(false);
+      }
+    } catch (error) {
+      console.error("Failed to generate suggestions:", error);
+      toast.error("Failed to start generation");
+      setIsGenerating(false);
+    }
+  }, [projectPath]);
+
+  // Stop generating
+  const handleStop = useCallback(async () => {
+    const api = getElectronAPI();
+    if (!api?.suggestions) return;
+
+    try {
+      await api.suggestions.stop();
+      setIsGenerating(false);
+      toast.info("Generation stopped");
+    } catch (error) {
+      console.error("Failed to stop generation:", error);
+    }
+  }, []);
+
+  // Toggle suggestion selection
+  const toggleSelection = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  // Toggle expand/collapse for a suggestion
+  const toggleExpanded = useCallback((id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  // Select/deselect all
+  const toggleSelectAll = useCallback(() => {
+    if (selectedIds.size === suggestions.length) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(suggestions.map((s) => s.id)));
+    }
+  }, [selectedIds.size, suggestions]);
+
+  // Import selected suggestions as features
+  const handleImport = useCallback(async () => {
+    if (selectedIds.size === 0) {
+      toast.warning("No suggestions selected");
+      return;
+    }
+
+    setIsImporting(true);
+
+    try {
+      const api = getElectronAPI();
+      const selectedSuggestions = suggestions.filter((s) =>
+        selectedIds.has(s.id)
+      );
+
+      // Create new features from selected suggestions
+      const newFeatures: Feature[] = selectedSuggestions.map((s) => ({
+        id: `feature-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        category: s.category,
+        description: s.description,
+        steps: s.steps,
+        status: "backlog" as const,
+        skipTests: true, // As specified, testing mode true
+      }));
+
+      // Merge with existing features
+      const updatedFeatures = [...features, ...newFeatures];
+
+      // Save to file
+      const featureListPath = `${projectPath}/.automaker/feature_list.json`;
+      await api.writeFile(featureListPath, JSON.stringify(updatedFeatures, null, 2));
+
+      // Update store
+      setFeatures(updatedFeatures);
+
+      toast.success(`Imported ${newFeatures.length} features to backlog!`);
+      onClose();
+    } catch (error) {
+      console.error("Failed to import features:", error);
+      toast.error("Failed to import features");
+    } finally {
+      setIsImporting(false);
+    }
+  }, [selectedIds, suggestions, features, setFeatures, projectPath, onClose]);
+
+  // Handle scroll to detect if user scrolled up
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+    autoScrollRef.current = isAtBottom;
+  };
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      // Don't reset immediately - allow re-open to see results
+      // Only reset if explicitly closed without importing
+    }
+  }, [open]);
+
+  const hasStarted = progress.length > 0 || suggestions.length > 0;
+  const hasSuggestions = suggestions.length > 0;
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent
+        className="w-[70vw] max-w-[70vw] max-h-[85vh] flex flex-col"
+        data-testid="feature-suggestions-dialog"
+      >
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle className="flex items-center gap-2">
+            <Lightbulb className="w-5 h-5 text-yellow-500" />
+            Feature Suggestions
+          </DialogTitle>
+          <DialogDescription>
+            Analyze your project to discover missing features and improvements.
+            The AI will scan your codebase and suggest features ordered by priority.
+          </DialogDescription>
+        </DialogHeader>
+
+        {!hasStarted ? (
+          // Initial state - show explanation and generate button
+          <div className="flex-1 flex flex-col items-center justify-center py-8 text-center">
+            <Lightbulb className="w-16 h-16 text-yellow-500/50 mb-4" />
+            <h3 className="text-lg font-semibold mb-2">
+              Discover Missing Features
+            </h3>
+            <p className="text-muted-foreground max-w-md mb-6">
+              Our AI will analyze your project structure, code patterns, and
+              existing features to generate a prioritized list of suggestions
+              for new features you could add.
+            </p>
+            <Button onClick={handleGenerate} size="lg">
+              <Lightbulb className="w-4 h-4 mr-2" />
+              Generate Suggestions
+            </Button>
+          </div>
+        ) : isGenerating ? (
+          // Generating state - show progress
+          <div className="flex-1 flex flex-col min-h-0">
+            <div className="flex items-center justify-between mb-2">
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Analyzing project...
+              </div>
+              <Button variant="destructive" size="sm" onClick={handleStop}>
+                <StopCircle className="w-4 h-4 mr-2" />
+                Stop
+              </Button>
+            </div>
+            <div
+              ref={scrollRef}
+              onScroll={handleScroll}
+              className="flex-1 overflow-y-auto bg-zinc-950 rounded-lg p-4 font-mono text-xs min-h-[200px] max-h-[400px]"
+            >
+              <div className="whitespace-pre-wrap break-words text-zinc-300">
+                {progress.join("")}
+              </div>
+            </div>
+          </div>
+        ) : hasSuggestions ? (
+          // Results state - show suggestions list
+          <div className="flex-1 flex flex-col min-h-0">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-4">
+                <span className="text-sm text-muted-foreground">
+                  {suggestions.length} suggestions generated
+                </span>
+                <Button variant="ghost" size="sm" onClick={toggleSelectAll}>
+                  {selectedIds.size === suggestions.length
+                    ? "Deselect All"
+                    : "Select All"}
+                </Button>
+              </div>
+              <span className="text-sm font-medium">
+                {selectedIds.size} selected
+              </span>
+            </div>
+
+            <div
+              ref={scrollRef}
+              className="flex-1 overflow-y-auto space-y-2 min-h-[200px] max-h-[400px] pr-2"
+            >
+              {suggestions.map((suggestion) => {
+                const isSelected = selectedIds.has(suggestion.id);
+                const isExpanded = expandedIds.has(suggestion.id);
+
+                return (
+                  <div
+                    key={suggestion.id}
+                    className={`border rounded-lg p-3 transition-colors ${
+                      isSelected
+                        ? "border-primary bg-primary/5"
+                        : "border-border hover:border-primary/50"
+                    }`}
+                    data-testid={`suggestion-${suggestion.id}`}
+                  >
+                    <div className="flex items-start gap-3">
+                      <Checkbox
+                        id={suggestion.id}
+                        checked={isSelected}
+                        onCheckedChange={() => toggleSelection(suggestion.id)}
+                        className="mt-1"
+                      />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <button
+                            onClick={() => toggleExpanded(suggestion.id)}
+                            className="flex items-center gap-1 text-muted-foreground hover:text-foreground"
+                          >
+                            {isExpanded ? (
+                              <ChevronDown className="w-4 h-4" />
+                            ) : (
+                              <ChevronRight className="w-4 h-4" />
+                            )}
+                          </button>
+                          <span className="text-xs px-2 py-0.5 rounded-full bg-primary/20 text-primary font-medium">
+                            #{suggestion.priority}
+                          </span>
+                          <span className="text-xs px-2 py-0.5 rounded-full bg-secondary text-secondary-foreground">
+                            {suggestion.category}
+                          </span>
+                        </div>
+                        <Label
+                          htmlFor={suggestion.id}
+                          className="text-sm font-medium cursor-pointer"
+                        >
+                          {suggestion.description}
+                        </Label>
+
+                        {isExpanded && (
+                          <div className="mt-3 space-y-2 text-sm">
+                            {suggestion.reasoning && (
+                              <p className="text-muted-foreground italic">
+                                {suggestion.reasoning}
+                              </p>
+                            )}
+                            {suggestion.steps.length > 0 && (
+                              <div>
+                                <p className="text-xs font-medium text-muted-foreground mb-1">
+                                  Implementation Steps:
+                                </p>
+                                <ul className="list-disc list-inside text-xs text-muted-foreground space-y-0.5">
+                                  {suggestion.steps.map((step, i) => (
+                                    <li key={i}>{step}</li>
+                                  ))}
+                                </ul>
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ) : (
+          // No results state
+          <div className="flex-1 flex flex-col items-center justify-center py-8 text-center">
+            <p className="text-muted-foreground mb-4">
+              No suggestions were generated. Try running the analysis again.
+            </p>
+            <Button onClick={handleGenerate}>
+              <Lightbulb className="w-4 h-4 mr-2" />
+              Try Again
+            </Button>
+          </div>
+        )}
+
+        <DialogFooter className="flex-shrink-0">
+          {hasSuggestions && (
+            <div className="flex gap-2 w-full justify-between">
+              <Button variant="outline" onClick={handleGenerate}>
+                <Lightbulb className="w-4 h-4 mr-2" />
+                Regenerate
+              </Button>
+              <div className="flex gap-2">
+                <Button variant="ghost" onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleImport}
+                  disabled={selectedIds.size === 0 || isImporting}
+                >
+                  {isImporting ? (
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  ) : (
+                    <Download className="w-4 h-4 mr-2" />
+                  )}
+                  Import {selectedIds.size} Feature
+                  {selectedIds.size !== 1 ? "s" : ""}
+                </Button>
+              </div>
+            </div>
+          )}
+          {!hasSuggestions && !isGenerating && hasStarted && (
+            <Button variant="ghost" onClick={onClose}>
+              Close
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/src/components/views/spec-view.tsx

@@ -5,13 +5,35 @@ import { useAppStore } from "@/store/app-store";
 import { getElectronAPI } from "@/lib/electron";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
-import { Save, RefreshCw, FileText } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Save, RefreshCw, FileText, Sparkles, Loader2, FilePlus2 } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import type { SpecRegenerationEvent } from "@/types/electron";
 
 export function SpecView() {
   const { currentProject, appSpec, setAppSpec } = useAppStore();
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
   const [hasChanges, setHasChanges] = useState(false);
+  const [specExists, setSpecExists] = useState(true);
+
+  // Regeneration state
+  const [showRegenerateDialog, setShowRegenerateDialog] = useState(false);
+  const [projectDefinition, setProjectDefinition] = useState("");
+  const [isRegenerating, setIsRegenerating] = useState(false);
+
+  // Create spec state
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [projectOverview, setProjectOverview] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [generateFeatures, setGenerateFeatures] = useState(true);
 
   // Load spec from file
   const loadSpec = useCallback(async () => {
@@ -26,10 +48,16 @@ export function SpecView() {
 
       if (result.success && result.content) {
         setAppSpec(result.content);
+        setSpecExists(true);
         setHasChanges(false);
+      } else {
+        // File doesn't exist
+        setAppSpec("");
+        setSpecExists(false);
       }
     } catch (error) {
       console.error("Failed to load spec:", error);
+      setSpecExists(false);
     } finally {
       setIsLoading(false);
     }
@@ -39,6 +67,35 @@ export function SpecView() {
     loadSpec();
   }, [loadSpec]);
 
+  // Subscribe to spec regeneration events
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    const unsubscribe = api.specRegeneration.onEvent((event: SpecRegenerationEvent) => {
+      console.log("[SpecView] Regeneration event:", event.type);
+
+      if (event.type === "spec_regeneration_complete") {
+        setIsRegenerating(false);
+        setIsCreating(false);
+        setShowRegenerateDialog(false);
+        setShowCreateDialog(false);
+        setProjectDefinition("");
+        setProjectOverview("");
+        // Reload the spec to show the new content
+        loadSpec();
+      } else if (event.type === "spec_regeneration_error") {
+        setIsRegenerating(false);
+        setIsCreating(false);
+        console.error("[SpecView] Regeneration error:", event.error);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [loadSpec]);
+
   // Save spec to file
   const saveSpec = async () => {
     if (!currentProject) return;
@@ -63,6 +120,62 @@ export function SpecView() {
     setHasChanges(true);
   };
 
+  const handleRegenerate = async () => {
+    if (!currentProject || !projectDefinition.trim()) return;
+
+    setIsRegenerating(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        console.error("[SpecView] Spec regeneration not available");
+        setIsRegenerating(false);
+        return;
+      }
+      const result = await api.specRegeneration.generate(
+        currentProject.path,
+        projectDefinition.trim()
+      );
+
+      if (!result.success) {
+        console.error("[SpecView] Failed to start regeneration:", result.error);
+        setIsRegenerating(false);
+      }
+      // If successful, we'll wait for the events to update the state
+    } catch (error) {
+      console.error("[SpecView] Failed to regenerate spec:", error);
+      setIsRegenerating(false);
+    }
+  };
+
+  const handleCreateSpec = async () => {
+    if (!currentProject || !projectOverview.trim()) return;
+
+    setIsCreating(true);
+    setShowCreateDialog(false);
+    try {
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        console.error("[SpecView] Spec regeneration not available");
+        setIsCreating(false);
+        return;
+      }
+      const result = await api.specRegeneration.create(
+        currentProject.path,
+        projectOverview.trim(),
+        generateFeatures
+      );
+
+      if (!result.success) {
+        console.error("[SpecView] Failed to start spec creation:", result.error);
+        setIsCreating(false);
+      }
+      // If successful, we'll wait for the events to update the state
+    } catch (error) {
+      console.error("[SpecView] Failed to create spec:", error);
+      setIsCreating(false);
+    }
+  };
+
   if (!currentProject) {
     return (
       <div
@@ -85,6 +198,121 @@ export function SpecView() {
     );
   }
 
+  // Show empty state when no spec exists (isCreating is handled by bottom-right indicator in sidebar)
+  if (!specExists) {
+    return (
+      <div
+        className="flex-1 flex flex-col overflow-hidden content-bg"
+        data-testid="spec-view-empty"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+          <div className="flex items-center gap-3">
+            <FileText className="w-5 h-5 text-muted-foreground" />
+            <div>
+              <h1 className="text-xl font-bold">App Specification</h1>
+              <p className="text-sm text-muted-foreground">
+                {currentProject.path}/.automaker/app_spec.txt
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Empty State */}
+        <div className="flex-1 flex items-center justify-center p-8">
+          <div className="text-center max-w-md">
+            <div className="mb-6 flex justify-center">
+              <div className="p-4 rounded-full bg-primary/10">
+                <FilePlus2 className="w-12 h-12 text-primary" />
+              </div>
+            </div>
+            <h2 className="text-2xl font-semibold mb-3">No App Specification Found</h2>
+            <p className="text-muted-foreground mb-6">
+              Create an app specification to help our system understand your project.
+              We&apos;ll analyze your codebase and generate a comprehensive spec based on your description.
+            </p>
+            <Button
+              size="lg"
+              onClick={() => setShowCreateDialog(true)}
+            >
+              <FilePlus2 className="w-5 h-5 mr-2" />
+              Create app_spec
+            </Button>
+          </div>
+        </div>
+
+        {/* Create Dialog */}
+        <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+          <DialogContent className="max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>Create App Specification</DialogTitle>
+              <DialogDescription className="text-muted-foreground">
+                We didn&apos;t find an app_spec.txt file. Let us help you generate your app_spec.txt
+                to help describe your project for our system. We&apos;ll analyze your project&apos;s
+                tech stack and create a comprehensive specification.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4 py-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  Project Overview
+                </label>
+                <p className="text-xs text-muted-foreground">
+                  Describe what your project does and what features you want to build.
+                  Be as detailed as you want - this will help us create a better specification.
+                </p>
+                <textarea
+                  className="w-full h-48 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                  value={projectOverview}
+                  onChange={(e) => setProjectOverview(e.target.value)}
+                  placeholder="e.g., A project management tool that allows teams to track tasks, manage sprints, and visualize progress through kanban boards. It should support user authentication, real-time updates, and file attachments..."
+                  autoFocus
+                />
+              </div>
+
+              <div className="flex items-start space-x-3 pt-2">
+                <Checkbox
+                  id="generate-features"
+                  checked={generateFeatures}
+                  onCheckedChange={(checked) => setGenerateFeatures(checked === true)}
+                />
+                <div className="space-y-1">
+                  <label
+                    htmlFor="generate-features"
+                    className="text-sm font-medium cursor-pointer"
+                  >
+                    Generate feature list
+                  </label>
+                  <p className="text-xs text-muted-foreground">
+                    Automatically populate feature_list.json with all features from the
+                    implementation roadmap after the spec is generated.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button
+                variant="ghost"
+                onClick={() => setShowCreateDialog(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleCreateSpec}
+                disabled={!projectOverview.trim()}
+              >
+                <Sparkles className="w-4 h-4 mr-2" />
+                Generate Spec
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  }
+
   return (
     <div
       className="flex-1 flex flex-col overflow-hidden content-bg"
@@ -102,6 +330,20 @@ export function SpecView() {
           </div>
         </div>
         <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setShowRegenerateDialog(true)}
+            disabled={isRegenerating}
+            data-testid="regenerate-spec"
+          >
+            {isRegenerating ? (
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            ) : (
+              <Sparkles className="w-4 h-4 mr-2" />
+            )}
+            {isRegenerating ? "Regenerating..." : "Regenerate"}
+          </Button>
           <Button
             size="sm"
             onClick={saveSpec}
@@ -127,6 +369,65 @@ export function SpecView() {
           />
         </Card>
       </div>
+
+      {/* Regenerate Dialog */}
+      <Dialog open={showRegenerateDialog} onOpenChange={setShowRegenerateDialog}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Regenerate App Specification</DialogTitle>
+            <DialogDescription className="text-muted-foreground">
+              We will regenerate your app spec based on a short project definition and the
+              current tech stack found in your project. The agent will analyze your codebase
+              to understand your existing technologies and create a comprehensive specification.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">
+                Describe your project
+              </label>
+              <p className="text-xs text-muted-foreground">
+                Provide a clear description of what your app should do. Be as detailed as you
+                want - the more context you provide, the more comprehensive the spec will be.
+              </p>
+              <textarea
+                className="w-full h-40 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={projectDefinition}
+                onChange={(e) => setProjectDefinition(e.target.value)}
+                placeholder="e.g., A task management app where users can create projects, add tasks with due dates, assign tasks to team members, track progress with a kanban board, and receive notifications for upcoming deadlines..."
+                disabled={isRegenerating}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setShowRegenerateDialog(false)}
+              disabled={isRegenerating}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleRegenerate}
+              disabled={!projectDefinition.trim() || isRegenerating}
+            >
+              {isRegenerating ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Regenerating...
+                </>
+              ) : (
+                <>
+                  <Sparkles className="w-4 h-4 mr-2" />
+                  Regenerate Spec
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }