basalt-ui 1.12.0 → 1.14.0

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

@@ -0,0 +1,59 @@
+/**
+ * MessageAffordances — the per-message hover-row/action contract shared by `ThreadTranscript` and
+ * a virtualized `ThreadFeedRow` (both render `MessageBlock`, so the affordance surface lives here
+ * rather than being redeclared on each consumer).
+ *
+ * Type-only module — the rendering (the actual hover row, copy button, regenerate button) lives in
+ * `thread-message.tsx`. `MessageAffordances` itself IS public (re-exported, type-only, from the
+ * agent-chat barrel and the root): it is named in `ThreadTranscriptProps.affordances` and
+ * `ThreadFeedRowProps.affordances`, so a consumer has to be able to name it. `DEFAULT_AFFORDANCES`
+ * stays internal — resolving unset fields is the components' job, not the consumer's.
+ */
+import type { ReactNode } from 'react';
+import type { ChatMessage, TranscriptPart } from '../agent/index.js';
+export type MessageAffordances = {
+    /**
+     * How the per-message timestamp renders.
+     * @default 'relative'
+     */
+    readonly timestamp?: 'relative' | 'absolute' | 'none';
+    /**
+     * Whether a copy action is offered on the hover row. Copies the message's COALESCED text (the
+     * same merged/de-duplicated text `coalesceParts` produces for display), not the raw `parts`
+     * array — a message can accumulate multiple adjacent/by-id text parts while streaming, and
+     * copying the raw parts would either duplicate text or copy fragments the user never saw
+     * assembled.
+     * @default true
+     */
+    readonly copy?: boolean;
+    /**
+     * Regenerate action, shown on the LAST ASSISTANT message only (never on earlier turns, never on
+     * user messages). Receives that message's `id`. `useAgentThreadRuns`'s `retry` is
+     * THREAD-keyed (`retry: (threadId: string) => void`), replaying the last user input for the
+     * whole thread — the consumer bridges this messageId-keyed callback to that thread-keyed retry;
+     * the framework only ever hands back the messageId, it does not know about threads.
+     */
+    readonly onRegenerate?: (messageId: string) => void;
+    /**
+     * Extra actions appended to the hover row, after the built-in copy/regenerate actions.
+     *
+     * This is a RENDER prop, not an event handler — it is called during render, once per message,
+     * and its return value is rendered. That means it is treated differently from `onRegenerate`:
+     * `onRegenerate` is identity-stabilized internally (a fresh inline literal every render costs
+     * nothing), while `actions` is compared by REFERENCE, because its reference is the only signal
+     * that its output may have changed. A fresh inline `actions={() => …}` literal therefore
+     * re-renders every message block on every render of the transcript. That is correct — an action
+     * whose output depends on consumer state (a pin/star toggle) must be allowed to update — but on
+     * a long thread it is worth avoiding: wrap `actions` in the consumer's own `useCallback`, keyed
+     * on whatever state it actually reads.
+     */
+    readonly actions?: (ctx: {
+        readonly message: ChatMessage<TranscriptPart>;
+    }) => ReactNode;
+};
+/**
+ * Resolved defaults for the optional {@link MessageAffordances} fields — one place, so
+ * `ThreadTranscript` and a virtualized `ThreadFeedRow` cannot drift on what "unset" means.
+ */
+export declare const DEFAULT_AFFORDANCES: Required<Pick<MessageAffordances, 'timestamp' | 'copy'>>;
+//# sourceMappingURL=message-affordances.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message-affordances.d.ts","sourceRoot":"","sources":["../../src/agent-chat/message-affordances.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE3D,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAA;IACrD;;;;;;;OAOG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;;OAMG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,cAAc,CAAC,CAAA;KAAE,KAAK,SAAS,CAAA;CACzF,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,IAAI,CAAC,kBAAkB,EAAE,WAAW,GAAG,MAAM,CAAC,CAGxF,CAAA"}

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

@@ -0,0 +1,7 @@
+const DEFAULT_AFFORDANCES = {
+  timestamp: "relative",
+  copy: true
+};
+export {
+  DEFAULT_AFFORDANCES
+};

package/dist/agent-chat/relative-time.d.ts

