FE-601: Expand Properties Panel sections and add Edit views

[kube]

Summary

Expand a code section to fill the existing Properties Panel’s section container. The section keeps its controls and editor mounted; a breadcrumb such as Transition Collision › Transition Results returns to the selected item’s other properties and section sizes. Expansion and return animate within that container. The expanded section is part of the URL: Back closes it, Forward reopens it, and reload restores it.

Edit also provides a compact Canvas / Definitions selector. It floats over Canvas below the main header, beside the Entities sidebar when open, and becomes fully opaque on hover or focus. In Definitions, it shares the existing search and filter toolbar. Both views edit the same net and share the selected entity. Switching views preserves the canvas camera and Definitions state; the URL records the chosen view. Definitions is available without a Labs flag.

Demo: expand a code section, return through its breadcrumb, restore it with browser history, and open the same transition in Definitions.

fe-601-code-editor.mp4

Links

• Ticket FE-601 (internal)
• Ticket FE-1706 (internal)
• Docs Code Editor
• Design Support code editor (internal)

Changes

• Make Canvas and Definitions sub-views of Edit, with a compact floating selector over Canvas and a shared search/filter toolbar in Definitions

• Preserve selection, canvas position and zoom, and Definitions scroll, expansion, search, and filters when switching Edit views

• Restore the latest code and keep external updates working when switching back to a focused editor

• Store Definitions as editView=definitions in the URL; preserve legacy mode=notebook and editView=notebook links

• Remove the Notebook Labs setting and fourth global-mode option

• Add an optional maximize action to the shared vertical SubView header

• Enable it for Firing Time, Transition Results, Differential Equation, and Visualizer sections

• Keep the canvas, panel width, section controls, Monaco editor, cursor position, and undo history in place

• Store the expanded container and section in shared navigation; normalizing an unavailable section replaces the current history entry

• Restore keyboard focus to the collapsed section header when returning from a deep link, while retaining its saved collapsed state

• Return by clicking the parent name in the header breadcrumb; reset expansion when the selected item, file, or subnet changes

• Match the parent breadcrumb to the main section’s icon and typography; fade overflowing parent names while keeping the nested section’s title visible

• Center header info icons beside their labels

• Animate the section bounds and header while respecting the animation setting and system reduced-motion preference

• Open code sections directly from sidebar item menus and the place’s assigned equation shortcut

• Update the guide, Storybook examples, and patch changesets for Petrinaut and Petrinaut Core

Next steps

• Screenshots pending: replace the full-editor image in Drawing a Net › Editor layout to include the Canvas / Definitions selector

Test coverage

• The rebased combined branch through FE-1595: Polish properties-panel controls #9728 passed build, unit-test, TypeScript, and lint checks. Formatting, architecture validation, and the documentation site build also passed.

• Edit-view tests cover selection and state preservation, history navigation, legacy links, and removal of the Labs flag

• Lifecycle tests use the installed Monaco React wrapper to verify hidden-editor disposal, safe typing, current text on reactivation, and later external updates

• Browser checks confirm selector placement, Back/Forward and reload, preserved canvas camera and Definitions scroll/search/expansion, and unchanged global-mode navigation

• SubView tests cover the live parent title, content preservation, keyboard focus, Escape, selection changes, removed sections, and presentations that hide mutation actions; animation tests cover both directions, interruption, the handoff to normal layout, and disabled motion

• Regression tests cover keyboard focus after returning from a linked, collapsed section with animation enabled, animation disabled, and reduced motion

• Navigation tests cover URL round-trips, Back/Forward, initial expansion of collapsed sections, invalid routes, selection resets, matching sections, saved sizes, and source-hidden previews

• Builds, unit tests, TypeScript, and lint pass for Petrinaut, Petrinaut Core, and the consuming website

• Browser checks cover all four sections, unchanged container bounds, return navigation, retained controls, and undo after returning

• Browser history checks cover Back, Forward, reload, and Escape

How to test

• In Edit, collapse and open Entities; confirm the floating selector follows its edge without adding a row

• In Edit, choose Definitions from the floating selector below the main header

• Select and expand a cell, scroll the list, and switch to Canvas

  The same entity remains selected. Switching back restores Definitions’ expanded cells and scroll position.

• Zoom and pan Canvas, then switch to Definitions and back

  The camera position stays unchanged.

• Use Back and Forward, then reload a Definitions URL

  History restores the view and reload opens the view in the URL.

• Confirm the Definitions selector, search, order, and filters share one toolbar row at desktop width

• Use the arrow keys to switch views from the selector

• Open User settings > Labs and confirm Definitions has no toggle

• Load Probabilistic Satellite Launcher from Menu > Load example

• Select Collision and open Firing Time

• Use Fill panel in the section header

  The section fills the Properties Panel’s section container. The canvas and panel width stay unchanged, and the predicate/rate controls remain above the code.

• Edit code, click Transition Collision in the header, focus the editor again, and undo the edit

• Expand Transition Results, use browser Back and Forward, then reload

  Back restores the properties; Forward and reload restore the expanded section.

• Click Transition Collision to return

• Select Space and expand Visualizer; confirm Code, Preview, and Split remain available

