basalt-ui 1.11.0 → 1.13.0

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

@@ -10,12 +10,16 @@ import {
   Text,
   UnstyledButton
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { Fragment, memo, useMemo } from "react";
+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 { Markdown } from "../content/markdown.js";
+import { CopyAction } from "../content/copy-action.js";
 import { VX } from "../tokens/index.js";
+import { DEFAULT_AFFORDANCES } from "./message-affordances.js";
+import { formatRelativeTime } from "./relative-time.js";
 import { ToolChip } from "./tool-chip.js";
+import { resolveVirtualize } from "./virtualize.js";
 const MICRO_LABEL_STYLE = {
   fontFamily: "var(--basalt-font-mono)",
   fontSize: VX.text.micro,
@@ -24,8 +28,11 @@ const MICRO_LABEL_STYLE = {
   textTransform: "uppercase",
   color: VX.faint
 };
-function TextRenderer({ part }) {
-  return /* @__PURE__ */ jsx(Markdown, { streaming: true, density: "chat", children: part.text });
+function TextRenderer({
+  part,
+  settled
+}) {
+  return /* @__PURE__ */ jsx(Markdown, { streaming: !settled, contentTrust: "untrusted", density: "chat", children: part.text });
 }
 const RAIL_STYLE = {
   borderLeft: `2px solid ${VX.divider}`,
@@ -95,6 +102,51 @@ function resolveSegments(parts, renderers, fallbackRenderer) {
   flushBuffer();
   return segments;
 }
+function extractCoalescedText(segments) {
+  const chunks = [];
+  for (const segment of segments) {
+    if (segment.kind !== "agent") continue;
+    for (const part of segment.parts) {
+      if (part.type === "text") chunks.push(part.text);
+    }
+  }
+  return chunks.join("\n\n");
+}
+const GROUP_WINDOW_MS = 5 * 6e4;
+function isConsecutiveWithPredecessor(message, predecessor) {
+  if (predecessor === void 0) return false;
+  if (predecessor.role !== message.role) return false;
+  return message.createdAt - predecessor.createdAt <= GROUP_WINDOW_MS;
+}
+function MessageAffordanceRow({
+  message,
+  coalescedText,
+  affordances,
+  isLastAssistant,
+  visible
+}) {
+  const timestampMode = affordances.timestamp ?? DEFAULT_AFFORDANCES.timestamp;
+  const showTimestamp = timestampMode !== "none";
+  const showCopy = affordances.copy ?? DEFAULT_AFFORDANCES.copy;
+  const showRegenerate = isLastAssistant && affordances.onRegenerate !== void 0;
+  const customActions = affordances.actions?.({ message });
+  if (!showTimestamp && !showCopy && !showRegenerate && customActions === void 0) return null;
+  const timestampLabel = timestampMode === "absolute" ? new Date(message.createdAt).toLocaleString() : formatRelativeTime(message.createdAt);
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      gap: 8,
+      "data-testid": `message-affordances-${message.id}`,
+      style: { opacity: visible ? 1 : 0, transition: "opacity 120ms ease" },
+      children: [
+        showTimestamp && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: timestampLabel }),
+        showCopy && /* @__PURE__ */ jsx(CopyAction, { value: coalescedText, ariaLabel: "Copy message" }),
+        showRegenerate && /* @__PURE__ */ jsx(UnstyledButton, { onClick: () => affordances.onRegenerate?.(message.id), children: /* @__PURE__ */ jsx(Text, { style: MICRO_LABEL_STYLE, children: "Regenerate" }) }),
+        customActions
+      ]
+    }
+  );
+}
 const ROLE_LABEL = {
   user: "You",
   assistant: "Assistant"
@@ -108,83 +160,323 @@ function MessageBlockImpl({
   message,
   streaming = false,
   renderers,
-  fallbackRenderer
+  fallbackRenderer,
+  grouped = false,
+  affordances,
+  isLastAssistant = false
 }) {
   messageBlockRenderCounter.count += 1;
   const settled = !streaming;
+  const { hovered, ref: hoverRef } = useHover();
+  const { focused, ref: focusWithinRef } = useFocusWithin();
+  const ref = useMergedRef(hoverRef, focusWithinRef);
   const segments = useMemo(
     () => resolveSegments(message.parts, renderers, fallbackRenderer),
     [message.parts, renderers, fallbackRenderer]
   );
   const finishIndicator = message.finish === void 0 ? void 0 : FINISH_INDICATOR[message.finish];
+  const coalescedText = useMemo(
+    () => affordances === void 0 ? "" : extractCoalescedText(segments),
+    [affordances, segments]
+  );
+  const showHeader = !grouped || streaming || finishIndicator !== void 0;
   return /* @__PURE__ */ jsx(
     Box,
     {
+      ref,
+      "data-testid": `agent-message-${message.id}`,
+      "data-grouped": grouped,
       style: {
         padding: "var(--vx-space-agent-message-inset-y) var(--vx-space-agent-message-inset-x)",
-        backgroundColor: message.role === "user" ? VX.surface.subtle : VX.surface.panel,
-        borderRadius: VX.radiusCard,
-        boxShadow: VX.shadowCard
+        ...grouped ? {} : {
+          backgroundColor: message.role === "user" ? VX.surface.subtle : VX.surface.panel,
+          borderRadius: VX.radiusCard,
+          boxShadow: VX.shadowCard
+        }
       },
       children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
-        /* @__PURE__ */ jsxs(Group, { gap: 6, align: "center", children: [
-          /* @__PURE__ */ jsx(Text, { style: MICRO_LABEL_STYLE, children: ROLE_LABEL[message.role] }),
+        showHeader && /* @__PURE__ */ jsxs(Group, { gap: 6, align: "center", children: [
+          !grouped && /* @__PURE__ */ jsx(Text, { style: MICRO_LABEL_STYLE, children: ROLE_LABEL[message.role] }),
           streaming && /* @__PURE__ */ jsx(Loader, { size: "xs" }),
           finishIndicator !== void 0 && /* @__PURE__ */ jsx(Text, { style: { ...MICRO_LABEL_STYLE, color: finishIndicator.statusToken }, children: finishIndicator.label })
         ] }),
         segments.map(
-          (segment) => segment.kind === "agent" ? /* @__PURE__ */ jsx(PartList, { parts: segment.parts, components: threadPartRenderers }, segment.key) : /* @__PURE__ */ jsx(Fragment, { children: segment.render({
+          (segment) => segment.kind === "agent" ? /* @__PURE__ */ jsx(
+            PartList,
+            {
+              parts: segment.parts,
+              components: threadPartRenderers,
+              settled
+            },
+            segment.key
+          ) : /* @__PURE__ */ jsx(Fragment, { children: segment.render({
             part: segment.part,
             messageId: message.id,
             partId: segment.part.id,
             settled,
             role: message.role
           }) }, segment.key)
+        ),
+        affordances !== void 0 && /* @__PURE__ */ jsx(
+          MessageAffordanceRow,
+          {
+            message,
+            coalescedText,
+            affordances,
+            isLastAssistant,
+            visible: hovered || focused
+          }
         )
       ] })
     }
   );
 }
 function areMessageBlockPropsEqual(prev, next) {
-  return prev.message === next.message && prev.streaming === next.streaming && prev.renderers === next.renderers && prev.fallbackRenderer === next.fallbackRenderer;
+  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);
+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 }) {
+  return (
+    // theme-allow — 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)) }) })
+  );
+}
+const nonVirtualizedRowsFallback = NonVirtualizedRows;
+function resolveGuardedMeasurement(host, element, size) {
+  if (size > 0) return size;
+  const index = host.indexFromElement(element);
+  const key = host.options.getItemKey(index);
+  return host.itemSizeCache.get(key) ?? host.options.estimateSize(index);
+}
+function resolveInitialScrollAction(initialScroll, rowCount, containerHeight) {
+  if (initialScroll === "start") return "skip-done";
+  if (rowCount === 0) return "skip-done";
+  if (containerHeight <= 0) return "skip-retry";
+  return "scroll";
+}
+function applyInitialScroll(state, initialScroll, rowCount, getContainerHeight, scrollToEnd, isAtEnd) {
+  if (state.hasApplied) return;
+  if (state.attempts > 0) {
+    if (isAtEnd() || state.attempts >= MAX_INITIAL_SCROLL_ATTEMPTS) {
+      state.hasApplied = true;
+      return;
+    }
+    scrollToEnd();
+    state.attempts += 1;
+    return;
+  }
+  const action = resolveInitialScrollAction(initialScroll, rowCount, getContainerHeight());
+  if (action === "skip-retry") return;
+  if (action === "skip-done") {
+    state.hasApplied = true;
+    return;
+  }
+  scrollToEnd();
+  state.attempts += 1;
+}
+function isContainerAtEnd(container, threshold) {
+  if (container === null) return false;
+  const distanceFromEnd = container.scrollHeight - container.clientHeight - container.scrollTop;
+  return distanceFromEnd <= threshold;
+}
+const LazyVirtualizedRows = lazy(
+  () => import("@tanstack/react-virtual").then(({ useVirtualizer, measureElement: defaultMeasureElement }) => {
+    function VirtualizedRowsInner({
+      rows,
+      height,
+      overscan,
+      estimateSize,
+      initialScroll
+    }) {
+      const parentRef = useRef(null);
+      const initialScrollStateRef = useRef({
+        hasApplied: false,
+        attempts: 0
+      });
+      const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => estimateSize,
+        overscan,
+        getItemKey: (index) => rows[index]?.key ?? index,
+        anchorTo: "end",
+        followOnAppend: true,
+        scrollEndThreshold: DEFAULT_VIRTUALIZE_SCROLL_END_THRESHOLD,
+        useFlushSync: false,
+        // Guards against the hidden-ancestor cache-poisoning mechanism
+        // `resolveGuardedMeasurement`'s doc and `virtualize.ts`'s composition rules describe —
+        // NOT `enabled: false`, which virtual-core 3.17.1 wires to WIPE
+        // `itemSizeCache`/`measurementsCache` entirely (`getMeasurements`'s `!enabled` branch)
+        // rather than pause measurement, so toggling it off/on around a collapse would be
+        // strictly worse than the bug it was meant to fix.
+        measureElement: (element, entry, instance) => resolveGuardedMeasurement(
+          instance,
+          element,
+          defaultMeasureElement(element, entry, instance)
+        )
+      });
+      useLayoutEffect(() => {
+        applyInitialScroll(
+          initialScrollStateRef.current,
+          initialScroll,
+          rows.length,
+          () => parentRef.current?.offsetHeight ?? 0,
+          () => virtualizer.scrollToEnd({ behavior: "auto" }),
+          () => isContainerAtEnd(parentRef.current, DEFAULT_VIRTUALIZE_SCROLL_END_THRESHOLD)
+        );
+      });
+      return (
+        // theme-allow — 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)`
+              },
+              children: row.node
+            },
+            row.key
+          );
+        }) }) })
+      );
+    }
+    return { default: VirtualizedRowsInner };
+  }).catch(() => ({ default: NonVirtualizedRows }))
+);
+function VirtualizeSuspenseFallback({ height }) {
+  return /* @__PURE__ */ jsx(Box, { style: { height, overflow: "auto" } });
+}
+function VirtualizedTranscript(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(VirtualizeSuspenseFallback, { height: props.height }), children: /* @__PURE__ */ jsx(LazyVirtualizedRows, { ...props }) });
+}
 const EMPTY_RENDERERS = {};