@@ -0,0 +1,27 @@
+/**
+ * formatRelativeTime — dependency-free relative-time formatting (no date-fns).
+ *
+ * Shared between `ThreadOutcomeCard` (inbox row timestamps) and `ThreadTranscript` (per-message
+ * timestamps). 'en'-hardcoded for now — see the module-level note below for the deferred locale
+ * seam.
+ *
+ * Internal to `agent-chat/` — not part of the public barrel.
+ */
+/**
+ * Formats an epoch-ms timestamp as a short relative string ("3 hours ago", "just now").
+ *
+ * A non-finite `timestamp` — `NaN`, `±Infinity`, or a non-number value that slipped past the
+ * `ChatMessage.createdAt: number` type at runtime (an ISO string or `undefined`/`null` from a
+ * hand-rolled `ThreadsStoreAdapter`, or from JSON-deserialized `localStorage` state) renders as an
+ * empty string rather than reaching `Intl.RelativeTimeFormat.format`, which throws a `RangeError`
+ * on any non-finite input. This is render-path code — one bad `createdAt` on one message must not
+ * blank the whole transcript (the standing rule `spliceText`/`coalesceParts` already hold) — so it
+ * degrades instead of throwing, and warns in dev, matching `mergePart`'s clamp-and-warn precedent
+ * (`clampOffset` in `../agent/merge.ts`). The warning is NOT deduplicated, also matching that
+ * precedent — but note the call sites differ: `clampOffset` runs once per wire event, whereas this
+ * runs during render, once per message, so a single bad `createdAt` in a long transcript warns
+ * once per message per render. That is loud on purpose (a `createdAt` that isn't a number is an
+ * adapter bug worth fixing, not worth muting), and it costs nothing in production.
+ */
+export declare function formatRelativeTime(timestamp: number): string;
+//# sourceMappingURL=relative-time.d.ts.map

package/dist/agent-chat/relative-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relative-time.d.ts","sourceRoot":"","sources":["../../src/agent-chat/relative-time.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAgBH;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAc5D"}

package/dist/agent-chat/relative-time.js

@@ -0,0 +1,27 @@
+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) {
+  if (!Number.isFinite(timestamp)) {
+    if (process.env["NODE_ENV"] !== "production") {
+      console.warn(
+        `[basalt] formatRelativeTime: non-finite timestamp ${String(timestamp)} \u2014 rendering empty string`
+      );
+    }
+    return "";
+  }
+  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);
+}
+export {
+  formatRelativeTime
+};

package/dist/agent-chat/relative-time.test.d.ts

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

package/dist/agent-chat/relative-time.test.d.ts.map

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

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

