@tangle-network/sandbox-ui 2.0.21 → 2.0.22

package/README.md

@@ -531,3 +531,20 @@ Retheming is absolutely supported, but the documentation was thinner than it sho
 Apache-2.0
 
 The native Runtime viewer is `LiveRun` from `@tangle-network/sandbox-ui/run/live`. It composes the same trace workspace, selected-agent conversation, retained files and capture coverage. Hosts may supply the existing fetch/EventSource transport for their authenticated session; an API or authenticated transport change clears the previous view, while frames within one stable transport preserve selection and the camera. Keep the transport object stable for that account. `@tangle-network/sandbox-ui/workspace-viewer.js` is the self-contained browser entry for Runtime's existing asset-directory contract, with `styles.css` beside it. `useDocument` owns same-origin ETag reads. `useEventStream` from `/run` owns native reconnect, terminal end and stale callback cleanup; `useAgentStream` resumes retained rows by generation and sequence. Authenticated openers keep their session and reconnect policy. Producers own validation and accounting.
+
+## Retained records and reports
+
+`@tangle-network/sandbox-ui/record` owns `AgentRecord`, `ResearchReport` and `RecordWorkGraph`. Install the optional `@drewstone/agent-record` peer for this feature; its public `/record` and `/report` entries own validation, models, provenance relationships and report exports. The generic `/run/record` transcript remains usable without that parser package.
+
+```tsx
+import { parseRecord } from '@drewstone/agent-record/record'
+import { AgentRecord } from '@tangle-network/sandbox-ui/record'
+import '@tangle-network/sandbox-ui/styles'
+
+const record = parseRecord(input)
+<AgentRecord records={[record]} />
+```
+
+Selection keeps original run, actor and event IDs, a recorded timestamp, and Messages, Event details or Usage. Charts owns the waterfall clock, playback and zoom. Usage distinguishes missing counters from zero and metered windows from individual responses. Capture gaps and original source references stay visible. The evidence graph keeps recorded entity kinds and relationships and uses the maintained graph camera.
+
+Research reports retain source documents, exact citations, Markdown/math, print and JSON/LaTeX exports. Optional source search accepts only a same-origin path and displays only the selected play's retained bytes. `agent-record-report` continues to write a single offline HTML file using this package's report viewer and stylesheet.

package/dist/{record-CnxPRyxC.js → AgentTree-KO1TJXBq.js}

@@ -5,9 +5,10 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "@tangle-network/u
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Brain, Settings, Timer } from "lucide-react";
-import { formatDuration, getToolCategory, getToolDisplayMetadata } from "@tangle-network/ui/utils";
+import { getToolCategory, getToolDisplayMetadata } from "@tangle-network/ui/utils";
 import { AgentTimelineColumn, AgentTimelineStep, SpeakerHeader, agentTimelineStepKind } from "@tangle-network/ui/chat";