• Select Satellite Orbit Dynamics and expand Differential Equation; confirm its fields stay available

🚢 Has this modified a publishable library?

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

📜 Does this require a change to the docs?

• require changes to docs which are made as part of this PR

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

• do not affect the execution graph

[vercel]

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

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 16, 2026 8:25pm UTC
petrinaut	Ready	Preview	Sep 16, 2026 8:25pm UTC
petrinaut-docs	Ready	Preview	Sep 16, 2026 8:25pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 16, 2026 8:25pm UTC

[cursor]

PR Summary

Medium Risk
Touches navigation state, URL contracts, and a global mode removal (Notebook), with broad UI behavior changes but strong test coverage and legacy link normalization.

Overview
Edit now switches between Canvas and Definitions via a compact selector (no separate Notebook mode or Labs toggle). Legacy mode=notebook / editView=notebook URLs map to Edit + Definitions.

Properties Panel code sections (Firing Time, Transition Results, Differential Equation, Visualizer) can fill the panel with a parent breadcrumb, in-container animation, focus restoration, and Escape to return. That expansion is stored in app navigation and the website URL (expandedPanel + expandedSection), so Back/Forward and reload restore it; changing selection, file, or subnet clears it.

Shared example search gains editView and expanded-section params; Monaco code navigation opens the right section from the entities sidebar and place shortcuts. Docs and the in-app assistant add a Code Editor guide.

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

[cursor]

Stale Bugbot comment from a previous run.

[Copilot]

🟡 Changes recommended

The bottom dock obscures properties content, and mixed header actions violate review-profile mutation visibility.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds experimental expanded code-editor layouts to Petrinaut with persistent settings, direct navigation, shared Monaco models, documentation, and tests.

Changes:

• Adds full-screen, properties-panel, and bottom-dock editors.
• Integrates code navigation across menus and property views.
• Adds settings persistence, documentation, stories, tests, and changesets.

File summaries

File	Description
.changeset/clear-code-editor-guide.md	Adds Petrinaut Core patch note.
.changeset/tidy-code-editor-layouts.md	Adds Petrinaut patch note.
libs/@hashintel/petrinaut-core/src/ai.ts	Registers the code-editor guide.
libs/@hashintel/petrinaut/docs/README.md	Links the new guide.
libs/@hashintel/petrinaut/docs/code-editor.md	Documents editor layouts and navigation.
libs/@hashintel/petrinaut/docs/visual-settings.md	Documents the feature flag.
libs/@hashintel/petrinaut/src/react/state/user-settings-context.ts	Defines layout settings.
libs/@hashintel/petrinaut/src/react/state/user-settings-provider.test.tsx	Tests persistence.
libs/@hashintel/petrinaut/src/react/state/user-settings-provider.tsx	Persists and validates settings.
libs/@hashintel/petrinaut/src/ui/monaco/code-editor-layout-settings.tsx	Adds layout controls and previews.
libs/@hashintel/petrinaut/src/ui/monaco/code-workspace.stories.tsx	Adds layout stories.
libs/@hashintel/petrinaut/src/ui/monaco/code-workspace.test.tsx	Tests workspace navigation and entries.
libs/@hashintel/petrinaut/src/ui/monaco/code-workspace.tsx	Implements workspace state and integration.
libs/@hashintel/petrinaut/src/ui/monaco/code-workspace/entries.ts	Maps model functions to editable entries.
libs/@hashintel/petrinaut/src/ui/monaco/code-workspace/surface.tsx	Renders expanded editor layouts.
libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx	Integrates workspace into the editor shell.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/LeftSideBar/subviews/entities-tree.tsx	Adds code actions to entity menus.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/code-field.tsx	Shares the equation editor model.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/differential-equation-properties/subviews/main.tsx	Adds equation layout actions.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/main.tsx	Opens assigned equation code.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/place-properties/subviews/place-visualizer/subview.tsx	Integrates visualizer code navigation.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/main.tsx	Exposes mixed header actions.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-firing-time/subview.tsx	Adds firing-code layout actions.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/PropertiesPanel/transition-properties/subviews/transition-results/subview.tsx	Adds kernel-code layout actions.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.test.tsx	Updates settings test fixture.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/petrinaut-docs-content.ts	Loads the new guide.
libs/@hashintel/petrinaut/src/ui/views/SDCPN/components/viewport-settings-dialog.tsx	Adds editor layout settings.

Review details

• Files reviewed: 27/27 changed files
• Comments generated: 2
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[cursor]

Stale Bugbot comment from a previous run.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 66.01%. Comparing base (0c562d4) to head (3a011ac).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #9664   +/-   ##
=======================================
  Coverage   66.01%   66.01%           
=======================================
  Files        1755     1755           
  Lines      186313   186313           
  Branches     7671     7671           
=======================================
  Hits       122993   122993           
  Misses      61863    61863           
  Partials     1457     1457           

Flag	Coverage Δ
apps.hash-api	15.35% <ø> (ø)

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

☔ View full report in Codecov by Harness.
📢 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]

Stale Bugbot comment from a previous run.

[cursor]

Stale Bugbot comment from a previous run.

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