Merge branch 'main' into refactor-features-into-directories

.automaker/app_spec.txt

@@ -1,46 +1,59 @@
 <project_specification>
   <project_name>Automaker - Autonomous AI Development Studio</project_name>
-  
+
   <overview>
-    Automaker is a native desktop application that empowers developers to build software autonomously. It acts as an intelligent orchestrator, managing the entire development lifecycle from specification to implementation. Built with Electron and Next.js, it provides a seamless GUI for configuring projects, defining requirements (.automaker/app_spec.txt), and tracking progress via an interactive Kanban board. It leverages a dual-model architecture: Claude 3.5 Opus for complex logic/architecture and Gemini 3 Pro for UI/UX design.
+    Automaker is a sophisticated desktop application that empowers developers to build software autonomously through AI-powered agents. Built with Electron and Next.js, it provides an intelligent GUI for project management, feature tracking via Kanban boards, and autonomous code generation. The application leverages multiple AI models (Claude, GPT) and supports complex workflows including git worktree isolation, testing automation, and multi-model agent execution. It acts as a complete development orchestrator, managing the entire lifecycle from specification to verified implementation.
   </overview>
 
   <technology_stack>
     <frontend>
-      <framework>Next.js (App Router)</framework>
+      <framework>Next.js 16.0.7 (App Router)</framework>
-      <ui_library>shadcn/ui</ui_library>
+      <ui_library>shadcn/ui with Radix UI primitives</ui_library>
-      <styling>Tailwind CSS</styling>
+      <styling>Tailwind CSS 4.0</styling>
-      <state_management>Zustand / TanStack Query</state_management>
+      <state_management>Zustand with persistence</state_management>
-      <drag_drop>dnd-kit (for Kanban)</drag_drop>
+      <drag_drop>@dnd-kit for Kanban board</drag_drop>
       <icons>Lucide React</icons>
+      <query_client>TanStack Query for server state</query_client>
     </frontend>
     <desktop_shell>
-      <framework>Electron</framework>
+      <framework>Electron 39.2.6</framework>
-      <language>TypeScript</language>
+      <language>TypeScript 5.x</language>
-      <inter_process_communication>Electron IPC (tRPC or raw IPC)</inter_process_communication>
+      <inter_process_communication>Electron IPC with security sandboxing</inter_process_communication>
-      <file_system>Node.js fs/promises</file_system>
+      <file_system>Node.js fs/promises with path validation</file_system>
     </desktop_shell>
     <ai_engine>
-      <logic_model>Claude 3.5 Opus (via Anthropic SDK)</logic_model>
+      <primary_model>Claude 3.5 (Opus, Sonnet, Haiku) via Anthropic Claude Agent SDK</primary_model>
-      <design_model>Gemini 3 Pro (via Google Generative AI SDK)</design_model>
+      <secondary_model>GPT-5.1 Codex family via OpenAI CLI</secondary_model>
-      <orchestration>LangChain or Custom Agent Loop</orchestration>
+      <orchestration>Custom Agent Service with streaming responses</orchestration>
+      <model_registry>Dynamic model provider system with CLI detection</model_registry>
     </ai_engine>
     <testing>
-      <framework>Playwright (for E2E testing of Automaker itself)</framework>
+      <framework>Playwright for E2E testing</framework>
-      <unit>Vitest</unit>
+      <unit>Jest/Vitest compatible</unit>
+      <integration>Agent-driven test execution and verification</integration>
     </testing>
+    <version_control>
+      <system>Git with worktree isolation support</system>
+      <branching>Feature branch management</branching>
+      <workflow>Automated commit and merge capabilities</workflow>
+    </version_control>
   </technology_stack>
 
   <core_capabilities>
     <project_management>
-      - Open existing local projects
+      - Open and manage multiple local projects
-      - Create new projects from scratch (Wizard/Interview Mode)
+      - Project-specific themes and configurations
-      - Project configuration (name, path, ignore patterns)
+      - Session management with project context
-      - Visual file explorer
+      - Recently used project cycling (Q/E shortcuts)
+      - Project search and type-ahead selection
+      - Trash and restore functionality for projects
     </project_management>
