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

New issue

Open

opened 2026-05-28 00:06:01 +00:00 by coilysiren · 0 comments

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 added

and removed

labels

2026-05-31 07:01:33 +00:00

No labels

icebox

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

coilysiren/website#38

No description provided.

Rows
Columns