maestro:visual
Render maestro state or debug data as self-contained interactive HTML files. All visualizations support dark/light mode, open in any browser, and require no build step.
MCP Tools
maestro visual -- Maestro State Visualizations
Renders data gathered from maestro services. Requires an active feature.
maestro visual --type plan-graph --feature my-feature --json
maestro visual --type status-dashboard --json # uses active feature
| Type | What it shows |
|------|--------------|
| plan-graph | Mermaid flowchart of task dependencies. Node shapes encode status (pending/claimed/done/blocked/review/revision). |
| status-dashboard | KPI cards (task counts per status), progress bar, runnable/blocked lists, memory + doctrine stats. |
| memory-map | Grid of memory cards color-coded by category, sized by priority. Mermaid pie chart for category distribution. |
| execution-timeline | Timeline of completed tasks with execution insights. Knowledge flow graph. Doctrine effectiveness table. |
| doctrine-network | Mermaid graph of doctrine items connected by shared tags. Effectiveness metrics table. |
maestro debug-visual -- Debug Visualizations
Renders agent-provided structured data. No feature context needed.
maestro debug-visual --type component-tree --title "React Component Hierarchy" --data '{ "nodes": [...] }' --json
| Type | What it shows |
|------|--------------|
| component-tree | Recursive tree with expand/collapse. Error boundaries highlighted. Props viewable. |
| state-flow | Timeline of state mutations with inline JSON diff. Filterable by action. |
| error-cascade | Error tree with caught/uncaught distinction. Collapsible stack traces. |
| network-waterfall | Chrome DevTools-style waterfall of HTTP requests. Color-coded by status. |
| dom-diff | Side-by-side panels with line-by-line diff highlighting. |
| console-timeline | Log entries with severity coloring. Level filter controls. |
CLI Commands
maestro visual plan-graph --feature my-feature
maestro visual status-dashboard
maestro debug-visual component-tree --data '{"nodes":[...]}'
maestro debug-visual network-waterfall --data /path/to/data.json --no-open
When to Use Which Type
- Understanding the plan:
plan-graphshows task dependencies at a glance - Progress check:
status-dashboardgives a quick KPI overview - Knowledge audit:
memory-mapshows what the project remembers - Post-mortem:
execution-timelinetraces what happened across tasks - Process improvement:
doctrine-networkshows which rules are effective - Debugging UI:
component-tree+error-cascadefor React/Vue issues - Debugging state:
state-flowfor tracking down mutation bugs - Debugging network:
network-waterfallfor API timing issues - Visual regression:
dom-difffor expected vs actual markup - Log analysis:
console-timelinefor filtering through log noise
Output
All files are written to ~/.maestro/visuals/ with descriptive filenames. Files auto-rotate at 100 (oldest are pruned). Browser opens automatically unless --no-open or autoOpen: false.
CSS Customization
The visual system uses CSS custom properties for theming. For advanced customization, load the visual-explainer skill which documents the full CSS pattern library (section cards, grid layouts, animations, depth tiers).