The Web Viewer

The web viewer provides visual exploration with multiple visualization modes.

Starting the Server

$ deciduous serve
Starting graph viewer at http://localhost:3000
Auto-refresh enabled (30 second interval)
Press Ctrl+C to stop

Open http://localhost:3000 in your browser.

Visualization Modes

The web viewer has multiple views, accessible via tabs in the navigation:

Story View

A narrative timeline of your project's development, showing key decisions and milestones in chronological order. Best for understanding the "why" behind your codebase.

DAG View (Default)

The default view. Shows a hierarchical directed acyclic graph with goal chains. By default, shows the 5 most recently active goal chains.

Features:

• Expand/collapse to show more or fewer chains
• Click nodes to see full details
• Visual hierarchy from goals to outcomes

Best for: Understanding decision hierarchies and goal-to-outcome flow

Chains View

Organizes nodes into decision chains. Chains are computed by following edges from root goals through decisions to outcomes.

Best for: Seeing the logical flow of decisions

Timeline View

A chronological list of all nodes, similar to the TUI but with clickable interactions.

Features:

• Filter by node type
• Filter by branch (dropdown in stats bar)
• Search by title
• Click to expand details
• Git commits interleaved (if git-history.json exists)

Best for: Chronological exploration, finding recent work

Graph View

An interactive force-directed graph visualization.

Features:

• Drag nodes to reposition
• Zoom and pan
• Click nodes to highlight connections
• Color-coded by node type

Best for: Seeing the overall structure, finding clusters

Branch Filtering

In the stats bar at the top, there's a branch dropdown. Select a branch to filter all views to show only nodes from that branch. This is useful when working on feature branches to focus on relevant decisions.

Git History Integration

The Timeline and DAG views can show git commits alongside decision nodes. When you run deciduous sync, it automatically exports git history for commits linked to nodes:

$ deciduous sync
Exported graph to docs/graph-data.json
  127 nodes, 98 edges
Exported git-history.json (42 commits)

Nodes linked to commits (using --commit HEAD) will show the commit details in both the web viewer and TUI.

Deploying to GitHub Pages

The docs/ directory is ready for GitHub Pages deployment:

1. Run deciduous sync to export graph to JSON
2. Push to GitHub
3. Go to Settings > Pages
4. Set source to Deploy from branch
5. Select branch and /docs folder

Your graph will be live at https://<username>.github.io/<repo>/

Local vs GitHub Pages