A VS Code extension that acts as a real-time GPS for BMAD V6 projects. It monitors workflow artifacts, tracks sprint progress, and recommends next actions — all without leaving the editor.
This repository hosts two BMAD UI surfaces, intentionally side-by-side without a workspace orchestrator:
src/— The VS Code extension documented below (BMAD Dashboard inside the IDE).web/— A standalone Next.js dashboard (MyBMAD) for visualizing BMAD projects from GitHub repositories or local folders, in any browser. Seeweb/README.mdfor its own setup and feature list.
Each subproject keeps its own package.json, lockfile, configs, and tests. Running pnpm install at the root installs only the extension. To work on the web dashboard, cd web && pnpm install separately. Tests, type-check, build, and lint run independently per subproject.
Both subprojects are MIT-licensed.
Auto-activates when the workspace contains a _bmad/ directory. Appears as a custom icon in the Activity Bar.
Header Toolbar
- Help icon — copies
bmad helpto clipboard - Overflow menu (⋮) — lists all available workflow commands with descriptions, plus a manual Refresh option; dismisses on click-outside or ESC
Sprint Progress
- Visual progress bar with done / in-progress / backlog counts
- Project name and completion percentage
Epic List
- Collapsible cards per epic showing status, progress bar, and done/total story counts
- Active epic highlighted (blue left border)
- Done epics hidden by default; toggle to reveal them
- Scrollable container (max 280 px)
- Click epic title → expand/collapse story list
- Shift+Click epic title → open
epics.mdin text editor - Click a story inside the list → open the story markdown file
Active Story Card
- Shows current story's epic/story number, title, task progress bar, subtask count, and status badge
- Progress combines tasks + subtasks
- Click story title → open story file in preview
- Shift+Click story title → open in text editor
Next Action Recommendation
State-machine-driven suggestion with mandatory/optional action kinds:
| Condition | Suggested Action |
|---|---|
| No sprint data | Run Sprint Planning |
| Story in-progress | Continue Story X.Y |
| Story in review | Run Code Review |
| Story ready-for-dev | Start Dev Story X.Y |
| No active story | Create Next Story |
| Epic complete | Run Retrospective |
| All done | Sprint Complete |
Each action has a Play button (execute in terminal) and a Copy button (clipboard).
Other Actions — Secondary workflow buttons that change based on project state (e.g., Correct Course, Create Story).
Planning Artifact Links — Quick links to PRD and Architecture docs. Click opens markdown preview; Shift+Click opens in text editor.
About Section — Displays BMAD version, last-updated date, and installed modules (from manifest.yaml).
A multi-view editor panel (BMAD: Open Editor Panel command) with breadcrumb navigation:
- Dashboard view — mirrors the sidebar dashboard
- Epics Browser — browse epics and drill into story details
- Stories Table & Kanban Board — view all stories in table or kanban layout
- Document Library — file tree browser with markdown rendering, syntax highlighting, and table of contents
- File watcher monitors
_bmad-output/**/*.{yaml,md}with 500 ms debounce - Any change to
sprint-status.yamlor story files triggers a full state recompute and UI refresh
| Setting | Default | Purpose |
|---|---|---|
bmad.outputRoot |
_bmad-output |
Root directory for BMAD output files |
bmad.cliPrefix |
claude |
CLI prefix for terminal commands (e.g., claude, aider, copilot) |
bmad.defaultClickBehavior |
markdown-preview |
Click behavior for doc links: markdown-preview or editor-panel |
bmad.docLibraryPaths |
["planning-artifacts", "implementation-artifacts", "docs"] |
Folders to display in the Document Library |
- Node.js 22+
- pnpm 10.26+ (
corepack enable && corepack prepare pnpm@10.26.2)
The extension uses a dual build system — esbuild for the extension host, Vite for the React webview.
pnpm install # install dependencies
pnpm build # full build (extension + webview)
pnpm build:extension # build extension host only
pnpm build:webview # build webview only
pnpm watch # parallel watch mode for bothTo package as a .vsix:
pnpm vscode:package # produces out/bmad-dashboard-*.vsixRuns in a jsdom environment using @testing-library/react.
pnpm test # run all Vitest tests once
pnpm test:watch # watch mode
pnpm test:coverage # generate coverage report (v8 provider)Runs under @vscode/test-electron for tests that need VS Code APIs.
pnpm test:extension # run extension integration testspnpm lint # ESLint
pnpm typecheck # typecheck both extension and webviewVersioning and releases are fully automated via semantic-release. CI/CD workflows are not yet configured — see below for how to run releases locally.
- Commit analysis —
@semantic-release/commit-analyzerdetermines the next version from Conventional Commits:fix:→ patch bump (1.2.x)feat:→ minor bump (1.x.0)BREAKING CHANGE:/feat!:→ major bump (x.0.0)
- Changelog —
CHANGELOG.mdis updated automatically - Build & package — the extension is built and packaged as a
.vsix - Git commit —
package.jsonandCHANGELOG.mdare committed withchore(release): <version> [skip ci] - GitHub release — a release is created with the
.vsixattached as a downloadable asset
pnpm release:dry # preview what the next release would besrc/
├── extension/ # VS Code extension host (Node.js)
│ ├── extension.ts # main entry point
│ ├── commands/ # command handlers
│ ├── parsers/ # YAML, epic, story file parsers
│ ├── providers/ # webview providers (dashboard, editor panel)
│ └── services/ # BMAD detector, file watcher, state manager, workflows
├── webviews/ # React webview (sandboxed)
│ ├── dashboard/ # sidebar dashboard components
│ └── editor-panel/ # multi-view editor (epics, stories, docs)
└── shared/ # shared types and message protocol
MIT