feat(agents): durable per-agent chat message queue + composer Stop

packages/browseros-agent/apps/agent/entrypoints/app/agent-command/AgentCommandConversation.tsx

@@ -2,6 +2,12 @@ import { ArrowLeft, Bot, Home } from 'lucide-react'
 import { type FC, useEffect, useMemo, useRef } from 'react'
 import { Navigate, useNavigate, useParams, useSearchParams } from 'react-router'
 import { Button } from '@/components/ui/button'
+import {
+  cancelHarnessTurn,
+  useEnqueueHarnessMessage,
+  useHarnessAgents,
+  useRemoveHarnessQueuedMessage,
+} from '@/entrypoints/app/agents/useAgents'
 import {
   type AgentEntry,
   getModelDisplayName,
@@ -15,6 +21,7 @@ import {
   filterTurnsPersistedInHistory,
   flattenHistoryPages,
 } from './claw-chat-types'
+import { QueuePanel } from './QueuePanel'
 import { useAgentConversation } from './useAgentConversation'
 import { useHarnessChatHistory } from './useHarnessChatHistory'
 
@@ -212,15 +219,33 @@ function AgentConversationController({
     [historyMessages],
   )
 
+  // Listing query feeds queue + active-turn state for this agent. We
+  // already poll it every 5s for the rail; reusing the same cache
+  // keeps cross-tab queue state in sync without a second poll.
+  const { harnessAgents } = useHarnessAgents()
+  const harnessAgent = harnessAgents.find((entry) => entry.id === agentId)
+  const queue = harnessAgent?.queue ?? []
+  const activeTurnId = harnessAgent?.activeTurnId ?? null
+
   const { turns, streaming, send } = useAgentConversation(agentId, {
     runtime: 'agent-harness',
     sessionKey: null,
     history: chatHistory,
+    activeTurnId,
     onComplete: () => {
       void harnessHistoryQuery.refetch()
     },
     onSessionKeyChange: () => {},
   })
+  const enqueueMessage = useEnqueueHarnessMessage()
+  const removeQueuedMessage = useRemoveHarnessQueuedMessage()
+
+  const handleStop = () => {
+    void cancelHarnessTurn(agentId, {
+      turnId: activeTurnId ?? undefined,
+      reason: 'user pressed stop',
+    })
+  }
   const visibleTurns = useMemo(
     () => filterTurnsPersistedInHistory(turns, historyMessages),
     [historyMessages, turns],
@@ -281,7 +306,15 @@ function AgentConversationController({
       />
 
       <div className="border-border/50 border-t bg-background/88 px-4 py-3 backdrop-blur-md">
-        <div className="mx-auto max-w-3xl">
+        <div className="mx-auto max-w-3xl space-y-3">
+          {queue.length > 0 ? (
+            <QueuePanel
+              queue={queue}
+              onRemove={(messageId) =>
+                removeQueuedMessage.mutate({ agentId, messageId })
+              }
+            />
+          ) : null}
           <ConversationInput
             variant="conversation"
             agents={agents}
@@ -296,14 +329,31 @@ function AgentConversationController({
                 name: a.name,
                 dataUrl: a.dataUrl,
               }))
+              // When the agent already has an in-flight turn, route
+              // the new message into the durable queue instead of
+              // starting a parallel turn. Drains automatically as
+              // soon as the active turn ends.
+              if (streaming || activeTurnId) {
+                enqueueMessage.mutate({
+                  agentId,
+                  message: input.text,
+                  attachments,
+                })
+                return
+              }
               void send({ text: input.text, attachments, attachmentPreviews })
             }}
             onCreateAgent={() => navigate(createAgentPath)}
+            onStop={handleStop}
             streaming={streaming}
             disabled={disabled}
             status="running"
             attachmentsEnabled={true}
-            placeholder={`Message ${agentName}...`}
+            placeholder={
+              streaming
+                ? `Type to queue another message for ${agentName}...`
+                : `Message ${agentName}...`
+            }
           />
         </div>
       </div>

packages/browseros-agent/apps/agent/entrypoints/app/agent-command/ConversationInput.tsx

@@ -54,25 +54,40 @@ interface ConversationInputProps {
   placeholder?: string
   attachmentsEnabled?: boolean
   variant?: 'home' | 'conversation'
+  /**
+   * When set, a Stop button surfaces to the left of the voice mic
+   * while `streaming === true`. Click cancels the active turn
+   * server-side via the chat-cancel endpoint. Absent → no Stop
+   * button (legacy behaviour for the home composer).
+   */
+  onStop?: () => void
 }
 
 function InputActionButton({
   disabled,
   onClick,
   streaming,
+  hasContent,
 }: {
   disabled: boolean
   onClick: () => void
   streaming: boolean
+  hasContent: boolean
 }) {
+  // Show the spinner while streaming only when there's nothing to
+  // send — once the user types something, the icon flips back to the
+  // paper-plane so it reads as "queue this message" instead of
+  // "still working".
+  const showSpinner = streaming && !hasContent
   return (
     <Button
       onClick={onClick}
       size="icon"
       disabled={disabled}
+      title={streaming && hasContent ? 'Queue message' : undefined}
       className="h-10 w-10 flex-shrink-0 rounded-xl bg-primary text-primary-foreground hover:bg-primary/90"
     >
-      {streaming ? (
+      {showSpinner ? (
         <Loader2 className="h-5 w-5 animate-spin" />
       ) : (
         <ArrowRight className="h-5 w-5" />
@@ -81,6 +96,22 @@ function InputActionButton({
   )
 }
 
+function StopButton({ onStop }: { onStop: () => void }) {
+  return (
+    <Button
+      type="button"
+      size="icon"
+      variant="ghost"
+      onClick={onStop}
+      title="Stop current turn — queued messages will start next."
+      aria-label="Stop current turn"
+      className="h-8 w-8 flex-shrink-0 rounded-lg bg-destructive/10 text-destructive transition-colors hover:bg-destructive/15 hover:text-destructive"
+    >
+      <Square className="h-3.5 w-3.5 fill-current" />
+    </Button>
+  )
+}
+
 function VoiceButton({
   isRecording,
   isTranscribing,
@@ -299,6 +330,7 @@ export const ConversationInput: FC<ConversationInputProps> = ({
   placeholder,
   attachmentsEnabled = true,
   variant = 'conversation',
+  onStop,
 }) => {
   const [input, setInput] = useState('')
   const [selectedTabs, setSelectedTabs] = useState<chrome.tabs.Tab[]>([])
@@ -379,10 +411,17 @@ export const ConversationInput: FC<ConversationInputProps> = ({
   }
 
   const hasContent = input.trim().length > 0 || attachments.length > 0
+  // Queue-aware composers (the conversation panel passes `onStop`)
+  // accept input while streaming — the parent decides whether the
+  // submission opens a new turn or enqueues onto the active one.
+  // Surfaces without a Stop hook (home) keep the legacy behaviour
+  // and block input until the current turn finishes.
+  const queueAware = Boolean(onStop)
 
   const handleSend = () => {
     const text = input.trim()
-    if (disabled || isStaging || streaming) return
+    if (disabled || isStaging) return
+    if (streaming && !queueAware) return
     if (!text && attachments.length === 0) return
     onSend({ text, attachments })
     setInput('')
@@ -512,6 +551,7 @@ export const ConversationInput: FC<ConversationInputProps> = ({
               )}
             />
           </div>
+          {streaming && onStop ? <StopButton onStop={onStop} /> : null}
           <VoiceButton
             isRecording={voice.isRecording}
             isTranscribing={voice.isTranscribing}
@@ -529,12 +569,13 @@ export const ConversationInput: FC<ConversationInputProps> = ({
               !!disabled ||
               voice.isRecording ||
               voice.isTranscribing ||
-              streaming
+              (streaming && !queueAware)
             }
             onClick={handleSend}
             // Spinner stays the user-facing "agent is busy" hint; with the
             // queue active we still spin while a turn is in flight.
             streaming={streaming}
+            hasContent={hasContent}
           />
         </div>
         {voice.error ? (

packages/browseros-agent/apps/agent/entrypoints/app/agent-command/QueuePanel.tsx

@@ -0,0 +1,94 @@
+import { ListPlus, X } from 'lucide-react'
+import type { FC } from 'react'
+import {
+  Queue,
+  QueueItem,
+  QueueItemAction,
+  QueueItemActions,
+  QueueItemAttachment,
+  QueueItemContent,
+  QueueItemFile,
+  QueueItemImage,
+  QueueList,
+  QueueSection,
+  QueueSectionContent,
+  QueueSectionLabel,
+  QueueSectionTrigger,
+} from '@/components/ai-elements/queue'
+import type {
+  HarnessQueuedMessage,
+  HarnessQueuedMessageAttachment,
+} from '@/entrypoints/app/agents/agent-harness-types'
+import { firstNonBlankLine } from '@/entrypoints/app/agents/agent-row/agent-row.helpers'
+
+interface QueuePanelProps {
+  queue: HarnessQueuedMessage[]
+  onRemove: (messageId: string) => void
+}
+
+/**
+ * Renders the agent's pending message queue using the shared AI
+ * Elements `Queue` primitives. Caller is expected to gate render on
+ * `queue.length > 0` — when empty, this returns null so the panel
+ * disappears cleanly between turns.
+ */
+export const QueuePanel: FC<QueuePanelProps> = ({ queue, onRemove }) => {
+  if (queue.length === 0) return null
+  return (
+    <Queue>
+      <QueueSection>
+        <QueueSectionTrigger>
+          <QueueSectionLabel
+            count={queue.length}
+            label={queue.length === 1 ? 'queued message' : 'queued messages'}
+            icon={<ListPlus className="size-3.5" />}
+          />
+        </QueueSectionTrigger>
+        <QueueSectionContent>
+          <QueueList>
+            {queue.map((entry) => (
+              <QueueItem key={entry.id}>
+                <div className="flex items-center gap-2">
+                  <QueueItemContent>
+                    {firstNonBlankLine(entry.message)}
+                  </QueueItemContent>
+                  <QueueItemActions>
+                    <QueueItemAction
+                      aria-label="Remove from queue"
+                      onClick={() => onRemove(entry.id)}
+                    >
+                      <X className="size-3" />
+                    </QueueItemAction>
+                  </QueueItemActions>
+                </div>
+                {entry.attachments && entry.attachments.length > 0 ? (
+                  <QueueItemAttachment>
+                    {entry.attachments.map((attachment, idx) =>
+                      renderAttachment(entry.id, attachment, idx),
+                    )}
+                  </QueueItemAttachment>
+                ) : null}
+              </QueueItem>
+            ))}
+          </QueueList>
+        </QueueSectionContent>
+      </QueueSection>
+    </Queue>
+  )
+}
+
+function renderAttachment(
+  messageId: string,
+  attachment: HarnessQueuedMessageAttachment,
+  idx: number,
+) {
+  if (attachment.mediaType.startsWith('image/')) {
+    const src = `data:${attachment.mediaType};base64,${attachment.data}`
+    return <QueueItemImage key={`${messageId}-${idx}`} src={src} />
+  }
+  return (
+    <QueueItemFile key={`${messageId}-${idx}`}>
+      {attachment.mediaType}
+    </QueueItemFile>
+  )
+}