feat(feature-suggestions): implement feature suggestions and spec regeneration functionality

- Introduced a new `FeatureSuggestionsService` to analyze projects and generate feature suggestions based on the project structure and existing features.
- Added IPC handlers for generating and stopping feature suggestions, as well as checking their status.
- Implemented a `SpecRegenerationService` to create and regenerate application specifications based on user-defined project overviews and definitions.
- Enhanced the UI with a `FeatureSuggestionsDialog` for displaying generated suggestions and allowing users to import them into their project.
- Updated the sidebar and board view components to integrate feature suggestions and spec regeneration functionalities, improving project management capabilities.

These changes significantly enhance the application's ability to assist users in feature planning and specification management.

app/src/components/layout/sidebar.tsx

@@ -16,9 +16,12 @@ import {
   PanelLeft,
   PanelLeftClose,
   ChevronDown,
+  Redo2,
   Check,
   BookOpen,
   GripVertical,
+  RotateCw,
+  RotateCcw,
   Trash2,
   Undo2,
 } from "lucide-react";
@@ -44,8 +47,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,
@@ -155,6 +165,7 @@ export function Sidebar() {
     currentProject,
     currentView,
     sidebarOpen,
+    projectHistory,
     addProject,
     setCurrentProject,
     setCurrentView,
@@ -163,6 +174,8 @@ export function Sidebar() {
     deleteTrashedProject,
     emptyTrash,
     reorderProjects,
+    cyclePrevProject,
+    cycleNextProject,
   } = useAppStore();
 
   // State for project picker dropdown
@@ -171,6 +184,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, {
@@ -197,6 +221,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.
@@ -210,6 +321,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);
 
@@ -230,7 +344,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",
             {
@@ -422,6 +549,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) => {
@@ -451,6 +592,9 @@ export function Sidebar() {
     toggleSidebar,
     projects.length,
     handleOpenFolder,
+    projectHistory.length,
+    cyclePrevProject,
+    cycleNextProject,
   ]);
 
   // Register keyboard shortcuts
@@ -464,7 +608,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"
     >
@@ -566,16 +710,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">
@@ -625,6 +769,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>
         )}
 
@@ -865,6 +1037,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

@@ -50,6 +50,7 @@ import {
 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,
@@ -63,6 +64,7 @@ import {
   CheckCircle2,
   MessageSquare,
   GitCommit,
+  Lightbulb,
 } from "lucide-react";
 import { toast } from "sonner";
 import { Slider } from "@/components/ui/slider";
@@ -92,7 +94,6 @@ export function BoardView() {
     updateFeature,
     removeFeature,
     moveFeature,
-    runningAutoTasks,
     maxConcurrency,
     setMaxConcurrency,
     defaultSkipTests,
@@ -124,6 +125,8 @@ export function BoardView() {
   const [followUpImagePaths, setFollowUpImagePaths] = useState<
     DescriptionImagePath[]
   >([]);
+  const [showSuggestionsDialog, setShowSuggestionsDialog] = useState(false);
+  const [suggestionsCount, setSuggestionsCount] = useState(0);
 
   // Make current project available globally for modal
   useEffect(() => {
@@ -135,12 +138,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;
 
   // Get in-progress features for keyboard shortcuts (memoized for shortcuts)
   const inProgressFeaturesForShortcuts = useMemo(() => {
@@ -340,11 +361,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...");
@@ -358,7 +383,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();
@@ -370,7 +395,7 @@ export function BoardView() {
     });
 
     return unsubscribe;
-  }, [loadFeatures]);
+  }, [loadFeatures, currentProject]);
 
   useEffect(() => {
     loadFeatures();
@@ -383,6 +408,8 @@ export function BoardView() {
 
   // Sync running tasks from electron backend on mount
   useEffect(() => {
+    if (!currentProject) return;
+
     const syncRunningTasks = async () => {
       try {
         const api = getElectronAPI();
@@ -395,13 +422,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) {
@@ -410,7 +438,7 @@ export function BoardView() {
     };
 
     syncRunningTasks();
-  }, []);
+  }, [currentProject]);
 
   // Check which features have context files
   useEffect(() => {
@@ -1272,21 +1300,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-white/10 border border-white/20">
-                            {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-white/10 border border-white/20">
+                                {ACTION_SHORTCUTS.startNext}
+                              </span>
+                            </Button>
+                          )}
+                        </div>
                       ) : undefined
                     }
                   >
@@ -1754,6 +1803,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>
   );
 }