SDD Dashboard
Spec-Driven Development pipeline visibility and orchestration for VS Code.
SDD Dashboard brings your entire Spec-Driven Development workflow into a single visual interface. Track ideas, specifications, plans, and work packages through every stage of your agentic coding pipeline - from ideation to review.
Key Features
Development Cycle Tracking
Group your ideas, specs, and work packages into numbered development cycles. Each cycle gets its own collapsible accordion with a sparkline progress bar, pipeline visualization, metrics, and kanban board.
- Automatic cycle detection from NNN-prefixed artifacts (e.g.,
001-user-auth)
- Per-cycle pipeline stage indicators (Ideation, Spec, Plan, Code, Review)
- Cycle/Classic view toggle to switch between grouped and flat layouts
Pipeline Flow Visualization
See where each development cycle sits in the SDD pipeline at a glance. Directional flow with node-and-connector layout highlights active transitions with animated pulse indicators.
- Five pipeline stages: Ideation - Specification - Planning - Implementation - Review
- State-specific icons (check, play, circle) with theme-aware colors
- Active connector highlighting for completed-to-active transitions
Kanban Board
Work packages laid out across five lane columns with priority sorting, progress bars, and one-click agent handoff.
- Lanes: Planned, To Do, Doing, For Review, Done
- Priority-based sorting (P0 first) with colored pill badges
- Card progress bars showing task completion ratio
- Handoff buttons for triggering agent workflows
- Empty column compaction for cleaner layouts
Metrics at a Glance
Three metric cards per cycle and a global summary header give you instant visibility into project health.
- WP Completion: Percentage of work packages in the "done" lane
- Task Progress: Total tasks completed across all WPs
- FR Coverage: Functional requirements covered by tests
- Global Summary: Cycle count, total WPs, overall completion, active cycle indicator
Dependency DAG
Interactive SVG dependency graph with topological sorting and critical path highlighting.
- Kahn's algorithm for topological ordering
- Critical path visualization
- Hover tooltips with WP details
- Click and keyboard navigation
- Circular dependency detection with warning banners
Artifact Tree View
Sidebar explorer for all .sdd/ artifacts with type-specific icons, inline progress, and file decorations.
- Expandable work packages with task children and acceptance criteria sub-nodes
- Task completion indicators (check/circle icons)
- Lane-colored file decoration badges (blue=doing, yellow=for_review, green=done)
- Context menus: Preview, Open in Editor, Copy Path, Reveal in Explorer
WP Drill-Down View
Click any work package to inspect tasks, acceptance criteria, review feedback, and spec compliance.
- SVG circular progress ring
- Expandable task details with acceptance criteria checklists
- Spec compliance summary (checked/total criteria)
- Review verdicts with color-coded badges
Agent Handoff
Automatic detection of lane transitions that suggest the next agent action.
- Pre-fill handoff commands for agent workflows
- Notification mode for non-intrusive suggestions
- Configurable via
sddDashboard.handoffMode
Real-Time Updates
File watcher monitors your .sdd/ directory for changes and instantly updates the dashboard. Debounce interval is configurable.
Getting Started
Prerequisites
- VS Code >= 1.95.0
- A workspace with a
.sdd/ directory containing SDD artifacts
Installation
- Install from the VS Code Marketplace
- Open a workspace with a
.sdd/ directory
- Click the SDD Dashboard icon in the Activity Bar, or open the Command Palette (
Ctrl+Shift+P) and run SDD Dashboard: Open Dashboard
SDD Directory Structure
The extension expects this directory layout:
.sdd/
ideas/ # Ideation briefs (001-feature-name.md)
specs/ # Specifications (001-feature-name.spec.md)
plans/ # Work packages (WP01-feature-name.md, README.md)
docs/ # Living documentation
Each artifact uses YAML frontmatter for metadata (title, status, lane, version, etc.).
Extension Settings
| Setting |
Type |
Default |
Description |
sddDashboard.rootFolder |
string |
.sdd |
Workspace-relative path to the SDD artifacts folder |
sddDashboard.debounceMs |
number |
300 |
File watcher debounce interval in milliseconds (100-5000) |
sddDashboard.defaultView |
string |
kanban |
Default view: kanban or drilldown |
sddDashboard.dashboardView |
string |
cycle |
Dashboard layout: cycle (grouped accordion) or classic (flat kanban) |
sddDashboard.handoffMode |
string |
pre-fill |
Handoff behavior: pre-fill, notification, or disabled |
sddDashboard.showPipelineInStatusBar |
boolean |
true |
Show pipeline stage in the VS Code status bar |
sddDashboard.defaultOpenMode |
string |
preview |
Artifact click behavior: preview (Markdown Preview) or editor (source) |
Commands
| Command |
Description |
| SDD Dashboard: Open Dashboard |
Open the main SDD Dashboard webview |
| SDD Dashboard: Refresh All |
Force refresh all artifact data |
| SDD Dashboard: Open Artifact |
Open an artifact file in the editor |
| SDD Dashboard: Open WP Detail |
Open a work package drill-down view |
| SDD Dashboard: Trigger Handoff |
Manually trigger agent handoff |
| SDD: Open in Editor |
Open artifact source in the text editor |
| SDD: Preview |
Open artifact in Markdown Preview |
| SDD: Open at Line |
Navigate to a specific line in an artifact file |
| SDD: Copy Relative Path |
Copy the workspace-relative path to clipboard |
| SDD: Reveal in Explorer |
Reveal artifact in VS Code's Explorer sidebar |
Accessibility
- Full keyboard navigation with
role="button" semantics on interactive elements
- ARIA landmarks,
tabIndex constraints, and decorative icon hiding
role="progressbar" with aria-valuenow/aria-valuemin/aria-valuemax on all progress indicators:focus-visible outlines for keyboard users- High Contrast theme support with 2px solid borders on cards and interactive elements
prefers-reduced-motion support: all animations and transitions disabled when preferred- Screen reader-only text via
.sr-only utility class
Theme Support
SDD Dashboard integrates with your VS Code theme via CSS custom properties. Fully supports:
- Dark themes (default)
- Light themes
- High Contrast Dark
- High Contrast Light
What is Spec-Driven Development?
Spec-Driven Development (SDD) is a structured methodology for building software with AI coding agents. It enforces a pipeline:
- Ideation - Brainstorm and define the problem
- Specification - Write a detailed, unambiguous spec
- Planning - Decompose the spec into work packages and tasks
- Implementation - Code against the spec with automated agents
- Review - Verify the implementation against the spec
Each stage produces artifacts (markdown files with YAML frontmatter) that live in a .sdd/ directory. This extension visualizes and orchestrates that entire pipeline.
Release Notes
0.3.0
- Nested accordion kanban view with development cycle detection
- Per-cycle pipeline, metrics, kanban, and dependency DAG
- Global summary header with active cycle indicator
- Cycle/Classic view toggle
- Interactive SVG dependency DAG with critical path highlighting
0.2.0
- Pipeline flow visualization with animated active stage
- Metrics overview cards (WP completion, task progress, FR coverage)
- Enhanced kanban with priority sorting and handoff buttons
- Drill-down progress ring with spec compliance summary
- Responsive layout with CSS container queries
- Accessibility and integration test suite
0.1.x
- Core pipeline visualization, kanban board, and drill-down view
- Artifact tree view with task children and acceptance criteria
- File decorations, context menus, and configurable open mode
- Real-time file watching and status bar integration
- Agent handoff detection and notification
See CHANGELOG for the full history.
License
MIT