-function ThreadTranscript({
-  messages,
-  liveParts,
-  liveStatus,
-  renderers: renderersProp,
-  fallbackRenderer = DEFAULT_FALLBACK_RENDERER
-}) {
+function useStableCallback(callback) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  const stable = useMemo(
+    () => (...args) => callbackRef.current?.(...args),
+    []
+  );
+  return callback === void 0 ? void 0 : stable;
+}
+function ThreadTranscript(props) {
+  const {
+    messages,
+    liveParts,
+    liveStatus,
+    renderers: renderersProp,
+    fallbackRenderer = DEFAULT_FALLBACK_RENDERER,
+    affordances: affordancesProp,
+    groupConsecutive = true
+  } = props;
+  const virtualized = resolveVirtualize(props);
   const renderers = useMemo(() => renderersProp ?? EMPTY_RENDERERS, [renderersProp]);
   const liveMessage = useMemo(() => {
     if (liveParts === void 0 || liveParts.length === 0) return null;
     return { id: "__live__", role: "assistant", parts: liveParts, createdAt: 0 };
   }, [liveParts]);
-  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-    messages.map((message) => /* @__PURE__ */ jsx(
-      MessageBlock,
-      {
-        message,
-        renderers,
-        fallbackRenderer
-      },
-      message.id
-    )),
-    liveMessage !== null && /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-atomic": "false", "aria-relevant": "additions", children: /* @__PURE__ */ jsx(
-      MessageBlock,
+  const lastAssistantMessageId = useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i -= 1) {
+      const candidate = messages[i];
+      if (candidate?.role === "assistant") return candidate.id;
+    }
+    return null;
+  }, [messages]);
+  const stableOnRegenerate = useStableCallback(affordancesProp?.onRegenerate);
+  const actions = affordancesProp?.actions;
+  const resolvedAffordances = useMemo(
+    () => ({
+      timestamp: affordancesProp?.timestamp ?? DEFAULT_AFFORDANCES.timestamp,
+      copy: affordancesProp?.copy ?? DEFAULT_AFFORDANCES.copy,
+      // `exactOptionalPropertyTypes` forbids assigning a possibly-`undefined` value to an optional
+      // property directly — spread each field in only when it is actually present, rather than
+      // widening `MessageAffordances` itself to accept an explicit `undefined`.
+      ...stableOnRegenerate !== void 0 && { onRegenerate: stableOnRegenerate },
+      ...actions !== void 0 && { actions }
+    }),
+    [affordancesProp?.timestamp, affordancesProp?.copy, stableOnRegenerate, actions]
+  );
+  const settledRows = useMemo(() => {
+    const out = [];
+    messages.forEach((message, index) => {
+      out.push({
+        key: message.id,
+        node: /* @__PURE__ */ jsx(
+          MessageBlock,
+          {
+            message,
+            renderers,
+            fallbackRenderer,
+            grouped: groupConsecutive && isConsecutiveWithPredecessor(message, messages[index - 1]),
+            isLastAssistant: message.id === lastAssistantMessageId,
+            affordances: resolvedAffordances
+          }
+        )
+      });
+    });
+    return out;
+  }, [
+    messages,
+    renderers,
+    fallbackRenderer,
+    groupConsecutive,
+    lastAssistantMessageId,
+    resolvedAffordances
+  ]);
+  const liveRow = useMemo(() => {
+    if (liveMessage === null) return null;
+    return {
+      key: liveMessage.id,
+      node: /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-atomic": "false", "aria-relevant": "additions", children: /* @__PURE__ */ jsx(
+        MessageBlock,
+        {
+          message: liveMessage,
+          streaming: liveStatus === "streaming",
+          renderers,
+          fallbackRenderer
+        }
+      ) })
+    };
+  }, [liveMessage, liveStatus, renderers, fallbackRenderer]);
+  const rows = useMemo(
+    () => liveRow === null ? settledRows : [...settledRows, liveRow],
+    [settledRows, liveRow]
+  );
+  if (virtualized !== null) {
+    return /* @__PURE__ */ jsx(
+      VirtualizedTranscript,
       {
-        message: liveMessage,
-        streaming: liveStatus === "streaming",
-        renderers,
-        fallbackRenderer
+        rows,
+        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
       }
-    ) })
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsx(Stack, { gap: "sm", children: rows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: row.node }, row.key)) });
 }
 export {
+  MAX_INITIAL_SCROLL_ATTEMPTS,
   ThreadTranscript,
+  applyInitialScroll,
   messageBlockRenderCounter,
+  nonVirtualizedRowsFallback,
+  resolveGuardedMeasurement,
+  resolveInitialScrollAction,
   threadPartRenderers
 };

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=thread-message.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thread-message.test.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-message.test.tsx"],"names":[],"mappings":""}

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;AAyHzD,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;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"}

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

