From a9ced6af57b9957cce469f08305d154fea18415d Mon Sep 17 00:00:00 2001
From: Sambit Biswas <sambit.biswas2@gmail.com>
Date: Fri, 4 Sep 2026 21:50:08 -0400
Subject: [PATCH 1/6] Add editable queued chat follow-ups and steering controls

---
 .papercuts/troubleshooting.md                |   5 +
 package.json                                 |   8 +-
 renderer/components/composer.test.tsx        |   2 +-
 renderer/components/composer.tsx             |  32 ++-
 renderer/components/onboarding-flow.test.tsx |   1 +
 renderer/components/onboarding-flow.tsx      |   2 +-
 renderer/components/queued-messages.tsx      | 231 +++++++++++++++++++
 renderer/lib/chat-deletion-cache.test.ts     |   5 +
 renderer/lib/chat-deletion-cache.ts          |   2 +
 renderer/lib/chat-message-queue.test.ts      | 217 +++++++++++++++++
 renderer/lib/chat-message-queue.ts           | 174 ++++++++++++++
 renderer/lib/use-chat-message-queue.ts       |  42 ++++
 renderer/main/chat-pane.tsx                  |  43 +++-
 tests/e2e/chat-message-queue.spec.ts         | 206 +++++++++++++++++
 tests/e2e/fixtures.ts                        |  45 +++-
 15 files changed, 990 insertions(+), 25 deletions(-)
 create mode 100644 renderer/components/queued-messages.tsx
 create mode 100644 renderer/lib/chat-message-queue.test.ts
 create mode 100644 renderer/lib/chat-message-queue.ts
 create mode 100644 renderer/lib/use-chat-message-queue.ts
 create mode 100644 tests/e2e/chat-message-queue.spec.ts

diff --git a/.papercuts/troubleshooting.md b/.papercuts/troubleshooting.md
index a037eb5d..ce65c097 100644
--- a/.papercuts/troubleshooting.md
+++ b/.papercuts/troubleshooting.md
@@ -311,3 +311,8 @@ owns; reopen the terminal before judging the final live state.
   platform-independent test that exercises both certificate and keychain paths.
 - A changelog search conflated the stable and prerelease lines. Verify published
   package code before assuming a release contains the upstream patch.
+
+## 2026-09-04: queued composer controls
+- This detached worktree had no .memory directory. Read the canonical checkout's PROJECT-CONTEXT.md and PLANNED.md before implementation; wrote scoped memory here.
+- Pi harness queueSteer/queueFollowUp are not exposed through the foreground durable transcript path. Use Stop → persistence barrier → normal append for the desktop Steer action and explain its behavior in the control tooltip.
+- E2E TypeScript uses an older lib target; use reverse/find rather than Array.at in new test helpers.
diff --git a/package.json b/package.json
index 91758a29..bc6eb99a 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "test:aiden-remote-speech": "tsx --test main/services/aiden-remote-speech.test.ts",
     "pretest": "npm run build:worktree-remover && npm run test:aiden-remote-speech && npm run test:aiden-remote && npm run test:aiden-service-boundary && npm run test:memory-policy && npm run test:ios-release && npm run test:terminal:coverage && npm run test:onboarding && npm run test:assistant-automations && npm run test:slash-commands && npm run test:display-image && npm run test:ask-user-question && npm run test:todo && npm run test:btw && npm run test:advisor && npm run test:generative-ui && npm run test:provider-failure && npm run test:web-search && npm run test:compaction && npm run test:subagents && tsx --test main/services/pi-remote-catalog.test.ts main/services/provider-model-info-core.test.ts main/services/aiden-remote-models.test.ts renderer/shared/provider-thinking.test.ts && npm run test:bots && npm run test:voice && npm run test:sidebar",
     "pretest:coverage": "npm run build:worktree-remover && npm run build:subagent-run-store && npm run test:preflight && npm run test:scheduled && npm run test:memory-policy && npm run test:google-provider && npm run test:config-recovery && npm run test:command-system && npm run test:slash-commands && npm run test:display-image && npm run test:generative-ui && npm run test:compaction && npm run test:subagents && npm run test:bots:coverage",
-    "test:preflight": "npm run test:artificial-analysis && npm run test:model-pad && tsx --test main/services/appearance-preview-core.test.ts main/services/generation-timeline.test.ts main/services/local-runtime-status.test.ts main/services/mcp-tool-result.test.ts main/services/pi-thinking-disclosure.integration.test.ts renderer/components/activity-feed.test.tsx renderer/components/chat-sidebar.test.tsx renderer/components/composer.test.tsx renderer/components/settings/providers-settings.test.tsx renderer/main/chat-transition.test.tsx renderer/components/reasoning-block.test.tsx renderer/components/reasoning-visibility-control.test.tsx renderer/components/thinking-control.test.tsx renderer/lib/agent-steps.test.ts renderer/lib/button-appearance-contract.test.ts renderer/lib/dialog-motion-contract.test.ts renderer/lib/inline-metadata-hierarchy.test.ts renderer/lib/scrollbar-gutter-contract.test.ts renderer/lib/text-entry-focus-contract.test.ts renderer/lib/pill-appearance.test.ts renderer/lib/reasoning-disclosure.test.ts renderer/lib/streaming-motion-contract.test.ts renderer/lib/streaming-reveal.test.ts renderer/lib/voice-recorder-core.test.ts renderer/lib/media-recorder-stop.test.ts renderer/lib/dictation-vad.test.ts renderer/lib/dictation-sounds.test.ts renderer/pill-preload-channels.test.ts renderer/shared/anthropic-thinking.test.ts renderer/shared/app-update.test.ts renderer/shared/claim-check.test.ts renderer/shared/codex-thinking.test.ts renderer/shared/google-thinking.test.ts renderer/shared/provider-deployment.test.ts",
+    "test:preflight": "npm run test:artificial-analysis && npm run test:model-pad && tsx --test main/services/appearance-preview-core.test.ts main/services/generation-timeline.test.ts main/services/local-runtime-status.test.ts main/services/mcp-tool-result.test.ts main/services/pi-thinking-disclosure.integration.test.ts renderer/components/activity-feed.test.tsx renderer/components/chat-sidebar.test.tsx renderer/components/composer.test.tsx renderer/lib/chat-message-queue.test.ts renderer/components/settings/providers-settings.test.tsx renderer/main/chat-transition.test.tsx renderer/components/reasoning-block.test.tsx renderer/components/reasoning-visibility-control.test.tsx renderer/components/thinking-control.test.tsx renderer/lib/agent-steps.test.ts renderer/lib/button-appearance-contract.test.ts renderer/lib/dialog-motion-contract.test.ts renderer/lib/inline-metadata-hierarchy.test.ts renderer/lib/scrollbar-gutter-contract.test.ts renderer/lib/text-entry-focus-contract.test.ts renderer/lib/pill-appearance.test.ts renderer/lib/reasoning-disclosure.test.ts renderer/lib/streaming-motion-contract.test.ts renderer/lib/streaming-reveal.test.ts renderer/lib/voice-recorder-core.test.ts renderer/lib/media-recorder-stop.test.ts renderer/lib/dictation-vad.test.ts renderer/lib/dictation-sounds.test.ts renderer/pill-preload-channels.test.ts renderer/shared/anthropic-thinking.test.ts renderer/shared/app-update.test.ts renderer/shared/claim-check.test.ts renderer/shared/codex-thinking.test.ts renderer/shared/google-thinking.test.ts renderer/shared/provider-deployment.test.ts",
     "test:sidebar": "tsx --test renderer/components/chat-sidebar.test.tsx renderer/lib/sidebar-workspace-groups.test.ts renderer/lib/sidebar-chat-shortcuts.test.ts",
     "test:aiden-remote": "tsx --test main/handlers/aiden-remote.test.ts main/services/aiden-remote-chat-summaries.test.ts main/services/aiden-remote-approved-roots.test.ts main/services/aiden-remote-revocation.test.ts main/services/aiden-remote-bot-files.test.ts main/services/aiden-remote-bots.test.ts main/services/aiden-remote-chat-http.test.ts main/services/aiden-remote-chats.test.ts main/services/aiden-remote-files.test.ts main/services/aiden-remote-git.test.ts main/services/aiden-remote-models.test.ts main/services/aiden-remote-protocol.test.ts main/services/aiden-remote-opaque-handles.test.ts main/services/aiden-remote-operation-contract.test.ts main/services/aiden-remote-pairing.test.ts main/services/aiden-remote-ports.test.ts main/services/aiden-remote-router.test.ts main/services/aiden-remote-schedules.test.ts main/services/aiden-remote-service.test.ts main/services/aiden-remote-state.test.ts main/services/aiden-remote-streams.test.ts main/services/aiden-remote-tailscale-route.test.ts main/services/aiden-remote-tailscale.test.ts main/services/aiden-remote-tls-identity.test.ts main/services/aiden-remote-workspace-browser.test.ts main/services/aiden-remote-workspace-http.test.ts main/services/aiden-remote-workspaces.test.ts renderer/components/remote-connection-popover.test.tsx renderer/components/settings/remote-access-settings.test.tsx renderer/lib/remote-approval.test.ts renderer/lib/remote-connection-status.test.ts renderer/lib/remote-pairing-lifecycle.test.ts renderer/lib/settings-section.test.ts && node --test scripts/aiden-remote-lan-transport-spike.test.mjs",
     "test:aiden-remote-chat-summaries": "tsx --test main/services/aiden-remote-chat-summaries.test.ts",
@@ -63,7 +63,7 @@
     "test:model-insights": "tsx --test main/services/openrouter-benchmark.test.ts main/services/models.test.ts main/services/provider-model-info-core.test.ts main/handlers/ipc-contract.test.ts",
     "test:model-pad": "tsx --test renderer/components/settings/model-pad-settings.test.tsx renderer/lib/google-provider-migration.test.ts renderer/lib/model-pad-layout.test.ts renderer/lib/model-picker-data.test.ts renderer/lib/pi-provider-display.test.ts",
     "test:command-system": "tsx --test main/services/native-menu-command-contract.test.ts main/services/renderer-readiness-core.test.ts main/services/shortcut-registration-core.test.ts main/services/shortcut-transaction-core.test.ts main/services/superseding-task-core.test.ts renderer/lib/appearance-intent.test.ts renderer/lib/command-palette-contract.test.ts renderer/lib/command-palette-recent.test.ts renderer/lib/command-system-core.test.ts renderer/lib/shortcut-settings-contract.test.ts renderer/lib/use-model-selection.test.ts renderer/shared/keybindings.test.ts",
-    "test:slash-commands": "tsx --test main/services/generation-initialization-terminal.test.ts main/handlers/attachments.contract.test.ts main/handlers/chat.parse.test.ts main/handlers/chat-create-params.test.ts main/handlers/chat-session-params.test.ts main/handlers/worktree-create-params.test.ts main/services/chat-workspace-authority.test.ts main/handlers/chats.append.contract.test.ts main/services/attachment-contract.test.ts main/services/attachments.test.ts main/services/chat-append-commit.test.ts main/services/chat-export.test.ts main/services/chat-message-contract.test.ts main/services/chat-session-copy.test.ts main/services/chat-store-core.test.ts main/services/chat-turn-admission.test.ts main/services/generation-messages.test.ts main/services/provider-auth-flow-core.test.ts main/services/provider-list-core.test.ts main/services/provider-artwork-core.test.ts main/services/scheduled-chat-creation.test.ts main/services/skill-invocation-flow.integration.test.ts main/services/skill-invocation-turn.test.ts main/services/skill-registry-core.test.ts main/services/skill-registry.test.ts main/services/skill-tools.test.ts main/services/skills-discovery.test.ts renderer/components/assistant/assistant-ui.test.tsx renderer/components/assistant/use-assistant-chat.test.ts renderer/components/composer.test.tsx renderer/components/message-bubble.test.tsx renderer/lib/chat-copy-view.test.ts renderer/lib/codex-provider-cache.test.ts renderer/lib/computer-use-control.test.ts renderer/lib/ipc-stream.test.ts renderer/lib/skill-catalog-workspace.test.ts renderer/lib/slash-command-actions.test.ts renderer/lib/slash-command-core.test.ts renderer/lib/slash-command-performance.test.ts renderer/main/chat-transition.test.tsx renderer/shared/attachment-contract.test.ts renderer/shared/chat-message-contract.test.ts renderer/shared/slash-commands.test.ts",
+    "test:slash-commands": "tsx --test main/services/generation-initialization-terminal.test.ts main/handlers/attachments.contract.test.ts main/handlers/chat.parse.test.ts main/handlers/chat-create-params.test.ts main/handlers/chat-session-params.test.ts main/handlers/worktree-create-params.test.ts main/services/chat-workspace-authority.test.ts main/handlers/chats.append.contract.test.ts main/services/attachment-contract.test.ts main/services/attachments.test.ts main/services/chat-append-commit.test.ts main/services/chat-export.test.ts main/services/chat-message-contract.test.ts main/services/chat-session-copy.test.ts main/services/chat-store-core.test.ts main/services/chat-turn-admission.test.ts main/services/generation-messages.test.ts main/services/provider-auth-flow-core.test.ts main/services/provider-list-core.test.ts main/services/provider-artwork-core.test.ts main/services/scheduled-chat-creation.test.ts main/services/skill-invocation-flow.integration.test.ts main/services/skill-invocation-turn.test.ts main/services/skill-registry-core.test.ts main/services/skill-registry.test.ts main/services/skill-tools.test.ts main/services/skills-discovery.test.ts renderer/components/assistant/assistant-ui.test.tsx renderer/components/assistant/use-assistant-chat.test.ts renderer/components/composer.test.tsx renderer/lib/chat-message-queue.test.ts renderer/components/message-bubble.test.tsx renderer/lib/chat-copy-view.test.ts renderer/lib/codex-provider-cache.test.ts renderer/lib/computer-use-control.test.ts renderer/lib/ipc-stream.test.ts renderer/lib/skill-catalog-workspace.test.ts renderer/lib/slash-command-actions.test.ts renderer/lib/slash-command-core.test.ts renderer/lib/slash-command-performance.test.ts renderer/main/chat-transition.test.tsx renderer/shared/attachment-contract.test.ts renderer/shared/chat-message-contract.test.ts renderer/shared/slash-commands.test.ts",
     "test:display-image": "tsx --test main/services/display-image-artifact-store.test.ts main/services/display-image-extension.test.ts main/services/generation-timeline.test.ts renderer/components/message-bubble.test.tsx renderer/lib/ipc-stream.test.ts",
     "test:ask-user-question": "tsx --test renderer/shared/ask-user-question.test.ts main/services/ask-user-question-coordinator.test.ts main/services/ask-user-question-extension.test.ts renderer/components/ask-user-question-composer.test.ts",
     "test:todo": "tsx --test main/services/rpiv-todo/*.test.ts renderer/shared/todo.test.ts renderer/components/todo-panel.test.tsx main/services/generation-timeline.test.ts main/handlers/ipc-contract.test.ts renderer/lib/ipc-stream.test.ts",
@@ -109,8 +109,8 @@
     "test:voice": "tsx --test main/services/transcription-core.test.ts main/services/gemini-live-transcription-core.test.ts main/services/dictation-coordinator.test.ts main/services/dictation-paste.test.ts main/services/parakeet-protocol.test.ts main/services/parakeet-process-core.test.ts main/services/parakeet-transcription-lane.test.ts renderer/shared/voice-models.test.ts renderer/shared/gemini-usage-scope.test.ts renderer/components/settings/gemini-voice-setup.test.tsx renderer/lib/accessibility-permission-core.test.ts renderer/lib/accessibility-refresh.test.ts renderer/lib/dictation-operation-gate.test.ts renderer/lib/gemini-recorded-retry.test.ts renderer/lib/live-pcm-capture.test.ts renderer/lib/voice-recorder-core.test.ts renderer/lib/wav-audio.test.ts",
     "test:diagnostics": "tsx --test main/services/diagnostics-contract.test.ts main/services/diagnostic-health.test.ts main/services/diagnostic-journal.test.ts main/services/diagnostic-support.test.ts main/services/dev-log.test.ts main/services/process-diagnostics.test.ts main/services/renderer-crash-recovery.test.ts main/services/renderer-diagnostic-rate.test.ts main/services/subagents/subagent-runtime-diagnostics.test.ts renderer/components/settings/diagnostics-settings.test.tsx && node --test scripts/diagnostic-policy.test.mjs",
     "diagnostics:failure-receipt": "node scripts/write-diagnostic-failure-receipt.mjs",