-    
+
     <intelligent_analysis>
-      - "Project Ingestion": Analyzes existing codebases to understand structure
+      - Auto-generation and updating of app_spec.txt
+      - Feature extraction from existing codebases
+      - Technology stack detection and documentation
+      - Project structure analysis with file tree visualization - "Project Ingestion": Analyzes existing codebases to understand structure
       - Auto-generation of `.automaker/app_spec.txt` based on codebase analysis
       - Auto-generation of features in `.automaker/features/{id}/feature.json`:
         - Scans code for implemented features
@@ -50,38 +63,54 @@
 
     <kanban_workflow>
       - Visual representation of features from `.automaker/features/` folder
-      - Columns: Backlog, Planned, In Progress, Review, Verified (Passed), Failed
       - Drag-and-drop interface to reprioritize tasks
       - direct editing of feature details (steps, description) from the card
-      - "Play" button on cards to trigger the agent for that specific feature
+      - Visual Kanban board with drag-and-drop functionality
+      - Multiple status columns: Backlog, In Progress, Waiting Approval, Verified
+      - Feature cards with detailed information display (3 detail levels)
+      - Real-time status updates during agent execution
+      - Search and filtering capabilities
+      - Category management and autocomplete
+      - Image attachment support for feature descriptions
     </kanban_workflow>
 
     <autonomous_agent_engine>
-      - **The Architect (Claude 3.5 Opus)**:
+      - Multi-model agent system with profile-based execution
-        - Reads spec and feature list
+      - Streaming agent output with real-time logs
-        - Plans implementation steps
+      - Git worktree isolation for safe feature development
-        - Writes functional code (backend, logic, state)
+      - Automatic testing and verification workflows
-        - Writes tests
+      - Context-aware prompt generation
-        - Uses standard prompts (e.g. `.automaker/coding_prompt.md`) to ensure quality and consistency.
+      - Agent memory and learning capabilities
-      - **The Designer (Gemini 3 Pro)**:
+      - Concurrent feature processing with configurable limits
-        - Receives UI requirements
+      - Follow-up and resume capabilities
-        - Generates Tailwind classes and React components
-        - Ensures visual consistency and aesthetics
-      - **The Interviewer**:
-        - Interactive chat mode to gather requirements for new projects.
-        - Asks clarifying questions to define the `.automaker/app_spec.txt`.
-        - Suggests tech stacks and features based on user intent.
-      - **The QA Bot**:
-        - Runs local tests (Playwright/Jest) in the target project
-        - Reports results back to the Kanban board
-        - Updates "passes" status automatically
     </autonomous_agent_engine>
 
+    <advanced_workflows>
+      - Git worktree management for isolated development
+      - Feature-specific branching and merging
+      - Automated commit generation with file tracking
+      - Test-driven development support
+      - Code review and approval workflows
+      - Revert and rollback capabilities
+    </advanced_workflows>
+
+    <user_interface>
+      - Dark/Light theme support with 12 custom themes
+      - Per-project theme configurations
+      - Comprehensive keyboard shortcut system
+      - Sidebar navigation with project switching
+      - Multi-view architecture (Board, Spec, Agent, Context, Settings)
+      - Setup wizard for first-time configuration
+      - CLI integration status monitoring
+    </user_interface>
+
     <extensibility>
-      - Workflow Editor: Configure the agent loop (e.g., Plan -> Code -> Test -> Review)
+      - AI Profile system for model/thinking level presets
-      - Prompt Manager: Edit system prompts for Architect and Designer. Defaults to using `.automaker/coding_prompt.md` as the base instruction set.
+      - Keyboard shortcut customization
-      - Model Registry: Add/Configure different models (OpenAI, Groq, local LLMs)
+      - Model provider plugin architecture
-      - Plugin System: Hooks for pre/post generation steps
+      - Context file management for agent guidance
+      - Feature suggestion generation
+      - Spec regeneration workflows
     </extensibility>
   </core_capabilities>
 
