FE-601: Add full-screen and panel code editor layouts

[kube]

Important

Experimental
Adds the Code editor layouts feature flag.

Summary

Model code can open directly in a full-screen editor that replaces the canvas, a full-width properties panel, or a bottom dock. Each layout shows the current place, transition, or differential equation in a compact header, with buttons for its related functions.

Settings includes graphical layout previews and remembers the chosen layout. Code is reachable from the canvas Code menu, sidebar item menus, inline editors, and property-section menus. A place can also open its assigned differential equation directly.

Links

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

Changes

• Share Monaco models between inline and expanded editors to preserve edits, undo history, cursor position, and diagnostics
• Add resizable panel and dock layouts with line numbers and wrapped code
• Keep expanded code read-only when editing is disabled
• Return to the matching property section when closing code, and close the editor when its file, subnet, or entity changes
• Add Storybook examples for all three layouts and read-only mode
• Register the code editor guide for the in-app assistant and add patch changesets for both published packages

Test coverage

• New navigation tests cover direct opening, layout changes, disabled flags, document changes, deleted entities, mutation routing, and extension availability
• Settings tests verify the feature flag and preferred layout persist across sessions
• Builds, unit tests, TypeScript checks, and ESLint pass for Petrinaut, Petrinaut Core, and the consuming website
• Repository formatting and architecture checks pass
• Manually verified all layouts, direct property and equation navigation, resizing, flag controls, shared editing and undo, and read-only behavior in Storybook
• Verified the deployed website opens all three layouts from its Settings and Code menus

How to test

• Open the Petrinaut preview
• Load Production with Machine Failure from Menu > Load example
• Open Settings > Feature flags > Code editor layouts and choose a layout card
• Open Code > Production Success / Transition kernel
• Edit the code, switch layouts using the header menu, return to properties, and undo the edit
• Select MachinesProducing and use Open equation code

For isolated layout examples, start yarn workspace @hashintel/petrinaut exec storybook dev --port 6006 --ci. Under Petrinaut / Code editor layouts, compare Full Screen, Properties Panel, Bottom Dock, and Read Only.

🚢 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 11, 2026 3:01am UTC
petrinaut	Ready	Preview	Sep 11, 2026 3:01am UTC
petrinaut-docs	Ready	Preview	Sep 11, 2026 3:01am UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 11, 2026 3:01am UTC

[cursor]

PR Summary

Medium Risk
Touches core editing flows and automatic model mutations from Monaco, but behavior is behind a default-off flag with solid test coverage and read-only guards.

Overview
Adds an experimental Code editor layouts feature flag so model functions (transition λ/kernel, differential equations, place visualizers) can open in full screen, the properties panel, or a bottom dock, with the choice persisted in user settings.

A new code workspace wraps the editor: it builds navigable code entries, opens the selected function while syncing canvas selection, closes when the net/subnet/entity changes, and shares Monaco models between inline property editors and the expanded surface so edits, undo, cursor, and diagnostics carry over when switching layouts.

Entry points include a canvas Code menu, property-section More options / Open code editor, sidebar row menus (including places opening assigned equation code), and Settings cards with layout previews. Full-screen mode replaces the canvas and hides the bottom bar/panel; other layouts keep the net visible with resizable panel/dock chrome. Read-only mode is respected end-to-end.

User docs and the in-app assistant code-editor guide are registered in petrinaut-core; patch changesets cover both packages.

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

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

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

[cursor]

Bottom dock covers properties panel

Medium Severity

The bottom dock spans from the sidebar to the right edge and sits above the properties panel, while BottomPanel is unmounted without clearing isBottomPanelOpen. The properties panel therefore keeps a gap for the hidden diagnostics panel and loses its lower controls under the dock, unlike the existing bottom-panel inset.

Additional Locations (1)

• libs/@hashintel/petrinaut/src/ui/monaco/code-workspace/surface.tsx#L138-L147

 

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

[cursor]

Visualizers ignore colors extension

Low Severity

getCodeEntries always lists a place visualizer when visualizerCode is set. Transition and differential-equation entries already honor disabled extensions, and the visualizer section itself is shown only when extensions.colors is on, so the Code menu can still open visualizer files that the properties panel considers unavailable.

 

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

[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.