basalt-ui 1.41.0 → 2.0.0

package/src/agent/use-agent-stream.ts

@@ -1,154 +0,0 @@
-/**
- * useAgentStream — React hook managing the full lifecycle of a streaming agent conversation turn.
- *
- * Accepts an injected AgentTransport and returns reactive state (parts, status, error) plus
- * control handlers (send, stop, regenerate). AbortController integration enables clean
- * mid-stream cancellation. SSR-safe — no window access at module or hook top level.
- *
- * Rules of hooks are satisfied: all hooks are called unconditionally at the top level of the
- * returned function; no conditional hook invocations.
- *
- * @example
- * import { useAgentStream, edenTransport, type AgentPart } from 'basalt-ui/agent'
- *
- * const transport = edenTransport<AgentPart>((input, signal) =>
- *   api.chat.post({ body: { message: input }, fetch: { signal } }),
- * )
- *
- * function ChatPanel() {
- *   const { parts, status, send, stop, regenerate } = useAgentStream({ transport })
- *   return (
- *     <div>
- *       <PartList parts={parts} />
- *       {status === 'streaming' && <button onClick={stop}>Stop</button>}
- *       <button onClick={() => send('Hello')}>Send</button>
- *     </div>
- *   )
- * }
- */
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { mintThreadId, withPartIds } from './id'
-import { isStartPart } from './parts'
-import { mergePart } from './merge'
-import type { PartLike } from './merge'
-import type { AgentPart } from './parts'
-import type { AgentTransport } from './transport'
-
-// ── StreamStatus ──────────────────────────────────────────────────────────────
-
-/** The lifecycle state of the current stream. */
-export type StreamStatus = 'idle' | 'streaming' | 'done' | 'error'
-
-// ── useAgentStream return type ────────────────────────────────────────────────
-
-export type UseAgentStreamReturn<TPart, TInput> = {
-  /** Accumulated parts from the current (or last completed) stream. */
-  readonly parts: TPart[]
-  /** Current lifecycle status. */
-  readonly status: StreamStatus
-  /** The error thrown during the last failed stream, or undefined. */
-  readonly error: unknown
-  /**
-   * Start a new stream for the given input. Resets parts and status, aborts any in-flight stream,
-   * and accumulates new parts as they arrive.
-   */
-  readonly send: (input: TInput) => Promise<void>
-  /** Abort the in-flight stream (no-op when idle or done). */
-  readonly stop: () => void
-  /** Re-run the last input. No-op if no input has been sent yet. */
-  readonly regenerate: () => Promise<void>
-}
-
-// ── useAgentStream ────────────────────────────────────────────────────────────
-
-/**
- * Manages a single streaming agent turn over an injected {@link AgentTransport}.
- *
- * @example
- * const { parts, status, send, stop } = useAgentStream({ transport: myTransport })
- * await send('What is the capital of France?')
- * // parts accumulates as the stream arrives
- * // status: 'idle' → 'streaming' → 'done' (or 'error')
- */
-export function useAgentStream<TPart extends PartLike = AgentPart, TInput = string>({
-  transport,
-}: {
-  transport: AgentTransport<TPart, TInput>
-}): UseAgentStreamReturn<TPart, TInput> {
-  const [parts, setParts] = useState<TPart[]>([])
-  const [status, setStatus] = useState<StreamStatus>('idle')
-  const [error, setError] = useState<unknown>(undefined)
-
-  // Refs: mutable per-render state that must not trigger re-renders.
-  const controllerRef = useRef<AbortController | null>(null)
-  const lastInputRef = useRef<TInput | undefined>(undefined)
-
-  // Abort any in-flight stream on unmount to stop the async generator.
-  useEffect(
-    () => () => {
-      controllerRef.current?.abort()
-    },
-    [],
-  )
-
-  const send = useCallback(
-    async (input: TInput): Promise<void> => {
-      // Abort any in-flight stream.
-      controllerRef.current?.abort()
-      const controller = new AbortController()
-      controllerRef.current = controller
-
-      lastInputRef.current = input
-      setParts([])
-      setError(undefined)
-      setStatus('streaming')
-
-      // Per-send namespace: this hook has no thread/session id to key off, and each send() call
-      // fully resets `parts` anyway, so a fresh id per call is enough to keep two id-less drafts
-      // ARRIVING WITHIN THE SAME SEND from colliding on `undefined === undefined` in mergePart (the
-      // F1 bug — text→tool→text destroying each other). Not a replay mechanism — this hook has no
-      // resume() path — see withPartIds' own doc for why it can't be one anyway. Low collision
-      // cost (this hook persists nothing — `parts` is discarded on the next send()/unmount), so
-      // `mintThreadId` — never `mintMessageId` — is the right rung-3 behavior here: this must not
-      // throw on a host with no usable crypto at all.
-      const runId = mintThreadId()
-
-      try {
-        for await (const part of withPartIds(runId, transport.stream(input, controller.signal))) {
-          // Guard: if a newer send() has superseded this stream, stop updating state.
-          if (controllerRef.current !== controller) return
-          if (controller.signal.aborted) break
-          // StartPart is a no-op signal (run id + resume token), not renderable content — this
-          // hook has no persistence layer to resume across, so just skip it.
-          if (isStartPart(part)) continue
-          setParts((prev) => mergePart(prev, part))
-        }
-        // Only mark done if this stream is still the current one and wasn't aborted.
-        if (controllerRef.current === controller && !controller.signal.aborted) setStatus('done')
-      } catch (err) {
-        // Ignore abort errors — they are intentional (stop() was called or superseded).
-        if (err instanceof Error && err.name === 'AbortError') return
-        // Guard: don't corrupt state if a newer stream has taken over.
-        if (controllerRef.current !== controller) return
-        // Guard: don't overwrite a user-cancelled 'done' if the signal was aborted (e.g. stop()
-        // aborted the controller before a non-AbortError propagated from the transport).
-        if (controller.signal.aborted) return
-        setError(err)
-        setStatus('error')
-      }
-    },
-    [transport],
-  )
-
-  const stop = useCallback((): void => {
-    controllerRef.current?.abort()
-    setStatus('done')
-  }, [])
-
-  const regenerate = useCallback(async (): Promise<void> => {
-    if (lastInputRef.current === undefined) return
-    await send(lastInputRef.current)
-  }, [send])
-
-  return { parts, status, error, send, stop, regenerate }
-}