@@ -2,26 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Badge, Group, Skeleton, Stack, Text, UnstyledButton } from "@mantine/core";
 import { useHover } from "@mantine/hooks";
 import { alpha, VX } from "../tokens/index.js";
+import { formatRelativeTime } from "./relative-time.js";
 const STATUS_BADGE = {
   attention: { label: "Needs review", statusToken: VX.status.warn },
   error: { label: "Failed", statusToken: VX.status.bad }
 };
-const RELATIVE_TIME_FORMAT = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-const RELATIVE_TIME_UNITS = [
-  { unit: "year", ms: 31536e6 },
-  { unit: "month", ms: 2628e6 },
-  { unit: "week", ms: 6048e5 },
-  { unit: "day", ms: 864e5 },
-  { unit: "hour", ms: 36e5 },
-  { unit: "minute", ms: 6e4 }
-];
-function formatRelativeTime(timestamp) {
-  const diffMs = timestamp - Date.now();
-  const absMs = Math.abs(diffMs);
-  if (absMs < 6e4) return "just now";
-  const unit = RELATIVE_TIME_UNITS.find(({ ms }) => absMs >= ms) ?? RELATIVE_TIME_UNITS.at(-1);
-  return RELATIVE_TIME_FORMAT.format(Math.round(diffMs / unit.ms), unit.unit);
-}
 function OutcomeSkeleton() {
   return /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
     /* @__PURE__ */ jsx(Skeleton, { height: 14, width: "60%", radius: "sm" }),

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

@@ -12,8 +12,20 @@ export type ThreadWorkspaceProps = {
     readonly resolveOutcome: OutcomeResolver<AgentPart>;
     /** Placeholder for the new-thread composer pinned under the feed. */
     readonly newThreadPlaceholder?: string;
-    /** Rendered in place of the feed while there are no threads yet. */
+    /**
+     * 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;
 };
 /**
  * A two-pane master-detail thread workspace: a scrollable feed of threads with an anchored
@@ -23,5 +35,5 @@ export type ThreadWorkspaceProps = {
  * @example
  * <ThreadWorkspace useThreads={useThreads} transport={transport} resolveOutcome={heuristicOutcome} />
  */
-export declare function ThreadWorkspace({ useThreads, transport, resolveOutcome, newThreadPlaceholder, emptyState, }: ThreadWorkspaceProps): JSX.Element;
+export declare function ThreadWorkspace({ useThreads, transport, resolveOutcome, newThreadPlaceholder, emptyState, errorState, }: ThreadWorkspaceProps): JSX.Element;
 //# sourceMappingURL=thread-workspace.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"thread-workspace.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-workspace.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AASxF,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,YAAY,CAAA;IACvC,mEAAmE;IACnE,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IACrD,mEAAmE;IACnE,QAAQ,CAAC,cAAc,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACnD,qEAAqE;IACrE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAA;IACtC,oEAAoE;IACpE,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;CAChC,CAAA;AAgBD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,UAAU,GACX,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAwFpC"}
+{"version":3,"file":"thread-workspace.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-workspace.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAUxF,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,YAAY,CAAA;IACvC,mEAAmE;IACnE,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IACrD,mEAAmE;IACnE,QAAQ,CAAC,cAAc,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACnD,qEAAqE;IACrE,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAA;IACtC;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;IAC/B;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;CAChC,CAAA;AA4DD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,UAAU,EACV,UAAU,GACX,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CA8FpC"}

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

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Divider, Flex, Stack, Text } from "@mantine/core";
+import { Box, Divider, Flex, Skeleton, Stack, Text } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 import { useAgentThreadRuns } from "../agent/index.js";
+import { VX } from "../tokens/index.js";
 import { Composer } from "./composer.js";
 import { ThreadDetailPanel } from "./thread-detail-panel.js";
 import { ThreadFeed } from "./thread-feed.js";
@@ -13,12 +14,37 @@ function FeedEmptyState() {
     /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", ta: "center", children: "Send a message below to start your first thread." })
   ] });
 }
