Merge pull request #55500 from NousResearch/bb/desktop-composer-draft

perf+refactor(desktop): de-entangle the composer into isolated engine hooks

apps/desktop/src/app/chat/composer/hooks/use-composer-draft.ts

@@ -0,0 +1,344 @@
+import { useAui, useAuiState, useComposerRuntime } from '@assistant-ui/react'
+import { type RefObject, useCallback, useEffect, useRef, useState } from 'react'
+
+import { SLASH_COMMAND_RE } from '@/lib/chat-runtime'
+import { $composerAttachments, type ComposerAttachment, stashSessionDraft, takeSessionDraft } from '@/store/composer'
+import { isBrowsingHistory } from '@/store/composer-input-history'
+
+import { cloneAttachments, DRAFT_PERSIST_DEBOUNCE_MS, type QueueEditState } from '../composer-utils'
+import {
+  type ComposerInsertMode,
+  focusComposerInput,
+  markActiveComposer,
+  onComposerFocusRequest,
+  onComposerInsertRefsRequest,
+  onComposerInsertRequest
+} from '../focus'
+import { type InlineRefInput, insertInlineRefsIntoEditor } from '../inline-refs'
+import { composerPlainText, placeCaretEnd, renderComposerContents } from '../rich-editor'
+import type { ChatBarProps } from '../types'
+
+interface UseComposerDraftArgs {
+  activeQueueSessionKey: string | null
+  focusKey: ChatBarProps['focusKey']
+  inputDisabled: boolean
+  queueEditRef: RefObject<QueueEditState | null>
+  sessionId: string | null | undefined
+}
+
+/**
+ * The composer's draft engine — the detached source-of-truth spine. The live
+ * text lives in the contentEditable DOM + `draftRef`; React only sees coarse
+ * edge selectors, so typing never re-renders the chrome. Owns the imperative
+ * composer-runtime subscription (draftRef mirror + external repaint + debounced
+ * per-session stash), the edit primitives (append/insert/inline-refs), focus,
+ * and per-session load/clear/stash/restore. The contentEditable *event*
+ * handlers stay in ChatBar (they bridge into the trigger engine) and drive the
+ * primitives exposed here.
+ */
+export function useComposerDraft({
+  activeQueueSessionKey,
+  focusKey,
+  inputDisabled,
+  queueEditRef,
+  sessionId
+}: UseComposerDraftArgs) {
+  const aui = useAui()
+  const composerRuntime = useComposerRuntime()
+
+  // Coarse edges only — these flip rarely (empty↔non-empty, the `?` help sigil,
+  // steerable-vs-slash), so typing within a line costs no render.
+  const hasText = useAuiState(s => s.composer.text.trim().length > 0)
+  const isHelpHint = useAuiState(s => s.composer.text === '?')
+
+  const isSteerableText = useAuiState(s => {
+    const trimmed = s.composer.text.trim()
+
+    return trimmed.length > 0 && !SLASH_COMMAND_RE.test(trimmed)
+  })
+
+  // assistant-ui's composer mutators throw when the core isn't bound yet (a
+  // startup/thread-swap window); the DOM + draftRef hold the text and the
+  // subscription reconciles once it binds, so swallow the premature write.
+  const setComposerText = useCallback(
+    (value: string) => {
+      try {
+        aui.composer().setText(value)
+      } catch {
+        // Composer core not bound yet — DOM/draftRef carry the text.
+      }
+    },
+    [aui]
+  )
+
+  const editorRef = useRef<HTMLDivElement | null>(null)
+  const draftRef = useRef('')
+  const pendingDraftPersistRef = useRef<{ scope: string | null; text: string } | null>(null)
+  const draftPersistTimerRef = useRef<number | undefined>(undefined)
+  const activeQueueSessionKeyRef = useRef(activeQueueSessionKey)
+  activeQueueSessionKeyRef.current = activeQueueSessionKey
+  const sessionIdRef = useRef(sessionId)
+  sessionIdRef.current = sessionId
+  const queueEditStateRef = useRef<QueueEditState | null>(queueEditRef.current)
+  queueEditStateRef.current = queueEditRef.current
+
+  const [focusRequestId, setFocusRequestId] = useState(0)
+
+  const focusInput = useCallback(() => {
+    focusComposerInput(editorRef.current)
+    markActiveComposer('main')
+  }, [])
+
+  const requestMainFocus = useCallback(() => {
+    setFocusRequestId(id => id + 1)
+  }, [])
+
+  // The single write path for programmatic draft mutations: mirror → AUI state →
+  // repaint the editor (caret to end). Repaints even while focused — inserts /
+  // restores run mid-focus, and the runtime sync only repaints an unfocused
+  // editor — so the visible text never lags the store.
+  const paintDraft = useCallback(
+    (next: string, focus = true) => {
+      draftRef.current = next
+      setComposerText(next)
+
+      const editor = editorRef.current
+
+      if (editor) {
+        renderComposerContents(editor, next)
+        placeCaretEnd(editor)
+      }
+
+      if (focus) {
+        requestMainFocus()
+      }
+    },
+    [requestMainFocus, setComposerText]
+  )
+
+  const appendExternalText = useCallback(
+    (text: string, mode: ComposerInsertMode) => {
+      const value = text.trim()
+
+      if (!value) {
+        return
+      }
+
+      const base = mode === 'inline' ? draftRef.current.trimEnd() : draftRef.current
+      const sep = mode === 'inline' ? (base ? ' ' : '') : base && !base.endsWith('\n') ? '\n\n' : ''
+
+      paintDraft(`${base}${sep}${value}`)
+    },
+    [paintDraft]
+  )
+
+  useEffect(() => {
+    if (!inputDisabled) {
+      focusInput()
+    }
+  }, [focusInput, focusKey, focusRequestId, inputDisabled])
+
+  useEffect(() => {
+    if (inputDisabled) {
+      return undefined
+    }
+
+    const offFocus = onComposerFocusRequest(target => {
+      if (target === 'main') {
+        setFocusRequestId(id => id + 1)
+      }
+    })
+
+    const offInsert = onComposerInsertRequest(({ mode, target, text }) => {
+      if (target === 'main') {
+        appendExternalText(text, mode)
+      }
+    })
+
+    return () => {
+      offFocus()
+      offInsert()
+    }
+  }, [appendExternalText, inputDisabled])
+
+  const stashAt = (scope: string | null, text = draftRef.current, attachments = $composerAttachments.get()) =>
+    stashSessionDraft(scope, text, attachments)
+
+  const loadIntoComposer = (text: string, attachments: ComposerAttachment[]) => {
+    $composerAttachments.set(cloneAttachments(attachments))
+    paintDraft(text, false)
+  }
+
+  const clearDraft = useCallback(() => {
+    setComposerText('')
+    draftRef.current = ''
+
+    if (editorRef.current) {
+      editorRef.current.replaceChildren()
+    }
+  }, [setComposerText])
+
+  // Read the editor's current plain text into draftRef + composer state. This
+  // closes the "queued rAF flush hasn't run yet" window so scope-swap/pagehide
+  // persistence captures the latest keystrokes.
+  const syncDraftFromEditor = useCallback(() => {
+    const editor = editorRef.current
+
+    if (!editor) {
+      return draftRef.current
+    }
+
+    const text = composerPlainText(editor)
+
+    if (text !== draftRef.current) {
+      draftRef.current = text
+      setComposerText(text)
+    }
+
+    return text
+  }, [setComposerText])
+
+  // Imperative draft sync — the spine of the "work only when work is to be
+  // performed" model. Subscribing to the composer runtime directly (not
+  // `useAuiState(text)` + a `[draft]` effect) keeps per-keystroke text out of
+  // React, so typing never re-renders the chrome. On each change we (1) mirror
+  // text into draftRef, (2) repaint the editor only when the change came from
+  // OUTSIDE it (programmatic clear/restore/insert; the focused editor is the
+  // source otherwise), and (3) schedule the debounced per-session stash.
+  // Browsing history / editing a queued prompt suppress the stash so recalled
+  // text never clobbers the draft.
+  useEffect(() => {
+    const sync = () => {
+      const text = composerRuntime.getState().text
+      draftRef.current = text
+
+      const editor = editorRef.current
+
+      if (editor && document.activeElement !== editor && composerPlainText(editor) !== text) {
+        renderComposerContents(editor, text)
+      }
+
+      if (isBrowsingHistory(sessionIdRef.current) || queueEditRef.current) {
+        return
+      }
+
+      const scope = activeQueueSessionKeyRef.current
+      pendingDraftPersistRef.current = { scope, text }
+      window.clearTimeout(draftPersistTimerRef.current)
+      draftPersistTimerRef.current = window.setTimeout(() => {
+        pendingDraftPersistRef.current = null
+        stashAt(scope, text)
+      }, DRAFT_PERSIST_DEBOUNCE_MS)
+    }
+
+    const unsubscribe = composerRuntime.subscribe(sync)
+
+    return () => {
+      unsubscribe()
+      window.clearTimeout(draftPersistTimerRef.current)
+    }
+  }, [composerRuntime, queueEditRef])
+
+  const insertText = (text: string) => {
+    const base = draftRef.current
+    const sep = base && !base.endsWith('\n') ? '\n' : ''
+
+    paintDraft(`${base}${sep}${text}`)
+  }
+
+  // insertInlineRefs mutates the editor in place (chips), so it can't go through
+  // paintDraft's re-render — it mirrors the resulting plain text and refocuses.
+  const insertInlineRefs = (refs: InlineRefInput[]) => {
+    const editor = editorRef.current
+
+    if (!editor) {
+      return false
+    }
+
+    const nextDraft = insertInlineRefsIntoEditor(editor, refs)
+
+    if (nextDraft === null) {
+      return false
+    }
+
+    draftRef.current = nextDraft
+    setComposerText(nextDraft)
+    requestMainFocus()
+
+    return true
+  }
+
+  // Latest-closure ref so the once-only subscription always calls the current
+  // insertInlineRefs without re-subscribing every render.
+  const insertInlineRefsRef = useRef(insertInlineRefs)
+  insertInlineRefsRef.current = insertInlineRefs
+
+  useEffect(() => {
+    return onComposerInsertRefsRequest(({ refs, target }) => {
+      if (target === 'main') {
+        insertInlineRefsRef.current(refs)
+      }
+    })
+  }, [])
+
+  // Per-thread draft swap — the composer's only session coupling. Lifecycle
+  // never clears composer state; this effect alone stashes on leave, restores
+  // on enter. Keyed writes are idempotent, so no skip-sentinel.
+  useEffect(() => {
+    const { attachments, text } = takeSessionDraft(activeQueueSessionKey)
+    loadIntoComposer(text, attachments)
+
+    return () => {
+      const latestText = syncDraftFromEditor()
+      const editing = queueEditStateRef.current
+
+      if (editing?.sessionKey === activeQueueSessionKey) {
+        stashAt(activeQueueSessionKey, editing.draft, editing.attachments)
+      } else if (!isBrowsingHistory(sessionId)) {
+        stashAt(activeQueueSessionKey, latestText)
+      }
+    }
+  }, [activeQueueSessionKey]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // pagehide is load-bearing: React skips effect cleanups on reload, so Cmd+R
+  // inside the debounce/rAF window would drop trailing keystrokes without this.
+  useEffect(() => {
+    const flushPendingDraftPersist = () => {
+      const scope = activeQueueSessionKeyRef.current
+      const editing = queueEditStateRef.current
+
+      if (editing?.sessionKey === scope || isBrowsingHistory(sessionIdRef.current)) {
+        return
+      }
+
+      const latestText = syncDraftFromEditor()
+      pendingDraftPersistRef.current = null
+      stashAt(scope, latestText)
+    }
+
+    window.addEventListener('pagehide', flushPendingDraftPersist)
+
+    return () => {
+      window.removeEventListener('pagehide', flushPendingDraftPersist)
+      flushPendingDraftPersist()
+    }
+  }, [syncDraftFromEditor])
+
+  return {
+    activeQueueSessionKeyRef,
+    clearDraft,
+    draftRef,
+    editorRef,
+    focusInput,
+    hasText,
+    insertInlineRefs,
+    insertText,
+    isHelpHint,
+    isSteerableText,
+    loadIntoComposer,
+    requestMainFocus,
+    sessionIdRef,
+    setComposerText,
+    stashAt
+  }
+}

apps/desktop/src/app/chat/composer/hooks/use-composer-drop.ts

@@ -0,0 +1,164 @@
+import { type DragEvent as ReactDragEvent, useRef, useState } from 'react'
+
+import { triggerHaptic } from '@/lib/haptics'
+
+import { extractDroppedFiles, HERMES_PATHS_MIME, partitionDroppedFiles } from '../../hooks/use-composer-actions'
+import { dragHasAttachments, droppedFileInlineRefs, type InlineRefInput } from '../inline-refs'
+import type { ChatBarProps } from '../types'
+
+interface UseComposerDropArgs {
+  cwd: ChatBarProps['cwd']
+  insertInlineRefs: (refs: InlineRefInput[]) => boolean
+  onAttachDroppedItems: ChatBarProps['onAttachDroppedItems']
+  requestMainFocus: () => void
+}
+
+/**
+ * Drag-and-drop attachment engine. Splits drops by origin: in-app drags
+ * (project tree / gutter) stay inline `@file:`/`@line:` refs the gateway
+ * resolves directly; OS/Finder drops (absolute local paths a remote gateway
+ * can't read, image bytes vision needs) route through the upload pipeline.
+ * Off the keystroke path; consumes `insertInlineRefs` + the attach handler.
+ */
+export function useComposerDrop({
+  cwd,
+  insertInlineRefs,
+  onAttachDroppedItems,
+  requestMainFocus
+}: UseComposerDropArgs) {
+  const [dragActive, setDragActive] = useState(false)
+  const dragDepthRef = useRef(0)
+
+  const resetDragState = () => {
+    dragDepthRef.current = 0
+    setDragActive(false)
+  }
+
+  const handleDragEnter = (event: ReactDragEvent<HTMLFormElement>) => {
+    if (!onAttachDroppedItems || !dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
+      return
+    }
+
+    event.preventDefault()
+    dragDepthRef.current += 1
+
+    if (!dragActive) {
+      setDragActive(true)
+    }
+  }
+
+  const handleDragOver = (event: ReactDragEvent<HTMLFormElement>) => {
+    if (!onAttachDroppedItems || !dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
+      return
+    }
+
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'copy'
+  }
+
+  const handleDragLeave = (event: ReactDragEvent<HTMLFormElement>) => {
+    if (!onAttachDroppedItems) {
+      return
+    }
+
+    event.preventDefault()
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1)
+
+    if (dragDepthRef.current === 0) {
+      setDragActive(false)
+    }
+  }
+
+  const handleDrop = (event: ReactDragEvent<HTMLFormElement>) => {
+    if (!onAttachDroppedItems) {
+      return
+    }
+
+    event.preventDefault()
+    resetDragState()
+
+    const candidates = extractDroppedFiles(event.dataTransfer)
+
+    if (candidates.length === 0) {
+      return
+    }
+
+    // In-app drags (project tree / gutter) are workspace-relative paths the
+    // gateway resolves directly, so they stay inline @file:/@line: refs. OS
+    // drops are absolute local paths a remote gateway can't read (and images
+    // need byte upload for vision), so route them through the upload pipeline.
+    const { inAppRefs, osDrops } = partitionDroppedFiles(candidates)
+    const refs = droppedFileInlineRefs(inAppRefs, cwd)
+
+    if (refs.length && insertInlineRefs(refs)) {
+      triggerHaptic('selection')
+    }
+
+    if (osDrops.length) {
+      void Promise.resolve(onAttachDroppedItems(osDrops)).then(attached => {
+        if (attached) {
+          triggerHaptic('selection')
+          requestMainFocus()
+        }
+      })
+    }
+  }
+
+  const handleInputDragOver = (event: ReactDragEvent<HTMLDivElement>) => {
+    if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+    event.dataTransfer.dropEffect = 'copy'
+  }
+
+  const handleInputDrop = (event: ReactDragEvent<HTMLDivElement>) => {
+    if (!dragHasAttachments(event.dataTransfer, HERMES_PATHS_MIME)) {
+      return
+    }
+
+    const candidates = extractDroppedFiles(event.dataTransfer)
+
+    if (!candidates.length) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+    resetDragState()
+
+    // Dropping straight onto the text box used to inline-ref *every* file —
+    // including OS/Finder drops, whose absolute local path a remote gateway
+    // can't read and whose image bytes never reached vision. Split by origin:
+    // in-app drags stay inline refs; OS drops go through the upload pipeline.
+    // (When no upload handler is wired, fall back to inline refs for all.)
+    const attach = onAttachDroppedItems
+    const { inAppRefs, osDrops } = partitionDroppedFiles(candidates)
+    const refs = droppedFileInlineRefs(attach ? inAppRefs : candidates, cwd)
+
+    if (refs.length && insertInlineRefs(refs)) {
+      triggerHaptic('selection')
+    }
+
+    if (attach && osDrops.length) {
+      void Promise.resolve(attach(osDrops)).then(attached => {
+        if (attached) {
+          triggerHaptic('selection')
+          requestMainFocus()
+        }
+      })
+    }
+  }
+
+  return {
+    dragActive,
+    handleDragEnter,
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    handleInputDragOver,
+    handleInputDrop
+  }
+}

