@tangle-network/sandbox-ui 3.0.2 → 4.0.0

package/README.md

@@ -120,53 +120,6 @@ Pass service-observed `readiness` and enforced `access` to show their status ins
 Show process and port state beside the pane if your runtime exposes those separately.
 Do not infer either state from the preview URL or iframe load.
 
-### Show a shared agent messaging connection
-
-Use `AgentMessagingConnection` in any app that enrolls a member with a private agent target and a shared messaging route.
-The host owns authentication, the member grant, canonical target resolution, and route readiness.
-
-```tsx
-import {
-  AgentMessagingConnection,
-  type AgentEnrollmentViewState,
-  type SharedMessagingRouteViewState,
-} from "@tangle-network/sandbox-ui/connections";
-
-type MessagingConnectionProps = {
-  enrollment: AgentEnrollmentViewState;
-  route: SharedMessagingRouteViewState;
-  enroll: () => Promise<void>;
-  openMessages: () => void;
-  refresh: () => Promise<void>;
-};
-
-export function MessagingConnection({
-  enrollment,
-  route,
-  enroll,
-  openMessages,
-  refresh,
-}: MessagingConnectionProps) {
-  return (
-    <AgentMessagingConnection
-      enrollment={enrollment}
-      route={route}
-      onEnroll={enroll}
-      onOpenMessages={openMessages}
-      onRetry={refresh}
-    />
-  );
-}
-```
-
-Report `eligible` only after the host checks the member's current grant.
-Report `enrolled` only after it resolves the authorized, canonical private agent target.
-Give the component display labels, not raw enrollment, instance, sandbox, or session IDs.
-Report route `ready` only when the shared route is valid for this application and member.
-An attached provider line on its own does not prove that state.
-The component never attaches, buys, or reassigns a provider identity.
-It shows a messaging action only when both the target and route are confirmed.
-
 ### Fonts
 
 sandbox-ui references the following font families in its design tokens but does **not** bundle them — consumer apps must load the fonts themselves. This is deliberate: a URL `@import` inside a library CSS bundle breaks when downstream apps chain-import the stylesheet (see CHANGELOG 0.10.9 for the full reasoning).

package/dist/AgentTree-D4d06rfH.js

