Visual flow diagrams: top-level pipeline + agent fan-out tree

Scope

Problem

Sessions need a top-level ideation-to-production flow graphic and a tree view…

Sessions need a top-level ideation-to-production flow graphic and a tree view of the implementation phase, so reviewers can see parallel agent fan-out and overall progress at a glance instead of reading prose.

Approach

Ship in v0.2.2 as additive CLI changes only: 'ship subtask add', 'ship task add --agent', and 'deploy' commands, plus CLI-generated inline SVG for a 5-stage pipeline header and an indented implementation tree. Zero-runtime HTML preserved; existing v0.2.x sessions render unchanged.

2026-05-10 02:05 UTC

Constraints

CLI gains two additive commands: 'ship subtask add <parent_id> ...' and a '--…
CLI gains two additive commands: 'ship subtask add <parent_id> ...' and a '--agent <name>' flag on 'ship task add'. Both fields default to undefined; existing v0.2.x sessions render unchanged.
Diagrams render as inline SVG generated by the CLI.
Diagrams render as inline SVG generated by the CLI. No JS, no runtime libraries (Mermaid, D3) in HTML output. Zero-runtime guarantee preserved.
Top-level pipeline graphic shows 5 stages (Idea -> Scope -> Sift -> Ship -> D…
Top-level pipeline graphic shows 5 stages (Idea -> Scope -> Sift -> Ship -> Deployed) with current stage highlighted.
Pipeline 'Deployed' marker requires a new additive 'vibesift deploy <slug>' c…
Pipeline 'Deployed' marker requires a new additive 'vibesift deploy <slug>' command (sets deployedAt timestamp; does not advance phase).
Implementation tree view renders as inline SVG: parent tasks, subtasks indent…
Implementation tree view renders as inline SVG: parent tasks, subtasks indented, agent labels inline. Must be readable at 375px viewport (mobile).
Target v0.2.2 release.
Target v0.2.2 release. Additive only, backwards-compatible with existing sessions.

Sift

Options considered

Pipeline orientation: horizontal SVG pill-bar with arrows between 5 stages (l…
Pipeline orientation: horizontal SVG pill-bar with arrows between 5 stages (looks 'pipeline-y'; mobile at 375px is tight - 'Deployed' label may need abbreviation or smaller font)
Pipeline orientation: vertical SVG stack of 5 stages (mobile-native; less rec…
Pipeline orientation: vertical SVG stack of 5 stages (mobile-native; less recognizably a 'pipeline')
Tree style: inline SVG with horizontal indented boxes + L-shaped connectors (…
Tree style: inline SVG with horizontal indented boxes + L-shaped connectors (file-explorer feel, naturally narrow)
Tree style: inline SVG top-down org-chart (visually impressive; needs horizon…
Tree style: inline SVG top-down org-chart (visually impressive; needs horizontal scroll on narrow screens)
Schema: add 'parent_id' field on flat task array (simple to render, easy to q…
Schema: add 'parent_id' field on flat task array (simple to render, easy to query)
Schema: nested 'subtasks' array on each task (preserves hierarchy structurall…
Schema: nested 'subtasks' array on each task (preserves hierarchy structurally, requires recursion)

Chose

Pipeline = horizontal SVG pill-bar with media-query font scale for mobile. Tree = inline SVG with indented boxes and L-shaped connectors. Schema = optional 'parent_id' field on flat tasks array (with optional 'agent' field per task).

Horizontal pipeline preserves left-to-right time metaphor that signals 'flow'…

Horizontal pipeline preserves left-to-right time metaphor that signals 'flow' at a glance; 5 pills + arrows fit at 375px with a 10px label font. Indented-boxes tree scales to any depth without horizontal overflow on mobile and uses the file-explorer mental model (familiar to technical readers). parent_id on flat tasks adds one optional field rather than restructuring; preserves existing iteration and matches vibesift's flat-typed-records state pattern.

2026-05-10 02:07 UTC

Ship

Tasks

✓ Schema: add optional parent_id and agent fields to task records; migrate existing sessions safely (no-op if absent)
✓ CLI: add 'ship subtask add <parent_id> ...', '--agent' flag on 'ship task add', and 'deploy <slug>' commands
✓ SVG pipeline generator: 5-stage horizontal pill-bar with current-stage highlight + arrows
✓ SVG tree generator: indented boxes with L-shaped connectors; renders task->subtask hierarchy + agent labels
✓ HTML template: wire pipeline SVG above session title; wire tree SVG into ship phase block
✓ CSS: responsive font-size scale on pipeline labels for <600px viewport (inline <style>, no media-query JS)
✓ Tests: schema migration; new CLI commands; SVG output snapshots for known states
✓ Release: bump 0.2.1->0.2.2, CHANGELOG, README + SKILL.md additions, PR, tag, npm publish

Shipped 2026-05-10 02:34 UTC.

Decision log

Scope Ship in v0.2.2 as additive CLI changes only: 'ship subtask add', 'ship task add --agent', and 'deploy' commands, plus CLI-generated inline SVG for a 5-stage pipeline header and an indented implementation tree. Zero-runtime HTML preserved; existing v0.2.x sessions render unchanged. 2026-05-10 02:05 UTC
Sift Pipeline = horizontal SVG pill-bar with media-query font scale for mobile. Tree = inline SVG with indented boxes and L-shaped connectors. Schema = optional 'parent_id' field on flat tasks array (with optional 'agent' field per task). 2026-05-10 02:07 UTC
Ship v0.2.2 ready for review on PR #24. Tag + npm publish gated on owner approval — all build, test, and docs work landed; CI must go green before merge. 2026-05-10 02:34 UTC