H-6536: Add /processes page to HASH frontend

[CiaranMn]

🌟 What is the purpose of this PR?

Adds a /processes page to the frontend, linked from the sidebar, which lists:

1. Petri nets persisted in the db and visible to the user
2. Examples from Petrinaut

Also injects a 'back' button into Petrinaut at the start of the title bar, and hides net loading controls (New, Open, Import, Load Examples) from Petrinaut when in HASH.

See demo.

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

📜 Does this require a change to the docs?

The changes in this PR:

• are internal and do not require a docs change

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

The changes in this PR:

• do not affect the execution graph

❓ How to test this?

1. Visit /processes in the preview deployment.

📹 Demo

processes-page.mp4

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview, Comment	May 29, 2026 11:53am
petrinaut	Ready	Preview	May 29, 2026 11:53am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
hashdotdesign-tokens	Ignored	Preview	May 29, 2026 11:53am

[cursor]

PR Summary

Medium Risk
Touches graph create/update flows and a large editor/navigation refactor; Petrinaut API default for hideNetManagementControls changes behavior for hosts that relied on the old implicit default.

Overview
Introduces a Processes hub in the HASH frontend: sidebar link to /processes, a list page with tiles for saved Petri nets and curated @hashintel/petrinaut-core examples, and URL-driven editing at /processes/draft (optional ?example=) and /processes/<uuid>. The old /process single-page editor is removed in favor of this flow.

The editor is refactored to reconcile router view with loaded state: unsaved-change modal on in-app navigation, beforeunload for tab close, and router.replace to the saved UUID after create (with guards so the discard modal does not fire during that transition). In-editor net switching is disabled; list navigation and hideNetManagementControls="except-title" replace Petrinaut’s New/Open/Import/examples. A topBarStart slot adds a back button to /processes.

Petrinaut gains hideNetManagementControls as "all" | "except-title" (omitted = full management UI), a topBarStart slot, and default-on net management for hosts that omit the prop. persistToGraph now returns Promise<EntityId | null>; usePersistedNets is shared for list + editor and exposes loading.

Build wiring adds @hashintel/petrinaut-core to the frontend package and Next transpile list, plus a tsconfig path for examples.

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

[augmentcode]

🤖 Augment PR Summary

Summary: Introduces a new /processes experience in the HASH frontend for browsing and editing Petri-net “processes”, with tighter integration of Petrinaut into the app shell.

Changes:

• Added a new /processes list page that shows persisted Petri nets visible to the user plus curated example nets.
• Added route handling for /processes/draft and /processes/<uuid> via a shared editor page.
• Added tile cards with an SVG Petri-net preview for quick scanning of saved and example processes.
• Refactored persisted-net fetching into a shared usePersistedNets hook used by both list and editor flows.
• Updated sidebar navigation to include a new “Processes” entry.
• Integrated a back button into Petrinaut’s top bar via a new topBarStart slot and hid in-editor net-management controls when embedded in HASH.
• Extended Petrinaut’s hideNetManagementControls API from boolean to a more specific mode ("all" / "except-title").

Technical Notes: Adds Next.js transpilation and workspace dependency for @hashintel/petrinaut-core examples used to seed drafts from ?example=.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. 3 suggestions posted.

Comment augment review to trigger a new review at any time.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 59.04%. Comparing base (a8da2f8) to head (abbaefe).
⚠️ Report is 13 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8785      +/-   ##
==========================================
- Coverage   59.04%   59.04%   -0.01%     
==========================================
  Files        1341     1341              
  Lines      129387   129387              
  Branches     5837     5837              
==========================================
- Hits        76398    76395       -3     
- Misses      52088    52091       +3     
  Partials      901      901              

Flag	Coverage Δ
blockprotocol.type-system	40.84% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[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 fc5e213. Configure here.}

[codspeed-hq]

Merging this PR will not alter performance

✅ 80 untouched benchmarks

---

_{Comparing cm/processes-pages-in-hash (4bd73e6) with main (7808510)¹}

Footnotes

1. No successful run was found on main (e3c93dc) during the generation of this report, so 7808510 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[github-actions]