@@ -109,24 +138,61 @@
     </local_testing>
   </development_workflow>
 
+  <implemented_features>
+    - Complete Kanban board with drag-and-drop functionality
+    - Multi-model AI agent execution (Claude + GPT/Codex)
+    - Git worktree isolation for features
+    - Real-time agent output streaming and logging
+    - Project management with session persistence
+    - Theme system with 12 themes + per-project themes
+    - Comprehensive settings panel with all configurations
+    - Feature image attachment and context system
+    - Agent profiles with model/thinking level presets
+    - Keyboard shortcut system with customization
+    - CLI integration detection (Claude Code + Codex CLI)
+    - Auto mode for autonomous feature processing
+    - Feature suggestions generation
+    - Spec regeneration and project analysis
+    - Context file management
+    - Chat history and session management
+    - File diff viewing and git integration
+    - Search and filtering across all features
+    - Category management and autocomplete
+    - Test automation and verification workflows
+  </implemented_features>
+
   <implementation_roadmap>
     <phase_1_foundation>
-      - Setup Next.js + Electron boilerplate
+      - Enhanced error handling and recovery mechanisms
-      - Implement IPC bridge
+      - Performance optimization for large projects
-      - Create Project Management UI (Open/Create)
+      - Improved memory management for long-running sessions
+      - Advanced logging and debugging capabilities
     </phase_1_foundation>
+    
     <phase_2_core_logic>
-      - Port python agent logic to TypeScript
+      - Plugin system for custom model providers
-      - Implement "Project Ingestion" (Spec/Feature List generation)
+      - Advanced workflow customization engine
-      - Integrate Claude 3.5 Opus and Gemini 3 Pro
+      - Team collaboration features
-      - Implement "New Project Interview" workflow
+      - Cloud synchronization capabilities
+      - Advanced project templates and scaffolding
     </phase_2_core_logic>
+
     <phase_3_kanban_and_interaction>
       - Build Kanban board with drag-and-drop
       - Connect Kanban state to `.automaker/features/` filesystem
       - Implement "Run Feature" capability
       - Integrate standard prompts library
     </phase_3_kanban_and_interaction>
+
+    <phase_3_polish>
+      - Enhanced accessibility features
+      - Advanced theme customization
+      - Performance monitoring and analytics
+      - Documentation generation automation
+      - Integration with external development tools
+      - Advanced security auditing and sandboxing
+    </phase_3_polish>
+
     <phase_4_polish>
       - Advanced terminal integration
       - Settings & Extensibility

app/src/components/layout/sidebar.tsx