@@ -0,0 +1,293 @@
+import { t as VirtualList } from "./VirtualList-DcSGbEtA.js";
+import { C as ms, D as toolKey, E as textOf, T as roleOf, a as isLifecycle, c as anchorsOf, d as collapseIdleTurns, f as collapsePolls, g as eventMatches, h as callsOf, l as answeredBy, m as thinkingMarkers, n as ConversationRowView, o as rowItems, p as quietThinking, t as useFollowTail, u as collapseHollowTurns } from "./use-follow-tail-DZFn7QDO.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { AgentTimelineColumn, agentTimelineStepKind } from "@tangle-network/ui/chat/agent-timeline";
+import { RunStatusIcon, runStatus, statusMeta } from "@tangle-network/ui/run/status-meta";
+// src/run/record/Conversation.tsx
+function Conversation({ index, actor, cutoff, query, category, selected, openSource, flags, onFlag, lifecycle = false, live = false, follow = live, opening }) {
+	const [opened, setOpened] = useState(() => {
+		const at = anchorsOf(index.events);
+		return new Set(index.events.filter((event) => event.detail.promptKind === "initial").map((event) => `prompt:${at.get(event.id) ?? event.id}`));
+	});
+	const scroll = useRef(null);
+	const anchors = useMemo(() => anchorsOf(index.events), [index]);
+	const anchor = useCallback((event) => anchors.get(event.id) ?? event.id, [anchors]);
+	const opener = (event) => openSource ? (sha256) => openSource(sha256, event) : void 0;
+	const setOpen = (key, open) => setOpened((current) => {
+		if (current.has(key) === open) return current;
+		const next = new Set(current);
+		if (open) next.add(key);
+		else next.delete(key);
+		return next;
+	});
+	const paired = (event, call) => {
+		const key = toolKey(event.node, call.id);
+		return index.calls.get(key)?.length === 1 ? index.results.get(key) ?? [] : [];
+	};
+	const target = useMemo(() => {
+		if (!selected) return void 0;
+		const event = index.byEvent.get(selected);
+		if (event?.detail.toolCallId !== void 0) {
+			const calls = index.calls.get(toolKey(event.node, event.detail.toolCallId));
+			if (calls?.length === 1) return calls[0].event.id;
+		}
+		return selected;
+	}, [selected, index]);
+	const items = useMemo(() => (index.byActor.get(actor) ?? []).filter((event) => {
+		if (ms(event.at) > cutoff) return false;
+		if (event.id === target) return true;
+		if (isLifecycle(event)) return lifecycle && eventMatches(event, index, query, category);
+		if (event.detail.toolCallId !== void 0) {
+			const matching = index.calls.get(toolKey(event.node, event.detail.toolCallId));
+			if (matching?.length === 1 && ms(matching[0].event.at) <= cutoff) return false;
+		}
+		const calls = callsOf(event);
+		if (!(event.detail.role || textOf(event) || event.detail.reasoning || event.detail.responseStatus === "error" || calls.length)) return false;
+		if (event.detail.role === "assistant" && !textOf(event) && !event.detail.reasoning && !calls.length && event.detail.responseStatus !== "error" && !event.detail.contentOmitted && (!thinkingMarkers(event.detail).length || quietThinking(event.detail))) return false;
+		if (eventMatches(event, index, query, category)) return true;
+		return calls.some((call) => {
+			const key = toolKey(event.node, call.id);
+			return index.calls.get(key)?.length === 1 && (index.results.get(key) ?? []).some((result) => ms(result.at) <= cutoff && eventMatches(result, index, query, category));
+		});
+	}), [
+		index,
+		actor,
+		cutoff,
+		query,
+		category,
+		lifecycle,
+		target
+	]);
+	const shown = useMemo(() => {
+		if (!opening?.text || query || category !== "all" || items.some((event) => event.detail.role === "user" && event.detail.promptKind !== "steering")) return items;
+		const first = items[0]?.at ?? opening.at;
+		return [{
+			id: `${actor}:opening`,
+			node: actor,
+			at: first < opening.at ? first : opening.at,
+			kind: "message",
+			category: "other",
+			label: "prompt",
+			detail: {
+				role: "user",
+				publicText: opening.text,
+				promptKind: "initial"
+			}
+		}, ...items];
+	}, [
+		items,
+		opening,
+		actor,
+		query,
+		category
+	]);
+	const rows = useMemo(() => collapseIdleTurns(collapseHollowTurns(collapsePolls(shown, {
+		callsOf,
+		answered: (event, id) => answeredBy(index.results.get(toolKey(event.node, id))),
+		keyOf: anchor
+	}), {
+		callsOf,
+		captured: (event, id) => (index.results.get(toolKey(event.node, id)) ?? []).some((result) => textOf(result)),
+		keyOf: anchor
+	}), callsOf), [
+		shown,
+		index,
+		anchor
+	]);
+	const thinkingSpan = useMemo(() => {
+		const spans = /* @__PURE__ */ new Map();
+		let previous = null;
+		for (const event of index.byActor.get(actor) ?? []) {
+			const at = ms(event.at);
+			if (previous !== null && Number.isFinite(at) && thinkingMarkers(event.detail).length) spans.set(event.id, Math.max(0, at - previous));
+			if (Number.isFinite(at)) previous = at;
+		}
+		return spans;
+	}, [index, actor]);
+	const rowOf = useMemo(() => new Map(rows.flatMap((row) => (row.kind === "event" ? [row.event] : row.events).map((event) => [event.id, row.key]))), [rows]);
+	const retained = (index.byActor.get(actor) ?? []).some((item) => !isLifecycle(item) && (item.detail.role || textOf(item) || callsOf(item).length));
+	const tail = rows.at(-1), event = tail?.kind === "event" ? tail.event : tail?.events.at(-1);
+	const { following } = useFollowTail(scroll, {
+		identity: actor,
+		content: rows,
+		follow,
+		target
+	});
+	useEffect(() => {
+		if (!selected) return;
+		const event = index.byEvent.get(selected);
+		if (!event) return;
+		const keys = [`prompt:${anchor(event)}`, `reasoning:${anchor(event)}`];
+		if (event.detail.toolCallId !== void 0) for (const match of index.calls.get(toolKey(event.node, event.detail.toolCallId)) ?? []) keys.push(`tool:${anchor(match.event)}:${match.call.id}`, rowOf.get(match.event.id) ?? "");
+		for (const call of callsOf(event)) keys.push(`tool:${anchor(event)}:${call.id}`);
+		const row = rowOf.get(selected);
+		if (row?.startsWith("polls:")) keys.push(row);
+		setOpened((current) => /* @__PURE__ */ new Set([...current, ...keys.filter(Boolean)]));
+	}, [selected, index]);
+	const flagMarks = (event) => {
+		const marks = flags?.get(event.id);
+		if (!marks?.length) return null;
+		return /* @__PURE__ */ jsx("span", {
+			className: "event-flags",
+			children: marks.map((flag) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: `event-flag polarity-${flag.polarity}`,
+				title: flag.title,
+				"data-flag": flag.dimension,
+				onClick: () => onFlag?.(flag, event),
+				children: flag.dimension
+			}, `${flag.dimension}:${flag.label}`))
+		});
+	};
+	const keyOf = useCallback((row) => row.key, []);
+	const estimate = useCallback((row) => {
+		if (row.kind !== "event") return 36;
+		if (isLifecycle(row.event)) return 26;
+		return !textOf(row.event) && callsOf(row.event).length ? 16 + 36 * callsOf(row.event).length : 96;
+	}, []);
+	const context = {
+		index,
+		cutoff,
+		selected,
+		opened,
+		anchor,
+		opener,
+		setOpen,
+		flagMarks,
+		paired,
+		thinkingSpan,
+		flags,
+		live
+	};
+	const itemsOf = useMemo(() => rows.map((row) => rowItems(row, context)), [
+		rows,
+		opened,
+		cutoff,
+		selected,
+		live,
+		index,
+		thinkingSpan
+	]);
+	const turns = useMemo(() => {
+		let previous;
+		return rows.map((row) => {
+			const event = row.kind === "event" ? row.event : row.events[0];
+			const turn = event.detail.role === "assistant" && !isLifecycle(event) && (!previous || previous.detail.role === "user" || (event.detail.attempt !== void 0 ? event.detail.attempt !== previous.detail.attempt : ms(event.at) - ms(previous.at) > 12e4));
+			previous = row.kind === "event" ? event : row.events.at(-1);
+			return turn;
+		});
+	}, [rows]);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+		className: "record-conversation conversation-scroll",
+		"data-chat": true,
+		ref: scroll,
+		tabIndex: 0,
+		"aria-label": "Scrollable retained conversation",
+		children: [!rows.length && /* @__PURE__ */ jsx("p", {
+			className: "chat-empty",
+			children: query || category !== "all" ? "No messages match this filter." : retained ? "No messages at the selected time." : "Conversation not retained. Its absence does not mean the agent did no work."
+		}), /* @__PURE__ */ jsx(AgentTimelineColumn, {
+			className: "ar-chat",
+			children: /* @__PURE__ */ jsx(VirtualList, {
+				items: rows,
+				keyOf,
+				render: (row, i) => /* @__PURE__ */ jsx(ConversationRowView, {
+					row,
+					items: itemsOf[i] ?? [],
+					previous: i && itemsOf[i - 1]?.length ? agentTimelineStepKind(itemsOf[i - 1].at(-1)) : void 0,
+					turn: turns[i],
+					context
+				}),
+				scroller: scroll,
+				target: target ? rowOf.get(target) : void 0,
+				estimate,
+				arrival: live ? {
+					identity: actor,
+					id: event?.id,
+					key: tail?.key,
+					following
+				} : void 0
+			})
+		})]
+	}) });
+}
+// src/run/record/AgentTree.tsx
+/** Retained identity and recorded time define the hierarchy; labels never join sessions or invent parents. */
+function AgentTree({ index, actor, cutoff, select }) {
+	const roots = useMemo(() => {
+		const nodes = index.actors.filter((node) => node.kind !== "finding");
+		const byId = new Map(nodes.map((node) => [node.id, node]));
+		const children = /* @__PURE__ */ new Map();
+		for (const node of nodes) {
+			if (!node.parent) continue;
+			const parent = index.canonical(node.parent), siblings = children.get(parent) ?? [];
+			siblings.push(node);
+			children.set(parent, siblings);
+		}
+		const visited = /* @__PURE__ */ new Set();
+		const visit = (node) => {
+			if (visited.has(node.id)) return [];
+			visited.add(node.id);
+			return [{
+				node,
+				children: (children.get(node.id) ?? []).flatMap(visit)
+			}];
+		};
+		const roots = nodes.filter((node) => !node.parent || !byId.has(index.canonical(node.parent))).flatMap(visit);
+		for (const node of nodes) roots.push(...visit(node));
+		return roots;
+	}, [index]);
+	const renderNodes = (entries, nested = false) => /* @__PURE__ */ jsx("ul", {
+		className: nested ? "m-0 ml-3 list-none border-l border-border pl-2" : "m-0 grid list-none gap-1 p-0",
+		children: entries.map(({ node, children }) => {
+			const firstEvent = index.byActor.get(node.id)?.[0];
+			const begin = node.start ? ms(node.start) : firstEvent ? ms(firstEvent.at) : void 0;
+			const future = begin !== void 0 && begin > cutoff, pending = typeof node.end === "string" && ms(node.end) > cutoff;
+			const status = runStatus(future || pending ? "unknown" : node.status ?? "unknown");
+			const state = future ? "Not yet started" : pending ? "Not yet settled" : statusMeta(status).label;
+			return /* @__PURE__ */ jsxs("li", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "flex w-full min-w-0 items-start gap-2 rounded border border-transparent px-2 py-1.5 text-left text-sm text-foreground hover:border-border focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-pressed:border-border aria-pressed:bg-muted data-[future]:opacity-55",
+					"aria-label": "Read " + roleOf(node) + " " + node.label + " conversation. " + state + ".",
+					"aria-pressed": actor === node.id,
+					"data-node": node.id,
+					"data-future": future ? "" : void 0,
+					title: node.label + (node.assignment ? " · " + node.assignment : "") + " · " + state,
+					onClick: () => select(node.id),
+					children: [/* @__PURE__ */ jsx(RunStatusIcon, {
+						status,
+						className: "mt-0.5 size-3.5 shrink-0",
+						"aria-hidden": true
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "grid min-w-0 gap-0.5 break-words",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-semibold",
+							children: node.label
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground",
+							children: [
+								roleOf(node),
+								" · ",
+								state
+							]
+						})]
+					})]
+				}), children.length > 0 && renderNodes(children, true)]
+			}, node.id);
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "record-agent-tree max-h-80 overflow-auto px-2 py-2",
+		"data-graph": true,
+		role: "group",
+		"aria-label": "Recorded agent hierarchy. Select an agent to read its conversation.",
+		children: roots.length ? renderNodes(roots) : /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: "No agent topology was retained."
+		})
+	});
+}
+export { Conversation as n, AgentTree as t };