apps/desktop/src/app/chat/composer/hooks/use-composer-metrics.ts

@@ -0,0 +1,160 @@
+import { useAuiState } from '@assistant-ui/react'
+import { type RefObject, useCallback, useEffect, useRef, useState } from 'react'
+
+import { useMediaQuery } from '@/hooks/use-media-query'
+import { useResizeObserver } from '@/hooks/use-resize-observer'
+import { $composerPoppedOut } from '@/store/composer-popout'
+import { isSecondaryWindow } from '@/store/windows'
+
+import { COMPOSER_SINGLE_LINE_MAX_PX, COMPOSER_STACK_BREAKPOINT_PX } from '../composer-utils'
+
+interface UseComposerMetricsArgs {
+  composerRef: RefObject<HTMLFormElement | null>
+  composerSurfaceRef: RefObject<HTMLDivElement | null>
+  editorRef: RefObject<HTMLDivElement | null>
+  poppedOut: boolean
+}
+
+/**
+ * Owns the composer's *sizing* engine: the stacked-vs-inline layout decision
+ * and the measured-height CSS vars the thread reads for bottom clearance. All
+ * work is edge-gated — the ResizeObserver only fires on real size changes, the
+ * height vars are 8px-bucketed so per-keystroke growth never invalidates the
+ * tree's computed style, and `tight` only flips when it crosses the breakpoint.
+ * Returns `stacked` (the only value the render needs).
+ */
+export function useComposerMetrics({ composerRef, composerSurfaceRef, editorRef, poppedOut }: UseComposerMetricsArgs): {
+  stacked: boolean
+} {
+  const [expanded, setExpanded] = useState(false)
+  const [tight, setTight] = useState(false)
+  const narrow = useMediaQuery('(max-width: 30rem)')
+
+  // Edge signals, not the live text: these only re-render when emptiness / the
+  // presence of a non-trailing newline actually flips, so typing within a line
+  // costs nothing here.
+  const isEmpty = useAuiState(s => s.composer.text.length === 0)
+  const hasHardNewline = useAuiState(s => s.composer.text.trimEnd().includes('\n'))
+
+  // Expansion (input on its own full-width row, controls below) is driven by
+  // the editor's *actual* rendered height via the ResizeObserver in
+  // syncComposerMetrics — it only fires when the text genuinely wraps to a
+  // second line, so the layout flips exactly at the wrap point rather than at
+  // a guessed character count. We only handle the two cases the observer
+  // can't: an explicit newline (expand before layout settles) and an emptied
+  // draft (collapse back). We never read scrollHeight per keystroke.
+  useEffect(() => {
+    if (isEmpty) {
+      setExpanded(false)
+
+      return
+    }
+
+    if (expanded) {
+      return
+    }
+
+    // Only a non-trailing newline forces an immediate expand. A trailing newline
+    // (or phantom \n from contenteditable junk) is left to the ResizeObserver,
+    // which expands only when the editor's real height actually grows.
+    if (hasHardNewline) {
+      setExpanded(true)
+    }
+  }, [expanded, hasHardNewline, isEmpty])
+
+  // Bucket measured heights so we only invalidate the global CSS var when
+  // the size crosses a meaningful threshold. Without bucketing, the editor
+  // grows ~1px per character → setProperty fires every keystroke → entire
+  // tree's computed style is invalidated → next paint forces a full
+  // recalculate-style pass. With an 8px bucket, the invalidation rate drops
+  // ~8× and small char-by-char typing produces no style invalidation at all
+  // until a wrap or row change actually happens.
+  const lastBucketedHeightRef = useRef(0)
+  const lastBucketedSurfaceHeightRef = useRef(0)
+  const lastTightRef = useRef<boolean | null>(null)
+
+  const syncComposerMetrics = useCallback(() => {
+    const composer = composerRef.current
+
+    if (!composer) {
+      return
+    }
+
+    // Floating composer is out of the thread's flow — it must not reserve any
+    // bottom clearance. Zero the measured vars so the thread reclaims the space.
+    // (Read globals here so the callback stays stable; mirror the popoutAllowed
+    // gate since secondary windows are forced docked.)
+    if ($composerPoppedOut.get() && !isSecondaryWindow()) {
+      const root = document.documentElement
+      lastBucketedHeightRef.current = 0
+      lastBucketedSurfaceHeightRef.current = 0
+      root.style.setProperty('--composer-measured-height', '0px')
+      root.style.setProperty('--composer-surface-measured-height', '0px')
+
+      return
+    }
+
+    const { height, width } = composer.getBoundingClientRect()
+    const surfaceHeight = composerSurfaceRef.current?.getBoundingClientRect().height
+    const root = document.documentElement
+
+    if (width > 0) {
+      const nextTight = width < COMPOSER_STACK_BREAKPOINT_PX
+
+      if (nextTight !== lastTightRef.current) {
+        lastTightRef.current = nextTight
+        setTight(nextTight)
+      }
+    }
+
+    // Expand once the input has actually wrapped past a single line. The
+    // observer only fires on real size changes, so this reads scrollHeight at
+    // most once per wrap (not per keystroke). One line ≈ 28px (1.625rem
+    // min-height + padding); a second line clears ~36px. We only ever expand
+    // here — collapse is handled by the emptied-draft effect to avoid
+    // oscillating across the wrap boundary as the input switches widths.
+    const editor = editorRef.current
+
+    if (editor && editor.scrollHeight > COMPOSER_SINGLE_LINE_MAX_PX) {
+      setExpanded(true)
+    }
+
+    if (height > 0) {
+      const bucket = Math.round(height / 8) * 8
+
+      if (bucket !== lastBucketedHeightRef.current) {
+        lastBucketedHeightRef.current = bucket
+        root.style.setProperty('--composer-measured-height', `${bucket}px`)
+      }
+    }
+
+    if (surfaceHeight && surfaceHeight > 0) {
+      const bucket = Math.round(surfaceHeight / 8) * 8
+
+      if (bucket !== lastBucketedSurfaceHeightRef.current) {
+        lastBucketedSurfaceHeightRef.current = bucket
+        root.style.setProperty('--composer-surface-measured-height', `${bucket}px`)
+      }
+    }
+  }, [composerRef, composerSurfaceRef, editorRef])
+
+  useResizeObserver(syncComposerMetrics, composerRef, composerSurfaceRef, editorRef)
+
+  // Toggling pop-out changes whether the composer reserves thread clearance.
+  // The ResizeObserver may not fire (the box can keep the same box size), so
+  // re-sync explicitly: docked republishes the measured height, floating zeroes
+  // it so the thread reclaims the bottom space.
+  useEffect(() => {
+    syncComposerMetrics()
+  }, [poppedOut, syncComposerMetrics])
+
+  useEffect(() => {
+    return () => {
+      const root = document.documentElement
+      root.style.removeProperty('--composer-measured-height')
+      root.style.removeProperty('--composer-surface-measured-height')
+    }
+  }, [])
+
+  return { stacked: expanded || narrow || tight }
+}

