feat: implement autocomplete component and enhance server mock functionality

- Introduced a new Autocomplete component for improved user experience in selecting options across various UI components.
- Refactored BranchAutocomplete and CategoryAutocomplete to utilize the new Autocomplete component, streamlining code and enhancing maintainability.
- Updated Playwright configuration to support mock agent functionality during CI/CD, allowing for simulated API interactions without real calls.
- Added comprehensive end-to-end tests for feature lifecycle, ensuring robust validation of the complete feature management process.
- Enhanced auto-mode service to support mock responses, improving testing efficiency and reliability.

apps/app/playwright.config.ts

@@ -1,7 +1,9 @@
 import { defineConfig, devices } from "@playwright/test";
 
 const port = process.env.TEST_PORT || 3007;
+const serverPort = process.env.TEST_SERVER_PORT || 3008;
 const reuseServer = process.env.TEST_REUSE_SERVER === "true";
+const mockAgent = process.env.CI === "true" || process.env.AUTOMAKER_MOCK_AGENT === "true";
 
 export default defineConfig({
   testDir: "./tests",
@@ -25,15 +27,33 @@ export default defineConfig({
   ...(reuseServer
     ? {}
     : {
-        webServer: {
-          command: `npx next dev -p ${port}`,
-          url: `http://localhost:${port}`,
-          reuseExistingServer: !process.env.CI,
-          timeout: 120000,
-          env: {
-            ...process.env,
-            NEXT_PUBLIC_SKIP_SETUP: "true",
+        webServer: [
+          // Backend server - runs with mock agent enabled in CI
+          {
+            command: `cd ../server && npm run dev`,
+            url: `http://localhost:${serverPort}/api/health`,
+            reuseExistingServer: !process.env.CI,
+            timeout: 60000,
+            env: {
+              ...process.env,
+              PORT: String(serverPort),
+              // Enable mock agent in CI to avoid real API calls
+              AUTOMAKER_MOCK_AGENT: mockAgent ? "true" : "false",
+              // Allow access to test directories and common project paths
+              ALLOWED_PROJECT_DIRS: "/Users,/home,/tmp,/var/folders",
+            },
           },
-        },
+          // Frontend Next.js server
+          {
+            command: `npx next dev -p ${port}`,
+            url: `http://localhost:${port}`,
+            reuseExistingServer: !process.env.CI,
+            timeout: 120000,
+            env: {
+              ...process.env,
+              NEXT_PUBLIC_SKIP_SETUP: "true",
+            },
+          },
+        ],
       }),
 });

apps/app/src/components/ui/autocomplete.tsx

@@ -0,0 +1,223 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown, LucideIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export interface AutocompleteOption {
+  value: string;
+  label?: string;
+  badge?: string;
+  isDefault?: boolean;
+}
+
+interface AutocompleteProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: (string | AutocompleteOption)[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  className?: string;
+  disabled?: boolean;
+  icon?: LucideIcon;
+  allowCreate?: boolean;
+  createLabel?: (value: string) => string;
+  "data-testid"?: string;
+  itemTestIdPrefix?: string;
+}
+
+function normalizeOption(opt: string | AutocompleteOption): AutocompleteOption {
+  if (typeof opt === "string") {
+    return { value: opt, label: opt };
+  }
+  return { ...opt, label: opt.label ?? opt.value };
+}
+
+export function Autocomplete({
+  value,
+  onChange,
+  options,
+  placeholder = "Select an option...",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
+  className,
+  disabled = false,
+  icon: Icon,
+  allowCreate = false,
+  createLabel = (v) => `Create "${v}"`,
+  "data-testid": testId,
+  itemTestIdPrefix = "option",
+}: AutocompleteProps) {
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  const [triggerWidth, setTriggerWidth] = React.useState<number>(0);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+
+  const normalizedOptions = React.useMemo(
+    () => options.map(normalizeOption),
+    [options]
+  );
+
+  // Update trigger width when component mounts or value changes
+  React.useEffect(() => {
+    if (triggerRef.current) {
+      const updateWidth = () => {
+        setTriggerWidth(triggerRef.current?.offsetWidth || 0);
+      };
+
+      updateWidth();
+
+      const resizeObserver = new ResizeObserver(updateWidth);
+      resizeObserver.observe(triggerRef.current);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [value]);
+
+  // Filter options based on input
+  const filteredOptions = React.useMemo(() => {
+    if (!inputValue) return normalizedOptions;
+    const lower = inputValue.toLowerCase();
+    return normalizedOptions.filter(
+      (opt) =>
+        opt.value.toLowerCase().includes(lower) ||
+        opt.label?.toLowerCase().includes(lower)
+    );
+  }, [normalizedOptions, inputValue]);
+
+  // Check if user typed a new value that doesn't exist
+  const isNewValue =
+    allowCreate &&
+    inputValue.trim() &&
+    !normalizedOptions.some(
+      (opt) => opt.value.toLowerCase() === inputValue.toLowerCase()
+    );
+
+  // Get display value
+  const displayValue = React.useMemo(() => {
+    if (!value) return null;
+    const found = normalizedOptions.find((opt) => opt.value === value);
+    return found?.label ?? value;
+  }, [value, normalizedOptions]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          ref={triggerRef}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between",
+            Icon && "font-mono text-sm",
+            className
+          )}
+          data-testid={testId}
+        >
+          <span className="flex items-center gap-2 truncate">
+            {Icon && (
+              <Icon className="w-4 h-4 shrink-0 text-muted-foreground" />
+            )}
+            {displayValue || placeholder}
+          </span>
+          <ChevronsUpDown className="opacity-50 shrink-0" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-0"
+        style={{
+          width: Math.max(triggerWidth, 200),
+        }}
+        data-testid={testId ? `${testId}-list` : undefined}
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder={searchPlaceholder}
+            className="h-9"
+            value={inputValue}
+            onValueChange={setInputValue}
+          />
+          <CommandList>
+            <CommandEmpty>
+              {isNewValue ? (
+                <div className="py-2 px-3 text-sm">
+                  Press enter to create{" "}
+                  <code className="bg-muted px-1 rounded">{inputValue}</code>
+                </div>
+              ) : (
+                emptyMessage
+              )}
+            </CommandEmpty>
+            <CommandGroup>
+              {/* Show "Create new" option if typing a new value */}
+              {isNewValue && (
+                <CommandItem
+                  value={inputValue}
+                  onSelect={() => {
+                    onChange(inputValue);
+                    setInputValue("");
+                    setOpen(false);
+                  }}
+                  className="text-[var(--status-success)]"
+                  data-testid={`${itemTestIdPrefix}-create-new`}
+                >
+                  {Icon && <Icon className="w-4 h-4 mr-2" />}
+                  {createLabel(inputValue)}
+                  <span className="ml-auto text-xs text-muted-foreground">
+                    (new)
+                  </span>
+                </CommandItem>
+              )}
+              {filteredOptions.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    onChange(currentValue === value ? "" : currentValue);
+                    setInputValue("");
+                    setOpen(false);
+                  }}
+                  data-testid={`${itemTestIdPrefix}-${option.value.toLowerCase().replace(/[\s/\\]+/g, "-")}`}
+                >
+                  {Icon && <Icon className="w-4 h-4 mr-2" />}
+                  {option.label}
+                  <Check
+                    className={cn(
+                      "ml-auto",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {option.badge && (
+                    <span className="ml-2 text-xs text-muted-foreground">
+                      ({option.badge})
+                    </span>
+                  )}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

apps/app/src/components/ui/branch-autocomplete.tsx

@@ -1,23 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { Check, ChevronsUpDown, GitBranch } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { GitBranch } from "lucide-react";
+import { Autocomplete, AutocompleteOption } from "@/components/ui/autocomplete";
 
 interface BranchAutocompleteProps {
   value: string;
@@ -38,114 +23,31 @@ export function BranchAutocomplete({
   disabled = false,
   "data-testid": testId,
 }: BranchAutocompleteProps) {
-  const [open, setOpen] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState("");
-
   // Always include "main" at the top of suggestions
-  const allBranches = React.useMemo(() => {
+  const branchOptions: AutocompleteOption[] = React.useMemo(() => {
     const branchSet = new Set(["main", ...branches]);
-    return Array.from(branchSet);
+    return Array.from(branchSet).map((branch) => ({
+      value: branch,
+      label: branch,
+      badge: branch === "main" ? "default" : undefined,
+    }));
   }, [branches]);
 
-  // Filter branches based on input
-  const filteredBranches = React.useMemo(() => {
-    if (!inputValue) return allBranches;
-    const lower = inputValue.toLowerCase();
-    return allBranches.filter((b) => b.toLowerCase().includes(lower));
-  }, [allBranches, inputValue]);
-
-  // Check if user typed a new branch name that doesn't exist
-  const isNewBranch =
-    inputValue.trim() &&
-    !allBranches.some((b) => b.toLowerCase() === inputValue.toLowerCase());
-
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled}
-          className={cn("w-full justify-between font-mono text-sm", className)}
-          data-testid={testId}
-        >
-          <span className="flex items-center gap-2 truncate">
-            <GitBranch className="w-4 h-4 shrink-0 text-muted-foreground" />
-            {value || placeholder}
-          </span>
-          <ChevronsUpDown className="opacity-50 shrink-0" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[300px] p-0" data-testid="branch-autocomplete-list">
-        <Command shouldFilter={false}>
-          <CommandInput
-            placeholder="Search or type new branch..."
-            className="h-9"
-            value={inputValue}
-            onValueChange={setInputValue}
-          />
-          <CommandList>
-            <CommandEmpty>
-              {inputValue.trim() ? (
-                <div className="py-2 px-3 text-sm">
-                  Press enter to create{" "}
-                  <code className="bg-muted px-1 rounded">{inputValue}</code>
-                </div>
-              ) : (
-                "No branches found."
-              )}
-            </CommandEmpty>
-            <CommandGroup>
-              {/* Show "Create new" option if typing a new branch name */}
-              {isNewBranch && (
-                <CommandItem
-                  value={inputValue}
-                  onSelect={() => {
-                    onChange(inputValue);
-                    setInputValue("");
-                    setOpen(false);
-                  }}
-                  className="text-[var(--status-success)]"
-                  data-testid="branch-option-create-new"
-                >
-                  <GitBranch className="w-4 h-4 mr-2" />
-                  Create &quot;{inputValue}&quot;
-                  <span className="ml-auto text-xs text-muted-foreground">
-                    (new)
-                  </span>
-                </CommandItem>
-              )}
-              {filteredBranches.map((branch) => (
-                <CommandItem
-                  key={branch}
-                  value={branch}
-                  onSelect={(currentValue) => {
-                    onChange(currentValue);
-                    setInputValue("");
-                    setOpen(false);
-                  }}
-                  data-testid={`branch-option-${branch.replace(/[/\\]/g, "-")}`}
-                >
-                  <GitBranch className="w-4 h-4 mr-2" />
-                  {branch}
-                  <Check
-                    className={cn(
-                      "ml-auto",
-                      value === branch ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                  {branch === "main" && (
-                    <span className="ml-2 text-xs text-muted-foreground">
-                      (default)
-                    </span>
-                  )}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+    <Autocomplete
+      value={value}
+      onChange={onChange}
+      options={branchOptions}
+      placeholder={placeholder}
+      searchPlaceholder="Search or type new branch..."
+      emptyMessage="No branches found."
+      className={className}
+      disabled={disabled}
+      icon={GitBranch}
+      allowCreate
+      createLabel={(v) => `Create "${v}"`}
+      data-testid={testId}
+      itemTestIdPrefix="branch-option"
+    />
   );
 }

apps/app/src/components/ui/category-autocomplete.tsx

@@ -1,23 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Check, ChevronsUpDown } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { Autocomplete } from "@/components/ui/autocomplete";
 
 interface CategoryAutocompleteProps {
   value: string;
@@ -38,81 +22,18 @@ export function CategoryAutocomplete({
   disabled = false,
   "data-testid": testId,
 }: CategoryAutocompleteProps) {
-  const [open, setOpen] = React.useState(false);
-  const [triggerWidth, setTriggerWidth] = React.useState<number>(0);
-  const triggerRef = React.useRef<HTMLButtonElement>(null);
-
-  // Update trigger width when component mounts or value changes
-  React.useEffect(() => {
-    if (triggerRef.current) {
-      const updateWidth = () => {
-        setTriggerWidth(triggerRef.current?.offsetWidth || 0);
-      };
-
-      updateWidth();
-
-      // Listen for resize events to handle responsive behavior
-      const resizeObserver = new ResizeObserver(updateWidth);
-      resizeObserver.observe(triggerRef.current);
-
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [value]);
-
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          ref={triggerRef}
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled}
-          className={cn("w-full justify-between", className)}
-          data-testid={testId}
-        >
-          {value
-            ? suggestions.find((s) => s === value) ?? value
-            : placeholder}
-          <ChevronsUpDown className="opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="p-0"
-        style={{
-          width: Math.max(triggerWidth, 200),
-        }}
-      >
-        <Command>
-          <CommandInput placeholder="Search category..." className="h-9" />
-          <CommandList>
-            <CommandEmpty>No category found.</CommandEmpty>
-            <CommandGroup>
-              {suggestions.map((suggestion) => (
-                <CommandItem
-                  key={suggestion}
-                  value={suggestion}
-                  onSelect={(currentValue) => {
-                    onChange(currentValue === value ? "" : currentValue);
-                    setOpen(false);
-                  }}
-                  data-testid={`category-option-${suggestion.toLowerCase().replace(/\s+/g, "-")}`}
-                >
-                  {suggestion}
-                  <Check
-                    className={cn(
-                      "ml-auto",
-                      value === suggestion ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+    <Autocomplete
+      value={value}
+      onChange={onChange}
+      options={suggestions}
+      placeholder={placeholder}
+      searchPlaceholder="Search category..."
+      emptyMessage="No category found."
+      className={className}
+      disabled={disabled}
+      data-testid={testId}
+      itemTestIdPrefix="category-option"
+    />
   );
 }

apps/app/tests/feature-lifecycle.spec.ts

@@ -0,0 +1,294 @@
+/**
+ * Feature Lifecycle End-to-End Tests
+ *
+ * Tests the complete feature lifecycle flow:
+ * 1. Create a feature in backlog
+ * 2. Drag to in_progress and wait for agent to finish
+ * 3. Verify it moves to waiting_approval (manual review)
+ * 4. Click commit and verify git status shows committed changes
+ * 5. Drag to verified column
+ * 6. Archive (complete) the feature
+ * 7. Open archive modal and restore the feature
+ * 8. Delete the feature
+ *
+ * NOTE: This test uses AUTOMAKER_MOCK_AGENT=true to mock the agent
+ * so it doesn't make real API calls during CI/CD runs.
+ */
+
+import { test, expect } from "@playwright/test";
+import * as fs from "fs";
+import * as path from "path";
+import { exec } from "child_process";
+import { promisify } from "util";
+
+import {
+  waitForNetworkIdle,
+  createTestGitRepo,
+  cleanupTempDir,
+  createTempDirPath,
+  setupProjectWithPath,
+  waitForBoardView,
+  clickAddFeature,
+  fillAddFeatureDialog,
+  confirmAddFeature,
+  dragAndDropWithDndKit,
+} from "./utils";
+
+const execAsync = promisify(exec);
+
+// Create unique temp dir for this test run
+const TEST_TEMP_DIR = createTempDirPath("feature-lifecycle-tests");
+
+interface TestRepo {
+  path: string;
+  cleanup: () => Promise<void>;
+}
+
+// Configure all tests to run serially
+test.describe.configure({ mode: "serial" });
+
+test.describe("Feature Lifecycle Tests", () => {
+  let testRepo: TestRepo;
+  let featureId: string;
+
+  test.beforeAll(async () => {
+    // Create test temp directory
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+  });
+
+  test.beforeEach(async () => {
+    // Create a fresh test repo for each test
+    testRepo = await createTestGitRepo(TEST_TEMP_DIR);
+  });
+
+  test.afterEach(async () => {
+    // Cleanup test repo after each test
+    if (testRepo) {
+      await testRepo.cleanup();
+    }
+  });
+
+  test.afterAll(async () => {
+    // Cleanup temp directory
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test("complete feature lifecycle: create -> in_progress -> waiting_approval -> commit -> verified -> archive -> restore -> delete", async ({
+    page,
+  }) => {
+    // Increase timeout for this comprehensive test
+    test.setTimeout(120000);
+
+    // ==========================================================================
+    // Step 1: Setup and create a feature in backlog
+    // ==========================================================================
+    await setupProjectWithPath(page, testRepo.path);
+    await page.goto("/");
+    await waitForNetworkIdle(page);
+    await waitForBoardView(page);
+
+    // Wait a bit for the UI to fully load
+    await page.waitForTimeout(1000);
+
+    // Click add feature button
+    await clickAddFeature(page);
+
+    // Fill in the feature details - requesting a file with "yellow" content
+    const featureDescription = "Create a file named yellow.txt that contains the text yellow";
+    const descriptionInput = page.locator('[data-testid="add-feature-dialog"] textarea').first();
+    await descriptionInput.fill(featureDescription);
+
+    // Confirm the feature creation
+    await confirmAddFeature(page);
+
+    // Debug: Check the filesystem to see if feature was created
+    const featuresDir = path.join(testRepo.path, ".automaker", "features");
+
+    // Wait for the feature to be created in the filesystem
+    await expect(async () => {
+      const dirs = fs.readdirSync(featuresDir);
+      expect(dirs.length).toBeGreaterThan(0);
+    }).toPass({ timeout: 10000 });
+
+    // Reload to force features to load from filesystem
+    await page.reload();
+    await waitForNetworkIdle(page);
+    await waitForBoardView(page);
+
+    // Wait for the feature card to appear on the board
+    const featureCard = page.getByText(featureDescription).first();
+    await expect(featureCard).toBeVisible({ timeout: 15000 });
+
+    // Get the feature ID from the filesystem
+    const featureDirs = fs.readdirSync(featuresDir);
+    featureId = featureDirs[0];
+
+    // Now get the actual card element by testid
+    const featureCardByTestId = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+    await expect(featureCardByTestId).toBeVisible({ timeout: 10000 });
+
+    // ==========================================================================
+    // Step 2: Drag feature to in_progress and wait for agent to finish
+    // ==========================================================================
+    const dragHandle = page.locator(`[data-testid="drag-handle-${featureId}"]`);
+    const inProgressColumn = page.locator('[data-testid="kanban-column-in_progress"]');
+
+    // Perform the drag and drop using dnd-kit compatible method
+    await dragAndDropWithDndKit(page, dragHandle, inProgressColumn);
+
+    // Wait for the feature to move to in_progress
+    await page.waitForTimeout(500);
+
+    // The mock agent should complete quickly (about 1.3 seconds based on the sleep times)
+    // Wait for the feature to move to waiting_approval (manual review)
+    // The status changes are: in_progress -> waiting_approval after agent completes
+    await expect(async () => {
+      const featureData = JSON.parse(
+        fs.readFileSync(path.join(featuresDir, featureId, "feature.json"), "utf-8")
+      );
+      expect(featureData.status).toBe("waiting_approval");
+    }).toPass({ timeout: 30000 });
+
+    // Refresh page to ensure UI reflects the status change
+    await page.reload();
+    await waitForNetworkIdle(page);
+    await waitForBoardView(page);
+
+    // ==========================================================================
+    // Step 3: Verify feature is in waiting_approval (manual review) column
+    // ==========================================================================
+    const waitingApprovalColumn = page.locator('[data-testid="kanban-column-waiting_approval"]');
+    const cardInWaitingApproval = waitingApprovalColumn.locator(`[data-testid="kanban-card-${featureId}"]`);
+    await expect(cardInWaitingApproval).toBeVisible({ timeout: 10000 });
+
+    // Verify the mock agent created the yellow.txt file
+    const yellowFilePath = path.join(testRepo.path, "yellow.txt");
+    expect(fs.existsSync(yellowFilePath)).toBe(true);
+    const yellowContent = fs.readFileSync(yellowFilePath, "utf-8");
+    expect(yellowContent).toBe("yellow");
+
+    // ==========================================================================
+    // Step 4: Click commit and verify git status shows committed changes
+    // ==========================================================================
+    // The commit button should be visible on the card in waiting_approval
+    const commitButton = page.locator(`[data-testid="commit-${featureId}"]`);
+    await expect(commitButton).toBeVisible({ timeout: 5000 });
+    await commitButton.click();
+
+    // Wait for the commit to process
+    await page.waitForTimeout(2000);
+
+    // Verify git status shows clean (changes committed)
+    const { stdout: gitStatus } = await execAsync("git status --porcelain", {
+      cwd: testRepo.path,
+    });
+    // After commit, the yellow.txt file should be committed, so git status should be clean
+    // (only .automaker directory might have changes)
+    expect(gitStatus.includes("yellow.txt")).toBe(false);
+
+    // Verify the commit exists in git log
+    const { stdout: gitLog } = await execAsync("git log --oneline -1", {
+      cwd: testRepo.path,
+    });
+    expect(gitLog.toLowerCase()).toContain("yellow");
+
+    // ==========================================================================
+    // Step 5: Verify feature moved to verified column after commit
+    // ==========================================================================
+    // Feature should automatically move to verified after commit
+    await page.reload();
+    await waitForNetworkIdle(page);
+    await waitForBoardView(page);
+
+    const verifiedColumn = page.locator('[data-testid="kanban-column-verified"]');
+    const cardInVerified = verifiedColumn.locator(`[data-testid="kanban-card-${featureId}"]`);
+    await expect(cardInVerified).toBeVisible({ timeout: 10000 });
+
+    // ==========================================================================
+    // Step 6: Archive (complete) the feature
+    // ==========================================================================
+    // Click the Complete button on the verified card
+    const completeButton = page.locator(`[data-testid="complete-${featureId}"]`);
+    await expect(completeButton).toBeVisible({ timeout: 5000 });
+    await completeButton.click();
+
+    // Wait for the archive action to complete
+    await page.waitForTimeout(1000);
+
+    // Verify the feature is no longer visible on the board (it's archived)
+    await expect(cardInVerified).not.toBeVisible({ timeout: 5000 });
+
+    // Verify feature status is completed in filesystem
+    const featureData = JSON.parse(
+      fs.readFileSync(path.join(featuresDir, featureId, "feature.json"), "utf-8")
+    );
+    expect(featureData.status).toBe("completed");
+
+    // ==========================================================================
+    // Step 7: Open archive modal and restore the feature
+    // ==========================================================================
+    // Click the completed features button to open the archive modal
+    const completedFeaturesButton = page.locator('[data-testid="completed-features-button"]');
+    await expect(completedFeaturesButton).toBeVisible({ timeout: 5000 });
+    await completedFeaturesButton.click();
+
+    // Wait for the modal to open
+    const completedModal = page.locator('[data-testid="completed-features-modal"]');
+    await expect(completedModal).toBeVisible({ timeout: 5000 });
+
+    // Verify the archived feature is shown in the modal
+    const archivedCard = completedModal.locator(`[data-testid="completed-card-${featureId}"]`);
+    await expect(archivedCard).toBeVisible({ timeout: 5000 });
+
+    // Click the restore button
+    const restoreButton = page.locator(`[data-testid="unarchive-${featureId}"]`);
+    await expect(restoreButton).toBeVisible({ timeout: 5000 });
+    await restoreButton.click();
+
+    // Wait for the restore action to complete
+    await page.waitForTimeout(1000);
+
+    // Close the modal
+    const closeButton = completedModal.locator('button:has-text("Close")');
+    await closeButton.click();
+    await expect(completedModal).not.toBeVisible({ timeout: 5000 });
+
+    // Verify the feature is back in the verified column
+    const restoredCard = verifiedColumn.locator(`[data-testid="kanban-card-${featureId}"]`);
+    await expect(restoredCard).toBeVisible({ timeout: 10000 });
+
+    // Verify feature status is verified in filesystem
+    const restoredFeatureData = JSON.parse(
+      fs.readFileSync(path.join(featuresDir, featureId, "feature.json"), "utf-8")
+    );
+    expect(restoredFeatureData.status).toBe("verified");
+
+    // ==========================================================================
+    // Step 8: Delete the feature and verify it's removed
+    // ==========================================================================
+    // Click the delete button on the verified card
+    const deleteButton = page.locator(`[data-testid="delete-verified-${featureId}"]`);
+    await expect(deleteButton).toBeVisible({ timeout: 5000 });
+    await deleteButton.click();
+
+    // Wait for the confirmation dialog
+    const confirmDialog = page.locator('[data-testid="delete-confirmation-dialog"]');
+    await expect(confirmDialog).toBeVisible({ timeout: 5000 });
+
+    // Click the confirm delete button
+    const confirmDeleteButton = page.locator('[data-testid="confirm-delete-button"]');
+    await confirmDeleteButton.click();
+
+    // Wait for the delete action to complete
+    await page.waitForTimeout(1000);
+
+    // Verify the feature is no longer visible on the board
+    await expect(restoredCard).not.toBeVisible({ timeout: 5000 });
+
+    // Verify the feature directory is deleted from filesystem
+    const featureDirExists = fs.existsSync(path.join(featuresDir, featureId));
+    expect(featureDirExists).toBe(false);
+  });
+});

apps/server/src/services/auto-mode-service.ts

@@ -1156,6 +1156,64 @@ When done, summarize what you implemented and any notes for the developer.`;
     imagePaths?: string[],
     model?: string
   ): Promise<void> {
+    // CI/CD Mock Mode: Return early with mock response when AUTOMAKER_MOCK_AGENT is set
+    // This prevents actual API calls during automated testing
+    if (process.env.AUTOMAKER_MOCK_AGENT === "true") {
+      console.log(`[AutoMode] MOCK MODE: Skipping real agent execution for feature ${featureId}`);
+
+      // Simulate some work being done
+      await this.sleep(500);
+
+      // Emit mock progress events to simulate agent activity
+      this.emitAutoModeEvent("auto_mode_progress", {
+        featureId,
+        content: "Mock agent: Analyzing the codebase...",
+      });
+
+      await this.sleep(300);
+
+      this.emitAutoModeEvent("auto_mode_progress", {
+        featureId,
+        content: "Mock agent: Implementing the feature...",
+      });
+
+      await this.sleep(300);
+
+      // Create a mock file with "yellow" content as requested in the test
+      const mockFilePath = path.join(workDir, "yellow.txt");
+      await fs.writeFile(mockFilePath, "yellow");
+
+      this.emitAutoModeEvent("auto_mode_progress", {
+        featureId,
+        content: "Mock agent: Created yellow.txt file with content 'yellow'",
+      });
+
+      await this.sleep(200);
+
+      // Save mock agent output
+      const configProjectPath = this.config?.projectPath || workDir;
+      const featureDirForOutput = getFeatureDir(configProjectPath, featureId);
+      const outputPath = path.join(featureDirForOutput, "agent-output.md");
+
+      const mockOutput = `# Mock Agent Output
+
+## Summary
+This is a mock agent response for CI/CD testing.
+
+## Changes Made
+- Created \`yellow.txt\` with content "yellow"
+
+## Notes
+This mock response was generated because AUTOMAKER_MOCK_AGENT=true was set.
+`;
+
+      await fs.mkdir(path.dirname(outputPath), { recursive: true });
+      await fs.writeFile(outputPath, mockOutput);
+
+      console.log(`[AutoMode] MOCK MODE: Completed mock execution for feature ${featureId}`);
+      return;
+    }
+
     // Build SDK options using centralized configuration for feature implementation
     const sdkOptions = createAutoModeOptions({
       cwd: workDir,