H-5768: Quick Simulation in Edit Mode, and disable Simulate temporarily

[kube]

🌟 What is the purpose of this PR?

• Allow for Quick Simulation directly from Edit mode.
  • Disable Simulate Tab for now
• Enhancement and tweaks on Toolbar
• Make all Panels (Left/Right/Bottom) share the same component
• Rename DiagnosticsPanel to BottomPanel
  • Expose three tabs in BottomPanel:
    • Diagnostics
    • Global Parameters (will move in next PR, back to LeftPanel)
    • Simulation Settings (Computation + Parameters values)

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• modifies an npm-publishable library and I have added a changeset file(s)

📜 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

⚠️ Known issues

• Global Parameters is moved in BottomPanel but should be in LeftPanel (model objects)

🐾 Next steps

• Create PanelView component (name subject to change) to simplify creation of subviews/tabs in Panels
• Bring back Global Parameters to LeftPanel
• Add Simulation Timeline in BottomPanel
• Add Simulation Logs in BottomPanel

🛡 What tests cover this?

• No tests at the moment as we still need to define a testing strategy for the UI
  • (Simulation features are still tested as unit tests)

❓ How to test this?

1. Use latest Petrinaut deploy

[kube]

• H-5691: Update Broken Machines example to have some global parameters #8211
• H-5884: Add Panel SubView, with Horizontal and Vertical SubViews containers #8209
• H-5768: Extract styles from all component files in Petrinaut #8205
• H-5768: Quick Simulation in Edit Mode, and disable Simulate temporarily #8195 👈 (View in Graphite)
• H-5850: Fix PandaCSS and single vite.config #8194
• H-5840: SDCPN diagnostics panel with global type-checker #8171
• main

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

[cursor]

Duplicate React keys when diagnostics share same position

The React list key uses diagnostic.start ?? index, meaning the array index is only used as fallback when start is undefined. When two TypeScript diagnostics occur at the same character position (which is possible for certain code patterns), both would have the same key like entityId-lambda-42, causing duplicate React keys. This could lead to incorrect DOM updates and React console warnings. The previous implementation used just index which always produced unique keys.

 

Your organization requires reapproval when changes are made, so Graphite has dismissed approvals. See the output of git range-diff at https://github.com/hashintel/hash/actions/runs/20468286757