apps/desktop/src/app/chat/composer/hooks/use-composer-queue.ts

@@ -0,0 +1,350 @@
+import { type RefObject, useCallback, useEffect, useRef, useState } from 'react'
+
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { useSessionSlice } from '@/lib/use-session-slice'
+import { clearComposerAttachments, type ComposerAttachment } from '@/store/composer'
+import { resetBrowseState } from '@/store/composer-input-history'
+import {
+  $queuedPromptsBySession,
+  enqueueQueuedPrompt,
+  MAX_AUTO_DRAIN_ATTEMPTS,
+  migrateQueuedPrompts,
+  promoteQueuedPrompt,
+  type QueuedPromptEntry,
+  removeQueuedPrompt,
+  shouldAutoDrain,
+  updateQueuedPrompt
+} from '@/store/composer-queue'
+import { notify } from '@/store/notifications'
+
+import { cloneAttachments, type QueueEditState } from '../composer-utils'
+import type { ChatBarProps } from '../types'
+
+interface UseComposerQueueArgs {
+  activeQueueSessionKey: string | null
+  attachments: ComposerAttachment[]
+  busy: boolean
+  clearDraft: () => void
+  draftRef: RefObject<string>
+  focusInput: () => void
+  loadIntoComposer: (text: string, attachments: ComposerAttachment[]) => void
+  onCancel: ChatBarProps['onCancel']
+  onSubmit: ChatBarProps['onSubmit']
+  queueEditRef: RefObject<QueueEditState | null>
+  queueSessionKey: ChatBarProps['queueSessionKey']
+  sessionId: string | null | undefined
+}
+
+/**
+ * The composer's queue engine — everything about queued turns: the per-session
+ * queue store binding, in-place queued-prompt editing (begin/step/exit), the
+ * shared drain lock + send-then-remove sequence, manual send-now, and the
+ * edge-independent auto-drain with bounded retries. It consumes the draft API
+ * (draftRef/clearDraft/loadIntoComposer/focusInput) and writes the
+ * coordinator-owned `queueEditRef` so the draft engine can read the edit state
+ * without a back-reference. Behaviour-identical to the inline original.
+ */
+export function useComposerQueue({
+  activeQueueSessionKey,
+  attachments,
+  busy,
+  clearDraft,
+  draftRef,
+  focusInput,
+  loadIntoComposer,
+  onCancel,
+  onSubmit,
+  queueEditRef,
+  queueSessionKey,
+  sessionId
+}: UseComposerQueueArgs) {
+  const { t } = useI18n()
+
+  // Per-session slice (edge): re-renders only when THIS session's queue changes,
+  // not on cross-session queue churn (the plain atom's map ref changes on every
+  // write; the keyed array does not).
+  const queuedPrompts = useSessionSlice($queuedPromptsBySession, activeQueueSessionKey)
+
+  const [queueEdit, setQueueEdit] = useState<QueueEditState | null>(null)
+  queueEditRef.current = queueEdit
+
+  const setQueueEditSnapshot = useCallback(
+    (next: QueueEditState | null) => {
+      queueEditRef.current = next
+      setQueueEdit(next)
+    },
+    [queueEditRef]
+  )
+
+  const editingQueuedPrompt = queueEdit ? (queuedPrompts.find(entry => entry.id === queueEdit.entryId) ?? null) : null
+
+  const prevQueueKeyRef = useRef(activeQueueSessionKey)
+  const drainingQueueRef = useRef(false)
+  const drainFailuresRef = useRef(new Map<string, number>())
+
+  const beginQueuedEdit = (entry: QueuedPromptEntry) => {
+    if (!activeQueueSessionKey || queueEdit) {
+      return
+    }
+
+    setQueueEditSnapshot({
+      attachments: cloneAttachments(attachments),
+      draft: draftRef.current,
+      entryId: entry.id,
+      sessionKey: activeQueueSessionKey
+    })
+    loadIntoComposer(entry.text, entry.attachments)
+    triggerHaptic('selection')
+    focusInput()
+  }
+
+  // Walk queued entries while editing (ArrowUp = older, ArrowDown = newer),
+  // saving the in-progress edit on each step. Stepping newer past the last
+  // entry exits edit mode and restores the pre-edit draft.
+  const stepQueuedEdit = (direction: -1 | 1) => {
+    if (!queueEdit) {
+      return false
+    }
+
+    const index = queuedPrompts.findIndex(e => e.id === queueEdit.entryId)
+    const target = index + direction
+
+    if (index < 0 || target < 0) {
+      return index >= 0 // at the oldest: swallow; missing entry: let it fall through
+    }
+
+    const saved = updateQueuedPrompt(queueEdit.sessionKey, queueEdit.entryId, {
+      attachments: cloneAttachments(attachments),
+      text: draftRef.current
+    })
+
+    const next = queuedPrompts[target]
+
+    if (next) {
+      setQueueEditSnapshot({ ...queueEdit, entryId: next.id })
+      loadIntoComposer(next.text, next.attachments)
+    } else {
+      setQueueEditSnapshot(null)
+      loadIntoComposer(queueEdit.draft, queueEdit.attachments)
+    }
+
+    triggerHaptic(saved ? 'success' : 'selection')
+    focusInput()
+
+    return true
+  }
+
+  const exitQueuedEdit = (action: 'cancel' | 'save'): boolean => {
+    if (!queueEdit) {
+      return false
+    }
+
+    if (action === 'save') {
+      const text = draftRef.current
+      const next = cloneAttachments(attachments)
+
+      if (!text.trim() && next.length === 0) {
+        return false
+      }
+
+      const saved = updateQueuedPrompt(queueEdit.sessionKey, queueEdit.entryId, { attachments: next, text })
+      triggerHaptic(saved ? 'success' : 'selection')
+    } else {
+      triggerHaptic('cancel')
+    }
+
+    setQueueEditSnapshot(null)
+    loadIntoComposer(queueEdit.draft, queueEdit.attachments)
+    focusInput()
+
+    return true
+  }
+
+  const queueCurrentDraft = useCallback(() => {
+    const text = draftRef.current
+
+    if (!activeQueueSessionKey || (!text.trim() && attachments.length === 0)) {
+      return false
+    }
+
+    if (!enqueueQueuedPrompt(activeQueueSessionKey, { text, attachments })) {
+      return false
+    }
+
+    clearDraft()
+    clearComposerAttachments()
+    triggerHaptic('selection')
+
+    return true
+  }, [activeQueueSessionKey, attachments, clearDraft, draftRef])
+
+  // All queue drain paths share one lock + send-then-remove sequence.
+  // `pickEntry` lets each caller choose head, by-id, or skip-edited.
+  const runDrain = useCallback(
+    async (pickEntry: (entries: QueuedPromptEntry[]) => QueuedPromptEntry | undefined): Promise<boolean> => {
+      if (drainingQueueRef.current || !activeQueueSessionKey) {
+        return false
+      }
+
+      const entry = pickEntry(queuedPrompts)
+
+      if (!entry) {
+        return false
+      }
+
+      drainingQueueRef.current = true
+
+      try {
+        const accepted = await Promise.resolve(
+          onSubmit(entry.text, { attachments: entry.attachments, fromQueue: true })
+        )
+
+        if (accepted === false) {
+          return false
+        }
+
+        drainFailuresRef.current.delete(entry.id)
+        removeQueuedPrompt(activeQueueSessionKey, entry.id)
+        resetBrowseState(sessionId)
+
+        return true
+      } finally {
+        drainingQueueRef.current = false
+      }
+    },
+    [activeQueueSessionKey, onSubmit, queuedPrompts, sessionId]
+  )
+
+  const pickDrainHead = useCallback(
+    (entries: QueuedPromptEntry[]) => {
+      const skip = queueEditRef.current?.entryId
+
+      return skip ? entries.find(e => e.id !== skip) : entries[0]
+    },
+    [queueEditRef] // reads the edit id off a ref so the lock-holder always sees the latest
+  )
+
+  const drainNextQueued = useCallback(() => runDrain(pickDrainHead), [pickDrainHead, runDrain])
+
+  const sendQueuedNow = useCallback(
+    (id: string) => {
+      if (!activeQueueSessionKey || id === queueEdit?.entryId) {
+        return false
+      }
+
+      if (busy) {
+        // Promote to the head, then interrupt. The gateway always emits a
+        // settle (message.complete + session.info running:false) when the
+        // turn unwinds, and the busy→false auto-drain below sends this entry.
+        promoteQueuedPrompt(activeQueueSessionKey, id)
+        triggerHaptic('selection')
+        void Promise.resolve(onCancel())
+
+        return true
+      }
+
+      // A manual send clears the auto-drain backoff so a stuck entry the user
+      // taps gets a fresh attempt (and re-enables auto-retry on success).
+      drainFailuresRef.current.delete(id)
+
+      return runDrain(entries => entries.find(e => e.id === id))
+    },
+    [activeQueueSessionKey, busy, onCancel, queueEdit, runDrain]
+  )
+
+  // Edge-independent auto-drain: send the head whenever the session is idle and
+  // the queue is non-empty, bounding retries so a thrown/rejected onSubmit (e.g.
+  // a stale-session 404) can't strand the entry permanently nor spin-loop. The
+  // drain lock serializes sends; a remount/reconnect resets the failure counts.
+  const autoDrainNext = useCallback(() => {
+    if (busy || drainingQueueRef.current || !activeQueueSessionKey) {
+      return
+    }
+
+    const entry = pickDrainHead(queuedPrompts)
+
+    if (!entry || (drainFailuresRef.current.get(entry.id) ?? 0) >= MAX_AUTO_DRAIN_ATTEMPTS) {
+      return
+    }
+
+    const onFail = () => {
+      const fails = (drainFailuresRef.current.get(entry.id) ?? 0) + 1
+      drainFailuresRef.current.set(entry.id, fails)
+
+      if (fails >= MAX_AUTO_DRAIN_ATTEMPTS) {
+        notify({
+          id: 'composer-queue-stuck',
+          kind: 'error',
+          title: t.composer.queueStuckTitle,
+          message: t.composer.queueStuckBody
+        })
+      }
+    }
+
+    void runDrain(() => entry)
+      .then(sent => {
+        if (!sent) {
+          onFail()
+        }
+      })
+      .catch(onFail)
+  }, [activeQueueSessionKey, busy, pickDrainHead, queuedPrompts, runDrain, t])
+
+  // Re-key on a runtime session-id change. A stable stored id (queueSessionKey)
+  // never churns, so a change there is a real session switch and must NOT
+  // migrate; only the runtime-derived key (queueSessionKey falsy → key is
+  // sessionId) churns on a backend bounce/resume of the same conversation.
+  useEffect(() => {
+    const prev = prevQueueKeyRef.current
+    prevQueueKeyRef.current = activeQueueSessionKey
+
+    if (queueSessionKey || !prev || !activeQueueSessionKey || prev === activeQueueSessionKey) {
+      return
+    }
+
+    migrateQueuedPrompts(prev, activeQueueSessionKey)
+  }, [activeQueueSessionKey, queueSessionKey])
+
+  // Queued turns flow whenever the session is idle — on the busy→false settle
+  // edge, on mount/reconnect, and after a re-key — so a swallowed edge can't
+  // strand them. To cancel queued turns, the user deletes them from the panel.
+  useEffect(() => {
+    if (shouldAutoDrain({ isBusy: busy, queueLength: queuedPrompts.length })) {
+      autoDrainNext()
+    }
+  }, [autoDrainNext, busy, queuedPrompts.length])
+
+  // Queue-edit cleanup: on session swap the scope effect already stashed the
+  // edit snapshot; only restore into the composer when still on the same scope.
+  useEffect(() => {
+    if (!queueEdit) {
+      return
+    }
+
+    if (queueEdit.sessionKey === activeQueueSessionKey) {
+      if (editingQueuedPrompt) {
+        return
+      }
+
+      setQueueEditSnapshot(null)
+      loadIntoComposer(queueEdit.draft, queueEdit.attachments)
+
+      return
+    }
+
+    setQueueEditSnapshot(null)
+  }, [activeQueueSessionKey, editingQueuedPrompt, queueEdit, setQueueEditSnapshot]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    beginQueuedEdit,
+    drainNextQueued,
+    editingQueuedPrompt,
+    exitQueuedEdit,
+    queueCurrentDraft,
+    queueEdit,
+    queuedPrompts,
+    sendQueuedNow,
+    stepQueuedEdit
+  }
+}

