FE-1509: Add the notebook's whole-net graph explorer

[kube]

🌟 What is the purpose of this PR?

Third layer of the Notebook view stack, stacked on #9407: the whole-net graph explorer on the right of the notebook, with cycle and initial-place markers, selection highlighting, and an animated focus mode.

🔗 Related links

• FE-1509 (internal)

🔍 What does this change?

• A resizable right-hand pane drawing the whole net as a layered flow graph of places (pills, with their token type's colour dot) and transitions (boxes), laid out from the arc structure alone — canvas positions are ignored.
• Selecting a place or transition highlights its dependencies (blue), dependents (orange), and both-direction neighbours (purple); clicking a node selects its cell, revealing its kind in the list if a filter hides it. Cycle members carry tinted dashed rings that light up together on hover, and places needing initial tokens carry a hollow token marker.
• A focus mode re-layers the graph around the selection by hop distance; unreachable components keep their own layered band below. Re-layouts animate FLIP-style: React renders the target once and a write-only requestAnimationFrame loop interpolates node transforms and edge paths before paint, honouring prefers-reduced-motion and the animations setting.
• The notebook is one horizontal worksheet flow (FocusStack): the cell list and the connection lists are sibling members, so ArrowLeft at the lists' edge crosses back into the cell list at its remembered row. The connection lists form a single-column useFocusGrid — vertical arrows walk every row across both sections, the pair is one roving tab stop — remounted per selection so the focus memory never points at a vanished row.
• Below the graph, the selected cell's dependencies and dependents are listed across all five kinds, with a draggable split between graph and lists.

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• does not modify any publishable blocks or libraries, or modifications do not need publishing
  • one patch changeset for the whole stack ships in the top PR

📜 Does this require a change to the docs?

The changes in this PR:

• are in a state where docs changes are not yet required but will be
  • this is tracked in: the user-docs PR at the top of this stack

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

• do not affect the execution graph

⚠️ Known issues

• In focus mode the topological cell order keeps following the default layout; focus is a transient lens on the same net.
• The siphon analysis drops groups overlapping an already-reported one, so an overlapping genuine siphon can go unmarked.

🛡 What tests cover this?

net-graph-animation.test.ts covers the interpolation and layout-signature helpers; the layered and focused layouts are covered by net-graph-layout.test.ts in the layer below. The animation timing and hover behaviour are exercised manually.

❓ How to test this?

1. In the notebook (flag on, see the PR below), select places and transitions and check the graph highlighting and the lists under it.
2. Hover a ↻ badge in the list or a ringed node in the graph; the whole cycle should light up in both.
3. Toggle the bullseye focus button and watch the animated re-layout; toggle it back.
4. Drag the explorer's left edge and the divider above the lists.

📹 Demo

Screenshot pending — to be added before review.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview	Aug 30, 2026 5:03am
petrinaut	Ready	Preview	Aug 30, 2026 5:03am
petrinaut-docs	Ready	Preview	Aug 30, 2026 5:03am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
hashdotdesign-tokens	Ignored	Preview	Aug 30, 2026 5:03am

[cursor]

PR Summary

Low Risk
Notebook UI-only feature behind the experimental view; no auth, persistence, or execution-path changes.

Overview
Adds a resizable right-hand graph explorer to the experimental Notebook view: a layered SVG of the full net (arc-based layout, not canvas coordinates) plus upstream/downstream connection lists for the selected cell.

Selection and navigation tie the explorer to editor selection: places/transitions get blue/orange/purple highlighting for dependencies, dependents, and bidirectional neighbours; clicking graph nodes or list rows selects the matching cell and can reveal filtered-out kinds. Optional focus mode re-layers the diagram around the selected place or transition.

Layout transitions use a new useNetGraphTransition hook that animates node transforms and edge paths via requestAnimationFrame (honouring user animation settings and prefers-reduced-motion), with unit tests for easing/interpolation helpers.

Keyboard focus wraps the notebook in a horizontal FocusStack so the cell list and explorer connection lists share one worksheet flow; list focus resets per selection via remounting.

^{Reviewed by Cursor Bugbot for commit eb454db. Bugbot is set up for automated code reviews on this repo. Configure here.}

[cursor]

Lists resize handle scrolls away

Medium Severity

The connection-lists pane is both the overflowY: auto scroller and the positioned parent of the top ResizeHandle. Absolute children of a scroll box move with the content, so a long list takes the divider off-screen and overflow can clip the handle sitting at a negative top.

Additional Locations (1)

• libs/@hashintel/petrinaut/src/ui/views/Notebook/graph-explorer.tsx#L45-L59

 

^{Reviewed by Cursor Bugbot for commit 35f33ad. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit eb454db. Configure here.}

[cursor]

Graph animation flashes final layout

Medium Severity

The FLIP invert never lands before paint. useLayoutEffect exists so the first node offset and edge path can be written before the browser paints the target layout, but the first drawFrame is only scheduled with requestAnimationFrame, which runs after that paint. React has already committed nodes at their final x/y and edges at the target d, so a focus-mode toggle flashes the finished graph, then jumps back and plays the move. Because layoutNetGraph returns a new object every render and the effect depends on that object, any notebook re-render mid-flight also cancels the frame and restarts the 340ms clock, snapping edges to the target path again.

Additional Locations (1)

• libs/@hashintel/petrinaut/src/ui/views/Notebook/net-graph.tsx#L178-L183

 

^{Reviewed by Cursor Bugbot for commit eb454db. Configure here.}