feat(staged): make chat replies multiline and move Stop to the thinking row

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>
 

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]);

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();
     }

apps/staged/src/lib/features/sessions/SessionChatPane.svelte

@@ -7,9 +7,10 @@
   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
+  - 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
   - Fixed-size modal with proper scrolling
@@ -874,7 +875,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();
     }
@@ -1464,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 ? ' ' : ''}`;
@@ -1961,6 +1963,22 @@
           <div class="thinking" in:messageSlide>
             <Spinner size={14} />
             <span>Thinking…</span>
+            <Button
+              variant="destructive"
+              size="sm"
+              class="ml-auto"
+              title="Stop session"
+              aria-label="Stop session"
+              onclick={handleCancel}
+              disabled={cancelling}
+            >
+              {#if cancelling}
+                <Spinner size={14} />
+              {:else}
+                <CircleStop size={14} />
+              {/if}
+              Stop
+            </Button>
           </div>
         {/if}
 
@@ -2016,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>
@@ -2115,9 +2133,7 @@
         onRemoveImage={removeReplyImage}
         {isLive}
         {sending}
-        {cancelling}
         onSend={handleSend}
-        onStop={handleCancel}
       >
         {#snippet configPicker()}
           <AcpFixedConfigPicker

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;