apps/desktop/src/app/chat/composer/hooks/use-composer-submit.ts

@@ -0,0 +1,190 @@
+import { type RefObject, useEffect, useRef } from 'react'
+
+import { SLASH_COMMAND_RE } from '@/lib/chat-runtime'
+import { triggerHaptic } from '@/lib/haptics'
+import { clearComposerAttachments, clearSessionDraft, type ComposerAttachment } from '@/store/composer'
+import { resetBrowseState } from '@/store/composer-input-history'
+import { enqueueQueuedPrompt, type QueuedPromptEntry } from '@/store/composer-queue'
+
+import { cloneAttachments, type QueueEditState } from '../composer-utils'
+import { onComposerSubmitRequest } from '../focus'
+import { composerPlainText } from '../rich-editor'
+import type { ChatBarProps } from '../types'
+
+interface UseComposerSubmitArgs {
+  activeQueueSessionKey: string | null
+  activeQueueSessionKeyRef: RefObject<string | null>
+  attachments: ComposerAttachment[]
+  busy: boolean
+  canSteer: boolean
+  clearDraft: () => void
+  disabled: boolean
+  draftRef: RefObject<string>
+  drainNextQueued: () => Promise<boolean>
+  editorRef: RefObject<HTMLDivElement | null>
+  exitQueuedEdit: (action: 'cancel' | 'save') => boolean
+  focusInput: () => void
+  inputDisabled: boolean
+  loadIntoComposer: (text: string, attachments: ComposerAttachment[]) => void
+  onCancel: ChatBarProps['onCancel']
+  onSteer: ChatBarProps['onSteer']
+  onSubmit: ChatBarProps['onSubmit']
+  queueCurrentDraft: () => boolean
+  queueEdit: QueueEditState | null
+  queuedPrompts: QueuedPromptEntry[]
+  sessionId: string | null | undefined
+  setComposerText: (value: string) => void
+  stashAt: (scope: string | null, text?: string, attachments?: ComposerAttachment[]) => void
+}
+
+/**
+ * The composer's submit engine — the orchestration seam where the draft and
+ * queue meet. `submitDraft` is the one decision tree (queue-edit save · slash-
+ * now-while-busy · queue · drain · send · stop); `dispatchSubmit` is the shared
+ * send-with-restore primitive (re-loads + re-stashes the draft if the gateway
+ * rejects, so nothing is ever lost); `steerDraft` nudges the live turn. Reads
+ * the draft + queue APIs; owns no state of its own beyond the stable
+ * external-submit listener ref.
+ */
+export function useComposerSubmit({
+  activeQueueSessionKey,
+  activeQueueSessionKeyRef,
+  attachments,
+  busy,
+  canSteer,
+  clearDraft,
+  disabled,
+  draftRef,
+  drainNextQueued,
+  editorRef,
+  exitQueuedEdit,
+  focusInput,
+  inputDisabled,
+  loadIntoComposer,
+  onCancel,
+  onSteer,
+  onSubmit,
+  queueCurrentDraft,
+  queueEdit,
+  queuedPrompts,
+  sessionId,
+  setComposerText,
+  stashAt
+}: UseComposerSubmitArgs) {
+  // Shared send primitive: fire onSubmit, and if the gateway rejects (accepted
+  // === false) or throws, re-load + re-stash the draft so the words survive.
+  const dispatchSubmit = (text: string, attachments?: ComposerAttachment[]) => {
+    const submittedScope = activeQueueSessionKeyRef.current
+    const submittedAttachments = attachments ?? []
+
+    const restore = () => {
+      loadIntoComposer(text, submittedAttachments)
+      stashAt(activeQueueSessionKeyRef.current, text, submittedAttachments)
+    }
+
+    void Promise.resolve(attachments ? onSubmit(text, { attachments }) : onSubmit(text))
+      .then(accepted => void (accepted === false ? restore() : clearSessionDraft(submittedScope)))
+      .catch(restore)
+  }
+
+  // External "submit this prompt" requests (e.g. the review pane's agent-ship
+  // button) route through the same send path. A ref keeps the listener stable
+  // while always calling the latest dispatchSubmit closure.
+  const dispatchSubmitRef = useRef(dispatchSubmit)
+  dispatchSubmitRef.current = dispatchSubmit
+
+  useEffect(
+    () =>
+      onComposerSubmitRequest(({ target, text }) => {
+        if (target === 'main' && !inputDisabled) {
+          dispatchSubmitRef.current(text)
+        }
+      }),
+    [inputDisabled]
+  )
+
+  const submitDraft = () => {
+    if (disabled) {
+      return
+    }
+
+    // Source the text from the DOM editor, not React state. The AUI composer
+    // state (`draft`) and the derived `hasComposerPayload` lag the DOM by a
+    // render, so on fast typing or IME composition the final keystroke(s) may
+    // not have synced yet — reading state here drops the message (Enter looks
+    // like it does nothing; typing a trailing space only "fixes" it because the
+    // extra input event forces a state sync). draftRef is updated on every
+    // input event; refresh it from the editor once more to also cover an
+    // in-flight keystroke that hasn't fired its input event yet.
+    const editor = editorRef.current
+
+    if (editor) {
+      const domText = composerPlainText(editor)
+
+      if (domText !== draftRef.current) {
+        draftRef.current = domText
+        setComposerText(domText)
+      }
+    }
+
+    const text = draftRef.current
+    const payloadPresent = text.trim().length > 0 || attachments.length > 0
+
+    if (queueEdit) {
+      exitQueuedEdit('save')
+    } else if (busy) {
+      // Slash commands should execute immediately even while the agent is
+      // busy — they're client-side operations (/yolo, /skin, /new, /help,
+      // etc.) or self-contained gateway RPCs (/status, /compress).  onSubmit
+      // routes them to executeSlashCommand, which has its own per-command
+      // busy guard for commands that genuinely need an idle session (skill
+      // /send directives).  Queuing them would make every slash command wait
+      // for the current turn to finish, which is how the TUI never behaves.
+      if (!attachments.length && SLASH_COMMAND_RE.test(text.trim())) {
+        triggerHaptic('submit')
+        clearDraft()
+        dispatchSubmit(text)
+      } else if (payloadPresent) {
+        queueCurrentDraft()
+      } else {
+        // Stop button (the only way to reach here while busy with an empty
+        // composer — empty Enter is short-circuited in the keydown handler).
+        triggerHaptic('cancel')
+        void Promise.resolve(onCancel())
+      }
+    } else if (!payloadPresent && queuedPrompts.length > 0) {
+      void drainNextQueued()
+    } else if (payloadPresent) {
+      const submittedAttachments = cloneAttachments(attachments)
+      triggerHaptic('submit')
+      resetBrowseState(sessionId)
+      clearDraft()
+      clearComposerAttachments()
+      dispatchSubmit(text, submittedAttachments)
+    }
+
+    focusInput()
+  }
+
+  // Steer the live turn (nudge without interrupting). Clears the draft up front
+  // for snappy feedback; if the gateway rejects (no live tool window) the words
+  // are re-queued so nothing is lost — same safety net as a plain queue.
+  const steerDraft = () => {
+    if (!onSteer || !canSteer) {
+      return
+    }
+
+    const text = draftRef.current.trim()
+
+    triggerHaptic('submit')
+    clearDraft()
+
+    void Promise.resolve(onSteer(text)).then(accepted => {
+      if (!accepted && activeQueueSessionKey) {
+        enqueueQueuedPrompt(activeQueueSessionKey, { text, attachments: [] })
+      }
+    })
+  }
+
+  return { dispatchSubmit, steerDraft, submitDraft }
+}

