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>
-      <ui_library>shadcn/ui</ui_library>
-      <styling>Tailwind CSS</styling>
-      <state_management>Zustand / TanStack Query</state_management>
-      <drag_drop>dnd-kit (for Kanban)</drag_drop>
+      <framework>Next.js 16.0.7 (App Router)</framework>
+      <ui_library>shadcn/ui with Radix UI primitives</ui_library>
+      <styling>Tailwind CSS 4.0</styling>
+      <state_management>Zustand with persistence</state_management>
+      <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>
-      <language>TypeScript</language>
-      <inter_process_communication>Electron IPC (tRPC or raw IPC)</inter_process_communication>
-      <file_system>Node.js fs/promises</file_system>
+      <framework>Electron 39.2.6</framework>
+      <language>TypeScript 5.x</language>
+      <inter_process_communication>Electron IPC with security sandboxing</inter_process_communication>
+      <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>
-      <design_model>Gemini 3 Pro (via Google Generative AI SDK)</design_model>
-      <orchestration>LangChain or Custom Agent Loop</orchestration>
+      <primary_model>Claude 3.5 (Opus, Sonnet, Haiku) via Anthropic Claude Agent SDK</primary_model>
+      <secondary_model>GPT-5.1 Codex family via OpenAI CLI</secondary_model>
+      <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>
-      <unit>Vitest</unit>
+      <framework>Playwright for E2E testing</framework>
+      <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
-      - Create new projects from scratch (Wizard/Interview Mode)
-      - Project configuration (name, path, ignore patterns)
-      - Visual file explorer
+      - Open and manage multiple local projects
+      - Project-specific themes and configurations
+      - Session management with project context
+      - 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)**:
-        - Reads spec and feature list
-        - Plans implementation steps
-        - Writes functional code (backend, logic, state)
-        - Writes tests
-        - Uses standard prompts (e.g. `.automaker/coding_prompt.md`) to ensure quality and consistency.
-      - **The Designer (Gemini 3 Pro)**:
-        - Receives UI requirements
-        - 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
+      - Multi-model agent system with profile-based execution
+      - Streaming agent output with real-time logs
+      - Git worktree isolation for safe feature development
+      - Automatic testing and verification workflows
+      - Context-aware prompt generation
+      - Agent memory and learning capabilities
+      - Concurrent feature processing with configurable limits
+      - Follow-up and resume capabilities
     </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)
-      - Prompt Manager: Edit system prompts for Architect and Designer. Defaults to using `.automaker/coding_prompt.md` as the base instruction set.
-      - Model Registry: Add/Configure different models (OpenAI, Groq, local LLMs)
-      - Plugin System: Hooks for pre/post generation steps
+      - AI Profile system for model/thinking level presets
+      - Keyboard shortcut customization
+      - Model provider plugin architecture
+      - 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
-      - Implement IPC bridge
-      - Create Project Management UI (Open/Create)
+      - Enhanced error handling and recovery mechanisms
+      - Performance optimization for large projects
+      - 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
-      - Implement "Project Ingestion" (Spec/Feature List generation)
-      - Integrate Claude 3.5 Opus and Gemini 3 Pro
-      - Implement "New Project Interview" workflow
+      - Plugin system for custom model providers
+      - Advanced workflow customization engine
+      - Team collaboration features
+      - 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({
-        top: messagesContainerRef.current.scrollHeight,
-        behavior: "smooth",
-      });
+      // Use a small delay to ensure DOM is updated
+      timeoutId = setTimeout(() => {
+        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(
-                  "text-sm whitespace-pre-wrap",
-                  message.role === "assistant" && "text-primary"
-                )}>{message.content}</p>
+                {message.role === "assistant" ? (
+                  <Markdown className="text-sm text-primary prose-headings:text-primary prose-strong:text-primary prose-code:text-primary">
+                    {message.content}
+                  </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="flex items-start gap-4 mb-4">
-                  <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="relative p-6 h-full flex flex-col">
+                <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 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="flex items-start gap-4 mb-4">
-                  <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="relative p-6 h-full flex flex-col">
+                <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 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",