@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/chat/sender/@core/create-sender-toolbar-handlers.ts

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react'
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
 import type { ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
 import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
+import type { SessionQueuedMessageMode } from '@vibe-forge/core'
 
 import type { SenderToolbarHandlers } from '../@types/sender-toolbar-types'
 
@@ -19,7 +20,9 @@ export const createSenderToolbarHandlers = ({
   onModelChange,
   onToggleRecommendedModel,
   onPermissionModeChange,
+  onQueueModeChange,
   onCancel,
+  onConfirmInteractionOption,
   onSend,
   referenceActions,
   selectOverlays,
@@ -41,8 +44,10 @@ export const createSenderToolbarHandlers = ({
   onModelChange?: (model: string) => void
   onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
   onPermissionModeChange?: (mode: PermissionMode) => void
+  onQueueModeChange?: (mode: SessionQueuedMessageMode) => void
   onCancel?: () => void
-  onSend: () => void
+  onConfirmInteractionOption?: () => void
+  onSend: (mode?: SessionQueuedMessageMode) => void
   referenceActions: {
     setShowReferenceActions: (nextOpen: boolean) => void
     setShowPermissionActions: (nextOpen: boolean) => void
@@ -108,8 +113,10 @@ export const createSenderToolbarHandlers = ({
     onToggleRecommendedModel,
     onEffortChange,
     onAdapterChange,
+    onQueueModeChange,
     onSend,
     onInterrupt,
-    onCancel
+    onCancel,
+    onConfirmInteractionOption
   } satisfies SenderToolbarHandlers
 }

package/src/components/chat/sender/@core/get-sender-runtime-state.ts

@@ -8,7 +8,7 @@ export const getSenderRuntimeState = (
   const isThinking = !isInlineEdit && props.sessionStatus === 'running'
   const isBusy = isThinking || props.submitLoading === true
   const supportsEffort = props.selectedAdapter === 'codex' || props.selectedAdapter === 'claude-code' ||
-    props.selectedAdapter === 'opencode'
+    props.selectedAdapter === 'copilot' || props.selectedAdapter === 'opencode'
 
   return { isInlineEdit, isMac, isThinking, isBusy, supportsEffort }
 }

package/src/components/chat/sender/@core/interaction-request.ts

@@ -1,5 +1,5 @@
 import type { AskUserQuestionParams } from '@vibe-forge/core'
 
 export const shouldHideSenderForInteraction = (
-  interactionRequest: { id: string; payload: AskUserQuestionParams } | null | undefined
-) => interactionRequest?.payload.kind === 'permission'
+  _interactionRequest: { id: string; payload: AskUserQuestionParams } | null | undefined
+) => false

package/src/components/chat/sender/@core/sender-toolbar-bindings.ts

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react'
 
+import type { SessionQueuedMessageMode } from '@vibe-forge/core'
+
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
 import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
 import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
@@ -33,8 +35,10 @@ export const createSenderToolbarBindings = ({
     onModelChange?: (model: string) => void
     onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
     onPermissionModeChange?: (mode: PermissionMode) => void
+    onQueueModeChange?: (mode: SessionQueuedMessageMode) => void
     onCancel?: () => void
-    onSend: () => void
+    onConfirmInteractionOption?: () => void
+    onSend: (mode?: SessionQueuedMessageMode) => void
   }
   composer: { input: string; pendingImageCount: number; pendingFileCount: number }
   resources: { message: { warning: (content: ReactNode) => unknown }; t: (key: string) => string }
@@ -46,6 +50,8 @@ export const createSenderToolbarBindings = ({
     modelSearchOptions?: ModelSelectOption[]
     permissionMode: PermissionMode
     permissionModeOptions: SenderToolbarData['permissionModeOptions']
+    queueMode: SessionQueuedMessageMode
+    queuedMessageShortcuts: Pick<SenderToolbarData['composerControlShortcuts'], 'queueNext' | 'queueSteer'>
     recommendedModelOptions?: ModelSelectOption[]
     servicePreviewModelOptions?: ModelSelectOption[]
     resolvedSendShortcut: string
@@ -56,11 +62,17 @@ export const createSenderToolbarBindings = ({
   ui: {
     adapterLocked: boolean
     canOpenReferenceActions: boolean
-    composerControlShortcuts: SenderToolbarData['composerControlShortcuts']
+    composerControlShortcuts: Pick<
+      SenderToolbarData['composerControlShortcuts'],
+      'switchEffort' | 'switchModel' | 'switchPermissionMode'
+    >
     focusRestore: { queueEditorFocusRestore: () => void }
     isInlineEdit: boolean
     isMac: boolean
     isThinking: boolean
+    sendBlocked: boolean
+    sendBlockedTooltip?: string
+    showConfirmInteractionAction: boolean
     modelUnavailable?: boolean
     referenceActions: {
       showReferenceActions: boolean
@@ -85,6 +97,7 @@ export const createSenderToolbarBindings = ({
       openEffortSelector: () => boolean
     }
     submitLabel?: string
+    confirmInteractionLabel?: string
     submitLoading: boolean
     supportsEffort: boolean
   }
@@ -93,6 +106,9 @@ export const createSenderToolbarBindings = ({
     isInlineEdit: ui.isInlineEdit,
     isThinking: ui.isThinking,
     modelUnavailable: Boolean(ui.modelUnavailable),
+    sendBlocked: ui.sendBlocked,
+    sendBlockedTooltip: ui.sendBlockedTooltip,
+    showConfirmInteractionAction: ui.showConfirmInteractionAction,
     adapterLocked: ui.adapterLocked,
     submitLoading: ui.submitLoading,
     supportsEffort: ui.supportsEffort,
@@ -108,6 +124,8 @@ export const createSenderToolbarBindings = ({
     selectedAdapter: selection.selectedAdapter,
     isMac: ui.isMac,
     resolvedSendShortcut: selection.resolvedSendShortcut,
+    queueMode: selection.queueMode,
+    showQueueModeControl: ui.isThinking && !ui.isInlineEdit,
     hasComposerContent: composer.input.trim() !== '' || composer.pendingImageCount > 0 || composer.pendingFileCount > 0,
     hasSendText: composer.input.trim() !== ''
   }
@@ -121,8 +139,12 @@ export const createSenderToolbarBindings = ({
     effortOptions: selection.effortOptions,
     permissionModeOptions: selection.permissionModeOptions,
     adapterOptions: selection.adapterOptions,
-    composerControlShortcuts: ui.composerControlShortcuts,
-    submitLabel: ui.submitLabel
+    composerControlShortcuts: {
+      ...ui.composerControlShortcuts,
+      ...selection.queuedMessageShortcuts
+    },
+    submitLabel: ui.submitLabel,
+    confirmInteractionLabel: ui.confirmInteractionLabel
   }
 
   const toolbarRefs: SenderToolbarRefs = {
@@ -144,7 +166,9 @@ export const createSenderToolbarBindings = ({
     onModelChange: callbacks.onModelChange,
     onToggleRecommendedModel: callbacks.onToggleRecommendedModel,
     onPermissionModeChange: callbacks.onPermissionModeChange,
+    onQueueModeChange: callbacks.onQueueModeChange,
     onCancel: callbacks.onCancel,
+    onConfirmInteractionOption: callbacks.onConfirmInteractionOption,
     onSend: callbacks.onSend,
     referenceActions: ui.referenceActions,
     selectOverlays: ui.selectOverlays,

package/src/components/chat/sender/@hooks/use-model-select-browser.tsx

@@ -4,6 +4,7 @@ import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 
 import { ModelSelectOptionLabel } from '../@components/model-select/ModelSelectOptionLabel'
 
@@ -27,6 +28,7 @@ export const useModelSelectBrowser = ({
   onSelectModel: (value: string) => void
 }) => {
   const { t } = useTranslation()
+  const { isTouchInteraction } = useResponsiveLayout()
 
   const renderCompactModelMenuLabel = useCallback((option: ModelSelectOption) => {
     return (
@@ -175,13 +177,13 @@ export const useModelSelectBrowser = ({
           mode='vertical'
           selectable
           selectedKeys={selectedModelMenuKeys}
-          triggerSubMenuAction='hover'
+          triggerSubMenuAction={isTouchInteraction ? 'click' : 'hover'}
           items={modelMenuItems}
           onClick={handleModelMenuClick}
         />
       </div>
     )
-  }, [hasModelSearchQuery, handleModelMenuClick, modelMenuItems, selectedModelMenuKeys])
+  }, [hasModelSearchQuery, handleModelMenuClick, isTouchInteraction, modelMenuItems, selectedModelMenuKeys])
 
   return {
     renderModelPopup

package/src/components/chat/sender/@hooks/use-sender-controller.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { App } from 'antd'
 import { useTranslation } from 'react-i18next'
 
@@ -79,16 +80,21 @@ export const useSenderController = (props: SenderProps) => {
     interactionRequest: props.interactionRequest,
     isInlineEdit
   })
-  const { clearInputShortcut, composerControlShortcuts, resolvedSendShortcut } = useSenderShortcuts({
-    enabled: !hideSender && !attachments.showContextPicker && !isInlineEdit,
-    isInlineEdit,
-    isMac,
-    isThinking,
-    modelUnavailable: props.modelUnavailable,
-    permissionModeOptions: props.permissionModeOptions ?? [],
-    referenceActions,
-    selectOverlays
-  })
+  const isPermissionInteraction = !isInlineEdit && props.interactionRequest?.payload.kind === 'permission'
+  const showConfirmInteractionAction = isPermissionInteraction &&
+    (props.interactionOptionNavigation?.optionCount ?? 0) > 0
+  const sendBlockedTooltip = isPermissionInteraction ? t('chat.permissionSendBlockedTooltip') : undefined
+  const { clearInputShortcut, composerControlShortcuts, resolvedSendShortcut, queuedMessageShortcuts } =
+    useSenderShortcuts({
+      enabled: !hideSender && !attachments.showContextPicker && !isInlineEdit,
+      isInlineEdit,
+      isMac,
+      isThinking,
+      modelUnavailable: props.modelUnavailable,
+      permissionModeOptions: props.permissionModeOptions ?? [],
+      referenceActions,
+      selectOverlays
+    })
 
   const resetComposer = () => {
     composer.resetComposerContent()
@@ -103,6 +109,7 @@ export const useSenderController = (props: SenderProps) => {
     pendingImages: composer.pendingImages,
     pendingFiles: composer.pendingFiles,
     isBusy,
+    allowWhileBusy: isThinking,
     isInlineEdit,
     modelUnavailable: props.modelUnavailable,
     interactionRequest: props.interactionRequest,
@@ -113,7 +120,20 @@ export const useSenderController = (props: SenderProps) => {
     t,
     resetComposer
   })
-  const triggerSend = () => void handleSend()
+  const handleBlockedSendAttempt = () => {
+    void message.error({
+      content: t('chat.permissionSendBlockedError'),
+      key: 'chat-permission-send-blocked'
+    })
+  }
+  const triggerSend = (mode?: 'steer' | 'next') => {
+    if (isPermissionInteraction) {
+      handleBlockedSendAttempt()
+      return
+    }
+
+    void handleSend(mode)
+  }
 
   useSenderAutofocus({ autoFocus: props.autoFocus === true, editorRef })
   useSenderReferenceFocusRestore({ focusRestore, referenceActions })
@@ -123,11 +143,24 @@ export const useSenderController = (props: SenderProps) => {
     isMac,
     clearInputShortcut,
     isInlineEdit,
+    isThinking,
     input: composer.input,
     pendingImageCount: composer.pendingImages.length,
     pendingFileCount: composer.pendingFiles.length,
+    interactionOptionCount: props.interactionOptionNavigation?.optionCount ?? 0,
     onCancel: props.onCancel,
     onClear: props.onClear,
+    onInteractionOptionMove: props.interactionOptionNavigation?.onMove,
+    onInteractionOptionSubmit: props.interactionOptionNavigation?.onSubmit,
+    onInterrupt: props.onInterrupt,
+    onInterruptHint: () => {
+      void message.open({
+        type: 'info',
+        content: t('chat.queue.stopShortcutConfirm'),
+        duration: 1.6,
+        key: 'chat-stop-shortcut-confirm'
+      })
+    },
     onResetComposer: resetComposer,
     showReferenceActions: referenceActions.showReferenceActions,
     onCloseReferenceActions: () => referenceActions.closeReferenceActions({ restoreFocus: true }),
@@ -160,10 +193,16 @@ export const useSenderController = (props: SenderProps) => {
     isInlineEdit,
     isMac,
     isThinking,
+    sendBlocked: isPermissionInteraction,
+    sendBlockedTooltip,
+    showConfirmInteractionAction,
+    confirmInteractionLabel: showConfirmInteractionAction ? t('chat.permissionConfirmOption') : undefined,
+    onConfirmInteractionOption: showConfirmInteractionAction ? props.interactionOptionNavigation?.onSubmit : undefined,
     message,
     props,
     refs: { fileInputRef, modelSelectRef, effortSelectRef },
     referenceActions,
+    queuedMessageShortcuts,
     resolvedSendShortcut,
     selectOverlays,
     supportsEffort,
@@ -186,6 +225,12 @@ export const useSenderController = (props: SenderProps) => {
     permissionContext,
     editorRef,
     placeholder: props.placeholder ?? props.interactionRequest?.payload.question ?? t('chat.inputPlaceholder'),
+    secondarySendShortcut: isThinking && !isPermissionInteraction ? queuedMessageShortcuts.queueNext : undefined,
+    onSecondarySendShortcut: isThinking && !isPermissionInteraction
+      ? () => {
+        void handleSend('next')
+      }
+      : undefined,
     toolbar
   })
 }

package/src/components/chat/sender/@hooks/use-sender-keydown.ts

@@ -1,4 +1,5 @@
 import type { RefObject } from 'react'
+import { useEffect, useRef } from 'react'
 
 import type { SenderEditorHandle } from '#~/components/chat/sender/@types/sender-editor'
 import { loadChatHistory } from '#~/components/chat/sender/@utils/sender-utils'
@@ -9,11 +10,17 @@ export const useSenderKeydown = ({
   isMac,
   clearInputShortcut,
   isInlineEdit,
+  isThinking,
   input,
   pendingImageCount,
   pendingFileCount,
+  interactionOptionCount,
   onCancel,
   onClear,
+  onInteractionOptionMove,
+  onInteractionOptionSubmit,
+  onInterrupt,
+  onInterruptHint,
   onResetComposer,
   showReferenceActions,
   onCloseReferenceActions,
@@ -30,11 +37,17 @@ export const useSenderKeydown = ({
   isMac: boolean
   clearInputShortcut?: string
   isInlineEdit: boolean
+  isThinking: boolean
   input: string
   pendingImageCount: number
   pendingFileCount: number
+  interactionOptionCount: number
   onCancel?: () => void
   onClear?: () => void
+  onInteractionOptionMove?: (delta: number) => void
+  onInteractionOptionSubmit?: () => void
+  onInterrupt: () => void
+  onInterruptHint: () => void
   onResetComposer: () => void
   showReferenceActions: boolean
   onCloseReferenceActions: () => void
@@ -47,6 +60,14 @@ export const useSenderKeydown = ({
   onHistoryNavigate: (direction: 'up' | 'down') => void
   onInputClear: () => void
 }) => {
+  const interruptConfirmationExpiresAtRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (input !== '' || pendingImageCount > 0 || pendingFileCount > 0 || !isThinking) {
+      interruptConfirmationExpiresAtRef.current = null
+    }
+  }, [input, isThinking, pendingFileCount, pendingImageCount])
+
   return (event: KeyboardEvent) => {
     if (showReferenceActions && event.key === 'Escape') {
       event.preventDefault()
@@ -71,6 +92,33 @@ export const useSenderKeydown = ({
       onInputClear()
       return
     }
+    const canNavigateInteractionOptions = !isInlineEdit &&
+      interactionOptionCount > 0 &&
+      input.trim() === '' &&
+      pendingImageCount === 0 &&
+      pendingFileCount === 0
+    if (
+      canNavigateInteractionOptions &&
+      onInteractionOptionMove != null &&
+      (event.key === 'ArrowUp' || event.key === 'ArrowDown')
+    ) {
+      event.preventDefault()
+      onInteractionOptionMove(event.key === 'ArrowUp' ? -1 : 1)
+      return
+    }
+    if (
+      canNavigateInteractionOptions &&
+      onInteractionOptionSubmit != null &&
+      event.key === 'Enter' &&
+      !event.metaKey &&
+      !event.ctrlKey &&
+      !event.altKey &&
+      !event.shiftKey
+    ) {
+      event.preventDefault()
+      onInteractionOptionSubmit()
+      return
+    }
     if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       const selection = editorRef.current?.getSelection()
       const history = loadChatHistory()
@@ -96,7 +144,23 @@ export const useSenderKeydown = ({
       }
       if (input !== '') {
         event.preventDefault()
+        interruptConfirmationExpiresAtRef.current = null
         onInputClear()
+        return
+      }
+      if (isThinking && pendingImageCount === 0 && pendingFileCount === 0) {
+        event.preventDefault()
+        const now = Date.now()
+        const expiresAt = interruptConfirmationExpiresAtRef.current
+
+        if (expiresAt != null && expiresAt > now) {
+          interruptConfirmationExpiresAtRef.current = null
+          onInterrupt()
+          return
+        }
+
+        interruptConfirmationExpiresAtRef.current = now + 1800
+        onInterruptHint()
       }
       return
     }

package/src/components/chat/sender/@hooks/use-sender-shortcuts.ts

@@ -8,6 +8,19 @@ import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
 import { useComposerControlShortcuts } from '#~/hooks/chat/use-composer-control-shortcuts'
 import { resolveSendShortcut } from '#~/utils/shortcutUtils'
 
+const resolveQueuedMessageShortcuts = (sendShortcut: string, isMac: boolean) => {
+  const primary = sendShortcut
+  const candidates = isMac
+    ? ['cmd+shift+enter', 'cmd+alt+enter', 'cmd+ctrl+enter']
+    : ['mod+enter', 'alt+enter', 'ctrl+shift+enter']
+  const next = candidates.find(shortcut => shortcut !== primary) ?? candidates[0]
+
+  return {
+    queueSteer: primary,
+    queueNext: next
+  }
+}
+
 export const useSenderShortcuts = ({
   enabled,
   isInlineEdit,
@@ -38,6 +51,7 @@ export const useSenderShortcuts = ({
   const { data: configRes } = useSWR<ConfigResponse>('/api/config')
   const mergedShortcuts = configRes?.sources?.merged?.shortcuts
   const resolvedSendShortcut = resolveSendShortcut(mergedShortcuts?.sendMessage, isMac)
+  const queuedMessageShortcuts = resolveQueuedMessageShortcuts(resolvedSendShortcut, isMac)
 
   const composerControlShortcuts = useComposerControlShortcuts({
     enabled,
@@ -73,6 +87,7 @@ export const useSenderShortcuts = ({
   return {
     clearInputShortcut: mergedShortcuts?.clearInput,
     composerControlShortcuts,
-    resolvedSendShortcut
+    resolvedSendShortcut,
+    queuedMessageShortcuts
   }
 }

package/src/components/chat/sender/@hooks/use-sender-submit.ts

@@ -1,3 +1,4 @@
+import type { SessionQueuedMessageMode } from '@vibe-forge/core'
 import type { TFunction } from 'i18next'
 
 import type { MessageInstance } from 'antd/es/message/interface'
@@ -11,6 +12,7 @@ export const useSenderSubmit = ({
   pendingImages,
   pendingFiles,
   isBusy,
+  allowWhileBusy,
   isInlineEdit,
   modelUnavailable,
   interactionRequest,
@@ -25,20 +27,26 @@ export const useSenderSubmit = ({
   pendingImages: Parameters<typeof buildMessageContent>[1]
   pendingFiles: Parameters<typeof buildMessageContent>[2]
   isBusy: boolean
+  allowWhileBusy: boolean
   isInlineEdit: boolean
   modelUnavailable?: boolean
   interactionRequest?: { id: string } | null
   onInteractionResponse?: (id: string, data: string | string[]) => void
-  onSend: (text: string) => SenderSubmitResult | Promise<SenderSubmitResult>
-  onSendContent: (content: ReturnType<typeof buildMessageContent>) => SenderSubmitResult | Promise<SenderSubmitResult>
+  onSend: (text: string, mode?: SessionQueuedMessageMode) => SenderSubmitResult | Promise<SenderSubmitResult>
+  onSendContent: (
+    content: ReturnType<typeof buildMessageContent>,
+    mode?: SessionQueuedMessageMode
+  ) => SenderSubmitResult | Promise<SenderSubmitResult>
   message: MessageInstance
   t: TFunction
   resetComposer: () => void
 }) => {
-  return async () => {
+  return async (mode?: SessionQueuedMessageMode) => {
     const input = getInput()
 
-    if (isBusy || (input.trim() === '' && pendingImages.length === 0 && pendingFiles.length === 0)) {
+    if (
+      ((isBusy && !allowWhileBusy) || (input.trim() === '' && pendingImages.length === 0 && pendingFiles.length === 0))
+    ) {
       return
     }
     if (!isInlineEdit && modelUnavailable) {
@@ -61,14 +69,14 @@ export const useSenderSubmit = ({
     if (pendingImages.length > 0 || pendingFiles.length > 0) {
       const content = buildMessageContent(input, pendingImages, pendingFiles)
       if (isInlineEdit) {
-        didSubmit = (await onSendContent(content)) !== false
+        didSubmit = (await onSendContent(content, mode)) !== false
       } else {
-        void onSendContent(content)
+        void onSendContent(content, mode)
       }
     } else if (isInlineEdit) {
-      didSubmit = (await onSend(input)) !== false
+      didSubmit = (await onSend(input, mode)) !== false
     } else {
-      void onSend(input)
+      void onSend(input, mode)
     }
 
     if (!didSubmit) {

package/src/components/chat/sender/@types/sender-props.ts

@@ -1,6 +1,11 @@
 import type { ReactNode } from 'react'
 
-import type { AskUserQuestionParams, ChatMessageContent, SessionStatus } from '@vibe-forge/core'
+import type {
+  AskUserQuestionParams,
+  ChatMessageContent,
+  SessionQueuedMessageMode,
+  SessionStatus
+} from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
 
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
@@ -10,16 +15,26 @@ import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
 import type { SenderInitialContent, SenderSubmitResult, SenderVariant } from './sender-types'
 
 export interface SenderProps {
-  onSend: (text: string) => SenderSubmitResult | Promise<SenderSubmitResult>
-  onSendContent: (content: ChatMessageContent[]) => SenderSubmitResult | Promise<SenderSubmitResult>
+  onSend: (text: string, mode?: SessionQueuedMessageMode) => SenderSubmitResult | Promise<SenderSubmitResult>
+  onSendContent: (
+    content: ChatMessageContent[],
+    mode?: SessionQueuedMessageMode
+  ) => SenderSubmitResult | Promise<SenderSubmitResult>
   variant?: SenderVariant
   adapterLocked?: boolean
   sessionStatus?: SessionStatus
   onInterrupt: () => void
   onClear?: () => void
+  sessionId?: string
   sessionInfo?: SessionInfo | null
   interactionRequest?: { id: string; payload: AskUserQuestionParams } | null
   onInteractionResponse?: (id: string, data: string | string[]) => void
+  interactionOptionNavigation?: {
+    optionCount: number
+    activeIndex: number
+    onMove: (delta: number) => void
+    onSubmit: () => void
+  }
   placeholder?: string
   initialContent?: SenderInitialContent
   onCancel?: () => void
@@ -44,4 +59,6 @@ export interface SenderProps {
   adapterOptions?: Array<{ value: string; label: ReactNode }>
   onAdapterChange?: (adapter: string) => void
   modelUnavailable?: boolean
+  queueMode?: SessionQueuedMessageMode
+  onQueueModeChange?: (mode: SessionQueuedMessageMode) => void
 }

package/src/components/chat/sender/@types/sender-toolbar-types.ts

@@ -1,5 +1,6 @@
 import type { ChangeEvent, KeyboardEvent, ReactNode, RefObject } from 'react'
 
+import type { SessionQueuedMessageMode } from '@vibe-forge/core'
 import type { RefSelectProps } from 'antd'
 
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
@@ -11,12 +12,17 @@ export interface SenderToolbarShortcuts {
   switchModel: string
   switchEffort: string
   switchPermissionMode: string
+  queueSteer: string
+  queueNext: string
 }
 
 export interface SenderToolbarState {
   isInlineEdit: boolean
   isThinking: boolean
   modelUnavailable: boolean
+  sendBlocked: boolean
+  sendBlockedTooltip?: string
+  showConfirmInteractionAction: boolean
   adapterLocked: boolean
   submitLoading: boolean
   supportsEffort: boolean
@@ -34,6 +40,8 @@ export interface SenderToolbarState {
   resolvedSendShortcut: string
   hasComposerContent: boolean
   hasSendText: boolean
+  queueMode: SessionQueuedMessageMode
+  showQueueModeControl: boolean
 }
 
 export interface SenderToolbarData {
@@ -47,6 +55,7 @@ export interface SenderToolbarData {
   adapterOptions?: Array<{ value: string; label: ReactNode }>
   composerControlShortcuts: SenderToolbarShortcuts
   submitLabel?: string
+  confirmInteractionLabel?: string
 }
 
 export interface SenderToolbarRefs {
@@ -77,7 +86,9 @@ export interface SenderToolbarHandlers {
   onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
   onEffortChange?: (effort: ChatEffort) => void
   onAdapterChange?: (adapter: string) => void
-  onSend: () => void
+  onSend: (mode?: SessionQueuedMessageMode) => void
   onInterrupt: () => void
   onCancel?: () => void
+  onConfirmInteractionOption?: () => void
+  onQueueModeChange?: (mode: SessionQueuedMessageMode) => void
 }

package/src/components/chat/sender/Sender.scss

@@ -1,4 +1,6 @@
 .chat-input-wrapper {
+  width: 100%;
+  margin: 0;
   border-top: none;
   position: relative;
   background-color: var(--bg-color);
@@ -6,6 +8,7 @@
 
 .chat-input-wrapper--inline-edit {
   width: 100%;
+  margin: 0;
 }
 
 .chat-input-container {
@@ -21,7 +24,7 @@
   &:focus-within {
     border-color: #3b82f6;
     background-color: var(--input-focus-bg, #f9fafb);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, .1);
+    box-shadow: none;
   }
 
   .chat-input-monaco {