apps/desktop/src/app/chat/composer/hooks/use-composer-voice.ts

@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { useI18n } from '@/i18n'
+import { chatMessageText } from '@/lib/chat-messages'
+import { triggerHaptic } from '@/lib/haptics'
+import { resetBrowseState } from '@/store/composer-input-history'
+import { notifyError } from '@/store/notifications'
+import { $messages } from '@/store/session'
+import { $autoSpeakReplies, setAutoSpeakReplies } from '@/store/voice-prefs'
+
+import { onComposerVoiceToggleRequest } from '../focus'
+import type { ChatBarProps } from '../types'
+
+import { useAutoSpeakReplies } from './use-auto-speak-replies'
+import { useVoiceConversation } from './use-voice-conversation'
+import { useVoiceRecorder } from './use-voice-recorder'
+
+interface UseComposerVoiceArgs {
+  busy: boolean
+  clearDraft: () => void
+  disabled: boolean
+  focusInput: () => void
+  insertText: (text: string) => void
+  maxRecordingSeconds: number
+  onSubmit: ChatBarProps['onSubmit']
+  onTranscribeAudio: ChatBarProps['onTranscribeAudio']
+  sessionId: string | null | undefined
+}
+
+/**
+ * The composer's voice engine: push-to-talk dictation (transcript → draft), the
+ * full voice-conversation loop, and auto-speak of replies. Self-contained — it
+ * consumes the draft/submit primitives passed in but nothing depends back on it,
+ * so it lifts cleanly out of ChatBar.
+ */
+export function useComposerVoice({
+  busy,
+  clearDraft,
+  disabled,
+  focusInput,
+  insertText,
+  maxRecordingSeconds,
+  onSubmit,
+  onTranscribeAudio,
+  sessionId
+}: UseComposerVoiceArgs) {
+  const { t } = useI18n()
+  const [voiceConversationActive, setVoiceConversationActive] = useState(false)
+  const lastSpokenIdRef = useRef<string | null>(null)
+
+  const { dictate, voiceActivityState, voiceStatus } = useVoiceRecorder({
+    focusInput,
+    maxRecordingSeconds,
+    onTranscript: insertText,
+    onTranscribeAudio
+  })
+
+  const pendingResponse = () => {
+    const messages = $messages.get()
+    const last = messages.findLast(m => m.role === 'assistant' && !m.hidden)
+
+    if (!last || last.id === lastSpokenIdRef.current) {
+      return null
+    }
+
+    const text = chatMessageText(last).trim()
+
+    if (!text) {
+      return null
+    }
+
+    return {
+      id: last.id,
+      pending: Boolean(last.pending),
+      text
+    }
+  }
+
+  const consumePendingResponse = () => {
+    const messages = $messages.get()
+    const last = messages.findLast(m => m.role === 'assistant' && !m.hidden)
+
+    if (last) {
+      lastSpokenIdRef.current = last.id
+    }
+  }
+
+  const submitVoiceTurn = async (text: string) => {
+    if (busy) {
+      return
+    }
+
+    triggerHaptic('submit')
+    resetBrowseState(sessionId)
+    clearDraft()
+    await onSubmit(text)
+  }
+
+  const conversation = useVoiceConversation({
+    busy,
+    consumePendingResponse,
+    enabled: voiceConversationActive,
+    onFatalError: () => setVoiceConversationActive(false),
+    onSubmit: submitVoiceTurn,
+    onTranscribeAudio,
+    pendingResponse
+  })
+
+  // The `composer.voice` hotkey (Ctrl+B) toggles the conversation. Starting
+  // with STT unconfigured lets the conversation surface its own "configure
+  // speech-to-text" notice rather than silently no-opping.
+  const toggleVoiceConversation = useCallback(() => {
+    if (disabled) {
+      return
+    }
+
+    if (voiceConversationActive) {
+      setVoiceConversationActive(false)
+      void conversation.end()
+    } else {
+      setVoiceConversationActive(true)
+    }
+  }, [conversation, disabled, voiceConversationActive])
+
+  useEffect(() => onComposerVoiceToggleRequest(toggleVoiceConversation), [toggleVoiceConversation])
+
+  // Explicit start/end for the on-screen conversation controls (the hotkey uses
+  // the gated toggle above).
+  const startConversation = useCallback(() => setVoiceConversationActive(true), [])
+
+  const endConversation = useCallback(() => {
+    setVoiceConversationActive(false)
+    void conversation.end()
+  }, [conversation])
+
+  const handleToggleAutoSpeak = useCallback(() => {
+    void setAutoSpeakReplies(!$autoSpeakReplies.get()).catch(error =>
+      notifyError(error, t.settings.config.autosaveFailed)
+    )
+  }, [t])
+
+  useAutoSpeakReplies({
+    conversationActive: voiceConversationActive,
+    failureLabel: t.assistant.thread.readAloudFailed,
+    markSpoken: consumePendingResponse,
+    pendingReply: pendingResponse,
+    sessionId
+  })
+
+  return {
+    conversation,
+    dictate,
+    endConversation,
+    handleToggleAutoSpeak,
+    startConversation,
+    voiceActivityState,
+    voiceConversationActive,
+    voiceStatus
+  }
+}

