9d739dfa5d
- All gsdDir/gsdRoot/gsdHome → sfDir/sfRootDir/sfHome - GSDWorkspace* → SFWorkspace* interfaces - bootstrapGsdProject → bootstrapProject - runGSDDoctor → runSFDoctor - GsdClient → SfClient, gsd-client.ts → sf-client.ts - .gsd/ → .sf/ in all tests, docs, docker, native, vscode - Auto-migration: headless detects .gsd/ → renames to .sf/ - Deleted gsd-phase-state.ts backward-compat re-export - Renamed bin/gsd-from-source → bin/sf-from-source - Updated mintlify docs, github workflows, docker configs
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
|
|
|
|
```
|
|
/sf 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:
|
|
|
|
```
|
|
/sf export --html
|
|
```
|
|
|
|
Generates a self-contained HTML file in `.sf/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.
|