@@ -393,7 +393,8 @@ export function Sidebar() {
 
     if (!result.canceled && result.filePaths[0]) {
       const path = result.filePaths[0];
-      const name = path.split("/").pop() || "Untitled Project";
+      // Extract folder name from path (works on both Windows and Mac/Linux)
+      const name = path.split(/[/\\]/).filter(Boolean).pop() || "Untitled Project";
 
       try {
         // Check if this is a brand new project (no .automaker directory)

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

@@ -17,6 +17,7 @@ import {
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { getElectronAPI } from "@/lib/electron";
+import { Markdown } from "@/components/ui/markdown";
 
 interface InterviewMessage {
   id: string;
@@ -99,12 +100,23 @@ export function InterviewView() {
 
   // Auto-scroll to bottom when messages change
   useEffect(() => {
+    let timeoutId: NodeJS.Timeout | undefined;
     if (messagesContainerRef.current) {
-      messagesContainerRef.current.scrollTo({
+      // Use a small delay to ensure DOM is updated
-        top: messagesContainerRef.current.scrollHeight,
+      timeoutId = setTimeout(() => {
-        behavior: "smooth",
+        if (messagesContainerRef.current) {
-      });
+          messagesContainerRef.current.scrollTo({
+            top: messagesContainerRef.current.scrollHeight,
+            behavior: "smooth",
+          });
+        }
+      }, 100);
     }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
   }, [messages]);
 
   // Auto-focus input
@@ -347,7 +359,7 @@ export function InterviewView() {
 
   return (
     <div
-      className="flex-1 flex flex-col content-bg"
+      className="flex-1 flex flex-col content-bg min-h-0"
       data-testid="interview-view"
     >
       {/* Header */}
@@ -431,10 +443,15 @@ export function InterviewView() {
               )}
             >
               <CardContent className="px-3 py-2">
-                <p className={cn(
+                {message.role === "assistant" ? (
-                  "text-sm whitespace-pre-wrap",
+                  <Markdown className="text-sm text-primary prose-headings:text-primary prose-strong:text-primary prose-code:text-primary">
-                  message.role === "assistant" && "text-primary"
+                    {message.content}
-                )}>{message.content}</p>
+                  </Markdown>
+                ) : (
+                  <p className="text-sm whitespace-pre-wrap">
+                    {message.content}
+                  </p>
+                )}
                 <p
                   className={cn(
                     "text-xs mt-1",

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

@@ -157,7 +157,8 @@ export function WelcomeView() {
 
     if (!result.canceled && result.filePaths[0]) {
       const path = result.filePaths[0];
-      const name = path.split("/").pop() || "Untitled Project";
+      // Extract folder name from path (works on both Windows and Mac/Linux)
+      const name = path.split(/[/\\]/).filter(Boolean).pop() || "Untitled Project";
       await initializeAndOpenProject(path, name);
     }
   }, [initializeAndOpenProject]);
@@ -309,9 +310,9 @@ export function WelcomeView() {
               data-testid="new-project-card"
             >
               <div className="absolute inset-0 bg-gradient-to-br from-brand-500/5 to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
-              <div className="relative p-6">
+              <div className="relative p-6 h-full flex flex-col">
-                <div className="flex items-start gap-4 mb-4">
+                <div className="flex items-start gap-4 flex-1">
-                  <div className="w-12 h-12 rounded-lg bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center group-hover:scale-110 transition-transform">
+                  <div className="w-12 h-12 rounded-lg bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
                     <Plus className="w-6 h-6 text-white" />
                   </div>
                   <div className="flex-1">
@@ -327,7 +328,7 @@ export function WelcomeView() {
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      className="w-full bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-primary-foreground border-0"
+                      className="w-full mt-4 bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-primary-foreground border-0"
                       data-testid="create-new-project"
                     >
                       <Plus className="w-4 h-4 mr-2" />
@@ -361,9 +362,9 @@ export function WelcomeView() {
               data-testid="open-project-card"
             >
               <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-cyan-600/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
-              <div className="relative p-6">
+              <div className="relative p-6 h-full flex flex-col">
-                <div className="flex items-start gap-4 mb-4">
+                <div className="flex items-start gap-4 flex-1">
-                  <div className="w-12 h-12 rounded-lg bg-muted border border-border flex items-center justify-center group-hover:scale-110 transition-transform">
+                  <div className="w-12 h-12 rounded-lg bg-muted border border-border flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
                     <FolderOpen className="w-6 h-6 text-muted-foreground group-hover:text-foreground transition-colors" />
                   </div>
                   <div className="flex-1">
@@ -377,7 +378,7 @@ export function WelcomeView() {
                 </div>
                 <Button
                   variant="secondary"
-                  className="w-full bg-secondary hover:bg-secondary/80 text-foreground border border-border hover:border-border-glass"
+                  className="w-full mt-4 bg-secondary hover:bg-secondary/80 text-foreground border border-border hover:border-border-glass"
                   data-testid="open-existing-project"
                 >
                   <FolderOpen className="w-4 h-4 mr-2" />

app/src/lib/electron.ts

@@ -1743,7 +1743,7 @@ async function simulateSpecCreation(
 
   // Note: Features are now stored in .automaker/features/{id}/feature.json
   // The generateFeatures parameter is kept for API compatibility but features
-  // should be created through the features API, not written to feature_list.json
+  // should be created through the features API
 
   emitSpecRegenerationEvent({
     type: "spec_regeneration_complete",