basalt-ui 1.27.0 → 1.29.0

package/dist/agent-chat/thread-feed-row.d.ts

@@ -1,8 +1,9 @@
-import type { JSX } from 'react';
-import type { AgentThread, ForeignPart, PartRenderer, PartRenderers, StreamStatus, TranscriptPart } from '../agent/index.js';
+import type { JSX, ReactNode } from 'react';
+import type { AgentThread, ChatMessage, ForeignPart, PartRenderer, PartRenderers, StreamStatus, TranscriptPart } from '../agent/index.js';
+import type { BasaltProps, SlotStylesProps } from '../common/props.js';
 import type { ComposerProps, ComposerSubmit } from './composer.js';
 import type { MessageAffordances } from './message-affordances.js';
-import type { VirtualizeProps } from './virtualize.js';
+import type { RowHeightProps } from './virtualize.js';
 type ThreadFeedRowBase = {
     /**
      * The thread this row projects. Typed against `AgentThread<TranscriptPart>` — not the plain,
@@ -18,6 +19,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. */
@@ -48,10 +73,11 @@ 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;
 /**
  * One inline-expanding thread row: a header (title + relative timestamp) that toggles a lazily
  * mounted, kept-mounted transcript + composer body. See the module doc for the mount lifecycle

package/dist/agent-chat/thread-feed-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thread-feed-row.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-feed-row.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,cAAc,EACf,MAAM,UAAU,CAAA;AAEjB,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAI/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AA6BnD,KAAK,iBAAiB,GAAG;IACvB;;;;;;;;OAQG;IACH,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC,cAAc,CAAC,CAAA;IAC5C,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,4FAA4F;IAC5F,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IAC9C,kFAAkF;IAClF,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAA;IAClC,8EAA8E;IAC9E,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,CAAA;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IACrD;;;;OAIG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,kBAAkB,CAAA;IACzC;uBACmB;IACnB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IACnC,iDAAiD;IACjD,QAAQ,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAA;IAClD,8EAA8E;IAC9E,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B;;kEAE8D;IAC9D,QAAQ,CAAC,aAAa,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC,CAAA;CAClF,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG,eAAe,CAAA;AASpE;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA8HpE"}
+{"version":3,"file":"thread-feed-row.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-feed-row.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,cAAc,EACf,MAAM,UAAU,CAAA;AAGjB,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGnE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAI/D,OAAO,KAAK,EAAE,cAAc,EAAmB,MAAM,cAAc,CAAA;AAsCnE,KAAK,iBAAiB,GAAG;IACvB;;;;;;;;OAQG;IACH,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC,cAAc,CAAC,CAAA;IAC5C,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC;;;;;;OAMG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,gGAAgG;IAChG,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB;+FAC2F;IAC3F,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;IAC/B;;kBAEc;IACd,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAA;IAChC;;;;;OAKG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,WAAW,CAAC,cAAc,CAAC,EAAE,CAAA;IAC1D,4FAA4F;IAC5F,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IAC9C,kFAAkF;IAClF,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAA;IAClC,8EAA8E;IAC9E,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,CAAA;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IACrD;;;;OAIG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,kBAAkB,CAAA;IACzC;uBACmB;IACnB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IACnC,iDAAiD;IACjD,QAAQ,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAA;IAClD,8EAA8E;IAC9E,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B;;kEAE8D;IAC9D,QAAQ,CAAC,aAAa,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC,CAAA;CAClF,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAChD,cAAc,GACd,eAAe,CAAC,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC,GAC3C,WAAW,CAAA;AAkBb;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA8JpE"}

package/dist/agent-chat/thread-feed-row.js

@@ -1,11 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Group, Stack, Text, UnstyledButton } from "@mantine/core";
 import { useState } from "react";
+import { BasaltStickToBottom } from "../agent/index.js";
+import { cx } from "../common/props.js";
+import { assertRequiredProps } from "../common/validate.js";
 import { VX } from "../tokens/index.js";
 import { Composer } from "./composer.js";
 import { formatRelativeTime } from "./relative-time.js";
 import { ThreadTranscript } from "./thread-message.js";
-import { resolveVirtualize } from "./virtualize.js";
+import { resolveRowHeight } from "./virtualize.js";
 function ChevronGlyph({ expanded }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -33,14 +36,28 @@ function ChevronGlyph({ expanded }) {
     }
   );
 }
-function rowTitle(thread) {
-  return thread.outcome?.title ?? "Untitled thread";
+const CARD_STYLE = {
+  borderRadius: VX.radiusCard,
+  boxShadow: VX.shadowCard,
+  backgroundColor: VX.surface.panel,
+  overflow: "hidden"
+};
+function rowTitle(thread, titleOverride) {
+  return titleOverride ?? thread.outcome?.title ?? "Untitled thread";
+}
+function rowSummary(thread, summaryOverride) {
+  return summaryOverride ?? thread.outcome?.summary ?? "";
 }
 function ThreadFeedRow(props) {
   const {
     thread,
     expanded,
     onToggle,
+    title,
+    summary: summaryOverride,
+    headerLeft,
+    headerRight,
+    messages,
     liveParts,
     liveStatus,
     renderers,
@@ -49,25 +66,41 @@ function ThreadFeedRow(props) {
     groupConsecutive,
     onSend,
     onStop,
-    composerProps
+    composerProps,
+    classNames,
+    className,
+    style
   } = props;
-  const virtualized = resolveVirtualize(props);
-  const virtualizeProps = virtualized === null ? {} : { virtualize: virtualized.options, height: virtualized.height };
+  assertRequiredProps("ThreadFeedRow", { thread }, ["thread"]);
+  const rowHeight = resolveRowHeight(props);
+  const virtualizeProps = rowHeight.kind === "virtualized" ? { virtualize: rowHeight.virtualize.options, height: rowHeight.virtualize.height } : {};
   const [hasOpened, setHasOpened] = useState(expanded);
   if (expanded && !hasOpened) {
     setHasOpened(true);
   }
-  const summary = thread.outcome?.summary ?? "";
+  const resolvedTitle = rowTitle(thread, title);
+  const resolvedSummary = rowSummary(thread, summaryOverride);
+  const transcriptMessages = messages ?? thread.messages;
   const streaming = liveStatus === "streaming";
+  const transcript = /* @__PURE__ */ jsx(
+    ThreadTranscript,
+    {
+      messages: transcriptMessages,
+      ...liveParts !== void 0 ? { liveParts } : {},
+      ...liveStatus !== void 0 ? { liveStatus } : {},
+      ...renderers !== void 0 ? { renderers } : {},
+      ...fallbackRenderer !== void 0 ? { fallbackRenderer } : {},
+      ...affordances !== void 0 ? { affordances } : {},
+      ...groupConsecutive !== void 0 ? { groupConsecutive } : {},
+      ...virtualizeProps
+    }
+  );
   return /* @__PURE__ */ jsxs(
     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,
       children: [
         /* @__PURE__ */ jsx(
           UnstyledButton,
@@ -75,11 +108,13 @@ function ThreadFeedRow(props) {
             onClick: () => onToggle(thread.id),
             w: "100%",
             "aria-expanded": expanded,
+            ...classNames?.header !== void 0 && { className: classNames.header },
             style: {
               display: "block",
               padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)"
             },
             children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", gap: "xs", wrap: "nowrap", align: "center", children: [
+              headerLeft,
               /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { flex: 1, minWidth: 0 }, children: [
                 /* @__PURE__ */ jsx(
                   Text,
@@ -91,11 +126,12 @@ function ThreadFeedRow(props) {
                       fontSize: VX.text.md,
                       fontStretch: "88%"
                     },
-                    children: rowTitle(thread)
+                    children: resolvedTitle
                   }
                 ),
-                summary.length > 0 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 1, children: summary })
+                resolvedSummary.length > 0 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 1, children: resolvedSummary })
               ] }),