apps/desktop/src/app/chat/composer/hooks/use-status-presence.ts

@@ -0,0 +1,36 @@
+import { useSyncExternalStore } from 'react'
+
+import { $statusItemsBySession } from '@/store/composer-status'
+import { $previewStatusBySession } from '@/store/preview-status'
+
+const subscribe = (onChange: () => void) => {
+  const offItems = $statusItemsBySession.listen(onChange)
+  const offPreviews = $previewStatusBySession.listen(onChange)
+
+  return () => {
+    offItems()
+    offPreviews()
+  }
+}
+
+/**
+ * Whether a session has any status items or previews, as a coarse *edge*: the
+ * boolean only flips when the stack appears/disappears. ChatBar uses it to
+ * toggle a styling data-attr — subscribing to the whole `$statusItemsBySession`
+ * (a `computed` that rebuilds the entire map) / `$previewStatusBySession` maps
+ * re-rendered the ~1.4k ChatBar on every per-item mutation (a subagent tick, a
+ * 5s background poll) and on churn in OTHER sessions. The boolean snapshot bails
+ * out of all of that, re-rendering only on the actual show/hide transition.
+ */
+export function useSessionStatusPresence(sessionId: string | null): boolean {
+  return useSyncExternalStore(subscribe, () => {
+    if (!sessionId) {
+      return false
+    }
+
+    return (
+      ($statusItemsBySession.get()[sessionId]?.length ?? 0) > 0 ||
+      ($previewStatusBySession.get()[sessionId]?.length ?? 0) > 0
+    )
+  })
+}