Benchmark results

@rust/hash-graph-benches – Integrations

policy_resolution_large

Function	Value	Mean	Flame graphs
resolve_policies_for_actor	user: empty, selectivity: high, policies: 2002	$$27.5 \mathrm{ms} \pm 154 \mathrm{μs}\left({\color{gray}-0.174 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$3.51 \mathrm{ms} \pm 26.1 \mathrm{μs}\left({\color{gray}1.33 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 1001	$$13.2 \mathrm{ms} \pm 115 \mathrm{μs}\left({\color{red}7.01 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: high, policies: 3314	$$43.1 \mathrm{ms} \pm 358 \mathrm{μs}\left({\color{gray}0.415 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: low, policies: 1	$$14.5 \mathrm{ms} \pm 124 \mathrm{μs}\left({\color{gray}3.01 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: medium, policies: 1526	$$24.5 \mathrm{ms} \pm 197 \mathrm{μs}\left({\color{gray}1.90 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 2078	$$29.3 \mathrm{ms} \pm 197 \mathrm{μs}\left({\color{gray}2.52 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$3.84 \mathrm{ms} \pm 24.0 \mathrm{μs}\left({\color{gray}1.44 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 1033	$$14.3 \mathrm{ms} \pm 114 \mathrm{μs}\left({\color{red}6.53 \mathrm{\%}}\right) $$	Flame Graph

policy_resolution_medium

Function	Value	Mean	Flame graphs
resolve_policies_for_actor	user: empty, selectivity: high, policies: 102	$$3.81 \mathrm{ms} \pm 21.9 \mathrm{μs}\left({\color{gray}-0.123 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$3.03 \mathrm{ms} \pm 16.9 \mathrm{μs}\left({\color{gray}0.056 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 51	$$3.37 \mathrm{ms} \pm 18.3 \mathrm{μs}\left({\color{gray}-1.210 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: high, policies: 269	$$5.25 \mathrm{ms} \pm 32.8 \mathrm{μs}\left({\color{gray}0.095 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: low, policies: 1	$$3.58 \mathrm{ms} \pm 22.2 \mathrm{μs}\left({\color{gray}0.526 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: medium, policies: 107	$$4.17 \mathrm{ms} \pm 30.3 \mathrm{μs}\left({\color{gray}-0.606 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 133	$$4.50 \mathrm{ms} \pm 30.2 \mathrm{μs}\left({\color{gray}0.501 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$3.48 \mathrm{ms} \pm 22.4 \mathrm{μs}\left({\color{gray}-2.492 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 63	$$4.12 \mathrm{ms} \pm 28.8 \mathrm{μs}\left({\color{gray}0.193 \mathrm{\%}}\right) $$	Flame Graph

policy_resolution_none

Function	Value	Mean	Flame graphs
resolve_policies_for_actor	user: empty, selectivity: high, policies: 2	$$2.65 \mathrm{ms} \pm 16.5 \mathrm{μs}\left({\color{gray}-0.007 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$2.56 \mathrm{ms} \pm 16.2 \mathrm{μs}\left({\color{gray}0.280 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 1	$$2.62 \mathrm{ms} \pm 16.4 \mathrm{μs}\left({\color{gray}-0.068 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 8	$$2.90 \mathrm{ms} \pm 17.6 \mathrm{μs}\left({\color{gray}-0.559 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$2.69 \mathrm{ms} \pm 16.7 \mathrm{μs}\left({\color{gray}0.470 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 3	$$2.88 \mathrm{ms} \pm 17.8 \mathrm{μs}\left({\color{gray}-0.205 \mathrm{\%}}\right) $$	Flame Graph

policy_resolution_small

Function	Value	Mean	Flame graphs
resolve_policies_for_actor	user: empty, selectivity: high, policies: 52	$$3.07 \mathrm{ms} \pm 17.3 \mathrm{μs}\left({\color{gray}0.405 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$2.77 \mathrm{ms} \pm 14.8 \mathrm{μs}\left({\color{gray}-0.421 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 25	$$3.02 \mathrm{ms} \pm 17.4 \mathrm{μs}\left({\color{gray}0.277 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: high, policies: 94	$$3.47 \mathrm{ms} \pm 16.9 \mathrm{μs}\left({\color{gray}0.259 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: low, policies: 1	$$2.97 \mathrm{ms} \pm 14.3 \mathrm{μs}\left({\color{gray}-0.526 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: medium, policies: 26	$$3.32 \mathrm{ms} \pm 19.6 \mathrm{μs}\left({\color{gray}-0.195 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 66	$$3.40 \mathrm{ms} \pm 22.3 \mathrm{μs}\left({\color{gray}-0.492 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$2.98 \mathrm{ms} \pm 17.7 \mathrm{μs}\left({\color{gray}0.440 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 29	$$3.41 \mathrm{ms} \pm 23.3 \mathrm{μs}\left({\color{gray}0.270 \mathrm{\%}}\right) $$	Flame Graph

read_scaling_complete

Function	Value	Mean	Flame graphs
entity_by_id;one_depth	1 entities	$$55.2 \mathrm{ms} \pm 341 \mathrm{μs}\left({\color{gray}-0.154 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	10 entities	$$46.5 \mathrm{ms} \pm 202 \mathrm{μs}\left({\color{gray}0.022 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	25 entities	$$51.0 \mathrm{ms} \pm 255 \mathrm{μs}\left({\color{gray}-0.018 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	5 entities	$$44.9 \mathrm{ms} \pm 222 \mathrm{μs}\left({\color{gray}0.948 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	50 entities	$$63.1 \mathrm{ms} \pm 337 \mathrm{μs}\left({\color{gray}-3.940 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	1 entities	$$63.0 \mathrm{ms} \pm 384 \mathrm{μs}\left({\color{gray}-0.219 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	10 entities	$$56.2 \mathrm{ms} \pm 277 \mathrm{μs}\left({\color{gray}-1.501 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	25 entities	$$105 \mathrm{ms} \pm 500 \mathrm{μs}\left({\color{gray}1.05 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	5 entities	$$46.6 \mathrm{ms} \pm 196 \mathrm{μs}\left({\color{gray}-4.343 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	50 entities	$$297 \mathrm{ms} \pm 1.02 \mathrm{ms}\left({\color{red}8.09 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	1 entities	$$19.2 \mathrm{ms} \pm 112 \mathrm{μs}\left({\color{gray}-3.395 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	10 entities	$$20.3 \mathrm{ms} \pm 119 \mathrm{μs}\left({\color{gray}-0.296 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	25 entities	$$20.9 \mathrm{ms} \pm 119 \mathrm{μs}\left({\color{gray}1.92 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	5 entities	$$19.5 \mathrm{ms} \pm 107 \mathrm{μs}\left({\color{gray}-0.193 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	50 entities	$$26.3 \mathrm{ms} \pm 177 \mathrm{μs}\left({\color{gray}4.64 \mathrm{\%}}\right) $$	Flame Graph

read_scaling_linkless

Function	Value	Mean	Flame graphs
entity_by_id	1 entities	$$19.7 \mathrm{ms} \pm 143 \mathrm{μs}\left({\color{gray}1.34 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	10 entities	$$19.8 \mathrm{ms} \pm 135 \mathrm{μs}\left({\color{gray}1.60 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	100 entities	$$19.7 \mathrm{ms} \pm 142 \mathrm{μs}\left({\color{gray}0.098 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	1000 entities	$$20.8 \mathrm{ms} \pm 110 \mathrm{μs}\left({\color{gray}1.78 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	10000 entities	$$27.5 \mathrm{ms} \pm 216 \mathrm{μs}\left({\color{gray}0.326 \mathrm{\%}}\right) $$	Flame Graph

representative_read_entity

Function	Value	Mean	Flame graphs
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/block/v/1	$$36.0 \mathrm{ms} \pm 287 \mathrm{μs}\left({\color{gray}-2.165 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/book/v/1	$$35.6 \mathrm{ms} \pm 257 \mathrm{μs}\left({\color{gray}3.17 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/building/v/1	$$35.0 \mathrm{ms} \pm 342 \mathrm{μs}\left({\color{gray}-2.824 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/organization/v/1	$$37.0 \mathrm{ms} \pm 298 \mathrm{μs}\left({\color{gray}1.83 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/page/v/2	$$36.0 \mathrm{ms} \pm 272 \mathrm{μs}\left({\color{gray}3.41 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/person/v/1	$$36.3 \mathrm{ms} \pm 306 \mathrm{μs}\left({\color{gray}-0.676 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/playlist/v/1	$$35.3 \mathrm{ms} \pm 302 \mathrm{μs}\left({\color{gray}0.372 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/song/v/1	$$36.6 \mathrm{ms} \pm 316 \mathrm{μs}\left({\color{gray}-0.607 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/uk-address/v/1	$$35.3 \mathrm{ms} \pm 323 \mathrm{μs}\left({\color{gray}-0.013 \mathrm{\%}}\right) $$	Flame Graph

representative_read_entity_type

Function	Value	Mean	Flame graphs
get_entity_type_by_id	Account ID: bf5a9ef5-dc3b-43cf-a291-6210c0321eba	$$8.84 \mathrm{ms} \pm 47.0 \mathrm{μs}\left({\color{gray}0.601 \mathrm{\%}}\right) $$	Flame Graph

representative_read_multiple_entities

Function	Value	Mean	Flame graphs
entity_by_property	traversal_paths=0	0	$$94.7 \mathrm{ms} \pm 535 \mathrm{μs}\left({\color{gray}1.63 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=255	1,resolve_depths=inherit:1;values:255;properties:255;links:127;link_dests:126;type:true	$$150 \mathrm{ms} \pm 571 \mathrm{μs}\left({\color{gray}1.06 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:0;links:0;link_dests:0;type:false	$$102 \mathrm{ms} \pm 577 \mathrm{μs}\left({\color{gray}2.02 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:0;links:1;link_dests:0;type:true	$$113 \mathrm{ms} \pm 615 \mathrm{μs}\left({\color{gray}1.58 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:2;links:1;link_dests:0;type:true	$$121 \mathrm{ms} \pm 646 \mathrm{μs}\left({\color{gray}1.69 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:2;properties:2;links:1;link_dests:0;type:true	$$129 \mathrm{ms} \pm 644 \mathrm{μs}\left({\color{gray}1.91 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=0	0	$$105 \mathrm{ms} \pm 529 \mathrm{μs}\left({\color{gray}1.59 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=255	1,resolve_depths=inherit:1;values:255;properties:255;links:127;link_dests:126;type:true	$$136 \mathrm{ms} \pm 616 \mathrm{μs}\left({\color{gray}1.63 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:0;links:0;link_dests:0;type:false	$$114 \mathrm{ms} \pm 601 \mathrm{μs}\left({\color{gray}2.75 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:0;links:1;link_dests:0;type:true	$$123 \mathrm{ms} \pm 642 \mathrm{μs}\left({\color{gray}2.37 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:2;links:1;link_dests:0;type:true	$$125 \mathrm{ms} \pm 639 \mathrm{μs}\left({\color{gray}2.17 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:2;properties:2;links:1;link_dests:0;type:true	$$126 \mathrm{ms} \pm 672 \mathrm{μs}\left({\color{gray}2.50 \mathrm{\%}}\right) $$

scenarios

Function	Value	Mean	Flame graphs
full_test	query-limited	$$178 \mathrm{ms} \pm 1.34 \mathrm{ms}\left({\color{red}22.0 \mathrm{\%}}\right) $$	Flame Graph
full_test	query-unlimited	$$148 \mathrm{ms} \pm 656 \mathrm{μs}\left({\color{red}5.74 \mathrm{\%}}\right) $$	Flame Graph
linked_queries	query-limited	$$41.0 \mathrm{ms} \pm 265 \mathrm{μs}\left({\color{gray}0.548 \mathrm{\%}}\right) $$	Flame Graph
linked_queries	query-unlimited	$$565 \mathrm{ms} \pm 1.13 \mathrm{ms}\left({\color{gray}1.92 \mathrm{\%}}\right) $$	Flame Graph