+              headerRight,
               /* @__PURE__ */ jsx(
                 Text,
                 {
@@ -116,25 +152,24 @@ function ThreadFeedRow(props) {
           Box,
           {
             "data-testid": "thread-feed-row-body",
+            ...classNames?.body !== void 0 && { className: classNames.body },
             style: {
               display: expanded ? "block" : "none",
               padding: "var(--mantine-spacing-sm)",
               paddingTop: 0
             },
             children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-              /* @__PURE__ */ jsx(
-                ThreadTranscript,
+              rowHeight.kind === "bounded" ? /* @__PURE__ */ jsx(
+                BasaltStickToBottom,
                 {
-                  messages: thread.messages,
-                  ...liveParts !== void 0 ? { liveParts } : {},
-                  ...liveStatus !== void 0 ? { liveStatus } : {},
-                  ...renderers !== void 0 ? { renderers } : {},
-                  ...fallbackRenderer !== void 0 ? { fallbackRenderer } : {},
-                  ...affordances !== void 0 ? { affordances } : {},
-                  ...groupConsecutive !== void 0 ? { groupConsecutive } : {},
-                  ...virtualizeProps
+                  style: {
+                    height: rowHeight.height,
+                    // theme-allow raw-scroll-container — BasaltStickToBottom owns this scroll node (see stick-to-bottom.tsx).
+                    overflowY: "auto"
+                  },
+                  children: transcript
                 }
-              ),
+              ) : transcript,
               /* @__PURE__ */ jsx(
                 Composer,
                 {

package/dist/agent-chat/thread-feed.d.ts

@@ -1,7 +1,8 @@
 import type { JSX, ReactNode } from 'react';
 import type { AgentThread } from '../agent/index.js';
+import type { BasaltProps } from '../common/props.js';
 import type { ComposerSubmit } from './composer.js';
-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;
@@ -34,6 +35,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';
 };
 /**
  * A scrollable feed of thread rows, animated on add/remove/reorder. Row content comes from
@@ -43,5 +54,5 @@ export type ThreadFeedProps = {
  * @example
  * <ThreadFeed threads={threads} activeId={activeId} onSelect={(id) => select(id)} />
  */
-export declare function ThreadFeed({ threads, activeId, onSelect, variant, onSend, renderRow, }: ThreadFeedProps): JSX.Element;
+export declare function ThreadFeed({ threads, activeId, onSelect, variant, onSend, renderRow, anchor, className, style, }: ThreadFeedProps): JSX.Element;
 //# sourceMappingURL=thread-feed.d.ts.map

package/dist/agent-chat/thread-feed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thread-feed.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-feed.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAShD,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE,CAAA;IAC/B,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC;uGACmG;IACnG,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAA;IACxE;;;uBAGmB;IACnB,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,SAAS,CAAA;CACxD,CAAA;AAgCD;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAmB,EACnB,MAAM,EACN,SAAS,GACV,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAkE/B"}
+{"version":3,"file":"thread-feed.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-feed.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAShD,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE,CAAA;IAC/B,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC;uGACmG;IACnG,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,KAAK,IAAI,CAAA;IACxE;;;uBAGmB;IACnB,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,SAAS,CAAA;IACvD;;;;;;;;OAQG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAClC,CAAA;AAgCD;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,MAAgB,EAChB,SAAS,EACT,KAAK,GACN,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAiF/B"}

package/dist/agent-chat/thread-feed.js

@@ -3,7 +3,10 @@ import { Box, ScrollArea, Stack } from "@mantine/core";
 import { useReducedMotion } from "@mantine/hooks";
 import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from "react";
-import { MOTION_SPRING } from "../motion/index.js";
+import { BasaltStickToBottom } from "../agent/index.js";
+import { cx } from "../common/props.js";
+import { assertRequiredProps } from "../common/validate.js";
+import { MOTION_SPRING } from "../common/motion.js";
 import { ThreadFeedRow } from "./thread-feed-row.js";
 import { ThreadOutcomeCard } from "./thread-outcome-card.js";
 function noopSend() {
@@ -37,8 +40,12 @@ function ThreadFeed({
   onSelect,
   variant = "outcome",
   onSend,
-  renderRow
+  renderRow,
+  anchor = "start",
+  className,
+  style
 }) {
+  assertRequiredProps("ThreadFeed", { threads }, ["threads"]);
   const reduceMotion = useReducedMotion();
   const [collapsedId, setCollapsedId] = useState(null);
   useEffect(() => {
@@ -54,10 +61,8 @@ function ThreadFeed({
     onSelect(id);
   }
   const rowFor = (thread) => renderRow !== void 0 ? renderRow(thread) : defaultRow(thread, variant, activeId, collapsedId, handleInlineToggle, onSelect, onSend);
-  if (reduceMotion) {
-    return /* @__PURE__ */ jsx(ScrollArea, { style: { height: "100%" }, children: /* @__PURE__ */ jsx(Stack, { gap: "sm", p: "sm", children: threads.map((thread) => /* @__PURE__ */ jsx(Box, { children: rowFor(thread) }, thread.id)) }) });
-  }
-  return /* @__PURE__ */ jsx(ScrollArea, { style: { height: "100%" }, children: /* @__PURE__ */ jsx(Stack, { gap: "sm", p: "sm", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: threads.map((thread) => /* @__PURE__ */ jsx(
+  const stackAnchorProps = anchor === "end" ? { justify: "flex-end", mih: "100%" } : {};
+  const list = reduceMotion ? /* @__PURE__ */ jsx(Stack, { gap: "sm", p: "sm", ...stackAnchorProps, children: threads.map((thread) => /* @__PURE__ */ jsx(Box, { children: rowFor(thread) }, thread.id)) }) : /* @__PURE__ */ jsx(Stack, { gap: "sm", p: "sm", ...stackAnchorProps, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: threads.map((thread) => /* @__PURE__ */ jsx(
     motion.div,
     {
       layout: true,
@@ -68,7 +73,11 @@ function ThreadFeed({
       children: rowFor(thread)
     },
     thread.id
-  )) }) }) });
+  )) }) });
+  if (anchor === "end") {
+    return /* @__PURE__ */ jsx(BasaltStickToBottom, { className: cx(className), style: { height: "100%", ...style }, children: list });
+  }
+  return /* @__PURE__ */ jsx(ScrollArea, { className: cx(className), style: { height: "100%", ...style }, children: list });
 }
 export {
   ThreadFeed

package/dist/agent-chat/thread-message.d.ts

@@ -1,5 +1,6 @@
 import type { JSX } from 'react';
 import type { AgentPartRenderers, ChatMessage, ForeignPart, PartRenderer, PartRenderers, StreamStatus, TranscriptPart } from '../agent/index.js';
+import type { BasaltProps } from '../common/props.js';
 import type { MessageAffordances } from './message-affordances.js';
 import type { VirtualizeOptions, VirtualizeProps } from './virtualize.js';
 /**
@@ -34,7 +35,7 @@ type TranscriptRow = {
     readonly key: string;
     readonly node: JSX.Element;
 };
-type VirtualizedTranscriptProps = {
+type VirtualizedTranscriptProps = BasaltProps & {
     readonly rows: readonly TranscriptRow[];
     readonly height: number | string;
     readonly overscan: number;
@@ -52,7 +53,7 @@ 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.
  */
-declare function NonVirtualizedRows({ rows, height }: VirtualizedTranscriptProps): JSX.Element;
+declare function NonVirtualizedRows({ rows, height, className, style, }: VirtualizedTranscriptProps): JSX.Element;
 /** Test-only escape hatch (mirrors `messageBlockRenderCounter` above) — proves the peer-absent
  * degrade target itself renders every row without windowing and without throwing, without having
  * to fight `React.lazy`'s permanent once-per-module-instance resolution cache to simulate the
@@ -180,7 +181,7 @@ export type InitialScrollState = {
  * tracks) and is exactly what the verification/retry loop above consults instead.
  */
 export declare function applyInitialScroll(state: InitialScrollState, initialScroll: NonNullable<VirtualizeOptions['initialScroll']>, rowCount: number, getContainerHeight: () => number, scrollToEnd: () => void, isAtEnd: () => boolean): void;
-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. */

package/dist/agent-chat/thread-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thread-message.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-message.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-message.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-message.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,KAAK,EAEV,kBAAkB,EAClB,WAAW,EAEX,WAAW,EACX,YAAY,EACZ,aAAa,EAGb,YAAY,EAGZ,cAAc,EACf,MAAM,UAAU,CAAA;AAGjB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAMlD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAI/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAmGtE;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,kBAAkB,CAM3D,CAAA;AAiPD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;CAAe,CAAA;AAqKrD;;;;;;;qGAOqG;AACrG,eAAO,MAAM,2BAA2B,IAAI,CAAA;AAE5C,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,CAAA;CAC3B,CAAA;AAED,KAAK,0BAA0B,GAAG,WAAW,GAAG;IAC9C,QAAQ,CAAC,IAAI,EAAE,SAAS,aAAa,EAAE,CAAA;IACvC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IAChC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,aAAa,EAAE,WAAW,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAA;CACxE,CAAA;AAED;;;;;;;;;;GAUG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,0BAA0B,GAAG,GAAG,CAAC,OAAO,CAW1C;AAED;;;;yFAIyF;AACzF,eAAO,MAAM,0BAA0B,2BAAqB,CAAA;AAE5D;;;;;;;;;;;;GAYG;AACH,KAAK,oBAAoB,CAAC,YAAY,SAAS,OAAO,IAAI;IACxD,QAAQ,CAAC,gBAAgB,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,MAAM,CAAA;IACzD,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;IAC5C,QAAQ,CAAC,OAAO,EAAE;QAChB,QAAQ,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;QAC/C,QAAQ,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;KACjD,CAAA;CACF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,yBAAyB,CAAC,YAAY,SAAS,OAAO,EACpE,IAAI,EAAE,oBAAoB,CAAC,YAAY,CAAC,EACxC,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,GACX,MAAM,CAOR;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,0BAA0B,CACxC,aAAa,EAAE,WAAW,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,EAC9D,QAAQ,EAAE,MAAM,EAChB,eAAe,EAAE,MAAM,GACtB,QAAQ,GAAG,WAAW,GAAG,YAAY,CAKvC;AAED;;;;;;;;qBAQqB;AACrB,MAAM,MAAM,kBAAkB,GAAG;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,kBAAkB,EACzB,aAAa,EAAE,WAAW,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,EAC9D,QAAQ,EAAE,MAAM,EAChB,kBAAkB,EAAE,MAAM,MAAM,EAChC,WAAW,EAAE,MAAM,IAAI,EACvB,OAAO,EAAE,MAAM,OAAO,GACrB,IAAI,CAwBN;AAwKD,KAAK,oBAAoB,GAAG,WAAW,GAAG;IACxC,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,EAAE,SAAS,WAAW,CAAC,cAAc,CAAC,EAAE,CAAA;IACzD,4FAA4F;IAC5F,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IAC9C,kFAAkF;IAClF,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAA;IAClC,kFAAkF;IAClF,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,CAAA;IAClC;iGAC6F;IAC7F,QAAQ,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IACrD;;0CAEsC;IACtC,QAAQ,CAAC,WAAW,CAAC,EAAE,kBAAkB,CAAA;IACzC;;uBAEmB;IACnB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,GAAG,eAAe,CAAA;AA2C1E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CA6I1E"}

package/dist/agent-chat/thread-message.js

@@ -13,6 +13,8 @@ import {
 import { useDisclosure, useFocusWithin, useHover, useMergedRef } from "@mantine/hooks";
 import { Fragment, lazy, memo, Suspense, useLayoutEffect, useMemo, useRef } from "react";
 import { coalesceParts, narrowAgentPart, PartList } from "../agent/index.js";
+import { cx } from "../common/props.js";
+import { assertRequiredProps } from "../common/validate.js";
 import { Markdown } from "../content/markdown.js";
 import { CopyAction } from "../content/copy-action.js";
 import { VX } from "../tokens/index.js";
@@ -20,6 +22,7 @@ import { DEFAULT_AFFORDANCES } from "./message-affordances.js";
 import { formatRelativeTime } from "./relative-time.js";
 import { ToolChip } from "./tool-chip.js";
 import { resolveVirtualize } from "./virtualize.js";
+import { isDev } from "../common/is-dev.js";
 const MICRO_LABEL_STYLE = {
   fontFamily: "var(--basalt-font-mono)",
   fontSize: VX.text.micro,
@@ -64,7 +67,7 @@ const threadPartRenderers = {
 function UnknownPartChip({ part }) {
   return /* @__PURE__ */ jsx(Box, { style: RAIL_STYLE, children: /* @__PURE__ */ jsx(Text, { style: MICRO_LABEL_STYLE, children: `Unknown part: ${part.type}` }) });
 }
-const DEFAULT_FALLBACK_RENDERER = ({ part }) => process.env["NODE_ENV"] !== "production" ? /* @__PURE__ */ jsx(UnknownPartChip, { part }) : null;
+const DEFAULT_FALLBACK_RENDERER = ({ part }) => isDev() ? /* @__PURE__ */ jsx(UnknownPartChip, { part }) : null;
 function resolveSegments(parts, renderers, fallbackRenderer) {
   const segments = [];
   let buffer = [];
@@ -235,15 +238,21 @@ function areMessageBlockPropsEqual(prev, next) {
   return prev.message === next.message && prev.streaming === next.streaming && prev.renderers === next.renderers && prev.fallbackRenderer === next.fallbackRenderer && prev.grouped === next.grouped && prev.affordances === next.affordances && prev.isLastAssistant === next.isLastAssistant;
 }
 const MessageBlock = memo(MessageBlockImpl, areMessageBlockPropsEqual);
+MessageBlock.displayName = "MessageBlock";
 const DEFAULT_VIRTUALIZE_OVERSCAN = 6;
 const DEFAULT_VIRTUALIZE_ESTIMATE_SIZE = 160;
 const DEFAULT_VIRTUALIZE_SCROLL_END_THRESHOLD = 64;
 const DEFAULT_VIRTUALIZE_INITIAL_SCROLL = "end";
 const MAX_INITIAL_SCROLL_ATTEMPTS = 5;
-function NonVirtualizedRows({ rows, height }) {
+function NonVirtualizedRows({
+  rows,
+  height,
+  className,
+  style
+}) {
   return (
     // theme-allow raw-scroll-container — degrade target owns its own scroll node, same as the real virtualizer below.
-    /* @__PURE__ */ jsx(Box, { style: { height, overflow: "auto" }, children: /* @__PURE__ */ jsx(Stack, { gap: "sm", children: rows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: row.node }, row.key)) }) })
+    /* @__PURE__ */ jsx(Box, { className: cx(className), style: { height, overflow: "auto", ...style }, children: /* @__PURE__ */ jsx(Stack, { gap: "sm", children: rows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: row.node }, row.key)) }) })
   );
 }
 const nonVirtualizedRowsFallback = NonVirtualizedRows;
@@ -291,7 +300,9 @@ const LazyVirtualizedRows = lazy(
       height,
       overscan,
       estimateSize,
-      initialScroll
+      initialScroll,
+      className,
+      style
     }) {
       const parentRef = useRef(null);
       const initialScrollStateRef = useRef({
@@ -330,38 +341,61 @@ const LazyVirtualizedRows = lazy(
           () => isContainerAtEnd(parentRef.current, DEFAULT_VIRTUALIZE_SCROLL_END_THRESHOLD)
         );
       });
-      return (
-        // theme-allow raw-scroll-container — TanStack Virtual measures/scrolls this element (never nest in BasaltStickToBottom, see ./virtualize).
-        /* @__PURE__ */ jsx(Box, { ref: parentRef, style: { height, overflow: "auto" }, children: /* @__PURE__ */ jsx(Box, { style: { height: virtualizer.getTotalSize(), position: "relative" }, children: virtualizer.getVirtualItems().map((virtualItem) => {
-          const row = rows[virtualItem.index];
-          if (row === void 0) return null;
-          return /* @__PURE__ */ jsx(
-            Box,
-            {
-              ref: virtualizer.measureElement,
-              "data-index": virtualItem.index,
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                transform: `translateY(${virtualItem.start}px)`
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          ref: parentRef,
+          className: cx(className),
+          style: { height, overflow: "auto", ...style },
+          children: /* @__PURE__ */ jsx(Box, { style: { height: virtualizer.getTotalSize(), position: "relative" }, children: virtualizer.getVirtualItems().map((virtualItem) => {
+            const row = rows[virtualItem.index];
+            if (row === void 0) return null;
+            return /* @__PURE__ */ jsx(
+              Box,
+              {
+                ref: virtualizer.measureElement,
+                "data-index": virtualItem.index,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${virtualItem.start}px)`
+                },
+                children: row.node
               },
-              children: row.node
-            },
-            row.key
-          );
-        }) }) })
+              row.key
+            );
+          }) })
+        }
       );
     }
     return { default: VirtualizedRowsInner };
   }).catch(() => ({ default: NonVirtualizedRows }))
 );
-function VirtualizeSuspenseFallback({ height }) {
-  return /* @__PURE__ */ jsx(Box, { style: { height, overflow: "auto" } });
+Object.assign(LazyVirtualizedRows, { displayName: "LazyVirtualizedRows" });
+function VirtualizeSuspenseFallback({
+  height,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(Box, { className: cx(className), style: { height, overflow: "auto", ...style } });
 }
 function VirtualizedTranscript(props) {
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(VirtualizeSuspenseFallback, { height: props.height }), children: /* @__PURE__ */ jsx(LazyVirtualizedRows, { ...props }) });
+  return /* @__PURE__ */ jsx(
+    Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx(
+        VirtualizeSuspenseFallback,
+        {
+          height: props.height,
+          ...props.className !== void 0 && { className: props.className },
+          ...props.style !== void 0 && { style: props.style }
+        }
+      ),
+      children: /* @__PURE__ */ jsx(LazyVirtualizedRows, { ...props })
+    }
+  );
 }
 const EMPTY_RENDERERS = {};
 function useStableCallback(callback) {
@@ -381,8 +415,11 @@ function ThreadTranscript(props) {
     renderers: renderersProp,
     fallbackRenderer = DEFAULT_FALLBACK_RENDERER,
     affordances: affordancesProp,
-    groupConsecutive = true
+    groupConsecutive = true,
+    className,
+    style
   } = props;
+  assertRequiredProps("ThreadTranscript", { messages }, ["messages"]);
   const virtualized = resolveVirtualize(props);
   const renderers = useMemo(() => renderersProp ?? EMPTY_RENDERERS, [renderersProp]);
   const liveMessage = useMemo(() => {
@@ -464,11 +501,13 @@ function ThreadTranscript(props) {
         height: virtualized.height,
         overscan: virtualized.options.overscan ?? DEFAULT_VIRTUALIZE_OVERSCAN,
         estimateSize: virtualized.options.estimateSize ?? DEFAULT_VIRTUALIZE_ESTIMATE_SIZE,
-        initialScroll: virtualized.options.initialScroll ?? DEFAULT_VIRTUALIZE_INITIAL_SCROLL
+        initialScroll: virtualized.options.initialScroll ?? DEFAULT_VIRTUALIZE_INITIAL_SCROLL,
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style }
       }
     );
   }
-  return /* @__PURE__ */ jsx(Stack, { gap: "sm", children: rows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: row.node }, row.key)) });
+  return /* @__PURE__ */ jsx(Stack, { gap: "sm", className: cx(className), ...style !== void 0 && { style }, children: rows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: row.node }, row.key)) });
 }
 export {
   MAX_INITIAL_SCROLL_ATTEMPTS,

package/dist/agent-chat/thread-outcome-card.d.ts

@@ -1,6 +1,7 @@
 import type { JSX } from 'react';
 import type { AgentThread } from '../agent/index.js';
-export type ThreadOutcomeCardProps = {
+import type { BasaltProps } from '../common/props.js';
+export type ThreadOutcomeCardProps = BasaltProps & {
     readonly thread: AgentThread;
     /** Whether this row is the active/open thread — applies a subtle highlight. */
     readonly selected: boolean;
@@ -15,5 +16,5 @@ export type ThreadOutcomeCardProps = {
  * @example
  * <ThreadOutcomeCard thread={thread} selected={false} onSelect={() => select(thread.id)} />
  */
-export declare function ThreadOutcomeCard({ thread, selected, onSelect, }: ThreadOutcomeCardProps): JSX.Element;
+export declare function ThreadOutcomeCard({ thread, selected, onSelect, className, style, }: ThreadOutcomeCardProps): JSX.Element;
 //# sourceMappingURL=thread-outcome-card.d.ts.map

package/dist/agent-chat/thread-outcome-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thread-outcome-card.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-outcome-card.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,UAAU,CAAA;AAiGzD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAA;IAC5B,+EAA+E;IAC/E,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CA+BtC"}
+{"version":3,"file":"thread-outcome-card.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-outcome-card.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,UAAU,CAAA;AAGzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAiGlD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG;IACjD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAA;IAC5B,+EAA+E;IAC/E,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAkCtC"}

package/dist/agent-chat/thread-outcome-card.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Badge, Group, Skeleton, Stack, Text, UnstyledButton } from "@mantine/core";
 import { useHover } from "@mantine/hooks";
+import { assertRequiredProps } from "../common/validate.js";
+import { cx } from "../common/props.js";
 import { alpha, VX } from "../tokens/index.js";
 import { formatRelativeTime } from "./relative-time.js";
 const STATUS_BADGE = {
@@ -77,8 +79,11 @@ function OutcomeBody({ thread }) {
 function ThreadOutcomeCard({
   thread,
   selected,
-  onSelect
+  onSelect,
+  className,
+  style
 }) {
+  assertRequiredProps("ThreadOutcomeCard", { thread }, ["thread"]);
   const { hovered, ref } = useHover();
   const isPreviewing = thread.outcome === null && (thread.status === "pending" || thread.status === "streaming");
   const background = selected ? VX.surface.elevated : hovered ? VX.surface.panelHover : VX.surface.panel;
@@ -88,13 +93,15 @@ function ThreadOutcomeCard({
       ref,
       onClick: onSelect,
       w: "100%",
+      className: cx(className),
       style: {
         display: "block",
         padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)",
         borderRadius: VX.radiusCard,
         boxShadow: VX.shadowCard,
         backgroundColor: background,
-        transition: "background-color 120ms ease"
+        transition: "background-color 120ms ease",
+        ...style
       },
       children: isPreviewing ? /* @__PURE__ */ jsx(OutcomeSkeleton, {}) : /* @__PURE__ */ jsx(OutcomeBody, { thread })
     }

package/dist/agent-chat/thread-workspace.d.ts

@@ -1,6 +1,11 @@
 import type { JSX, ReactNode } from 'react';
 import type { AgentPart, AgentTransport, OutcomeResolver, ThreadsStore } from '../agent/index.js';
-export type ThreadWorkspaceProps = {
+import type { BasaltProps, SlotStylesProps } from '../common/props.js';
+/** 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, below 768px, 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.
@@ -35,5 +40,5 @@ export type ThreadWorkspaceProps = {
  * @example
  * <ThreadWorkspace useThreads={useThreads} transport={transport} resolveOutcome={heuristicOutcome} />
  */
-export declare function ThreadWorkspace({ useThreads, transport, resolveOutcome, newThreadPlaceholder, emptyState, errorState, }: ThreadWorkspaceProps): JSX.Element;
+export declare function ThreadWorkspace({ useThreads, transport, resolveOutcome, newThreadPlaceholder, emptyState, errorState, className, style, classNames, }: ThreadWorkspaceProps): JSX.Element;
 //# sourceMappingURL=thread-workspace.d.ts.map