H-5884: Add Panel SubView, with Horizontal and Vertical SubViews containers

[kube]

🌟 What is the purpose of this PR?

Add Panel SubView component, to start refactoring views around a more modular approach.

For now this is really simple, each Panel uses either SubView/VerticalSubViewsContainer (LeftPanel, PropertiesPanel), or SubView/HorizontalTabsContainer (BottomPanel).

Each panel still decides which SubView it shows, but the idea in the end will be to invert that, and let "modules" decide how they would contribute to the UI. (This principle of inversion of control is something that should be more present in the future of Petrinaut, even outside of UI components).

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

This is still a raw first version, the behavior of resizing is still clunky.

🐾 Next steps

Horizontal (tabs) and Vertical SubView containers will be enhanced to:

• Have a better resizing behavior
• Follow the Figma design

❓ How to test this?

Use latest Petrinaut deployment

[kube]

• H-5764: Setup Sentry UserFeedback + ErrorTracker #8241
• H-5691: Simulation Timeline Visualizer #8211
• H-5884: Add Panel SubView, with Horizontal and Vertical SubViews containers #8209 👈 (View in Graphite)
• H-5768: Extract styles from all component files in Petrinaut #8205
• H-5768: Quick Simulation in Edit Mode, and disable Simulate temporarily #8195
• 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]

Input always appears disabled due to hardcoded styles

The inputStyle uses a plain css call that unconditionally applies backgroundColor: "[rgba(0, 0, 0, 0.05)]" and cursor: "not-allowed" regardless of input state. The input's disabled prop at line 84 only controls whether the user can type, but the visual styling always shows it as disabled. When hasSimulationFrames is false, the token count input should be editable but will appear gray with a not-allowed cursor, confusing users. This should use cva with variants like other input styles in the codebase to conditionally apply disabled styling.

 

[cursor]

Nested resizable containers create conflicting resize behavior

The placeInitialStateSubView wraps InitialStateEditor in a resizable container with defaultHeight: 150, but InitialStateEditor has its own internal resize logic with a 250px default height and its own resize handle at the bottom. This creates two competing resize mechanisms: the outer container's height (150px) clips the inner content (250px), making the inner resize handle inaccessible without scrolling. The two independent resize controls can create confusing states where inner and outer heights don't align.

Additional Locations (1)

• libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/initial-state-editor.tsx#L243-L244

 

[augmentcode]

🤖 Augment PR Summary

Summary: This PR introduces a reusable SubView abstraction for Petrinaut panels and refactors editor panels to compose their UI from subviews.

Changes:

• Adds SubView types plus reusable containers for vertical collapsible sections and horizontal tab layouts (components/sub-view/*).
• Refactors the Left Sidebar and Bottom Panel to render from constant subview arrays (LEFT_SIDEBAR_SUBVIEWS, BOTTOM_PANEL_SUBVIEWS), simplifying panel composition.
• Moves former panel “content” components into explicit subview definitions under views/Editor/subviews/* (types, differential equations, parameters, nodes, diagnostics, simulation settings).
• Refactors Place Properties to use a PlacePropertiesProvider context and renders “State” + “Visualizer Output” as vertically stacked, resizable subviews.
• Reorganizes panel code under views/Editor/panels/* and updates imports accordingly.
• Adds a changeset for the @hashintel/petrinaut package.

Technical Notes: The new subview containers support optional header actions and resizable sections via shared drag/resize logic.

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

[augmentcode]

Review completed. 2 suggestions posted.

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

[augmentcode]

BOTTOM_PANEL_SUBVIEWS currently contains only diagnostics + simulation-settings, but BottomPanelTab still includes "parameters" (and the panel docstring mentions it); if activeBottomPanelTab ever becomes "parameters", the header will show no active tab and content will silently fall back to the first subview. Consider aligning the tab union/docs with the actual subview list so the active tab can’t drift out of sync.

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

[augmentcode]

aria-labelledby={activeTabId} on the tabpanel doesn’t appear to reference an element with a matching id (the tab buttons don’t set id), so the tab/tabpanel relationship won’t be correctly exposed to assistive tech. Consider wiring up id/aria-controls on the tab elements and matching aria-labelledby on the tabpanel.

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

[cursor]

Tab buttons missing id attribute breaks ARIA relationship

Low Severity

The TabButton component sets role="tab" and aria-selected but doesn't include an id={subView.id} attribute. Meanwhile, both HorizontalTabsContainer and HorizontalTabsContent render tabpanels with aria-labelledby={activeTabId}, which expects to reference a tab element by that ID. Since no element has the matching id, the ARIA relationship is broken, causing screen readers to be unable to associate tabpanels with their corresponding tabs.

Additional Locations (1)

• libs/@hashintel/petrinaut/src/components/sub-view/horizontal-tabs-container.tsx#L187-L188