FE-1509: Add the notebook view's data model and layout foundations

[kube]

🌟 What is the purpose of this PR?

First data layer of the Notebook view stack, stacked on #9429: the pure projections the view renders from. No UI changes — nothing here is reachable until the next layer lands.

🔗 Related links

• FE-1509 (internal)

🔍 What does this change?

• notebook-model: projects an SDCPN into a flat cell list and a single dependency-edge index covering all five entity kinds; both gutter directions derive from the same edges so they cannot disagree. Parameter usage is a word-boundary text match against transition and equation code.
• notebook-order: topological cell ordering that inlines each type, equation and parameter just before its first user, without ever dropping a cell.
• net-graph-layout: a cut-down Sugiyama layered layout (DFS cycle-breaking, longest-path layering, barycentre ordering) plus a focus mode that re-layers by hop distance from one node, with unreachable components keeping their own layered band.
• The notebook layer's architecture-docs README.

The structural analyses (cycles, initial places) are deliberately not here — they arrive above the view in #9431/#9432 for separate review.

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

🛡 What tests cover this?

notebook-model.test.ts (cell projections, connection index, fuzzy match, dependent counts, net graph), notebook-order.test.ts (inlining, unused declarations, never dropping cells), net-graph-layout.test.ts (layering, cycle breaking, focus mode, edge geometry, determinism).

❓ How to test this?

1. npx turbo run test:unit --filter @hashintel/petrinaut

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview	Aug 30, 2026 1:16pm
petrinaut	Ready	Preview	Aug 30, 2026 1:16pm
petrinaut-docs	Ready	Preview	Aug 30, 2026 1:16pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
hashdotdesign-tokens	Ignored	Preview	Aug 30, 2026 1:16pm

[semgrep-code-hashintel]

Semgrep found 1 detect-non-literal-regexp finding:

• libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-model.ts
  • L202 - Triage

RegExp() called with a variableName function argument, this might allow an attacker to cause a Regular Expression Denial-of-Service (ReDoS) within your application as RegExP blocks the main thread. For this reason, it is recommended to use hardcoded regexes instead. If your regex is run on user-controlled input, consider performing input validation or use a regex checking/sanitization library such as https://www.npmjs.com/package/recheck to verify that the regex does not appear vulnerable to ReDoS.

View Dataflow Graph

flowchart LR
    classDef invis fill:white, stroke: none
    classDef default fill:#e7f5ff, color:#1c7fd6, stroke: none

    subgraph File0["<b>libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-model.ts</b>"]
        direction LR
        %% Source

        subgraph Source
            direction LR

            v0["<a href=https://github.com/hashintel/hash/blob/37fa8fec26558cdaa52191e602ef3fc9894682eb/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-model.ts#L197 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 197] variableName</a>"]
        end
        %% Intermediate

        subgraph Traces0[Traces]
            direction TB

            v2["<a href=https://github.com/hashintel/hash/blob/37fa8fec26558cdaa52191e602ef3fc9894682eb/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-model.ts#L197 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 197] variableName</a>"]

            v3["<a href=https://github.com/hashintel/hash/blob/37fa8fec26558cdaa52191e602ef3fc9894682eb/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-model.ts#L202 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 202] escapeRegExp</a>"]

            v4["<a href=https://github.com/hashintel/hash/blob/37fa8fec26558cdaa52191e602ef3fc9894682eb/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-model.ts#L190 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 190] value</a>"]

            v5["<a href=https://github.com/hashintel/hash/blob/37fa8fec26558cdaa52191e602ef3fc9894682eb/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-model.ts#L202 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 202] `</a>"]
        end
            v2 --> v3
            v3 --> v4
            v4 --> v5
        %% Sink

        subgraph Sink
            direction LR

            v1["<a href=https://github.com/hashintel/hash/blob/37fa8fec26558cdaa52191e602ef3fc9894682eb/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-model.ts#L202 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 202] new RegExp(`\\b${escapeRegExp(variableName)}\\b`, &quot;u&quot;)</a>"]
        end
    end
    %% Class Assignment
    Source:::invis
    Sink:::invis

    Traces0:::invis
    File0:::invis

    %% Connections

    Source --> Traces0
    Traces0 --> Sink

Loading

[cursor]

PR Summary

Low Risk
New, unexported view-layer code with no runtime wiring; behavior is covered by unit tests and does not touch auth, persistence, or simulation.

Overview
Introduces the pure, unit-tested foundation for the experimental Notebook view under ui/views/Notebook. Nothing in the app imports it yet; this layer only defines what later UI will render from.

notebook-model projects an active net into notebook cells (all five entity kinds), a shared connection index (arcs, types, equations, and word-boundary parameter references in code), dependent counts, place/transition neighbourhoods for the explorer, fuzzy name search, and a token-flow graph (buildNetGraph) that ignores canvas coordinates.

notebook-order adds topological list ordering: places/transitions follow a supplied flow order while types, equations, and parameters are inlined once before their first user, without dropping unused or disconnected cells.

net-graph-layout implements a layered Sugiyama-style layout (cycle breaking, longest-path layers, barycentre ordering) plus optional focus re-layering, SVG edge paths (including visible same-row cycle returns), and ignores stored x/y positions.

An architecture README documents the split between pure modules and future .tsx views. Vitest coverage accompanies each module.

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

[cursor]

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

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

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