+function FeedHydratingState() {
+  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", p: "sm", "data-testid": "thread-workspace-hydrating", children: [
+    /* @__PURE__ */ jsx(Skeleton, { height: 54, radius: "sm" }),
+    /* @__PURE__ */ jsx(Skeleton, { height: 54, radius: "sm" }),
+    /* @__PURE__ */ jsx(Skeleton, { height: 54, radius: "sm" })
+  ] });
+}
+function FeedErrorState() {
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      align: "center",
+      justify: "center",
+      gap: 4,
+      h: "100%",
+      p: "xl",
+      "data-testid": "thread-workspace-error",
+      children: [
+        /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", style: { color: VX.status.bad }, children: "Couldn't load threads" }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", ta: "center", children: "Something went wrong loading your threads. Try refreshing the page." })
+      ]
+    }
+  );
+}
 function ThreadWorkspace({
   useThreads,
   transport,
   resolveOutcome,
   newThreadPlaceholder,
-  emptyState
+  emptyState,
+  errorState
 }) {
   const store = useThreads();
   const runs = useAgentThreadRuns({ transport, store, resolveOutcome });
@@ -50,12 +76,12 @@ function ThreadWorkspace({
     runs.retry(store.activeId);
   };
   const feed = /* @__PURE__ */ jsxs(Flex, { direction: "column", h: "100%", style: { overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsx(Box, { style: { flex: 1, minHeight: 0 }, children: store.threads.length === 0 ? emptyState ?? /* @__PURE__ */ jsx(FeedEmptyState, {}) : /* @__PURE__ */ jsx(ThreadFeed, { threads, activeId: store.activeId, onSelect: handleSelect }) }),
+    /* @__PURE__ */ jsx(Box, { style: { flex: 1, minHeight: 0 }, children: threads.length === 0 ? store.hydrated ? emptyState ?? /* @__PURE__ */ jsx(FeedEmptyState, {}) : store.error !== void 0 ? errorState ?? /* @__PURE__ */ jsx(FeedErrorState, {}) : /* @__PURE__ */ jsx(FeedHydratingState, {}) : /* @__PURE__ */ jsx(ThreadFeed, { threads, activeId: store.activeId, onSelect: handleSelect }) }),
     /* @__PURE__ */ jsx(Divider, { color: "var(--vx-divider)" }),
     /* @__PURE__ */ jsx(Box, { p: "sm", children: /* @__PURE__ */ jsx(
       Composer,
       {
-        onSubmit: handleNewThread,
+        onSubmit: ({ text }) => handleNewThread(text),
         ...newThreadPlaceholder !== void 0 ? { placeholder: newThreadPlaceholder } : {}
       }
     ) })

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=thread-workspace.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thread-workspace.test.d.ts","sourceRoot":"","sources":["../../src/agent-chat/thread-workspace.test.tsx"],"names":[],"mappings":""}

package/dist/agent-chat/tool-chip.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tool-chip.test.d.ts.map

package/dist/agent-chat/tool-chip.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-chip.test.d.ts","sourceRoot":"","sources":["../../src/agent-chat/tool-chip.test.tsx"],"names":[],"mappings":""}