FE-1658: Dock the Petrinaut AI assistant on the right

[kube]

Summary

The Petrinaut AI assistant opens in a sidebar at the far right of the editor. The sidebar sits flush against the viewport, with square corners and a thin divider. It reserves space beside the canvas and properties panel.

A header button detaches the assistant into a rounded, movable panel with a subtle shadow. Undocking returns the reserved width to the canvas. Opening the docked panel slides it into view at its full width while the canvas makes room. The draft, transcript, host controls, and active response survive these transitions.

Links

• Ticket FE-1706
• Ticket FE-1658
• Docs AI Assistant › Docking and floating
• Design AI Sidebar (internal)
• Reference Petrinaut preview

Blocked by

• #9687

Changes

• Match the assistant header, message layout, and composer to the editor's panel styling
• Let users move the floating panel by dragging its header or using arrow keys
• Keep the floating panel within the editor when the window changes size
• Return canvas controls to the viewport edge when the assistant floats
• Leave room for the compact Voice dock beside the canvas controls
• Animate opening, closing, docking, and compact Voice transitions with the editor's animation setting and respect reduced motion
• Add Toggle AI assistant to the command palette with Cmd/Ctrl+Shift+K to open and focus it, or close it when visible
• Keep the assistant mounted across Edit, Simulate, Actual, and Notebook; toggling preserves the current view
• Center the bottom toolbar on the full editor and move it only to clear the docked panels
• Preserve Brunch's Workpiece tab and Build with Brunch creation commands from main
• Update the AI assistant guide and add a patch changeset

Test coverage

After the 14 September rebase, affected package builds, unit tests, types, lint and architecture checks passed on the integrated stack. Browser recordings and manual checks listed below predate this rebase.

• Petrinaut: 951 tests passed across 111 test files

• Demo website: 513 tests passed across 48 test files

• Library and website builds, type checks, lint, formatting, and architecture checks passed

• Regression coverage verifies draft and transcript preservation, host-control lifetime, close/reopen behavior, stopping responses, and canvas insets through voice collapse and expansion

• Compact Voice setup is also exercised under React Strict Mode

• Browser checks cover docking, floating, pointer and keyboard movement, resizing, and bounds at an 800 × 600 viewport

• The deployed website also preserves a typed draft when detaching and docking

• Browser measurements verify progressive canvas width allocation on opening, closing, docking, and undocking while the panel retains its full width

• Browser checks verify canvas controls return to the edge when floating and stay clear of compact Voice setup

• Command tests cover availability, current callbacks, both platform modifiers, input focus, shortcut isolation, and listener cleanup; the AI shortcut takes priority over text-field handlers

• Browser checks verify palette execution, repeated toggling, floating draft preservation, dismissal of the palette by the AI shortcut, and toggling within Simulate and Notebook without leaving the view

• Both shortcut modifiers were checked in Monaco: the assistant receives focus and the code stays unchanged

• Brunch compatibility: 58 transport tests and 74 SDCPN plugin tests passed; their builds, types, and lint passed

• Another 56 focused Brunch server tests passed for freshness, recorded changes, and explanations, resolving shared logging and telemetry imports to their source files because the full backend dependency build requires the Rust toolchain

• The Workpiece tab, draft, and transcript survive docking, floating, and close/reopen; keyboard tab navigation was checked in Storybook

• Toolbar regression coverage checks centering, combined properties/assistant clearance, floating, and tight layouts

• Browser checks cover draft preservation across Experiments, Scenarios, Notebook, and Edit

• Live Brunch inference was not exercised

How to test

• Run yarn workspace @hashintel/petrinaut dev and open Petrinaut → With AI Assistant

• Open AI from the bottom toolbar and select a node

  The assistant sits flush at the far right, beside the properties panel.

• Open the command palette with Cmd/Ctrl+K, then choose Toggle AI assistant

  The palette closes and the assistant's message field receives focus.

• Focus another control and press Cmd/Ctrl+Shift+K

  The assistant opens and receives focus. Press the shortcut again to close it; reopening preserves its draft and layout.

• In Editor / AI Assistant → With Workpiece Tab, switch tabs, detach, and dock again

  The selected tab and draft survive. Left/right arrow keys switch tabs without moving the floating panel.

• Type a draft, choose Float AI assistant, and drag its header

  The canvas expands to use the released space. The minimap and viewport controls return to the right edge.

• Focus Move AI assistant and press arrow keys; hold Shift to move farther

• Resize from the left edge, then choose Dock AI assistant

• Close and reopen the assistant

  The panel slides out and back in at its full width as the canvas expands and contracts. The draft and layout choice are preserved.

• Open Petrinaut → With Voice Setup and choose Start voice mode

  The compact setup card leaves the canvas controls visible. This fixture uses no microphone or AI service.

