From 0ddebbcb8a1c3b10e805e799cafaad29b7897ad6 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 10 Jul 2026 15:35:25 +1000
Subject: [PATCH 1/5] feat(staged): make chat replies multiline with Cmd+Enter
 to send

Composing a reply in the session chat now behaves like a multiline text
input: Enter inserts a newline and Cmd/Ctrl+Enter sends the message.

While the session is busy, the composer keeps its accent send button but
labels it Queue (sending while live already queues a follow-up) instead
of swapping in the stop button. Stopping now lives on a labeled Stop
button on the right-hand side of the Thinking indicator row.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../lib/features/sessions/ChatComposer.svelte | 59 ++++++-------------
 .../features/sessions/SessionChatPane.svelte  | 27 +++++++--
 2 files changed, 40 insertions(+), 46 deletions(-)

diff --git a/apps/staged/src/lib/features/sessions/ChatComposer.svelte b/apps/staged/src/lib/features/sessions/ChatComposer.svelte
index e1434189..0b48e38a 100644
--- a/apps/staged/src/lib/features/sessions/ChatComposer.svelte
+++ b/apps/staged/src/lib/features/sessions/ChatComposer.svelte
@@ -2,7 +2,7 @@
   ChatComposer.svelte — Shared bottom chat input for session chat surfaces.
 
   Houses the attached-image strip, the text input, and the control row below
-  it (agent config picker slot, attach button, send/stop button). Rendered by
+  it (agent config picker slot, attach button, send/queue button). Rendered by
   SessionChatPane, which backs both the session dialog and the note dialog's
   chat pane, so the composer looks and behaves identically everywhere: the
   text input gets its own full-width row with the controls beneath it.
@@ -24,7 +24,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import X from '@lucide/svelte/icons/x';
-  import CircleStop from '@lucide/svelte/icons/circle-stop';
   import Paperclip from '@lucide/svelte/icons/paperclip';
   import ImagePlus from '@lucide/svelte/icons/image-plus';
   import Spinner from '../../shared/Spinner.svelte';
@@ -49,12 +48,10 @@
     imagePreviews?: Map<string, string>;
     onAttachFiles?: (files: File[]) => void;
     onRemoveImage?: (imageId: string) => void;
-    /** Session is running — attach/remove disabled, stop replaces send. */
+    /** Session is running — attach/remove disabled, send queues instead. */
     isLive?: boolean;
     sending?: boolean;
-    cancelling?: boolean;
     onSend?: () => void;
-    onStop?: () => void;
     /** Agent config picker rendered at the start of the control row. */
     configPicker?: Snippet;
   }
@@ -73,9 +70,7 @@
     onRemoveImage,
     isLive = false,
     sending = false,
-    cancelling = false,
     onSend,
-    onStop,
     configPicker,
   }: Props = $props();
 
@@ -153,39 +148,23 @@
         </Button>
       </span>
     {/if}
