@tangle-network/sandbox-ui 0.137.1 → 0.138.0

package/dist/{page-layout-2IRtfx51.js → page-layout-CuOpvZys.js}

@@ -1,9 +1,9 @@
-import { t as cn } from "./utils-DzWbktWG.js";
+import { t as cn } from "./utils-BER_bdgE.js";
 import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, PageHeader, PageShell, Progress } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Check, Zap } from "lucide-react";
-//#region src/dashboard/billing-dashboard.tsx
+// src/dashboard/billing-dashboard.tsx
 const variantColors = { sandbox: {
 	accent: "text-[var(--accent-text)]",
 	accentBg: "bg-[var(--accent-surface-soft)]",
@@ -259,8 +259,7 @@ function BillingDashboard({ subscription, balance, usage, onManageSubscription,
 		]
 	});
 }
-//#endregion
-//#region src/dashboard/pricing-page.tsx
+// src/dashboard/pricing-page.tsx
 /**
 * Formats an integer cent amount as a human-readable USD price.
 * Whole-dollar amounts omit decimals ($10), fractional amounts show two ($10.99).
@@ -380,8 +379,7 @@ function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChang
 		})]
 	});
 }
-//#endregion
-//#region src/dashboard/usage-chart.tsx
+// src/dashboard/usage-chart.tsx
 const colors = {
 	bar: "bg-[image:var(--accent-gradient-strong)]",
 	barHover: "hover:brightness-110",
@@ -530,8 +528,7 @@ function UsageChart({ data, title, unit, className }) {
 		})] }) })]
 	});
 }
-//#endregion
-//#region src/dashboard/page-layout.tsx
+// src/dashboard/page-layout.tsx
 /** Product page spacing; the generic UI PageShell remains an exact re-export. */
 function SandboxPageShell({ children, className }) {
 	return /* @__PURE__ */ jsx(PageShell, {
@@ -547,5 +544,4 @@ function DashboardPageHeader({ title, description, actions, className }) {
 		className: cn("gap-3 [&_h1]:text-2xl sm:[&_h1]:text-[28px] [&_h1]:font-semibold [&_p]:text-base [&_p]:leading-relaxed", className)
 	});
 }
-//#endregion
 export { formatPrice as a, PricingPage as i, SandboxPageShell as n, BillingDashboard as o, UsageChart as r, DashboardPageHeader as t };

package/dist/pages.d.ts

@@ -1,8 +1,7 @@
-import { r as ModelInfo } from "./model-brand-B57CV8Lg.js";
-import { c as BillingBalance, d as BillingSubscription, f as BillingUsage, o as PricingTier, r as UsageDataPoint } from "./usage-chart-BjM8ShvX.js";
+import { r as ModelInfo } from "./model-brand-ZwVS49Fq.js";
+import { c as BillingBalance, d as BillingSubscription, f as BillingUsage, o as PricingTier, r as UsageDataPoint } from "./usage-chart-BFpdkqNq.js";
 import * as React$2 from "react";
 import { CSSProperties, ReactNode } from "react";
-//#region src/pages/auth-page.d.ts
 /**
  * Shared, self-contained sign-in / sign-up page for every Tangle vertical app.
  *
@@ -63,8 +62,6 @@ interface AuthPageProps {
   children?: ReactNode;
 }
 export declare function AuthPage({ product, tagline, mode, tangleAuthUrl, providers, socialHref, onEmailSubmit, collectName, altHref, accent, accentHover, accentForeground, logoSize, className, style, children }: AuthPageProps): import("react").JSX.Element;
-//#endregion
-//#region src/pages/billing-page.d.ts
 type ProductVariant = "sandbox";
 interface BillingPageData {
   subscription: BillingSubscription | null;
@@ -83,8 +80,6 @@ interface BillingPageProps {
   fetchBillingData?: () => Promise<BillingPageData>;
 }
 export declare function BillingPage({ variant, initialData, apiBasePath, onManageSubscription, onAddCredits, onSelectTier, fetchBillingData }: BillingPageProps): React$2.JSX.Element;
-//#endregion
-//#region src/pages/provisioning-types.d.ts
 interface EnvironmentOption {
   id: string;
   name: string;
@@ -168,8 +163,6 @@ interface ProvisioningConfig {
   bare: boolean;
   startupScriptIds?: string[];
 }
-//#endregion
-//#region src/pages/secrets-page.d.ts
 interface Secret {
   name: string;
   createdAt: string;
@@ -213,8 +206,6 @@ interface SecretsPageProps {
   };
 }
 export declare function SecretsPage({ apiClient, className, teamSecretsHint, title, description, createDescription, emptyDescription, deleteConsequence, variant }: SecretsPageProps): React$2.JSX.Element;
-//#endregion
-//#region src/pages/startup-scripts-page.d.ts
 type ScriptType = "bash" | "python" | "node" | "ruby" | "custom";
 interface StartupScript {
   id: string;
@@ -268,10 +259,7 @@ interface StartupScriptsPageProps {
   className?: string;
 }
 export declare function StartupScriptsPage({ apiClient, className }: StartupScriptsPageProps): React$2.JSX.Element;
-//#endregion
-//#region src/lib/template-presets.d.ts
 type TemplateCategory = "blockchain" | "ai-ml" | "frontend" | "infrastructure" | "general";
 type TemplatePreset = Omit<ProvisioningConfig, "name" | "gitUrl" | "envVars" | "driver" | "startupScriptIds">;
 export declare function getPresetForTemplate(id: string): TemplatePreset;
-//#endregion
 export type { AuthPageProps, BillingPageData, BillingPageProps, EnvironmentEntry, EnvironmentOption, ModelInfo, PlanTierInfo, PricingRates, PricingTier, ProductVariant, ProvisioningConfig, ResourceLimits, ScriptType, Secret, SecretsApiClient, SecretsPageProps, SocialProvider, SshAccessConfig, SshKeyOption, StartupScript, StartupScriptEntry, StartupScriptFormData, StartupScriptsApiClient, StartupScriptsPageProps, TemplateCategory, TemplatePreset };

package/dist/pages.js

@@ -1,6 +1,6 @@
-import { t as cn$1 } from "./utils-DzWbktWG.js";
-import { r as ShellHeader } from "./shell-header-CTh3oV_e.js";
-import { i as PricingPage, o as BillingDashboard, r as UsageChart, t as DashboardPageHeader } from "./page-layout-2IRtfx51.js";
+import { t as cn$1 } from "./utils-BER_bdgE.js";
+import { r as ShellHeader } from "./shell-header-CwqDzC4I.js";
+import { i as PricingPage, o as BillingDashboard, r as UsageChart, t as DashboardPageHeader } from "./page-layout-CuOpvZys.js";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Skeleton, SkeletonCard, Tabs, TabsContent, TabsList, TabsTrigger } from "@tangle-network/ui/primitives";
 import { Logo, TangleKnot } from "@tangle-network/brand";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -8,7 +8,7 @@ import * as React$1 from "react";
 import { useState } from "react";
 import { AlertCircle, CheckCircle, ChevronDown, ChevronUp, Clock, Cpu, Eye, EyeOff, GripVertical, Key, Layers, Lock, MemoryStick, Pencil, Plus, Power, PowerOff, Terminal, Trash2, Upload } from "lucide-react";
 import { cn, focusField, focusRing, ixControl, ixControlSoft, ixField } from "@tangle-network/ui/utils";
-//#region src/pages/auth-page.tsx
+// src/pages/auth-page.tsx
 const C = {
 	pageBg: "hsl(var(--background, 240 5% 97%))",
 	card: "hsl(var(--card, 0 0% 100%))",
@@ -312,8 +312,7 @@ function AuthPage({ product, tagline, mode = "signin", tangleAuthUrl = "/auth/ta
 		})
 	});
 }
-//#endregion
-//#region src/pages/billing-page.tsx
+// src/pages/billing-page.tsx
 const defaultBillingData = {
 	subscription: null,
 	balance: {
@@ -596,8 +595,7 @@ function BillingPage({ variant = "sandbox", initialData, apiBasePath = "", onMan
 		})
 	});
 }
-//#endregion
-//#region src/pages/env-importer.ts
+// src/pages/env-importer.ts
 const NORMALIZE_RE = /[^A-Z0-9_]/g;
 /** Mirrors the on-keystroke normalization used by the single-secret input. */
 function normalizeKey(rawKey) {
@@ -688,8 +686,7 @@ function parseEnvText(text) {
 		errors
 	};
 }
-//#endregion
-//#region src/pages/secrets-page.tsx
+// src/pages/secrets-page.tsx
 /** Cap pasted/uploaded import sources so a pathological file cannot blow up the parser/UI. */
 const MAX_IMPORT_FILE_BYTES = 262144;
 const DEFAULT_DESCRIPTION = "Manage environment variables for your sandboxes.";
@@ -1482,8 +1479,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint, title = "Environme
 		]
 	});
 }
