render catalog graph at /catalog with Cytoscape.js plus dagre #38

New issue

Closed

opened 2026-05-28 00:06:01 +00:00 by coilysiren · 1 comment

coilysiren commented

2026-05-28 00:06:01 +00:00

Owner

Problem - Mermaid LR with 30+ nodes is unreadable, especially on mobile. The catalog graph deserves a real interactive visualization on coilysiren.me, separate from the in-repo catalog-graph.md Mermaid surface (which stays for agents reading the repo).

Target

New /catalog page on coilysiren.me rendering the dependency graph interactively.

Tech

Cytoscape.js with the dagre layout extension. Purpose-built for DAGs. Supports:

Zoom and pan.
Click a node to highlight ancestors and descendants.
Filter by tier, branch, deployed, org, archived.
Hover for node description.

Pure client-side JS, fed by a JSON file. Static-rendered SVG via graphviz dot is the fallback if Jekyll plus client-JS is problematic.

Data flow

coily exec build-catalog-graph writes data/catalog-graph.json (added in #FJ1) alongside the yaml and md.
Website build syncs the JSON from agentic-os-kai. Same pattern as the daily repo-digests / repo-registry sync workflows already use.
/catalog page is a static HTML shell that fetches the JSON at page load and renders.

Dependencies

Blocked on the schema redesign issue (#FJ1) shipping derived tier and branch plus the JSON artifact. Cytoscape will group by tier for the dagre layout.

Out of scope

Linking nodes through to repo digests, FJ issue counts, or commit feeds. Future iteration.
Mobile-first responsive polish. First pass is desktop-correct; mobile follow-up.

Prior art

personal-dashboard already consumes catalog-graph.yaml, proving the JSON-as-shared-data pattern.

**Problem** - Mermaid LR with 30+ nodes is unreadable, especially on mobile. The catalog graph deserves a real interactive visualization on coilysiren.me, separate from the in-repo `catalog-graph.md` Mermaid surface (which stays for agents reading the repo). ## Target New `/catalog` page on coilysiren.me rendering the dependency graph interactively. ## Tech Cytoscape.js with the `dagre` layout extension. Purpose-built for DAGs. Supports: * Zoom and pan. * Click a node to highlight ancestors and descendants. * Filter by tier, branch, deployed, org, archived. * Hover for node description. Pure client-side JS, fed by a JSON file. Static-rendered SVG via graphviz `dot` is the fallback if Jekyll plus client-JS is problematic. ## Data flow * `coily exec build-catalog-graph` writes `data/catalog-graph.json` (added in #FJ1) alongside the yaml and md. * Website build syncs the JSON from agentic-os-kai. Same pattern as the daily repo-digests / repo-registry sync workflows already use. * `/catalog` page is a static HTML shell that fetches the JSON at page load and renders. ## Dependencies Blocked on the schema redesign issue (#FJ1) shipping derived `tier` and `branch` plus the JSON artifact. Cytoscape will group by `tier` for the dagre layout. ## Out of scope * Linking nodes through to repo digests, FJ issue counts, or commit feeds. Future iteration. * Mobile-first responsive polish. First pass is desktop-correct; mobile follow-up. ## Prior art * personal-dashboard already consumes `catalog-graph.yaml`, proving the JSON-as-shared-data pattern.

coilysiren added the

label

2026-05-30 17:09:33 +00:00

coilysiren commented

2026-06-17 08:24:03 +00:00

Author

Owner

Backlog burndown 2026-06-17: closing low-priority (P3/P4) to bring the open count to a manageable level. Nothing lost — reopen if this resurfaces. Batch tag: burndown-2026-06.

Backlog burndown 2026-06-17: closing low-priority (P3/P4) to bring the open count to a manageable level. Nothing lost — reopen if this resurfaces. Batch tag: `burndown-2026-06`.

coilysiren

2026-06-17 08:24:03 +00:00