-import { ExpandedToolDetail, InlineThinkingItem, RunRowShell, RunStatusIcon, runStatus } from "@tangle-network/ui/run";
+import { ExpandedToolDetail, InlineThinkingItem, RunRowShell, RunStatusIcon, runStatus, statusMeta } from "@tangle-network/ui/run";
+import { formatCompact, formatCompact as fmt, formatCost, formatSpanDuration, formatSpanDuration as interval, formatUtcTime as utcTime, reportedCount, sumReportedCounts } from "@tangle-network/charts";
 // src/run/record/model.ts
 var model_exports = /* @__PURE__ */ __exportAll({
 	agentState: () => agentState,
@@ -24,6 +25,7 @@ var model_exports = /* @__PURE__ */ __exportAll({
 	modelIdentity: () => modelIdentity,
 	ms: () => ms,
 	preview: () => preview,
+	recordFlowTrace: () => recordFlowTrace,
 	roleOf: () => roleOf,
 	textOf: () => textOf,
 	toolKey: () => toolKey,
@@ -31,13 +33,6 @@ var model_exports = /* @__PURE__ */ __exportAll({
 	utcTime: () => utcTime
 });
 const ms = (value) => Date.parse(value);
-/** Normalize labels to UTC without rewriting the source timestamp. */
-function utcTime(value, includeDate = false) {
-	const date = new Date(value);
-	if (!Number.isFinite(date.valueOf())) return "Unknown time";
-	const iso = date.toISOString();
-	return `${includeDate ? iso.slice(0, 19).replace("T", " ") : iso.slice(11, 19)} UTC`;
-}
 const compact = (value) => value.replace(/\s+/g, " ").trim();
 /**
 * Recorded text names the host folders an agent ran in (`/home/<user>/.cache/disco/host/<run>/sessions/<session>/inputs/x.md`).
@@ -72,11 +67,6 @@ function withoutHostPaths(event) {
 		}
 	};
 }
-const fmt = (value) => new Intl.NumberFormat("en-US", {
-	notation: "compact",
-	maximumFractionDigits: 1
-}).format(value);
-const interval = (value) => value < 1e3 ? `${Math.round(value)} ms` : value < 6e4 ? `${(value / 1e3).toFixed(1)} s` : `${(value / 6e4).toFixed(1)} min`;
 const roleOf = (node) => node?.role ?? (node?.kind === "session" ? "Session" : node?.kind === "finding" ? "Finding" : "Agent");
 const textOf = (event) => event.detail.publicText ?? event.detail.recordedClaim ?? "";
 const toolKey = (node, id) => JSON.stringify([node, id]);
@@ -157,8 +147,9 @@ function indexRecord(record) {
 			results.set(key, matching);
 		}
 	}
-	const times = events.map((event) => ms(event.at));
-	const start = times[0] ?? 0;
+	const times = [...events.map((event) => ms(event.at)), ...actors.flatMap((node) => node.start ? [ms(node.start)] : [])].filter(Number.isFinite);
+	const start = times.length ? times.reduce((first, at) => Math.min(first, at)) : 0;
+	const observedEnd = events.reduce((latest, event) => Math.max(latest, event.end ? ms(event.end) : ms(event.at)), start);
 	return {
 		nodes,
 		canonical,
@@ -170,7 +161,7 @@ function indexRecord(record) {
 		calls,
 		results,
 		start,
-		end: events.reduce((latest, event) => Math.max(latest, event.end ? ms(event.end) : ms(event.at)), times.at(-1) ?? start)
+		end: actors.reduce((latest, node) => typeof node.end === "string" && Number.isFinite(ms(node.end)) ? Math.max(latest, ms(node.end)) : latest, observedEnd)
 	};
 }
 /** Whether any event of this agent recorded token usage or a list price: a status alone measures nothing. */
@@ -282,7 +273,7 @@ function tooltipSections(event, index, cutoff) {
 	const duration = event.detail.durationMs;
 	if (typeof duration === "number") sections.push({
 		kind: "status",
-		value: `⏱ ${duration < 1e3 ? `${duration}ms` : `${(duration / 1e3).toFixed(1)}s`}`,
+		value: `⏱ ${interval(duration)}`,
 		tone: "muted"
 	});
 	return {
@@ -292,6 +283,181 @@ function tooltipSections(event, index, cutoff) {
 		sections
 	};
 }
+const time = (value) => typeof value === "string" ? ms(value) : NaN;
+/** Project retained identities and measured intervals; a message without a duration remains a point. */
+function recordFlowTrace(record, live = false, observedAt = Date.now()) {
+	const index = indexRecord(record);
+	const first = index.events.length || index.actors.some((node) => Number.isFinite(time(node.start))) ? index.start : observedAt;
+	const last = Math.max(first, index.end, live ? observedAt : first);
+	const spans = [];
+	const actors = new Set(index.actors.map((node) => node.id));
+	const runningNodes = new Set(index.actors.filter((node) => live && !node.end && [
+		"running",
+		"waiting",
+		"needs-you"
+	].includes(runStatus(node.status ?? "unknown"))).map((node) => node.id));
+	const offset = (at) => Math.max(0, at - first);
+	for (const node of index.actors) {
+		if (node.kind === "finding") continue;
+		const events = index.byActor.get(node.id) ?? [];
+		const start = Number.isFinite(time(node.start)) ? time(node.start) : events[0] ? ms(events[0].at) : NaN;
+		if (!Number.isFinite(start)) continue;
+		const end = runningNodes.has(node.id) ? last : Number.isFinite(time(node.end)) ? time(node.end) : events.at(-1) ? ms(events.at(-1).at) : start;
+		const parent = node.parent ? index.canonical(node.parent) : void 0;
+		spans.push({
+			id: node.id,
+			...parent && actors.has(parent) ? { parentId: parent } : {},
+			kind: "pipeline",
+			name: node.label,
+			startMs: offset(start),
+			endMs: offset(Math.max(start, end)),
+			status: runStatus(node.status ?? "unknown"),
+			approx: !node.start || !node.end
+		});
+		if (parent && actors.has(parent)) spans.push({
+			id: `${node.id}:handoff`,
+			parentId: parent,
+			kind: "handoff",
+			name: `Handoff to ${node.label}`,
+			startMs: offset(start),
+			endMs: offset(start),
+			approx: true,
+			meta: { timing: "Recorded child start; handoff duration was not measured" }
+		});
+	}
+	const promptTokens = [];
+	const completionTokens = [];
+	let cost = 0;
+	let costKnown = false;
+	let costMissing = false;
+	const explicitTools = /* @__PURE__ */ new Set();
+	let toolCalls = 0;
+	for (const event of index.events) {
+		const detail = event.detail;
+		const response = detail.usageScope === void 0 && detail.role === "assistant";
+		const counters = [
+			detail.usage?.input,
+			detail.usage?.cacheRead,
+			detail.usage?.cacheWrite,
+			detail.usage?.output
+		].map(reportedCount);
+		const prompt = sumReportedCounts(counters.slice(0, 3)), completion = counters[3];
+		const measured = counters.filter((value) => value !== void 0);
+		const facts = measured.length && measured.length < counters.length ? [{
+			label: "Tokens",
+			value: `≥ ${fmt(measured.reduce((sum, value) => sum + value, 0))} measured; incomplete counters`
+		}] : void 0;
+		if (detail.usageScope === void 0) {
+			if (response || detail.usage) {
+				promptTokens.push(prompt);
+				completionTokens.push(completion);
+			}
+			if (detail.usdKnown === false) costMissing = true;
+			else if (typeof detail.costListUsd === "number") {
+				cost += detail.costListUsd;
+				costKnown = true;
+			} else if (detail.usage && Object.values(detail.usage).some((value) => typeof value === "number" && value > 0)) costMissing = true;
+		}
+		const start = ms(event.at);
+		const parentId = index.canonical(event.node);
+		if (typeof detail.spanId === "string") {
+			const kind = event.kind.replace(/^trace-/, "").toLowerCase();
+			const end = time(detail.end);
+			const state = runStatus(typeof detail.status === "string" ? detail.status : "unknown");
+			const running = live && !Number.isFinite(end) && [
+				"running",
+				"waiting",
+				"needs-you"
+			].includes(state);
+			const spanKind = ["llm", "model"].includes(kind) ? "model" : kind === "tool" ? "tool" : kind === "waiting" ? "waiting" : kind === "handoff" ? "handoff" : "pipeline";
+			const traceId = String(detail.traceId ?? event.node);
+			spans.push({
+				id: `${traceId}:${detail.spanId}`,
+				parentId: typeof detail.parentSpanId === "string" ? `${traceId}:${detail.parentSpanId}` : parentId,
+				kind: spanKind,
+				name: event.label,
+				startMs: offset(start),
+				endMs: offset(Number.isFinite(end) ? Math.max(start, end) : running ? last : start),
+				status: detail.isError ? "failed" : state,
+				meta: { eventId: event.id }
+			});
+			if (spanKind === "tool") {
+				toolCalls++;
+				if (typeof detail.toolCallId === "string") explicitTools.add(toolKey(event.node, detail.toolCallId));
+			}
+		} else if (response) spans.push({
+			id: event.id,
+			parentId,
+			kind: "model",
+			name: event.label,
+			startMs: offset(start),
+			endMs: offset(start),
+			approx: true,
+			status: runStatus(typeof detail.responseStatus === "string" ? detail.responseStatus : "unknown"),
+			promptTokens: prompt,
+			completionTokens: completion,
+			facts,
+			meta: {
+				eventId: event.id,
+				timing: "Response timestamp; generation duration was not recorded"
+			}
+		});
+	}
+	for (const key of /* @__PURE__ */ new Set([...index.calls.keys(), ...index.results.keys()])) {
+		if (explicitTools.has(key)) continue;
+		const calls = index.calls.get(key) ?? [], results = index.results.get(key) ?? [];
+		const result = calls.length === 1 && results.length === 1 && ms(results[0].at) >= ms(calls[0].event.at) ? results[0] : void 0;
+		const timing = calls.length > 1 || results.length > 1 ? "Ambiguous retained call/result identity; no duration measured" : calls.length && results.length ? "Recorded result timestamp precedes call; no interval measured" : "Unmatched retained call or result; no interval measured";
+		for (const { event, call } of calls) {
+			toolCalls++;
+			const start = ms(event.at), parentId = index.canonical(event.node);
+			spans.push({
+				id: `${event.id}:tool:${call.id}`,
+				parentId,
+				kind: "tool",
+				name: call.name,
+				startMs: offset(start),
+				endMs: offset(result ? ms(result.at) : start),
+				approx: !result || event.detail.atBasis === "carried" || result.detail.atBasis === "carried",
+				status: result?.detail.isError ? "failed" : result ? "done" : "unknown",
+				facts: result ? void 0 : [{
+					label: "Timing",
+					value: timing
+				}],
+				meta: {
+					eventId: event.id,
+					...!result ? { timing } : {}
+				}
+			});
+		}
+		if (!result) for (const event of results) spans.push({
+			id: `${event.id}:result`,
+			parentId: index.canonical(event.node),
+			kind: "tool",
+			name: event.label,
+			startMs: offset(ms(event.at)),
+			endMs: offset(ms(event.at)),
+			approx: true,
+			status: event.detail.isError ? "failed" : "unknown",
+			facts: [{
+				label: "Timing",
+				value: timing
+			}],
+			meta: { eventId: event.id }
+		});
+	}
+	return {
+		spans,
+		totalMs: last - first,
+		promptTokens: sumReportedCounts(promptTokens),
+		completionTokens: sumReportedCounts(completionTokens),
+		toolCalls,
+		...costKnown && !costMissing ? {
+			costUsd: cost,
+			costBasis: "list"
+		} : {}
+	};
+}
 // src/run/record/conversation-rows.ts
 /**
 * A key that survives a live record growing. Event ids hash the whole source file, so every append renames every
@@ -516,11 +682,7 @@ function pollSummary(events) {
 		measured++;
 		tokens += parts.reduce((sum, value) => sum + value, 0);
 	}
-	const count = new Intl.NumberFormat("en-US", {
-		notation: "compact",
-		maximumFractionDigits: 1
-	});
-	const tokenText = !measured ? "tokens unknown" : measured < events.length ? `~${count.format(tokens)} tokens (${measured} of ${events.length} measured)` : `~${count.format(tokens)} tokens`;
+	const tokenText = !measured ? "tokens unknown" : measured < events.length ? `~${formatCompact(tokens)} tokens (${measured} of ${events.length} measured)` : `~${formatCompact(tokens)} tokens`;
 	return {
 		polls: events.length,
 		spanMs: span,
@@ -551,11 +713,6 @@ function promptText(text) {
 // src/run/record/ConversationRowView.tsx
 /** A run-lifecycle event (start, stop, restart), drawn as a thin marker row. */
 const isLifecycle = (event) => event.category === "lifecycle" || event.detail.lifecycle !== void 0;
-const tokenLabel = (value) => new Intl.NumberFormat("en-US", {
-	notation: "compact",
-	maximumFractionDigits: 1
-}).format(value);
-const spanLabel = (value) => value < 1e3 ? `${Math.round(value)} ms` : formatDuration(value);
 function ToolStep({ item, previous }) {
 	const part = item.part, cost = part.state.metadata?.costUsd, time = part.state.time, category = getToolCategory(part.tool);
 	const tone = part.state.status === "error" ? "var(--surface-danger-text)" : [
@@ -588,12 +745,12 @@ function ToolStep({ item, previous }) {
 					/* @__PURE__ */ jsx("dt", { children: "Duration" }),
 					/* @__PURE__ */ jsx("dd", {
 						className: "m-0 text-right",
-						children: time?.end != null && time.start != null ? spanLabel(time.end - time.start) : "Not recorded"
+						children: time?.end != null && time.start != null ? formatSpanDuration(time.end - time.start) : "Not recorded"
 					}),
 					/* @__PURE__ */ jsx("dt", { children: "Cost" }),
 					/* @__PURE__ */ jsx("dd", {
 						className: "m-0 text-right",
-						children: typeof cost === "number" ? `$${cost.toFixed(4)}` : "Not recorded"
+						children: typeof cost === "number" ? formatCost(cost) : "Not recorded"
 					})
 				]
 			}),
@@ -722,7 +879,7 @@ function toolItems(id, call, result, state, durationMs, live, opener) {
 }
 const toolNote = (part) => {
 	const note = part.state.metadata?.note, time = part.state.time;
-	const duration = time?.end != null && time.start != null ? spanLabel(time.end - time.start) : "Not recorded";
+	const duration = time?.end != null && time.start != null ? formatSpanDuration(time.end - time.start) : "Not recorded";
 	const result = typeof note === "string" ? note : part.state.status === "error" ? "Failed" : part.state.status === "running" ? "Running" : "Returned";
 	return /* @__PURE__ */ jsxs("span", {
 		"data-record-tool-summary": "",
@@ -870,7 +1027,7 @@ function rowItems(row, context) {
 	if (withheld.length) {
 		const output = outputTokens(event.detail);
 		const span = thinkingSpan.get(event.id);
-		const label = output !== null ? `${span !== void 0 && span >= 1e3 ? `for ${spanLabel(span)} · ` : ""}${tokenLabel(output)} output tokens · ${withheld.join(" · ")}` : withheld.join(" · ");
+		const label = output !== null ? `${span !== void 0 && span >= 1e3 ? `for ${formatSpanDuration(span)} · ` : ""}${formatCompact(output)} output tokens · ${withheld.join(" · ")}` : withheld.join(" · ");
 		items.push({
 			id: `${event.id}:thinking`,
 			kind: "custom",
@@ -1249,50 +1406,6 @@ function Conversation({ index, actor, cutoff, query, category, selected, openSou
 		})]
 	}) });
 }
-// src/run/record/prompts.ts
-/** The conversation needs an opening prompt even when the provider did not retain its first user turn. */
-function withPrompts(record) {
-	const events = record.events.map((event) => ({
-		...event,
-		detail: { ...event.detail }
-	}));
-	const owners = new Map(record.nodes.map((node) => [node.id, node.agentId ?? node.id]));
-	for (const node of record.nodes.filter((item) => item.kind === "agent")) {
-		const own = events.filter((event) => (owners.get(event.node) ?? event.node) === node.id);
-		const firstReply = own.find((event) => event.detail.role === "assistant")?.at;
-		const userTurns = own.filter((event) => event.detail.role === "user" && typeof event.detail.publicText === "string" && !event.detail.publicText.trimStart().startsWith("<task-notification>"));
-		const initial = userTurns.find((event) => event.detail.promptKind !== "steering" && (!firstReply || event.at <= firstReply));
-		if (initial) initial.detail.promptKind = "initial";
-		else if (node.assignment?.trim()) {
-			const at = node.start ?? own[0]?.at;
-			if (at) events.push({
-				id: `prompt:${node.id}`,
-				node: node.id,
-				at,
-				kind: "message",
-				category: "other",
-				label: "Prompt",
-				source: null,
-				detail: {
-					role: "user",
-					publicText: node.assignment,
-					promptKind: "initial",
-					promptReconstructed: true,
-					promptSource: "node.assignment"
-				}
-			});
-		}
-		for (const event of userTurns) {
-			if (event === initial || event.detail.promptKind === "initial") continue;
-			event.detail.promptKind ??= "steering";
-		}
-	}
-	events.sort((a, b) => a.at.localeCompare(b.at) || Number(b.detail.promptKind === "initial") - Number(a.detail.promptKind === "initial"));
-	return {
-		...record,
-		events
-	};
-}
 // 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 }) {
@@ -1324,9 +1437,9 @@ function AgentTree({ index, actor, cutoff, select }) {
 		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 end = typeof node.end === "string" ? node.end : void 0;
-			const future = begin !== void 0 && begin > cutoff, ended = end !== void 0 && ms(end) <= cutoff;
-			const state = future ? "Not yet started" : ended ? node.status === "done" ? "Finished" : node.status === "down" ? "Stopped" : node.status ?? "Ended" : end ? "Not yet settled" : "No terminal record";
+			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", {
@@ -1339,7 +1452,7 @@ function AgentTree({ index, actor, cutoff, select }) {
 					title: node.label + (node.assignment ? " · " + node.assignment : "") + " · " + state,
 					onClick: () => select(node.id),
 					children: [/* @__PURE__ */ jsx(RunStatusIcon, {
-						status: runStatus(future ? "unknown" : node.status === "down" || node.status === "no-winner" ? "stopped" : node.status ?? "unknown"),
+						status,
 						className: "mt-0.5 size-3.5 shrink-0",
 						"aria-hidden": true
 					}), /* @__PURE__ */ jsxs("span", {
@@ -1371,4 +1484,4 @@ function AgentTree({ index, actor, cutoff, select }) {
 		})
 	});
 }
-export { model_exports as a, indexRecord as i, withPrompts as n, Conversation as r, AgentTree as t };
+export { fmt as a, modelIdentity as c, recordFlowTrace as d, roleOf as f, utcTime as h, eventSource as i, model_exports as l, toolKey as m, Conversation as n, indexRecord as o, textOf as p, eventMatches as r, interval as s, AgentTree as t, ms as u };

package/dist/{WorkflowGraph-CADReIDl.js → WorkflowGraph-B8cRtVaw.js}

@@ -3,7 +3,7 @@ import { n as classifyOutput, t as NodeOutputBody } from "./node-output-DlySTwxr
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Expand, Maximize2, Minimize2, Plus, Shrink, X } from "lucide-react";
-import { SELECTION_OUTLINE, loadElk, motionAllowed, useColorMode } from "@tangle-network/charts/react/agent-graph/presentation";
+import { SELECTION_OUTLINE, loadElk, motionAllowed, useColorMode as useColorMode$1 } from "@tangle-network/charts/react/agent-graph/presentation";
 import { Background, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Panel, Position, ReactFlow, ViewportPortal, getSmoothStepPath, getViewportForBounds, useEdgesState, useNodesState, useStore } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 // src/workflows/flow-graph.ts
@@ -1967,7 +1967,7 @@ function WorkflowGraph({ yaml, variant = "full", direction: directionProp, defau
 	]), direction, compact, canvasAspect, !editable);
 	const shownCompact = structural.compact ?? compact;
 	const shownDirection = structural.direction ?? direction;
-	const colorMode = useColorMode(wrapperRef, !structural.error && structural.nodes.length > 0);
+	const colorMode = useColorMode$1(wrapperRef, !structural.error && structural.nodes.length > 0);
 	const nodeBoxes = useMemo(() => structural.nodes.map((node) => ({
 		x: node.position.x,
 		y: node.position.y,