Merge pull request #16 from AutoMaker-Org/feature/ui-fixes-path-correction

UI fixes for path issues in project name, adjusted some UI styling in…

.automaker/app_spec.txt

@@ -1,136 +1,156 @@
 <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 of `.automaker/app_spec.txt` based on codebase analysis
-      - Auto-generation of `.automaker/feature_list.json`:
-        - Scans code for implemented features
-        - Creates test cases for existing features
-        - Marks existing features as "passes": true automatically
+      - Automatic codebase analysis and understanding
+      - 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
     </intelligent_analysis>
 
     <kanban_workflow>
-      - Visual representation of `.automaker/feature_list.json`
-      - 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>
 
-  <ui_layout>
-    <window_structure>
-      - Sidebar: Project List, Settings, Logs, Plugins
-      - Main Content:
-        - **Spec View**: Split editor for `.automaker/app_spec.txt`
-        - **Board View**: Kanban board for `.automaker/feature_list.json`
-        - **Code View**: Read-only Monaco editor to see what the agent is writing
-        - **Agent View**: Chat-like interface showing agent thought process and tool usage. Also used for the "New Project Interview".
-    </window_structure>
-    <theme>
-      - Dark/Light mode support (system sync)
-      - "Hacker" aesthetic option (terminal-like)
-      - Professional/Clean default
-    </theme>
-  </ui_layout>
-
-  <development_workflow>
-    <local_testing>
-      - "Browser Mode": Run the Next.js frontend in a standard browser with mocked Electron IPC for rapid UI iteration.
-      - "Electron Mode": Full desktop app testing.
-      - Hot Reloading for both Main and Renderer processes.
-    </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/feature_list.json` filesystem
-      - Implement "Run Feature" capability
-      - Integrate standard prompts library
-    </phase_3_kanban_and_interaction>
-    <phase_4_polish>
-      - Advanced terminal integration
-      - Settings & Extensibility
-      - UI refinement
-    </phase_4_polish>
+    <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>
   </implementation_roadmap>
 </project_specification>

.automaker/feature_list.json

@@ -391,5 +391,230 @@
     "summary": "Fixed Cmd+Enter shortcut not working in Add Feature modal when input is focused. Modified: hotkey-button.tsx - Changed logic to allow cmdCtrl modifier shortcuts even when typing in input fields, since they are intentional submit actions.",
     "model": "opus",
     "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-0",
+    "category": "Phase 1: Foundation",
+    "description": "Enhanced error handling and recovery mechanisms",
+    "steps": [
+      "Add comprehensive error boundary components",
+      "Implement agent execution error recovery",
+      "Add retry mechanisms for failed operations",
+      "Create detailed error logging and reporting"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-1",
+    "category": "Phase 1: Foundation",
+    "description": "Performance optimization for large projects",
+    "steps": [
+      "Implement file tree virtualization for large directories",
+      "Add lazy loading for Kanban cards",
+      "Optimize agent output streaming for large outputs",
+      "Implement background processing for project analysis"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-2",
+    "category": "Phase 1: Foundation",
+    "description": "Improved memory management for long-running sessions",
+    "steps": [
+      "Add memory usage monitoring",
+      "Implement automatic cleanup of old sessions",
+      "Add garbage collection for unused resources",
+      "Optimize state management for large feature lists"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-3",
+    "category": "Phase 1: Foundation",
+    "description": "Advanced logging and debugging capabilities",
+    "steps": [
+      "Implement detailed agent execution tracing",
+      "Add debug mode with verbose logging",
+      "Create log export and analysis tools",
+      "Add performance profiling capabilities"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-4",
+    "category": "Phase 2: Core Logic",
+    "description": "Plugin system for custom model providers",
+    "steps": [
+      "Design plugin API interface",
+      "Implement plugin loading and management",
+      "Add support for custom model configurations",
+      "Create plugin marketplace or registry"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-5",
+    "category": "Phase 2: Core Logic",
+    "description": "Advanced workflow customization engine",
+    "steps": [
+      "Create visual workflow editor",
+      "Add custom prompt templates",
+      "Implement conditional workflow logic",
+      "Add workflow sharing and importing"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-6",
+    "category": "Phase 2: Core Logic",
+    "description": "Team collaboration features",
+    "steps": [
+      "Add user authentication and authorization",
+      "Implement real-time collaboration on features",
+      "Add commenting and discussion features",
+      "Create team project sharing capabilities"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-7",
+    "category": "Phase 2: Core Logic",
+    "description": "Cloud synchronization capabilities",
+    "steps": [
+      "Implement cloud storage integration",
+      "Add automatic project backup and sync",
+      "Create cross-device project access",
+      "Add conflict resolution for concurrent edits"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-8",
+    "category": "Phase 2: Core Logic",
+    "description": "Advanced project templates and scaffolding",
+    "steps": [
+      "Create project template system",
+      "Add framework-specific scaffolding",
+      "Implement custom template creation",
+      "Add template marketplace or sharing"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-9",
+    "category": "Phase 3: Polish",
+    "description": "Enhanced accessibility features",
+    "steps": [
+      "Add full keyboard navigation support",
+      "Implement screen reader compatibility",
+      "Add high contrast and accessibility themes",
+      "Create accessibility testing automation"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-10",
+    "category": "Phase 3: Polish",
+    "description": "Advanced theme customization",
+    "steps": [
+      "Add custom color picker for themes",
+      "Implement CSS variable overrides",
+      "Create theme sharing and importing",
+      "Add animation and transition customization"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-11",
+    "category": "Phase 3: Polish",
+    "description": "Performance monitoring and analytics",
+    "steps": [
+      "Add application performance monitoring",
+      "Implement usage analytics and insights",
+      "Create performance dashboard",
+      "Add optimization recommendations"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-12",
+    "category": "Phase 3: Polish",
+    "description": "Documentation generation automation",
+    "steps": [
+      "Add automatic README generation",
+      "Implement API documentation extraction",
+      "Create feature documentation templates",
+      "Add documentation consistency checking"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-13",
+    "category": "Phase 3: Polish",
+    "description": "Integration with external development tools",
+    "steps": [
+      "Add IDE plugin/extension support",
+      "Implement CI/CD pipeline integration",
+      "Add issue tracking system integration",
+      "Create webhook and API endpoints"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
+  },
+  {
+    "id": "feature-1734710400000-14",
+    "category": "Phase 3: Polish",
+    "description": "Advanced security auditing and sandboxing",
+    "steps": [
+      "Implement code security scanning",
+      "Add enhanced sandboxing capabilities",
+      "Create security audit reports",
+      "Add permission management system"
+    ],
+    "status": "backlog",
+    "skipTests": true,
+    "model": "opus",
+    "thinkingLevel": "none"
   }
 ]

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/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

@@ -172,6 +172,7 @@ export interface ElectronAPI {
   git?: GitAPI;
   suggestions?: SuggestionsAPI;
   specRegeneration?: SpecRegenerationAPI;
+  autoMode?: AutoModeAPI;
   setup?: {
     getClaudeStatus: () => Promise<{
       success: boolean;