basalt-ui 1.27.0 → 1.29.0

package/src/agent-chat/relative-time.ts

@@ -7,6 +7,7 @@
  *
  * Internal to `agent-chat/` — not part of the public barrel.
  */
+import { isDev } from '../common/is-dev'
 
 const RELATIVE_TIME_FORMAT = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
 
@@ -40,7 +41,7 @@ const RELATIVE_TIME_UNITS: readonly {
  */
 export function formatRelativeTime(timestamp: number): string {
   if (!Number.isFinite(timestamp)) {
-    if (process.env['NODE_ENV'] !== 'production') {
+    if (isDev()) {
       console.warn(
         `[basalt] formatRelativeTime: non-finite timestamp ${String(timestamp)} — rendering empty string`,
       )

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

@@ -26,7 +26,9 @@ import { motion } from 'motion/react'
 import type { JSX } from 'react'
 import type { AgentPart, AgentThread, StreamStatus } from '../agent'
 import { BasaltStickToBottom } from '../agent'
-import { MOTION_SPRING } from '../motion'
+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'
@@ -45,9 +47,9 @@ function CloseGlyph(): JSX.Element {
   )
 }
 
-function EmptyPanel(): JSX.Element {
+function EmptyPanel({ className, style }: BasaltProps): JSX.Element {
   return (
-    <Box p="xl" style={{ height: '100%' }}>
+    <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
@@ -73,7 +75,7 @@ function threadLabel(thread: AgentThread): string {
   return text.length > 0 ? text : 'Untitled'
 }
 
-export type ThreadDetailPanelProps = {
+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. */
@@ -105,15 +107,17 @@ export function ThreadDetailPanel({
   onStop,
   onClose,
   onRetry,
+  className,
+  style,
 }: ThreadDetailPanelProps): JSX.Element {
   const reduceMotion = useReducedMotion()
 
-  if (thread === null) return <EmptyPanel />
+  if (thread === null) return <EmptyPanel className={className} style={style} />
 
   const streaming = runStatus === 'streaming'
 
   const panel = (
-    <Flex direction="column" h="100%">
+    <Flex direction="column" h="100%" className={cx(className)} style={style}>
       <Flex p="sm" align="center" justify="space-between">
         <Text
           fw={550}

package/src/agent-chat/thread-feed-row.tsx

@@ -33,24 +33,29 @@
  * />
  */
 import { Box, Group, Stack, Text, UnstyledButton } from '@mantine/core'
-import type { JSX } from 'react'
+import type { JSX, ReactNode } from 'react'
 import { useState } from 'react'
 import type {
   AgentThread,
+  ChatMessage,
   ForeignPart,
   PartRenderer,
   PartRenderers,
   StreamStatus,
   TranscriptPart,
 } from '../agent'
+import { BasaltStickToBottom } from '../agent'
+import { cx } from '../common/props'
+import type { BasaltProps, SlotStylesProps } from '../common/props'
+import { assertRequiredProps } from '../common/validate'
 import { VX } from '../tokens'
 import type { ComposerProps, ComposerSubmit } from './composer'
 import { Composer } from './composer'
 import type { MessageAffordances } from './message-affordances'
 import { formatRelativeTime } from './relative-time'
 import { ThreadTranscript } from './thread-message'
-import { resolveVirtualize } from './virtualize'
-import type { VirtualizeProps } from './virtualize'
+import { resolveRowHeight } from './virtualize'
+import type { RowHeightProps, VirtualizeProps } from './virtualize'
 
 /** A minimal, dependency-free chevron — rotates 90deg when expanded (same inline-svg idiom as
  * `composer.tsx`'s `SendGlyph`/`StopGlyph`: no icon-library dependency for a one-off glyph). */
@@ -79,6 +84,15 @@ function ChevronGlyph({ expanded }: { expanded: boolean }): JSX.Element {
   )
 }
 
+// Card idiom (docs/DESIGN-SPEC.md §5) — static across every row, so it stays a module-level
+// constant rather than a per-render literal, letting the no-override case keep a stable reference.
+const CARD_STYLE = {
+  borderRadius: VX.radiusCard,
+  boxShadow: VX.shadowCard,
+  backgroundColor: VX.surface.panel,
+  overflow: 'hidden',
+} as const
+
 type ThreadFeedRowBase = {
   /**
    * The thread this row projects. Typed against `AgentThread<TranscriptPart>` — not the plain,
@@ -94,6 +108,30 @@ type ThreadFeedRowBase = {
   readonly expanded: boolean
   /** Called with the thread's id when the header is clicked/activated. */
   readonly onToggle: (id: string) => void
+  /**
+   * Header title override. Falls back to `thread.outcome?.title ?? 'Untitled thread'` (today's
+   * behavior, unchanged) when omitted. For a server-titled thread whose title is never distilled
+   * into a basalt `AgentOutcome` (argo's hermes-chat S4 — title/summary/type/pin are server-owned
+   * and never guessed client-side), pass it directly instead of forcing an outcome shape onto data
+   * that never had one.
+   */
+  readonly title?: string
+  /** Header summary override, same fallback rule as `title` (`thread.outcome?.summary ?? ''`). */
+  readonly summary?: string
+  /** Rendered at the START of the header row, before the title/summary stack — a pin icon, a type
+   * badge (argo's hermes-chat S5). Absent by default; renders nothing extra when omitted. */
+  readonly headerLeft?: ReactNode
+  /** Rendered at the END of the header row, before the timestamp and chevron — a collapsed-only
+   * streaming indicator (argo's hermes-chat S5). Absent by default; renders nothing extra when
+   * omitted. */
+  readonly headerRight?: ReactNode
+  /**
+   * Overrides the transcript source: when provided, the row renders THESE messages instead of
+   * reading `thread.messages` directly (argo's hermes-chat S6 — the confirmed transcript is an
+   * optimistic-overlay MERGE over the store's messages, not the store's messages verbatim).
+   * Defaults to `thread.messages`.
+   */
+  readonly messages?: readonly ChatMessage<TranscriptPart>[]
   /** The live (in-flight) assistant turn's parts, when a run is streaming for this thread. */
   readonly liveParts?: readonly TranscriptPart[]
   /** The live run's status — drives the in-progress indicator on the live block. */
@@ -125,16 +163,29 @@ type ThreadFeedRowBase = {
  * `virtualize`/`height` are forwarded straight to the row's `ThreadTranscript`, carrying the same
  * union guard: an inline row holding a very long thread can window it, and doing so REQUIRES a
  * `height` (the transcript then owns a fixed-height scroll node inside the expanded body, instead
- * of the body growing to the thread's full length). Omit both and the row's transcript is
- * content-sized, as before.
+ * of the body growing to the thread's full length). `height` alone (no `virtualize`) is B3's
+ * bounded-but-not-virtualized mode — see `RowHeightProps`'s own doc. Omit both and the row's
+ * transcript is content-sized, as before.
  */
-export type ThreadFeedRowProps = ThreadFeedRowBase & VirtualizeProps
+export type ThreadFeedRowProps = ThreadFeedRowBase &
+  RowHeightProps &
+  SlotStylesProps<'root' | 'header' | 'body'> &
+  BasaltProps
+
+/** The row header's title: the `title` prop override, else the resolved outcome title, else a
+ * plain placeholder — this row never falls back to scanning the first user message the way
+ * `ThreadOutcomeCard`'s `promptOf` does, since an inline row's own expanded transcript already
+ * shows that prompt a scroll away. */
+function rowTitle(thread: AgentThread<TranscriptPart>, titleOverride: string | undefined): string {
+  return titleOverride ?? thread.outcome?.title ?? 'Untitled thread'
+}
 
-/** The row header's title: the resolved outcome title, else a plain placeholder — this row never
- * falls back to scanning the first user message the way `ThreadOutcomeCard`'s `promptOf` does,
- * since an inline row's own expanded transcript already shows that prompt a scroll away. */
-function rowTitle(thread: AgentThread<TranscriptPart>): string {
-  return thread.outcome?.title ?? 'Untitled thread'
+/** The row header's summary: the `summary` prop override, else the resolved outcome summary. */
+function rowSummary(
+  thread: AgentThread<TranscriptPart>,
+  summaryOverride: string | undefined,
+): string {
+  return summaryOverride ?? thread.outcome?.summary ?? ''
 }
 
 /**
@@ -150,6 +201,11 @@ export function ThreadFeedRow(props: ThreadFeedRowProps): JSX.Element {
     thread,
     expanded,
     onToggle,
+    title,
+    summary: summaryOverride,
+    headerLeft,
+    headerRight,
+    messages,
     liveParts,
     liveStatus,
     renderers,
@@ -159,13 +215,21 @@ export function ThreadFeedRow(props: ThreadFeedRowProps): JSX.Element {
     onSend,
     onStop,
     composerProps,
+    classNames,
+    className,
+    style,
   } = props
+  assertRequiredProps('ThreadFeedRow', { thread }, ['thread'])
 
   // Resolved through the shared narrowing point rather than by destructuring `virtualize`/`height`
-  // apart — see `resolveVirtualize`'s doc for why the two must be read together.
-  const virtualized = resolveVirtualize(props)
+  // apart — see `resolveRowHeight`'s doc for why the two must be read together, and why it is a
+  // three-way (virtualized / bounded / content-sized) resolve rather than `resolveVirtualize`'s
+  // binary one (B3 adds the 'bounded' branch).
+  const rowHeight = resolveRowHeight(props)
   const virtualizeProps: VirtualizeProps =
-    virtualized === null ? {} : { virtualize: virtualized.options, height: virtualized.height }
+    rowHeight.kind === 'virtualized'
+      ? { virtualize: rowHeight.virtualize.options, height: rowHeight.virtualize.height }
+      : {}
 
   // Lazy-mount + keep-mounted: flips true on the row's first expand and never resets. Everything
   // below this line renders — once — the first time `expanded` becomes true, and stays in the tree
@@ -182,7 +246,9 @@ export function ThreadFeedRow(props: ThreadFeedRowProps): JSX.Element {
     setHasOpened(true)
   }
 
-  const summary = thread.outcome?.summary ?? ''
+  const resolvedTitle = rowTitle(thread, title)
+  const resolvedSummary = rowSummary(thread, summaryOverride)
+  const transcriptMessages = messages ?? thread.messages
 
   // The composer half of `liveStatus`: `Composer` only shows its Stop action and gates the
   // textarea when it is TOLD a run is streaming (`composer.tsx`'s `showStop`/`inputDisabled`) — it
@@ -190,25 +256,37 @@ export function ThreadFeedRow(props: ThreadFeedRowProps): JSX.Element {
   // Stop never rendered and a second turn could still be typed into a live thread.
   const streaming = liveStatus === 'streaming'
 
+  const transcript = (
+    <ThreadTranscript
+      messages={transcriptMessages}
+      {...(liveParts !== undefined ? { liveParts } : {})}
+      {...(liveStatus !== undefined ? { liveStatus } : {})}
+      {...(renderers !== undefined ? { renderers } : {})}
+      {...(fallbackRenderer !== undefined ? { fallbackRenderer } : {})}
+      {...(affordances !== undefined ? { affordances } : {})}
+      {...(groupConsecutive !== undefined ? { groupConsecutive } : {})}
+      {...virtualizeProps}
+    />
+  )
+
   return (
     <Box
-      style={{
-        borderRadius: VX.radiusCard,
-        boxShadow: VX.shadowCard,
-        backgroundColor: VX.surface.panel,
-        overflow: 'hidden',
-      }}
+      className={cx(classNames?.root, className)}
+      style={style ? { ...CARD_STYLE, ...style } : CARD_STYLE}
+      data-expanded={expanded}
     >
       <UnstyledButton
         onClick={() => onToggle(thread.id)}
         w="100%"
         aria-expanded={expanded}
+        {...(classNames?.header !== undefined && { className: classNames.header })}
         style={{
           display: 'block',
           padding: 'var(--mantine-spacing-xs) var(--mantine-spacing-sm)',
         }}
       >
         <Group justify="space-between" gap="xs" wrap="nowrap" align="center">
+          {headerLeft}
           <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
             <Text
               fw={550}
@@ -219,14 +297,15 @@ export function ThreadFeedRow(props: ThreadFeedRowProps): JSX.Element {
                 fontStretch: '88%',
               }}
             >
-              {rowTitle(thread)}
+              {resolvedTitle}
             </Text>
-            {summary.length > 0 && (
+            {resolvedSummary.length > 0 && (
               <Text size="xs" c="dimmed" lineClamp={1}>
-                {summary}
+                {resolvedSummary}
               </Text>
             )}
           </Stack>
+          {headerRight}
           <Text
             style={{
               fontFamily: 'var(--basalt-font-mono)',
@@ -243,6 +322,7 @@ export function ThreadFeedRow(props: ThreadFeedRowProps): JSX.Element {
       {hasOpened && (
         <Box
           data-testid="thread-feed-row-body"
+          {...(classNames?.body !== undefined && { className: classNames.body })}
           style={{
             display: expanded ? 'block' : 'none',
             padding: 'var(--mantine-spacing-sm)',
@@ -250,16 +330,19 @@ export function ThreadFeedRow(props: ThreadFeedRowProps): JSX.Element {
           }}
         >
           <Stack gap="sm">
-            <ThreadTranscript
-              messages={thread.messages}
-              {...(liveParts !== undefined ? { liveParts } : {})}
-              {...(liveStatus !== undefined ? { liveStatus } : {})}
-              {...(renderers !== undefined ? { renderers } : {})}
-              {...(fallbackRenderer !== undefined ? { fallbackRenderer } : {})}
-              {...(affordances !== undefined ? { affordances } : {})}
-              {...(groupConsecutive !== undefined ? { groupConsecutive } : {})}
-              {...virtualizeProps}
-            />
+            {rowHeight.kind === 'bounded' ? (
+              <BasaltStickToBottom
+                style={{
+                  height: rowHeight.height,
+                  // theme-allow raw-scroll-container — BasaltStickToBottom owns this scroll node (see stick-to-bottom.tsx).
+                  overflowY: 'auto',
+                }}
+              >
+                {transcript}
+              </BasaltStickToBottom>
+            ) : (
+              transcript
+            )}
             <Composer
               onSubmit={onSend}
               streaming={streaming}

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

@@ -23,7 +23,11 @@ import { AnimatePresence, motion } from 'motion/react'
 import type { JSX, ReactNode } from 'react'
 import { useEffect, useState } from 'react'
 import type { AgentThread } from '../agent'
-import { MOTION_SPRING } from '../motion'
+import { BasaltStickToBottom } from '../agent'
+import { cx } from '../common/props'
+import type { BasaltProps } from '../common/props'
+import { assertRequiredProps } from '../common/validate'
+import { MOTION_SPRING } from '../common/motion'
 import type { ComposerSubmit } from './composer'
 import { ThreadFeedRow } from './thread-feed-row'
 import { ThreadOutcomeCard } from './thread-outcome-card'
@@ -33,7 +37,7 @@ import { ThreadOutcomeCard } from './thread-outcome-card'
  * `onSend`'s doc for why an inert composer beats a live one that eats input. */
 function noopSend(): void {}
 
-export type ThreadFeedProps = {
+export type ThreadFeedProps = BasaltProps & {
   readonly threads: AgentThread[]
   /** The currently open thread id, or null when none is selected. */
   readonly activeId: string | null
@@ -66,6 +70,16 @@ export type ThreadFeedProps = {
    * (`onStop`/`liveParts`/`liveStatus`) the built-in `'inline'` row doesn't expose; see `variant`
    * and `onSend`. */
   readonly renderRow?: (thread: AgentThread) => ReactNode
+  /**
+   * Scroll anchor. `'start'` (default) is today's top-anchored `ScrollArea` feed, unchanged.
+   * `'end'` anchors the feed's growth to the BOTTOM instead — a `BasaltStickToBottom` scroll node
+   * (auto-follows the live turn, same container `ThreadDetailPanel` uses) rather than `ScrollArea`,
+   * with the row stack `justify`-ed to the end and grown to the full height so a short feed still
+   * sits at the bottom rather than floating at the top. This is what a bottom-anchored chat feed
+   * (argo's hermes-chat S15 — oldest→newest top→bottom, pinned last, `renderRow`-driven) needs
+   * instead of hand-rolling its own scroll shell around `renderRow`.
+   */
+  readonly anchor?: 'start' | 'end'
 }
 
 function defaultRow(
@@ -113,7 +127,11 @@ export function ThreadFeed({
   variant = 'outcome',
   onSend,
   renderRow,
+  anchor = 'start',
+  className,
+  style,
 }: ThreadFeedProps): JSX.Element {
+  assertRequiredProps('ThreadFeed', { threads }, ['threads'])
   const reduceMotion = useReducedMotion()
 
   // The inline row's own manual-collapse override — see `ThreadFeedProps.variant`'s doc. Only ever
@@ -147,36 +165,50 @@ export function ThreadFeed({
       ? renderRow(thread)
       : defaultRow(thread, variant, activeId, collapsedId, handleInlineToggle, onSelect, onSend)
 
-  if (reduceMotion) {
+  // B5: `anchor="end"` grows the stack to the full scroll height and pins its content to the
+  // bottom, so a feed with only a couple of threads still sits flush against the composer instead
+  // of floating at the top of an otherwise-empty ScrollArea.
+  const stackAnchorProps = anchor === 'end' ? { justify: 'flex-end' as const, mih: '100%' } : {}
+
+  const list = reduceMotion ? (
+    <Stack gap="sm" p="sm" {...stackAnchorProps}>
+      {threads.map((thread) => (
+        <Box key={thread.id}>{rowFor(thread)}</Box>
+      ))}
+    </Stack>
+  ) : (
+    <Stack gap="sm" p="sm" {...stackAnchorProps}>
+      <AnimatePresence mode="popLayout" initial={false}>
+        {threads.map((thread) => (
+          <motion.div
+            key={thread.id}
+            layout
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.97 }}
+            transition={MOTION_SPRING}
+          >
+            {rowFor(thread)}
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </Stack>
+  )
+
+  // `anchor="end"`: a `BasaltStickToBottom` scroll node instead of `ScrollArea` — it owns an
+  // initial scroll-to-end on mount and auto-follows appended content (the live turn), which a
+  // plain `ScrollArea` has no notion of.
+  if (anchor === 'end') {
     return (
-      <ScrollArea style={{ height: '100%' }}>
-        <Stack gap="sm" p="sm">
-          {threads.map((thread) => (
-            <Box key={thread.id}>{rowFor(thread)}</Box>
-          ))}
-        </Stack>
-      </ScrollArea>
+      <BasaltStickToBottom className={cx(className)} style={{ height: '100%', ...style }}>
+        {list}
+      </BasaltStickToBottom>
     )
   }
 
   return (
-    <ScrollArea style={{ height: '100%' }}>
-      <Stack gap="sm" p="sm">
-        <AnimatePresence mode="popLayout" initial={false}>
-          {threads.map((thread) => (
-            <motion.div
-              key={thread.id}
-              layout
-              initial={{ opacity: 0, y: -8 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.97 }}
-              transition={MOTION_SPRING}
-            >
-              {rowFor(thread)}
-            </motion.div>
-          ))}
-        </AnimatePresence>
-      </Stack>
+    <ScrollArea className={cx(className)} style={{ height: '100%', ...style }}>
+      {list}
     </ScrollArea>
   )
 }

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

@@ -48,6 +48,9 @@ import type {
   TranscriptPart,
 } from '../agent'
 import { coalesceParts, narrowAgentPart, PartList } from '../agent'
+import { cx } from '../common/props'
+import type { BasaltProps } from '../common/props'
+import { assertRequiredProps } from '../common/validate'
 import { Markdown } from '../content/markdown'
 import { CopyAction } from '../content/copy-action'
 import { VX } from '../tokens'
@@ -57,6 +60,7 @@ import { formatRelativeTime } from './relative-time'
 import { ToolChip } from './tool-chip'
 import { resolveVirtualize } from './virtualize'
 import type { VirtualizeOptions, VirtualizeProps } from './virtualize'
+import { isDev } from '../common/is-dev'
 
 /** The mono, uppercase, letter-spaced micro-label idiom (docs/DESIGN-SPEC.md §3) — shared by the
  * transcript's role labels and the reasoning/tool-call headers below. */
@@ -185,10 +189,11 @@ function UnknownPartChip({ part }: { part: ForeignPart }): JSX.Element {
   )
 }
 
-/** Consulted only when `ThreadTranscript` gets no `fallbackRenderer` prop. `process.env.NODE_ENV`
- * (not `import.meta.env` — basalt-ui bans it) is read INSIDE the render so tests can flip it. */
+/** Consulted only when `ThreadTranscript` gets no `fallbackRenderer` prop. `isDev()` reads
+ * `process.env.NODE_ENV` (not `import.meta.env` — basalt-ui bans it) INSIDE the render so tests can
+ * flip it. */
 const DEFAULT_FALLBACK_RENDERER: PartRenderer<ForeignPart> = ({ part }) =>
-  process.env['NODE_ENV'] !== 'production' ? <UnknownPartChip part={part} /> : null
+  isDev() ? <UnknownPartChip part={part} /> : null
 
 // ── Part resolution — the three-step order that is the whole design ───────────
 //
@@ -544,6 +549,7 @@ function areMessageBlockPropsEqual(prev: MessageBlockProps, next: MessageBlockPr
 }
 
 const MessageBlock = memo(MessageBlockImpl, areMessageBlockPropsEqual)
+MessageBlock.displayName = 'MessageBlock'
 
 // ── Virtualization (AGENT-CHAT-SPEC.md §9) ─────────────────────────────────────
 //
@@ -594,7 +600,7 @@ type TranscriptRow = {
   readonly node: JSX.Element
 }
 
-type VirtualizedTranscriptProps = {
+type VirtualizedTranscriptProps = BasaltProps & {
   readonly rows: readonly TranscriptRow[]
   readonly height: number | string
   readonly overscan: number
@@ -613,10 +619,15 @@ type VirtualizedTranscriptProps = {
  * settle a genuine unmount/remount of every rendered row, re-firing each row's effects once and
  * risking hitting a message mid-stream during the resolve window.
  */
-function NonVirtualizedRows({ rows, height }: VirtualizedTranscriptProps): JSX.Element {
+function NonVirtualizedRows({
+  rows,
+  height,
+  className,
+  style,
+}: VirtualizedTranscriptProps): JSX.Element {
   return (
     // theme-allow raw-scroll-container — degrade target owns its own scroll node, same as the real virtualizer below.
-    <Box style={{ height, overflow: 'auto' }}>
+    <Box className={cx(className)} style={{ height, overflow: 'auto', ...style }}>
       <Stack gap="sm">
         {rows.map((row) => (
           <Fragment key={row.key}>{row.node}</Fragment>
@@ -834,6 +845,8 @@ const LazyVirtualizedRows = lazy(() =>
         overscan,
         estimateSize,
         initialScroll,
+        className,
+        style,
       }: VirtualizedTranscriptProps): JSX.Element {
         const parentRef = useRef<HTMLDivElement>(null)
         const initialScrollStateRef = useRef<InitialScrollState>({
@@ -895,8 +908,12 @@ const LazyVirtualizedRows = lazy(() =>
         })
 
         return (
-          // theme-allow raw-scroll-container — TanStack Virtual measures/scrolls this element (never nest in BasaltStickToBottom, see ./virtualize).
-          <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
+          <Box
+            ref={parentRef}
+            className={cx(className)}
+            // theme-allow raw-scroll-container — TanStack Virtual measures/scrolls this element (never nest in BasaltStickToBottom, see ./virtualize).
+            style={{ height, overflow: 'auto', ...style }}
+          >
             <Box style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
               {virtualizer.getVirtualItems().map((virtualItem) => {
                 const row = rows[virtualItem.index]
@@ -929,6 +946,7 @@ const LazyVirtualizedRows = lazy(() =>
     })
     .catch(() => ({ default: NonVirtualizedRows })),
 )
+Object.assign(LazyVirtualizedRows, { displayName: 'LazyVirtualizedRows' })
 
 /**
  * Lightweight `Suspense` fallback for `VirtualizedTranscript` — shown only for the one tick the
@@ -937,14 +955,26 @@ const LazyVirtualizedRows = lazy(() =>
  * unmount/remount of the whole transcript. An empty, correctly-sized scroll pane avoids a layout
  * flash without paying that cost — it settles state before any row has meaningfully mounted.
  */
-function VirtualizeSuspenseFallback({ height }: { readonly height: number | string }): JSX.Element {
+function VirtualizeSuspenseFallback({
+  height,
+  className,
+  style,
+}: BasaltProps & { readonly height: number | string }): JSX.Element {
   // theme-allow raw-scroll-container — placeholder owns its own scroll node, matching the real virtualizer's shape.
-  return <Box style={{ height, overflow: 'auto' }} />
+  return <Box className={cx(className)} style={{ height, overflow: 'auto', ...style }} />
 }
 
 function VirtualizedTranscript(props: VirtualizedTranscriptProps): JSX.Element {
   return (
-    <Suspense fallback={<VirtualizeSuspenseFallback height={props.height} />}>
+    <Suspense
+      fallback={
+        <VirtualizeSuspenseFallback
+          height={props.height}
+          {...(props.className !== undefined && { className: props.className })}
+          {...(props.style !== undefined && { style: props.style })}
+        />
+      }
+    >
       <LazyVirtualizedRows {...props} />
     </Suspense>
   )
@@ -954,7 +984,7 @@ function VirtualizedTranscript(props: VirtualizedTranscriptProps): JSX.Element {
 
 const EMPTY_RENDERERS: PartRenderers = {}
 
-type ThreadTranscriptBase = {
+type ThreadTranscriptBase = BasaltProps & {
   /** Settled messages for the thread, oldest first. */
   readonly messages: readonly ChatMessage<TranscriptPart>[]
   /** The live (in-flight) assistant turn's parts, when a run is streaming for this thread. */
@@ -1050,7 +1080,10 @@ export function ThreadTranscript(props: ThreadTranscriptProps): JSX.Element {
     fallbackRenderer = DEFAULT_FALLBACK_RENDERER,
     affordances: affordancesProp,
     groupConsecutive = true,
+    className,
+    style,
   } = props
+  assertRequiredProps('ThreadTranscript', { messages }, ['messages'])
   const virtualized = resolveVirtualize(props)
 
   // Mirrors PartList's own `useMemo` (part-list.tsx:290) — avoids rebuilding the renderer
@@ -1166,12 +1199,14 @@ export function ThreadTranscript(props: ThreadTranscriptProps): JSX.Element {
         overscan={virtualized.options.overscan ?? DEFAULT_VIRTUALIZE_OVERSCAN}
         estimateSize={virtualized.options.estimateSize ?? DEFAULT_VIRTUALIZE_ESTIMATE_SIZE}
         initialScroll={virtualized.options.initialScroll ?? DEFAULT_VIRTUALIZE_INITIAL_SCROLL}
+        {...(className !== undefined && { className })}
+        {...(style !== undefined && { style })}
       />
     )
   }
 
   return (
-    <Stack gap="sm">
+    <Stack gap="sm" className={cx(className)} {...(style !== undefined && { style })}>
       {rows.map((row) => (
         <Fragment key={row.key}>{row.node}</Fragment>
       ))}

package/src/agent-chat/thread-outcome-card.tsx

@@ -22,6 +22,9 @@ import { Badge, Group, Skeleton, Stack, Text, UnstyledButton } from '@mantine/co
 import { useHover } from '@mantine/hooks'
 import type { JSX } from 'react'
 import type { AgentThread, ThreadStatus } from '../agent'
+import { assertRequiredProps } from '../common/validate'
+import { cx } from '../common/props'
+import type { BasaltProps } from '../common/props'
 import { alpha, VX } from '../tokens'
 import { formatRelativeTime } from './relative-time'
 
@@ -118,7 +121,7 @@ function OutcomeBody({ thread }: { thread: AgentThread }): JSX.Element {
 
 // ── ThreadOutcomeCard ─────────────────────────────────────────────────────────
 
-export type ThreadOutcomeCardProps = {
+export type ThreadOutcomeCardProps = BasaltProps & {
   readonly thread: AgentThread
   /** Whether this row is the active/open thread — applies a subtle highlight. */
   readonly selected: boolean
@@ -138,7 +141,10 @@ export function ThreadOutcomeCard({
   thread,
   selected,
   onSelect,
+  className,
+  style,
 }: ThreadOutcomeCardProps): JSX.Element {
+  assertRequiredProps('ThreadOutcomeCard', { thread }, ['thread'])
   const { hovered, ref } = useHover<HTMLButtonElement>()
   const isPreviewing =
     thread.outcome === null && (thread.status === 'pending' || thread.status === 'streaming')
@@ -157,6 +163,7 @@ export function ThreadOutcomeCard({
       ref={ref}
       onClick={onSelect}
       w="100%"
+      className={cx(className)}
       style={{
         display: 'block',
         padding: 'var(--mantine-spacing-xs) var(--mantine-spacing-sm)',
@@ -164,6 +171,7 @@ export function ThreadOutcomeCard({
         boxShadow: VX.shadowCard,
         backgroundColor: background,
         transition: 'background-color 120ms ease',
+        ...style,
       }}
     >
       {isPreviewing ? <OutcomeSkeleton /> : <OutcomeBody thread={thread} />}