feat(web): morphing send/stop/queue composer button

The composer's primary button now reflects generation state: Send when idle,
Stop while generating with an empty draft, and Queue while generating with a
draft typed (submitting queues it via the existing queue path). Stop is
click-only so a stray Enter never interrupts a run. ChatInput gains generating
+ onStop props.

BooChat: removes the separate centered "Stop generating" pill and wires
generating={streaming} + onStop={handleStop}. BooCoder: generating now keys on
sending || activeTaskId (the dispatch POST is too brief on its own), which also
fixes the queue gates that previously fired mid-run; onStop cancels the active
task via the new api.coder.cancelTask, and the input is no longer disabled while
a task runs so follow-ups can be queued.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/web/src/components/ChatInput.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type DragEvent, type KeyboardEvent } from 'react';
-import { Check, Plus, Send } from 'lucide-react';
+import { Check, ListPlus, Plus, Send, Square } from 'lucide-react';
 import { toast } from 'sonner';
 import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
@@ -51,6 +51,11 @@ interface Props {
   webSearchEnabled?: boolean | null;
   onSend: (content: string) => void | Promise<void>;
   onForceSend?: (content: string) => void | Promise<void>;
+  // When the assistant/agent is generating, the send button morphs: empty draft
+  // → Stop (calls onStop); non-empty draft → Queue (submits, which the caller
+  // queues while busy). Omitting onStop falls back to a (disabled) Send button.
+  generating?: boolean;
+  onStop?: () => void | Promise<void>;
   // Batch 9.6: slash-command dispatch. When the input parses to a known skill,
   // ChatInput calls this with the skill name + the post-name args (possibly
   // empty). Callers wire this to api.chats.skillInvoke. Omitting the prop
@@ -78,7 +83,7 @@ interface Props {
   modelContextLimit?: number | null;
 }
 
-export function ChatInput({ disabled, projectId, agentId, onAgentChange, sessionId, webSearchEnabled, onSend, onForceSend, onSlashCommand, slashGroups, chatId, chatLabel, messages, modelContextLimit }: Props) {
+export function ChatInput({ disabled, projectId, agentId, onAgentChange, sessionId, webSearchEnabled, onSend, onForceSend, generating, onStop, onSlashCommand, slashGroups, chatId, chatLabel, messages, modelContextLimit }: Props) {
   const { isMobile } = useViewport();
   const [value, setValue] = useState('');
   const [busy, setBusy] = useState(false);
@@ -651,14 +656,38 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
           rows={3}
           className="resize-none min-h-[68px] max-h-[240px]"
         />
-        <Button
+        {(() => {
-          onClick={() => void submit()}
+          const hasContent = value.trim().length > 0 || attachments.length > 0;
-          disabled={disabled || busy || (!value.trim() && attachments.length === 0)}
+          // While generating with an empty draft, the button stops generation.
-          size="icon-lg"
+          if (generating && onStop && !hasContent) {
-          aria-label="Send"
+            return (
-        >
+              <Button
-          <Send />
+                onClick={() => void onStop()}
-        </Button>
+                size="icon-lg"
+                variant="outline"
+                aria-label="Stop generating"
+                title="Stop generating"
+              >
+                <Square className="fill-current size-3.5" />
+              </Button>
+            );
+          }
+          // With a draft, submit. While generating the caller queues it, so the
+          // button reads as Queue; otherwise it's a normal Send.
+          const queueing = !!generating && hasContent;
+          return (
+            <Button
+              onClick={() => void submit()}
+              disabled={disabled || busy || !hasContent}
+              size="icon-lg"
+              variant={queueing ? 'secondary' : 'default'}
+              aria-label={queueing ? 'Queue message' : 'Send'}
+              title={queueing ? 'Queue message' : 'Send'}
+            >
+              {queueing ? <ListPlus /> : <Send />}
+            </Button>
+          );
+        })()}
       </div>
       </div>
       <AttachmentPreviewModal

apps/web/src/components/panes/ChatPane.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Pencil, Send, Square, X } from 'lucide-react';
+import { Pencil, Send, X } from 'lucide-react';
 import { toast } from 'sonner';
 import { api } from '@/api/client';
 import { useSessionStream } from '@/hooks/useSessionStream';
@@ -248,22 +248,6 @@ export function ChatPane({ sessionId, chatId, projectId, agentId, onAgentChange,
         </div>
       )}
 
-      {/* Stop button when streaming */}
-      {streaming && (
-        <div className="border-t py-1">
-          <div className="max-w-[1000px] mx-auto w-full flex justify-center">
-          <button
-            type="button"
-            onClick={() => void handleStop()}
-            className="flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border hover:bg-muted text-muted-foreground hover:text-foreground max-md:min-h-[44px] max-md:px-5"
-          >
-            <Square size={10} className="fill-current" />
-            Stop generating
-          </button>
-          </div>
-        </div>
-      )}
-
       {stale && streamingId && (
         <StaleStreamBanner
           onRetry={() => void handleRetryStale()}
@@ -280,6 +264,8 @@ export function ChatPane({ sessionId, chatId, projectId, agentId, onAgentChange,
         webSearchEnabled={webSearchEnabled}
         onSend={handleSend}
         onForceSend={streaming ? handleForceSend : undefined}
+        generating={streaming}
+        onStop={handleStop}
         onSlashCommand={handleSlashCommand}
         chatId={chatId}
         chatLabel={sessionChats?.find((c) => c.id === chatId)?.name ?? 'Chat'}

apps/web/src/components/panes/CoderPane.tsx

@@ -581,6 +581,10 @@ export function CoderPane({
   const [queue, setQueue] = useState<string[]>([]);
   const queueProcessing = useRef(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  // The agent is "generating" during the dispatch POST (sending) AND while its
+  // task runs (activeTaskId). sending alone is too brief — it clears the moment
+  // dispatch returns — so queueing/stop must key on this combined signal.
+  const generating = sending || activeTaskId !== null;
 
   // Refresh pending changes when a message_complete arrives
   useEffect(() => {
@@ -760,24 +764,35 @@ export function CoderPane({
     }
   }, [sessionId, paneId, chatId, agentConfig, setMessages]);
 
-  // Drain queue when not busy
+  // Drain queue once the agent is idle (not just past the dispatch POST).
   useEffect(() => {
-    if (sending || queue.length === 0 || queueProcessing.current) return;
+    if (generating || queue.length === 0 || queueProcessing.current) return;
     queueProcessing.current = true;
     const next = queue[0]!;
     setQueue((prev) => prev.slice(1));
     sendOneMessage(next).finally(() => { queueProcessing.current = false; });
-  }, [sending, queue, sendOneMessage]);
+  }, [generating, queue, sendOneMessage]);
 
   const handleChatInputSend = useCallback(async (content: string) => {
     const text = content.trim();
     if (!text || !chatId) return;
-    if (sending) {
+    if (generating) {
       setQueue((prev) => [...prev, text]);
       return;
     }
     await sendOneMessage(text);
-  }, [sending, chatId, sendOneMessage]);
+  }, [generating, chatId, sendOneMessage]);
+
+  const handleStop = useCallback(async () => {
+    const taskId = activeTaskId;
+    if (!taskId) return;
+    try {
+      await api.coder.cancelTask(taskId);
+      setActiveTaskId(null); // optimistic; WS/poll terminal-state also clears it
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'stop failed');
+    }
+  }, [activeTaskId]);
 
   const handleChatInputSlash = useCallback(async (skillName: string, userMessage: string) => {
     if (!chatId) return;
@@ -867,9 +882,11 @@ export function CoderPane({
       {/* Composer + input */}
       <div className="shrink-0 border-t border-border">
         <ChatInput
-          disabled={sending || !chatId || chatPending}
+          disabled={!chatId || chatPending}
           projectId={projectPath ?? ''}
           onSend={handleChatInputSend}
+          generating={generating}
+          onStop={handleStop}
           onSlashCommand={handleChatInputSlash}
           slashGroups={slashGroups}
           chatId={chatId ?? undefined}