@@ -0,0 +1,65 @@
+import type { JSX } from 'react';
+import type { AgentThread, ForeignPart, PartRenderer, PartRenderers, StreamStatus, TranscriptPart } from '../agent/index.js';
+import type { ComposerProps, ComposerSubmit } from './composer.js';
+import type { MessageAffordances } from './message-affordances.js';
+import type { VirtualizeProps } from './virtualize.js';
+type ThreadFeedRowBase = {
+    /**
+     * The thread this row projects. Typed against `AgentThread<TranscriptPart>` — not the plain,
+     * `AgentPart`-defaulted `AgentThread` `ThreadFeed` uses, and not a type parameter. A consumer
+     * with a registered `ForeignPart` union passes its own threads straight through with no generic
+     * argument and no cast, because `TranscriptPart` is the widest part type and arrays are
+     * structurally covariant: `AgentPart[]` and `ConsumerPart[]` both widen into `TranscriptPart[]`.
+     * Widening the row is what lets both `ThreadFeed` (non-generic, `AgentThread<AgentPart>`) and a
+     * part-registry consumer feed the same component.
+     */
+    readonly thread: AgentThread<TranscriptPart>;
+    /** Whether this row's transcript+composer body is currently visible. */
+    readonly expanded: boolean;
+    /** Called with the thread's id when the header is clicked/activated. */
+    readonly onToggle: (id: string) => void;
+    /** 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. */
+    readonly liveStatus?: StreamStatus;
+    /** Consumer renderers keyed by part.type, forwarded to `ThreadTranscript`. */
+    readonly renderers?: PartRenderers;
+    /** Forwarded to `ThreadTranscript` — see its own prop doc. */
+    readonly fallbackRenderer?: PartRenderer<ForeignPart>;
+    /**
+     * Per-message hover-row contract (timestamp/copy/regenerate/actions), forwarded verbatim to the
+     * row's `ThreadTranscript`. Shared with it via `message-affordances.ts` so the two cannot drift
+     * on what an unset field means.
+     */
+    readonly affordances?: MessageAffordances;
+    /** Forwarded to `ThreadTranscript` — suppresses role label + chrome on same-speaker runs.
+     * @default true */
+    readonly groupConsecutive?: boolean;
+    /** Called with the composer's submit payload. */
+    readonly onSend: (payload: ComposerSubmit) => void;
+    /** Shown as the composer's Stop action while `liveStatus === 'streaming'`. */
+    readonly onStop?: () => void;
+    /** Forwarded to the row's `Composer`, minus the three props this component always wires itself
+     * (`onSubmit`, `onStop`, and `streaming` — the last derived from `liveStatus` so a consumer can't
+     * pass one that disagrees with the row's own live status). */
+    readonly composerProps?: Omit<ComposerProps, 'onSubmit' | 'onStop' | 'streaming'>;
+};
+/**
+ * `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.
+ */
+export type ThreadFeedRowProps = ThreadFeedRowBase & VirtualizeProps;
+/**
+ * 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
+ * invariant this component exists to guarantee.
+ *
+ * @example
+ * <ThreadFeedRow thread={thread} expanded={expanded} onToggle={onToggle} onSend={onSend} />
+ */
+export declare function ThreadFeedRow(props: ThreadFeedRowProps): JSX.Element;
+export {};
+//# sourceMappingURL=thread-feed-row.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Group, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useState } from "react";
+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";
+function ChevronGlyph({ expanded }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 14,
+      height: 14,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      style: {
+        transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+        transition: "transform 120ms ease",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M9 6l6 6l-6 6",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function rowTitle(thread) {
+  return thread.outcome?.title ?? "Untitled thread";
+}
+function ThreadFeedRow(props) {
+  const {
+    thread,
+    expanded,
+    onToggle,
+    liveParts,
+    liveStatus,
+    renderers,
+    fallbackRenderer,
+    affordances,
+    groupConsecutive,
+    onSend,
+    onStop,
+    composerProps
+  } = props;
+  const virtualized = resolveVirtualize(props);
+  const virtualizeProps = virtualized === null ? {} : { virtualize: virtualized.options, height: virtualized.height };
+  const [hasOpened, setHasOpened] = useState(expanded);
+  if (expanded && !hasOpened) {
+    setHasOpened(true);
+  }
+  const summary = thread.outcome?.summary ?? "";
+  const streaming = liveStatus === "streaming";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        borderRadius: VX.radiusCard,
+        boxShadow: VX.shadowCard,
+        backgroundColor: VX.surface.panel,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          UnstyledButton,
+          {
+            onClick: () => onToggle(thread.id),
+            w: "100%",
+            "aria-expanded": expanded,
+            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: [
+              /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    fw: 550,
+                    lineClamp: 1,
+                    style: {
+                      fontFamily: "var(--basalt-font-head)",
+                      fontSize: VX.text.md,
+                      fontStretch: "88%"
+                    },
+                    children: rowTitle(thread)
+                  }
+                ),
+                summary.length > 0 && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 1, children: summary })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: {
+                    fontFamily: "var(--basalt-font-mono)",
+                    fontSize: VX.text.micro,
+                    color: VX.faint,
+                    flexShrink: 0
+                  },
+                  children: formatRelativeTime(thread.updatedAt)
+                }
+              ),
+              /* @__PURE__ */ jsx(ChevronGlyph, { expanded })
+            ] })
+          }
+        ),
+        hasOpened && /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-testid": "thread-feed-row-body",
+            style: {
+              display: expanded ? "block" : "none",
+              padding: "var(--mantine-spacing-sm)",
+              paddingTop: 0
+            },
+            children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+              /* @__PURE__ */ jsx(
+                ThreadTranscript,
+                {
+                  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
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Composer,
+                {
+                  onSubmit: onSend,
+                  streaming,
+                  ...onStop !== void 0 ? { onStop } : {},
+                  ...composerProps
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ThreadFeedRow
+};

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

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

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

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

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

@@ -1,18 +1,47 @@
-import type { JSX } from 'react';
+import type { JSX, ReactNode } from 'react';
 import type { AgentThread } from '../agent/index.js';
+import type { ComposerSubmit } from './composer.js';
 export type ThreadFeedProps = {
     readonly threads: AgentThread[];
     /** The currently open thread id, or null when none is selected. */
     readonly activeId: string | null;
-    /** Called with a thread's id when its row is selected. */
+    /** Called with a thread's id when its row is selected. Never called to report a collapse — see
+     * `variant`'s doc for how the built-in `'inline'` row's expand/collapse is decoupled from this. */
     readonly onSelect: (id: string) => void;
+    /**
+     * Row shape: `'outcome'` (default) renders today's `ThreadOutcomeCard` inbox row, unchanged.
+     * `'inline'` renders `ThreadFeedRow`, the Slack-style inline-expanding row, wired to this feed's
+     * own `activeId` for which row is open (so at most one row is open at a time, mirroring the
+     * inbox's single-selection model) — with its OWN collapse tracking layered on top, not a raw
+     * pass-through of `onSelect` as `onToggle`. `onSelect` is documented as a selection event, and
+     * collapsing a row that remains the active thread isn't one; wiring `onToggle={onSelect}`
+     * directly (the previous shape) meant a plain `onSelect={setActiveId}` consumer could never
+     * collapse a row, since re-selecting the same id is a no-op state update. Collapsing here is
+     * local, UI-only state, reset whenever `activeId` changes to point at a DIFFERENT thread. Since
+     * this reset is a `useEffect` keyed on `activeId`, re-driving it to the SAME id from outside
+     * this component is a no-op React dep comparison, so it does not clear the override.
+     */
+    readonly variant?: 'outcome' | 'inline';
+    /**
+     * Wires the built-in `'inline'` row's composer to a real send channel — called with the thread
+     * and the composer's submit payload. Omit it and the row's composer renders disabled (visibly
+     * inert) instead of a live control that silently discards whatever is typed into it; a consumer
+     * that needs the composer live must supply this (or `renderRow`, for full control over the row).
+     */
+    readonly onSend?: (thread: AgentThread, payload: ComposerSubmit) => void;
+    /** Overrides row rendering entirely, for BOTH variants — when supplied, this is called for every
+     * thread instead of either built-in row. Gives full control over live-run wiring
+     * (`onStop`/`liveParts`/`liveStatus`) the built-in `'inline'` row doesn't expose; see `variant`
+     * and `onSend`. */
+    readonly renderRow?: (thread: AgentThread) => ReactNode;
 };
 /**
- * A scrollable feed of thread rows, animated on add/remove/reorder. Each row renders via
- * `ThreadOutcomeCard`; selection highlighting is derived from `activeId`.
+ * A scrollable feed of thread rows, animated on add/remove/reorder. Row content comes from
+ * `renderRow` when supplied, else from the built-in `variant` row (`ThreadOutcomeCard` or
+ * `ThreadFeedRow`) — see `ThreadFeedProps` for the full contract.
  *
  * @example
  * <ThreadFeed threads={threads} activeId={activeId} onSelect={(id) => select(id)} />
  */
-export declare function ThreadFeed({ threads, activeId, onSelect }: ThreadFeedProps): JSX.Element;
+export declare function ThreadFeed({ threads, activeId, onSelect, variant, onSend, renderRow, }: 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":"AAgBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAI3C,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,0DAA0D;IAC1D,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA4CxF"}
+{"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"}

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

@@ -1,21 +1,61 @@
 import { jsx } from "react/jsx-runtime";
-import { ScrollArea, Stack } from "@mantine/core";
+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 { ThreadFeedRow } from "./thread-feed-row.js";
 import { ThreadOutcomeCard } from "./thread-outcome-card.js";
-function ThreadFeed({ threads, activeId, onSelect }) {
-  const reduceMotion = useReducedMotion();
-  if (reduceMotion) {
-    return /* @__PURE__ */ jsx(ScrollArea, { style: { height: "100%" }, children: /* @__PURE__ */ jsx(Stack, { gap: "sm", p: "sm", children: threads.map((thread) => /* @__PURE__ */ jsx(
-      ThreadOutcomeCard,
+function noopSend() {
+}
+function defaultRow(thread, variant, activeId, collapsedId, onToggle, onSelect, onSend) {
+  if (variant === "inline") {
+    const expanded = thread.id === activeId && thread.id !== collapsedId;
+    return /* @__PURE__ */ jsx(
+      ThreadFeedRow,
       {
         thread,
-        selected: thread.id === activeId,
-        onSelect: () => onSelect(thread.id)
-      },
-      thread.id
-    )) }) });
+        expanded,
+        onToggle,
+        onSend: onSend !== void 0 ? (payload) => onSend(thread, payload) : noopSend,
+        ...onSend === void 0 ? { composerProps: { disabled: true } } : {}
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ThreadOutcomeCard,
+    {
+      thread,
+      selected: thread.id === activeId,
+      onSelect: () => onSelect(thread.id)
+    }
+  );
+}
+function ThreadFeed({
+  threads,
+  activeId,
+  onSelect,
+  variant = "outcome",
+  onSend,
+  renderRow
+}) {
+  const reduceMotion = useReducedMotion();
+  const [collapsedId, setCollapsedId] = useState(null);
+  useEffect(() => {
+    setCollapsedId(null);
+  }, [activeId]);
+  function handleInlineToggle(id) {
+    const isOpen = id === activeId && id !== collapsedId;
+    if (isOpen) {
+      setCollapsedId(id);
+      return;
+    }
+    setCollapsedId(null);
+    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(
     motion.div,
@@ -25,14 +65,7 @@ function ThreadFeed({ threads, activeId, onSelect }) {
       animate: { opacity: 1, y: 0 },
       exit: { opacity: 0, scale: 0.97 },
       transition: MOTION_SPRING,
-      children: /* @__PURE__ */ jsx(
-        ThreadOutcomeCard,
-        {
-          thread,
-          selected: thread.id === activeId,
-          onSelect: () => onSelect(thread.id)
-        }
-      )
+      children: rowFor(thread)
     },
     thread.id
   )) }) }) });

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

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

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

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