[rayzhou-bit]

A relational view of the project, behind a toggle next to the canvas. Nodes are cards, edges are #[Title](id) references, and tabs are labelled regions rather than nodes — so a tab doesn't become a hub wired to everything it holds.

Deterministic, not force-directed

The layout is a fixed rule, not a physics simulation. Obsidian can use force layout because its notes have no position of their own; here position is already user-authored and meaningful, so a graph that rearranged itself each visit would compete with the canvas rather than complement it. Same project, same picture, every time — there's a test asserting byte-identical output across runs.

It also means no new dependency. package.json is unchanged.

The model

buildCardGraph derives everything fresh from state.project.present, so it can't drift from the cards it describes. Run against the intro project:

nodes 17  edges 6
groups: Start Here(3), Sunken Barrow(4), Bestiary(6), Party(4)

  Cards               → The Sunken Barrow
  1 - The Barrow Door → Goblin
  2 - The Warren      → Goblin
  2 - The Warren      → Goblin Boss
  3 - The Sunken Tomb → Skeleton
  Goblin Boss         → Goblin

Edges are deduped — two mentions of a card is one relationship, not two lines. Self-references and references to deleted cards are dropped; the latter still render as dangling chips on the card itself, but there's no node to draw a line to.

collectRefText is the part that will rot. It has to know every surface a token can live in — freeform blocks, monster notes, note descriptions, note entry descriptions. A field that gains reference support later and isn't added there becomes an edge the graph silently fails to draw. Flagged in the code, with a test per surface.

Cards in no tab get their own group rather than being dropped — they're the easiest to forget you have.

Clicking a node

Dispatches the existing focusCard, so it inherits the whole path already built for reference chips: centre it on the canvas, or open the Library and blink it if it lives on another tab. No new navigation.

Fixes made during review

• The panel sliced the tool menu. A 24px inset cut the 80px ToolMenu down its middle, rendering fr and G slivers against the panel edge. Left inset now clears it, with a backdrop so what's behind reads as behind.
• colors.scss gained fill alongside background-color on each colour key, so one value drives both a DOM swatch and an SVG node. Checked for leakage: fill is inherited, but the Graph's own is the only inline SVG in the codebase, so nothing else is affected.
• Node hit areas and the toggle's z-index were both fixed during the build — a click could otherwise fall through the gap between a node's dot and its label.

Verification

784 tests pass (33 new), build clean. Checked in the browser at 1440×900: 4 groups / 17 nodes / 6 edges matching the model exactly, arrowheads pointing the right way, clicking Goblin closes the graph and lands on the card mid-blink. Both empty states verified visually by temporarily emptying the fixture — no cards, and cards with no references. Mobile is unaffected; the toggle doesn't render there.

🤖 Generated with Claude Code

[github-actions]

Visit the preview URL for this PR (updated for commit 39fbd2b):

https://dmkit-e7e99--pr104-feature-card-graph-duu1nwxd.web.app

_{(expires Tue, 13 Oct 2026 22:07:49 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 310a7f1d940a0f8f9346804f5fc60f8ba2a4f18d}