• Choose Expand voice setup

  The full docked sidebar returns.

• With a draft in the assistant, switch between Edit, Simulate, and Notebook (enable Notebook in Settings)

  The assistant stays open, preserving the draft and floating or docked layout. Cmd/Ctrl+Shift+K toggles it without changing the current view.

• Open and close the docked assistant in a wide editor, then open the properties panel too

  The bottom toolbar stays centered until it would overlap a panel, then moves only far enough to clear it.

[vercel]

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

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 13, 2026 11:02pm UTC
petrinaut	Ready	Preview	Sep 13, 2026 11:02pm UTC
petrinaut-docs	Ready	Preview	Sep 13, 2026 11:02pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 13, 2026 11:02pm UTC

[cursor]

PR Summary

Medium Risk
Touches editor layout, global keyboard shortcuts, and panel state across all modes; regressions could affect canvas controls, toolbar placement, or shortcut conflicts with host embeds.

Overview
Reworks the AI assistant as a right-docked sidebar with optional floating mode: editor state tracks aiAssistantPlacement, collapsed voice dock, and panel animations; the UI reserves a flex column when docked and uses useFloatingPosition for drag/arrow-key movement when floated.

Layout and shortcuts: Canvas insets no longer stack the full assistant width on the properties panel—only the compact voice dock affects minimap/viewport offsets. The bottom toolbar centers on the full editor and shifts to clear docked panels. Cmd/Ctrl+Shift+K toggles the assistant (palette command + capture-phase listener); Cmd/Ctrl+K without Shift stays the command palette. Opening via toggle expands voice dock and focuses the composer.

Polish: Assistant panel styling/header (dock/float controls), default width 420px, docs/changeset, and broad test coverage for shortcuts, docking lifecycle, and layout.

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

[Copilot]

🟡 Changes recommended

The floating panel’s default position covers the canvas minimap.

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

Pull request overview

Adds docked and movable floating layouts for Petrinaut’s AI assistant while preserving conversation state.

Changes:

• Adds dock/float controls, drag and keyboard positioning, resizing, and animations.
• Updates editor layout state and canvas insets.
• Adds tests, documentation, Storybook coverage, and a patch changeset.

File summaries

File	Description
.changeset/quiet-boats-dock.md	Adds the package changeset.
libs/@hashintel/petrinaut/docs/ai-assistant.md	Documents docking and floating.
libs/@hashintel/petrinaut/src/react/hooks/use-petrinaut-commands.test.tsx	Updates context fixture.
libs/@hashintel/petrinaut/src/react/hooks/use-petrinaut-mutations.test.tsx	Updates context fixture.
libs/@hashintel/petrinaut/src/react/state/editor-context.ts	Adds assistant placement state.
libs/@hashintel/petrinaut/src/react/state/editor-provider.tsx	Implements placement updates and animation.
libs/@hashintel/petrinaut/src/react/state/panel-defaults.ts	Reduces the default assistant width.
libs/@hashintel/petrinaut/src/ui/hooks/use-canvas-insets.test.ts	Tests floating and docked insets.
libs/@hashintel/petrinaut/src/ui/hooks/use-canvas-insets.ts	Accounts for floating placement.
libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx	Adds the dock column layout.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiments-story-fixtures.tsx	Updates context fixture.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel.test.tsx	Updates context fixture.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel.tsx	Removes legacy offset handling.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.stories.tsx	Adds floating-panel story coverage.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.test.tsx	Tests state preservation across placement changes.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.tsx	Implements the redesigned panel layouts.
libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents/use-floating-position.ts	Implements bounded pointer and keyboard movement.

Review details

• Files reviewed: 17/17 changed files
• Comments generated: 1
• 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.

[cursor]

Stale Bugbot comment from a previous run.

[cursor]

Stale Bugbot comment from a previous run.

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

[cursor]

Compact Voice inset ignores panel cap

Medium Severity

The compact Voice inset uses the raw aiAssistantWidth plus 12px, while the dock itself renders at min(aiAssistantWidth, 100cqw). On an editor narrower than that reserved width, minimap and viewport controls are placed past the canvas edge and can disappear or overlap the compact dock.

 

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

[cursor]

Dock column can hide the canvas

Medium Severity

The dock spacer is flex-shrink: 0 and can be as wide as the full editor (min(assistantWidth, 100cqw)). The canvas now shrinks with minWidth: 0, so a docked assistant on a narrow embed—or after a wide resize—can consume the entire row and leave a 0-width canvas.

Additional Locations (2)

• libs/@hashintel/petrinaut/src/ui/views/Editor/editor-view.tsx#L111-L116
• libs/@hashintel/petrinaut/src/ui/views/Editor/panels/ai-assistant-panel/ai-assistant-contents.tsx#L98-L111

 

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