workflow.html — The Single Project File

What It Is

One self-contained HTML file per project that tracks everything: plan, tests, feedback. Replaces the old two-file system (plan.html + report.html).

Structure Per Feature

Each feature is a collapsible session block with:

Feature Session
├── Header: badge, title, status (planned → building → verifying → done), task/test counts
├── USE CASES — plain English, written for the PM
│   "As a [role], I open [page] and see [what]. I can [action] which [outcome]."
├── ACCEPTANCE CHECKLIST (interactive)
│   ├── Test blocks grouped by page/flow
│   ├── Each item: checkbox + data-ref (F1-01) + label + comment textarea
│   ├── Unchecking shows comment box + triggers export panel
│   ├── Screenshot proof (embedded, lightbox on click)
│   └── PASS/FAIL/PENDING pills
├── PLAN (collapsible)
│   ├── Design context (picker selections)
│   ├── Field corrections table
│   ├── File map (create/modify/delete)
│   └── Tasks with step checkboxes, code blocks, verify commands
└── FEEDBACK ROUNDS (if any)
    └── R1, R2... gold badges, what PM said → what was fixed → proof

Key Behaviors

Pre-populated Checklist

The /plan command creates the acceptance checklist BEFORE any code is written. Items start as PENDING. After implementation, /verify marks them PASS/FAIL and adds screenshots.

Interactive Feedback

• PM unchecks items that fail → comment textarea appears
• PM adds description of what's wrong
• "Copy to clipboard" generates structured export with [F1-XX] ref codes
• PM pastes into Claude Code → /feedback processes it

Auto-Verification

After completing each task, Claude automatically:

1. Runs tests
2. Captures screenshots
3. Updates checklist items (PASS/FAIL)
4. Embeds screenshot proofs
5. Updates header stats

CSS/JS

All inline, zero dependencies. Key components:

• CSS variables for project branding (--primary, --accent from CLAUDE.md)
• Collapsible sub-sections via classList.toggle
• updateExport() JS scans unchecked items, builds structured text
• openLightbox() for full-screen screenshot viewing
• copyExport() with button feedback ("Copied!")

First Deployment: b2bpaper-app

• URL: https://b2bpaper.xdvu.com/workflow.html
• Feature: F1 Admin Data Browser / CRM
• 4 use cases, 24 acceptance checklist items, 10 tasks (2 done)
• Nginx: location = /workflow.html { alias /path/workflow.html; }