This tutorial was AI-generated and is being fleshed out. Content may be incomplete or change.

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.

Four Visualization Modes

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

1. Chains View

[SCREENSHOT: web-chains-view.png]
The Chains view showing connected decision flows

The default 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

2. Timeline View

[SCREENSHOT: web-timeline-view.png]
The Timeline view with type filters and search

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

Features:

Best for: Chronological exploration, finding recent work

3. Graph View

[SCREENSHOT: web-graph-view.png]
The Graph view showing nodes and edges as a network

An interactive force-directed graph visualization.

Features:

Best for: Seeing the overall structure, finding clusters

4. DAG View

[SCREENSHOT: web-dag-view.png]
The DAG view showing hierarchical decision flow

A hierarchical directed acyclic graph view that emphasizes parent-child relationships.

Best for: Seeing decision hierarchies, understanding flow from goals to outcomes

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.

[SCREENSHOT: web-branch-filter.png]
The web viewer with branch filter dropdown active

Git History Integration

The Timeline and DAG views can show git commits alongside decision nodes. To enable this:

# Generate git history JSON
$ git log --pretty=format:'{"hash":"%H","short":"%h","message":"%s","date":"%aI"}' \
    | head -100 > docs/git-history.json

# Then sync the graph
$ deciduous sync

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

Feature Local (deciduous serve) GitHub Pages
Auto-refresh Every 30 seconds Manual (push to update)
Data source Live from database Static JSON files
Sharing Local only Public URL