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, reserving space beside the canvas and properties panel. The docked panel sits flush against the viewport, with square corners and a full-height divider.

Users can detach the assistant, move it by its header, and resize it from any edge or corner. Docking, floating, closing, and changing editor views preserve the draft, transcript, host controls, and active response.

9659-ai-sidebar.mp4

Links

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

Blocked by

• #9677

Changes

Panel layout and controls

• Keep the assistant mounted across Edit, Simulate, Actual, and Notebook
• Return reserved canvas width when the assistant floats, including the minimap and viewport controls
• Center the bottom toolbar until it needs to move clear of docked panels
• Leave room for compact Voice setup beside the canvas controls
• Add Toggle AI assistant to the command palette and Cmd/Ctrl+Shift+K to open and focus the assistant or close it when visible
• Preserve Brunch's Workpiece tab and Build with Brunch creation commands

Header, composer, and resizing

• Leave 12px between the AI icon and header tabs
• Make floating header space draggable outside tabs and action buttons, with arrow keys for keyboard movement
• Prevent header text selection in both layouts
• Animate header icons on hover and click, respecting reduced motion
• Hide Clear AI chat until the conversation contains messages
• Give the composer action equal 5px top, right, and bottom insets for single-line messages and a 4px radius nested inside the composer's 8px radius
• Resize floating panels from all four edges and corners while keeping the opposite edge or corner fixed and staying within editor bounds
• Preserve the saved size on an unchanged resize axis when a small editor constrains the visible panel
• Highlight rounded corners with a border stroke that fades over 49px along each adjoining side
• Fade side highlights over 49px at each end before reaching the corners
• Give the docked sidebar a persistent divider and full-height resize highlight
• Respect the editor's animation setting and reduced motion for panel transitions
• Update the assistant guide and include a patch changeset

Known issues

• User-guide screenshot refreshes remain pending
• Live Brunch inference has not been exercised; the demo uses the Storybook transport fixture and does not send an AI request

Test coverage

• All 20 local build, unit-test, TypeScript, and lint tasks passed on the final main-based revision, including 1,280 Petrinaut tests and 691 website tests; diff and formatting checks also passed
• The recorded browser flow verifies shortcut opening, draft entry, floating, header dragging, diagonal corner resizing, and docking with the draft preserved; no browser errors were reported
• Thirty-four resize geometry tests cover all edges and corners, fixed opposite edges, size limits, editor bounds, and continued movement when one axis reaches its limit
• Seven resize regression tests preserve saved width and height during constrained single-axis drags and when a corner returns to its starting position
• Assistant tests cover draft and transcript preservation, host-control lifetime, close/reopen behavior, stopping responses, and compact Voice setup under React Strict Mode
• Command tests cover availability, current callbacks, both platform modifiers, input focus, shortcut isolation, and listener cleanup
• Toolbar and canvas-inset tests cover properties-panel clearance, floating layout, compact Voice setup, and tight editor bounds
• The final main-based browser check verified compact Voice clearance and expansion, floating and docking with a draft preserved, and nonselectable header text. Earlier browser checks verified all resize targets, 49px highlight fades, the full-height docked divider, composer measurements, nonselectable header text, tab navigation, icon motion, and draft preservation across editor views
• Earlier Brunch compatibility checks passed for transport, SDCPN plugin, and focused server tests

How to test

• Run yarn workspace @hashintel/petrinaut dev and open Petrinaut → With AI Assistant
• Press Cmd/Ctrl+Shift+K

  The docked assistant opens and its message field receives focus. Repeating the shortcut closes it without changing the current editor view.

• Type an unsent draft

  Clear AI chat remains hidden. The single-line composer action has equal top, right, and bottom spacing.

• Choose Float AI assistant and drag empty header space

  The canvas reclaims the sidebar width. Header text remains unselected, and tabs and action buttons work independently.

• Hover and resize from each edge and corner

  Border highlights fade along the edges. The opposite edge or corner stays fixed, and the panel remains inside the editor.

• Reduce the editor size, resize vertically, then enlarge the editor again

  The saved width returns. A horizontal resize in a short editor similarly preserves the saved height.

• Choose Dock AI assistant, then drag near the top and bottom of its left edge

  The draft is preserved, and the resize highlight spans the panel's full height.

• Switch between Edit, Simulate, and Notebook with a draft present

  The draft and floating or docked layout survive. Enable Notebook in Settings if needed.

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

  The selected tab and draft survive. Left/right arrow keys switch tabs independently of panel movement.

• Open Petrinaut → With Voice Setup, choose Start voice mode, then Expand voice setup

  Compact setup leaves the canvas controls visible; expansion restores the full sidebar. This fixture uses no microphone or AI service.

[vercel]

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

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

1 Skipped Deployment

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

[cursor]

PR Summary

Medium Risk
Touches editor layout, global keyboard shortcuts, and AI panel lifecycle across modes; regressions could affect canvas chrome overlap or shortcut conflicts, but behavior is heavily tested and scoped to UI state.

Overview
Reworks the Petrinaut AI assistant so it opens in a right-hand docked sidebar (own layout column, not stacked on canvas insets) and can detach into a draggable, resizable floating panel with edge/corner handles and session-preserved placement/size.

Adds aiAssistantPlacement and isAiAssistantCollapsed editor state, panel open/close animations, and canvas inset / minimap / bottom-toolbar logic so floating mode reclaims canvas width while compact Voice setup still clears controls. Registers Toggle AI assistant (Cmd/Ctrl+Shift+K, capture-phase) and reserves that chord so Cmd/Ctrl+K stays the command palette; palette also closes on focus leaving the dialog.

UI/UX polish: float/dock header controls, draggable header + keyboard move, refreshed composer/header styling, Clear AI chat only when messages exist, focus on toggle, and transcript scroll confined to the panel. Docs and changeset updated; broad unit/integration test coverage for resize geometry, docking lifecycle, and shortcuts.

^{Reviewed by Cursor Bugbot for commit 3089322. 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]

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