-    "test": "tsx --test main/services/mcp-oauth-client-metadata.test.ts main/handlers/assistant-parse.test.ts main/services/assistant/system-prompt.test.ts main/services/chat-activity-core.test.ts main/services/chat-generation-start.test.ts main/services/chat-title-policy.test.ts main/services/chat-title-routing.test.ts main/services/chat-store-core.test.ts main/services/codex-provider.test.ts main/services/coding-tools.test.ts main/services/config-store-core.test.ts main/services/computer-use/computer-use-foundation.test.ts main/services/computer-use/computer-use-tool.test.ts main/services/computer-use/generation-gate.test.ts main/services/computer-use/safety.test.ts main/services/computer-use/settings-core.test.ts main/services/computer-use/status-core.test.ts main/services/data-store.test.ts main/services/data-store.resilience.test.ts main/services/terminal.test.ts main/services/terminal-history.test.ts main/services/aiden-config-dir.test.ts main/services/portable-config-core.test.ts main/services/portable-config-core.roundtrip.test.ts main/services/portable-config-watch-core.test.ts main/services/secret-map-core.test.ts main/services/dev-log.test.ts main/services/process-diagnostics.test.ts main/services/dictation-coordinator.test.ts main/services/dictation-paste.test.ts main/services/dictation-cleanup-core.test.ts main/services/dictation-hotkey.test.ts main/services/dictation-key-state.test.ts main/services/dictation-keycode.test.ts main/services/parakeet-protocol.test.ts main/services/parakeet-process-core.test.ts main/services/foundation-models-connection.test.ts main/services/foundation-models-connection-core.test.ts main/services/gemini-context-cache.test.ts main/services/generation-bound-connection-cache.test.ts main/services/generation-context.test.ts main/services/generation-messages.test.ts main/services/generation-runtime.test.ts main/services/external-editors.test.ts main/services/git.test.ts main/services/model-runtime-core.test.ts main/services/models.test.ts main/services/mcp-oauth-operation.test.ts main/services/mcp-oauth-session.test.ts main/services/mcp-presets.test.ts renderer/shared/plugin-catalog.test.ts main/services/pi-credential-store-core.test.ts main/services/pi-provider-contract.test.ts main/services/profile-share-core.test.ts main/services/profile-share-files.test.ts main/services/profile.test.ts main/services/provider-auth-flow-core.test.ts main/services/provider-auth-owner.test.ts main/services/provider-key-policy.test.ts main/services/provider-list-core.test.ts main/services/provider-artwork-core.test.ts main/services/quit-barrier.test.ts main/services/scratch-workspace.test.ts main/services/skills-discovery.test.ts main/services/tool-approval.test.ts main/services/local-runtime-status.test.ts main/services/usage-store-core.test.ts main/services/workspace-files.test.ts main/windows/pill-window-security.test.ts renderer/components/assistant/use-assistant-chat.test.ts renderer/components/assistant/assistant-ui.test.tsx renderer/components/activity-feed.test.tsx renderer/components/environment-subagents-contract.test.ts renderer/components/subagents-panel.test.tsx renderer/components/chat-sidebar.test.tsx renderer/components/composer.test.tsx renderer/main/chat-transition.test.tsx renderer/components/usage/profile-share-card.test.tsx renderer/lib/accessibility-refresh.test.ts renderer/lib/agent-activity.test.ts renderer/lib/chat-activity.test.ts renderer/lib/assistant-dock.test.ts renderer/lib/assistant-motion-contract.test.ts renderer/lib/dialog-motion-contract.test.ts renderer/lib/scrollbar-gutter-contract.test.ts renderer/lib/text-entry-focus-contract.test.ts renderer/lib/chat-deletion-cache.test.ts renderer/lib/chat-terminal-sync.test.ts renderer/lib/ipc-stream.test.ts renderer/lib/chat-title-reveal.test.ts renderer/lib/codex-auth-session.test.ts renderer/lib/codex-provider-cache.test.ts renderer/lib/composer-placeholder.test.ts renderer/lib/computer-use-notice.test.ts renderer/lib/dictation-operation-gate.test.ts renderer/lib/media-recorder-stop.test.ts renderer/lib/dictation-vad.test.ts renderer/lib/dictation-sounds.test.ts renderer/lib/editor-preference.test.ts renderer/lib/environment-panel-layout.test.ts renderer/lib/subagent-view-state.test.ts renderer/lib/truncate-path.test.ts renderer/lib/mcp-preset-state.test.ts renderer/components/settings/mcp-settings.test.tsx renderer/components/settings/mcp-preset-icons.test.ts renderer/lib/model-display.test.ts renderer/lib/model-picker-data.test.ts renderer/lib/profile-share-data.test.ts renderer/lib/sidebar-chat-shortcuts.test.ts renderer/lib/usage-profile-data.test.ts renderer/shared/appearance.test.ts renderer/components/interface-polish.test.tsx renderer/shared/provider-deployment.test.ts main/handlers/ipc-contract.test.ts main/handlers/chat.parse.test.ts main/handlers/voice-codec.test.ts main/handlers/phase2-parse.test.ts scripts/apple-developer-tools.test.mjs scripts/check-macos-release.test.mjs scripts/computer-use-packaged-acceptance.test.mjs scripts/configure-electron-fuses.test.mjs scripts/model-snapshot-core.test.mjs scripts/prepare-macos-dev-runtime.test.mjs scripts/prepare-macos-package-output.test.mjs scripts/run-macos-distribution.test.mjs scripts/sign-macos.test.mjs scripts/hide-dmg-support-files.test.mjs scripts/update-model-capabilities.test.mjs scripts/vendor-cua-driver.test.mjs scripts/verify-macos-package.test.mjs && npm run test:telegram && npm run test:worktree-remover:native && npm run test:computer-use:native",
-    "test:coverage": "tsx --test --experimental-test-coverage main/services/mcp-oauth-client-metadata.test.ts main/handlers/assistant-parse.test.ts main/services/assistant/system-prompt.test.ts main/services/chat-activity-core.test.ts main/services/chat-generation-start.test.ts main/services/chat-title-policy.test.ts main/services/chat-title-routing.test.ts main/services/chat-store-core.test.ts main/services/codex-provider.test.ts main/services/coding-tools.test.ts main/services/config-store-core.test.ts main/services/computer-use/computer-use-foundation.test.ts main/services/computer-use/computer-use-tool.test.ts main/services/computer-use/generation-gate.test.ts main/services/computer-use/safety.test.ts main/services/computer-use/settings-core.test.ts main/services/computer-use/status-core.test.ts main/services/data-store.test.ts main/services/data-store.resilience.test.ts main/services/terminal.test.ts main/services/terminal-history.test.ts main/services/aiden-config-dir.test.ts main/services/portable-config-core.test.ts main/services/portable-config-core.roundtrip.test.ts main/services/portable-config-watch-core.test.ts main/services/dev-log.test.ts main/services/process-diagnostics.test.ts main/services/dictation-coordinator.test.ts main/services/dictation-paste.test.ts main/services/dictation-cleanup-core.test.ts main/services/dictation-hotkey.test.ts main/services/dictation-key-state.test.ts main/services/dictation-keycode.test.ts main/services/parakeet-protocol.test.ts main/services/parakeet-process-core.test.ts main/services/foundation-models-connection.test.ts main/services/foundation-models-connection-core.test.ts main/services/generation-bound-connection-cache.test.ts main/services/generation-context.test.ts main/services/generation-messages.test.ts main/services/generation-runtime.test.ts main/services/external-editors.test.ts main/services/git.test.ts main/services/model-runtime-core.test.ts main/services/pi-compaction-core.test.ts main/services/models.test.ts main/services/mcp-oauth-operation.test.ts main/services/mcp-oauth-session.test.ts main/services/mcp-presets.test.ts renderer/shared/plugin-catalog.test.ts main/services/pi-credential-store-core.test.ts main/services/pi-provider-contract.test.ts main/services/profile-share-core.test.ts main/services/profile-share-files.test.ts main/services/profile.test.ts main/services/provider-auth-flow-core.test.ts main/services/provider-auth-owner.test.ts main/services/provider-key-policy.test.ts main/services/provider-list-core.test.ts main/services/provider-artwork-core.test.ts main/services/quit-barrier.test.ts main/services/scratch-workspace.test.ts main/services/skills-discovery.test.ts main/services/tool-approval.test.ts main/services/local-runtime-status.test.ts main/services/usage-store-core.test.ts main/services/workspace-files.test.ts main/windows/pill-window-security.test.ts renderer/components/assistant/use-assistant-chat.test.ts renderer/components/assistant/assistant-ui.test.tsx renderer/components/environment-subagents-contract.test.ts renderer/components/subagents-panel.test.tsx renderer/components/chat-sidebar.test.tsx renderer/components/composer.test.tsx renderer/main/chat-transition.test.tsx renderer/components/usage/profile-share-card.test.tsx renderer/lib/accessibility-refresh.test.ts renderer/lib/agent-activity.test.ts renderer/lib/chat-activity.test.ts renderer/lib/assistant-dock.test.ts renderer/lib/assistant-motion-contract.test.ts renderer/lib/dialog-motion-contract.test.ts renderer/lib/chat-deletion-cache.test.ts renderer/lib/chat-terminal-sync.test.ts renderer/lib/ipc-stream.test.ts renderer/lib/chat-title-reveal.test.ts renderer/lib/codex-auth-session.test.ts renderer/lib/codex-auth-view-state.test.ts renderer/lib/codex-provider-cache.test.ts renderer/lib/composer-placeholder.test.ts renderer/lib/computer-use-notice.test.ts renderer/lib/dictation-operation-gate.test.ts renderer/lib/media-recorder-stop.test.ts renderer/lib/dictation-vad.test.ts renderer/lib/dictation-sounds.test.ts renderer/lib/editor-preference.test.ts renderer/lib/environment-panel-layout.test.ts renderer/lib/subagent-view-state.test.ts renderer/lib/truncate-path.test.ts renderer/lib/mcp-preset-state.test.ts renderer/components/settings/mcp-settings.test.tsx renderer/components/settings/mcp-preset-icons.test.ts renderer/lib/model-display.test.ts renderer/lib/profile-share-data.test.ts renderer/lib/sidebar-chat-shortcuts.test.ts renderer/lib/usage-profile-data.test.ts renderer/shared/appearance.test.ts renderer/shared/provider-deployment.test.ts main/handlers/ipc-contract.test.ts main/handlers/chat.parse.test.ts main/handlers/voice-codec.test.ts main/handlers/phase2-parse.test.ts scripts/apple-developer-tools.test.mjs scripts/check-macos-release.test.mjs scripts/computer-use-packaged-acceptance.test.mjs scripts/configure-electron-fuses.test.mjs scripts/model-snapshot-core.test.mjs scripts/prepare-macos-dev-runtime.test.mjs scripts/prepare-macos-package-output.test.mjs scripts/run-macos-distribution.test.mjs scripts/sign-macos.test.mjs scripts/update-model-capabilities.test.mjs scripts/vendor-cua-driver.test.mjs scripts/verify-macos-package.test.mjs",
+    "test": "tsx --test main/services/mcp-oauth-client-metadata.test.ts main/handlers/assistant-parse.test.ts main/services/assistant/system-prompt.test.ts main/services/chat-activity-core.test.ts main/services/chat-generation-start.test.ts main/services/chat-title-policy.test.ts main/services/chat-title-routing.test.ts main/services/chat-store-core.test.ts main/services/codex-provider.test.ts main/services/coding-tools.test.ts main/services/config-store-core.test.ts main/services/computer-use/computer-use-foundation.test.ts main/services/computer-use/computer-use-tool.test.ts main/services/computer-use/generation-gate.test.ts main/services/computer-use/safety.test.ts main/services/computer-use/settings-core.test.ts main/services/computer-use/status-core.test.ts main/services/data-store.test.ts main/services/data-store.resilience.test.ts main/services/terminal.test.ts main/services/terminal-history.test.ts main/services/aiden-config-dir.test.ts main/services/portable-config-core.test.ts main/services/portable-config-core.roundtrip.test.ts main/services/portable-config-watch-core.test.ts main/services/secret-map-core.test.ts main/services/dev-log.test.ts main/services/process-diagnostics.test.ts main/services/dictation-coordinator.test.ts main/services/dictation-paste.test.ts main/services/dictation-cleanup-core.test.ts main/services/dictation-hotkey.test.ts main/services/dictation-key-state.test.ts main/services/dictation-keycode.test.ts main/services/parakeet-protocol.test.ts main/services/parakeet-process-core.test.ts main/services/foundation-models-connection.test.ts main/services/foundation-models-connection-core.test.ts main/services/gemini-context-cache.test.ts main/services/generation-bound-connection-cache.test.ts main/services/generation-context.test.ts main/services/generation-messages.test.ts main/services/generation-runtime.test.ts main/services/external-editors.test.ts main/services/git.test.ts main/services/model-runtime-core.test.ts main/services/models.test.ts main/services/mcp-oauth-operation.test.ts main/services/mcp-oauth-session.test.ts main/services/mcp-presets.test.ts renderer/shared/plugin-catalog.test.ts main/services/pi-credential-store-core.test.ts main/services/pi-provider-contract.test.ts main/services/profile-share-core.test.ts main/services/profile-share-files.test.ts main/services/profile.test.ts main/services/provider-auth-flow-core.test.ts main/services/provider-auth-owner.test.ts main/services/provider-key-policy.test.ts main/services/provider-list-core.test.ts main/services/provider-artwork-core.test.ts main/services/quit-barrier.test.ts main/services/scratch-workspace.test.ts main/services/skills-discovery.test.ts main/services/tool-approval.test.ts main/services/local-runtime-status.test.ts main/services/usage-store-core.test.ts main/services/workspace-files.test.ts main/windows/pill-window-security.test.ts renderer/components/assistant/use-assistant-chat.test.ts renderer/components/assistant/assistant-ui.test.tsx renderer/components/activity-feed.test.tsx renderer/components/environment-subagents-contract.test.ts renderer/components/subagents-panel.test.tsx renderer/components/chat-sidebar.test.tsx renderer/components/composer.test.tsx renderer/lib/chat-message-queue.test.ts renderer/main/chat-transition.test.tsx renderer/components/usage/profile-share-card.test.tsx renderer/lib/accessibility-refresh.test.ts renderer/lib/agent-activity.test.ts renderer/lib/chat-activity.test.ts renderer/lib/assistant-dock.test.ts renderer/lib/assistant-motion-contract.test.ts renderer/lib/dialog-motion-contract.test.ts renderer/lib/scrollbar-gutter-contract.test.ts renderer/lib/text-entry-focus-contract.test.ts renderer/lib/chat-deletion-cache.test.ts renderer/lib/chat-terminal-sync.test.ts renderer/lib/ipc-stream.test.ts renderer/lib/chat-title-reveal.test.ts renderer/lib/codex-auth-session.test.ts renderer/lib/codex-provider-cache.test.ts renderer/lib/composer-placeholder.test.ts renderer/lib/computer-use-notice.test.ts renderer/lib/dictation-operation-gate.test.ts renderer/lib/media-recorder-stop.test.ts renderer/lib/dictation-vad.test.ts renderer/lib/dictation-sounds.test.ts renderer/lib/editor-preference.test.ts renderer/lib/environment-panel-layout.test.ts renderer/lib/subagent-view-state.test.ts renderer/lib/truncate-path.test.ts renderer/lib/mcp-preset-state.test.ts renderer/components/settings/mcp-settings.test.tsx renderer/components/settings/mcp-preset-icons.test.ts renderer/lib/model-display.test.ts renderer/lib/model-picker-data.test.ts renderer/lib/profile-share-data.test.ts renderer/lib/sidebar-chat-shortcuts.test.ts renderer/lib/usage-profile-data.test.ts renderer/shared/appearance.test.ts renderer/components/interface-polish.test.tsx renderer/shared/provider-deployment.test.ts main/handlers/ipc-contract.test.ts main/handlers/chat.parse.test.ts main/handlers/voice-codec.test.ts main/handlers/phase2-parse.test.ts scripts/apple-developer-tools.test.mjs scripts/check-macos-release.test.mjs scripts/computer-use-packaged-acceptance.test.mjs scripts/configure-electron-fuses.test.mjs scripts/model-snapshot-core.test.mjs scripts/prepare-macos-dev-runtime.test.mjs scripts/prepare-macos-package-output.test.mjs scripts/run-macos-distribution.test.mjs scripts/sign-macos.test.mjs scripts/hide-dmg-support-files.test.mjs scripts/update-model-capabilities.test.mjs scripts/vendor-cua-driver.test.mjs scripts/verify-macos-package.test.mjs && npm run test:telegram && npm run test:worktree-remover:native && npm run test:computer-use:native",
+    "test:coverage": "tsx --test --experimental-test-coverage main/services/mcp-oauth-client-metadata.test.ts main/handlers/assistant-parse.test.ts main/services/assistant/system-prompt.test.ts main/services/chat-activity-core.test.ts main/services/chat-generation-start.test.ts main/services/chat-title-policy.test.ts main/services/chat-title-routing.test.ts main/services/chat-store-core.test.ts main/services/codex-provider.test.ts main/services/coding-tools.test.ts main/services/config-store-core.test.ts main/services/computer-use/computer-use-foundation.test.ts main/services/computer-use/computer-use-tool.test.ts main/services/computer-use/generation-gate.test.ts main/services/computer-use/safety.test.ts main/services/computer-use/settings-core.test.ts main/services/computer-use/status-core.test.ts main/services/data-store.test.ts main/services/data-store.resilience.test.ts main/services/terminal.test.ts main/services/terminal-history.test.ts main/services/aiden-config-dir.test.ts main/services/portable-config-core.test.ts main/services/portable-config-core.roundtrip.test.ts main/services/portable-config-watch-core.test.ts main/services/dev-log.test.ts main/services/process-diagnostics.test.ts main/services/dictation-coordinator.test.ts main/services/dictation-paste.test.ts main/services/dictation-cleanup-core.test.ts main/services/dictation-hotkey.test.ts main/services/dictation-key-state.test.ts main/services/dictation-keycode.test.ts main/services/parakeet-protocol.test.ts main/services/parakeet-process-core.test.ts main/services/foundation-models-connection.test.ts main/services/foundation-models-connection-core.test.ts main/services/generation-bound-connection-cache.test.ts main/services/generation-context.test.ts main/services/generation-messages.test.ts main/services/generation-runtime.test.ts main/services/external-editors.test.ts main/services/git.test.ts main/services/model-runtime-core.test.ts main/services/pi-compaction-core.test.ts main/services/models.test.ts main/services/mcp-oauth-operation.test.ts main/services/mcp-oauth-session.test.ts main/services/mcp-presets.test.ts renderer/shared/plugin-catalog.test.ts main/services/pi-credential-store-core.test.ts main/services/pi-provider-contract.test.ts main/services/profile-share-core.test.ts main/services/profile-share-files.test.ts main/services/profile.test.ts main/services/provider-auth-flow-core.test.ts main/services/provider-auth-owner.test.ts main/services/provider-key-policy.test.ts main/services/provider-list-core.test.ts main/services/provider-artwork-core.test.ts main/services/quit-barrier.test.ts main/services/scratch-workspace.test.ts main/services/skills-discovery.test.ts main/services/tool-approval.test.ts main/services/local-runtime-status.test.ts main/services/usage-store-core.test.ts main/services/workspace-files.test.ts main/windows/pill-window-security.test.ts renderer/components/assistant/use-assistant-chat.test.ts renderer/components/assistant/assistant-ui.test.tsx renderer/components/environment-subagents-contract.test.ts renderer/components/subagents-panel.test.tsx renderer/components/chat-sidebar.test.tsx renderer/components/composer.test.tsx renderer/lib/chat-message-queue.test.ts renderer/main/chat-transition.test.tsx renderer/components/usage/profile-share-card.test.tsx renderer/lib/accessibility-refresh.test.ts renderer/lib/agent-activity.test.ts renderer/lib/chat-activity.test.ts renderer/lib/assistant-dock.test.ts renderer/lib/assistant-motion-contract.test.ts renderer/lib/dialog-motion-contract.test.ts renderer/lib/chat-deletion-cache.test.ts renderer/lib/chat-terminal-sync.test.ts renderer/lib/ipc-stream.test.ts renderer/lib/chat-title-reveal.test.ts renderer/lib/codex-auth-session.test.ts renderer/lib/codex-auth-view-state.test.ts renderer/lib/codex-provider-cache.test.ts renderer/lib/composer-placeholder.test.ts renderer/lib/computer-use-notice.test.ts renderer/lib/dictation-operation-gate.test.ts renderer/lib/media-recorder-stop.test.ts renderer/lib/dictation-vad.test.ts renderer/lib/dictation-sounds.test.ts renderer/lib/editor-preference.test.ts renderer/lib/environment-panel-layout.test.ts renderer/lib/subagent-view-state.test.ts renderer/lib/truncate-path.test.ts renderer/lib/mcp-preset-state.test.ts renderer/components/settings/mcp-settings.test.tsx renderer/components/settings/mcp-preset-icons.test.ts renderer/lib/model-display.test.ts renderer/lib/profile-share-data.test.ts renderer/lib/sidebar-chat-shortcuts.test.ts renderer/lib/usage-profile-data.test.ts renderer/shared/appearance.test.ts renderer/shared/provider-deployment.test.ts main/handlers/ipc-contract.test.ts main/handlers/chat.parse.test.ts main/handlers/voice-codec.test.ts main/handlers/phase2-parse.test.ts scripts/apple-developer-tools.test.mjs scripts/check-macos-release.test.mjs scripts/computer-use-packaged-acceptance.test.mjs scripts/configure-electron-fuses.test.mjs scripts/model-snapshot-core.test.mjs scripts/prepare-macos-dev-runtime.test.mjs scripts/prepare-macos-package-output.test.mjs scripts/run-macos-distribution.test.mjs scripts/sign-macos.test.mjs scripts/update-model-capabilities.test.mjs scripts/vendor-cua-driver.test.mjs scripts/verify-macos-package.test.mjs",
     "test:computer-use": "tsx --test main/services/computer-use/computer-use-foundation.test.ts main/services/computer-use/computer-use-tool.test.ts main/services/computer-use/generation-gate.test.ts main/services/computer-use/safety.test.ts main/services/computer-use/settings-core.test.ts main/services/computer-use/status-core.test.ts main/services/data-store.test.ts main/services/generation-messages.test.ts main/services/generation-runtime.test.ts main/services/quit-barrier.test.ts main/services/tool-approval.test.ts scripts/check-macos-release.test.mjs scripts/computer-use-packaged-acceptance.test.mjs scripts/configure-electron-fuses.test.mjs scripts/prepare-macos-package-output.test.mjs scripts/run-macos-distribution.test.mjs scripts/sign-macos.test.mjs scripts/vendor-cua-driver.test.mjs scripts/verify-macos-package.test.mjs && npm run test:computer-use:native",
     "test:computer-use:packaged": "node scripts/computer-use-packaged-acceptance.mjs",
     "test:computer-use:native": "cd native/computer-use-broker && CARGO_TARGET_DIR=../../build/computer-use-broker-test cargo fmt -- --check && CARGO_TARGET_DIR=../../build/computer-use-broker-test cargo test --locked && CARGO_TARGET_DIR=../../build/computer-use-broker-test cargo clippy --locked --all-targets -- -D warnings",
