FE-225: Update Petrinaut UI

[kube]

🌟 What is the purpose of this PR?

🔗 Related links

• ...

🚫 Blocked by

• ...

🔍 What does this change?

• ...

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
• modifies an npm-publishable library and I have added a changeset file(s)
• modifies a Cargo-publishable library and I have amended the version
• modifies a Cargo-publishable library, but it is not yet ready to publish
• modifies a block that will need publishing via GitHub action once merged
• I am unsure / need advice

📜 Does this require a change to the docs?

The changes in this PR:

• are internal and do not require a docs change
• are in a state where docs changes are not yet required but will be
  • this is tracked in: Insert Link Here
• require changes to docs which are made as part of this PR
• require changes to docs which are not made in this PR
  • Provide more detail here
• I am unsure / need advice

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

The changes in this PR:

• do not affect the execution graph
• affected the execution graph, and the turbo.json's have been updated to reflect this
• I am unsure / need advice

⚠️ Known issues

🐾 Next steps

🛡 What tests cover this?

❓ How to test this?

1. Checkout the branch / view the deployment
2. Try X
3. Confirm that Y

📹 Demo

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hash	Error		Feb 27, 2026 0:16am
petrinaut	Ready	Preview	Feb 27, 2026 0:16am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hashdotdesign	Ignored	Preview	Feb 27, 2026 0:16am
hashdotdesign-tokens	Ignored	Preview	Feb 27, 2026 0:16am

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
petrinaut	Building	Preview	Feb 23, 2026 3:34pm

[kube]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• H-5641: Probability Distributions in Petrinaut #8463
• FE-225: Update Petrinaut UI #8472 👈 (View in Graphite)
• H-5839, FE-488: Petrinaut: LSP-like interface for Diagnostics and Code Editor #8300
• FE-223, H-5780, H-6227: Setup Petrinaut inside HASH + Build with Vite 8 and TypeScript 7 #8369
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[codspeed-hq]

Merging this PR will not alter performance

✅ 68 untouched benchmarks
🗄️ 12 archived benchmarks run¹

---

_{Comparing cf/fe-225-migrate-petrinaut-to-figma-designs (dcf28a8) with main (e957752)²}

Footnotes

1. 12 benchmarks were run, but are now archived. If they were deleted in another branch, consider rebasing to remove them from the report. Instead if they were added back, click here to restore them. ↩

