@tangle-network/sandbox-ui 7.0.0 → 7.0.2

package/dist/{trace-workspace-WJTjp2Id.js → trace-workspace-EArXc0uP.js}

@@ -1,18 +1,17 @@
 import { t as cn$1 } from "./utils-BER_bdgE.js";
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-BQlarCIo.js";
 import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
-import { t as AgentGraph$1 } from "./AgentGraph-BGWx9hhS.js";
-import { s as timelineItems, t as useFollowTail } from "./use-follow-tail-Di1zlndg.js";
-import { SegmentedControl } from "@tangle-network/ui/primitives";
+import { t as AgentGraph } from "./AgentGraph-BGWx9hhS.js";
+import { s as timelineItems, t as useFollowTail } from "./use-follow-tail-Df965WQi.js";
+import { Button, SegmentedControl } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { ArrowLeft, ChevronRight, X } from "lucide-react";
 import { formatCost, formatCount, formatSpanDuration } from "@tangle-network/ui/utils";
 import { activityTiming } from "@tangle-network/charts/react/agent-graph/presentation";
-import { AgentTimeline } from "@tangle-network/ui/chat";
+import { AgentTimeline, AgentTimelineColumn } from "@tangle-network/ui/chat";
 import { RunStatusIcon, runStatus } from "@tangle-network/ui/run";
 import { FlowWaterfall, toolGlyph } from "@tangle-network/charts/react";
-import { LatestEvents } from "@tangle-network/charts/react/agent-graph";
 import { useEventStream } from "@tangle-network/ui/hooks";
 // src/run/trace-waterfall.tsx
 /** Agent and model spans show their lab/host mark; tool spans show their provider's mark. Unknown keeps the kind glyph. */
@@ -24,7 +23,7 @@ function traceSpanMark(span) {
 			size: "sm"
 		}) : void 0;
 	}
-	const provider = span.icon ?? (span.kind === "tool" ? span.detail : void 0);
+	const provider = span.icon;
 	return provider ? /* @__PURE__ */ jsx(ProviderIcon, {
 		id: provider,
 		displayName: provider,
@@ -506,49 +505,6 @@ function useSplit(root) {
 		}
 	};
 }