package/src/agent-chat/index.ts

@@ -1,54 +0,0 @@
-/**
- * Mantine-styled thread-chat components over the headless `basalt-ui/agent` layer, capped by the
- * flagship `ThreadWorkspace` composite.
- *
- * This module is Mantine-coupled by design and ships its own `basalt-ui/agent-chat` subpath
- * (also re-exported from the root entry, unchanged for existing consumers) — unlike
- * `basalt-ui/agent`, which stays headless so it can be styled by any consumer.
- *
- * @example
- * import { ThreadWorkspace } from 'basalt-ui/agent-chat'
- * import { createThreadsStore, edenTransport, heuristicOutcome } from 'basalt-ui/agent'
- */
-
-// ── ThreadWorkspace (flagship composite) ──────────────────────────────────────
-export { ThreadWorkspace } from './thread-workspace'
-export type { ThreadWorkspaceProps } from './thread-workspace'
-
-// ── ThreadFeed ────────────────────────────────────────────────────────────────
-export { ThreadFeed } from './thread-feed'
-export type { ThreadFeedProps } from './thread-feed'
-
-// ── ThreadFeedRow ─────────────────────────────────────────────────────────────
-export { ThreadFeedRow } from './thread-feed-row'
-export type { ThreadFeedRowProps } from './thread-feed-row'
-
-// ── Shared transcript/row contracts ───────────────────────────────────────────
-// Type-only. Both are named in the PUBLIC props of components exported above
-// (`ThreadTranscriptProps.affordances`, `ThreadFeedRowProps`'s height union), so a consumer that
-// wants to hold one in a typed variable needs to be able to name it. No runtime export here — the
-// resolution/defaults live inside the components. `RowHeightProps` (B3) is `ThreadFeedRow`'s OWN
-// height contract — a superset of `VirtualizeProps` that also allows `height` without
-// `virtualize` — kept alongside it for the same reason.
-export type { MessageAffordances } from './message-affordances'
-export type { RowHeightProps, VirtualizeOptions, VirtualizeProps } from './virtualize'
-
-// ── ThreadOutcomeCard ─────────────────────────────────────────────────────────
-export { ThreadOutcomeCard } from './thread-outcome-card'
-export type { ThreadOutcomeCardProps } from './thread-outcome-card'
-
-// ── ThreadDetailPanel ─────────────────────────────────────────────────────────
-export { ThreadDetailPanel } from './thread-detail-panel'
-export type { ThreadDetailPanelProps } from './thread-detail-panel'
-
-// ── Composer ──────────────────────────────────────────────────────────────────
-export { Composer } from './composer'
-export type { ComposerAttachment, ComposerHandle, ComposerProps, ComposerSubmit } from './composer'
-
-// ── threadPartRenderers + ThreadTranscript ────────────────────────────────────
-export { threadPartRenderers, ThreadTranscript } from './thread-message'
-export type { ThreadTranscriptProps } from './thread-message'
-
-// ── ToolChip ──────────────────────────────────────────────────────────────────
-export { ToolChip } from './tool-chip'
-export type { ToolChipProps } from './tool-chip'