-//#endregion
-//#region src/pages/startup-scripts-page.tsx
+// src/pages/startup-scripts-page.tsx
 const SCRIPT_TYPE_META = {
 	bash: {
 		label: "Bash",
@@ -2334,8 +2330,7 @@ function StartupScriptsPage({ apiClient, className }) {
 		]
 	});
 }
-//#endregion
-//#region src/lib/template-presets.ts
+// src/lib/template-presets.ts
 const BLOCKCHAIN_PATTERNS = [
 	"ethereum",
 	"solana",
@@ -2478,5 +2473,4 @@ function getPresetForTemplate(id) {
 		environment: id
 	};
 }
-//#endregion
 export { AuthPage, BillingPage, SecretsPage, StartupScriptsPage, getPresetForTemplate };

package/dist/{primitives-CLOVnjWz.js → primitives-CiwDp4-0.js}

@@ -1,8 +1,8 @@
-import { n as __reExport, t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
+import { n as __reExport, t as __exportAll } from "./rolldown-runtime-782esTHO.js";
 import { PageHeader } from "@tangle-network/ui/primitives";
 import { Logo, TangleKnot as TangleKnot$1 } from "@tangle-network/brand";
 import { jsx } from "react/jsx-runtime";
-//#region src/primitives/logo.tsx
+// src/primitives/logo.tsx
 /** Keep the Sandbox wordmark API while Brand owns the mark and layout. */
 function Logo$1({ variant = "sandbox", size = "md", className, iconOnly = false }) {
 	return /* @__PURE__ */ jsx(Logo, {
@@ -13,8 +13,7 @@ function Logo$1({ variant = "sandbox", size = "md", className, iconOnly = false
 	});
 }
 Logo$1.displayName = "Logo";
-//#endregion
-//#region src/primitives/heading.tsx
+// src/primitives/heading.tsx
 /** Compatibility name for the canonical nested (h2) page header. */
 function SectionTitle(props) {
 	return /* @__PURE__ */ jsx(PageHeader, {
@@ -22,8 +21,7 @@ function SectionTitle(props) {
 		level: 2
 	});
 }
-//#endregion
-//#region src/primitives/index.ts
+// src/primitives/index.ts
 var primitives_exports = /* @__PURE__ */ __exportAll({
 	Logo: () => Logo$1,
 	SectionTitle: () => SectionTitle,
@@ -31,5 +29,4 @@ var primitives_exports = /* @__PURE__ */ __exportAll({
 });
 import * as import__tangle_network_ui_primitives from "@tangle-network/ui/primitives";
 __reExport(primitives_exports, import__tangle_network_ui_primitives);
-//#endregion
 export { TangleKnot$1 as i, SectionTitle as n, Logo$1 as r, primitives_exports as t };

package/dist/primitives.d.ts

@@ -1,3 +1,3 @@
-import { a as LogoProps, i as Logo, n as SectionTitle, o as TangleKnot, r as SectionTitleProps, t as HeadingProps } from "./index-DsU8ts9f.js";
+import { a as LogoProps, i as Logo, n as SectionTitle, o as TangleKnot, r as SectionTitleProps, t as HeadingProps } from "./index-BAEvGqrn.js";
 export * from "@tangle-network/ui/primitives";
 export { type HeadingProps, Logo, type LogoProps, SectionTitle, type SectionTitleProps, TangleKnot };

package/dist/primitives.js

@@ -1,3 +1,2 @@
-import { i as TangleKnot, n as SectionTitle, r as Logo } from "./primitives-CLOVnjWz.js";
+export { r as Logo, n as SectionTitle, i as TangleKnot } from "./primitives-CiwDp4-0.js";
 export * from "@tangle-network/ui/primitives";
-export { Logo, SectionTitle, TangleKnot };

package/dist/{provider-logo-BGCziCbM.js → provider-logo-CPKRPHcS.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import * as React$1 from "react";
-//#region src/integrations/provider-logo.tsx
+// src/integrations/provider-logo.tsx
 /**
 * Provider branding: resolve a connector/provider slug to a logo and render it
 * with graceful fallbacks. Shared by the integrations catalog tiles and the
@@ -325,5 +325,4 @@ function ProviderIcon({ id, iconUrl, displayName, size = 24, className }) {
 		onError: () => setIndex((i) => i + 1)
 	});
 }
-//#endregion
 export { normalizeProviderId as n, providerLogoCandidates as r, ProviderIcon as t };

package/dist/{rolldown-runtime-BBjsoOtd.js → rolldown-runtime-782esTHO.js}

@@ -1,4 +1,4 @@
-//#region \0rolldown/runtime.js
+// \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -23,5 +23,4 @@ var __copyProps = (to, from, except, desc) => {
 	return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-//#endregion
 export { __reExport as n, __exportAll as t };

package/dist/run-CliTxkfw.js

@@ -0,0 +1,397 @@
+import { t as cn } from "./utils-BER_bdgE.js";
+import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
+import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { X } from "lucide-react";
+import { AgentTimeline } from "@tangle-network/ui/chat";
+import { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineThinkingItem as InlineThinkingItem$1, InlineToolItem, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, TaskList, ToolCallFeed, parseToolEvent, showsTaskPriority, taskProgress, taskStatus } from "@tangle-network/ui/run";
+import { FlowWaterfall } from "@tangle-network/charts/react";
+// 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. */
+function traceSpanMark(span) {
+	if (span.kind === "pipeline" || span.kind === "model") {
+		const identity = span.detail ? modelBrandFor(span.detail) : null;
+		return identity ? /* @__PURE__ */ jsx(ModelBrandStack, {
+			identity,
+			size: "sm"
+		}) : void 0;
+	}
+	const provider = span.icon ?? (span.kind === "tool" ? span.detail : void 0);
+	return provider ? /* @__PURE__ */ jsx(ProviderIcon, {
+		id: provider,
+		displayName: provider,
+		size: 14,
+		className: "rounded-[3px]"
+	}) : void 0;
+}
+/**
+* The run inspector: the agent timeline (`defaultView="agents"`) and the span waterfall over one clock, from
+* `@tangle-network/charts`, with Sandbox UI's brand marks. Feed it `otlpFlowTrace(spans)` from the
+* `traces convert` contract. Import `@tangle-network/charts/react/flow-waterfall.css` once.
+*/
+function TraceWaterfall({ renderIcon = traceSpanMark, ...props }) {
+	return /* @__PURE__ */ jsx(FlowWaterfall, {
+		renderIcon,
+		...props
+	});
+}
+// src/run/agent-stream.ts
+const TOOL_TYPES = /* @__PURE__ */ new Set([
+	"bash",
+	"read",
+	"write",
+	"edit",
+	"glob",
+	"grep",
+	"list",
+	"download",
+	"inspect",
+	"audit"
+]);
+const toolType = (name) => {
+	const key = (name ?? "").toLowerCase();
+	return TOOL_TYPES.has(key) ? key : "unknown";
+};
+const brief = (value, max = 240) => {
+	if (value === void 0 || value === null) return void 0;
+	const text = typeof value === "string" ? value : JSON.stringify(value);
+	return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+};
+const failed = (result) => typeof result === "object" && result !== null && ("error" in result || result.is_error === true);
+/** Fold stream rows into transcript entries: text of one turn merges, a tool call becomes a row its result completes. */
+function foldAgentRows(entries, rows) {
+	const next = [...entries];
+	for (const row of rows) {
+		const at = Date.parse(row.at);
+		const { event } = row;
+		const last = next[next.length - 1];
+		if (event.kind === "text" && event.text) {
+			if (last?.kind === "message" && last.role === "assistant") next[next.length - 1] = {
+				...last,
+				content: last.content + event.text
+			};
+			else next.push({
+				id: `m-${row.seq}`,
+				at,
+				kind: "message",
+				role: "assistant",
+				content: event.text
+			});
+		} else if (event.kind === "user" && event.text) next.push({
+			id: `u-${row.seq}`,
+			at,
+			kind: "message",
+			role: "user",
+			content: event.text
+		});
+		else if (event.kind === "reasoning" && event.text) {
+			if (last?.kind === "reasoning") next[next.length - 1] = {
+				...last,
+				text: last.text + event.text
+			};
+			else next.push({
+				id: `r-${row.seq}`,
+				at,
+				kind: "reasoning",
+				text: event.text
+			});
+		} else if (event.kind === "tool-call") {
+			const id = event.toolCallId ?? `t-${row.seq}`;
+			next.push({
+				id,
+				at,
+				kind: "tool",
+				call: {
+					id,
+					type: toolType(event.toolName),
+					label: event.toolName ?? "tool",
+					status: "running",
+					detail: brief(event.args, 120)
+				}
+			});
+		} else if (event.kind === "tool-result") {
+			const index = next.findIndex((entry) => entry.kind === "tool" && entry.call.id === event.toolCallId);
+			const entry = next[index];
+			if (entry?.kind === "tool") next[index] = {
+				...entry,
+				call: {
+					...entry.call,
+					status: failed(event.result) ? "error" : "success",
+					output: brief(event.result),
+					duration: Math.max(0, at - entry.at)
+				}
+			};
+		}
+	}
+	return next;
+}
+function reduce(state, action) {
+	switch (action.type) {
+		case "reset": return {
+			generation: action.generation,
+			entries: [],
+			lastSeq: 0,
+			alive: true
+		};
+		case "rows": {
+			const base = action.generation !== void 0 && action.generation !== state.generation ? {
+				entries: [],
+				lastSeq: 0
+			} : state;
+			const fresh = action.rows.filter((row) => row.seq > base.lastSeq);
+			return {
+				generation: action.generation ?? state.generation,
+				entries: foldAgentRows(base.entries, fresh),
+				lastSeq: fresh.reduce((max, row) => Math.max(max, row.seq), base.lastSeq),
+				alive: action.alive ?? state.alive
+			};
+		}
+		case "end": return {
+			...state,
+			alive: false
+		};
+		case "error": return {
+			...state,
+			error: action.message
+		};
+	}
+}
+/**
+* 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.
+*/
+function useAgentStream(url) {
+	const [state, dispatch] = useReducer(reduce, {
+		entries: [],
+		lastSeq: 0,
+		alive: false
+	});
+	useEffect(() => {
+		if (!url || typeof EventSource === "undefined") return;
+		dispatch({ type: "reset" });
+		let lastSeq = 0;
+		let closed = false;
+		let source;
+		let retry;
+		const open = () => {
+			const target = new URL(url, globalThis.location?.href);
+			if (lastSeq > 0) target.searchParams.set("after", String(lastSeq));
+			source = new EventSource(target.toString());
+			source.addEventListener("rows", (message) => {
+				const data = JSON.parse(message.data);
+				lastSeq = Math.max(lastSeq, data.lastSeq ?? 0, ...data.events.map((row) => row.seq));
+				dispatch({
+					type: "rows",
+					generation: data.generation,
+					rows: data.events,
+					alive: data.alive
+				});
+			});
+			source.addEventListener("reset", (message) => {
+				lastSeq = 0;
+				dispatch({
+					type: "reset",
+					generation: JSON.parse(message.data).generation
+				});
+			});
+			source.addEventListener("end", () => {
+				closed = true;
+				source?.close();
+				dispatch({ type: "end" });
+			});
+			source.onerror = () => {
+				source?.close();
+				if (!closed) retry = setTimeout(open, 1e3);
+			};
+		};
+		open();
+		return () => {
+			closed = true;
+			clearTimeout(retry);
+			source?.close();
+		};
+	}, [url]);
+	return state;
+}
+// src/run/trace-workspace.tsx
+/** The agent that owns a span: the span itself when it is an agent, else its nearest agent ancestor. */
+function agentOf(span, byId) {
+	for (let cursor = span; cursor; cursor = cursor.parentId ? byId.get(cursor.parentId) : void 0) if (cursor.kind === "pipeline") return cursor;
+}
+function timelineItems(entries, streaming) {
+	return entries.map((entry, index) => {
+		if (entry.kind === "message") return {
+			id: entry.id,
+			kind: "message",
+			role: entry.role,
+			content: entry.content,
+			isStreaming: streaming && index === entries.length - 1
+		};
+		if (entry.kind === "tool") return {
+			id: entry.id,
+			kind: "tool",
+			call: entry.call
+		};
+		return {
+			id: entry.id,
+			kind: "custom",
+			content: /* @__PURE__ */ jsx(InlineThinkingItem, {
+				part: {
+					type: "reasoning",
+					text: entry.text
+				},
+				defaultOpen: false,
+				openWhileActive: false
+			})
+		};
+	});
+}
+function NotTimeIndexed({ label }) {
+	return /* @__PURE__ */ jsxs("p", {
+		className: "p-4 text-sm text-muted-foreground",
+		children: [label, ": not time-indexed"]
+	});
+}
+/**
+* The run workspace: the agent timeline and span waterfall over one clock, the selected agent's conversation
+* streaming in a right-hand drawer, and the page's code workspace and scoreboard following the time cursor. Scrubbing is time travel:
+* every panel shows what was true at the cursor, and the conversation shows what had been said by then.
+*/
+function TraceWorkspace({ trace, streamUrl, events, onTimeChange, files, scoreboard, selectedAgentId, onSelectAgent, className, ...waterfall }) {
+	const byId = useMemo(() => new Map(trace.spans.flatMap((span) => span.id ? [[span.id, span]] : [])), [trace]);
+	const [ownSelection, setOwnSelection] = useState();
+	const selected = selectedAgentId ?? ownSelection;
+	const select = (agentId) => {
+		setOwnSelection(agentId);
+		onSelectAgent?.(agentId);
+	};
+	const agent = selected ? byId.get(selected) : void 0;
+	const [cursor, setCursor] = useState(null);
+	const stream = useAgentStream(selected && streamUrl ? streamUrl(selected) : void 0);
+	const origin = useMemo(() => {
+		if (waterfall.startedAt !== void 0) return waterfall.startedAt;
+		const first = stream.entries[0]?.at;
+		return agent && first !== void 0 ? first - agent.startMs : void 0;
+	}, [
+		waterfall.startedAt,
+		agent,
+		stream.entries
+	]);
+	const shown = cursor === null || origin === void 0 ? stream.entries : stream.entries.filter((entry) => entry.at - origin <= cursor);
+	const items = useMemo(() => timelineItems(shown, cursor === null && stream.alive), [
+		shown,
+		cursor,
+		stream.alive
+	]);
+	const scroller = useRef(null);
+	const pinned = useRef(true);
+	const [unseen, setUnseen] = useState(false);
+	useLayoutEffect(() => {
+		const element = scroller.current;
+		if (!element) return;
+		if (pinned.current) element.scrollTop = element.scrollHeight;
+		else setUnseen(true);
+	}, [items.length, items[items.length - 1]]);
+	useEffect(() => {
+		pinned.current = true;
+		setUnseen(false);
+	}, [selected]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("sandbox-trace-workspace flex min-h-0 flex-col gap-3", className),
+		children: [
+			/* @__PURE__ */ jsx(TraceWaterfall, {
+				...waterfall,
+				trace,
+				markers: events,
+				selectedId: agent?.id,
+				onDeselect: () => select(void 0),
+				onSelect: (span) => {
+					const owner = agentOf(span, byId);
+					if (owner?.id) select(owner.id);
+				},
+				onTimeChange: (t) => {
+					setCursor(t);
+					onTimeChange?.(t);
+				}
+			}),
+			/* @__PURE__ */ jsx("section", {
+				"aria-label": "Code at the cursor",
+				className: "flex min-h-[70vh] flex-col overflow-hidden rounded-xl border border-border bg-card",
+				children: files ?? /* @__PURE__ */ jsx(NotTimeIndexed, { label: "Files" })
+			}),
+			scoreboard && /* @__PURE__ */ jsx("section", {
+				"aria-label": "Scoreboard at the cursor",
+				className: "overflow-hidden rounded-xl border border-border bg-card",
+				children: scoreboard
+			}),
+			agent && /* @__PURE__ */ jsxs("aside", {
+				"aria-label": `${agent.name} conversation`,
+				onKeyDown: (event) => {
+					if (event.key === "Escape") select(void 0);
+				},
+				className: "fixed inset-y-0 right-0 z-40 flex w-full max-w-[420px] flex-col border-l border-border bg-card shadow-2xl",
+				children: [
+					/* @__PURE__ */ jsxs("header", {
+						className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-2",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: cn("h-2 w-2 shrink-0 rounded-full", stream.alive && cursor === null ? "bg-[var(--status-running,#34c48c)]" : "bg-muted-foreground/50"),
+								"aria-hidden": true
+							}),
+							/* @__PURE__ */ jsx("h3", {
+								className: "min-w-0 flex-1 truncate text-sm font-semibold",
+								children: agent.name
+							}),
+							agent.detail && /* @__PURE__ */ jsx("span", {
+								className: "truncate text-xs text-muted-foreground",
+								children: agent.detail
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": "Close conversation",
+								title: "Close (Esc)",
+								onClick: () => select(void 0),
+								className: "shrink-0 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+								children: /* @__PURE__ */ jsx(X, {
+									"aria-hidden": true,
+									className: "h-4 w-4"
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: scroller,
+						onScroll: (event) => {
+							const element = event.currentTarget;
+							pinned.current = element.scrollHeight - element.scrollTop - element.clientHeight < 48;
+							if (pinned.current) setUnseen(false);
+						},
+						"data-primary-content": "",
+						className: "min-h-0 flex-1 overflow-y-auto px-3 py-2",
+						children: streamUrl ? /* @__PURE__ */ jsx(AgentTimeline, {
+							items,
+							isThinking: stream.alive && cursor === null && items.length === 0,
+							emptyState: /* @__PURE__ */ jsx("p", {
+								className: "p-4 text-sm text-muted-foreground",
+								children: stream.error ?? "No messages yet."
+							})
+						}) : /* @__PURE__ */ jsx(NotTimeIndexed, { label: "Conversation" })
+					}),
+					unseen && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							const element = scroller.current;
+							if (element) element.scrollTop = element.scrollHeight;
+							pinned.current = true;
+							setUnseen(false);
+						},
+						className: "absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full border border-border bg-background px-3 py-1 text-xs shadow-sm",
+						children: "New output"
+					})
+				]
+			})
+		]
+	});
+}
+export { TraceWorkspace as _, InlineToolItem as a, TraceWaterfall as b, RunPhaseList as c, TaskList as d, ToolCallFeed as f, taskStatus as g, taskProgress as h, InlineThinkingItem$1 as i, RunRowShell as l, showsTaskPriority as m, ApprovalDiffSummary as n, LiveDuration as o, parseToolEvent as p, ExpandedToolDetail as r, RunGroup as s, ApprovalCard as t, RunRowStatusDot as u, foldAgentRows as v, traceSpanMark as x, useAgentStream as y };

package/dist/run.d.ts

@@ -1,2 +1,2 @@
-import { ApprovalCard, ApprovalCardProps, ApprovalDiffFile, ApprovalDiffSummary, ApprovalPlanStep, ExpandedToolDetail, ExpandedToolDetailProps, FeedSegment, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunPhase, RunPhaseList, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot, TaskList, TaskListItem, TaskListProps, TaskStatus, ToolCallData, ToolCallFeed, ToolCallFeedProps, ToolCallStatus, ToolCallType, parseToolEvent, showsTaskPriority, taskProgress, taskStatus } from "@tangle-network/ui/run";
-export { ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, parseToolEvent, showsTaskPriority, taskProgress, taskStatus };
+import { A as ToolCallType, B as TraceEvent, C as TaskListItem, D as ToolCallFeed, E as ToolCallData, F as AgentStreamRow, G as traceSpanMark, H as TraceWorkspaceProps, I as AgentStreamState, L as AgentTranscriptEntry, M as showsTaskPriority, N as taskProgress, O as ToolCallFeedProps, P as taskStatus, R as foldAgentRows, S as TaskList, T as TaskStatus, U as TraceWaterfall, V as TraceWorkspace, W as TraceWaterfallProps, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as parseToolEvent, k as ToolCallStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as TaskListProps, x as RunRowStatusDot, y as RunRowShellProps, z as useAgentStream } from "./index-C5h5T0nb.js";
+export { type AgentStreamRow, type AgentStreamState, type AgentTranscriptEntry, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, type TraceEvent, TraceWaterfall, type TraceWaterfallProps, TraceWorkspace, type TraceWorkspaceProps, foldAgentRows, parseToolEvent, showsTaskPriority, taskProgress, taskStatus, traceSpanMark, useAgentStream };

package/dist/run.js

@@ -1,2 +1 @@
-import { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, TaskList, ToolCallFeed, parseToolEvent, showsTaskPriority, taskProgress, taskStatus } from "@tangle-network/ui/run";
-export { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, TaskList, ToolCallFeed, parseToolEvent, showsTaskPriority, taskProgress, taskStatus };
+export { t as ApprovalCard, n as ApprovalDiffSummary, r as ExpandedToolDetail, i as InlineThinkingItem, a as InlineToolItem, o as LiveDuration, s as RunGroup, c as RunPhaseList, l as RunRowShell, u as RunRowStatusDot, d as TaskList, f as ToolCallFeed, b as TraceWaterfall, _ as TraceWorkspace, v as foldAgentRows, p as parseToolEvent, m as showsTaskPriority, h as taskProgress, g as taskStatus, x as traceSpanMark, y as useAgentStream } from "./run-CliTxkfw.js";