-/**
-* The height the waterfall rows or graph may take so the run fills its pane: their own height plus the room left under
-* the chart's last row (toolbar, axis and latest activity keep theirs). FlowWaterfall sizes its virtualized rows by `maxHeight`, so it is measured, not styled.
-*/
-function useFillHeight(pane) {
-	const [height, setHeight] = useState();
-	useEffect(() => {
-		const element = pane.current;
-		if (!element) return;
-		let frame = 0;
-		const measure = () => {
-			cancelAnimationFrame(frame);
-			frame = requestAnimationFrame(() => {
-				const root = element.querySelector(".fw-root");
-				const target = [...element.querySelectorAll("[data-trace-graph], .fw-scroller")].find((candidate) => candidate.offsetHeight > 0);
-				if (!root || !target) return;
-				const style = getComputedStyle(root), bottom = Math.max(...[...root.children].map((child) => child.getBoundingClientRect().bottom));
-				const slack = root.getBoundingClientRect().bottom - parseFloat(style.paddingBottom) - parseFloat(style.borderBottomWidth) - bottom;
-				const next = Math.floor(target.offsetHeight + slack);
-				if (next > 160) setHeight((prior) => prior !== void 0 && Math.abs(prior - next) < 2 ? prior : next);
-			});
-		};
-		const observer = new ResizeObserver(measure);
-		observer.observe(element);
-		const watch = new MutationObserver(() => {
-			const root = element.querySelector(".fw-root");
-			if (root) observer.observe(root);
-			measure();
-		});
-		watch.observe(element, {
-			childList: true,
-			subtree: true
-		});
-		const root = element.querySelector(".fw-root");
-		if (root) observer.observe(root);
-		return () => {
-			cancelAnimationFrame(frame);
-			observer.disconnect();
-			watch.disconnect();
-		};
-	}, [pane]);
-	return height;
-}
 /** Text held to a few lines with a control to read the rest; the control appears only when lines are hidden. */
 function Clamped({ text, lines, className }) {
 	const [open, setOpen] = useState(false), [over, setOver] = useState(false), ref = useRef(null);
@@ -637,22 +593,24 @@ function metaOf(span) {
 /** Facts the header already states are not repeated in Details. */
 const IN_HEADER = /^(tokens|cost|duration|failure|model)$/i;
 /** The selected agent: a compact header, its failure, its commission, then its conversation; recorded facts wait in Details. */
-function AgentInspector({ name, model, status, span, live, failure, commission, facts, detail, children, scroller, unseen, onJump, onClose, mode, style }) {
+function AgentInspector({ name, model, status, span, live, failure, silent, commission, facts, detail, children, scroller, unseen, onJump, onClose, mode, style }) {
 	const brand = model ? modelBrandFor(model) : null, meta = metaOf(span);
 	const details = facts.filter((fact) => !IN_HEADER.test(fact.label) && fact.value !== failure);
-	const back = useRef(null);
+	const sheetRef = useRef(null);
 	const sheet = mode === "sheet";
 	useEffect(() => {
 		if (!sheet) return;
 		const opener = document.activeElement, overflow = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
-		back.current?.focus();
+		sheetRef.current?.focus();
 		return () => {
 			document.body.style.overflow = overflow;
 			if (opener?.isConnected) opener.focus();
 		};
 	}, [sheet]);
 	return /* @__PURE__ */ jsxs("aside", {
+		ref: sheetRef,
+		tabIndex: sheet ? -1 : void 0,
 		role: sheet ? "dialog" : void 0,
 		"aria-modal": sheet || void 0,
 		"aria-label": `${name} conversation`,
@@ -663,24 +621,24 @@ function AgentInspector({ name, model, status, span, live, failure, commission,
 				onClose();
 			}
 		},
-		className: cn$1("relative flex min-h-0 flex-col overflow-hidden bg-card text-foreground", mode === "docked" && "shrink-0 rounded-xl border border-border", mode === "overlay" && "fixed inset-y-0 right-0 z-40 w-full max-w-[420px] border-l border-border shadow-2xl", sheet && "fixed inset-0 z-[1100] bg-background"),
+		className: cn$1("relative flex min-h-0 flex-col overflow-hidden bg-card text-foreground outline-none", mode === "docked" && "shrink-0 rounded-xl border border-border", mode === "overlay" && "fixed inset-y-0 right-0 z-40 w-full max-w-[420px] border-l border-border shadow-2xl", sheet && "fixed inset-0 z-[1100] bg-background"),
 		children: [
 			/* @__PURE__ */ jsxs("header", {
 				className: "flex shrink-0 items-start gap-2 border-b border-border px-3 py-2.5",
 				children: [
-					sheet && /* @__PURE__ */ jsxs("button", {
-						ref: back,
-						type: "button",
+					sheet && /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
 						onClick: onClose,
 						"aria-label": "Back to the run",
-						className: "-ml-1 flex h-9 shrink-0 items-center gap-1 rounded-md px-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-[hsl(var(--ring))]",
+						className: "-ml-1.5 shrink-0 gap-1 px-2",
 						children: [/* @__PURE__ */ jsx(ArrowLeft, {
 							"aria-hidden": true,
 							className: "h-4 w-4"
 						}), "Back"]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: cn$1("min-w-0 flex-1", sheet && "pt-2"),
+						className: cn$1("min-w-0 flex-1", sheet && "pt-1.5"),
 						children: [
 							/* @__PURE__ */ jsxs("div", {
 								className: "flex min-w-0 items-start gap-2",
@@ -733,7 +691,7 @@ function AgentInspector({ name, model, status, span, live, failure, commission,
 			}),
 			failure && /* @__PURE__ */ jsx("section", {
 				"aria-label": "Failure",
-				className: "shrink-0 border-b border-border px-3 py-2 text-sm text-[var(--surface-danger-text)]",
+				className: "shrink-0 border-b border-border px-3 py-2.5 text-sm font-medium leading-5 text-[var(--surface-danger-text)]",
 				children: /* @__PURE__ */ jsx(Clamped, {
 					text: failure,
 					lines: 3
@@ -763,9 +721,10 @@ function AgentInspector({ name, model, status, span, live, failure, commission,
 				children: "New output"
 			}),
 			(details.length > 0 || detail) && /* @__PURE__ */ jsxs("details", {
+				open: silent || void 0,
 				className: "group max-h-[45%] shrink-0 overflow-y-auto border-t border-border text-sm",
 				children: [/* @__PURE__ */ jsxs("summary", {
-					className: "flex cursor-pointer list-none items-center gap-1.5 px-3 py-2 text-xs font-medium text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden",
+					className: "flex cursor-pointer list-none items-center gap-1.5 px-3 py-2 text-xs font-medium text-muted-foreground hover:text-foreground before:hidden before:content-none [&::-webkit-details-marker]:hidden",
 					children: [/* @__PURE__ */ jsx(ChevronRight, {
 						"aria-hidden": true,
 						className: "h-3.5 w-3.5 transition-transform group-open:rotate-90"
@@ -934,35 +893,31 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 		identity: showConversation ? selected : void 0,
 		content: items
 	});
-	const root = useRef(null), pane = useRef(null);
-	const phone = usePhone(), split = useSplit(root), fill = useFillHeight(pane);
+	const root = useRef(null);
+	const phone = usePhone(), split = useSplit(root);
 	const mode = phone ? "sheet" : docked ? "docked" : "overlay";
 	const status = live ? "running" : selectedNode?.status ?? runStatus(agent?.status ?? "unknown");
 	const failure = facts.find((fact) => fact.label === "Failure")?.value ?? (status === "failed" ? selectedNode?.result ?? void 0 : void 0);
 	const said = (text) => !!text && shown.some((entry) => entry.kind === "message" && entry.role === "user" && entry.content.trim() === text.trim());
 	const silent = agentId && transcriptNote?.(agentId) || "No conversation was recorded for this agent.";
-	const conversation = !streamUrl ? /* @__PURE__ */ jsx("p", {
-		className: "p-4 text-sm text-muted-foreground",
-		children: silent
-	}) : cursor !== null && origin === void 0 ? /* @__PURE__ */ jsx("p", {
-		className: "p-4 text-sm text-muted-foreground",
-		children: "This conversation has no timestamps to replay at the cursor."
-	}) : /* @__PURE__ */ jsx(AgentTimeline, {
-		items,
-		isThinking: live && items.length === 0,
-		emptyState: /* @__PURE__ */ jsx("p", {
-			className: "p-4 text-sm text-muted-foreground",
-			"data-stream": stream.error ? "reconnecting" : ended ? "ended" : "empty",
-			children: stream.error ? ended ? stream.error : `Reconnecting… ${stream.error}` : ended ? silent : "No messages yet."
+	const note = !streamUrl ? silent : cursor !== null && origin === void 0 ? "This conversation has no timestamps to replay at the cursor." : items.length > 0 || live ? void 0 : stream.error ? ended ? stream.error : `Reconnecting… ${stream.error}` : ended ? silent : "No messages yet.";
+	const conversation = note === void 0 ? /* @__PURE__ */ jsx(AgentTimelineColumn, {
+		className: "max-w-[46rem] p-0",
+		children: /* @__PURE__ */ jsx(AgentTimeline, {
+			items,
+			isThinking: live && items.length === 0
 		})
+	}) : /* @__PURE__ */ jsx("p", {
+		className: "m-0 py-1 text-sm text-muted-foreground",
+		"data-stream": stream.error ? "reconnecting" : ended ? "ended" : "empty",
+		children: note
 	});
 	const left = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("div", {
-			ref: pane,
 			className: cn$1("flex min-h-[320px] min-w-0 flex-1 flex-col", showConversation && mode === "overlay" && "lg:mr-[420px]"),
 			children: /* @__PURE__ */ jsx(TraceWaterfall, {
 				...waterfall,
-				maxHeight: fill ?? waterfall.maxHeight,
+				maxHeight: waterfall.maxHeight ?? "fill",
 				trace,
 				markers: events,
 				selectedId: agentId,
@@ -975,17 +930,9 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 					setCursor(time);
 					onTimeChange?.(time);
 				},
-				latestEvents: /* @__PURE__ */ jsx(LatestEvents, {
-					agents: graph.nodes,
-					now: graphNow,
-					live: cursor === null,
-					selectedId: agentId,
-					onSelect: select
-				}),
 				graph: /* @__PURE__ */ jsxs("section", {
-					"data-trace-graph": "",
-					className: "relative flex min-h-[320px] flex-col",
-					style: { height: fill ?? "max(60vh, 480px)" },
+					className: "relative flex min-h-[320px] flex-1 flex-col",
+					style: typeof waterfall.maxHeight === "number" ? { height: waterfall.maxHeight } : void 0,
 					"aria-label": "Agent graph",
 					children: [/* @__PURE__ */ jsx(SegmentedControl, {
 						"aria-label": "Graph layout",
@@ -999,7 +946,7 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 							value: "hub",
 							label: "Hub"
 						}]
-					}), /* @__PURE__ */ jsx(AgentGraph$1, {
+					}), /* @__PURE__ */ jsx(AgentGraph, {
 						...graphOptions,
 						layout: graphLayout,
 						renderEventIcon: (event) => toolGlyph(event.label),
@@ -1051,6 +998,7 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 			span: agent,
 			live,
 			failure,
+			silent: note !== void 0 && note === silent,
 			commission: said(commission?.text) ? { by: commission?.by } : commission,
 			facts,
 			detail,
@@ -1064,4 +1012,4 @@ function TraceWorkspace({ trace, streamUrl, openEventSource, events, onTimeChang
 		})] })]
 	});
 }
-export { useEventStream as a, useAgentStream as i, LatestEvents as n, TraceWaterfall as o, foldAgentRows as r, traceSpanMark as s, TraceWorkspace as t };
+export { TraceWaterfall as a, useEventStream as i, foldAgentRows as n, traceSpanMark as o, useAgentStream as r, TraceWorkspace as t };

package/dist/{use-follow-tail-Di1zlndg.js → use-follow-tail-Df965WQi.js}

@@ -3,6 +3,7 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "@tangle-network/u
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Brain, Settings, Timer } from "lucide-react";
 import { getToolCategory, getToolDisplayMetadata } from "@tangle-network/ui/utils";
+import { toolLabel } from "@tangle-network/charts/react/agent-graph";
 import { formatCompact, formatCompact as fmt, formatCost as formatCost$1, formatSpanDuration as formatSpanDuration$1, formatSpanDuration as interval, formatUtcTime as utcTime, reportedCount, sumReportedCounts } from "@tangle-network/charts";
 import { AgentTimelineStep, agentTimelineStepKind } from "@tangle-network/ui/chat/agent-timeline";
 import { SpeakerHeader } from "@tangle-network/ui/chat/speaker";
@@ -853,7 +854,7 @@ function toolItem(id, call, output, state, durationMs, live, cost) {
 		}
 	};
 	const known = KIT_TOOLS.has(name.toLowerCase()), meta = getToolDisplayMetadata(part);
-	const detail = argsLabel(call.input) ?? (meta.description || (known ? void 0 : preview(call)));
+	const detail = argsLabel(call.input) ?? (known && meta.description || void 0);
 	return {
 		id,
 		kind: "tool",
@@ -861,7 +862,7 @@ function toolItem(id, call, output, state, durationMs, live, cost) {
 		call: {
 			id,
 			type: TYPES[name.toLowerCase()] ?? "unknown",
-			label: known ? meta.title : name.replaceAll("_", " "),
+			label: known ? meta.title : toolLabel(name),
 			status: status === "error" ? "error" : status === "running" ? "running" : "success",
 			...detail ? { detail } : {},
 			...duration !== void 0 ? { duration } : {}
@@ -907,7 +908,7 @@ function timelineItems(entries, streaming, opened) {
 		key: events[0].id,
 		events
 	}));
-	return rows.map((row, index) => {
+	return foldTools(rows.map((row, index) => {
 		const entry = row.kind === "event" ? row.event : row.events[0];
 		if (row.kind === "idle") return idleItem(entry.id, row.events.map((event) => ({
 			id: event.id,
@@ -923,7 +924,10 @@ function timelineItems(entries, streaming, opened) {
 				role: entry.role,
 				content: short ? `${body.slice(0, 280).trimEnd()}…` : body,
 				isStreaming: streaming && index === rows.length - 1,
-				...entry.role === "user" && Number.isFinite(entry.at) ? { timestamp: new Date(entry.at) } : {}
+				...entry.role === "user" ? {
+					...opened ? {} : { collapsedLines: 6 },
+					...Number.isFinite(entry.at) ? { timestamp: new Date(entry.at) } : {}
+				} : {}
 			};
 		}
 		if (entry.kind === "tool") return toolItem(entry.id, {
@@ -947,7 +951,7 @@ function timelineItems(entries, streaming, opened) {
 			})
 		};
 		return {
-			id: entry.id,
+			id: `reasoning:${entry.id}`,
 			kind: "custom",
 			content: /* @__PURE__ */ jsx(InlineThinkingItem, {
 				part: {
@@ -958,7 +962,38 @@ function timelineItems(entries, streaming, opened) {
 				openWhileActive: false
 			})
 		};
-	});
+	}), streaming);
+}
+/** Back-to-back tool calls (and the reasoning between them) fold into one row that names them, "Ran 6 tools · Read ×3,
+*  knowledge record"; their arguments and results open with it, so the agent's own words stay the conversation. A live
+*  agent's newest call stays its own row so the reader sees what is running now. */
+function foldTools(items, streaming) {
+	const out = [];
+	let run = [];
+	const flush = (last) => {
+		const open = last && streaming ? run.splice(-1) : [];
+		const tools = run.filter((item) => item.kind === "tool");
+		if (tools.length > 1) {
+			const counts = /* @__PURE__ */ new Map();
+			for (const tool of tools) counts.set(tool.call.label, (counts.get(tool.call.label) ?? 0) + 1);
+			const names = [...counts].map(([name, n]) => n > 1 ? `${name} ×${n}` : name), more = names.length - 3;
+			out.push({
+				id: `fold:${run[0].id}`,
+				kind: "fold",
+				items: run,
+				summary: `Ran ${tools.length} tools · ${names.slice(0, 3).join(", ")}${more > 0 ? ` +${more} more` : ""}`
+			});
+		} else out.push(...run);
+		out.push(...open);
+		run = [];
+	};
+	for (const item of items) if (item.kind === "tool" || item.kind === "custom" && item.id.startsWith("reasoning:")) run.push(item);
+	else {
+		flush(false);
+		out.push(item);
+	}
+	flush(true);
+	return out;
 }
 const toolNote = (part) => {
 	const note = part.state.metadata?.note, time = part.state.time;