package/src/agent-chat/thread-detail-panel.tsx

@@ -1,201 +0,0 @@
-/**
- * ThreadDetailPanel — the right-hand pane rendering one open thread's transcript + composer.
- *
- * A plain pane (Box), NOT a Modal — the feed/detail split reads via the `divider` token rather
- * than a card border (docs/DESIGN-SPEC.md §5); the composite that wires this up owns responsive
- * collapse/layout decisions. The header shares a `layoutId` (thread.id) with `ThreadOutcomeCard`
- * so opening a thread reads as one continuous shared-element FLIP transition rather than a swap.
- * Pure and prop-driven: no store, no fetching — `onSend`/`onStop`/`onClose`/`onRetry` are the
- * only seams.
- *
- * @example
- * import { ThreadDetailPanel } from 'basalt-ui'
- *
- * <ThreadDetailPanel
- *   thread={activeThread}
- *   liveParts={liveParts}
- *   runStatus={runStatus}
- *   onSend={send}
- *   onStop={stop}
- *   onClose={() => select(null)}
- * />
- */
-import { ActionIcon, Alert, Box, Button, Divider, Flex, Stack, Text } from '@mantine/core'
-import { useReducedMotion } from '@mantine/hooks'
-import { motion } from 'motion/react'
-import type { JSX } from 'react'
-import type { AgentPart, AgentThread, StreamStatus } from '../agent'
-import { BasaltStickToBottom } from '../agent'
-import { cx } from '../common/props'
-import type { BasaltProps } from '../common/props'
-import { MOTION_SPRING } from '../common/motion'
-import { Composer } from './composer'
-import { ThreadTranscript } from './thread-message'
-import { VX } from '../tokens'
-
-function CloseGlyph(): JSX.Element {
-  return (
-    <svg width={16} height={16} viewBox="0 0 24 24" fill="none" aria-hidden>
-      <path
-        d="M18 6l-12 12M6 6l12 12"
-        stroke="currentColor"
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-function EmptyPanel({ className, style }: BasaltProps): JSX.Element {
-  return (
-    <Box p="xl" className={cx(className)} style={{ height: '100%', ...style }}>
-      <Stack align="center" justify="center" gap={4} h="100%">
-        <Text fw={550} style={{ fontFamily: 'var(--basalt-font-head)', fontStretch: '88%' }}>
-          No thread selected
-        </Text>
-        <Text size="sm" c="dimmed" ta="center">
-          Pick a thread from the feed to see its transcript.
-        </Text>
-      </Stack>
-    </Box>
-  )
-}
-
-/** The header label for an open thread: its resolved outcome title, else its opening prompt. */
-function threadLabel(thread: AgentThread): string {
-  if (thread.outcome !== null && thread.outcome.title.length > 0) return thread.outcome.title
-  const firstUser = thread.messages.find((message) => message.role === 'user')
-  if (firstUser === undefined) return 'Untitled'
-  const text = firstUser.parts
-    .filter((part): part is Extract<AgentPart, { type: 'text' }> => part.type === 'text')
-    .map((part) => part.text)
-    .join('')
-    .trim()
-  return text.length > 0 ? text : 'Untitled'
-}
-
-export type ThreadDetailPanelProps = BasaltProps & {
-  /** The open thread, or null when nothing is selected (renders an empty-state hint). */
-  readonly thread: AgentThread | null
-  /** The live (in-flight) assistant turn's parts for this thread, if a run is streaming. */
-  readonly liveParts?: AgentPart[]
-  /** The live run's status — gates the composer and shows the Stop action while streaming. */
-  readonly runStatus?: StreamStatus
-  readonly onSend: (text: string) => void
-  readonly onStop: () => void
-  readonly onClose: () => void
-  /**
-   * Replay the last user input on this thread. When provided, a "Retry" action appears in the
-   * failed-run alert; omit it to render the alert without a retry affordance.
-   */
-  readonly onRetry?: () => void
-}
-
-/**
- * The detail pane for one open thread: header (title + close), transcript body in an
- * auto-scrolling container, and a footer composer (with a Stop action while streaming).
- *
- * @example
- * <ThreadDetailPanel thread={thread} runStatus={runStatus} onSend={send} onStop={stop} onClose={close} />
- */
-export function ThreadDetailPanel({
-  thread,
-  liveParts,
-  runStatus,
-  onSend,
-  onStop,
-  onClose,
-  onRetry,
-  className,
-  style,
-}: ThreadDetailPanelProps): JSX.Element {
-  const reduceMotion = useReducedMotion()
-
-  if (thread === null) return <EmptyPanel className={className} style={style} />
-
-  const streaming = runStatus === 'streaming'
-
-  const panel = (
-    <Flex direction="column" h="100%" className={cx(className)} style={style}>
-      <Flex p="sm" align="center" justify="space-between">
-        <Text
-          fw={550}
-          lineClamp={1}
-          style={{
-            fontFamily: 'var(--basalt-font-head)',
-            fontSize: VX.text.md,
-            fontStretch: '88%',
-          }}
-        >
-          {threadLabel(thread)}
-        </Text>
-        <ActionIcon variant="subtle" color="gray" onClick={onClose} aria-label="Close thread">
-          <CloseGlyph />
-        </ActionIcon>
-      </Flex>
-      <Divider color="var(--vx-divider)" />
-      <Box style={{ flex: 1, minHeight: 0 }}>
-        <BasaltStickToBottom
-          style={{
-            height: '100%',
-            // theme-allow raw-scroll-container — BasaltStickToBottom owns this scroll node (see stick-to-bottom.tsx).
-            overflowY: 'auto',
-            padding: 'var(--vx-space-agent-transcript-inset)',
-          }}
-        >
-          <ThreadTranscript
-            messages={thread.messages}
-            {...(liveParts !== undefined ? { liveParts } : {})}
-            {...(runStatus !== undefined ? { liveStatus: runStatus } : {})}
-          />
-          {thread.status === 'error' && (
-            <Alert color="red" variant="light" mt="md">
-              <Stack gap="xs" align="flex-start">
-                <Text size="sm">This run didn’t finish. Try sending the message again.</Text>
-                {onRetry !== undefined && (
-                  <Button size="compact-sm" variant="light" color="red" onClick={onRetry}>
-                    Retry
-                  </Button>
-                )}
-              </Stack>
-            </Alert>
-          )}
-          {thread.status === 'interrupted' && (
-            <Alert color="yellow" variant="light" mt="md">
-              Interrupted — resend to continue.
-            </Alert>
-          )}
-        </BasaltStickToBottom>
-      </Box>
-      <Divider color="var(--vx-divider)" />
-      <Box p="sm">
-        <Stack gap="xs">
-          {/* `onSend` stays a plain string at this component's public seam — the payload shape is
-              unwrapped here rather than pushed onto every caller. */}
-          <Composer onSubmit={({ text }) => onSend(text)} streaming={streaming} />
-          {streaming && (
-            <Button size="compact-sm" variant="subtle" color="red" onClick={onStop}>
-              Stop
-            </Button>
-          )}
-        </Stack>
-      </Box>
-    </Flex>
-  )
-
-  if (reduceMotion) return panel
-
-  // Keyed by thread.id so opening/switching threads re-mounts and slides the new content in.
-  return (
-    <motion.div
-      key={thread.id}
-      initial={{ opacity: 0, x: 12 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={MOTION_SPRING}
-      style={{ height: '100%' }}
-    >
-      {panel}
-    </motion.div>
-  )
-}

package/src/agent-chat/thread-workspace.tsx

@@ -1,279 +0,0 @@
-/**
- * ThreadWorkspace — the flagship, ready-to-use two-pane thread-chat composite.
- *
- * Composes `ThreadFeed` + a new-thread `Composer` (left/main pane) with `ThreadDetailPanel`
- * (right pane) over `useAgentThreadRuns`, so a consumer wires one component instead of hand-
- * assembling the pieces. Responsive: wide viewports show both panes side by side; narrow
- * viewports (the `compact` size class, < 840px) show exactly one — the feed when no thread is open, a full-screen
- * detail panel once one is.
- *
- * `useThreads` is a prop, not called internally, because `createThreadsStore` must be invoked
- * ONCE at module scope (see the doctrine on `createThreadsStore` in `../agent`) — the consumer
- * owns that module-scope call and passes the resulting hook in here.
- *
- * @example
- * import { ThreadWorkspace } from 'basalt-ui'
- * import { createThreadsStore, edenTransport, heuristicOutcome } from 'basalt-ui/agent'
- *
- * // Module scope — called ONCE:
- * const useThreads = createThreadsStore({ key: 'main-threads', version: 1 })
- * const transport = edenTransport((input, signal) =>
- *   api.chat.post({ body: { message: input }, fetch: { signal } }),
- * )
- *
- * function Inbox() {
- *   return (
- *     <ThreadWorkspace
- *       useThreads={useThreads}
- *       transport={transport}
- *       resolveOutcome={heuristicOutcome}
- *       newThreadPlaceholder="Start a new conversation…"
- *     />
- *   )
- * }
- */
-import { Box, Divider, Flex, Skeleton, Stack, Text } from '@mantine/core'
-import type { JSX, ReactNode } from 'react'
-import type { AgentPart, AgentTransport, OutcomeResolver, ThreadsStore } from '../agent'
-import { useAgentThreadRuns } from '../agent'
-import { cx } from '../common/props'
-import type { BasaltProps, SlotStylesProps } from '../common/props'
-import { assertRequiredProps } from '../common/validate'
-import { useSizeClass } from '../shell/use-size-class'
-import { VX } from '../tokens'
-import { Composer } from './composer'
-import { ThreadDetailPanel } from './thread-detail-panel'
-import { ThreadFeed } from './thread-feed'
-
-const DETAIL_PANEL_WIDTH = 'clamp(440px, 40%, 520px)'
-
-// Static across every instance, so it stays a module-level constant rather than a per-render
-// literal, letting the no-override case keep a stable reference.
-const FULL_HEIGHT_STYLE = { height: '100%' } as const
-
-/** The four boxes `ThreadWorkspace` paints: `root` is the outermost pane split, `feed` is the
- * thread-list pane, `composer` is the new-thread composer pinned under the feed, `detail` is the
- * right-hand (or, in the `compact` size class, full-screen) open-thread pane. */
-export type ThreadWorkspaceSlot = 'root' | 'feed' | 'composer' | 'detail'
-
-export type ThreadWorkspaceProps = BasaltProps &
-  SlotStylesProps<ThreadWorkspaceSlot> & {
-    /**
-     * The thread-store hook, created ONCE at module scope via `createThreadsStore` and passed in —
-     * ThreadWorkspace must not call `createThreadsStore` itself.
-     */
-    readonly useThreads: () => ThreadsStore
-    /** The injected transport seam — one stream per `start()` call. */
-    readonly transport: AgentTransport<AgentPart, string>
-    /** Distills a finished thread into a feed-ready `AgentOutcome`. */
-    readonly resolveOutcome: OutcomeResolver<AgentPart>
-    /** Placeholder for the new-thread composer pinned under the feed. */
-    readonly newThreadPlaceholder?: string
-    /**
-     * Rendered in place of the feed once the store is hydrated and there really are no threads.
-     * Shown ONLY when `store.hydrated` is true — while an async store's initial load is still in
-     * flight, `ThreadWorkspace` holds a neutral loading state instead (see `FeedHydratingState`),
-     * so a server-backed workspace never asserts "no threads yet" before it actually knows that.
-     */
-    readonly emptyState?: ReactNode
-    /**
-     * Rendered in place of the feed when the store's initial load has failed — `!store.hydrated &&
-     * store.error !== undefined` (see `ThreadsStore.hydrated`'s doc for the discriminant). Shown
-     * instead of `FeedHydratingState`, so a rejected `listThreads` surfaces a legible failure rather
-     * than an endless skeleton.
-     */
-    readonly errorState?: ReactNode
-  }
-
-/** Default hint shown in the feed pane once hydrated with no threads (overridable via `emptyState`). */
-function FeedEmptyState(): JSX.Element {
-  return (
-    <Stack align="center" justify="center" gap={4} h="100%" p="xl">
-      <Text fw={600} size="sm">
-        No threads yet
-      </Text>
-      <Text size="xs" c="dimmed" ta="center">
-        Send a message below to start your first thread.
-      </Text>
-    </Stack>
-  )
-}
-
-/**
- * Neutral hold shown in the feed pane while an async store's initial `listThreads` is still in
- * flight, has no threads to show yet, AND has not failed (`!store.hydrated && threads.length ===
- * 0 && store.error === undefined`). Never shown for the synchronous `createThreadsStore`, whose
- * `hydrated` is always `true` — see `ThreadsStore.hydrated`'s doc. A store that already holds
- * cached threads while revalidating (`!hydrated` with a non-empty `threads`) skips this entirely
- * and renders the feed normally. A failed load renders `FeedErrorState` instead of this.
- */
-function FeedHydratingState(): JSX.Element {
-  return (
-    <Stack gap="sm" p="sm" data-testid="thread-workspace-hydrating">
-      <Skeleton height={54} radius="sm" />
-      <Skeleton height={54} radius="sm" />
-      <Skeleton height={54} radius="sm" />
-    </Stack>
-  )
-}
-
-/**
- * Default failure hold shown in the feed pane when an async store's initial `listThreads` has
- * rejected (`!store.hydrated && store.error !== undefined`), overridable via `errorState`. Never
- * shown for the synchronous `createThreadsStore`, whose `error` is always `undefined` — see
- * `ThreadsStore.error`'s doc.
- */
-function FeedErrorState(): JSX.Element {
-  return (
-    <Stack
-      align="center"
-      justify="center"
-      gap={4}
-      h="100%"
-      p="xl"
-      data-testid="thread-workspace-error"
-    >
-      <Text fw={600} size="sm" style={{ color: VX.status.bad }}>
-        Couldn&apos;t load threads
-      </Text>
-      <Text size="xs" c="dimmed" ta="center">
-        Something went wrong loading your threads. Try refreshing the page.
-      </Text>
-    </Stack>
-  )
-}
-
-/**
- * A two-pane master-detail thread workspace: a scrollable feed of threads with an anchored
- * new-thread composer, and a detail panel for the open thread's live transcript. Collapses to a
- * single pane in the `compact` size class (< 840px).
- *
- * @example
- * <ThreadWorkspace useThreads={useThreads} transport={transport} resolveOutcome={heuristicOutcome} />
- */
-export function ThreadWorkspace({
-  useThreads,
-  transport,
-  resolveOutcome,
-  newThreadPlaceholder,
-  emptyState,
-  errorState,
-  className,
-  style,
-  classNames,
-}: ThreadWorkspaceProps): JSX.Element {
-  assertRequiredProps('ThreadWorkspace', { useThreads }, ['useThreads'])
-  const store = useThreads()
-  const runs = useAgentThreadRuns({ transport, store, resolveOutcome })
-  // Narrow = the compact size class — the same viewport axis as the shell, and SSR/first-frame
-  // correct (the provider's `sizeClassHint` is the server snapshot, no post-mount flip).
-  const narrow = useSizeClass() === 'compact'
-
-  const threads = store.threads
-  const activeThread = threads.find((thread) => thread.id === store.activeId) ?? null
-  const activeRun = store.activeId !== null ? runs.runs.get(store.activeId) : undefined
-  const liveParts = activeRun?.parts
-
-  const handleSelect = (id: string): void => {
-    store.select(id)
-    store.markRead(id)
-  }
-
-  const handleNewThread = (text: string): void => {
-    const id = store.create()
-    store.select(id)
-    store.markRead(id)
-    runs.start(id, text)
-  }
-
-  const handleSend = (text: string): void => {
-    if (store.activeId === null) return
-    runs.start(store.activeId, text)
-  }
-
-  const handleStop = (): void => {
-    if (store.activeId === null) return
-    runs.stop(store.activeId)
-  }
-
-  const handleRetry = (): void => {
-    if (store.activeId === null) return
-    runs.retry(store.activeId)
-  }
-
-  // A plain pane, NOT a card — the feed's own rows carry the card idiom (docs/DESIGN-SPEC.md §5),
-  // so this pane stays flush with the page and the feed/detail split reads via the divider token.
-  const feed = (
-    <Flex
-      direction="column"
-      h="100%"
-      className={cx(classNames?.feed)}
-      style={{ overflow: 'hidden' }}
-    >
-      <Box style={{ flex: 1, minHeight: 0 }}>
-        {threads.length === 0 ? (
-          store.hydrated ? (
-            (emptyState ?? <FeedEmptyState />)
-          ) : store.error !== undefined ? (
-            (errorState ?? <FeedErrorState />)
-          ) : (
-            <FeedHydratingState />
-          )
-        ) : (
-          <ThreadFeed threads={threads} activeId={store.activeId} onSelect={handleSelect} />
-        )}
-      </Box>
-      <Divider color="var(--vx-divider)" />
-      <Box p="sm">
-        <Composer
-          onSubmit={({ text }) => handleNewThread(text)}
-          {...(newThreadPlaceholder !== undefined ? { placeholder: newThreadPlaceholder } : {})}
-          {...(classNames?.composer !== undefined && { className: classNames.composer })}
-        />
-      </Box>
-    </Flex>
-  )
-
-  const detail = (
-    <ThreadDetailPanel
-      thread={activeThread}
-      {...(liveParts !== undefined ? { liveParts } : {})}
-      {...(activeRun !== undefined ? { runStatus: activeRun.status } : {})}
-      onSend={handleSend}
-      onStop={handleStop}
-      onRetry={handleRetry}
-      onClose={() => store.select(null)}
-      {...(classNames?.detail !== undefined && { className: classNames.detail })}
-    />
-  )
-
-  if (narrow) {
-    return (
-      <Box
-        className={cx(classNames?.root, className)}
-        style={style ? { ...FULL_HEIGHT_STYLE, ...style } : FULL_HEIGHT_STYLE}
-      >
-        {store.activeId !== null ? detail : feed}
-      </Box>
-    )
-  }
-
-  return (
-    <Flex
-      className={cx(classNames?.root, className)}
-      style={style ? { ...FULL_HEIGHT_STYLE, ...style } : FULL_HEIGHT_STYLE}
-      gap="md"
-    >
-      <Box
-        style={{
-          flex: 1,
-          minWidth: 0,
-          borderRight: '1px solid var(--vx-divider)',
-        }}
-      >
-        {feed}
-      </Box>
-      <Box style={{ width: DETAIL_PANEL_WIDTH, flexShrink: 0 }}>{detail}</Box>
-    </Flex>
-  )
-}