diff --git a/.automaker/app_spec.txt b/.automaker/app_spec.txt index e638a46e..e9b2c014 100644 --- a/.automaker/app_spec.txt +++ b/.automaker/app_spec.txt @@ -2,7 +2,7 @@ Automaker - Autonomous AI Development Studio - 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 (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 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. @@ -41,15 +41,15 @@ - "Project Ingestion": Analyzes existing codebases to understand structure - - Auto-generation of `app_spec.txt` based on codebase analysis - - Auto-generation of `feature_list.json`: + - 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 - - Visual representation of `feature_list.json` + - 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 @@ -69,7 +69,7 @@ - Ensures visual consistency and aesthetics - **The Interviewer**: - Interactive chat mode to gather requirements for new projects. - - Asks clarifying questions to define the `app_spec.txt`. + - 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 @@ -89,8 +89,8 @@ - Sidebar: Project List, Settings, Logs, Plugins - Main Content: - - **Spec View**: Split editor for `app_spec.txt` - - **Board View**: Kanban board for `feature_list.json` + - **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". @@ -123,7 +123,7 @@ - Build Kanban board with drag-and-drop - - Connect Kanban state to `feature_list.json` filesystem + - Connect Kanban state to `.automaker/feature_list.json` filesystem - Implement "Run Feature" capability - Integrate standard prompts library diff --git a/.automaker/coding_prompt.md b/.automaker/coding_prompt.md index d0af58d0..7186acb7 100644 --- a/.automaker/coding_prompt.md +++ b/.automaker/coding_prompt.md @@ -113,18 +113,17 @@ npx playwright test tests/[feature-name].spec.ts --headed ```typescript import { test, expect } from "@playwright/test"; +import { getByTestId } from "./utils"; test("user can send a message and receive response", async ({ page }) => { await page.goto("http://localhost:3007"); // Happy path: main user flow - await page.fill('[data-testid="message-input"]', "Hello world"); - await page.click('[data-testid="send-button"]'); + await getByTestId(page, "message-input").fill("Hello world"); + await getByTestId(page, "send-button").click(); // Verify the expected outcome - await expect(page.locator('[data-testid="message-list"]')).toContainText( - "Hello world" - ); + await expect(getByTestId(page, "message-list")).toContainText("Hello world"); }); ``` @@ -245,6 +244,55 @@ npm install -D @playwright/test npx playwright install ``` +**Testing Utilities:** + +**CRITICAL:** Create and maintain a centralized testing utilities file to make tests easier to write and maintain. + +Create a `tests/utils.ts` file (if it doesn't exist) with helper functions for finding elements: + +```typescript +// tests/utils.ts +import { Page, Locator } from "@playwright/test"; + +/** + * Get element by test ID + */ +export function getByTestId(page: Page, testId: string): Locator { + return page.locator(`[data-testid="${testId}"]`); +} + +/** + * Get button by text + */ +export function getButtonByText(page: Page, text: string): Locator { + return page.locator(`button:has-text("${text}")`); +} + +/** + * Wait for element and click + */ +export async function clickElement(page: Page, testId: string) { + await getByTestId(page, testId).click(); +} + +// Add more utilities as you write tests... +``` + +**Utility Maintenance Rules:** + +1. **Add utilities as you write tests** - If you find yourself repeating selectors or patterns, add a utility function +2. **Update utilities when functionality changes** - If a component changes, update the corresponding utility +3. **Make utilities reusable** - Write helpers that can be used across multiple tests +4. **Document utilities** - Add JSDoc comments explaining what each utility does + +**Example utilities to add:** +- Finding elements by role, text, or test ID +- Filling forms +- Waiting for elements to appear/disappear +- Checking element states (visible, disabled, etc.) +- Navigation helpers +- Common assertions + **Writing Tests:** Create tests in the `tests/` directory with `.spec.ts` extension. @@ -252,17 +300,18 @@ Create tests in the `tests/` directory with `.spec.ts` extension. ```typescript // tests/example.spec.ts import { test, expect } from "@playwright/test"; +import { getByTestId, clickElement } from "./utils"; test.describe("Feature Name", () => { test("happy path: user completes main workflow", async ({ page }) => { await page.goto("http://localhost:3007"); - // Interact with UI elements - await page.click('button[data-testid="action"]'); - await page.fill('input[data-testid="input"]', "test value"); + // Interact with UI elements using utilities + await getByTestId(page, "input").fill("test value"); + await clickElement(page, "action"); // Assert expected outcomes - await expect(page.locator('[data-testid="result"]')).toBeVisible(); + await expect(getByTestId(page, "result")).toBeVisible(); }); }); ``` @@ -285,10 +334,12 @@ npx playwright test --ui **Best Practices:** +- **Use and maintain testing utilities** - Add helper functions to `tests/utils.ts` as you write tests - Add `data-testid` attributes to elements for reliable selectors - Focus on happy path tests first - they're fast and catch most regressions - Keep tests independent and isolated - Write tests as you implement features, not after +- **Update utilities when functionality changes** - If you modify a component, update its corresponding test utility --- diff --git a/.automaker/context/feature-1765247927723-l8rvum46q.md b/.automaker/context/feature-1765247927723-l8rvum46q.md deleted file mode 100644 index 9ca06a1c..00000000 --- a/.automaker/context/feature-1765247927723-l8rvum46q.md +++ /dev/null @@ -1,259 +0,0 @@ -šŸ“‹ Planning implementation for: starting A new chat session should pick a random name for the session then create it -āš” Executing implementation for: starting A new chat session should pick a random name for the session then create it -Starting code implementation... - -šŸ”§ Tool: TodoWrite -Input: { - "todos": [ - { - "content": "Read project structure and understand codebase", - "status": "in_progress", - "activeForm": "Reading project structure and understanding codebase" - }, - { - "content": "Implement new chat session auto focus feature", - "status": "pending", - "activeForm": "Implementing new chat session auto focus feature" - }, - { - "content": "Write Playwright tests for the feature", - "status": "pending", - "activeForm": "Writing Playwright tests for the feature" - }, - { - "content": "Run tests and ensure they pass", - "status": "pending", - "activeForm": "Running tests and ensuring they pass" - }, - { - "content": "Update feature_list.json and commit changes", - "status": "pending", - "activeForm": "Updating feature_list.json and committing changes" - } - ] -} -šŸ”§ Tool: Glob -Input: { - "pattern": "**/*" -} -šŸ”§ Tool: Glob -Input: { - "pattern": "app/src/**/*.{ts,tsx}" -} -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/components/session-manager.tsx" -} -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/store/app-store.ts" -} -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/types/session.ts" -}Now let me read the page.tsx to understand the main app structure and the agent-view.tsx to see how chat input is handled: -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/app/page.tsx" -} -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/components/views/agent-view.tsx" -}Let me also read the existing tests to understand the testing patterns and find the feature_list.json: -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/tests/foundation.spec.ts" -} -šŸ”§ Tool: Glob -Input: { - "pattern": "**/feature_list.json" -} -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/.automaker/feature_list.json" -} -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/components/layout/sidebar.tsx" -}Now I have a good understanding of the codebase. Let me update the todo list and implement the feature: -šŸ”§ Tool: TodoWrite -Input: { - "todos": [ - { - "content": "Read project structure and understand codebase", - "status": "completed", - "activeForm": "Reading project structure and understanding codebase" - }, - { - "content": "Implement new chat session auto focus feature", - "status": "in_progress", - "activeForm": "Implementing new chat session auto focus feature" - }, - { - "content": "Write Playwright tests for the feature", - "status": "pending", - "activeForm": "Writing Playwright tests for the feature" - }, - { - "content": "Run tests and ensure they pass", - "status": "pending", - "activeForm": "Running tests and ensuring they pass" - }, - { - "content": "Update feature_list.json and commit changes", - "status": "pending", - "activeForm": "Updating feature_list.json and committing changes" - } - ] -}Based on my analysis of the code, I need to implement the feature: -1. "Click new session" - The New button in SessionManager should auto-generate a random name -2. "Verify session was created" - The session should be created with the random name -3. "Verify chat input focused" - After creating the session, the input should be focused - -The current implementation in `session-manager.tsx` requires the user to manually enter a session name. I need to modify it to automatically generate a random name when clicking "New". - -Let me implement this feature: -šŸ”§ Tool: Edit -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/components/session-manager.tsx", - "old_string": "import { cn } from \"@/lib/utils\";\nimport type { SessionListItem } from \"@/types/electron\";", - "new_string": "import { cn } from \"@/lib/utils\";\nimport type { SessionListItem } from \"@/types/electron\";\n\n// Random session name generator\nconst adjectives = [\n \"Swift\", \"Bright\", \"Clever\", \"Dynamic\", \"Eager\", \"Focused\", \"Gentle\", \"Happy\",\n \"Inventive\", \"Jolly\", \"Keen\", \"Lively\", \"Mighty\", \"Noble\", \"Optimal\", \"Peaceful\",\n \"Quick\", \"Radiant\", \"Smart\", \"Tranquil\", \"Unique\", \"Vibrant\", \"Wise\", \"Zealous\"\n];\n\nconst nouns = [\n \"Agent\", \"Builder\", \"Coder\", \"Developer\", \"Explorer\", \"Forge\", \"Garden\", \"Helper\",\n \"Innovator\", \"Journey\", \"Kernel\", \"Lighthouse\", \"Mission\", \"Navigator\", \"Oracle\",\n \"Project\", \"Quest\", \"Runner\", \"Spark\", \"Task\", \"Unicorn\", \"Voyage\", \"Workshop\"\n];\n\nfunction generateRandomSessionName(): string {\n const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];\n const noun = nouns[Math.floor(Math.random() * nouns.length)];\n const number = Math.floor(Math.random() * 100);\n return `${adjective} ${noun} ${number}`;\n}" -}Now let me modify the "New" button to directly create a session with a random name instead of showing a name input field: -šŸ”§ Tool: Edit -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/components/session-manager.tsx", - "old_string": " // Create new session\n const handleCreateSession = async () => {\n if (!newSessionName.trim() || !window.electronAPI?.sessions) return;\n\n const result = await window.electronAPI.sessions.create(\n newSessionName,\n projectPath,\n projectPath\n );\n\n if (result.success && result.sessionId) {\n setNewSessionName(\"\");\n setIsCreating(false);\n await loadSessions();\n onSelectSession(result.sessionId);\n }\n };", - "new_string": " // Create new session with random name\n const handleCreateSession = async () => {\n if (!window.electronAPI?.sessions) return;\n\n const sessionName = newSessionName.trim() || generateRandomSessionName();\n\n const result = await window.electronAPI.sessions.create(\n sessionName,\n projectPath,\n projectPath\n );\n\n if (result.success && result.sessionId) {\n setNewSessionName(\"\");\n setIsCreating(false);\n await loadSessions();\n onSelectSession(result.sessionId);\n }\n };\n\n // Create new session directly with a random name (one-click)\n const handleQuickCreateSession = async () => {\n if (!window.electronAPI?.sessions) return;\n\n const sessionName = generateRandomSessionName();\n\n const result = await window.electronAPI.sessions.create(\n sessionName,\n projectPath,\n projectPath\n );\n\n if (result.success && result.sessionId) {\n await loadSessions();\n onSelectSession(result.sessionId);\n }\n };" -}Now let me update the "New" button to call `handleQuickCreateSession` directly instead of showing the input form: -šŸ”§ Tool: Edit -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/components/session-manager.tsx", - "old_string": " {activeTab === \"active\" && (\n setIsCreating(true)}\n >\n \n New\n \n )}", - "new_string": " {activeTab === \"active\" && (\n \n \n New\n \n )}" -}Now let me verify the auto-focus is working on the agent-view.tsx. The input focus is already being set in the effect at line 363-370. Let me make sure the session list items also have data-testid for testing: -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/components/session-manager.tsx", - "offset": 245, - "limit": 70 -}Let me add data-testid to the session list items: -šŸ”§ Tool: Edit -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/components/session-manager.tsx", - "old_string": " {/* Session list */}\n {displayedSessions.map((session) => (\n !session.isArchived && onSelectSession(session.id)}\n >", - "new_string": " {/* Session list */}\n {displayedSessions.map((session) => (\n !session.isArchived && onSelectSession(session.id)}\n data-testid={`session-item-${session.id}`}\n >" -}Now let me also add a generic test id for any session item and for the session container: -šŸ”§ Tool: Edit -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/components/session-manager.tsx", - "old_string": " ", - "new_string": " " -}Now let me update the todo and write the Playwright tests: -šŸ”§ Tool: TodoWrite -Input: { - "todos": [ - { - "content": "Read project structure and understand codebase", - "status": "completed", - "activeForm": "Reading project structure and understanding codebase" - }, - { - "content": "Implement new chat session auto focus feature", - "status": "completed", - "activeForm": "Implementing new chat session auto focus feature" - }, - { - "content": "Write Playwright tests for the feature", - "status": "in_progress", - "activeForm": "Writing Playwright tests for the feature" - }, - { - "content": "Run tests and ensure they pass", - "status": "pending", - "activeForm": "Running tests and ensuring they pass" - }, - { - "content": "Update feature_list.json and commit changes", - "status": "pending", - "activeForm": "Updating feature_list.json and committing changes" - } - ] -} -šŸ”§ Tool: Write -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/tests/new-session.spec.ts", - "content": "import { test, expect } from \"@playwright/test\";\n\ntest.describe(\"New Chat Session Auto Focus\", () => {\n test.beforeEach(async ({ page }) => {\n await page.goto(\"/\");\n\n // Open a project first (click on New Project card in welcome view)\n await expect(page.getByTestId(\"welcome-view\")).toBeVisible();\n await page.getByTestId(\"new-project-card\").click();\n\n // Wait for the board view to load (project is selected)\n await expect(page.getByTestId(\"nav-board\")).toBeVisible();\n\n // Navigate to Agent view\n await page.getByTestId(\"nav-agent\").click();\n await expect(page.getByTestId(\"agent-view\")).toBeVisible();\n });\n\n test(\"clicking new session button creates a session with random name\", async ({ page }) => {\n // Click the \"New\" session button\n const newSessionButton = page.getByTestId(\"new-session-button\");\n await expect(newSessionButton).toBeVisible();\n await newSessionButton.click();\n\n // Wait for the session to be created - check for session item in the list\n const sessionList = page.getByTestId(\"session-list\");\n await expect(sessionList).toBeVisible();\n\n // The session should appear in the list\n // Look for a session item (it should have a name matching our pattern: Adjective Noun Number)\n await expect(sessionList.locator('[data-testid^=\"session-item-\"]').first()).toBeVisible({ timeout: 5000 });\n\n // The session name should follow the pattern of random names (contains letters and numbers)\n const sessionName = sessionList.locator('[data-testid^=\"session-item-\"]').first().locator(\"h3\");\n await expect(sessionName).toBeVisible();\n const nameText = await sessionName.textContent();\n expect(nameText).toBeTruthy();\n // Verify the name follows our pattern: \"Adjective Noun Number\"\n expect(nameText).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+ \\d+$/);\n });\n\n test(\"verify session was created and selected\", async ({ page }) => {\n // Click the \"New\" session button\n const newSessionButton = page.getByTestId(\"new-session-button\");\n await newSessionButton.click();\n\n // Wait for session to be created\n const sessionList = page.getByTestId(\"session-list\");\n await expect(sessionList.locator('[data-testid^=\"session-item-\"]').first()).toBeVisible({ timeout: 5000 });\n\n // Verify the session is selected (has the primary border class)\n const sessionItem = sessionList.locator('[data-testid^=\"session-item-\"]').first();\n await expect(sessionItem).toHaveClass(/border-primary/);\n\n // Verify the message list is visible (session is active)\n await expect(page.getByTestId(\"message-list\")).toBeVisible();\n });\n\n test(\"verify chat input is focused after creating new session\", async ({ page }) => {\n // Click the \"New\" session button\n const newSessionButton = page.getByTestId(\"new-session-button\");\n await newSessionButton.click();\n\n // Wait for session to be created\n const sessionList = page.getByTestId(\"session-list\");\n await expect(sessionList.locator('[data-testid^=\"session-item-\"]').first()).toBeVisible({ timeout: 5000 });\n\n // Wait for the input to be focused (there's a 200ms delay in the code)\n await page.waitForTimeout(300);\n\n // Verify the chat input is focused\n const chatInput = page.getByTestId(\"agent-input\");\n await expect(chatInput).toBeVisible();\n await expect(chatInput).toBeFocused();\n });\n\n test(\"complete flow: click new session, verify session created, verify input focused\", async ({ page }) => {\n // Step 1: Click new session\n const newSessionButton = page.getByTestId(\"new-session-button\");\n await expect(newSessionButton).toBeVisible();\n await newSessionButton.click();\n\n // Step 2: Verify session was created\n const sessionList = page.getByTestId(\"session-list\");\n await expect(sessionList.locator('[data-testid^=\"session-item-\"]').first()).toBeVisible({ timeout: 5000 });\n\n // Verify the session has a randomly generated name\n const sessionName = sessionList.locator('[data-testid^=\"session-item-\"]').first().locator(\"h3\");\n const nameText = await sessionName.textContent();\n expect(nameText).toBeTruthy();\n expect(nameText).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+ \\d+$/);\n\n // Step 3: Verify chat input focused\n await page.waitForTimeout(300);\n const chatInput = page.getByTestId(\"agent-input\");\n await expect(chatInput).toBeFocused();\n });\n});\n" -}Now let me update the todo and run the tests: -šŸ”§ Tool: TodoWrite -Input: { - "todos": [ - { - "content": "Read project structure and understand codebase", - "status": "completed", - "activeForm": "Reading project structure and understanding codebase" - }, - { - "content": "Implement new chat session auto focus feature", - "status": "completed", - "activeForm": "Implementing new chat session auto focus feature" - }, - { - "content": "Write Playwright tests for the feature", - "status": "completed", - "activeForm": "Writing Playwright tests for the feature" - }, - { - "content": "Run tests and ensure they pass", - "status": "in_progress", - "activeForm": "Running tests and ensuring they pass" - }, - { - "content": "Update feature_list.json and commit changes", - "status": "pending", - "activeForm": "Updating feature_list.json and committing changes" - } - ] -} -šŸ”§ Tool: Bash -Input: { - "command": "cd /Users/webdevcody/Workspace/automaker/app && npm test 2>&1 | head -100", - "description": "Run Playwright tests", - "timeout": 120000 -}The server is being blocked by sandbox. Let me try with sandbox disabled: -šŸ”§ Tool: Bash -Input: { - "command": "npm test 2>&1", - "description": "Run Playwright tests", - "timeout": 180000, - "dangerouslyDisableSandbox": true -}The tests ran but many failed. Let me look at the specific results for our new tests and the foundation tests to understand what's happening: -šŸ”§ Tool: Bash -Input: { - "command": "npx playwright test tests/new-session.spec.ts --reporter=list 2>&1", - "description": "Run only new session tests", - "timeout": 120000, - "dangerouslyDisableSandbox": true -}The tests are failing because clicking on "new-project-card" doesn't automatically create a project (it opens a dialog). I need to look at how other tests handle project creation. Let me check another test file to understand the project setup flow: -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/tests/project-management.spec.ts" -}Now I understand the pattern. I need to create a project first by filling in the dialog. Let me update my test file: -šŸ”§ Tool: Write -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/tests/new-session.spec.ts", - "content": "import { test, expect } from \"@playwright/test\";\n\ntest.describe(\"New Chat Session Auto Focus\", () => {\n test.beforeEach(async ({ page }) => {\n await page.goto(\"/\");\n\n // Create a new project first\n await page.getByTestId(\"new-project-card\").click();\n await expect(page.getByTestId(\"new-project-dialog\")).toBeVisible();\n\n // Enter project details\n await page.getByTestId(\"project-name-input\").fill(\"test-session-project\");\n await page.getByTestId(\"project-path-input\").fill(\"/Users/test/session-projects\");\n\n // Click create\n await page.getByTestId(\"confirm-create-project\").click();\n\n // Should navigate to board view\n await expect(page.getByTestId(\"board-view\")).toBeVisible();\n\n // Navigate to Agent view\n await page.getByTestId(\"nav-agent\").click();\n await expect(page.getByTestId(\"agent-view\")).toBeVisible();\n });\n\n test(\"clicking new session button creates a session with random name\", async ({ page }) => {\n // Click the \"New\" session button\n const newSessionButton = page.getByTestId(\"new-session-button\");\n await expect(newSessionButton).toBeVisible();\n await newSessionButton.click();\n\n // Wait for the session to be created - check for session item in the list\n const sessionList = page.getByTestId(\"session-list\");\n await expect(sessionList).toBeVisible();\n\n // The session should appear in the list\n await expect(sessionList.locator('[data-testid^=\"session-item-\"]').first()).toBeVisible({ timeout: 5000 });\n\n // The session name should follow the pattern of random names (contains letters and numbers)\n const sessionName = sessionList.locator('[data-testid^=\"session-item-\"]').first().locator(\"h3\");\n await expect(sessionName).toBeVisible();\n const nameText = await sessionName.textContent();\n expect(nameText).toBeTruthy();\n // Verify the name follows our pattern: \"Adjective Noun Number\"\n expect(nameText).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+ \\d+$/);\n });\n\n test(\"verify session was created and selected\", async ({ page }) => {\n // Click the \"New\" session button\n const newSessionButton = page.getByTestId(\"new-session-button\");\n await newSessionButton.click();\n\n // Wait for session to be created\n const sessionList = page.getByTestId(\"session-list\");\n await expect(sessionList.locator('[data-testid^=\"session-item-\"]').first()).toBeVisible({ timeout: 5000 });\n\n // Verify the session is selected (has the primary border class)\n const sessionItem = sessionList.locator('[data-testid^=\"session-item-\"]').first();\n await expect(sessionItem).toHaveClass(/border-primary/);\n\n // Verify the message list is visible (session is active)\n await expect(page.getByTestId(\"message-list\")).toBeVisible();\n });\n\n test(\"verify chat input is focused after creating new session\", async ({ page }) => {\n // Click the \"New\" session button\n const newSessionButton = page.getByTestId(\"new-session-button\");\n await newSessionButton.click();\n\n // Wait for session to be created\n const sessionList = page.getByTestId(\"session-list\");\n await expect(sessionList.locator('[data-testid^=\"session-item-\"]').first()).toBeVisible({ timeout: 5000 });\n\n // Wait for the input to be focused (there's a 200ms delay in the code)\n await page.waitForTimeout(300);\n\n // Verify the chat input is focused\n const chatInput = page.getByTestId(\"agent-input\");\n await expect(chatInput).toBeVisible();\n await expect(chatInput).toBeFocused();\n });\n\n test(\"complete flow: click new session, verify session created, verify input focused\", async ({ page }) => {\n // Step 1: Click new session\n const newSessionButton = page.getByTestId(\"new-session-button\");\n await expect(newSessionButton).toBeVisible();\n await newSessionButton.click();\n\n // Step 2: Verify session was created\n const sessionList = page.getByTestId(\"session-list\");\n await expect(sessionList.locator('[data-testid^=\"session-item-\"]').first()).toBeVisible({ timeout: 5000 });\n\n // Verify the session has a randomly generated name\n const sessionName = sessionList.locator('[data-testid^=\"session-item-\"]').first().locator(\"h3\");\n const nameText = await sessionName.textContent();\n expect(nameText).toBeTruthy();\n expect(nameText).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+ \\d+$/);\n\n // Step 3: Verify chat input focused\n await page.waitForTimeout(300);\n const chatInput = page.getByTestId(\"agent-input\");\n await expect(chatInput).toBeFocused();\n });\n});\n" -} -šŸ”§ Tool: Bash -Input: { - "command": "npx playwright test tests/new-session.spec.ts --reporter=list 2>&1", - "description": "Run only new session tests", - "timeout": 120000, - "dangerouslyDisableSandbox": true -}The dialog is not appearing. Let me check the welcome-view.tsx to see how the new-project-card and dialog work: -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/src/components/views/welcome-view.tsx" -} -āœ… Verifying implementation for: starting A new chat session should pick a random name for the session then create it -Verifying implementation and checking test results... -āœ— Verification: Tests need attention diff --git a/.automaker/context/feature-22-1765245545601.md b/.automaker/context/feature-22-1765245545601.md deleted file mode 100644 index 8dfcbee2..00000000 --- a/.automaker/context/feature-22-1765245545601.md +++ /dev/null @@ -1,89 +0,0 @@ - -āœ… Verifying tests for: ability to delete a feature from kanban view -Running Playwright tests to verify feature implementation... - -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/feature_list.json" -} -šŸ”§ Tool: Glob -Input: { - "pattern": "**/*.spec.ts" -}Let me look for the feature_list.json in a different location and also read the kanban-board.spec.ts file which is likely related to the delete feature: -šŸ”§ Tool: Glob -Input: { - "pattern": "**/feature_list.json" -} -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/app/tests/kanban-board.spec.ts" -}Now let me read the feature_list.json file: -šŸ”§ Tool: Read -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/.automaker/feature_list.json" -}I can see the feature_list.json and the feature we need to verify: -- Feature ID: `feature-22-1765245545601` -- Description: "ability to delete a feature from kanban view" -- Current Status: "in_progress" - -I can also see there are relevant tests in `kanban-board.spec.ts` for the delete feature: -1. `test("displays delete button (trash icon) on feature card", ...)` - Tests for step 1 (trash icon) -2. `test("can delete a feature from kanban board", ...)` - Tests basic deletion -3. `test("deleting feature removes it from all columns", ...)` - Tests complete removal - -Note: The tests don't seem to test for a confirmation modal as mentioned in step 2 ("verify confirm modal shows up"). Let me run the Playwright tests to see if they pass: -šŸ”§ Tool: Bash -Input: { - "command": "cd /Users/webdevcody/Workspace/automaker/app && npx playwright test kanban-board.spec.ts --reporter=list 2>&1", - "description": "Run Playwright kanban-board tests", - "timeout": 300000 -}The test is failing due to a server port permission issue. Let me try running with sandbox disabled since it appears to be a permission issue: -šŸ”§ Tool: Bash -Input: { - "command": "cd /Users/webdevcody/Workspace/automaker/app && npx playwright test kanban-board.spec.ts --reporter=list 2>&1", - "description": "Run Playwright kanban-board tests", - "timeout": 300000, - "dangerouslyDisableSandbox": true -}All 12 tests passed, including the 3 tests specifically related to the delete feature: - -1. āœ… `displays delete button (trash icon) on feature card` - Tests step 1 (add trash icon to card) -2. āœ… `can delete a feature from kanban board` - Tests basic deletion functionality -3. āœ… `deleting feature removes it from all columns` - Tests complete feature removal - -Now I'll update the feature_list.json to mark this feature as "verified": -šŸ”§ Tool: Edit -Input: { - "file_path": "/Users/webdevcody/Workspace/automaker/.automaker/feature_list.json", - "old_string": " {\n \"id\": \"feature-22-1765245545601\",\n \"category\": \"delete features\",\n \"description\": \"ability to delete a feature from kanban view\",\n \"steps\": [\n \"add trash icon to card\",\n \"verify confirm modal shows up\",\n \"click confirm button\"\n ],\n \"status\": \"in_progress\"\n }", - "new_string": " {\n \"id\": \"feature-22-1765245545601\",\n \"category\": \"delete features\",\n \"description\": \"ability to delete a feature from kanban view\",\n \"steps\": [\n \"add trash icon to card\",\n \"verify confirm modal shows up\",\n \"click confirm button\"\n ],\n \"status\": \"verified\"\n }" -}## Verification Complete āœ… - -**Feature:** `feature-22-1765245545601` - "ability to delete a feature from kanban view" - -**Status:** Updated from `in_progress` ā†’ `verified` - -### Test Results Summary - -All 12 Playwright tests in `kanban-board.spec.ts` passed, including the 3 tests specifically for the delete feature: - -| Test | Result | Description | -|------|--------|-------------| -| `displays delete button (trash icon) on feature card` | āœ… Passed | Verifies the trash icon button is visible on feature cards | -| `can delete a feature from kanban board` | āœ… Passed | Verifies clicking delete removes the feature from the board | -| `deleting feature removes it from all columns` | āœ… Passed | Verifies the feature is completely removed after deletion | - -### Note on Implementation vs. Steps - -The implemented tests verify: -1. **Step 1 (add trash icon to card):** āœ… The delete button with trash icon is present on cards -2. **Steps 2 & 3 (confirm modal):** The tests show that clicking the delete button immediately removes the feature without a confirmation modal. The current implementation uses direct deletion without a confirmation dialog. - -The feature_list.json has been updated to mark this feature as "verified" since all Playwright tests pass successfully.āœ“ Verification successful: All tests passed - -āœ… Task completed: Let me look for the feature_list.json in a different location and also read the kanban-board.spec.ts file which is likely related to the delete feature:Now let me read the feature_list.json file:I can see the feature_list.json and the feature we need to verify: -- Feature ID: `feature-22-1765245545601` -- Description: "ability to delete a feature from kanban view" -- Current Status: "in_progress" - -I can also see there are relevant tests in `kanban-board.spec.ts` for the delete feature: -1. `test("di diff --git a/app/electron/auto-mode-service.js b/app/electron/auto-mode-service.js index 2403be5d..93965c56 100644 --- a/app/electron/auto-mode-service.js +++ b/app/electron/auto-mode-service.js @@ -8,30 +8,26 @@ const fs = require("fs/promises"); */ class AutoModeService { constructor() { - this.isRunning = false; - this.currentFeatureId = null; - this.abortController = null; - this.currentQuery = null; - this.projectPath = null; - this.sendToRenderer = null; + // Track multiple concurrent feature executions + this.runningFeatures = new Map(); // featureId -> { abortController, query, projectPath, sendToRenderer } + this.autoLoopRunning = false; // Separate flag for the auto loop + this.autoLoopAbortController = null; } /** * Start auto mode - continuously implement features */ async start({ projectPath, sendToRenderer }) { - if (this.isRunning) { - throw new Error("Auto mode is already running"); + if (this.autoLoopRunning) { + throw new Error("Auto mode loop is already running"); } - this.isRunning = true; - this.projectPath = projectPath; - this.sendToRenderer = sendToRenderer; + this.autoLoopRunning = true; console.log("[AutoMode] Starting auto mode for project:", projectPath); // Run the autonomous loop - this.runLoop().catch((error) => { + this.runLoop(projectPath, sendToRenderer).catch((error) => { console.error("[AutoMode] Loop error:", error); this.stop(); }); @@ -40,23 +36,29 @@ class AutoModeService { } /** - * Stop auto mode + * Stop auto mode - stops the auto loop and all running features */ async stop() { console.log("[AutoMode] Stopping auto mode"); - this.isRunning = false; + this.autoLoopRunning = false; - // Abort current agent execution - if (this.abortController) { - this.abortController.abort(); - this.abortController = null; + // Abort auto loop if running + if (this.autoLoopAbortController) { + this.autoLoopAbortController.abort(); + this.autoLoopAbortController = null; } - this.currentQuery = null; - this.currentFeatureId = null; - this.projectPath = null; - this.sendToRenderer = null; + // Abort all running features + for (const [featureId, execution] of this.runningFeatures.entries()) { + console.log(`[AutoMode] Aborting feature: ${featureId}`); + if (execution.abortController) { + execution.abortController.abort(); + } + } + + // Clear all running features + this.runningFeatures.clear(); return { success: true }; } @@ -66,8 +68,9 @@ class AutoModeService { */ getStatus() { return { - isRunning: this.isRunning, - currentFeatureId: this.currentFeatureId, + autoLoopRunning: this.autoLoopRunning, + runningFeatures: Array.from(this.runningFeatures.keys()), + runningCount: this.runningFeatures.size, }; } @@ -75,19 +78,24 @@ class AutoModeService { * Run a specific feature by ID */ async runFeature({ projectPath, featureId, sendToRenderer }) { - if (this.isRunning) { - throw new Error("Auto mode is already running"); + // Check if this specific feature is already running + if (this.runningFeatures.has(featureId)) { + throw new Error(`Feature ${featureId} is already running`); } - this.isRunning = true; - this.projectPath = projectPath; - this.sendToRenderer = sendToRenderer; - console.log(`[AutoMode] Running specific feature: ${featureId}`); + // Register this feature as running + this.runningFeatures.set(featureId, { + abortController: null, + query: null, + projectPath, + sendToRenderer, + }); + try { // Load features - const features = await this.loadFeatures(); + const features = await this.loadFeatures(projectPath); const feature = features.find((f) => f.id === featureId); if (!feature) { @@ -95,25 +103,24 @@ class AutoModeService { } console.log(`[AutoMode] Running feature: ${feature.description}`); - this.currentFeatureId = feature.id; // Update feature status to in_progress - await this.updateFeatureStatus(featureId, "in_progress"); + await this.updateFeatureStatus(featureId, "in_progress", projectPath); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_feature_start", featureId: feature.id, feature: feature, }); // Implement the feature - const result = await this.implementFeature(feature); + const result = await this.implementFeature(feature, projectPath, sendToRenderer); // Update feature status based on result const newStatus = result.passes ? "verified" : "backlog"; - await this.updateFeatureStatus(feature.id, newStatus); + await this.updateFeatureStatus(feature.id, newStatus, projectPath); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_feature_complete", featureId: feature.id, passes: result.passes, @@ -123,17 +130,15 @@ class AutoModeService { return { success: true, passes: result.passes }; } catch (error) { console.error("[AutoMode] Error running feature:", error); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_error", error: error.message, - featureId: this.currentFeatureId, + featureId: featureId, }); throw error; } finally { - this.isRunning = false; - this.currentFeatureId = null; - this.projectPath = null; - this.sendToRenderer = null; + // Clean up this feature's execution + this.runningFeatures.delete(featureId); } } @@ -146,19 +151,24 @@ class AutoModeService { featureId, }); - if (this.isRunning) { - throw new Error("Auto mode is already running"); + // Check if this specific feature is already running + if (this.runningFeatures.has(featureId)) { + throw new Error(`Feature ${featureId} is already running`); } - this.isRunning = true; - this.projectPath = projectPath; - this.sendToRenderer = sendToRenderer; - console.log(`[AutoMode] Verifying feature: ${featureId}`); + // Register this feature as running + this.runningFeatures.set(featureId, { + abortController: null, + query: null, + projectPath, + sendToRenderer, + }); + try { // Load features - const features = await this.loadFeatures(); + const features = await this.loadFeatures(projectPath); const feature = features.find((f) => f.id === featureId); if (!feature) { @@ -166,22 +176,21 @@ class AutoModeService { } console.log(`[AutoMode] Verifying feature: ${feature.description}`); - this.currentFeatureId = feature.id; - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_feature_start", featureId: feature.id, feature: feature, }); // Verify the feature by running tests - const result = await this.verifyFeatureTests(feature); + const result = await this.verifyFeatureTests(feature, projectPath, sendToRenderer); // Update feature status based on result const newStatus = result.passes ? "verified" : "in_progress"; - await this.updateFeatureStatus(featureId, newStatus); + await this.updateFeatureStatus(featureId, newStatus, projectPath); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_feature_complete", featureId: feature.id, passes: result.passes, @@ -191,92 +200,403 @@ class AutoModeService { return { success: true, passes: result.passes }; } catch (error) { console.error("[AutoMode] Error verifying feature:", error); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_error", error: error.message, - featureId: this.currentFeatureId, + featureId: featureId, }); throw error; } finally { - this.isRunning = false; - this.currentFeatureId = null; - this.projectPath = null; - this.sendToRenderer = null; + // Clean up this feature's execution + this.runningFeatures.delete(featureId); } } + /** + * Resume a feature that has previous context - loads existing context and continues implementation + */ + async resumeFeature({ projectPath, featureId, sendToRenderer }) { + console.log(`[AutoMode] resumeFeature called with:`, { + projectPath, + featureId, + }); + + // Check if this specific feature is already running + if (this.runningFeatures.has(featureId)) { + throw new Error(`Feature ${featureId} is already running`); + } + + console.log(`[AutoMode] Resuming feature: ${featureId}`); + + // Register this feature as running + this.runningFeatures.set(featureId, { + abortController: null, + query: null, + projectPath, + sendToRenderer, + }); + + try { + // Load features + const features = await this.loadFeatures(projectPath); + const feature = features.find((f) => f.id === featureId); + + if (!feature) { + throw new Error(`Feature ${featureId} not found`); + } + + console.log(`[AutoMode] Resuming feature: ${feature.description}`); + + sendToRenderer({ + type: "auto_mode_feature_start", + featureId: feature.id, + feature: feature, + }); + + // Read existing context + const previousContext = await this.readContextFile(projectPath, featureId); + + // Resume implementation with context + const result = await this.resumeFeatureWithContext(feature, projectPath, sendToRenderer, previousContext); + + // If the agent ends early without finishing, automatically re-run + let attempts = 0; + const maxAttempts = 3; + let finalResult = result; + + while (!finalResult.passes && attempts < maxAttempts) { + // Check if feature is still in progress (not verified) + const updatedFeatures = await this.loadFeatures(projectPath); + const updatedFeature = updatedFeatures.find((f) => f.id === featureId); + + if (updatedFeature && updatedFeature.status === "in_progress") { + attempts++; + console.log(`[AutoMode] Feature ended early, auto-retrying (attempt ${attempts}/${maxAttempts})...`); + + // Update context file with retry message + await this.writeToContextFile(projectPath, featureId, + `\n\nšŸ”„ Auto-retry #${attempts} - Continuing implementation...\n\n`); + + sendToRenderer({ + type: "auto_mode_progress", + featureId: feature.id, + content: `\nšŸ”„ Auto-retry #${attempts} - Agent ended early, continuing...\n`, + }); + + // Read updated context + const retryContext = await this.readContextFile(projectPath, featureId); + + // Resume again with full context + finalResult = await this.resumeFeatureWithContext(feature, projectPath, sendToRenderer, retryContext); + } else { + break; + } + } + + // Update feature status based on final result + const newStatus = finalResult.passes ? "verified" : "in_progress"; + await this.updateFeatureStatus(featureId, newStatus, projectPath); + + sendToRenderer({ + type: "auto_mode_feature_complete", + featureId: feature.id, + passes: finalResult.passes, + message: finalResult.message, + }); + + return { success: true, passes: finalResult.passes }; + } catch (error) { + console.error("[AutoMode] Error resuming feature:", error); + sendToRenderer({ + type: "auto_mode_error", + error: error.message, + featureId: featureId, + }); + throw error; + } finally { + // Clean up this feature's execution + this.runningFeatures.delete(featureId); + } + } + + /** + * Read context file for a feature + */ + async readContextFile(projectPath, featureId) { + try { + const contextPath = path.join(projectPath, ".automaker", "context", `${featureId}.md`); + const content = await fs.readFile(contextPath, "utf-8"); + return content; + } catch (error) { + console.log(`[AutoMode] No context file found for ${featureId}`); + return null; + } + } + + /** + * Resume feature implementation with previous context + */ + async resumeFeatureWithContext(feature, projectPath, sendToRenderer, previousContext) { + console.log(`[AutoMode] Resuming with context for: ${feature.description}`); + + // Get the execution context for this feature + const execution = this.runningFeatures.get(feature.id); + if (!execution) { + throw new Error(`Feature ${feature.id} not registered in runningFeatures`); + } + + try { + const resumeMessage = `\nšŸ”„ Resuming implementation for: ${feature.description}\n`; + await this.writeToContextFile(projectPath, feature.id, resumeMessage); + + sendToRenderer({ + type: "auto_mode_phase", + featureId: feature.id, + phase: "action", + message: `Resuming implementation for: ${feature.description}`, + }); + + const abortController = new AbortController(); + execution.abortController = abortController; + + const options = { + model: "claude-opus-4-5-20251101", + systemPrompt: this.getVerificationPrompt(), + maxTurns: 1000, + cwd: projectPath, + allowedTools: ["Read", "Write", "Edit", "Glob", "Grep", "Bash", "WebSearch", "WebFetch"], + permissionMode: "acceptEdits", + sandbox: { + enabled: true, + autoAllowBashIfSandboxed: true, + }, + abortController: abortController, + }; + + // Build prompt with previous context + const prompt = this.buildResumePrompt(feature, previousContext); + + const currentQuery = query({ prompt, options }); + execution.query = currentQuery; + + let responseText = ""; + for await (const msg of currentQuery) { + // Check if this specific feature was aborted + if (!this.runningFeatures.has(feature.id)) break; + + if (msg.type === "assistant" && msg.message?.content) { + for (const block of msg.message.content) { + if (block.type === "text") { + responseText += block.text; + + await this.writeToContextFile(projectPath, feature.id, block.text); + + sendToRenderer({ + type: "auto_mode_progress", + featureId: feature.id, + content: block.text, + }); + } else if (block.type === "tool_use") { + const toolMsg = `\nšŸ”§ Tool: ${block.name}\n`; + await this.writeToContextFile(projectPath, feature.id, toolMsg); + + sendToRenderer({ + type: "auto_mode_tool", + featureId: feature.id, + tool: block.name, + input: block.input, + }); + } + } + } + } + + execution.query = null; + execution.abortController = null; + + // Check if feature was marked as verified + const updatedFeatures = await this.loadFeatures(projectPath); + const updatedFeature = updatedFeatures.find((f) => f.id === feature.id); + const passes = updatedFeature?.status === "verified"; + + const finalMsg = passes + ? "āœ“ Feature successfully verified and completed\n" + : "āš  Feature still in progress - may need additional work\n"; + + await this.writeToContextFile(projectPath, feature.id, finalMsg); + + sendToRenderer({ + type: "auto_mode_progress", + featureId: feature.id, + content: finalMsg, + }); + + return { + passes, + message: responseText.substring(0, 500), + }; + } catch (error) { + if (error instanceof AbortError || error?.name === "AbortError") { + console.log("[AutoMode] Resume aborted"); + if (execution) { + execution.abortController = null; + execution.query = null; + } + return { + passes: false, + message: "Resume aborted", + }; + } + + console.error("[AutoMode] Error resuming feature:", error); + if (execution) { + execution.abortController = null; + execution.query = null; + } + throw error; + } + } + + /** + * Build prompt for resuming feature with previous context + */ + buildResumePrompt(feature, previousContext) { + return `You are resuming work on a feature implementation that was previously started. + +**Current Feature:** + +Category: ${feature.category} +Description: ${feature.description} + +**Steps to Complete:** +${feature.steps.map((step, i) => `${i + 1}. ${step}`).join("\n")} + +**Previous Work Context:** + +${previousContext || "No previous context available - this is a fresh start."} + +**Your Task:** + +Continue where you left off and complete the feature implementation: + +1. Review the previous work context above to understand what has been done +2. Continue implementing the feature according to the description and steps +3. Write Playwright tests to verify the feature works correctly (if not already done) +4. Run the tests and ensure they pass +5. **DELETE the test file(s) you created** - tests are only for immediate verification +6. Update .automaker/feature_list.json to mark this feature as "status": "verified" +7. Commit your changes with git + +**Important Guidelines:** + +- Review what was already done in the previous context +- Don't redo work that's already complete - continue from where it left off +- Focus on completing any remaining tasks +- Write comprehensive Playwright tests if not already done +- Ensure all tests pass before marking as verified +- **CRITICAL: Delete test files after verification** +- Make a git commit when complete + +Begin by assessing what's been done and what remains to be completed.`; + } + /** * Main autonomous loop - picks and implements features */ - async runLoop() { - while (this.isRunning) { + async runLoop(projectPath, sendToRenderer) { + while (this.autoLoopRunning) { + let currentFeatureId = null; try { // Load features from .automaker/feature_list.json - const features = await this.loadFeatures(); + const features = await this.loadFeatures(projectPath); // Find highest priority incomplete feature const nextFeature = this.selectNextFeature(features); if (!nextFeature) { console.log("[AutoMode] No more features to implement"); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_complete", message: "All features completed!", }); break; } - console.log(`[AutoMode] Selected feature: ${nextFeature.description}`); - this.currentFeatureId = nextFeature.id; + currentFeatureId = nextFeature.id; - this.sendToRenderer({ + // Skip if this feature is already running (via manual trigger) + if (this.runningFeatures.has(currentFeatureId)) { + console.log(`[AutoMode] Skipping ${currentFeatureId} - already running`); + await this.sleep(3000); + continue; + } + + console.log(`[AutoMode] Selected feature: ${nextFeature.description}`); + + sendToRenderer({ type: "auto_mode_feature_start", featureId: nextFeature.id, feature: nextFeature, }); + // Register this feature as running + this.runningFeatures.set(currentFeatureId, { + abortController: null, + query: null, + projectPath, + sendToRenderer, + }); + // Implement the feature - const result = await this.implementFeature(nextFeature); + const result = await this.implementFeature(nextFeature, projectPath, sendToRenderer); // Update feature status based on result const newStatus = result.passes ? "verified" : "backlog"; - await this.updateFeatureStatus(nextFeature.id, newStatus); + await this.updateFeatureStatus(nextFeature.id, newStatus, projectPath); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_feature_complete", featureId: nextFeature.id, passes: result.passes, message: result.message, }); + // Clean up + this.runningFeatures.delete(currentFeatureId); + // Small delay before next feature - if (this.isRunning) { + if (this.autoLoopRunning) { await this.sleep(3000); } } catch (error) { console.error("[AutoMode] Error in loop iteration:", error); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_error", error: error.message, - featureId: this.currentFeatureId, + featureId: currentFeatureId, }); + // Clean up on error + if (currentFeatureId) { + this.runningFeatures.delete(currentFeatureId); + } + // Wait before retrying await this.sleep(5000); } } console.log("[AutoMode] Loop ended"); - this.isRunning = false; + this.autoLoopRunning = false; } /** * Load features from .automaker/feature_list.json */ - async loadFeatures() { + async loadFeatures(projectPath) { const featuresPath = path.join( - this.projectPath, + projectPath, ".automaker", "feature_list.json" ); @@ -308,11 +628,11 @@ class AutoModeService { /** * Write output to feature context file */ - async writeToContextFile(featureId, content) { - if (!this.projectPath) return; + async writeToContextFile(projectPath, featureId, content) { + if (!projectPath) return; try { - const contextDir = path.join(this.projectPath, ".automaker", "context"); + const contextDir = path.join(projectPath, ".automaker", "context"); // Ensure directory exists try { @@ -339,17 +659,23 @@ class AutoModeService { * Implement a single feature using Claude Agent SDK * Uses a Plan-Act-Verify loop with detailed phase logging */ - async implementFeature(feature) { + async implementFeature(feature, projectPath, sendToRenderer) { console.log(`[AutoMode] Implementing: ${feature.description}`); + // Get the execution context for this feature + const execution = this.runningFeatures.get(feature.id); + if (!execution) { + throw new Error(`Feature ${feature.id} not registered in runningFeatures`); + } + try { // ======================================== // PHASE 1: PLANNING // ======================================== const planningMessage = `šŸ“‹ Planning implementation for: ${feature.description}\n`; - await this.writeToContextFile(feature.id, planningMessage); + await this.writeToContextFile(projectPath, feature.id, planningMessage); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_phase", featureId: feature.id, phase: "planning", @@ -357,14 +683,15 @@ class AutoModeService { }); console.log(`[AutoMode] Phase: PLANNING for ${feature.description}`); - this.abortController = new AbortController(); + const abortController = new AbortController(); + execution.abortController = abortController; // Configure options for the SDK query const options = { model: "claude-opus-4-5-20251101", systemPrompt: this.getCodingPrompt(), - maxTurns: 30, - cwd: this.projectPath, + maxTurns: 1000, + cwd: projectPath, allowedTools: [ "Read", "Write", @@ -380,14 +707,14 @@ class AutoModeService { enabled: true, autoAllowBashIfSandboxed: true, }, - abortController: this.abortController, + abortController: abortController, }; // Build the prompt for this specific feature const prompt = this.buildFeaturePrompt(feature); // Planning: Analyze the codebase and create implementation plan - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_progress", featureId: feature.id, content: @@ -401,9 +728,9 @@ class AutoModeService { // PHASE 2: ACTION // ======================================== const actionMessage = `āš” Executing implementation for: ${feature.description}\n`; - await this.writeToContextFile(feature.id, actionMessage); + await this.writeToContextFile(projectPath, feature.id, actionMessage); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_phase", featureId: feature.id, phase: "action", @@ -412,13 +739,15 @@ class AutoModeService { console.log(`[AutoMode] Phase: ACTION for ${feature.description}`); // Send query - this.currentQuery = query({ prompt, options }); + const currentQuery = query({ prompt, options }); + execution.query = currentQuery; // Stream responses let responseText = ""; let hasStartedToolUse = false; - for await (const msg of this.currentQuery) { - if (!this.isRunning) break; + for await (const msg of currentQuery) { + // Check if this specific feature was aborted + if (!this.runningFeatures.has(feature.id)) break; if (msg.type === "assistant" && msg.message?.content) { for (const block of msg.message.content) { @@ -426,10 +755,10 @@ class AutoModeService { responseText += block.text; // Write to context file - await this.writeToContextFile(feature.id, block.text); + await this.writeToContextFile(projectPath, feature.id, block.text); // Stream progress to renderer - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_progress", featureId: feature.id, content: block.text, @@ -439,8 +768,8 @@ class AutoModeService { if (!hasStartedToolUse) { hasStartedToolUse = true; const startMsg = "Starting code implementation...\n"; - await this.writeToContextFile(feature.id, startMsg); - this.sendToRenderer({ + await this.writeToContextFile(projectPath, feature.id, startMsg); + sendToRenderer({ type: "auto_mode_progress", featureId: feature.id, content: startMsg, @@ -449,10 +778,10 @@ class AutoModeService { // Write tool use to context file const toolMsg = `\nšŸ”§ Tool: ${block.name}\n`; - await this.writeToContextFile(feature.id, toolMsg); + await this.writeToContextFile(projectPath, feature.id, toolMsg); // Notify about tool use - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_tool", featureId: feature.id, tool: block.name, @@ -463,16 +792,16 @@ class AutoModeService { } } - this.currentQuery = null; - this.abortController = null; + execution.query = null; + execution.abortController = null; // ======================================== // PHASE 3: VERIFICATION // ======================================== const verificationMessage = `āœ… Verifying implementation for: ${feature.description}\n`; - await this.writeToContextFile(feature.id, verificationMessage); + await this.writeToContextFile(projectPath, feature.id, verificationMessage); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_phase", featureId: feature.id, phase: "verification", @@ -482,15 +811,15 @@ class AutoModeService { const checkingMsg = "Verifying implementation and checking test results...\n"; - await this.writeToContextFile(feature.id, checkingMsg); - this.sendToRenderer({ + await this.writeToContextFile(projectPath, feature.id, checkingMsg); + sendToRenderer({ type: "auto_mode_progress", featureId: feature.id, content: checkingMsg, }); // Re-load features to check if it was marked as verified - const updatedFeatures = await this.loadFeatures(); + const updatedFeatures = await this.loadFeatures(projectPath); const updatedFeature = updatedFeatures.find((f) => f.id === feature.id); const passes = updatedFeature?.status === "verified"; @@ -499,8 +828,8 @@ class AutoModeService { ? "āœ“ Verification successful: All tests passed\n" : "āœ— Verification: Tests need attention\n"; - await this.writeToContextFile(feature.id, resultMsg); - this.sendToRenderer({ + await this.writeToContextFile(projectPath, feature.id, resultMsg); + sendToRenderer({ type: "auto_mode_progress", featureId: feature.id, content: resultMsg, @@ -513,8 +842,10 @@ class AutoModeService { } catch (error) { if (error instanceof AbortError || error?.name === "AbortError") { console.log("[AutoMode] Feature run aborted"); - this.abortController = null; - this.currentQuery = null; + if (execution) { + execution.abortController = null; + execution.query = null; + } return { passes: false, message: "Auto mode aborted", @@ -524,8 +855,10 @@ class AutoModeService { console.error("[AutoMode] Error implementing feature:", error); // Clean up - this.abortController = null; - this.currentQuery = null; + if (execution) { + execution.abortController = null; + execution.query = null; + } throw error; } @@ -534,8 +867,8 @@ class AutoModeService { /** * Update feature status in .automaker/feature_list.json */ - async updateFeatureStatus(featureId, status) { - const features = await this.loadFeatures(); + async updateFeatureStatus(featureId, status, projectPath) { + const features = await this.loadFeatures(projectPath); const feature = features.find((f) => f.id === featureId); if (!feature) { @@ -548,7 +881,7 @@ class AutoModeService { // Save back to file const featuresPath = path.join( - this.projectPath, + projectPath, ".automaker", "feature_list.json" ); @@ -567,71 +900,80 @@ class AutoModeService { /** * Verify feature tests (runs tests and checks if they pass) */ - async verifyFeatureTests(feature) { + async verifyFeatureTests(feature, projectPath, sendToRenderer) { console.log(`[AutoMode] Verifying tests for: ${feature.description}`); + // Get the execution context for this feature + const execution = this.runningFeatures.get(feature.id); + if (!execution) { + throw new Error(`Feature ${feature.id} not registered in runningFeatures`); + } + try { const verifyMsg = `\nāœ… Verifying tests for: ${feature.description}\n`; - await this.writeToContextFile(feature.id, verifyMsg); + await this.writeToContextFile(projectPath, feature.id, verifyMsg); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_phase", featureId: feature.id, phase: "verification", message: `Verifying tests for: ${feature.description}`, }); - this.abortController = new AbortController(); + const abortController = new AbortController(); + execution.abortController = abortController; const options = { model: "claude-opus-4-5-20251101", systemPrompt: this.getVerificationPrompt(), - maxTurns: 15, - cwd: this.projectPath, + maxTurns: 1000, + cwd: projectPath, allowedTools: ["Read", "Write", "Edit", "Glob", "Grep", "Bash"], permissionMode: "acceptEdits", sandbox: { enabled: true, autoAllowBashIfSandboxed: true, }, - abortController: this.abortController, + abortController: abortController, }; const prompt = this.buildVerificationPrompt(feature); const runningTestsMsg = "Running Playwright tests to verify feature implementation...\n"; - await this.writeToContextFile(feature.id, runningTestsMsg); + await this.writeToContextFile(projectPath, feature.id, runningTestsMsg); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_progress", featureId: feature.id, content: runningTestsMsg, }); - this.currentQuery = query({ prompt, options }); + const currentQuery = query({ prompt, options }); + execution.query = currentQuery; let responseText = ""; - for await (const msg of this.currentQuery) { - if (!this.isRunning) break; + for await (const msg of currentQuery) { + // Check if this specific feature was aborted + if (!this.runningFeatures.has(feature.id)) break; if (msg.type === "assistant" && msg.message?.content) { for (const block of msg.message.content) { if (block.type === "text") { responseText += block.text; - await this.writeToContextFile(feature.id, block.text); + await this.writeToContextFile(projectPath, feature.id, block.text); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_progress", featureId: feature.id, content: block.text, }); } else if (block.type === "tool_use") { const toolMsg = `\nšŸ”§ Tool: ${block.name}\n`; - await this.writeToContextFile(feature.id, toolMsg); + await this.writeToContextFile(projectPath, feature.id, toolMsg); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_tool", featureId: feature.id, tool: block.name, @@ -642,11 +984,11 @@ class AutoModeService { } } - this.currentQuery = null; - this.abortController = null; + execution.query = null; + execution.abortController = null; // Re-load features to check if it was marked as verified - const updatedFeatures = await this.loadFeatures(); + const updatedFeatures = await this.loadFeatures(projectPath); const updatedFeature = updatedFeatures.find((f) => f.id === feature.id); const passes = updatedFeature?.status === "verified"; @@ -654,9 +996,9 @@ class AutoModeService { ? "āœ“ Verification successful: All tests passed\n" : "āœ— Tests failed or not all passing - feature remains in progress\n"; - await this.writeToContextFile(feature.id, finalMsg); + await this.writeToContextFile(projectPath, feature.id, finalMsg); - this.sendToRenderer({ + sendToRenderer({ type: "auto_mode_progress", featureId: feature.id, content: finalMsg, @@ -669,8 +1011,10 @@ class AutoModeService { } catch (error) { if (error instanceof AbortError || error?.name === "AbortError") { console.log("[AutoMode] Verification aborted"); - this.abortController = null; - this.currentQuery = null; + if (execution) { + execution.abortController = null; + execution.query = null; + } return { passes: false, message: "Verification aborted", @@ -678,8 +1022,10 @@ class AutoModeService { } console.error("[AutoMode] Error verifying feature:", error); - this.abortController = null; - this.currentQuery = null; + if (execution) { + execution.abortController = null; + execution.query = null; + } throw error; } } @@ -719,6 +1065,22 @@ ${feature.steps.map((step, i) => `${i + 1}. ${step}`).join("\n")} - **CRITICAL: Delete test files after verification** - tests accumulate and become brittle - Make a git commit when complete +**Testing Utilities (CRITICAL):** + +1. **Create/maintain tests/utils.ts** - Add helper functions for finding elements and common test operations +2. **Use utilities in tests** - Import and use helper functions instead of repeating selectors +3. **Add utilities as needed** - When you write a test, if you need a new helper, add it to utils.ts +4. **Update utilities when functionality changes** - If you modify components, update corresponding utilities + +Example utilities to add: +- getByTestId(page, testId) - Find elements by data-testid +- getButtonByText(page, text) - Find buttons by text +- clickElement(page, testId) - Click an element by test ID +- fillForm(page, formData) - Fill form fields +- waitForElement(page, testId) - Wait for element to appear + +This makes future tests easier to write and maintain! + **Test Deletion Policy:** After tests pass, delete them immediately: \`\`\`bash @@ -732,9 +1094,9 @@ Begin by reading the project structure and then implementing the feature.`; * Build the prompt for verifying a specific feature */ buildVerificationPrompt(feature) { - return `You are verifying that a feature implementation is complete and working correctly. + return `You are implementing and verifying a feature until it is complete and working correctly. -**Feature to Verify:** +**Feature to Implement/Verify:** ID: ${feature.id} Category: ${feature.category} @@ -746,18 +1108,29 @@ ${feature.steps.map((step, i) => `${i + 1}. ${step}`).join("\n")} **Your Task:** -1. Read the .automaker/feature_list.json file to see the current status -2. Look for Playwright tests related to this feature -3. Run the Playwright tests for this feature: npx playwright test tests/[feature-name].spec.ts -4. Check if all tests pass -5. If ALL tests pass: +1. Read the project files to understand the current implementation +2. If the feature is not fully implemented, continue implementing it +3. Write or update Playwright tests to verify the feature works correctly +4. Run the Playwright tests: npx playwright test tests/[feature-name].spec.ts +5. Check if all tests pass +6. **If ANY tests fail:** + - Analyze the test failures and error messages + - Fix the implementation code to make the tests pass + - Update test utilities in tests/utils.ts if needed + - Re-run the tests to verify the fixes + - **REPEAT this process until ALL tests pass** + - Keep the feature "status" as "in_progress" in .automaker/feature_list.json +7. **If ALL tests pass:** - **DELETE the test file(s) for this feature** - tests are only for immediate verification - Update .automaker/feature_list.json to set this feature's "status" to "verified" - - Explain what tests passed and that you deleted them -6. If ANY tests fail: - - Keep the feature "status" as "in_progress" in .automaker/feature_list.json - - Explain what tests failed and why -7. Fix the issues until the tests pass again + - Explain what was implemented/fixed and that all tests passed + - Commit your changes with git + +**Testing Utilities:** +- Check if tests/utils.ts exists and is being used +- If utilities are outdated due to functionality changes, update them +- Add new utilities as needed for this feature's tests +- Ensure test utilities stay in sync with code changes **Test Deletion Policy:** After tests pass, delete them immediately: @@ -766,26 +1139,39 @@ rm tests/[feature-name].spec.ts \`\`\` **Important:** +- **CONTINUE IMPLEMENTING until all tests pass** - don't stop at the first failure - Only mark as "verified" if Playwright tests pass - **CRITICAL: Delete test files after they pass** - tests should not accumulate -- Focus on running tests, deleting them, and updating the status accurately -- Be thorough in checking test results +- Update test utilities if functionality changed +- Make a git commit when the feature is complete +- Be thorough and persistent in fixing issues -Begin by reading .automaker/feature_list.json and finding the appropriate tests to run.`; +Begin by reading the project structure and understanding what needs to be implemented or fixed.`; } /** * Get the system prompt for verification agent */ getVerificationPrompt() { - return `You are an AI verification agent focused on testing and validation. + return `You are an AI implementation and verification agent focused on completing features and ensuring they work. Your role is to: +- **Continue implementing features until they are complete** - don't stop at the first failure +- Write or update code to fix failing tests - Run Playwright tests to verify feature implementations +- If tests fail, analyze errors and fix the implementation - If other tests fail, verify if those tests are still accurate or should be updated or deleted -- Continue rerunning tests until all tests pass +- Continue rerunning tests and fixing issues until ALL tests pass - **DELETE test files after successful verification** - tests are only for immediate feature verification - Update feature status to verified in .automaker/feature_list.json after all tests pass +- **Update test utilities (tests/utils.ts) if functionality changed** - keep helpers in sync with code +- Commit working code to git + +**Testing Utilities:** +- Check if tests/utils.ts needs updates based on code changes +- If a component's selectors or behavior changed, update the corresponding utility functions +- Add new utilities as needed for the feature's tests +- Ensure utilities remain accurate and helpful for future tests **Test Deletion Policy:** Tests should NOT accumulate. After a feature is verified: @@ -796,11 +1182,13 @@ This prevents test brittleness as the app changes rapidly. You have access to: - Read and edit files +- Write new code or modify existing code - Run bash commands (especially Playwright tests) - Delete files (rm command) - Analyze test output +- Make git commits -Be accurate and thorough in your verification process. Always delete tests after they pass.`; +**CRITICAL:** Be persistent and thorough - keep iterating on the implementation until all tests pass. Don't give up after the first failure. Always delete tests after they pass and commit your work.`; } /** @@ -812,12 +1200,20 @@ Be accurate and thorough in your verification process. Always delete tests after Your role is to: - Implement features exactly as specified - Write production-quality code -- Create comprehensive Playwright tests +- Create comprehensive Playwright tests using testing utilities - Ensure all tests pass before marking features complete - **DELETE test files after successful verification** - tests are only for immediate feature verification - Commit working code to git - Be thorough and detail-oriented +**Testing Utilities (CRITICAL):** +- **Create and maintain tests/utils.ts** with helper functions for finding elements and common operations +- **Always use utilities in tests** instead of repeating selectors +- **Add new utilities as you write tests** - if you need a helper, add it to utils.ts +- **Update utilities when functionality changes** - keep helpers in sync with code changes + +This makes future tests easier to write and more maintainable! + **Test Deletion Policy:** Tests should NOT accumulate. After a feature is verified: 1. Run the tests to ensure they pass diff --git a/app/electron/main.js b/app/electron/main.js index d5529baa..8e64a38d 100644 --- a/app/electron/main.js +++ b/app/electron/main.js @@ -434,3 +434,40 @@ ipcMain.handle("auto-mode:verify-feature", async (_, { projectPath, featureId }) return { success: false, error: error.message }; } }); + +/** + * Resume a specific feature with previous context + */ +ipcMain.handle("auto-mode:resume-feature", async (_, { projectPath, featureId }) => { + console.log("[IPC] auto-mode:resume-feature called with:", { projectPath, featureId }); + try { + const sendToRenderer = (data) => { + if (mainWindow && !mainWindow.isDestroyed()) { + mainWindow.webContents.send("auto-mode:event", data); + } + }; + + return await autoModeService.resumeFeature({ projectPath, featureId, sendToRenderer }); + } catch (error) { + console.error("[IPC] auto-mode:resume-feature error:", error); + return { success: false, error: error.message }; + } +}); + +/** + * Check if a context file exists for a feature + */ +ipcMain.handle("auto-mode:context-exists", async (_, { projectPath, featureId }) => { + try { + const contextPath = path.join(projectPath, ".automaker", "context", `${featureId}.md`); + try { + await fs.access(contextPath); + return { success: true, exists: true }; + } catch { + return { success: true, exists: false }; + } + } catch (error) { + console.error("[IPC] auto-mode:context-exists error:", error); + return { success: false, error: error.message }; + } +}); diff --git a/app/electron/preload.js b/app/electron/preload.js index c05b8128..885c5f03 100644 --- a/app/electron/preload.js +++ b/app/electron/preload.js @@ -102,6 +102,14 @@ contextBridge.exposeInMainWorld("electronAPI", { verifyFeature: (projectPath, featureId) => ipcRenderer.invoke("auto-mode:verify-feature", { projectPath, featureId }), + // Resume a specific feature with previous context + resumeFeature: (projectPath, featureId) => + ipcRenderer.invoke("auto-mode:resume-feature", { projectPath, featureId }), + + // Check if context file exists for a feature + contextExists: (projectPath, featureId) => + ipcRenderer.invoke("auto-mode:context-exists", { projectPath, featureId }), + // Listen for auto mode events onEvent: (callback) => { const subscription = (_, data) => callback(data); diff --git a/app/src/components/ui/feature-image-upload.tsx b/app/src/components/ui/feature-image-upload.tsx new file mode 100644 index 00000000..46004820 --- /dev/null +++ b/app/src/components/ui/feature-image-upload.tsx @@ -0,0 +1,310 @@ +"use client"; + +import React, { useState, useRef, useCallback } from "react"; +import { cn } from "@/lib/utils"; +import { ImageIcon, X, Upload } from "lucide-react"; + +export interface FeatureImage { + id: string; + data: string; // base64 encoded + mimeType: string; + filename: string; + size: number; +} + +interface FeatureImageUploadProps { + images: FeatureImage[]; + onImagesChange: (images: FeatureImage[]) => void; + maxFiles?: number; + maxFileSize?: number; // in bytes, default 10MB + className?: string; + disabled?: boolean; +} + +const ACCEPTED_IMAGE_TYPES = [ + "image/jpeg", + "image/jpg", + "image/png", + "image/gif", + "image/webp", +]; +const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB + +export function FeatureImageUpload({ + images, + onImagesChange, + maxFiles = 5, + maxFileSize = DEFAULT_MAX_FILE_SIZE, + className, + disabled = false, +}: FeatureImageUploadProps) { + const [isDragOver, setIsDragOver] = useState(false); + const [isProcessing, setIsProcessing] = useState(false); + const fileInputRef = useRef(null); + + const fileToBase64 = (file: File): Promise => { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => { + if (typeof reader.result === "string") { + resolve(reader.result); + } else { + reject(new Error("Failed to read file as base64")); + } + }; + reader.onerror = () => reject(new Error("Failed to read file")); + reader.readAsDataURL(file); + }); + }; + + const processFiles = useCallback( + async (files: FileList) => { + if (disabled || isProcessing) return; + + setIsProcessing(true); + const newImages: FeatureImage[] = []; + const errors: string[] = []; + + for (const file of Array.from(files)) { + // Validate file type + if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) { + errors.push( + `${file.name}: Unsupported file type. Please use JPG, PNG, GIF, or WebP.` + ); + continue; + } + + // Validate file size + if (file.size > maxFileSize) { + const maxSizeMB = maxFileSize / (1024 * 1024); + errors.push( + `${file.name}: File too large. Maximum size is ${maxSizeMB}MB.` + ); + continue; + } + + // Check if we've reached max files + if (newImages.length + images.length >= maxFiles) { + errors.push(`Maximum ${maxFiles} images allowed.`); + break; + } + + try { + const base64 = await fileToBase64(file); + const imageAttachment: FeatureImage = { + id: `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, + data: base64, + mimeType: file.type, + filename: file.name, + size: file.size, + }; + newImages.push(imageAttachment); + } catch (error) { + errors.push(`${file.name}: Failed to process image.`); + } + } + + if (errors.length > 0) { + console.warn("Image upload errors:", errors); + } + + if (newImages.length > 0) { + onImagesChange([...images, ...newImages]); + } + + setIsProcessing(false); + }, + [disabled, isProcessing, images, maxFiles, maxFileSize, onImagesChange] + ); + + const handleDrop = useCallback( + (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragOver(false); + + if (disabled) return; + + const files = e.dataTransfer.files; + if (files.length > 0) { + processFiles(files); + } + }, + [disabled, processFiles] + ); + + const handleDragOver = useCallback( + (e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + if (!disabled) { + setIsDragOver(true); + } + }, + [disabled] + ); + + const handleDragLeave = useCallback((e: React.DragEvent) => { + e.preventDefault(); + e.stopPropagation(); + setIsDragOver(false); + }, []); + + const handleFileSelect = useCallback( + (e: React.ChangeEvent) => { + const files = e.target.files; + if (files && files.length > 0) { + processFiles(files); + } + // Reset the input so the same file can be selected again + if (fileInputRef.current) { + fileInputRef.current.value = ""; + } + }, + [processFiles] + ); + + const handleBrowseClick = useCallback(() => { + if (!disabled && fileInputRef.current) { + fileInputRef.current.click(); + } + }, [disabled]); + + const removeImage = useCallback( + (imageId: string) => { + onImagesChange(images.filter((img) => img.id !== imageId)); + }, + [images, onImagesChange] + ); + + const clearAllImages = useCallback(() => { + onImagesChange([]); + }, [onImagesChange]); + + const formatFileSize = (bytes: number): string => { + if (bytes === 0) return "0 B"; + const k = 1024; + const sizes = ["B", "KB", "MB", "GB"]; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]; + }; + + return ( +
+ {/* Hidden file input */} + + + {/* Drop zone */} +
+
+
+ {isProcessing ? ( + + ) : ( + + )} +
+

+ {isDragOver && !disabled + ? "Drop images here" + : "Click or drag images here"} +

+

+ Up to {maxFiles} images, max{" "} + {Math.round(maxFileSize / (1024 * 1024))}MB each +

+
+
+ + {/* Image previews */} + {images.length > 0 && ( +
+
+

+ {images.length} image{images.length > 1 ? "s" : ""} selected +

+ +
+
+ {images.map((image) => ( +
+ {/* Image thumbnail */} +
+ {image.filename} +
+ {/* Remove button */} + {!disabled && ( + + )} + {/* Filename tooltip on hover */} +
+

+ {image.filename} +

+
+
+ ))} +
+
+ )} +
+ ); +} diff --git a/app/src/components/ui/textarea.tsx b/app/src/components/ui/textarea.tsx new file mode 100644 index 00000000..d99654a1 --- /dev/null +++ b/app/src/components/ui/textarea.tsx @@ -0,0 +1,20 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { + return ( +