package/dist/{ResearchReport-vqefUbVp.js → ResearchReport-D1TFmldm.js}

@@ -1,4 +1,5 @@
-import { a as fmt, c as modelIdentity, d as recordFlowTrace, f as roleOf, h as utcTime, i as eventSource, m as toolKey, n as Conversation, o as indexRecord, p as textOf, r as eventMatches, s as interval, t as AgentTree, u as ms } from "./AgentTree-Cju8jn51.js";
+import { C as ms, D as toolKey, E as textOf, O as utcTime, T as roleOf, _ as eventSource, b as interval, g as eventMatches, v as fmt, w as recordFlowTrace, x as modelIdentity, y as indexRecord } from "./use-follow-tail-DZFn7QDO.js";
+import { n as Conversation, t as AgentTree } from "./AgentTree-D4d06rfH.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";

package/dist/{VirtualList-CMynqkkh.js → VirtualList-DcSGbEtA.js}

@@ -159,13 +159,40 @@ function useSettleTarget(scroller, { target, align, items, keyOf, offsets, origi
 		offsets
 	]);
 }
+/** Animate a new followed row once; measurements and reader-state updates keep the same arrival identity. */
+function useArrival(scroller, rows, arrival) {
+	const identity = arrival?.identity;
+	const prior = useRef({
+		identity,
+		id: arrival?.id
+	});
+	useLayoutEffect(() => {
+		const animate = prior.current.identity === identity && !!prior.current.id && prior.current.id !== arrival?.id;
+		prior.current = {
+			identity,
+			id: arrival?.id
+		};
+		if (!animate || !arrival?.key || !arrival.following.current) return;
+		const frame = requestAnimationFrame(() => {
+			const element = scroller.current, row = rows.current.get(arrival.key)?.firstElementChild;
+			if (!element || !row || !arrival.following.current) return;
+			const style = getComputedStyle(element), value = style.getPropertyValue("--duration-stream").trim(), duration = parseFloat(value) * (value.endsWith("ms") ? 1 : 1e3);
+			if (duration > 0 && !matchMedia("(prefers-reduced-motion: reduce)").matches) row.animate([{ opacity: 0 }, { opacity: 1 }], {
+				duration,
+				easing: style.getPropertyValue("--ease-expo").trim() || "linear"
+			});
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [identity, arrival?.id]);
+}
 /**
 * Renders only the rows near the viewport of `scroller`. Row heights are measured as they render; unmeasured
 * rows use `estimate`. Spacers keep the scroll height, so the browser's scroll anchoring holds the reading place.
 */
-function VirtualList({ items, keyOf, render, scroller, estimate = 96, overscan = 900, target, origin, targetAlign = "start", virtualize = true, keepMounted }) {
+function VirtualList({ items, keyOf, render, scroller, estimate = 96, overscan = 900, target, origin, targetAlign = "start", virtualize = true, keepMounted, arrival }) {
 	const { heights, rows, version, bind } = useMeasuredHeights();
 	const { viewport, originTop } = useViewport(scroller, origin);
+	useArrival(scroller, rows, arrival);
 	const offsets = useMemo(() => {
 		const result = new Float64Array(items.length + 1);
 		const guess = typeof estimate === "function" ? estimate : () => estimate;

package/dist/globals.css

@@ -3968,6 +3968,18 @@
   .text-\[var\(--surface-warning-text\)\] {
     color: var(--surface-warning-text);
   }
+  .text-\[var\(--syntax-function\,currentColor\)\] {
+    color: var(--syntax-function,currentColor);
+  }
+  .text-\[var\(--syntax-keyword\,currentColor\)\] {
+    color: var(--syntax-keyword,currentColor);
+  }
+  .text-\[var\(--syntax-number\,currentColor\)\] {
+    color: var(--syntax-number,currentColor);
+  }
+  .text-\[var\(--syntax-string\,currentColor\)\] {
+    color: var(--syntax-string,currentColor);
+  }
   .text-\[var\(--text-dim\)\] {
     color: var(--text-dim);
   }
@@ -5991,9 +6003,6 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .sm\:p-4 {
-      padding: calc(var(--spacing) * 4);
-    }
     .sm\:p-5 {
       padding: calc(var(--spacing) * 5);
     }

package/dist/{index-gXcuwPOX.d.ts → index-Bv2iiZaN.d.ts}

@@ -1,5 +1,116 @@
+import { t as AgentStreamOpener } from "./event-stream-DNEbvx4s.js";
 import { ReactNode, RefObject } from "react";
+import { ToolCallData } from "@tangle-network/ui/run";
 import { FlowTrace, formatCompact as fmt, formatSpanDuration as interval, formatUtcTime as utcTime } from "@tangle-network/charts";
+import { AgentTimelineItem, AgentTimelineStepKind } from "@tangle-network/ui/chat/agent-timeline";
+/** One normalized stream row; bounded producer pages also carry opaque native frames. */
+interface AgentStreamRow {
+  seq: number;
+  at: string;
+  stream?: string;
+  attempt?: number;
+  event: {
+    kind: "text" | "reasoning" | "tool-call" | "tool-result" | "user" | "notice" | (string & {});
+    text?: string;
+    provenance?: string;
+    toolCallId?: string;
+    toolName?: string;
+    args?: unknown;
+    result?: unknown;
+    isError?: boolean;
+    atBasis?: string;
+    durationMs?: number;
+    costUsd?: number;
+    id?: string;
+    sealed?: boolean;
+  };
+}
+type AgentTranscriptEntry = {
+  id: string;
+  at: number;
+  scope?: string;
+  attempt?: number;
+  provenance?: string;
+  isError?: boolean;
+  kind: "message";
+  role: "assistant" | "user";
+  content: string;
+  sealed?: true;
+} | {
+  id: string;
+  at: number;
+  scope?: string;
+  attempt?: number;
+  provenance?: string;
+  isError?: boolean;
+  kind: "reasoning";
+  text: string;
+} | {
+  id: string;
+  at: number;
+  scope?: string;
+  attempt?: number;
+  provenance?: string;
+  isError?: boolean;
+  kind: "tool";
+  call: ToolCallData;
+  name?: string;
+  input?: unknown;
+  costUsd?: number;
+} | {
+  id: string;
+  at: number;
+  scope?: string;
+  attempt?: number;
+  provenance?: string;
+  isError?: boolean;
+  kind: "notice";
+  text: string;
+};
+type ProducerRow = Partial<AgentStreamRow> & Pick<AgentStreamRow, "seq"> & {
+  type?: string;
+  data?: unknown;
+};
+interface AgentStreamPage {
+  generation?: string | number;
+  events: ProducerRow[];
+  firstSeq?: number | null;
+  lastSeq?: number | null;
+  hasEarlier?: boolean;
+  hasMore?: boolean;
+  alive?: boolean;
+  reset?: boolean;
+}
+/** The actual producer's bounded history. Core projection is product-owned, never a parser in the SDK. */
+interface AgentStreamHistory {
+  url: string;
+  alive: boolean;
+  projectRows?: (rows: readonly ProducerRow[]) => readonly ProducerRow[];
+}
+interface AgentStreamState {
+  generation?: string | number;
+  entries: AgentTranscriptEntry[];
+  lastSeq: number;
+  alive: boolean;
+  error?: string;
+  history?: {
+    loading: boolean;
+    earlier: boolean;
+    more: boolean;
+    reading: boolean;
+    beginning: boolean;
+    emptyTail: boolean;
+    older(): void;
+    newer(): void;
+    latest(): void;
+    beginningPage(): void;
+  };
+}
+/** One fold for live entries; attempt/session identity prevents repeated native call IDs from crossing turns. */
+declare function foldAgentRows(entries: AgentTranscriptEntry[], rows: readonly AgentStreamRow[]): AgentTranscriptEntry[];
+declare function foldAgentRows(entries: AgentTranscriptEntry[], rows: readonly ProducerRow[]): AgentTranscriptEntry[];
+/** Same named SSE lifecycle for every consumer; the actual history endpoint owns bounded bootstrap/pages. */
+declare function useAgentStream(url: string | undefined, openEventSource?: AgentStreamOpener, history?: AgentStreamHistory): AgentStreamState;
 /** Presentation inputs, not a wire schema. Producers validate retained data before rendering it. */
 interface ConversationNode {
   id: string;
@@ -189,7 +300,7 @@ declare function withPrompts<T extends ConversationRecord>(record: T): T;
  * Renders only the rows near the viewport of `scroller`. Row heights are measured as they render; unmeasured
  * rows use `estimate`. Spacers keep the scroll height, so the browser's scroll anchoring holds the reading place.
  */
-declare function VirtualList<T>({ items, keyOf, render, scroller, estimate, overscan, target, origin, targetAlign, virtualize, keepMounted }: {
+declare function VirtualList<T>({ items, keyOf, render, scroller, estimate, overscan, target, origin, targetAlign, virtualize, keepMounted, arrival }: {
   items: readonly T[];
   keyOf: (item: T) => string;
   render: (item: T, index: number) => ReactNode;
@@ -206,6 +317,13 @@ declare function VirtualList<T>({ items, keyOf, render, scroller, estimate, over
   virtualize?: boolean;
   /** Keep one roving tab stop mounted when the reader scrolls away from it. */
   keepMounted?: string;
+  /** Animate a new followed row using the shared Brand motion tokens. */
+  arrival?: {
+    identity: unknown;
+    id?: string;
+    key?: string;
+    following: RefObject<boolean>;
+  };
 }): import("react").JSX.Element;
 /** Retained identity and recorded time define the hierarchy; labels never join sessions or invent parents. */
 declare function AgentTree({ index, actor, cutoff, select }: {
@@ -214,4 +332,19 @@ declare function AgentTree({ index, actor, cutoff, select }: {
   cutoff: number;
   select: (id: string) => void;
 }): import("react").JSX.Element;
-export { ConversationProps as a, ToolCall as c, recordFlowTrace as d, ConversationEvent as f, Conversation as i, indexRecord as l, ConversationRecord as m, VirtualList as n, EventFlag as o, ConversationNode as p, withPrompts as r, RecordIndex as s, AgentTree as t, model_d_exports as u };
+declare function ToolStep({ item, previous }: {
+  item: Extract<AgentTimelineItem, {
+    kind: 'tool';
+  }>;
+  previous?: AgentTimelineStepKind;
+}): import("react").JSX.Element;
+/** The same prompt control for retained and streamed turns; opening state belongs to the reader. */
+declare function PromptMore({ text, id, opened, setOpen }: {
+  text: string;
+  id: string;
+  opened: ReadonlySet<string>;
+  setOpen: (id: string, open: boolean) => void;
+}): import("react").JSX.Element | null;
+/** Live values use the same canonical items and tool presentation as retained conversations. */
+declare function timelineItems(entries: readonly AgentTranscriptEntry[], streaming: boolean, opened?: ReadonlySet<string>): AgentTimelineItem[];
+export { foldAgentRows as C, AgentTranscriptEntry as S, ConversationRecord as _, VirtualList as a, AgentStreamRow as b, ConversationProps as c, ToolCall as d, indexRecord as f, ConversationNode as g, ConversationEvent as h, AgentTree as i, EventFlag as l, recordFlowTrace as m, ToolStep as n, withPrompts as o, model_d_exports as p, timelineItems as r, Conversation as s, PromptMore as t, RecordIndex as u, AgentStreamHistory as v, useAgentStream as w, AgentStreamState as x, AgentStreamPage as y };

package/dist/{index-YU_b9xCK.d.ts → index-CHA38az4.d.ts}

@@ -1,8 +1,8 @@
 import { l as AgentGraphNode, u as AgentGraphProps$1 } from "./AgentGraph-P7l-jZwo.js";
 import { t as AgentStreamOpener } from "./event-stream-DNEbvx4s.js";
-import "./index-gXcuwPOX.js";
+import "./index-Bv2iiZaN.js";
 import { ReactNode } from "react";
-import { ApprovalCard, ApprovalCardProps, ApprovalDiffFile, ApprovalDiffSummary, ApprovalPlanStep, ExpandedToolDetail, ExpandedToolDetailProps, FeedSegment, InlineThinkingItem as InlineThinkingItem$1, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunPhase, RunPhaseList, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot, RunStatus, RunStatusIcon as RunStatusIcon$1, RunStatusIconProps, StatusMeta, TaskList, TaskListItem, TaskListProps, TaskStatus, ToolCallData, ToolCallData as ToolCallData$1, ToolCallFeed, ToolCallFeedProps, ToolCallStatus, ToolCallType, isOpen, parseToolEvent, runStatus as runStatus$1, showsTaskPriority, statusMeta as statusMeta$1, taskProgress, taskStatus } from "@tangle-network/ui/run";
+import { ApprovalCard, ApprovalCardProps, ApprovalDiffFile, ApprovalDiffSummary, ApprovalPlanStep, ExpandedToolDetail, ExpandedToolDetailProps, FeedSegment, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunPhase, RunPhaseList, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot, RunStatus, RunStatusIcon as RunStatusIcon$1, RunStatusIconProps, StatusMeta, TaskList, TaskListItem, TaskListProps, TaskStatus, ToolCallData as ToolCallData$1, ToolCallFeed, ToolCallFeedProps, ToolCallStatus, ToolCallType, isOpen, parseToolEvent, runStatus as runStatus$1, showsTaskPriority, statusMeta as statusMeta$1, taskProgress, taskStatus } from "@tangle-network/ui/run";
 import { FlowWaterfallProps } from "@tangle-network/charts/react";
 import { LatestEvents, LatestEventsProps } from "@tangle-network/charts/react/agent-graph";
 import { FlowMarker, FlowSpan, FlowTrace } from "@tangle-network/charts";
@@ -15,64 +15,6 @@ type TraceWaterfallProps = FlowWaterfallProps;
  * `traces convert` contract. Import `@tangle-network/charts/react/flow-waterfall.css` once.
  */
 declare function TraceWaterfall({ renderIcon, ...props }: TraceWaterfallProps): import("react").JSX.Element;
-/** One row of an agent's message stream (tangle-tools `/api/discovery/runs/<run>/agents/<agent>/stream`). */
-interface AgentStreamRow {
-  seq: number;
-  /** ISO time the event happened. */
-  at: string;
-  stream?: string;
-  attempt?: number;
-  event: {
-    kind: "text" | "reasoning" | "tool-call" | "tool-result" | "user" | "notice" | (string & {});
-    text?: string;
-    /** A notice's origin: the agent's `delegated-input`, its `recorded-result`, or a capture fact such as `capture-unavailable`. */
-    provenance?: string;
-    toolCallId?: string;
-    toolName?: string;
-    args?: unknown;
-    result?: unknown;
-  };
-}
-/** A transcript entry with the time it began, so a time cursor can show the conversation as of any moment. */
-type AgentTranscriptEntry = {
-  id: string;
-  at: number;
-  kind: "message";
-  role: "assistant" | "user";
-  content: string;
-  sealed?: true;
-} | {
-  id: string;
-  at: number;
-  kind: "reasoning";
-  text: string;
-} | {
-  id: string;
-  at: number;
-  kind: "tool";
-  call: ToolCallData;
-} | {
-  id: string;
-  at: number;
-  kind: "notice";
-  text: string;
-};
-interface AgentStreamState {
-  generation?: string | number;
-  entries: AgentTranscriptEntry[];
-  lastSeq: number;
-  /** The agent is still producing output. */
-  alive: boolean;
-  /** Why the stream shows nothing new; a reconnect that delivers rows clears it. */
-  error?: string;
-}
-/** Fold stream rows into transcript entries: text of one turn merges, a tool call becomes a row its result completes. */
-declare function foldAgentRows(entries: AgentTranscriptEntry[], rows: readonly AgentStreamRow[]): AgentTranscriptEntry[];
-/**
- * Follow one agent's message stream over Server-Sent Events: `rows`, `reset` and `end` events, reconnecting with
- * `?after=<lastSeq>` when the server closes the connection, so a long turn streams without gaps or repeats.
- */
-declare function useAgentStream(url: string | undefined, openEventSource?: AgentStreamOpener): AgentStreamState;
 /** A moment on the run's event track: a release, a check verdict, a spawn, a crash or a steer. */
 interface TraceEvent extends FlowMarker {}
 interface TraceWorkspaceProps extends Omit<TraceWaterfallProps, "trace" | "markers" | "onSelect" | "onTimeChange" | "selectedId" | "onDeselect" | "graph" | "latestEvents"> {
@@ -114,4 +56,4 @@ interface TraceWorkspaceProps extends Omit<TraceWaterfallProps, "trace" | "marke
  * every panel shows what was true at the cursor, and the conversation shows what had been said by then.
  */
 declare function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChange, files, scoreboard, selectedAgentId, conversationOpen, onSelectAgent, agentCards, agentGraph, className, ...waterfall }: TraceWorkspaceProps): import("react").JSX.Element;
-export { TraceWaterfallProps as $, ToolCallData$1 as A, taskProgress as B, RunStatusIcon$1 as C, TaskListItem as D, TaskList as E, isOpen as F, TraceWorkspace as G, LatestEvents as H, parseToolEvent as I, AgentStreamState as J, TraceWorkspaceProps as K, runStatus$1 as L, ToolCallFeedProps as M, ToolCallStatus as N, TaskListProps as O, ToolCallType as P, TraceWaterfall as Q, showsTaskPriority as R, RunStatus as S, StatusMeta as T, LatestEventsProps as U, taskStatus as V, TraceEvent as W, foldAgentRows as X, AgentTranscriptEntry as Y, useAgentStream as Z, RunPhaseList as _, ApprovalPlanStep as a, RunRowStatus as b, FeedSegment as c, InlineToolItem as d, traceSpanMark as et, InlineToolItemProps as f, RunPhase as g, RunGroupProps as h, ApprovalDiffSummary as i, ToolCallFeed as j, TaskStatus as k, InlineThinkingItem$1 as l, RunGroup as m, ApprovalCardProps as n, ExpandedToolDetail as o, LiveDuration as p, AgentStreamRow as q, ApprovalDiffFile as r, ExpandedToolDetailProps as s, ApprovalCard as t, InlineThinkingItemProps as u, RunRowShell as v, RunStatusIconProps as w, RunRowStatusDot as x, RunRowShellProps as y, statusMeta$1 as z };
+export { ToolCallData$1 as A, taskProgress as B, RunStatusIcon$1 as C, TaskListItem as D, TaskList as E, isOpen as F, TraceWorkspace as G, LatestEvents as H, parseToolEvent as I, TraceWaterfallProps as J, TraceWorkspaceProps as K, runStatus$1 as L, ToolCallFeedProps as M, ToolCallStatus as N, TaskListProps as O, ToolCallType as P, showsTaskPriority as R, RunStatus as S, StatusMeta as T, LatestEventsProps as U, taskStatus as V, TraceEvent as W, traceSpanMark as Y, RunPhaseList as _, ApprovalPlanStep as a, RunRowStatus as b, FeedSegment as c, InlineToolItem as d, InlineToolItemProps as f, RunPhase as g, RunGroupProps as h, ApprovalDiffSummary as i, ToolCallFeed as j, TaskStatus as k, InlineThinkingItem as l, RunGroup as m, ApprovalCardProps as n, ExpandedToolDetail as o, LiveDuration as p, TraceWaterfall as q, ApprovalDiffFile as r, ExpandedToolDetailProps as s, ApprovalCard as t, InlineThinkingItemProps as u, RunRowShell as v, RunStatusIconProps as w, RunRowStatusDot as x, RunRowShellProps as y, statusMeta$1 as z };