d20d5e8fb5
Add a proper public-facing documentation site using Mintlify with 19 MDX pages covering getting started, auto mode, commands, configuration, and all user-facing features. Move internal/SDK documentation (Pi SDK, TUI, context & hooks, research notes, ADRs) to docs-internal/ since they should not be part of the public documentation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
82 lines
1.9 KiB
Text
82 lines
1.9 KiB
Text
---
|
|
title: "Workflow visualizer"
|
|
description: "Interactive TUI overlay for progress, dependencies, metrics, and timeline."
|
|
---
|
|
|
|
The workflow visualizer is a full-screen TUI overlay with four tabs showing project progress, dependencies, cost metrics, and execution timeline.
|
|
|
|
## Opening
|
|
|
|
```
|
|
/gsd visualize
|
|
```
|
|
|
|
Or configure automatic display after milestone completion:
|
|
|
|
```yaml
|
|
auto_visualize: true
|
|
```
|
|
|
|
## Tabs
|
|
|
|
Switch tabs with `Tab`, `1`-`4`, or arrow keys.
|
|
|
|
### 1. Progress
|
|
|
|
A tree view of milestones, slices, and tasks with completion status:
|
|
|
|
```
|
|
M001: User Management 3/6 tasks ⏳
|
|
✅ S01: Auth module 3/3 tasks
|
|
✅ T01: Core types
|
|
✅ T02: JWT middleware
|
|
✅ T03: Login flow
|
|
⏳ S02: User dashboard 1/2 tasks
|
|
✅ T01: Layout component
|
|
⬜ T02: Profile page
|
|
```
|
|
|
|
### 2. Dependencies
|
|
|
|
ASCII dependency graph showing slice relationships:
|
|
|
|
```
|
|
S01 ──→ S02 ──→ S04
|
|
└───→ S03 ──↗
|
|
```
|
|
|
|
### 3. Metrics
|
|
|
|
Bar charts showing cost and token usage by phase, slice, and model.
|
|
|
|
### 4. Timeline
|
|
|
|
Chronological execution history with unit type, timestamps, duration, model, and token counts.
|
|
|
|
## Controls
|
|
|
|
| Key | Action |
|
|
|-----|--------|
|
|
| `Tab` | Next tab |
|
|
| `Shift+Tab` | Previous tab |
|
|
| `1`-`4` | Jump to tab |
|
|
| `↑`/`↓` | Scroll |
|
|
| `Escape` / `q` | Close |
|
|
|
|
The visualizer refreshes from disk every 2 seconds, staying current alongside a running auto-mode session.
|
|
|
|
## HTML export
|
|
|
|
For shareable reports outside the terminal:
|
|
|
|
```
|
|
/gsd export --html
|
|
```
|
|
|
|
Generates a self-contained HTML file in `.gsd/reports/` with progress tree, dependency graph (SVG), cost/token charts, execution timeline, and changelog. All CSS and JS are inlined — printable to PDF from any browser.
|
|
|
|
```yaml
|
|
auto_report: true # auto-generate after milestone completion (default)
|
|
```
|
|
|
|
An auto-generated `index.html` shows all reports with progression metrics across milestones.
|