2. No successful run was found on cf/h-5839-create-an-lsp-and-re-use-in-monaco-editor (d86a788) during the generation of this report, so main (e957752) 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	$$28.0 \mathrm{ms} \pm 195 \mathrm{μs}\left({\color{gray}0.022 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$3.72 \mathrm{ms} \pm 26.7 \mathrm{μs}\left({\color{gray}3.34 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 1001	$$13.5 \mathrm{ms} \pm 106 \mathrm{μs}\left({\color{gray}0.762 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: high, policies: 3314	$$45.3 \mathrm{ms} \pm 332 \mathrm{μs}\left({\color{gray}-0.206 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: low, policies: 1	$$15.7 \mathrm{ms} \pm 110 \mathrm{μs}\left({\color{gray}-0.356 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: medium, policies: 1526	$$25.8 \mathrm{ms} \pm 193 \mathrm{μs}\left({\color{gray}0.772 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 2078	$$29.4 \mathrm{ms} \pm 189 \mathrm{μs}\left({\color{gray}0.315 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$4.02 \mathrm{ms} \pm 26.1 \mathrm{μs}\left({\color{gray}2.54 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 1033	$$14.8 \mathrm{ms} \pm 123 \mathrm{μs}\left({\color{gray}0.890 \mathrm{\%}}\right) $$	Flame Graph

policy_resolution_medium

Function	Value	Mean	Flame graphs
resolve_policies_for_actor	user: empty, selectivity: high, policies: 102	$$4.10 \mathrm{ms} \pm 22.9 \mathrm{μs}\left({\color{gray}1.27 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$3.23 \mathrm{ms} \pm 19.4 \mathrm{μs}\left({\color{gray}2.03 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 51	$$3.60 \mathrm{ms} \pm 22.7 \mathrm{μs}\left({\color{gray}0.260 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: high, policies: 269	$$5.48 \mathrm{ms} \pm 39.2 \mathrm{μs}\left({\color{gray}0.003 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: low, policies: 1	$$3.82 \mathrm{ms} \pm 23.0 \mathrm{μs}\left({\color{gray}0.603 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: medium, policies: 107	$$4.36 \mathrm{ms} \pm 27.7 \mathrm{μs}\left({\color{gray}-0.711 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 133	$$4.76 \mathrm{ms} \pm 29.2 \mathrm{μs}\left({\color{gray}-1.284 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$3.71 \mathrm{ms} \pm 24.0 \mathrm{μs}\left({\color{gray}-2.867 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 63	$$4.43 \mathrm{ms} \pm 27.7 \mathrm{μs}\left({\color{gray}0.529 \mathrm{\%}}\right) $$	Flame Graph

policy_resolution_none

Function	Value	Mean	Flame graphs
resolve_policies_for_actor	user: empty, selectivity: high, policies: 2	$$2.93 \mathrm{ms} \pm 15.1 \mathrm{μs}\left({\color{gray}0.382 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$2.89 \mathrm{ms} \pm 16.5 \mathrm{μs}\left({\color{gray}1.20 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 1	$$3.00 \mathrm{ms} \pm 15.5 \mathrm{μs}\left({\color{gray}0.839 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 8	$$3.28 \mathrm{ms} \pm 21.3 \mathrm{μs}\left({\color{gray}-0.015 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$3.08 \mathrm{ms} \pm 19.8 \mathrm{μs}\left({\color{gray}-0.326 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 3	$$3.33 \mathrm{ms} \pm 16.6 \mathrm{μs}\left({\color{gray}-0.051 \mathrm{\%}}\right) $$	Flame Graph

policy_resolution_small

Function	Value	Mean	Flame graphs
resolve_policies_for_actor	user: empty, selectivity: high, policies: 52	$$3.35 \mathrm{ms} \pm 20.8 \mathrm{μs}\left({\color{gray}3.05 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: low, policies: 1	$$3.06 \mathrm{ms} \pm 19.7 \mathrm{μs}\left({\color{gray}3.56 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: empty, selectivity: medium, policies: 25	$$3.22 \mathrm{ms} \pm 22.4 \mathrm{μs}\left({\color{gray}2.87 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: high, policies: 94	$$3.81 \mathrm{ms} \pm 26.2 \mathrm{μs}\left({\color{gray}2.98 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: low, policies: 1	$$3.33 \mathrm{ms} \pm 23.1 \mathrm{μs}\left({\color{gray}3.58 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: seeded, selectivity: medium, policies: 26	$$3.64 \mathrm{ms} \pm 22.9 \mathrm{μs}\left({\color{gray}4.88 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: high, policies: 66	$$3.86 \mathrm{ms} \pm 28.0 \mathrm{μs}\left({\color{red}6.46 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: low, policies: 1	$$3.45 \mathrm{ms} \pm 25.5 \mathrm{μs}\left({\color{red}8.32 \mathrm{\%}}\right) $$	Flame Graph
resolve_policies_for_actor	user: system, selectivity: medium, policies: 29	$$3.78 \mathrm{ms} \pm 28.4 \mathrm{μs}\left({\color{red}8.05 \mathrm{\%}}\right) $$	Flame Graph

read_scaling_complete

Function	Value	Mean	Flame graphs
entity_by_id;one_depth	1 entities	$$43.0 \mathrm{ms} \pm 179 \mathrm{μs}\left({\color{gray}-0.289 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	10 entities	$$80.6 \mathrm{ms} \pm 468 \mathrm{μs}\left({\color{gray}-1.968 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	25 entities	$$47.0 \mathrm{ms} \pm 216 \mathrm{μs}\left({\color{gray}-1.919 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	5 entities	$$49.4 \mathrm{ms} \pm 270 \mathrm{μs}\left({\color{gray}-1.086 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;one_depth	50 entities	$$57.6 \mathrm{ms} \pm 330 \mathrm{μs}\left({\color{lightgreen}-5.623 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	1 entities	$$44.3 \mathrm{ms} \pm 184 \mathrm{μs}\left({\color{gray}-3.216 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	10 entities	$$423 \mathrm{ms} \pm 854 \mathrm{μs}\left({\color{gray}0.366 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	25 entities	$$99.7 \mathrm{ms} \pm 558 \mathrm{μs}\left({\color{gray}-3.222 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	5 entities	$$89.0 \mathrm{ms} \pm 446 \mathrm{μs}\left({\color{gray}-1.269 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;two_depth	50 entities	$$332 \mathrm{ms} \pm 990 \mathrm{μs}\left({\color{gray}2.05 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	1 entities	$$16.4 \mathrm{ms} \pm 106 \mathrm{μs}\left({\color{gray}1.02 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	10 entities	$$17.0 \mathrm{ms} \pm 113 \mathrm{μs}\left({\color{gray}4.25 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	25 entities	$$17.3 \mathrm{ms} \pm 103 \mathrm{μs}\left({\color{gray}3.01 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	5 entities	$$16.8 \mathrm{ms} \pm 87.8 \mathrm{μs}\left({\color{gray}4.08 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id;zero_depth	50 entities	$$21.3 \mathrm{ms} \pm 101 \mathrm{μs}\left({\color{red}7.62 \mathrm{\%}}\right) $$	Flame Graph

read_scaling_linkless

Function	Value	Mean	Flame graphs
entity_by_id	1 entities	$$17.4 \mathrm{ms} \pm 105 \mathrm{μs}\left({\color{red}5.07 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	10 entities	$$17.1 \mathrm{ms} \pm 137 \mathrm{μs}\left({\color{red}6.19 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	100 entities	$$16.3 \mathrm{ms} \pm 113 \mathrm{μs}\left({\color{gray}-0.282 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	1000 entities	$$17.1 \mathrm{ms} \pm 129 \mathrm{μs}\left({\color{gray}2.68 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	10000 entities	$$24.8 \mathrm{ms} \pm 176 \mathrm{μs}\left({\color{gray}1.26 \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	$$31.4 \mathrm{ms} \pm 318 \mathrm{μs}\left({\color{gray}0.908 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/book/v/1	$$31.3 \mathrm{ms} \pm 306 \mathrm{μs}\left({\color{gray}-2.207 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/building/v/1	$$32.5 \mathrm{ms} \pm 283 \mathrm{μs}\left({\color{gray}2.83 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/organization/v/1	$$31.9 \mathrm{ms} \pm 317 \mathrm{μs}\left({\color{gray}2.29 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/page/v/2	$$31.7 \mathrm{ms} \pm 333 \mathrm{μs}\left({\color{gray}0.259 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/person/v/1	$$32.3 \mathrm{ms} \pm 296 \mathrm{μs}\left({\color{gray}-3.435 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/playlist/v/1	$$32.4 \mathrm{ms} \pm 319 \mathrm{μs}\left({\color{gray}2.48 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/song/v/1	$$30.8 \mathrm{ms} \pm 252 \mathrm{μs}\left({\color{lightgreen}-5.617 \mathrm{\%}}\right) $$	Flame Graph
entity_by_id	entity type ID: https://blockprotocol.org/@alice/types/entity-type/uk-address/v/1	$$32.3 \mathrm{ms} \pm 336 \mathrm{μs}\left({\color{gray}4.57 \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.94 \mathrm{ms} \pm 43.6 \mathrm{μs}\left({\color{gray}-1.740 \mathrm{\%}}\right) $$	Flame Graph

representative_read_multiple_entities

Function	Value	Mean	Flame graphs
entity_by_property	traversal_paths=0	0	$$91.7 \mathrm{ms} \pm 469 \mathrm{μs}\left({\color{gray}-2.385 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=255	1,resolve_depths=inherit:1;values:255;properties:255;links:127;link_dests:126;type:true	$$146 \mathrm{ms} \pm 550 \mathrm{μs}\left({\color{gray}-2.547 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:0;links:0;link_dests:0;type:false	$$101 \mathrm{ms} \pm 505 \mathrm{μs}\left({\color{gray}-1.458 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:0;links:1;link_dests:0;type:true	$$110 \mathrm{ms} \pm 541 \mathrm{μs}\left({\color{gray}0.742 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:0;properties:2;links:1;link_dests:0;type:true	$$120 \mathrm{ms} \pm 633 \mathrm{μs}\left({\color{gray}-2.417 \mathrm{\%}}\right) $$
entity_by_property	traversal_paths=2	1,resolve_depths=inherit:0;values:2;properties:2;links:1;link_dests:0;type:true	$$125 \mathrm{ms} \pm 642 \mathrm{μs}\left({\color{lightgreen}-5.727 \mathrm{\%}}\right) $$
link_by_source_by_property	traversal_paths=0	0	$$90.2 \mathrm{ms} \pm 390 \mathrm{μs}\left({\color{gray}-1.473 \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	$$119 \mathrm{ms} \pm 441 \mathrm{μs}\left({\color{lightgreen}-5.241 \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	$$96.7 \mathrm{ms} \pm 430 \mathrm{μs}\left({\color{gray}-1.450 \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	$$107 \mathrm{ms} \pm 537 \mathrm{μs}\left({\color{gray}0.702 \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	$$109 \mathrm{ms} \pm 524 \mathrm{μs}\left({\color{gray}0.175 \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	$$109 \mathrm{ms} \pm 440 \mathrm{μs}\left({\color{gray}-3.517 \mathrm{\%}}\right) $$

scenarios

Function	Value	Mean	Flame graphs
full_test	query-limited	$$141 \mathrm{ms} \pm 520 \mathrm{μs}\left({\color{red}7.94 \mathrm{\%}}\right) $$	Flame Graph
full_test	query-unlimited	$$142 \mathrm{ms} \pm 549 \mathrm{μs}\left({\color{red}9.23 \mathrm{\%}}\right) $$	Flame Graph
linked_queries	query-limited	$$107 \mathrm{ms} \pm 631 \mathrm{μs}\left({\color{gray}0.487 \mathrm{\%}}\right) $$	Flame Graph
linked_queries	query-unlimited	$$592 \mathrm{ms} \pm 2.73 \mathrm{ms}\left({\color{gray}-2.655 \mathrm{\%}}\right) $$	Flame Graph