agent-browser — MUST invoke for manual verification of UI features. Use to navigate the web app, test interactions (drag-and-drop, clicks, form submissions), and verify visual correctness.

Work Procedure

1. Understand the Feature

Read feature description, preconditions, expectedBehavior, verificationSteps
Read docs/legacy/06_最小看板与编辑_UI_方案.md for UI spec
Read .factory/library/architecture.md for component structure
Check existing components and Apollo queries

2. Write Tests First (TDD)

Create component test files BEFORE implementation
Test rendering, user interactions, and GraphQL query/mutation behavior
Use vitest + @testing-library/react where appropriate
Run tests to confirm they FAIL (red phase)

3. Implement

React components following existing patterns
Apollo Client queries/mutations matching the GraphQL schema exactly
Use dnd-kit for drag-and-drop functionality
Responsive CSS (simple, functional — not pixel-perfect)
Follow component structure from UI spec: BoardPage, Column, IssueCard, IssueDetailDrawer, LabelPicker, AssigneePicker, CommentList, CommentComposer

4. Verify Automated

Run tests: cd packages/web && pnpm test --run
Run typecheck: cd packages/web && pnpm typecheck
Run lint: cd packages/web && pnpm lint

5. Verify Interactive (REQUIRED)

Start the API server: cd /Users/chris/workspace/Involute/packages/server && PORT=4200 npx tsx src/index.ts &
Start the web dev server: cd /Users/chris/workspace/Involute/packages/web && PORT=4201 npx vite --port 4201 &
Wait for both to be healthy
Invoke agent-browser skill to test each UI flow:
- Navigate to http://localhost:4201
- Verify the feature works as expected (visual check, interaction test)
- Each flow tested = one interactiveChecks entry
Kill servers after verification: lsof -ti :4200 | xargs kill; lsof -ti :4201 | xargs kill

6. Commit

Stage and commit all changes

Example Handoff

{
  "salientSummary": "Built kanban board with 6 columns, issue cards showing identifier/title/labels/assignee, and drag-and-drop state changes via dnd-kit. Verified via agent-browser: dragged card from Backlog to In Progress, confirmed state persisted after refresh.",
  "whatWasImplemented": "BoardPage component fetching issues grouped by workflow state. Column component rendering IssueCards. DndContext with drag-and-drop between columns triggering issueUpdate mutation. Cards display identifier, title, label chips, and assignee avatar.",
  "whatWasLeftUndone": "",
  "verification": {
    "commandsRun": [
      { "command": "cd packages/web && pnpm test --run", "exitCode": 0, "observation": "8 tests passing" },
      { "command": "cd packages/web && pnpm typecheck", "exitCode": 0, "observation": "No type errors" }
    ],
    "interactiveChecks": [
      { "action": "Navigated to http://localhost:4201, verified 6 columns render (Backlog, Ready, In Progress, In Review, Done, Canceled)", "observed": "All 6 columns visible with correct headers" },
      { "action": "Verified issue cards show identifier 'INV-1', title, labels 'task', assignee 'Admin'", "observed": "Card displays all fields correctly" },
      { "action": "Dragged INV-1 from Backlog to In Progress column", "observed": "Card moved to In Progress, network showed issueUpdate mutation with stateId" },
      { "action": "Refreshed page, checked INV-1 position", "observed": "INV-1 remains in In Progress column — state persisted" }
    ]
  },
  "tests": {
    "added": [
      {
        "file": "packages/web/src/__tests__/BoardPage.test.tsx",
        "cases": [
          { "name": "renders 6 columns", "verifies": "All workflow state columns rendered" },
          { "name": "renders issue cards in correct columns", "verifies": "Cards grouped by state" },
          { "name": "drag triggers state update mutation", "verifies": "issueUpdate called with new stateId" }
        ]
      }
    ]
  },
  "discoveredIssues": []
}

When to Return to Orchestrator

API server not available or returning unexpected errors
GraphQL schema mismatch (query/mutation shape differs from what frontend expects)
Missing API endpoints that the feature depends on
dnd-kit or Apollo Client version incompatibility
agent-browser cannot interact with a critical UI element