-    {#if isLive}
-      <span class="inline-flex composer-send" title="Stop session">
-        <Button
-          variant="destructive"
-          class="h-auto min-h-9 w-9 shrink-0 rounded-[10px] px-0 [&_svg]:!size-4"
-          aria-label="Stop session"
-          onclick={onStop}
-          disabled={cancelling}
-        >
-          {#if cancelling}
-            <Spinner size={16} />
-          {:else}
-            <CircleStop size={16} />
-          {/if}
-        </Button>
-      </span>
-    {:else}
-      <span class="inline-flex composer-send" title="Send message">
-        <Button
-          variant="accent"
-          class="h-auto min-h-9 gap-1.5 px-4 py-1 text-sm max-[640px]:min-h-11"
-          onclick={onSend}
-          disabled={sending || !value.trim()}
-        >
-          {#if sending}
-            <Spinner size={14} />
-            Sending…
-          {:else}
-            Send
-          {/if}
-        </Button>
-      </span>
-    {/if}
+    <span class="inline-flex composer-send" title={isLive ? 'Queue message' : 'Send message'}>
+      <Button
+        variant="accent"
+        class="h-auto min-h-9 gap-1.5 px-4 py-1 text-sm max-[640px]:min-h-11"
+        onclick={onSend}
+        disabled={sending || !value.trim()}
+      >
+        {#if sending}
+          <Spinner size={14} />
+          Sending…
+        {:else if isLive}
+          Queue
+        {:else}
+          Send
+        {/if}
+      </Button>
+    </span>
   </div>
 </div>
 
diff --git a/apps/staged/src/lib/features/sessions/SessionChatPane.svelte b/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
index 94f27cb8..a69b452a 100644
--- a/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
@@ -7,9 +7,9 @@
   argument previews.
 
   Features:
-  - Text input always available at the bottom
-  - Send button when idle, Stop button when running
-  - Message queue: hitting Enter while running persists a follow-up for backend drain
+  - Text input always available at the bottom (Cmd/Ctrl+Enter sends, Enter adds a newline)
+  - Send button when idle, Queue button when running; Stop lives on the Thinking row
+  - Message queue: sending while running persists a follow-up for backend drain
   - Copy button on every message
   - Tool calls show name + args preview; expand to see output
   - Fixed-size modal with proper scrolling
@@ -874,7 +874,8 @@
   // =========================================================================
 
   function handleInputKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter' && !e.shiftKey && !e.altKey) {
+    // Multiline input: plain Enter inserts a newline; Cmd/Ctrl+Enter sends.
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
       e.preventDefault();
       handleSend();
     }
@@ -1961,6 +1962,22 @@
           <div class="thinking" in:messageSlide>
             <Spinner size={14} />
             <span>Thinking…</span>
+            <Button
+              variant="destructive"
+              size="xs"
+              class="ml-auto"
+              title="Stop session"
+              aria-label="Stop session"
+              onclick={handleCancel}
+              disabled={cancelling}
+            >
+              {#if cancelling}
+                <Spinner size={12} />
+              {:else}
+                <CircleStop size={12} />
+              {/if}
+              Stop
+            </Button>
           </div>
         {/if}
 
@@ -2115,9 +2132,7 @@
         onRemoveImage={removeReplyImage}
         {isLive}
         {sending}
-        {cancelling}
         onSend={handleSend}
-        onStop={handleCancel}
       >
         {#snippet configPicker()}
           <AcpFixedConfigPicker

From d4eb884379b018d503b9450ed10c62d334a3ca2a Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 10 Jul 2026 18:23:58 +1000
Subject: [PATCH 2/5] feat(staged): enlarge the stop button on the thinking row

Bump the Thinking-row Stop button from the xs to the sm size variant
and scale its icon/spinner up to match.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../staged/src/lib/features/sessions/SessionChatPane.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/staged/src/lib/features/sessions/SessionChatPane.svelte b/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
index a69b452a..93aeaea3 100644
--- a/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
@@ -1964,7 +1964,7 @@
             <span>Thinking…</span>
             <Button
               variant="destructive"
-              size="xs"
+              size="sm"
               class="ml-auto"
               title="Stop session"
               aria-label="Stop session"
@@ -1972,9 +1972,9 @@
               disabled={cancelling}
             >
               {#if cancelling}
-                <Spinner size={12} />
+                <Spinner size={14} />
               {:else}
-                <CircleStop size={12} />
+                <CircleStop size={14} />
               {/if}
               Stop
             </Button>

From a605199717aae39c7536fa562345ecf46544b803 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Sat, 11 Jul 2026 14:34:04 +1000
Subject: [PATCH 3/5] fix(staged): let Ctrl+Enter send past the open hashtag
 dropdown

The hashtag dropdown's Enter guard excluded Shift and Meta but not
Ctrl, so with the dropdown open, Ctrl+Enter selected the highlighted
hashtag instead of falling through to the composer's send handler.
Since Cmd/Ctrl+Enter is now the send chord, exclude ctrlKey too so
both modifiers behave the same on every platform.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 apps/staged/src/lib/features/sessions/HashtagInput.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/staged/src/lib/features/sessions/HashtagInput.svelte b/apps/staged/src/lib/features/sessions/HashtagInput.svelte
index 6e34c9c3..46770506 100644
--- a/apps/staged/src/lib/features/sessions/HashtagInput.svelte
+++ b/apps/staged/src/lib/features/sessions/HashtagInput.svelte
@@ -471,7 +471,7 @@
         scrollSelectedIntoView();
         return;
       }
-      if (e.key === 'Enter' && !e.shiftKey && !e.metaKey) {
+      if (e.key === 'Enter' && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
         e.preventDefault();
         e.stopPropagation();
         selectItem(filteredItems[selectedIndex]);

From f1e7a2ce958379f79529e41e8a86f1da1c6ec1c7 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Sat, 11 Jul 2026 14:38:04 +1000
Subject: [PATCH 4/5] fix(staged): show a labeled pipeline Stop for the whole
 pipeline run

The composer's pipeline stop area only rendered during the pipeline
prelude (no transcript messages yet), so once steps started emitting
messages the composer came back and the only stop control was the
Thinking row, which lives in the scrollable transcript and doesn't
render at all while the transcript is still empty.

Key the bottom input area off the pipeline actually running (live
session with a pipeline) instead of the prelude: while a pipeline runs,
the composer (text field, model picker, attachment button) stays hidden
and a Stop button remains available in the fixed bottom chrome, now
with a text label matching the Thinking-row Stop.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../lib/features/sessions/SessionChatPane.svelte    | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/staged/src/lib/features/sessions/SessionChatPane.svelte b/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
index 93aeaea3..10b9b72b 100644
--- a/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionChatPane.svelte
@@ -9,6 +9,7 @@
   Features:
   - Text input always available at the bottom (Cmd/Ctrl+Enter sends, Enter adds a newline)
   - Send button when idle, Queue button when running; Stop lives on the Thinking row
+  - While a pipeline runs, the composer is replaced by a labeled Stop button
   - Message queue: sending while running persists a follow-up for backend drain
   - Copy button on every message
   - Tool calls show name + args preview; expand to see output
@@ -1465,7 +1466,7 @@
       .map((message) => message.id);
   });
 
-  let isPipelinePrelude = $derived(isLive && !!session?.pipeline && grouped.length === 0);
+  let isPipelineRunning = $derived(isLive && !!session?.pipeline);
 
   function insertSlashCommand(command: AcpCommand) {
     inputText = `/${command.name}${command.inputHint ? ' ' : ''}`;
@@ -2033,22 +2034,22 @@
 
   <!-- Input area with queued messages and image previews -->
   <div class="input-wrapper">
-    {#if isPipelinePrelude}
+    {#if isPipelineRunning}
       <div class="pipeline-stop-area">
         <span class="inline-flex" title="Stop workflow">
           <Button
             variant="destructive"
-            size="icon"
-            class="size-9 shrink-0 rounded-[10px] [&_svg]:!size-4"
+            size="sm"
             aria-label="Stop workflow"
             onclick={handleCancel}
             disabled={cancelling}
           >
             {#if cancelling}
-              <Spinner size={16} />
+              <Spinner size={14} />
             {:else}
-              <CircleStop size={16} />
+              <CircleStop size={14} />
             {/if}
+            Stop
           </Button>
         </span>
       </div>

From 16fbb0a6ad9c946f1a7dc79cce228c8fae9722d3 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Sat, 11 Jul 2026 14:45:02 +1000
Subject: [PATCH 5/5] fix(staged): use Cmd/Ctrl+Enter to send in every prompt
 composer

Send shortcuts had diverged across the three composers: the session
chat pane sent on Cmd/Ctrl+Enter, NewSessionModal submitted on
Cmd+Enter only (no Ctrl fallback for Windows/Linux), and the hidden
SessionLauncher dev panel sent on plain Enter from a single-line input.

Make multiline prompts work everywhere with one consistent chord:

- NewSessionModal: accept Ctrl+Enter alongside Cmd+Enter to submit.
- SessionLauncher: replace the single-line Input with an auto-resizing
  textarea (capped like the chat composer) where plain Enter inserts a
  newline and Cmd/Ctrl+Enter creates the session, removing the last
  "return means send" case.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../features/sessions/NewSessionModal.svelte  |  4 +-
 .../features/sessions/SessionLauncher.svelte  | 62 ++++++++++++++++---
 2 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
index cd8e87e1..a728c10a 100644
--- a/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
+++ b/apps/staged/src/lib/features/sessions/NewSessionModal.svelte
@@ -384,8 +384,8 @@
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    // Cmd+Enter to submit
-    if (e.key === 'Enter' && e.metaKey && canSubmit) {
+    // Cmd/Ctrl+Enter to submit
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && canSubmit) {
       e.preventDefault();
       handleSubmit();
     }
diff --git a/apps/staged/src/lib/features/sessions/SessionLauncher.svelte b/apps/staged/src/lib/features/sessions/SessionLauncher.svelte
index 979557c2..d15d2521 100644
--- a/apps/staged/src/lib/features/sessions/SessionLauncher.svelte
+++ b/apps/staged/src/lib/features/sessions/SessionLauncher.svelte
@@ -9,7 +9,7 @@
   - Delete sessions from the database
 -->
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy, tick } from 'svelte';
   import { listenToEvent, type UnlistenFn } from '../../transport';
   import Plus from '@lucide/svelte/icons/plus';
   import X from '@lucide/svelte/icons/x';
@@ -28,7 +28,6 @@
   import type { AcpConfigPickerSelection } from '../agents/acpConfigSelection';
   import { toast } from 'svelte-sonner';
   import { sessionRegistry } from '../../stores/sessionRegistry.svelte';
-  import { Input } from '$lib/components/ui/input';
   import { Button } from '$lib/components/ui/button';
 
   interface Props {
@@ -48,6 +47,7 @@
   let openModals = $state<Set<string>>(new Set());
 
   let prompt = $state('');
+  let promptEl: HTMLTextAreaElement | null = $state(null);
   let creating = $state(false);
   let acpPickerSelection = $state<AcpConfigPickerSelection>({
     providerId: null,
@@ -106,6 +106,7 @@
       sessionRegistry.register(s.id, 'standalone', 'other');
       sessions = [...sessions, s];
       prompt = '';
+      tick().then(() => autoResize());
     } catch (e) {
       toast.error('Unable to start session', {
         description: e instanceof Error ? e.message : String(e),
@@ -161,12 +162,26 @@
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter' && !e.shiftKey && !e.altKey) {
+    // Multiline input: plain Enter inserts a newline; Cmd/Ctrl+Enter sends.
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
       e.preventDefault();
       handleCreate();
     }
   }
 
+  function autoResize() {
+    if (!promptEl) return;
+    promptEl.style.height = 'auto';
+    promptEl.style.overflow = 'hidden';
+    const borderY = promptEl.offsetHeight - promptEl.clientHeight;
+    const maxHeight = 120;
+    const height = Math.min(promptEl.scrollHeight + borderY, maxHeight);
+    promptEl.style.height = height + 'px';
+    if (height >= maxHeight) {
+      promptEl.style.overflow = 'auto';
+    }
+  }
+
   function handleAcpSelectionChange(selection: AcpConfigPickerSelection) {
     acpPickerSelection = selection;
   }
@@ -190,14 +205,15 @@
 
   <!-- Create form -->
   <div class="create-row">
-    <Input
-      type="text"
+    <textarea
+      bind:this={promptEl}
+      class="prompt-input"
       placeholder="Session prompt…"
+      rows="1"
       bind:value={prompt}
       onkeydown={handleKeydown}
-      disabled={creating}
-      class="flex-1"
-    />
+      oninput={autoResize}
+      disabled={creating}></textarea>
     <AcpConfigPicker
       disabled={creating}
       triggerClass="h-7 max-w-[120px] border border-[var(--border-muted)] bg-[var(--bg-primary)]"
@@ -316,10 +332,40 @@
   /* Create row */
   .create-row {
     display: flex;
+    align-items: flex-start;
     gap: 6px;
     padding: 10px 14px;
   }
 
+  .prompt-input {
+    flex: 1;
+    min-width: 0;
+    min-height: 36px;
+    max-height: 120px;
+    padding: 8px 10px;
+    border: 1px solid var(--border-muted);
+    border-radius: 6px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: var(--size-sm);
+    line-height: 18px;
+    resize: none;
+    outline: none;
+  }
+
+  .prompt-input::placeholder {
+    color: var(--text-faint);
+  }
+
+  .prompt-input:focus {
+    border-color: var(--ui-accent);
+  }
+
+  .prompt-input:disabled {
+    opacity: 0.5;
+  }
+
   /* Session list */
   .session-list {
     max-height: 240px;