apps/desktop/src/lib/use-session-slice.ts

@@ -0,0 +1,31 @@
+import { useSyncExternalStore } from 'react'
+
+interface SliceStore<T> {
+  get(): Record<string, T[] | undefined>
+  listen(listener: () => void): () => void
+}
+
+// Stable empty result so an absent key never yields a fresh array (which would
+// defeat the snapshot bail-out and re-render on every store write).
+const EMPTY: readonly never[] = []
+
+/**
+ * Subscribe to ONE session's slice of a `Record<sessionId, T[]>` nanostore,
+ * re-rendering only when *that* slice's reference changes — not on writes to
+ * other sessions. The map reference churns on every cross-session update, so a
+ * plain `useStore(map)` re-renders all consumers globally; reading `map[key]`
+ * through `useSyncExternalStore` bails out whenever the keyed array is
+ * unchanged (the stores update immutably per key). Returns a shared empty array
+ * when the key is null/absent.
+ *
+ * Note: only helps stores whose per-key arrays are referentially stable across
+ * unrelated writes (plain atoms with immutable per-key updates). A `computed`
+ * that rebuilds the whole map churns every slice — use a presence/edge selector
+ * there instead.
+ */
+export function useSessionSlice<T>(store: SliceStore<T>, key: string | null): T[] {
+  return useSyncExternalStore(
+    onChange => store.listen(onChange),
+    () => (key ? (store.get()[key] ?? (EMPTY as unknown as T[])) : (EMPTY as unknown as T[]))
+  )
+}