singularity-forge/mintlify-docs/guides/visualizer.mdx

---
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.