feat(native-chat): mid-turn messages wait as editable cards above the composer

src/renderer/src/components/native-chat/NativeChatComposer.tsx

@@ -66,7 +66,8 @@ const NativeChatComposerPane = forwardRef<NativeChatComposerHandle, NativeChatCo
       onSwitchToTerminal,
       readTerminalScreen,
       launchSeed,
-      structuredTransport
+      structuredTransport,
+      steerQueued
     },
     ref
   ): React.JSX.Element {
@@ -342,6 +343,8 @@ const NativeChatComposerPane = forwardRef<NativeChatComposerHandle, NativeChatCo
       dismissPicker: dismiss,
       interrupt,
       send,
+      hasAttachments: imageAttachments.length > 0,
+      ...(steerQueued ? { steerQueued } : {}),
       setActiveSuggestion,
       setDraft,
       setCaret,

src/renderer/src/components/native-chat/NativeChatMessageList.turn-membership.test.tsx

@@ -363,6 +363,58 @@ describe('NativeChatMessageList turns from the turn record', () => {
     expect(follows(screen.getByText('Say DONE'), activity!)).toBe(true)
   })
 
+  it.each(['settled', 'running'] as const)(
+    "a queued card Steered into a %s turn joins it, under the opener's bar, with no bar of its own",
+    (phase) => {
+      // Steer hands the draft over under a fresh submission id, linked by `queuedMessageId`; the
+      // host scopes its row to the turn it joined.
+      const steer = agentJournalSubmissionKey('handed-off')
+      const running = phase === 'running'
+      const items = [
+        say('u1', 'user', 'List three fruits'),
+        running
+          ? item('t1', {
+              kind: 'turn',
+              turnId: 't1',
+              state: 'running',
+              userItemId: 'u1',
+              startedAt: 1_000
+            })
+          : settledTurn('t1', 'u1', 4, 1_000),
+        say('t1-narration', 'assistant', 'Thinking about fruit.', inTurn('t1')),
+        say(steer, 'user', 'Make it four', inTurn('t1')),
+        say('t1-answer', 'assistant', 'Apple, banana, cherry, date.', inTurn('t1'))
+      ]
+      const { container } = render(
+        journalList(
+          items,
+          [
+            {
+              clientMessageId: 'handed-off',
+              fence: 1,
+              payloadFingerprint: 'steer',
+              dispatchState: 'accepted',
+              providerItemId: null,
+              reason: null,
+              submittedAt: 2_000,
+              resolvedAt: 2_100,
+              queuedMessageId: 'draft-1'
+            }
+          ],
+          running ? { isWorking: true, workingStartedAt: 1_000 } : {}
+        )
+      )
+
+      const bars = container.querySelectorAll<HTMLElement>('[data-native-chat-turn-status]')
+      expect(bars).toHaveLength(1)
+      const opener = screen.getByText('List three fruits')
+      const steered = screen.getByText('Make it four')
+      expect(follows(bars[0]!, opener)).toBe(true)
+      expect(follows(steered, bars[0]!)).toBe(true)
+      expect(follows(screen.getByText('Apple, banana, cherry, date.'), steered)).toBe(true)
+    }
+  )
+
   it("keeps a steer on its way into an ordinary running turn above that turn's activity", () => {
     const steer = agentJournalSubmissionKey('steer')
     const items = [

src/renderer/src/components/native-chat/NativeChatQueuedMessageCard.tsx

@@ -0,0 +1,214 @@
+import {
+  AlertCircle,
+  CornerDownRight,
+  ListEnd,
+  MoreHorizontal,
+  Pencil,
+  Send,
+  Trash2
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { ShortcutKeyCombo } from '@/components/ShortcutKeyCombo'
+import { translate } from '@/i18n/i18n'
+import { structuredAgentSessionAttemptFailureParts } from '../../../../shared/structured-agent-session-send-disposition'
+import { classifyDispatchRejection } from '../../../../shared/structured-agent-session-dispatch-rejection'
+import { readAgentSessionFailureFact } from '../../../../shared/agent-session-failure'
+import { agentSessionWriteNoticeText } from './agent-session-write-notice-text'
+import { QUEUED_MESSAGE_PAUSED_SEND_FAILED } from '../../../../shared/agent-session-wire'
+import { isMacPlatform } from './native-chat-shortcut'
+import type { QueuedMessageCard } from './structured-agent-session-queued-cards'
+
+/** The visible caption under the text; the default waiting hold needs none. */
+export function queuedMessageCardCaption(card: QueuedMessageCard): string | null {
+  switch (card.hold) {
+    case 'returned': {
+      // Read exactly as a rejected submission: the typed fact decides, the reason is the fallback.
+      const reason = card.returnedReason ?? null
+      // A consumed draft whose submission a Stop withdrew is not a failure of the
+      // message — say what happened rather than "not sent".
+      if (
+        classifyDispatchRejection({ reason, rejection: card.returnedRejection }).category ===
+        'withdrawn'
+      ) {
+        return translate(
+          'components.native-chat.queuedMessages.withdrawnHold',
+          'Stopped before it was sent'
+        )
+      }
+      return agentSessionWriteNoticeText(
+        structuredAgentSessionAttemptFailureParts(
+          { kind: 'rejected', reason },
+          // The card's own Send is the retry, so the words leave out sending again.
+          { retryControl: true },
+          readAgentSessionFailureFact(card.returnedRejection)
+        )
+      )
+    }
+    case 'paused':
+      // A card's own hold; the queue's pause is the list's header. Markers localize, and an absent
+      // or unknown one (newer host) is a plain pause, never shown raw.
+      if (card.pausedReason === QUEUED_MESSAGE_PAUSED_SEND_FAILED) {
+        return translate(
+          'components.native-chat.queuedMessages.pausedSendFailed',
+          "Couldn't send — press Send to retry."
+        )
+      }
+      return translate('components.native-chat.queuedMessages.paused', 'Paused')
+    case 'behind-returned':
+      return translate(
+        'components.native-chat.queuedMessages.behindReturnedHold',
+        'Waiting — a message ahead needs attention'
+      )
+    case 'awaiting-answer':
+      return translate(
+        'components.native-chat.queuedMessages.awaitingAnswerHold',
+        'Waiting for your answer'
+      )
+    case 'turn':
+    case 'queue-paused':
+      // Plainly queued; a paused queue's header row carries the why.
+      return null
+  }
+}
+
+/** Steer names the mid-turn jump, also while the whole queue is paused; a card held on its own
+ *  or returned is not waiting on the turn, so its action and tooltip are plainly Send. */
+export function queuedMessageCardSendNow(card: QueuedMessageCard): {
+  /** Steer's ↳, or Send's paper plane. */
+  steers: boolean
+  label: string
+  hint: string
+} {
+  if (card.hold === 'paused' || card.hold === 'returned') {
+    return {
+      steers: false,
+      label: translate('components.native-chat.queuedMessages.send', 'Send'),
+      hint: translate('components.native-chat.queuedMessages.sendHint', 'Send this message now')
+    }
+  }
+  return {
+    steers: true,
+    label: translate('components.native-chat.queuedMessages.steer', 'Steer'),
+    hint: translate(
+      'components.native-chat.queuedMessages.steerHint',
+      'Submit without interrupting the model'
+    )
+  }
+}
+
+export function NativeChatQueuedMessageCard({
+  card,
+  showsSteerShortcut,
+  onSteer,
+  onDelete,
+  onEdit,
+  onTurnOffQueueing
+}: {
+  card: QueuedMessageCard
+  /** Only the newest card answers Cmd/Ctrl+Enter; only it may show the chord. */
+  showsSteerShortcut: boolean
+  onSteer: () => void
+  onDelete: () => void
+  onEdit: () => void
+  onTurnOffQueueing: () => void
+}): React.JSX.Element {
+  const caption = queuedMessageCardCaption(card)
+  const returned = card.state === 'returned'
+  const sendNow = queuedMessageCardSendNow(card)
+  const isMac = isMacPlatform()
+  return (
+    <li
+      data-queued-message-id={card.messageId}
+      data-queued-message-state={card.state}
+      className="flex items-center gap-2 px-2.5 py-1.5"
+    >
+      {returned || card.pausedReason === QUEUED_MESSAGE_PAUSED_SEND_FAILED ? (
+        <AlertCircle className="size-3.5 shrink-0 text-destructive" aria-hidden />
+      ) : (
+        <ListEnd className="size-3.5 shrink-0 text-muted-foreground" aria-hidden />
+      )}
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm" title={card.text}>
+          {card.text}
+        </p>
+        {caption ? (
+          <p
+            className={
+              returned
+                ? 'truncate text-xs text-destructive'
+                : 'truncate text-xs text-muted-foreground'
+            }
+          >
+            {caption}
+          </p>
+        ) : null}
+      </div>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button type="button" variant="ghost" size="xs" onClick={onSteer}>
+            {sendNow.steers ? <CornerDownRight className="size-3" /> : <Send className="size-3" />}
+            {sendNow.label}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top" sideOffset={4}>
+          <span className="flex items-center gap-2">
+            <span>{sendNow.hint}</span>
+            {showsSteerShortcut ? (
+              <ShortcutKeyCombo keys={[isMac ? '⌘' : 'Ctrl', isMac ? '⏎' : 'Enter']} />
+            ) : null}
+          </span>
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-xs"
+            aria-label={translate('components.native-chat.queuedMessages.delete', 'Delete')}
+            onClick={onDelete}
+          >
+            <Trash2 className="size-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top" sideOffset={4}>
+          {translate('components.native-chat.queuedMessages.delete', 'Delete')}
+        </TooltipContent>
+      </Tooltip>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-xs"
+            aria-label={translate(
+              'components.native-chat.queuedMessages.moreActions',
+              'More actions'
+            )}
+          >
+            <MoreHorizontal className="size-3.5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onSelect={onEdit}>
+            <Pencil />
+            {translate('components.native-chat.queuedMessages.editMessage', 'Edit message')}
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={onTurnOffQueueing}>
+            {translate(
+              'components.native-chat.queuedMessages.turnOffQueueing',
+              'Turn off queueing'
+            )}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </li>
+  )
+}