diff --git a/renderer/components/composer.test.tsx b/renderer/components/composer.test.tsx
index 70f6439c..7cdfba9b 100644
--- a/renderer/components/composer.test.tsx
+++ b/renderer/components/composer.test.tsx
@@ -167,7 +167,7 @@ test("composer slash palette is an overlaid textarea-owned accessible listbox",
   assert.match(composer, /skillSelectionEnabled/u);
   assert.match(composer, /Remove \$\{selectedSkill\.invocation\.displayName\} skill from message/u);
   const optimisticClear = composer.indexOf('setText("");');
-  const sendAwait = composer.indexOf("await onSend(");
+  const sendAwait = composer.indexOf("await submit(");
   assert.ok(optimisticClear >= 0 && optimisticClear < sendAwait);
   assert.match(composer, /if \(sendPendingRef\.current\) return false;/u);
   assert.match(composer, /type: "send-started"/u);
diff --git a/renderer/components/composer.tsx b/renderer/components/composer.tsx
index d55f1229..8b755eb8 100644
--- a/renderer/components/composer.tsx
+++ b/renderer/components/composer.tsx
@@ -25,6 +25,7 @@ import {
   ChevronDown,
   FileText,
   Folder,
+  ListPlus,
   Loader2,
   Lock,
   Mic,
@@ -122,6 +123,9 @@ interface ComposerProps {
     skillInvocation?: SkillInvocationV1,
     options?: { visualize?: boolean; btw?: boolean },
   ) => Promise<void>;
+  onQueue?: ComposerProps["onSend"];
+  queuedMessages?: React.ReactNode;
+  hasQueuedMessages?: boolean;
   onStop: () => void;
   isGenerating: boolean;
   canStopGeneration?: boolean;
@@ -265,6 +269,9 @@ export function Composer({
   chatId,
   onSend,
   onStop,
+  onQueue,
+  queuedMessages,
+  hasQueuedMessages = false,
   isGenerating,
   canStopGeneration = isGenerating,
   configurationBusy = false,
@@ -408,7 +415,7 @@ export function Composer({
   const submissionAllowed =
     composerSubmissionAllowed({
       ready,
-      isGenerating,
+      isGenerating: isGenerating && !onQueue,
       sending,
       permissionSaving,
       computerUseSaving: computerUse?.saving === true,
@@ -792,7 +799,8 @@ export function Composer({
       });
 
       try {
-        await onSend(
+        const submit = onQueue && (isGenerating || hasQueuedMessages) && !payload.btw ? onQueue : onSend;
+        await submit(
           payload.sendText,
           payload.attachments,
           payload.selectedSkill?.invocation,
@@ -839,7 +847,7 @@ export function Composer({
         setSending(false);
       }
     },
-    [onSend, setText, updateAttachments],
+    [onSend, onQueue, isGenerating, hasQueuedMessages, setText, updateAttachments],
   );
 
   const selectSlashResult = React.useCallback(
@@ -1485,6 +1493,7 @@ export function Composer({
               </DropdownMenu>
             </aside>
           ) : null}
+          {queuedMessages}
           {/* Workspace context: folder (opens in Finder) · local execution · git branch. */}
           <div className="relative z-0 mx-3 flex min-h-8 min-w-0 items-center gap-0.5 rounded-t-xl bg-context-bar px-1.5 pb-2 pt-1 backdrop-blur-md">
             {workspacePickerEnabled && onSelectWorkspace && onCreateScratchWorkspace ? (
@@ -1735,7 +1744,7 @@ export function Composer({
                   className="rounded-full"
                   onClick={handleAttach}
                   disabled={
-                    attaching || isGenerating || sending || gitOperationBusy || sessionCommandBusy
+                    attaching || (isGenerating && !onQueue) || sending || gitOperationBusy || sessionCommandBusy
                   }
                   aria-label={
                     attaching ? "Choosing or loading attachments" : "Attach files or images"
@@ -1943,7 +1952,7 @@ export function Composer({
                   variant={voice.recording ? "destructive" : "transparent"}
                   size="small"
                   iconOnly
-                  disabled={voice.transcribing || isGenerating || sending || sessionCommandBusy}
+                  disabled={voice.transcribing || (isGenerating && !onQueue) || sending || sessionCommandBusy}
                   onClick={() => (voice.recording ? voice.stop() : voice.start())}
                   aria-label={voice.recording ? "Stop recording" : "Start voice input"}
                 >
@@ -1953,12 +1962,19 @@ export function Composer({
                     <Mic className={cn(voice.recording && "animate-pulse")} />
                   )}
                 </Button>
-                {isGenerating && canStopGeneration ? (
+                {onQueue && isGenerating ? (
+                  <Button variant="transparent" size="small" iconOnly disabled={!canSend}
+                    onClick={() => void submit()} aria-label="Queue message" title="Queue message (Enter)">
+                    <ListPlus />
+                  </Button>
+                ) : null}
+                {isGenerating ? (
                   <Button
                     variant="filled"
                     size="small"
                     iconOnly
                     onClick={onStop}
+                    disabled={!canStopGeneration}
                     aria-label="Stop generating"
                   >
                     <Square className="fill-current" />
@@ -1970,9 +1986,9 @@ export function Composer({
                     iconOnly
                     disabled={!canSend}
                     onClick={() => void submit()}
-                    aria-label="Send message"
+                    aria-label={hasQueuedMessages ? "Queue message" : "Send message"}
                   >
-                    <ArrowUp />
+                    {hasQueuedMessages ? <ListPlus /> : <ArrowUp />}
                   </Button>
                 )}
               </div>
diff --git a/renderer/components/onboarding-flow.test.tsx b/renderer/components/onboarding-flow.test.tsx
index 624db126..913e06ba 100644
--- a/renderer/components/onboarding-flow.test.tsx
+++ b/renderer/components/onboarding-flow.test.tsx
@@ -305,6 +305,7 @@ test("onboarding presentation stays compact and free of decorative gradients", (
 });
 
 test("the final step is a complete grouped bento gallery with hover descriptions", () => {
+  assert.match(source, /Queue follow-ups, edit them, or steer the next response/u);
   assert.match(source, /data-onboarding-bento/u);
   assert.match(source, /data-onboarding-feature-count=\{featureBentos\.length\}/u);
   assert.match(source, /auto-rows-\[118px\][\s\S]*?grid-cols-6/u);
diff --git a/renderer/components/onboarding-flow.tsx b/renderer/components/onboarding-flow.tsx
index 58c6a736..65fab512 100644
--- a/renderer/components/onboarding-flow.tsx
+++ b/renderer/components/onboarding-flow.tsx
@@ -179,7 +179,7 @@ const featureBentos: FeatureBento[] = [
     id: "workspace",
     group: "create",
     title: "Workspace Agent",
-    description: "Read, search, edit, and run commands inside the workspace you choose.",
+    description: "Read, search, edit, and run commands in your workspace. Queue follow-ups, edit them, or steer the next response.",
     icon: MessageSquare,
     imageUrl: FEATURE_ILLUSTRATIONS.workspace,
     size: "hero",
diff --git a/renderer/components/queued-messages.tsx b/renderer/components/queued-messages.tsx
new file mode 100644
index 00000000..a64c475e
--- /dev/null
+++ b/renderer/components/queued-messages.tsx
@@ -0,0 +1,231 @@
+import * as React from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  CornerDownRight,
+  FileText,
+  GripVertical,
+  MoreHorizontal,
+  Trash2,
+} from "lucide-react";
+import { Button, Dialog, Textarea, toast } from "./ui";
+import { type ChatMessageQueue, type QueuedChatMessage } from "../lib/chat-message-queue";
+
+export function QueuedMessages({
+  queue,
+  canSteer,
+  onSteer,
+  returnFocus,
+}: {
+  queue: ChatMessageQueue;
+  canSteer: boolean;
+  onSteer: (id: string) => void;
+  returnFocus: () => HTMLElement | null;
+}) {
+  const state = React.useSyncExternalStore(queue.subscribe, queue.getSnapshot);
+  const [draft, setDraft] = React.useState<QueuedChatMessage | null>(null);
+  const editorTrigger = React.useRef<HTMLButtonElement | null>(null);
+  const draggedId = React.useRef<string | null>(null);
+  React.useEffect(() => () => queue.closeEditor(), [queue]);
+  if (state.messages.length === 0) return null;
+  const editing = state.messages.find((message) => message.id === state.editingId);
+  const draftIndex = state.messages.findIndex((message) => message.id === draft?.id);
+  return (
+    <section aria-label="Queued messages" className="mx-3 rounded-t-xl bg-context-bar px-2 py-1.5">
+      <div className="flex items-center justify-between gap-2 px-1 text-small text-tertiary">
+        <span role="status">
+          {state.messages.length} queued{state.paused ? " · Paused" : ""}
+        </span>
+        <Button
+          variant="transparent"
+          size="small"
+          disabled={Boolean(state.sendingId)}
+          onClick={() => (state.paused ? queue.resume() : queue.pause())}
+        >
+          {state.paused ? "Resume queue" : "Pause queue"}
+        </Button>
+      </div>
+      <ol className="max-h-44 overflow-y-auto">
+        {state.messages.map((message, index) => (
+          <li
+            key={message.id}
+            className="flex min-w-0 items-center gap-1 rounded-control py-0.5"
+            onDragOver={(event) => {
+              if (draggedId.current) event.preventDefault();
+            }}
+            onDrop={(event) => {
+              if (!draggedId.current) return;
+              event.preventDefault();
+              event.stopPropagation();
+              queue.move(draggedId.current, index);
+              draggedId.current = null;
+            }}
+          >
+            <button
+              type="button"
+              draggable={!state.sendingId}
+              disabled={Boolean(state.sendingId)}
+              aria-label={`Reorder queued message ${index + 1}`}
+              title="Drag to reorder, or use Alt+Arrow Up/Down"
+              className="grid size-8 shrink-0 place-items-center rounded-control text-tertiary hover:bg-list-hover"
+              onDragStart={(event) => {
+                draggedId.current = message.id;
+                event.dataTransfer.effectAllowed = "move";
+                event.dataTransfer.setData("text/plain", message.id);
+              }}
+              onDragEnd={() => {
+                draggedId.current = null;
+              }}
+              onKeyDown={(event) => {
+                if (event.altKey && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+                  event.preventDefault();
+                  queue.move(message.id, index + (event.key === "ArrowUp" ? -1 : 1));
+                }
+              }}
+            >
+              <GripVertical aria-hidden="true" className="size-3.5" />
+            </button>
+            {message.attachments[0] ? (
+              message.attachments[0].kind === "image" ? (
+                <img
+                  src={`data:${message.attachments[0].mimeType};base64,${message.attachments[0].data}`}
+                  alt={message.attachments[0].name}
+                  className="size-8 shrink-0 rounded-md object-cover"
+                />
+              ) : (
+                <FileText aria-hidden="true" className="size-5 shrink-0 text-tertiary" />
+              )
+            ) : null}
+            <span className="min-w-0 flex-1 truncate text-regular" title={message.text}>
+              {message.text || message.attachments.map((attachment) => attachment.name).join(", ")}
+            </span>
+            <Button
+              variant="transparent"
+              size="small"
+              disabled={!canSteer || Boolean(state.sendingId || editing)}
+              onClick={() => onSteer(message.id)}
+              aria-label={`Steer with queued message ${index + 1}`}
+              title="Stop the current response, wait for it to save, then send this message next"
+            >
+              <CornerDownRight aria-hidden="true" />
+              Steer
+            </Button>
+            <Button
+              variant="transparent"
+              size="small"
+              iconOnly
+              disabled={state.sendingId === message.id}
+              aria-label={`Delete queued message ${index + 1}`}
+              onClick={() => {
+                const target = returnFocus();
+                queue.remove(message.id);
+                requestAnimationFrame(() => {
+                  if (target?.isConnected) target.focus({ preventScroll: true });
+                });
+              }}
+            >
+              <Trash2 aria-hidden="true" />
+            </Button>
+            <Button
+              variant="transparent"
+              size="small"
+              iconOnly
+              disabled={Boolean(state.sendingId)}
+              aria-label={`Edit queued message ${index + 1}`}
+              aria-haspopup="dialog"
+              onClick={(event) => {
+                if (!queue.edit(message.id)) return;
+                editorTrigger.current = event.currentTarget;
+                setDraft(structuredClone(message));
+              }}
+            >
+              <MoreHorizontal aria-hidden="true" />
+            </Button>
+          </li>
+        ))}
+      </ol>
+      <p className="px-1 pt-1 text-small text-tertiary">
+        Unsent messages stay in this window until it closes. Open this chat to continue its queue.
+      </p>
+      <Dialog
+        open={Boolean(editing && draft)}
+        title="Edit queued message"
+        description="Save changes to the queued message. Your composer draft stays separate."
+        confirmLabel="Save changes"
+        confirmDisabled={!draft || (!draft.text.trim() && draft.attachments.length === 0)}
+        returnFocus={() =>
+          editorTrigger.current?.isConnected ? editorTrigger.current : returnFocus()
+        }
+        onOpenChange={(open) => {
+          if (!open) {
+            queue.closeEditor();
+            setDraft(null);
+          }
+        }}
+        onConfirm={() => {
+          if (!draft) return;
+          try {
+            queue.update(draft);
+            setDraft(null);
+          } catch (error) {
+            toast.error(error instanceof Error ? error.message : "Couldn't save the message.");
+          }
+        }}
+      >
+        {draft ? (
+          <div className="space-y-3">
+            <Textarea
+              aria-label="Queued message text"
+              value={draft.text}
+              onChange={(event) => setDraft({ ...draft, text: event.target.value })}
+            />
+            {draft.skillInvocation ? (
+              <p className="text-small text-secondary">
+                Skill: {draft.skillInvocation.displayName}
+              </p>
+            ) : null}
+            {draft.attachments.map((attachment) => (
+              <div key={attachment.id} className="flex items-center gap-2">
+                <span className="min-w-0 flex-1 truncate text-small">{attachment.name}</span>
+                <Button
+                  variant="transparent"
+                  size="small"
+                  iconOnly
+                  aria-label={`Remove queued attachment ${attachment.name}`}
+                  onClick={() =>
+                    setDraft({
+                      ...draft,
+                      attachments: draft.attachments.filter((item) => item.id !== attachment.id),
+                    })
+                  }
+                >
+                  <Trash2 aria-hidden="true" />
+                </Button>
+              </div>
+            ))}
+            <div className="flex gap-2">
+              <Button
+                variant="transparent"
+                size="small"
+                disabled={draftIndex <= 0}
+                onClick={() => queue.move(draft.id, draftIndex - 1)}
+              >
+                <ArrowUp />
+                Move up
+              </Button>
+              <Button
+                variant="transparent"
+                size="small"
+                disabled={draftIndex >= state.messages.length - 1}
+                onClick={() => queue.move(draft.id, draftIndex + 1)}
+              >
+                <ArrowDown />
+                Move down
+              </Button>
+            </div>
+          </div>
+        ) : null}
+      </Dialog>
+    </section>
+  );
+}
diff --git a/renderer/lib/chat-deletion-cache.test.ts b/renderer/lib/chat-deletion-cache.test.ts
index c91bb2d1..d77eb0f4 100644
--- a/renderer/lib/chat-deletion-cache.test.ts
+++ b/renderer/lib/chat-deletion-cache.test.ts
@@ -3,6 +3,7 @@ import test from "node:test";
 import { QueryClient } from "@tanstack/react-query";
 import { isChatCacheDeleted, removeDeletedChatFromCache } from "./chat-deletion-cache.js";
 import { queryKeys } from "./queries.js";
+import { chatMessageQueue } from "./chat-message-queue.js";
 
 test("successful deletion removes the exact transcript and tombstones late terminal delivery", async () => {
   const queryClient = new QueryClient();
@@ -10,8 +11,12 @@ test("successful deletion removes the exact transcript and tombstones late termi
   const retainedKey = queryKeys.chat("retained-chat");
   queryClient.setQueryData(deletedKey, { id: "deleted-chat", messages: ["stale"] });
   queryClient.setQueryData(retainedKey, { id: "retained-chat", messages: ["keep"] });
+  const queue = chatMessageQueue("deleted-chat");
+  queue.add({ id: "queued", text: "unsent", attachments: [] });
 
   await removeDeletedChatFromCache(queryClient, "deleted-chat");
+  assert.deepEqual(queue.getSnapshot().messages, []);
+  assert.equal(queue.getSnapshot().paused, true);
 
   assert.equal(queryClient.getQueryData(deletedKey), undefined);
   assert.deepEqual(queryClient.getQueryData(retainedKey), {
diff --git a/renderer/lib/chat-deletion-cache.ts b/renderer/lib/chat-deletion-cache.ts
index 50c500d4..ca1d5664 100644
--- a/renderer/lib/chat-deletion-cache.ts
+++ b/renderer/lib/chat-deletion-cache.ts
@@ -1,5 +1,6 @@
 import type { QueryClient } from "@tanstack/react-query";
 import { queryKeys } from "./queries";
+import { discardChatMessageQueue } from "./chat-message-queue";
 
 // Chat ids are never reused. Retaining exact tombstones for this renderer
 // lifetime prevents queued terminal notifications from reinstalling a
@@ -15,6 +16,7 @@ export async function removeDeletedChatFromCache(
   chatId: string,
 ): Promise<void> {
   deletedChatIds.add(chatId);
+  discardChatMessageQueue(chatId);
   const chatKey = queryKeys.chat(chatId);
   await queryClient.cancelQueries({ queryKey: chatKey, exact: true });
   queryClient.removeQueries({ queryKey: chatKey, exact: true });
diff --git a/renderer/lib/chat-message-queue.test.ts b/renderer/lib/chat-message-queue.test.ts
new file mode 100644
index 00000000..033127e8
--- /dev/null
+++ b/renderer/lib/chat-message-queue.test.ts
@@ -0,0 +1,217 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import {
+  ChatMessageQueue,
+  chatMessageQueue,
+  deliverQueuedMessage,
+  type QueuedChatMessage,
+} from "./chat-message-queue";
+
+function message(id: string): QueuedChatMessage {
+  return { id, text: `message ${id}`, attachments: [] };
+}
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((done) => {
+    resolve = done;
+  });
+  return { promise, resolve };
+}
+function delivery(queue: ChatMessageQueue) {
+  const sent: string[] = [];
+  const errors: unknown[] = [];
+  return {
+    queue,
+    sent,
+    errors,
+    isCurrent: () => true,
+    waitUntilIdle: async () => true,
+    send: async (item: QueuedChatMessage) => {
+      sent.push(item.id);
+    },
+    isUnknownAppend: () => false,
+    onError: (error: unknown) => {
+      errors.push(error);
+    },
+  };
+}
+
+test("queue snapshots retain attachments, skills and visualization independently of the composer", () => {
+  const queue = new ChatMessageQueue();
+  const item = {
+    ...message("one"),
+    attachments: [
+      {
+        id: "file",
+        name: "notes.txt",
+        kind: "text" as const,
+        mimeType: "text/plain",
+        size: 4,
+        text: "note",
+      },
+    ],
+    options: { visualize: true },
+  };
+  queue.add(item);
+  item.attachments[0].text = "changed";
+  assert.equal(queue.getSnapshot().messages[0].attachments[0].text, "note");
+  assert.equal(queue.getSnapshot().messages[0].options?.visualize, true);
+  assert.equal(chatMessageQueue("chat-one"), chatMessageQueue("chat-one"));
+  assert.notEqual(chatMessageQueue("chat-one"), chatMessageQueue("chat-two"));
+});
+
+test("FIFO, steering priority, deleting and keyboard reorder preserve stable identities", () => {
+  const queue = new ChatMessageQueue();
+  ["one", "two", "three"].forEach((id) => queue.add(message(id)));
+  queue.move("three", 0);
+  queue.remove("two");
+  assert.deepEqual(
+    queue.getSnapshot().messages.map((item) => item.id),
+    ["three", "one"],
+  );
+  assert.equal(queue.claim()?.id, "three");
+  assert.equal(queue.claim(), undefined);
+  queue.move("one", 0);
+  queue.remove("three");
+  assert.equal(queue.edit("one"), false);
+  assert.equal(queue.getSnapshot().messages[0].id, "three");
+  queue.settle("wrong-id", "sent");
+  assert.equal(queue.getSnapshot().sendingId, "three");
+  queue.settle("three", "sent");
+  assert.equal(queue.claim()?.id, "one");
+});
+
+test("editing pauses dispatch; cancel preserves the original and save preserves queue position", () => {
+  const queue = new ChatMessageQueue();
+  queue.add(message("one"));
+  queue.add(message("two"));
+  assert.equal(queue.edit("two"), true);
+  assert.equal(queue.claim(), undefined);
+  queue.closeEditor();
+  assert.equal(queue.getSnapshot().messages[1].text, "message two");
+  queue.edit("two");
+  queue.update({ ...message("two"), text: "edited" });
+  assert.equal(queue.getSnapshot().messages[1].text, "edited");
+  assert.equal(queue.claim()?.id, "one");
+});
+
+test("blank and oversized edits leave the editor and original message intact", () => {
+  const queue = new ChatMessageQueue();
+  queue.add(message("one"));
+  queue.edit("one");
+  assert.throws(() => queue.update({ ...message("one"), text: " " }), /Add a message/u);
+  assert.throws(
+    () => queue.update({ ...message("one"), text: "x".repeat(1024 * 1024 + 1) }),
+    /1 MB/u,
+  );
+  assert.equal(queue.getSnapshot().editingId, "one");
+  assert.equal(queue.getSnapshot().messages[0].text, "message one");
+});
+
+test("queue capacity failures never consume another draft", () => {
+  const queue = new ChatMessageQueue();
+  for (let index = 0; index < 20; index++) queue.add(message(String(index)));
+  assert.throws(() => queue.add(message("overflow")), /queue is full/u);
+  queue.add(message("0"));
+  assert.equal(queue.getSnapshot().messages.length, 20);
+});
+
+test("main persistence barrier and synchronous claim prevent early or duplicate sends", async () => {
+  const queue = new ChatMessageQueue();
+  queue.add(message("one"));
+  const idle = deferred<boolean>();
+  const input = { ...delivery(queue), waitUntilIdle: () => idle.promise };
+  const first = deliverQueuedMessage(input);
+  await deliverQueuedMessage(input);
+  assert.deepEqual(input.sent, []);
+  idle.resolve(true);
+  await first;
+  assert.deepEqual(input.sent, ["one"]);
+  assert.equal(queue.getSnapshot().messages.length, 0);
+});
+
+test("route/readiness changes defer unsent messages without sending to the next chat", async () => {
+  const queue = new ChatMessageQueue();
+  queue.add(message("one"));
+  const input = { ...delivery(queue), isCurrent: () => false };
+  await deliverQueuedMessage(input);
+  assert.deepEqual(input.sent, []);
+  assert.equal(queue.getSnapshot().messages.length, 1);
+  assert.equal(queue.getSnapshot().sendingId, undefined);
+});
+
+test("stop during the saving barrier pauses delivery and explicit resume continues once", async () => {
+  const queue = new ChatMessageQueue();
+  queue.add(message("one"));
+  const idle = deferred<boolean>();
+  const input = { ...delivery(queue), waitUntilIdle: () => idle.promise };
+  const pending = deliverQueuedMessage(input);
+  queue.pause();
+  idle.resolve(true);
+  await pending;
+  await deliverQueuedMessage(input);
+  assert.deepEqual(input.sent, []);
+  queue.resume();
+  await deliverQueuedMessage(input);
+  assert.deepEqual(input.sent, ["one"]);
+});
+
+test("definite failures preserve the message and pause all later messages", async () => {
+  const queue = new ChatMessageQueue();
+  queue.add(message("one"));
+  queue.add(message("two"));
+  const input = {
+    ...delivery(queue),
+    send: async () => {
+      throw new Error("save failed");
+    },
+  };
+  await deliverQueuedMessage(input);
+  assert.equal(input.errors.length, 1);
+  assert.equal(queue.getSnapshot().paused, true);
+  assert.equal(queue.getSnapshot().messages.length, 2);
+  assert.equal(queue.claim(), undefined);
+});
+
+test("uncertain append outcomes are removed from the queue and never replayed", async () => {
+  const queue = new ChatMessageQueue();
+  queue.add(message("one"));
+  queue.add(message("two"));
+  const input = {
+    ...delivery(queue),
+    isUnknownAppend: () => true,
+    send: async () => {
+      throw new Error("unknown save outcome");
+    },
+  };
+  await deliverQueuedMessage(input);
+  assert.deepEqual(
+    queue.getSnapshot().messages.map((item) => item.id),
+    ["two"],
+  );
+  assert.equal(queue.getSnapshot().paused, true);
+});
+
+test("a persistence timeout pauses without appending or dropping the queued message", async () => {
+  const queue = new ChatMessageQueue();
+  queue.add(message("one"));
+  const input = { ...delivery(queue), waitUntilIdle: async () => false };
+  await deliverQueuedMessage(input);
+  assert.deepEqual(input.sent, []);
+  assert.equal(input.errors.length, 1);
+  assert.equal(queue.getSnapshot().messages.length, 1);
+  assert.equal(queue.getSnapshot().paused, true);
+});
+
+test("deleting a chat while waiting for persistence invalidates its claimed message", async () => {
+  const queue = new ChatMessageQueue();
+  queue.add(message("one"));
+  const idle = deferred<boolean>();
+  const input = { ...delivery(queue), waitUntilIdle: () => idle.promise };
+  const pending = deliverQueuedMessage(input);
+  queue.discard();
+  idle.resolve(true);
+  await pending;
+  assert.deepEqual(input.sent, []);
+  assert.deepEqual(queue.getSnapshot().messages, []);
+});
diff --git a/renderer/lib/chat-message-queue.ts b/renderer/lib/chat-message-queue.ts
new file mode 100644
index 00000000..fb16ace4
--- /dev/null
+++ b/renderer/lib/chat-message-queue.ts
@@ -0,0 +1,174 @@
+import type { Attachment } from "./types";
+import type { SkillInvocationV1 } from "../shared/slash-commands";
+import { MAX_CHAT_MESSAGE_CONTENT_BYTES } from "../shared/chat-message-contract";
+
+export interface QueuedChatMessage {
+  id: string;
+  text: string;
+  attachments: Attachment[];
+  skillInvocation?: SkillInvocationV1;
+  options?: { visualize?: boolean };
+}
+
+interface QueueSnapshot {
+  messages: readonly QueuedChatMessage[];
+  paused: boolean;
+  sendingId?: string;
+  editingId?: string;
+}
+
+/** Unsent, document-local drafts. Never write attachment contents to browser storage. */
+export class ChatMessageQueue {
+  private snapshot: QueueSnapshot = { messages: [], paused: false };
+  private listeners = new Set<() => void>();
+  getSnapshot = (): QueueSnapshot => this.snapshot;
+  subscribe = (listener: () => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  private publish(next: QueueSnapshot) {
+    this.snapshot = next;
+    for (const listener of this.listeners) listener();
+  }
+  private validate(message: QueuedChatMessage) {
+    if (!message.text.trim() && message.attachments.length === 0) {
+      throw new Error("Add a message or an attachment before saving.");
+    }
+    if (new TextEncoder().encode(message.text).byteLength > MAX_CHAT_MESSAGE_CONTENT_BYTES) {
+      throw new Error("Message text exceeds the 1 MB limit.");
+    }
+    const others = this.snapshot.messages.filter((item) => item.id !== message.id);
+    if (others.length >= 20) throw new Error("The queue is full. Send or remove a message first.");
+    // Bound retained inline attachment data across this chat, including base64 overhead.
+    if (JSON.stringify([...others, message]).length > 32 * 1024 * 1024) {
+      throw new Error("The queue is full. Send or remove attachments before adding more.");
+    }
+  }
+  add(message: QueuedChatMessage) {
+    if (this.snapshot.messages.some((item) => item.id === message.id)) return;
+    this.validate(message);
+    this.publish({
+      ...this.snapshot,
+      messages: [...this.snapshot.messages, structuredClone(message)],
+    });
+  }
+  edit(id: string): boolean {
+    if (this.snapshot.sendingId || !this.snapshot.messages.some((item) => item.id === id))
+      return false;
+    this.publish({ ...this.snapshot, editingId: id });
+    return true;
+  }
+  closeEditor() {
+    this.publish({ ...this.snapshot, editingId: undefined });
+  }
+  update(message: QueuedChatMessage) {
+    if (this.snapshot.editingId !== message.id || this.snapshot.sendingId) return;
+    this.validate(message);
+    this.publish({
+      ...this.snapshot,
+      messages: this.snapshot.messages.map((item) =>
+        item.id === message.id ? structuredClone(message) : item,
+      ),
+      editingId: undefined,
+    });
+  }
+  remove(id: string) {
+    if (this.snapshot.sendingId === id) return;
+    this.publish({
+      ...this.snapshot,
+      messages: this.snapshot.messages.filter((item) => item.id !== id),
+      editingId: this.snapshot.editingId === id ? undefined : this.snapshot.editingId,
+    });
+  }
+  move(id: string, to: number) {
+    if (this.snapshot.sendingId) return;
+    const messages = [...this.snapshot.messages];
+    const from = messages.findIndex((item) => item.id === id);
+    if (from < 0 || to < 0 || to >= messages.length) return;
+    const [message] = messages.splice(from, 1);
+    messages.splice(to, 0, message);
+    this.publish({ ...this.snapshot, messages });
+  }
+  pause() {
+    this.publish({ ...this.snapshot, paused: true });
+  }
+  resume() {
+    this.publish({ ...this.snapshot, paused: false });
+  }
+  discard() {
+    this.publish({ messages: [], paused: true });
+  }
+  claim(): QueuedChatMessage | undefined {
+    if (this.snapshot.paused || this.snapshot.sendingId || this.snapshot.editingId) return;
+    const message = this.snapshot.messages[0];
+    if (!message) return;
+    this.publish({ ...this.snapshot, sendingId: message.id });
+    return message;
+  }
+  settle(id: string, outcome: "sent" | "failed" | "deferred") {
+    if (this.snapshot.sendingId !== id) return;
+    this.publish({
+      ...this.snapshot,
+      sendingId: undefined,
+      messages:
+        outcome === "sent"
+          ? this.snapshot.messages.filter((item) => item.id !== id)
+          : this.snapshot.messages,
+      paused: outcome === "failed" || this.snapshot.paused,
+    });
+  }
+}
+
+const queues = new Map<string, ChatMessageQueue>();
+export function chatMessageQueue(chatId: string): ChatMessageQueue {
+  let queue = queues.get(chatId);
+  if (!queue) {
+    queue = new ChatMessageQueue();
+    queues.set(chatId, queue);
+  }
+  return queue;
+}
+
+export function discardChatMessageQueue(chatId: string) {
+  queues.get(chatId)?.discard();
+  queues.delete(chatId);
+}
+
+/** Claim synchronously, then recheck route/readiness after main's persistence barrier. */
+export async function deliverQueuedMessage(input: {
+  queue: ChatMessageQueue;
+  isCurrent: () => boolean;
+  waitUntilIdle: () => Promise<boolean>;
+  send: (message: QueuedChatMessage) => Promise<void>;
+  isUnknownAppend: (error: unknown) => boolean;
+  onError: (error: unknown) => void;
+}) {
+  const message = input.queue.claim();
+  if (!message) return;
+  try {
+    const idle = await input.waitUntilIdle();
+    if (
+      !input.isCurrent() ||
+      input.queue.getSnapshot().paused ||
+      input.queue.getSnapshot().sendingId !== message.id
+    ) {
+      input.queue.settle(message.id, "deferred");
+      return;
+    }
+    if (!idle)
+      throw new Error("The previous response is still saving. Resume the queue to try again.");
+    await input.send(message);
+    input.queue.settle(message.id, "sent");
+  } catch (error) {
+    // An uncertain append may already be durable: never offer it for replay.
+    if (input.isUnknownAppend(error)) {
+      input.queue.pause();
+      input.queue.settle(message.id, "sent");
+    } else {
+      input.queue.settle(message.id, "failed");
+    }
+    input.onError(error);
+  }
+}
diff --git a/renderer/lib/use-chat-message-queue.ts b/renderer/lib/use-chat-message-queue.ts
new file mode 100644
index 00000000..2da3b330
--- /dev/null
+++ b/renderer/lib/use-chat-message-queue.ts
@@ -0,0 +1,42 @@
+import * as React from "react";
+import {
+  chatMessageQueue,
+  deliverQueuedMessage,
+  type QueuedChatMessage,
+} from "./chat-message-queue";
+import { chatsApi } from "./ipc";
+import { isAppendReconciliationRequired } from "../shared/chat-message-contract";
+import { toast } from "../components/ui";
+
+export function useChatMessageQueue(input: {
+  chatId: string;
+  contextKey: string;
+  enabled: boolean;
+  send: (message: QueuedChatMessage) => Promise<void>;
+}) {
+  const queue = React.useMemo(() => chatMessageQueue(input.chatId), [input.chatId]);
+  const snapshot = React.useSyncExternalStore(queue.subscribe, queue.getSnapshot);
+  const current = React.useRef<typeof input | null>(null);
+  React.useLayoutEffect(() => {
+    current.current = input;
+    return () => {
+      current.current = null;
+    };
+  });
+  React.useEffect(() => {
+    if (!input.enabled) return;
+    void deliverQueuedMessage({
+      queue,
+      isCurrent: () =>
+        current.current?.chatId === input.chatId &&
+        current.current?.contextKey === input.contextKey &&
+        current.current?.enabled === true,
+      waitUntilIdle: () => chatsApi.waitUntilIdle(input.chatId),
+      send: (message) => current.current!.send(message),
+      isUnknownAppend: isAppendReconciliationRequired,
+      onError: (error) =>
+        toast.error(error instanceof Error ? error.message : "Couldn't send the queued message."),
+    });
+  }, [input.chatId, input.contextKey, input.enabled, queue, snapshot]);
+  return { queue, snapshot };
+}
diff --git a/renderer/main/chat-pane.tsx b/renderer/main/chat-pane.tsx
index 88b01c4a..290921c3 100644
--- a/renderer/main/chat-pane.tsx
+++ b/renderer/main/chat-pane.tsx
@@ -1,3 +1,6 @@
+import { QueuedMessages } from "../components/queued-messages";
+import { chatMessageQueue } from "../lib/chat-message-queue";
+import { useChatMessageQueue } from "../lib/use-chat-message-queue";
 // The active chat: transcript (ScrollArea) + composer. Generation runs inline
 // against a concrete chatId in the active workspace, streams tokens via
 // startGeneration, and surfaces tool-approval prompts when the workspace is in
@@ -1044,6 +1047,7 @@ export function ChatPane({ chatId }: { chatId: string }) {
             }
           },
           onError: (message, partialContent, finalTimeline, updatedChat, finalReasoning) => {
+            chatMessageQueue(chatId).pause();
             void (async () => {
               if (generationIntentRef.current !== generationIntent) return;
               generationRef.current = null;
@@ -1184,6 +1188,7 @@ export function ChatPane({ chatId }: { chatId: string }) {
         }
         return;
       }
+      if (chatMessageQueue(chatId).getSnapshot().messages.length === 0) chatMessageQueue(chatId).resume();
       visualizeTurnRef.current = options?.visualize === true;
       if (imageArtifactRecoveryUnavailable) {
         throw new Error(
@@ -1277,6 +1282,29 @@ export function ChatPane({ chatId }: { chatId: string }) {
     generationRef.current.cancel("user_stop");
   }, [canStopGeneration]);
 
+  const { queue: messageQueue, snapshot: queuedState } = useChatMessageQueue({
+    chatId,
+    contextKey: JSON.stringify([providerId, model, effectiveWorkspaceId, effectiveWorkspace?.permission]),
+    enabled: ready && !isGenerating && !isStartingGeneration && !isStoppingGeneration &&
+      !detachedGenerationDraining && !thinkingSaving && !computerUseSaving &&
+      !environmentPanel.gitOperationBusy && !imageArtifactRecoveryPending &&
+      !imageArtifactRecoveryUnavailable && !questionnaire && approvals.length === 0,
+    send: (message) => {
+      if (visionSupported === false && message.attachments.some((attachment) => attachment.kind === "image")) {
+        return Promise.reject(new Error("Switch to a vision-capable model before resuming these queued images."));
+      }
+      return handleSend(message.text, message.attachments, message.skillInvocation, message.options);
+    },
+  });
+
+  const queueMessage = React.useCallback(async (
+    text: string, attachments: Attachment[], skillInvocation?: SkillInvocationV1,
+    options?: { visualize?: boolean; btw?: boolean },
+  ) => {
+    messageQueue.add({ id: createChatTurnId(), text, attachments, skillInvocation,
+      options: options?.visualize ? { visualize: true } : undefined });
+  }, [messageQueue]);
+
   const cancelAgentForContextChange = React.useCallback(() => {
     generationIntentRef.current += 1;
     generationRef.current?.cancel("lifecycle");
@@ -2059,8 +2087,19 @@ export function ChatPane({ chatId }: { chatId: string }) {
             hasMessages={hasMessages}
             chatId={chatId}
             onSend={handleSend}
-            onStop={handleStop}
-            isGenerating={isGenerating}
+            onQueue={queueMessage}
+            hasQueuedMessages={queuedState.messages.length > 0}
+            queuedMessages={<QueuedMessages key={chatId} queue={messageQueue}
+              canSteer={ready && isGenerating && canStopGeneration && !isStoppingGeneration}
+              returnFocus={() => composerRef.current}
+              onSteer={(id) => {
+                if (!canStopGeneration || isStoppingGeneration) return;
+                messageQueue.move(id, 0);
+                messageQueue.resume();
+                handleStop();
+              }} />}
+            onStop={() => { messageQueue.pause(); handleStop(); }}
+            isGenerating={isGenerating || isStartingGeneration}
             canStopGeneration={canStopGeneration}
             configurationBusy={thinkingSaving}
             inputRef={composerRef}
diff --git a/tests/e2e/chat-message-queue.spec.ts b/tests/e2e/chat-message-queue.spec.ts
new file mode 100644
index 00000000..6bafaebe
--- /dev/null
+++ b/tests/e2e/chat-message-queue.spec.ts
@@ -0,0 +1,206 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import {
+  expect,
+  finishLmStudioOnboarding,
+  REPOSITORY_ROOT,
+  test,
+  type CapturedLmStudioRequest,
+} from "./fixtures";
+
+function lastUserText(request: CapturedLmStudioRequest): string | undefined {
+  const body = request.body as {
+    messages?: Array<{ role: string; content: string | Array<{ type: string; text?: string }> }>;
+  } | null;
+  const user = body?.messages
+    ?.slice()
+    .reverse()
+    .find((message) => message.role === "user");
+  return typeof user?.content === "string"
+    ? user.content
+    : user?.content.map((part) => part.text ?? "").join("");
+}
+
+test("queued messages edit, reorder, delete and steer without changing the composer draft", async ({
+  aiden,
+}) => {
+  const { page, lmStudio } = aiden;
+  await finishLmStudioOnboarding(page);
+  lmStudio.holdCompletions!();
+  const composer = page.locator("textarea");
+  await composer.fill("First response held for queue controls.");
+  await composer.press("Enter");
+  await expect(page.getByRole("button", { name: "Stop generating" })).toBeVisible();
+  await composer.fill("Queued first");
+  await expect(page.getByRole("button", { name: "Queue message", exact: true })).toBeEnabled();
+  await composer.press("Enter");
+  await expect(composer).toHaveValue("");
+  await composer.fill("Queued second");
+  await page.getByRole("button", { name: "Queue message", exact: true }).click();
+  const queue = page.getByRole("region", { name: "Queued messages", exact: true });
+  await expect(queue.getByRole("listitem")).toHaveCount(2);
+  await composer.fill("My separate unsent draft");
+  await page.screenshot({ path: test.info().outputPath("queued-messages.png") });
+
+  await queue.getByRole("button", { name: "Edit queued message 2", exact: true }).click();
+  const editor = page.getByRole("dialog", { name: "Edit queued message", exact: true });
+  const editText = editor.getByRole("textbox", { name: "Queued message text" });
+  await expect(editText).toHaveValue("Queued second");
+  await page.screenshot({ path: test.info().outputPath("queued-message-editor.png") });
+  await editText.fill("Discard this edit");
+  await page.keyboard.press("Escape");
+  await expect(editor).toBeHidden();
+  await expect(
+    queue.getByRole("button", { name: "Edit queued message 2", exact: true }),
+  ).toBeFocused();
+  await queue.getByRole("button", { name: "Edit queued message 2", exact: true }).click();
+  await expect(editText).toHaveValue("Queued second");
+  await editText.fill("Edited priority message");
+  await editor.getByRole("button", { name: "Move up", exact: true }).click();
+  await editor.getByRole("button", { name: "Save changes", exact: true }).click();
+  await expect(queue.getByRole("listitem").first()).toContainText("Edited priority message");
+  await expect(composer).toHaveValue("My separate unsent draft");
+
+  // Keyboard ordering uses the same path as dragging and retains the focused row.
+  const reorder = queue.getByRole("button", { name: "Reorder queued message 1", exact: true });
+  await reorder.focus();
+  await reorder.press("Alt+ArrowDown");
+  await expect(queue.getByRole("listitem").last()).toContainText("Edited priority message");
+  await queue.getByRole("button", { name: "Steer with queued message 2", exact: true }).click();
+  await expect
+    .poll(
+      () =>
+        lmStudio.requests.filter((request) => lastUserText(request) === "Edited priority message")
+          .length,
+    )
+    .toBe(1);
+  await expect(queue.getByRole("listitem")).toHaveCount(1);
+  await expect(queue.getByRole("listitem")).toContainText("Queued first");
+  await expect(composer).toHaveValue("My separate unsent draft");
+  await queue.getByRole("button", { name: "Delete queued message 1", exact: true }).click();
+  await expect(queue).toBeHidden();
+  await expect(composer).toBeFocused();
+  lmStudio.releaseCompletions!();
+  await expect(page.getByRole("button", { name: "Stop generating" })).toBeHidden();
+  expect(
+    lmStudio.requests.filter((request) => lastUserText(request) === "Queued first"),
+  ).toHaveLength(0);
+});
+
+test("a response finishing while the queue editor is open waits for the saved edit", async ({
+  aiden,
+}) => {
+  const { page, lmStudio } = aiden;
+  await finishLmStudioOnboarding(page);
+  lmStudio.holdCompletions!();
+  const composer = page.locator("textarea");
+  await composer.fill("Hold until the queued editor opens.");
+  await composer.press("Enter");
+  await expect(page.getByRole("button", { name: "Stop generating" })).toBeVisible();
+  await composer.fill("Original queued text");
+  await expect(page.getByRole("button", { name: "Queue message", exact: true })).toBeEnabled();
+  await composer.press("Enter");
+  await page.getByRole("button", { name: "Edit queued message 1", exact: true }).click();
+  const editor = page.getByRole("dialog", { name: "Edit queued message", exact: true });
+  await editor.getByRole("textbox", { name: "Queued message text" }).fill("Saved after completion");
+  lmStudio.releaseCompletions!();
+  await expect(
+    page.getByRole("button", { name: "Stop generating", includeHidden: true }),
+  ).toBeHidden();
+  expect(
+    lmStudio.requests.filter((request) => lastUserText(request) === "Original queued text"),
+  ).toHaveLength(0);
+  await editor.getByRole("button", { name: "Save changes", exact: true }).click();
+  await expect
+    .poll(
+      () =>
+        lmStudio.requests.filter((request) => lastUserText(request) === "Saved after completion")
+          .length,
+    )
+    .toBe(1);
+  await expect(page.getByRole("region", { name: "Queued messages" })).toBeHidden();
+});
+
+test("switching chats retains the queue without delivering it into another conversation", async ({
+  aiden,
+}) => {
+  const { page, lmStudio } = aiden;
+  await finishLmStudioOnboarding(page);
+  lmStudio.holdCompletions!();
+  const composer = page.locator("textarea");
+  await composer.fill("Original chat before navigating.");
+  await composer.press("Enter");
+  await expect(page.getByRole("button", { name: "Stop generating" })).toBeVisible();
+  await composer.fill("Only send in the original chat");
+  await expect(page.getByRole("button", { name: "Queue message", exact: true })).toBeEnabled();
+  await composer.press("Enter");
+  await page.getByRole("button", { name: "Pause queue", exact: true }).click();
+  await page.getByRole("button", { name: "New Agent", exact: true }).click();
+  await expect(page.getByRole("region", { name: "Queued messages" })).toBeHidden();
+  await composer.fill("New chat draft");
+  lmStudio.releaseCompletions!();
+  await page.locator("[data-sidebar]").getByRole("button", { name: /^Deterministic E2E response/u }).click();
+  const queue = page.getByRole("region", { name: "Queued messages" });
+  await expect(queue).toContainText("Only send in the original chat");
+  expect(
+    lmStudio.requests.filter(
+      (request) => lastUserText(request) === "Only send in the original chat",
+    ),
+  ).toHaveLength(0);
+  await queue.getByRole("button", { name: "Resume queue", exact: true }).click();
+  await expect(queue).toBeHidden();
+  const request = lmStudio.requests.find(
+    (request) => lastUserText(request) === "Only send in the original chat",
+  );
+  expect(JSON.stringify(request?.body)).toContain("Original chat before navigating.");
+  expect(JSON.stringify(request?.body)).not.toContain("New chat draft");
+});
+
+test("queue keeps image attachments, pauses on Stop, and resumes FIFO exactly once", async ({
+  aiden,
+}) => {
+  const { page, lmStudio } = aiden;
+  await finishLmStudioOnboarding(page);
+  lmStudio.holdCompletions!();
+  const composer = page.locator("textarea");
+  await composer.fill("First response for stop and resume.");
+  await composer.press("Enter");
+  await expect(page.getByRole("button", { name: "Stop generating" })).toBeVisible();
+  const image = (
+    await readFile(path.join(REPOSITORY_ROOT, "renderer/assets/onboarding/aiden-workspace.png"))
+  ).toString("base64");
+  await composer.evaluate((element, base64) => {
+    const bytes = Uint8Array.from(atob(base64), (character) => character.charCodeAt(0));
+    const data = new DataTransfer();
+    data.items.add(new File([bytes], "clipboard.png", { type: "image/png" }));
+    element.dispatchEvent(
+      new ClipboardEvent("paste", { bubbles: true, cancelable: true, clipboardData: data }),
+    );
+  }, image);
+  await expect(
+    page.getByRole("button", { name: "Remove Pasted image.png", exact: true }),
+  ).toBeVisible();
+  await composer.fill("Queued image first");
+  await expect(page.getByRole("button", { name: "Queue message", exact: true })).toBeEnabled();
+  await composer.press("Enter");
+  await composer.fill("Queued text second");
+  await expect(page.getByRole("button", { name: "Queue message", exact: true })).toBeEnabled();
+  await composer.press("Enter");
+  const queue = page.getByRole("region", { name: "Queued messages", exact: true });
+  await expect(queue.getByRole("img", { name: "Pasted image.png" })).toBeVisible();
+  await page.getByRole("button", { name: "Stop generating" }).click();
+  await expect(page.getByRole("button", { name: "Stop generating" })).toBeHidden();
+  await expect(queue.getByRole("button", { name: "Resume queue" })).toBeVisible();
+  expect(
+    lmStudio.requests.filter((request) => lastUserText(request)?.startsWith("Queued ")),
+  ).toHaveLength(0);
+  lmStudio.releaseCompletions!();
+  await queue.getByRole("button", { name: "Resume queue" }).click();
+  await expect(queue).toBeHidden();
+  await expect(page.getByRole("button", { name: "Stop generating" })).toBeHidden();
+  const queued = lmStudio.requests.filter((request) =>
+    lastUserText(request)?.startsWith("Queued "),
+  );
+  expect(queued.map(lastUserText)).toEqual(["Queued image first", "Queued text second"]);
+  expect(JSON.stringify(queued[0].body)).toContain(`data:image/png;base64,${image}`);
+});
diff --git a/tests/e2e/fixtures.ts b/tests/e2e/fixtures.ts
index 9c986063..e98bf032 100644
--- a/tests/e2e/fixtures.ts
+++ b/tests/e2e/fixtures.ts
@@ -92,6 +92,8 @@ export type LmStudioEndpoint = {
   baseUrl: string;
   live: boolean;
   requests: CapturedLmStudioRequest[];
+  holdCompletions?: () => void;
+  releaseCompletions?: () => void;
 };
 
 export type AidenE2e = {
@@ -159,7 +161,10 @@ function writeJson(response: import("node:http").ServerResponse, value: unknown)
   response.end(JSON.stringify(value));
 }
 
-function writeCompletion(response: import("node:http").ServerResponse): void {
+function writeCompletion(
+  response: import("node:http").ServerResponse,
+  hold?: (finish: () => void) => void,
+): void {
   const common = {
     id: "chatcmpl-aiden-e2e",
     object: "chat.completion.chunk",
@@ -182,17 +187,23 @@ function writeCompletion(response: import("node:http").ServerResponse): void {
       ],
     })}\n\n`,
   );
-  response.write(
-    `data: ${JSON.stringify({
-      ...common,
-      choices: [{ index: 0, delta: {}, finish_reason: "stop" }],
-    })}\n\n`,
-  );
-  response.end("data: [DONE]\n\n");
+  const finish = () => {
+    response.write(
+      `data: ${JSON.stringify({
+        ...common,
+        choices: [{ index: 0, delta: {}, finish_reason: "stop" }],
+      })}\n\n`,
+    );
+    response.end("data: [DONE]\n\n");
+  };
+  if (hold) hold(finish);
+  else finish();
 }
 
 async function startMockLmStudio(): Promise<MockLmStudio> {
   const requests: CapturedLmStudioRequest[] = [];
+  let holding = false;
+  const held = new Set<() => void>();
   const nativeModel = {
     key: E2E_MODEL_ID,
     display_name: E2E_MODEL_DISPLAY_NAME,
@@ -230,7 +241,15 @@ async function startMockLmStudio(): Promise<MockLmStudio> {
       if (method === "POST" && url === "/v1/chat/completions") {
         const body = await readJsonBody(request);
         requests.push({ method, url, headers: { ...request.headers }, body });
-        writeCompletion(response);
+        writeCompletion(
+          response,
+          holding
+            ? (finish) => {
+                held.add(finish);
+                response.once("close", () => held.delete(finish));
+              }
+            : undefined,
+        );
         return;
       }
       response.writeHead(404, { "content-type": "application/json; charset=utf-8" });
@@ -259,6 +278,14 @@ async function startMockLmStudio(): Promise<MockLmStudio> {
     baseUrl: `http://127.0.0.1:${address.port}/v1`,
     live: false,
     requests,
+    holdCompletions: () => {
+      holding = true;
+    },
+    releaseCompletions: () => {
+      holding = false;
+      for (const finish of held) finish();
+      held.clear();
+    },
     server,
   };
 }

From 47787cffa77785a42e3ca0286344bc7673a63699 Mon Sep 17 00:00:00 2001
From: Sambit Biswas <sambit.biswas2@gmail.com>
Date: Fri, 4 Sep 2026 22:05:40 -0400
Subject: [PATCH 2/6] Add auto-hide preference for the composer workspace bar

---
 .papercuts/troubleshooting.md                 |  2 +
 renderer/components/composer-context-bar.tsx  | 43 ++++++++
 renderer/components/composer.test.tsx         | 16 +++
 renderer/components/composer.tsx              |  4 +-
 .../settings/appearance-settings.tsx          |  3 +
 renderer/shared/appearance.test.ts            | 14 +++
 renderer/shared/appearance.ts                 |  9 ++
 renderer/styles.css                           | 28 ++++++
 tests/e2e/chat-message-queue.spec.ts          | 98 ++++++++++++++++++-
 9 files changed, 215 insertions(+), 2 deletions(-)
 create mode 100644 renderer/components/composer-context-bar.tsx

diff --git a/.papercuts/troubleshooting.md b/.papercuts/troubleshooting.md
index ce65c097..5e0db4a3 100644
--- a/.papercuts/troubleshooting.md
+++ b/.papercuts/troubleshooting.md
@@ -316,3 +316,5 @@ owns; reopen the terminal before judging the final live state.
 - This detached worktree had no .memory directory. Read the canonical checkout's PROJECT-CONTEXT.md and PLANNED.md before implementation; wrote scoped memory here.
 - Pi harness queueSteer/queueFollowUp are not exposed through the foreground durable transcript path. Use Stop → persistence barrier → normal append for the desktop Steer action and explain its behavior in the control tooltip.
 - E2E TypeScript uses an older lib target; use reverse/find rather than Array.at in new test helpers.
+- The selected local Xcode began rejecting compiler/git calls for unaccepted license terms during this task. Used the installed Command Line Tools for git and rebuilt the renderer/Electron bundles with existing native helpers; native sources are unchanged and CI checks the full build.
+- Appearance persistence uses the `settings` envelope in settings.json; E2E disk assertions must read `settings.appearance`, then verify the preference after an app relaunch.
diff --git a/renderer/components/composer-context-bar.tsx b/renderer/components/composer-context-bar.tsx
new file mode 100644
index 00000000..0ecd9dc5
--- /dev/null
+++ b/renderer/components/composer-context-bar.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { APPEARANCE_CHANGE_EVENT, readCachedAppearance } from "../lib/appearance-runtime";
+
+function subscribe(listener: () => void) {
+  window.addEventListener(APPEARANCE_CHANGE_EVENT, listener);
+  return () => window.removeEventListener(APPEARANCE_CHANGE_EVENT, listener);
+}
+
+function autoHideEnabled() {
+  return readCachedAppearance()?.autoHideComposerContext ?? true;
+}
+
+/** Keep portal-based branch/worktree dialogs mounted while their context strip collapses. */
+export function ComposerContextBar({
+  hasUserMessages,
+  inputRef,
+  children,
+}: React.PropsWithChildren<{
+  hasUserMessages: boolean;
+  inputRef?: React.RefObject<HTMLTextAreaElement | null>;
+}>) {
+  const autoHide = React.useSyncExternalStore(subscribe, autoHideEnabled, () => true);
+  const hidden = autoHide && hasUserMessages;
+  const stripRef = React.useRef<HTMLDivElement>(null);
+  React.useLayoutEffect(() => {
+    if (hidden && stripRef.current?.contains(document.activeElement)) {
+      inputRef?.current?.focus({ preventScroll: true });
+    }
+  }, [hidden, inputRef]);
+  return (
+    <div
+      ref={stripRef}
+      role="group"
+      className="composer-context-collapse"
+      data-collapsed={hidden}
+      aria-label="Composer workspace bar"
+      aria-hidden={hidden || undefined}
+      inert={hidden || undefined}
+    >
+      <div className="composer-context-content">{children}</div>
+    </div>
+  );
+}
diff --git a/renderer/components/composer.test.tsx b/renderer/components/composer.test.tsx
index 7cdfba9b..2e86d1a4 100644
--- a/renderer/components/composer.test.tsx
+++ b/renderer/components/composer.test.tsx
@@ -6,6 +6,22 @@ function source(relativePath: string): string {
   return readFileSync(new URL(relativePath, import.meta.url), "utf8");
 }
 
+test("workspace context collapses only after a persisted user message and retains portal controls", () => {
+  const composer = source("./composer.tsx");
+  const bar = source("./composer-context-bar.tsx");
+  const styles = source("../styles.css");
+  assert.match(composer, /sessionChat\?\.messages\.some\(\(message\) => message\.role === "user"\)/u);
+  assert.match(bar, /autoHide && hasUserMessages/u);
+  assert.match(bar, /inert=\{hidden \|\| undefined\}/u);
+  assert.match(bar, /aria-hidden=\{hidden \|\| undefined\}/u);
+  assert.match(bar, /APPEARANCE_CHANGE_EVENT/u);
+  assert.match(styles, /\.composer-context-collapse\[data-collapsed="true"\][\s\S]*?grid-template-rows: 0fr/u);
+  assert.match(styles, /transform: translateY\(8px\)/u);
+  assert.match(styles, /:root\[data-reduce-motion="true"\] \.composer-context-content \{\s*transition: none;/u);
+  // A hidden strip must not unmount slash-opened worktree dialogs.
+  assert.match(bar, /className="composer-context-content">\{children\}/u);
+});
+
 test("composer focus tints the whole shell, not only the textarea", () => {
   const composer = source("./composer.tsx");
   const styles = source("../styles.css");
diff --git a/renderer/components/composer.tsx b/renderer/components/composer.tsx
index 8b755eb8..8fddb0a2 100644
--- a/renderer/components/composer.tsx
+++ b/renderer/components/composer.tsx
@@ -38,6 +38,7 @@ import {
   X,
 } from "lucide-react";
 import { AidenIcon } from "./aiden-icon";
+import { ComposerContextBar } from "./composer-context-bar";
 import { GitBranchPicker } from "./git-branch-picker";
 import { WorkspacePicker } from "./workspace-picker";
 import { useVoiceRecorder } from "../lib/use-voice-recorder";
@@ -1495,6 +1496,7 @@ export function Composer({
           ) : null}
           {queuedMessages}
           {/* Workspace context: folder (opens in Finder) · local execution · git branch. */}
+          <ComposerContextBar hasUserMessages={sessionChat?.messages.some((message) => message.role === "user") ?? hasMessages} inputRef={inputRef}>
           <div className="relative z-0 mx-3 flex min-h-8 min-w-0 items-center gap-0.5 rounded-t-xl bg-context-bar px-1.5 pb-2 pt-1 backdrop-blur-md">
             {workspacePickerEnabled && onSelectWorkspace && onCreateScratchWorkspace ? (
               <WorkspacePicker
@@ -1570,7 +1572,7 @@ export function Composer({
               />
             ) : null}
           </div>
-
+          </ComposerContextBar>
           <div
             className="composer-shell relative z-10 -mt-1 rounded-2xl bg-popover p-2.5 shadow-composer"
             onDragOver={handleDragOver}
diff --git a/renderer/components/settings/appearance-settings.tsx b/renderer/components/settings/appearance-settings.tsx
index a537f133..d74fd090 100644
--- a/renderer/components/settings/appearance-settings.tsx
+++ b/renderer/components/settings/appearance-settings.tsx
@@ -436,6 +436,9 @@ function Preferences({
     >
       <h2 id="appearance-preferences-title">Preferences</h2>
       <div className="appearance-preferences-card">
+        <PreferenceRow label="Auto-hide workspace bar" description="Slide the workspace and Local bar away after your first message. Turn off to keep it above the composer.">
+          <Switch checked={config.autoHideComposerContext} onCheckedChange={(checked) => onChange({ autoHideComposerContext: checked })} aria-label="Auto-hide workspace bar" />
+        </PreferenceRow>
         <PreferenceRow label="Use pointer cursors" description="Show a pointer when hovering over interactive elements.">
           <Switch checked={config.pointerCursors} onCheckedChange={(checked) => onChange({ pointerCursors: checked })} aria-label="Use pointer cursors" />
         </PreferenceRow>
diff --git a/renderer/shared/appearance.test.ts b/renderer/shared/appearance.test.ts
index 64f20eb7..1a6cbb5c 100644
--- a/renderer/shared/appearance.test.ts
+++ b/renderer/shared/appearance.test.ts
@@ -309,6 +309,20 @@ test("appearance normalization safely clamps user-controlled values", () => {
   assert.equal(normalizeAppearanceConfig({}).diffMarkers, "symbols");
 });
 
+test("composer context auto-hide defaults on and preserves explicit saved preferences", () => {
+  assert.equal(createDefaultAppearanceConfig().autoHideComposerContext, true);
+  assert.equal(normalizeAppearanceConfig({}).autoHideComposerContext, true);
+  assert.equal(normalizeAppearanceConfig({ autoHideComposerContext: "false" }).autoHideComposerContext, true);
+  for (const enabled of [false, true]) {
+    const stored = { ...createDefaultAppearanceConfig(), autoHideComposerContext: enabled };
+    assert.equal(parseAppearanceConfig(JSON.parse(JSON.stringify(stored))).autoHideComposerContext, enabled);
+  }
+  const legacy: Record<string, unknown> = { ...createDefaultAppearanceConfig() };
+  delete legacy.autoHideComposerContext;
+  assert.equal(parseAppearanceConfig(legacy).autoHideComposerContext, true);
+  assert.throws(() => parseAppearanceConfig({ ...legacy, autoHideComposerContext: "yes" }), /boolean/u);
+});
+
 test("the shared focus treatment separates text entry from non-text keyboard focus", () => {
   const styles = readFileSync(new URL("../styles.css", import.meta.url), "utf8");
   const ui = readFileSync(new URL("../components/ui.tsx", import.meta.url), "utf8");
diff --git a/renderer/shared/appearance.ts b/renderer/shared/appearance.ts
index 0b6a3255..b2711175 100644
--- a/renderer/shared/appearance.ts
+++ b/renderer/shared/appearance.ts
@@ -25,6 +25,7 @@ export interface AppearanceConfig {
   light: ThemeVariantConfig;
   dark: ThemeVariantConfig;
   pointerCursors: boolean;
+  autoHideComposerContext: boolean;
   dockIcon: DockIconPreference;
   reduceMotion: ReduceMotionPreference;
   uiFontSize: number;
@@ -211,6 +212,7 @@ const DEFAULT_APPEARANCE: AppearanceConfig = {
   light: getPresetVariant("aiden", "light"),
   dark: getPresetVariant("aiden", "dark"),
   pointerCursors: false,
+  autoHideComposerContext: true,
   dockIcon: "aiden",
   reduceMotion: "system",
   uiFontSize: 14,
@@ -294,6 +296,9 @@ export function normalizeAppearanceConfig(value: unknown): AppearanceConfig {
     pointerCursors: typeof value.pointerCursors === "boolean"
       ? value.pointerCursors
       : fallback.pointerCursors,
+    autoHideComposerContext: typeof value.autoHideComposerContext === "boolean"
+      ? value.autoHideComposerContext
+      : fallback.autoHideComposerContext,
     dockIcon: value.dockIcon === "monochrome" || value.dockIcon === "aiden"
       ? value.dockIcon
       : fallback.dockIcon,
@@ -366,6 +371,10 @@ export function parseAppearanceConfig(value: unknown): AppearanceConfig {
   if (typeof value.pointerCursors !== "boolean" || typeof value.fontSmoothing !== "boolean") {
     throw new Error("Appearance toggle preferences must be boolean values.");
   }
+  // Older V1 settings did not contain this preference. Keep them loadable.
+  if (value.autoHideComposerContext !== undefined && typeof value.autoHideComposerContext !== "boolean") {
+    throw new Error("Composer context preference must be a boolean value.");
+  }
   if (normalized.mode !== value.mode || normalized.dockIcon !== value.dockIcon || normalized.reduceMotion !== value.reduceMotion || normalized.diffMarkers !== value.diffMarkers) {
     throw new Error("Appearance settings contain an unsupported option.");
   }
diff --git a/renderer/styles.css b/renderer/styles.css
index 7fca3a79..1318ce25 100644
--- a/renderer/styles.css
+++ b/renderer/styles.css
@@ -293,6 +293,34 @@ body {
 }
 
 /* Composer focus is the only shell-wide fill: ~2% darker popover, not a translucent wash. */
+.composer-context-collapse {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 180ms ease-out;
+}
+
+.composer-context-content {
+  min-height: 0;
+  overflow: hidden;
+  opacity: 1;
+  transform: translateY(0);
+  transition: transform 180ms ease-out, opacity 180ms ease-out;
+}
+
+.composer-context-collapse[data-collapsed="true"] {
+  grid-template-rows: 0fr;
+}
+
+.composer-context-collapse[data-collapsed="true"] > .composer-context-content {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+:root[data-reduce-motion="true"] .composer-context-collapse,
+:root[data-reduce-motion="true"] .composer-context-content {
+  transition: none;
+}
+
 .composer-shell {
   transition: background-color 150ms ease-out;
 }
diff --git a/tests/e2e/chat-message-queue.spec.ts b/tests/e2e/chat-message-queue.spec.ts
index 6bafaebe..7690e10a 100644
--- a/tests/e2e/chat-message-queue.spec.ts
+++ b/tests/e2e/chat-message-queue.spec.ts
@@ -21,6 +21,99 @@ function lastUserText(request: CapturedLmStudioRequest): string | undefined {
     : user?.content.map((part) => part.text ?? "").join("");
 }
 
+test("workspace bar auto-hides after sending and its appearance setting survives relaunch", async ({
+  aiden,
+}) => {
+  let page = aiden.page;
+  await finishLmStudioOnboarding(page);
+  const bar = () => page.locator(".composer-context-collapse");
+  await expect(bar()).toBeVisible();
+  await page.locator("textarea").fill("Hide the bar after this persisted user message.");
+  await expect(bar()).toHaveAttribute("data-collapsed", "false");
+  await page.locator("textarea").press("Enter");
+  await expect(bar()).toHaveAttribute("data-collapsed", "true");
+  await expect(bar()).toHaveAttribute("inert", "");
+  await expect(bar()).toHaveAttribute("aria-hidden", "true");
+  await expect(bar()).toBeHidden();
+  await expect(page.getByRole("button", { name: "Stop generating" })).toBeHidden();
+
+  const openAppearance = async () => {
+    await page.getByRole("button", { name: "Settings", exact: true }).click();
+    await page
+      .getByRole("navigation", { name: "Settings" })
+      .getByRole("button", { name: "Appearance", exact: true })
+      .click();
+  };
+  const openSentChat = async () => {
+    const back = page.getByRole("button", { name: "Back to app", exact: true });
+    if (await back.isVisible()) await back.click();
+    await page
+      .locator("[data-sidebar]")
+      .getByRole("button", { name: /^Deterministic E2E response/u })
+      .click();
+  };
+  await openAppearance();
+  const toggle = page.getByRole("switch", { name: "Auto-hide workspace bar", exact: true });
+  await expect(toggle).toBeChecked();
+  await toggle.click();
+  await expect
+    .poll(async () => {
+      const stored = JSON.parse(
+        await readFile(path.join(aiden.userDataDir, "settings.json"), "utf8"),
+      );
+      return stored.settings?.appearance?.autoHideComposerContext;
+    })
+    .toBe(false);
+  await openSentChat();
+  await expect(bar()).toBeVisible();
+  await expect(bar()).toHaveAttribute("data-collapsed", "false");
+
+  page = await aiden.relaunch();
+  await openSentChat();
+  await expect(bar()).toBeVisible();
+  await openAppearance();
+  await expect(
+    page.getByRole("switch", { name: "Auto-hide workspace bar", exact: true }),
+  ).not.toBeChecked();
+  await page
+    .getByRole("radiogroup", { name: "Reduce motion", exact: true })
+    .getByRole("radio", { name: "On", exact: true })
+    .click();
+  await page.getByRole("switch", { name: "Auto-hide workspace bar", exact: true }).click();
+  await expect(page.locator("html")).toHaveAttribute("data-reduce-motion", "true");
+  await openSentChat();
+  await expect(bar()).toBeHidden();
+  expect(
+    await bar().evaluate((element) =>
+      Number.parseFloat(getComputedStyle(element).transitionDuration),
+    ),
+  ).toBeLessThan(0.001);
+  await page.getByRole("button", { name: "New Agent", exact: true }).click();
+  await expect(bar()).toBeVisible();
+});
+
+test("an unsuccessful first message save keeps the workspace bar and draft visible", async ({
+  aiden,
+}) => {
+  const { page } = aiden;
+  await finishLmStudioOnboarding(page);
+  await aiden.app.evaluate(({ ipcMain }) => {
+    ipcMain.removeHandler("chats:appendMessage");
+    ipcMain.handle("chats:appendMessage", () => {
+      throw new Error("Queue test: message save rejected");
+    });
+  });
+  await page.locator("textarea").fill("Keep this draft after a failed save.");
+  await page.locator("textarea").press("Enter");
+  await expect(page.getByText(/Queue test: message save rejected/u)).toBeVisible();
+  await expect(page.locator("textarea")).toHaveValue("Keep this draft after a failed save.");
+  await expect(page.locator(".composer-context-collapse")).toBeVisible();
+  await expect(page.locator(".composer-context-collapse")).toHaveAttribute(
+    "data-collapsed",
+    "false",
+  );
+});
+
 test("queued messages edit, reorder, delete and steer without changing the composer draft", async ({
   aiden,
 }) => {
@@ -139,7 +232,10 @@ test("switching chats retains the queue without delivering it into another conve
   await expect(page.getByRole("region", { name: "Queued messages" })).toBeHidden();
   await composer.fill("New chat draft");
   lmStudio.releaseCompletions!();
-  await page.locator("[data-sidebar]").getByRole("button", { name: /^Deterministic E2E response/u }).click();
+  await page
+    .locator("[data-sidebar]")
+    .getByRole("button", { name: /^Deterministic E2E response/u })
+    .click();
   const queue = page.getByRole("region", { name: "Queued messages" });
   await expect(queue).toContainText("Only send in the original chat");
   expect(

From 21fbf5e21024292e1f58784f652b48a744d1c42f Mon Sep 17 00:00:00 2001
From: Sambit Biswas <sambit.biswas2@gmail.com>
Date: Fri, 4 Sep 2026 22:19:52 -0400
Subject: [PATCH 3/6] Shape composer with broader native squircle corners

---
 .papercuts/troubleshooting.md        |  1 +
 renderer/components/composer.tsx     |  2 +-
 renderer/styles.css                  |  4 +++
 tests/e2e/chat-message-queue.spec.ts | 41 ++++++++++++++++++++++++++++
 4 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/.papercuts/troubleshooting.md b/.papercuts/troubleshooting.md
index 5e0db4a3..ca9b8e9a 100644
--- a/.papercuts/troubleshooting.md
+++ b/.papercuts/troubleshooting.md
@@ -318,3 +318,4 @@ owns; reopen the terminal before judging the final live state.
 - E2E TypeScript uses an older lib target; use reverse/find rather than Array.at in new test helpers.
 - The selected local Xcode began rejecting compiler/git calls for unaccepted license terms during this task. Used the installed Command Line Tools for git and rebuilt the renderer/Electron bundles with existing native helpers; native sources are unchanged and CI checks the full build.
 - Appearance persistence uses the `settings` envelope in settings.json; E2E disk assertions must read `settings.appearance`, then verify the preference after an app relaunch.
+- A CI navigation test raced the provider transport: queue removal confirms durable append, but does not mean the mock HTTP server has received the next generation request. Wait for that specific request before asserting its conversation history.
diff --git a/renderer/components/composer.tsx b/renderer/components/composer.tsx
index 8fddb0a2..dee359e3 100644
--- a/renderer/components/composer.tsx
+++ b/renderer/components/composer.tsx
@@ -1574,7 +1574,7 @@ export function Composer({
           </div>
           </ComposerContextBar>
           <div
-            className="composer-shell relative z-10 -mt-1 rounded-2xl bg-popover p-2.5 shadow-composer"
+            className="composer-shell relative z-10 -mt-1 bg-popover p-2.5 shadow-composer"
             onDragOver={handleDragOver}
             onDrop={handleDrop}
           >
diff --git a/renderer/styles.css b/renderer/styles.css
index 1318ce25..172d4766 100644
--- a/renderer/styles.css
+++ b/renderer/styles.css
@@ -48,6 +48,7 @@
   --radius-dialog: 16px;
   --radius-popover: 12px;
   --radius-sheet: 24px;
+  --radius-composer: 40px;
   --radius-pill: 9999px;
   --shadow-control: var(--elevation-control);
   --shadow-control-hover: var(--elevation-control-hover);
@@ -322,6 +323,9 @@ body {
 }
 
 .composer-shell {
+  /* Electron supports native squircles; keep overflow visible for composer menus. */
+  border-radius: var(--radius-composer);
+  corner-shape: squircle;
   transition: background-color 150ms ease-out;
 }
 
diff --git a/tests/e2e/chat-message-queue.spec.ts b/tests/e2e/chat-message-queue.spec.ts
index 7690e10a..ae6982f2 100644
--- a/tests/e2e/chat-message-queue.spec.ts
+++ b/tests/e2e/chat-message-queue.spec.ts
@@ -21,6 +21,43 @@ function lastUserText(request: CapturedLmStudioRequest): string | undefined {
     : user?.content.map((part) => part.text ?? "").join("");
 }
 
+test("composer squircle follows resizing and draft growth without clipping access controls", async ({
+  aiden,
+}) => {
+  const { page } = aiden;
+  await finishLmStudioOnboarding(page);
+  const shell = page.locator(".composer-shell");
+  const composer = page.locator("textarea");
+  expect(await page.evaluate(() => CSS.supports("corner-shape", "squircle"))).toBe(true);
+  const assertShape = async () => {
+    await expect(shell).toHaveCSS("corner-shape", "squircle");
+    await expect(shell).toHaveCSS("border-top-left-radius", "40px");
+    await expect(shell).toHaveCSS("overflow", "visible");
+    await expect(shell).toHaveCSS("clip-path", "none");
+    expect(await shell.evaluate((element) => getComputedStyle(element).boxShadow)).not.toBe("none");
+  };
+  await assertShape();
+  const initial = await shell.boundingBox();
+  await composer.fill(Array.from({ length: 8 }, (_, index) => `Draft line ${index + 1}`).join("\n"));
+  await expect.poll(async () => (await shell.boundingBox())!.height).toBeGreaterThan(initial!.height);
+  await aiden.app.evaluate(({ BrowserWindow }) => BrowserWindow.getAllWindows()[0].setSize(900, 720));
+  await expect.poll(async () => (await shell.boundingBox())!.width).toBeLessThan(initial!.width);
+  await assertShape();
+  await composer.fill("");
+  const access = page.getByRole("button", { name: /^Workspace access: Ask first/u });
+  await access.click();
+  const options = page.getByRole("radiogroup", { name: "Workspace access" });
+  const noAccess = options.getByRole("radio", { name: /^Workspace access: No access/u });
+  // Clicking a choice above the shell also verifies that overflow is hit-testable.
+  await expect(options).toBeVisible();
+  expect((await options.boundingBox())!.y).toBeLessThan((await shell.boundingBox())!.y);
+  await noAccess.click();
+  await expect(page.getByRole("button", { name: /^Workspace access: No access/u })).toBeVisible();
+  await composer.fill("");
+  await assertShape();
+  await page.screenshot({ path: test.info().outputPath("squircle-composer.png") });
+});
+
 test("workspace bar auto-hides after sending and its appearance setting survives relaunch", async ({
   aiden,
 }) => {
@@ -245,6 +282,10 @@ test("switching chats retains the queue without delivering it into another conve
   ).toHaveLength(0);
   await queue.getByRole("button", { name: "Resume queue", exact: true }).click();
   await expect(queue).toBeHidden();
+  // The queue clears after durable append; the provider request starts asynchronously.
+  await expect.poll(() => lmStudio.requests.some(
+    (request) => lastUserText(request) === "Only send in the original chat",
+  )).toBe(true);
   const request = lmStudio.requests.find(
     (request) => lastUserText(request) === "Only send in the original chat",
   );

From 4189124a824c704d8624401a33eb53459c8adf77 Mon Sep 17 00:00:00 2001
From: Sambit Biswas <sambit.biswas2@gmail.com>
Date: Fri, 4 Sep 2026 22:31:05 -0400
Subject: [PATCH 4/6] Unify app action buttons with reusable squircle styling

---
 AGENTS.md                                     |  2 +
 docs/chatgpt-desktop-ui-inspiration.md        |  2 +
 docs/chatgpt-ui-element-specimen.html         | 19 ++++++--
 docs/design-guide.md                          | 48 +++++++++++++++++++
 .../components/assistant/assistant-bubble.tsx |  6 +--
 renderer/components/model-picker.tsx          |  2 -
 renderer/components/open-in-editor-picker.tsx |  2 -
 renderer/components/scheduled-task-editor.tsx |  2 -
 renderer/components/scheduled-tasks-view.tsx  |  1 -
 renderer/components/subagent-chips.tsx        |  1 -
 renderer/components/subagent-detail.tsx       |  2 -
 renderer/components/subagents-panel.tsx       |  2 -
 renderer/components/ui.tsx                    |  4 +-
 .../lib/button-appearance-contract.test.ts    | 30 ++++++++++--
 renderer/styles.css                           |  8 ++++
 tests/e2e/chat-message-queue.spec.ts          |  5 ++
 tests/e2e/fixtures.ts                         | 12 +++++
 tests/e2e/settings-model-picker.spec.ts       |  5 +-
 18 files changed, 126 insertions(+), 27 deletions(-)
 create mode 100644 docs/design-guide.md

diff --git a/AGENTS.md b/AGENTS.md
index 4c7e5d05..0421a538 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -12,6 +12,8 @@ The current plan inventory and status live in [`docs/plans/README.md`](docs/plan
 
 ## UI design references
 
+Follow `docs/design-guide.md` for reusable action shapes, semantic tokens, and accessibility. Reuse the shared squircle button treatment for new and existing actions rather than introducing per-screen button geometry.
+
 Before adding or materially restyling any UI element or component, always review both `docs/chatgpt-desktop-ui-inspiration.md` and `docs/chatgpt-ui-element-specimen.html` for interaction, styling, state, motion, and accessibility inspiration. Adapt the references to Aiden's existing visual language rather than copying them blindly, and use the semantic design tokens in `renderer/styles.css` and `renderer/shared/appearance.ts` instead of introducing one-off colors.
 
 Do not put decorative borders or outlines around radio-button choice cards. Communicate selection with the radio control and existing background-state tokens instead. Always preserve visible keyboard `focus-visible` rings or outlines for accessibility.
diff --git a/docs/chatgpt-desktop-ui-inspiration.md b/docs/chatgpt-desktop-ui-inspiration.md
index 7e278e48..421a3c4e 100644
--- a/docs/chatgpt-desktop-ui-inspiration.md
+++ b/docs/chatgpt-desktop-ui-inspiration.md
@@ -4,6 +4,8 @@ Research date: 2026-07-18
 
 ## Scope and confidence
 
+For current reusable Aiden components and shape rules, follow the [design guide](design-guide.md). The observations below provide historical interaction inspiration.
+
 This audit covers the installed `/Applications/ChatGPT.app`, build `26.715.31925` (`com.openai.codex`). Although the app is displayed as ChatGPT, its package and renderer identify it as the current ChatGPT-branded Codex desktop product. The findings therefore mix classic Chat, Codex agent, project, review, browser, and terminal flows.
 
 Evidence used:
diff --git a/docs/chatgpt-ui-element-specimen.html b/docs/chatgpt-ui-element-specimen.html
index 4892f7db..27a2fa22 100644
--- a/docs/chatgpt-ui-element-specimen.html
+++ b/docs/chatgpt-ui-element-specimen.html
@@ -30,8 +30,9 @@
         --success: #087c58;
         --warning: #9a6700;
         --radius-control: 10px;
+        --radius-button: 16px;
         --radius-popover: 12px;
-        --radius-composer: 20px;
+        --radius-composer: 40px;
         --radius-dialog: 16px;
         --shadow-hairline: 0 0 0 0.5px rgb(0 0 0 / 0.1);
         --shadow-control: 0 1px 2px -1px rgb(0 0 0 / 0.08);
@@ -45,7 +46,7 @@
         --duration-relaxed: 300ms;
         --ease-enter: cubic-bezier(0.19, 1, 0.22, 1);
         --ease-snappy: cubic-bezier(0.23, 1, 0.32, 1);
-        --focus: 0 0 0 3px rgb(11 125 229 / 0.24);
+        --focus: 0 0 0 2px rgb(24 24 23 / 0.55);
       }
 
       html[data-theme="dark"] {
@@ -78,7 +79,7 @@
         --shadow-composer: var(--shadow-hairline), 0 3px 12px rgb(0 0 0 / 0.46);
         --shadow-toast: var(--shadow-hairline), 0 5px 16px rgb(0 0 0 / 0.5);
         --shadow-dialog: var(--shadow-hairline), 0 24px 48px -12px rgb(0 0 0 / 0.72);
-        --focus: 0 0 0 3px rgb(75 156 242 / 0.3);
+        --focus: 0 0 0 2px rgb(245 245 243 / 0.55);
       }
 
       * { box-sizing: border-box; }
@@ -86,6 +87,14 @@
       body { margin: 0; color: var(--text); background: var(--bg); font-size: 14px; line-height: 1.45; }
       button, input, textarea { font: inherit; }
       button { color: inherit; }
+      :root :is(button, [role="button"], .button):not([role="switch"]):not([role="radio"]):not([role="checkbox"]) {
+        border-radius: var(--radius-button);
+        corner-shape: squircle;
+      }
+      :root :is(button, [role="button"], .button):focus-visible {
+        outline: 2px solid var(--text-secondary);
+        outline-offset: 2px;
+      }
       code { font-family: "SFMono-Regular", "SF Mono", Menlo, monospace; font-size: 12px; }
 
       .topbar {
@@ -232,7 +241,7 @@
       .approval-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px; }
       .composer-wrap { position: absolute; right: 18px; bottom: 16px; left: 18px; }
       .context-strip { display: flex; width: fit-content; max-width: calc(100% - 20px); min-height: 28px; align-items: center; gap: 6px; margin: 0 10px -3px; padding: 4px 9px 7px; border-radius: 11px 11px 0 0; background: var(--control); color: var(--text-secondary); font-size: 11px; }
-      .composer { padding: 10px; border-radius: var(--radius-composer); background: var(--surface-raised); box-shadow: var(--shadow-composer); }
+      .composer { padding: 10px; border-radius: var(--radius-composer); corner-shape: squircle; background: var(--surface-raised); box-shadow: var(--shadow-composer); }
       .composer textarea { width: 100%; min-height: 58px; padding: 4px 5px; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); }
       .composer textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
       .composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@@ -439,7 +448,7 @@ <h1>Controls that feel quiet until you touch them.</h1>
       <section class="section">
         <div class="section-head">
           <h2>Button vocabulary</h2>
-          <p>Neutral buttons gain only a small surface and shadow change. Primary actions carry the accent. Ghost buttons stay flat. Pressed states move inward through an inset shadow rather than bouncing or shifting layout.</p>
+          <p>All actions reuse the same soft squircle shape, including icon buttons. Use the shared Button and 16px button radius; the composer uses a broader 40px radius. Neutral buttons gain a small surface and shadow change. Primary actions carry the accent, ghost buttons stay flat, and keyboard focus remains visible. See the <a href="design-guide.md">design guide</a> for reuse rules.</p>
         </div>
         <div class="cluster">
           <button class="button primary" type="button">Send message <span aria-hidden="true">↑</span></button>
diff --git a/docs/design-guide.md b/docs/design-guide.md
new file mode 100644
index 00000000..82c7f29a
--- /dev/null
+++ b/docs/design-guide.md
@@ -0,0 +1,48 @@
+# Aiden design guide
+
+## Reusable action shapes
+
+Use the shared `Button` from `renderer/components/ui.tsx` for actions, including
+icon-only controls and links rendered with `asChild`. Labeled and icon-only
+buttons use the same soft squircle shape. Choose the existing size and variant
+for emphasis; do not add a separate pill or circular button variant.
+
+| Surface | Reuse | Geometry |
+| --- | --- | --- |
+| Buttons, toolbar actions, navigation actions, and button links | `Button`, or the shared action rule in `renderer/styles.css` for existing native buttons | `--radius-button: 16px` and `corner-shape: squircle` |
+| A custom visual that must follow a button's silhouette, such as its artwork mask | `.squircle-control` | The same button radius and corner shape |
+| Chat composer | `.composer-shell` | `--radius-composer: 40px` and `corner-shape: squircle` |
+
+The renderer's action rule also covers existing `button`, `[role="button"]`, and
+`[data-slot="button"]` elements, including the compact dictation window. Reuse
+that rule instead of adding per-screen geometry. Radio indicators, checkboxes,
+and switch tracks retain their recognizable selection shapes. Text fields keep
+their existing field geometry and focus treatment.
+
+Use native CSS geometry in the Electron renderer. Keep shadows on the shaped
+element and preserve visible overflow for menus, badges, and focus rings. Apply
+clipping only to an inner artwork mask that needs it, never to the whole action
+or composer. No JavaScript path generation or new dependency is needed.
+
+## Color, state, and accessibility
+
+Reuse semantic surface, text, accent, status, and elevation tokens from
+`renderer/styles.css` and `renderer/shared/appearance.ts`. Shape does not change
+an action's meaning: primary actions retain their accent, destructive actions
+retain their semantic treatment, and transparent actions gain a soft fill on
+hover. Avoid decorative borders and outlines.
+
+Preserve neutral `focus-visible` outlines on non-text controls, accessible labels
+for icon actions, disabled semantics, and existing hit-target sizes. Text-entry
+focus uses fill and caret changes without a new border or ring. Reuse existing
+hover and press feedback and respect Reduce Motion; do not animate the corner
+shape or add layout shifts.
+
+## Verification
+
+Check shared and custom actions in onboarding, the chat toolbar and composer,
+queued-message dialogs, Settings, and compact windows. Exercise hover, keyboard
+focus, disabled states, light and dark themes, narrow layouts, and overflow
+menus. The interactive [element specimen](chatgpt-ui-element-specimen.html)
+demonstrates the same geometry. Extend the button appearance contract and
+Electron interaction tests when these rules change.
diff --git a/renderer/components/assistant/assistant-bubble.tsx b/renderer/components/assistant/assistant-bubble.tsx
index 9bfe8e1b..7df769c8 100644
--- a/renderer/components/assistant/assistant-bubble.tsx
+++ b/renderer/components/assistant/assistant-bubble.tsx
@@ -4,11 +4,11 @@ import { unreadBadgeLabel } from "../../lib/assistant-dock";
 const AIDEN_MARK_URL = new URL("../../../resources/app-icon.png", import.meta.url).href;
 
 /**
- * The minimized Aiden affordance: the app mark cropped to a circle, with an
+ * The minimized Aiden affordance: the app mark cropped to the shared button shape, with an
  * unread badge and an optional one-line preview of the latest reply.
  *
  * The mark is the macOS icon, which carries transparent padding around its
- * squircle. Scaling it past the circular mask lets the artwork bleed to the
+ * squircle. Scaling it past the mask lets the artwork bleed to the
  * edge instead of leaving a ring of empty pixels.
  */
 interface AssistantBubbleProps {
@@ -38,7 +38,7 @@ export const AssistantBubble = React.forwardRef<HTMLButtonElement, AssistantBubb
           onClick={onOpen}
           className="pointer-events-auto relative size-12 shrink-0 rounded-full shadow-composer outline outline-1 outline-field/60 transition-transform duration-150 ease-out hover:scale-105 active:scale-95"
         >
-          <span className="block size-full overflow-hidden rounded-full">
+          <span className="squircle-control block size-full overflow-hidden">
             <img src={AIDEN_MARK_URL} alt="" className="size-full scale-[1.32] object-cover" />
           </span>
           {badge ? (
diff --git a/renderer/components/model-picker.tsx b/renderer/components/model-picker.tsx
index d30a8f32..72f591ef 100644
--- a/renderer/components/model-picker.tsx
+++ b/renderer/components/model-picker.tsx
@@ -565,7 +565,6 @@ export function ModelPicker({
               tabIndex={view === "list" ? 0 : -1}
               variant="transparent"
               size="small"
-              radius="rounded"
               className={cn(
                 "h-6 justify-center px-2",
                 view === "list" && "bg-popover shadow-control",
@@ -583,7 +582,6 @@ export function ModelPicker({
               tabIndex={view === "pad" ? 0 : -1}
               variant="transparent"
               size="small"
-              radius="rounded"
               className={cn(
                 "h-6 justify-center px-2",
                 view === "pad" && "bg-popover shadow-control",
diff --git a/renderer/components/open-in-editor-picker.tsx b/renderer/components/open-in-editor-picker.tsx
index 7123861b..e7f2a81d 100644
--- a/renderer/components/open-in-editor-picker.tsx
+++ b/renderer/components/open-in-editor-picker.tsx
@@ -141,7 +141,6 @@ export function OpenInEditorPicker({ workspaceId, folderPath }: OpenInEditorPick
       <Button
         variant="transparent"
         size="large"
-        radius="rounded"
         disabled={disabled}
         onClick={() => void openPreferredEditor()}
         aria-keyshortcuts={ariaKeyShortcut(shortcutBinding)}
@@ -173,7 +172,6 @@ export function OpenInEditorPicker({ workspaceId, folderPath }: OpenInEditorPick
             iconOnly
             variant="transparent"
             size="large"
-            radius="rounded"
             disabled={disabled}
             aria-label="Choose editor"
             className="h-9 w-8 rounded-l-none rounded-r-pill border-0 [&_svg]:size-4"
diff --git a/renderer/components/scheduled-task-editor.tsx b/renderer/components/scheduled-task-editor.tsx
index c500cfa3..18c3ab00 100644
--- a/renderer/components/scheduled-task-editor.tsx
+++ b/renderer/components/scheduled-task-editor.tsx
@@ -257,7 +257,6 @@ export function ScheduledTaskEditor({
               <Button
                 size="small"
                 variant={draft.mode === "llm" ? "filled" : "transparent"}
-                radius="rounded"
                 aria-pressed={draft.mode === "llm"}
                 onClick={() => setMode("llm")}
               >
@@ -266,7 +265,6 @@ export function ScheduledTaskEditor({
               <Button
                 size="small"
                 variant={draft.mode === "script" ? "filled" : "transparent"}
-                radius="rounded"
                 aria-pressed={draft.mode === "script"}
                 onClick={() => setMode("script")}
               >
diff --git a/renderer/components/scheduled-tasks-view.tsx b/renderer/components/scheduled-tasks-view.tsx
index 998fe4b5..473480ee 100644
--- a/renderer/components/scheduled-tasks-view.tsx
+++ b/renderer/components/scheduled-tasks-view.tsx
@@ -543,7 +543,6 @@ export function ScheduledTasksView() {
                       tabIndex={tab === value ? 0 : -1}
                       key={value}
                       size="small"
-                      radius="rounded"
                       variant={tab === value ? "filled" : "transparent"}
                       onClick={() => setTab(value)}
                       onKeyDown={(event) => {
diff --git a/renderer/components/subagent-chips.tsx b/renderer/components/subagent-chips.tsx
index c0a53bbe..c1ae7ee1 100644
--- a/renderer/components/subagent-chips.tsx
+++ b/renderer/components/subagent-chips.tsx
@@ -131,7 +131,6 @@ export function SubagentChips({
             key={runId}
             variant="muted"
             size="small"
-            radius="rounded"
             data-subagent-chip-run-id={runId}
             className="max-w-full gap-1.5 motion-reduce:transition-none"
             aria-label={`Open ${label}. Status: ${status}.`}
diff --git a/renderer/components/subagent-detail.tsx b/renderer/components/subagent-detail.tsx
index 1dfd2209..1a23e576 100644
--- a/renderer/components/subagent-detail.tsx
+++ b/renderer/components/subagent-detail.tsx
@@ -297,7 +297,6 @@ export const SubagentDetail = React.forwardRef<HTMLHeadingElement, SubagentDetai
                   <Button
                     variant="muted"
                     size="small"
-                    radius="rounded"
                     onClick={onRetryRefresh}
                     className="mt-3 motion-reduce:transition-none"
                   >
@@ -315,7 +314,6 @@ export const SubagentDetail = React.forwardRef<HTMLHeadingElement, SubagentDetai
                 <Button
                   variant="muted"
                   size="small"
-                  radius="rounded"
                   disabled={stopPending}
                   aria-label={stopPending ? `Stopping ${run.label}` : `${stopLabel} ${run.label}`}
                   aria-busy={stopPending ? true : undefined}
diff --git a/renderer/components/subagents-panel.tsx b/renderer/components/subagents-panel.tsx
index 8c608e26..76c198c2 100644
--- a/renderer/components/subagents-panel.tsx
+++ b/renderer/components/subagents-panel.tsx
@@ -125,7 +125,6 @@ const SubagentDetailPending = React.forwardRef<
               <Button
                 variant="muted"
                 size="small"
-                radius="rounded"
                 onClick={onRetry}
                 aria-label={`Retry loading details for ${run.label}`}
                 className="mt-3 motion-reduce:transition-none"
@@ -441,7 +440,6 @@ function OwnedSubagentsPanel({
               <Button
                 variant="transparent"
                 size="small"
-                radius="rounded"
                 onClick={showRoster}
                 data-subagent-back="true"
                 className="motion-reduce:transition-none"
diff --git a/renderer/components/ui.tsx b/renderer/components/ui.tsx
index eb6b1029..8b2a8ca0 100644
--- a/renderer/components/ui.tsx
+++ b/renderer/components/ui.tsx
@@ -46,7 +46,6 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     | "destructive";
   size?: "small" | "medium" | "large";
   iconOnly?: boolean;
-  radius?: "full" | "rounded";
   asChild?: boolean;
   pressFeedback?: boolean;
 };
@@ -57,7 +56,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
     variant = "filled",
     size = "medium",
     iconOnly,
-    radius = "full",
     asChild,
     pressFeedback = false,
     type = "button",
@@ -74,7 +72,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
       className={cn(
         "dimmable inline-flex shrink-0 cursor-default items-center justify-center whitespace-nowrap border-0 text-strong outline-none transition-[background-color,color,box-shadow,opacity,transform,scale] duration-150 ease-out focus-visible:outline-none disabled:pointer-events-none disabled:opacity-45 motion-reduce:transform-none [&_svg:not([class*='size-'])]:size-4",
         pressFeedback && "button-press-feedback",
-        radius === "full" ? "rounded-pill" : "rounded-control",
+        "rounded-button",
         size === "small" && "h-7 gap-1.5 px-2",
         size === "medium" && "h-8 gap-1.5 px-3 [&_svg:not([class*='size-'])]:size-4.5",
         size === "large" && "h-9 gap-1.5 px-3 [&_svg:not([class*='size-'])]:size-5",
diff --git a/renderer/lib/button-appearance-contract.test.ts b/renderer/lib/button-appearance-contract.test.ts
index dacbf4d0..350e78be 100644
--- a/renderer/lib/button-appearance-contract.test.ts
+++ b/renderer/lib/button-appearance-contract.test.ts
@@ -5,7 +5,7 @@ import test from "node:test";
 const uiSource = readFileSync(new URL("../components/ui.tsx", import.meta.url), "utf8");
 const styles = readFileSync(new URL("../styles.css", import.meta.url), "utf8");
 
-test("shared action buttons use soft borderless capsules and circular icon geometry", () => {
+test("shared action buttons use the same squircle for labeled and icon-only actions", () => {
   const buttonSource = uiSource.slice(
     uiSource.indexOf("export const Button"),
     uiSource.indexOf("export const Input"),
@@ -13,12 +13,36 @@ test("shared action buttons use soft borderless capsules and circular icon geome
   assert.match(buttonSource, /data-slot="button"/u);
   assert.match(buttonSource, /border-0/u);
   assert.doesNotMatch(buttonSource, /border border-transparent/u);
-  assert.match(buttonSource, /radius === "full" \? "rounded-pill"/u);
+  assert.match(buttonSource, /"rounded-button"/u);
+  assert.doesNotMatch(buttonSource, /rounded-pill|radius =/u);
   assert.match(buttonSource, /iconOnly && "aspect-square px-0"/u);
-  assert.match(buttonSource, /active:scale-\[0\.985\]/u);
+  assert.match(buttonSource, /pressFeedback && "button-press-feedback"/u);
   assert.match(buttonSource, /motion-reduce:transform-none/u);
 });
 
+test("legacy actions and button links share the shape without clipping or changing selection controls", () => {
+  const rule = styles.match(/:root :is\(button, \[role="button"\], \[data-slot="button"\], \.squircle-control\)[^{]+\{([^}]+)\}/u);
+  assert.ok(rule);
+  for (const role of ["switch", "radio", "checkbox"]) {
+    assert.ok(rule[0].includes(`:not([role="${role}"])`));
+  }
+  assert.match(rule[1], /border-radius: var\(--radius-button\)/u);
+  assert.match(rule[1], /corner-shape: squircle/u);
+  assert.doesNotMatch(rule[1], /overflow|clip-path|outline/u);
+  assert.match(styles, /--radius-button: 16px/u);
+});
+
+test("design guidance and interactive specimen document reusable button and composer geometry", () => {
+  const guide = readFileSync(new URL("../../docs/design-guide.md", import.meta.url), "utf8");
+  const specimen = readFileSync(new URL("../../docs/chatgpt-ui-element-specimen.html", import.meta.url), "utf8");
+  for (const token of ["--radius-button", "--radius-composer"]) {
+    assert.ok(guide.includes(token));
+    assert.ok(specimen.includes(token));
+  }
+  assert.match(guide, /focus-visible/u);
+  assert.match(specimen, /corner-shape: squircle/u);
+});
+
 test("control elevation uses depth without a faux hairline outline", () => {
   const elevations = [...styles.matchAll(/--elevation-control(?:-hover|-pressed)?:\s*([^;]+);/gu)]
     .map((match) => match[1])
diff --git a/renderer/styles.css b/renderer/styles.css
index 172d4766..01754c36 100644
--- a/renderer/styles.css
+++ b/renderer/styles.css
@@ -43,6 +43,7 @@
   --color-support-warning: var(--support-warning);
   --color-support-warning-foreground: var(--support-warning-foreground);
   --radius-control: 12px;
+  --radius-button: 16px;
   --radius-menu: 8px;
   --radius-card: 12px;
   --radius-dialog: 16px;
@@ -451,6 +452,13 @@ textarea {
   font: inherit;
 }
 
+/* One shape for shared actions, legacy buttons, and button-like links in every window.
+   Keep native selection controls recognizable and never clip menus or focus rings. */
+:root :is(button, [role="button"], [data-slot="button"], .squircle-control):not([role="switch"]):not([role="radio"]):not([role="checkbox"]) {
+  border-radius: var(--radius-button);
+  corner-shape: squircle;
+}
+
 /* Text entry uses fill and caret feedback without changing its resting edge. */
 :root :where(input, textarea):focus-visible {
   outline: none !important;
diff --git a/tests/e2e/chat-message-queue.spec.ts b/tests/e2e/chat-message-queue.spec.ts
index ae6982f2..c25e8a82 100644
--- a/tests/e2e/chat-message-queue.spec.ts
+++ b/tests/e2e/chat-message-queue.spec.ts
@@ -2,6 +2,7 @@ import { readFile } from "node:fs/promises";
 import path from "node:path";
 import {
   expect,
+  expectSquircleButtons,
   finishLmStudioOnboarding,
   REPOSITORY_ROOT,
   test,
@@ -25,7 +26,9 @@ test("composer squircle follows resizing and draft growth without clipping acces
   aiden,
 }) => {
   const { page } = aiden;
+  await expectSquircleButtons(page);
   await finishLmStudioOnboarding(page);
+  await expectSquircleButtons(page);
   const shell = page.locator(".composer-shell");
   const composer = page.locator("textarea");
   expect(await page.evaluate(() => CSS.supports("corner-shape", "squircle"))).toBe(true);
@@ -50,6 +53,7 @@ test("composer squircle follows resizing and draft growth without clipping acces
   const noAccess = options.getByRole("radio", { name: /^Workspace access: No access/u });
   // Clicking a choice above the shell also verifies that overflow is hit-testable.
   await expect(options).toBeVisible();
+  await expectSquircleButtons(page);
   expect((await options.boundingBox())!.y).toBeLessThan((await shell.boundingBox())!.y);
   await noAccess.click();
   await expect(page.getByRole("button", { name: /^Workspace access: No access/u })).toBeVisible();
@@ -176,6 +180,7 @@ test("queued messages edit, reorder, delete and steer without changing the compo
   const editor = page.getByRole("dialog", { name: "Edit queued message", exact: true });
   const editText = editor.getByRole("textbox", { name: "Queued message text" });
   await expect(editText).toHaveValue("Queued second");
+  await expectSquircleButtons(page);
   await page.screenshot({ path: test.info().outputPath("queued-message-editor.png") });
   await editText.fill("Discard this edit");
   await page.keyboard.press("Escape");
diff --git a/tests/e2e/fixtures.ts b/tests/e2e/fixtures.ts
index e98bf032..3a49a060 100644
--- a/tests/e2e/fixtures.ts
+++ b/tests/e2e/fixtures.ts
@@ -15,6 +15,18 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 
 export const REPOSITORY_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../..");
+
+export async function expectSquircleButtons(page: Page): Promise<void> {
+  const actions = page.locator('button, [role="button"], [data-slot="button"]');
+  const failures = await actions.evaluateAll((elements) => elements.filter((element) => {
+    if (["switch", "radio", "checkbox"].includes(element.getAttribute("role") ?? "")) return false;
+    if (!element.getClientRects().length) return false;
+    const style = getComputedStyle(element);
+    return style.getPropertyValue("corner-shape") !== "squircle" || style.borderTopLeftRadius !== "16px";
+  }).map((element) => element.getAttribute("aria-label") ?? element.textContent?.trim()));
+  playwrightTest.expect(failures).toEqual([]);
+}
+
 export const LM_STUDIO_PROVIDER_ID = "custom:lmstudio";
 export const E2E_MODEL_ID = "aiden-e2e-vision";
 export const E2E_MODEL_DISPLAY_NAME = "Aiden E2E Vision";
diff --git a/tests/e2e/settings-model-picker.spec.ts b/tests/e2e/settings-model-picker.spec.ts
index 28d4394f..a76865dd 100644
--- a/tests/e2e/settings-model-picker.spec.ts
+++ b/tests/e2e/settings-model-picker.spec.ts
@@ -1,4 +1,4 @@
-import { E2E_MODEL_DISPLAY_NAME, expect, finishLmStudioOnboarding, test } from "./fixtures";
+import { E2E_MODEL_DISPLAY_NAME, expect, expectSquircleButtons, finishLmStudioOnboarding, test } from "./fixtures";
 
 const SETTINGS_SECTIONS = [
   "Providers",
@@ -122,6 +122,7 @@ test("every Settings destination renders and a one-model local inventory stays u
     await destination.click();
     await expect(destination).toHaveAttribute("aria-current", "page");
     await assertRenderedSettingsDestination(page, section);
+    await expectSquircleButtons(page);
     if (section === "Appearance") {
       const light = page.locator('.appearance-mode-preview-light [data-preview-scheme="light"]');
       const dark = page.locator('.appearance-mode-preview-dark [data-preview-scheme="dark"]');
@@ -146,10 +147,12 @@ test("every Settings destination renders and a one-model local inventory stays u
       expect(before[0]).not.toBe(before[1]);
       await page.locator('.appearance-mode-option').filter({hasText: 'Dark'}).click();
       await expect(page.locator('html')).toHaveClass(/dark/u);
+      await expectSquircleButtons(page);
       expect(await colors()).toEqual(before);
       await assertRestingPreviews();
       await page.locator('.appearance-mode-option').filter({hasText: 'Light'}).click();
       await expect(page.locator('html')).not.toHaveClass(/dark/u);
+      await expectSquircleButtons(page);
       expect(await colors()).toEqual(before);
       await assertRestingPreviews();
     }

From ea003d56a8acd5415a9f44aa5353ba11aae51dc8 Mon Sep 17 00:00:00 2001
From: Sambit Biswas <sambit.biswas2@gmail.com>
Date: Fri, 4 Sep 2026 22:46:48 -0400
Subject: [PATCH 5/6] Preserve joined action seams in shared squircle controls

---
 .papercuts/troubleshooting.md                 |  1 +
 docs/chatgpt-ui-element-specimen.html         | 10 ++++-
 docs/design-guide.md                          |  6 +++
 .../components/assistant/assistant-bubble.tsx |  2 +-
 renderer/components/open-in-editor-picker.tsx |  6 +--
 renderer/styles.css                           | 17 +++++++-
 tests/e2e/chat-shell-interactions.spec.ts     | 42 ++++++++++++++++++-
 tests/e2e/fixtures.ts                         |  9 ++++
 8 files changed, 86 insertions(+), 7 deletions(-)

diff --git a/.papercuts/troubleshooting.md b/.papercuts/troubleshooting.md
index ca9b8e9a..cd7e5e28 100644
--- a/.papercuts/troubleshooting.md
+++ b/.papercuts/troubleshooting.md
@@ -319,3 +319,4 @@ owns; reopen the terminal before judging the final live state.
 - The selected local Xcode began rejecting compiler/git calls for unaccepted license terms during this task. Used the installed Command Line Tools for git and rebuilt the renderer/Electron bundles with existing native helpers; native sources are unchanged and CI checks the full build.
 - Appearance persistence uses the `settings` envelope in settings.json; E2E disk assertions must read `settings.appearance`, then verify the preference after an app relaunch.
 - A CI navigation test raced the provider transport: queue removal confirms durable append, but does not mean the mock HTTP server has received the next generation request. Wait for that specific request before asserting its conversation history.
+- The shared button radius overrides legacy per-corner utility classes. Joined actions need an explicit shared group rule: square inner seams, the common outer squircle radius, and visible overflow for focus outlines. Check hover fills and seam hit testing, not only the uniform computed radius.
diff --git a/docs/chatgpt-ui-element-specimen.html b/docs/chatgpt-ui-element-specimen.html
index 27a2fa22..0e5f08bc 100644
--- a/docs/chatgpt-ui-element-specimen.html
+++ b/docs/chatgpt-ui-element-specimen.html
@@ -87,7 +87,7 @@
       body { margin: 0; color: var(--text); background: var(--bg); font-size: 14px; line-height: 1.45; }
       button, input, textarea { font: inherit; }
       button { color: inherit; }
-      :root :is(button, [role="button"], .button):not([role="switch"]):not([role="radio"]):not([role="checkbox"]) {
+      :root :is(button, [role="button"], .button):where(:not([role="switch"]):not([role="radio"]):not([role="checkbox"])) {
         border-radius: var(--radius-button);
         corner-shape: squircle;
       }
@@ -95,6 +95,10 @@
         outline: 2px solid var(--text-secondary);
         outline-offset: 2px;
       }
+      .squircle-action-group { display: inline-flex; border-radius: var(--radius-button); corner-shape: squircle; background: var(--control); }
+      :root .squircle-action-group > .button { border-radius: 0; }
+      :root .squircle-action-group > .button:first-child { border-start-start-radius: var(--radius-button); border-end-start-radius: var(--radius-button); }
+      :root .squircle-action-group > .button:last-child { border-start-end-radius: var(--radius-button); border-end-end-radius: var(--radius-button); }
       code { font-family: "SFMono-Regular", "SF Mono", Menlo, monospace; font-size: 12px; }
 
       .topbar {
@@ -457,6 +461,10 @@ <h2>Button vocabulary</h2>
           <button class="button glass icon" type="button" aria-label="New chat">＋</button>
           <button class="button danger" type="button">Deny</button>
           <button class="button" type="button" disabled>Unavailable</button>
+          <div class="squircle-action-group" role="group" aria-label="Joined action example">
+            <button class="button ghost" type="button">Open</button>
+            <button class="button ghost icon" type="button" aria-label="Choose destination">⌄</button>
+          </div>
         </div>
         <div class="section-spacer"></div>
         <div class="state-grid" role="group" aria-label="Neutral button state comparison">
diff --git a/docs/design-guide.md b/docs/design-guide.md
index 82c7f29a..feefcced 100644
--- a/docs/design-guide.md
+++ b/docs/design-guide.md
@@ -11,6 +11,7 @@ for emphasis; do not add a separate pill or circular button variant.
 | --- | --- | --- |
 | Buttons, toolbar actions, navigation actions, and button links | `Button`, or the shared action rule in `renderer/styles.css` for existing native buttons | `--radius-button: 16px` and `corner-shape: squircle` |
 | A custom visual that must follow a button's silhouette, such as its artwork mask | `.squircle-control` | The same button radius and corner shape |
+| Joined actions, such as an action with a separate menu trigger | `.squircle-control.squircle-action-group` around direct `Button` children | 16px outer corners, square internal seams |
 | Chat composer | `.composer-shell` | `--radius-composer: 40px` and `corner-shape: squircle` |
 
 The renderer's action rule also covers existing `button`, `[role="button"]`, and
@@ -24,6 +25,11 @@ element and preserve visible overflow for menus, badges, and focus rings. Apply
 clipping only to an inner artwork mask that needs it, never to the whole action
 or composer. No JavaScript path generation or new dependency is needed.
 
+Joined actions reuse the group rule instead of per-corner utility overrides.
+Their individual hover and focus fills meet at straight seams, while the group
+and its end buttons share the outer squircle. Leave the group overflow visible
+so each button's keyboard outline and portaled menus remain unobstructed.
+
 ## Color, state, and accessibility
 
 Reuse semantic surface, text, accent, status, and elevation tokens from
diff --git a/renderer/components/assistant/assistant-bubble.tsx b/renderer/components/assistant/assistant-bubble.tsx
index 7df769c8..49d2f4fa 100644
--- a/renderer/components/assistant/assistant-bubble.tsx
+++ b/renderer/components/assistant/assistant-bubble.tsx
@@ -36,7 +36,7 @@ export const AssistantBubble = React.forwardRef<HTMLButtonElement, AssistantBubb
           type="button"
           aria-label={badge ? `Open Aiden (${badge} unread)` : "Open Aiden"}
           onClick={onOpen}
-          className="pointer-events-auto relative size-12 shrink-0 rounded-full shadow-composer outline outline-1 outline-field/60 transition-transform duration-150 ease-out hover:scale-105 active:scale-95"
+          className="pointer-events-auto relative size-12 shrink-0 shadow-composer outline outline-1 outline-field/60 transition-transform duration-150 ease-out hover:scale-105 active:scale-95"
         >
           <span className="squircle-control block size-full overflow-hidden">
             <img src={AIDEN_MARK_URL} alt="" className="size-full scale-[1.32] object-cover" />
diff --git a/renderer/components/open-in-editor-picker.tsx b/renderer/components/open-in-editor-picker.tsx
index e7f2a81d..94e0c5f1 100644
--- a/renderer/components/open-in-editor-picker.tsx
+++ b/renderer/components/open-in-editor-picker.tsx
@@ -136,7 +136,7 @@ export function OpenInEditorPicker({ workspaceId, folderPath }: OpenInEditorPick
     <div
       role="group"
       aria-label="Open workspace in editor"
-      className="open-in-editor-picker glass-surface flex h-9 shrink-0 overflow-hidden rounded-pill shadow-control transition-shadow duration-150 ease-out hover:shadow-control-hover"
+      className="open-in-editor-picker squircle-control squircle-action-group glass-surface flex h-9 shrink-0 shadow-control transition-shadow duration-150 ease-out hover:shadow-control-hover"
     >
       <Button
         variant="transparent"
@@ -149,7 +149,7 @@ export function OpenInEditorPicker({ workspaceId, folderPath }: OpenInEditorPick
             ? `Open workspace in ${preferredEditor.label}`
             : "Open workspace in preferred editor"
         }
-        className="h-9 rounded-l-pill rounded-r-none border-0 px-2.5"
+        className="h-9 border-0 px-2.5"
       >
         {preferredEditor ? (
           <EditorIcon editor={preferredEditor} className="size-[18px] shrink-0 rounded-[4px]" />
@@ -174,7 +174,7 @@ export function OpenInEditorPicker({ workspaceId, folderPath }: OpenInEditorPick
             size="large"
             disabled={disabled}
             aria-label="Choose editor"
-            className="h-9 w-8 rounded-l-none rounded-r-pill border-0 [&_svg]:size-4"
+            className="h-9 w-8 border-0 [&_svg]:size-4"
           >
             <ChevronDown aria-hidden="true" />
           </Button>
diff --git a/renderer/styles.css b/renderer/styles.css
index 01754c36..184de177 100644
--- a/renderer/styles.css
+++ b/renderer/styles.css
@@ -454,11 +454,26 @@ textarea {
 
 /* One shape for shared actions, legacy buttons, and button-like links in every window.
    Keep native selection controls recognizable and never clip menus or focus rings. */
-:root :is(button, [role="button"], [data-slot="button"], .squircle-control):not([role="switch"]):not([role="radio"]):not([role="checkbox"]) {
+:root :is(button, [role="button"], [data-slot="button"], .squircle-control):where(:not([role="switch"]):not([role="radio"]):not([role="checkbox"])) {
   border-radius: var(--radius-button);
   corner-shape: squircle;
 }
 
+/* Joined actions share one outer silhouette; their hover fills meet at square seams. */
+:root .squircle-action-group > [data-slot="button"] {
+  border-radius: 0;
+}
+
+:root .squircle-action-group > [data-slot="button"]:first-child {
+  border-start-start-radius: var(--radius-button);
+  border-end-start-radius: var(--radius-button);
+}
+
+:root .squircle-action-group > [data-slot="button"]:last-child {
+  border-start-end-radius: var(--radius-button);
+  border-end-end-radius: var(--radius-button);
+}
+
 /* Text entry uses fill and caret feedback without changing its resting edge. */
 :root :where(input, textarea):focus-visible {
   outline: none !important;
diff --git a/tests/e2e/chat-shell-interactions.spec.ts b/tests/e2e/chat-shell-interactions.spec.ts
index 02272327..eb5b7307 100644
--- a/tests/e2e/chat-shell-interactions.spec.ts
+++ b/tests/e2e/chat-shell-interactions.spec.ts
@@ -1,4 +1,4 @@
-import { expect, finishLmStudioOnboarding, test } from "./fixtures";
+import { expect, expectSquircleButtons, finishLmStudioOnboarding, test } from "./fixtures";
 
 const PASTED_IMAGE_NAME = "Pasted image.png";
 const ONE_PIXEL_PNG_BASE64 =
@@ -199,6 +199,46 @@ test("chat shell keeps local interactions isolated and keyboard-accessible", asy
 test.describe("with a workspace", () => {
   test.use({ workspaceSeed: true });
 
+  test("joined editor actions keep square hover seams and visible keyboard focus", async ({ aiden }) => {
+    const { app, page } = aiden;
+    await app.evaluate(({ ipcMain }) => {
+      ipcMain.removeHandler("workspaces:externalEditors");
+      ipcMain.handle("workspaces:externalEditors", () => [{ id: "finder", label: "Finder", iconDataUrl: null }]);
+    });
+    await finishLmStudioOnboarding(page);
+    const group = page.getByRole("group", { name: "Open workspace in editor" });
+    const open = group.getByRole("button", { name: "Open workspace in Finder", exact: true });
+    const choose = group.getByRole("button", { name: "Choose editor", exact: true });
+    await expect(open).toBeEnabled();
+    await expect(group).toHaveCSS("corner-shape", "squircle");
+    await expect(group).toHaveCSS("border-radius", "16px");
+    await expect(group).toHaveCSS("overflow", "visible");
+    await expectSquircleButtons(page);
+    for (const [button, seam] of [[open, "right"], [choose, "left"]] as const) {
+      await button.hover();
+      await expect(button).not.toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
+      await expect(button).toHaveCSS(`border-top-${seam}-radius`, "0px");
+      await expect(button).toHaveCSS(`border-bottom-${seam}-radius`, "0px");
+      // Hover fill reaches the top seam corner; a rounded half leaves this point outside.
+      expect(await button.evaluate((element, edge) => {
+        const rect = element.getBoundingClientRect();
+        const hit = document.elementFromPoint(edge === "right" ? rect.right - 1 : rect.left + 1, rect.top + 1);
+        return hit === element || element.contains(hit);
+      }, seam)).toBe(true);
+    }
+    await page.keyboard.press("Tab");
+    await open.focus();
+    await expect(open).toHaveCSS("outline-style", "solid");
+    await open.press("Tab");
+    await expect(choose).toBeFocused();
+    await expect(choose).toHaveCSS("outline-style", "solid");
+    await choose.press("Enter");
+    await expect(page.getByRole("menu")).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expect(choose).toBeFocused();
+    await group.screenshot({ path: test.info().outputPath("joined-editor-actions.png") });
+  });
+
   test("sidebar overflow menus stay to the right of the sidebar", async ({ aiden }) => {
     const { app, page } = aiden;
     await finishLmStudioOnboarding(page);
diff --git a/tests/e2e/fixtures.ts b/tests/e2e/fixtures.ts
index 3a49a060..bc115855 100644
--- a/tests/e2e/fixtures.ts
+++ b/tests/e2e/fixtures.ts
@@ -22,6 +22,15 @@ export async function expectSquircleButtons(page: Page): Promise<void> {
     if (["switch", "radio", "checkbox"].includes(element.getAttribute("role") ?? "")) return false;
     if (!element.getClientRects().length) return false;
     const style = getComputedStyle(element);
+    if (element.parentElement?.classList.contains("squircle-action-group")) {
+      const first = element === element.parentElement.firstElementChild;
+      const last = element === element.parentElement.lastElementChild;
+      return style.getPropertyValue("corner-shape") !== "squircle"
+        || style.borderStartStartRadius !== (first ? "16px" : "0px")
+        || style.borderEndStartRadius !== (first ? "16px" : "0px")
+        || style.borderStartEndRadius !== (last ? "16px" : "0px")
+        || style.borderEndEndRadius !== (last ? "16px" : "0px");
+    }
     return style.getPropertyValue("corner-shape") !== "squircle" || style.borderTopLeftRadius !== "16px";
   }).map((element) => element.getAttribute("aria-label") ?? element.textContent?.trim()));
   playwrightTest.expect(failures).toEqual([]);

From c682a9f92cfc9ed8030252eff65b01cea6cb4a46 Mon Sep 17 00:00:00 2001
From: Sambit Biswas <sambit.biswas2@gmail.com>
Date: Fri, 4 Sep 2026 22:59:16 -0400
Subject: [PATCH 6/6] Keep joined-action test focused on observable shape and
 focus

---
 .papercuts/troubleshooting.md             | 2 +-
 tests/e2e/chat-shell-interactions.spec.ts | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/.papercuts/troubleshooting.md b/.papercuts/troubleshooting.md
index cd7e5e28..10b7db28 100644
--- a/.papercuts/troubleshooting.md
+++ b/.papercuts/troubleshooting.md
@@ -319,4 +319,4 @@ owns; reopen the terminal before judging the final live state.
 - The selected local Xcode began rejecting compiler/git calls for unaccepted license terms during this task. Used the installed Command Line Tools for git and rebuilt the renderer/Electron bundles with existing native helpers; native sources are unchanged and CI checks the full build.
 - Appearance persistence uses the `settings` envelope in settings.json; E2E disk assertions must read `settings.appearance`, then verify the preference after an app relaunch.
 - A CI navigation test raced the provider transport: queue removal confirms durable append, but does not mean the mock HTTP server has received the next generation request. Wait for that specific request before asserting its conversation history.
-- The shared button radius overrides legacy per-corner utility classes. Joined actions need an explicit shared group rule: square inner seams, the common outer squircle radius, and visible overflow for focus outlines. Check hover fills and seam hit testing, not only the uniform computed radius.
+- The shared button radius overrides legacy per-corner utility classes. Joined actions need an explicit shared group rule: square inner seams, the common outer squircle radius, and visible overflow for focus outlines. Check hover fills and each seam's corner radius, not only the uniform outer radius.
diff --git a/tests/e2e/chat-shell-interactions.spec.ts b/tests/e2e/chat-shell-interactions.spec.ts
index eb5b7307..8f2926bb 100644
--- a/tests/e2e/chat-shell-interactions.spec.ts
+++ b/tests/e2e/chat-shell-interactions.spec.ts
@@ -219,12 +219,6 @@ test.describe("with a workspace", () => {
       await expect(button).not.toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
       await expect(button).toHaveCSS(`border-top-${seam}-radius`, "0px");
       await expect(button).toHaveCSS(`border-bottom-${seam}-radius`, "0px");
-      // Hover fill reaches the top seam corner; a rounded half leaves this point outside.
-      expect(await button.evaluate((element, edge) => {
-        const rect = element.getBoundingClientRect();
-        const hit = document.elementFromPoint(edge === "right" ? rect.right - 1 : rect.left + 1, rect.top + 1);
-        return hit === element || element.contains(hit);
-      }, seam)).toBe(true);
     }
     await page.keyboard.press("Tab");
     await open.focus();