@flanksource/clicky-ui 0.3.56 → 0.3.57

package/dist/data/traces/otel/OtelTraceDetail.js

@@ -0,0 +1,781 @@
+import { UiChevronDown } from "../../../icons/components/UiChevronDown.js";
+import { UiChevronRight } from "../../../icons/components/UiChevronRight.js";
+import { UiCollapseAll } from "../../../icons/components/UiCollapseAll.js";
+import { UiExpandAll } from "../../../icons/components/UiExpandAll.js";
+import { UiCoins } from "../../../icons/components/UiCoins.js";
+import { UiWarningTriangle } from "../../../icons/components/UiWarningTriangle.js";
+import { UiSparkles } from "../../../icons/components/UiSparkles.js";
+import { UiRobotAi } from "../../../icons/components/UiRobotAi.js";
+import { UiDatabase } from "../../../icons/components/UiDatabase.js";
+import { UiClock } from "../../../icons/components/UiClock.js";
+import { Icon } from "../../Icon.js";
+import { Button } from "../../../components/button.js";
+import { CopyButton } from "../../../components/CopyButton.js";
+import { Badge } from "../../Badge.js";
+import { SearchInput } from "../../../components/SearchInput.js";
+import { Switch } from "../../../components/Switch.js";
+import { Properties } from "../../Properties.js";
+import { Callout } from "../../Callout.js";
+import { CodeBlock } from "../../CodeBlock.js";
+import { SplitPane } from "../../../layout/SplitPane.js";
+import { Section } from "../../../layout/Section.js";
+import { StatStrip } from "../../StatStrip.js";
+import { Tinted } from "./SpanCategory.js";
+import { CATEGORY_COLOR, CATEGORY_LABEL, buildRows, category, duration, indexTrace, isError, misparented, niceStep, num, selfTimeMs, shortOperation, withAncestors } from "./model.js";
+import { metric } from "./metrics.js";
+import { AgentCard, DbCard, GroupDetail, LlmCard } from "./SpanCards.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/data/traces/otel/OtelTraceDetail.tsx
+/**
+* OpenTelemetry waterfall with grouped calls and an adjacent span inspector.
+*/
+var CATEGORY_ICON = {
+	agent: UiRobotAi,
+	llm: UiSparkles,
+	db: UiDatabase,
+	other: UiClock
+};
+var ROW_HEIGHT = 28;
+var NAME_COLUMN = "minmax(15rem, 36%) minmax(0, 1fr)";
+function OtelTraceDetail({ trace: TRACE, selectedSpanId, onSelectSpan }) {
+	const index = useMemo(() => indexTrace(TRACE), [TRACE]);
+	const suspects = useMemo(() => misparented(index), [index]);
+	const selected = selectedSpanId ?? TRACE.spans[0]?.spanId ?? "";
+	const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+	const groupOf = (id) => buildRows(index, {
+		collapsed: /* @__PURE__ */ new Set(),
+		expanded: /* @__PURE__ */ new Set(),
+		group: true
+	}).find((row) => row.type === "group" && row.spans.some((span) => span.spanId === id))?.id;
+	const [expanded, setExpanded] = useState(() => new Set([groupOf(selected)].filter((id) => id !== void 0)));
+	const [group, setGroup] = useState(true);
+	const [query, setQuery] = useState("");
+	const [categories, setCategories] = useState(/* @__PURE__ */ new Set());
+	const [onlySuspects, setOnlySuspects] = useState(false);
+	const visible = useMemo(() => {
+		const q = query.trim().toLowerCase();
+		if (!q && categories.size === 0 && !onlySuspects) return void 0;
+		const hits = TRACE.spans.filter((span) => (!q || [
+			span.operation,
+			span.service,
+			...Object.values(span.attributes ?? {}).map(String)
+		].some((text) => text.toLowerCase().includes(q))) && (categories.size === 0 || categories.has(category(span))) && (!onlySuspects || suspects.has(span.spanId)));
+		return withAncestors(index, hits.map((span) => span.spanId));
+	}, [
+		index,
+		query,
+		categories,
+		onlySuspects,
+		suspects,
+		TRACE
+	]);
+	const rows = useMemo(() => buildRows(index, {
+		collapsed,
+		expanded,
+		group,
+		...visible ? { visible } : {}
+	}), [
+		index,
+		collapsed,
+		expanded,
+		group,
+		visible
+	]);
+	const select = (id) => {
+		const group = groupOf(id);
+		if (group) setExpanded((previous) => new Set(previous).add(group));
+		onSelectSpan(id);
+	};
+	const toggle = (set, id) => set((previous) => {
+		const next = new Set(previous);
+		if (!next.delete(id)) next.add(id);
+		return next;
+	});
+	const selectedSpan = index.byId.get(selected);
+	const selectedGroup = rows.find((row) => row.type === "group" && row.id === selected);
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-8",
+		children: /* @__PURE__ */ jsxs("section", {
+			className: "space-y-4 rounded-xl border border-border bg-background p-density-4",
+			children: [
+				/* @__PURE__ */ jsx(TraceHeader, {
+					index,
+					trace: TRACE
+				}),
+				TRACE.missingParents.length > 0 && /* @__PURE__ */ jsxs("p", {
+					role: "status",
+					children: [
+						"Partial trace: ",
+						TRACE.missingParents.length,
+						" parent spans are missing from this source."
+					]
+				}),
+				suspects.size > 0 && /* @__PURE__ */ jsx(Callout, {
+					variant: "warning",
+					title: `${suspects.size} spans run inside a nested agent but hang off its parent`,
+					children: /* @__PURE__ */ jsxs("p", {
+						className: "text-sm",
+						children: [
+							"They start and end within ",
+							/* @__PURE__ */ jsx("code", { children: shortOperation(suspects.values().next().value.operation) }),
+							", yet their parent is the root span, so the nested agent looks like it made a single LLM call. This usually means the agent's context is not propagated to its database client.",
+							" ",
+							/* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "link",
+								className: "h-auto p-0",
+								onClick: () => setOnlySuspects((on) => !on),
+								children: onlySuspects ? "Show all spans" : "Show only these spans"
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx(Toolbar, {
+					trace: TRACE,
+					query,
+					setQuery,
+					categories,
+					toggleCategory: (c) => setCategories((previous) => {
+						const next = new Set(previous);
+						if (!next.delete(c)) next.add(c);
+						return next;
+					}),
+					group,
+					setGroup,
+					expandAll: () => {
+						setCollapsed(/* @__PURE__ */ new Set());
+						setExpanded(new Set(rows.filter((row) => row.type === "group").map((row) => row.id)));
+					},
+					collapseAll: () => {
+						setExpanded(/* @__PURE__ */ new Set());
+						setCollapsed(new Set(TRACE.spans.filter((span) => index.children.has(span.spanId) && !span.parentId).map((span) => span.spanId)));
+					},
+					shown: rows.length
+				}),
+				/* @__PURE__ */ jsx(SplitPane, {
+					stackOnMobile: true,
+					defaultSplit: 62,
+					minLeft: 40,
+					minRight: 25,
+					className: "rounded-lg border border-border",
+					left: /* @__PURE__ */ jsx(Waterfall, {
+						index,
+						rows,
+						selected,
+						onSelect: select,
+						suspects,
+						onToggleSpan: (id) => toggle(setCollapsed, id),
+						onToggleGroup: (id) => toggle(setExpanded, id),
+						expanded,
+						collapsed
+					}),
+					right: /* @__PURE__ */ jsx("div", {
+						className: "h-72 overflow-auto p-density-3 md:h-[calc(100dvh-14rem)] md:min-h-[30rem]",
+						children: selectedGroup ? /* @__PURE__ */ jsx(GroupDetail, {
+							index,
+							spans: selectedGroup.spans,
+							onSelect: select
+						}) : selectedSpan ? /* @__PURE__ */ jsx(SpanDetail, {
+							index,
+							span: selectedSpan,
+							host: suspects.get(selectedSpan.spanId),
+							onSelect: select
+						}) : /* @__PURE__ */ jsx("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Select a span."
+						})
+					})
+				})
+			]
+		})
+	});
+}
+function TraceHeader({ index, trace: TRACE }) {
+	const { summary } = TRACE;
+	const by = (c) => TRACE.spans.filter((span) => category(span) === c);
+	const llm = by("llm");
+	const db = by("db");
+	const sum = (spans, key) => {
+		const values = spans.map((span) => num(span.attributes?.[key])).filter((value) => value !== void 0);
+		return values.length ? values.reduce((total, value) => total + value, 0) : void 0;
+	};
+	const root = index.roots[0];
+	const cost = num(root.attributes?.["captain.cost_usd"]);
+	const budget = num(root.attributes?.["captain.budget.cost_usd"]);
+	const tokensIn = sum(llm, "gen_ai.usage.input_tokens");
+	const tokensOut = sum(llm, "gen_ai.usage.output_tokens");
+	const ms = (spans) => spans.reduce((total, span) => total + span.durationMs, 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-start justify-between gap-3",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 space-y-1",
+				children: [/* @__PURE__ */ jsxs("h2", {
+					className: "flex items-center gap-2 text-xl font-semibold tracking-tight",
+					children: [
+						/* @__PURE__ */ jsx(Tinted, {
+							icon: UiRobotAi,
+							color: CATEGORY_COLOR.agent
+						}),
+						shortOperation(summary.operation),
+						summary.errors === 0 ? /* @__PURE__ */ jsx(Badge, {
+							tone: "success",
+							variant: "soft",
+							children: "no errors"
+						}) : /* @__PURE__ */ jsxs(Badge, {
+							tone: "danger",
+							variant: "soft",
+							children: [summary.errors, " errors"]
+						})
+					]
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground",
+					children: [
+						/* @__PURE__ */ jsx("code", { children: summary.traceId }),
+						/* @__PURE__ */ jsx(CopyButton, {
+							value: summary.traceId,
+							label: "Copy trace ID"
+						}),
+						/* @__PURE__ */ jsxs("span", { children: [
+							"· ",
+							summary.services.join(", "),
+							" · ",
+							new Date(summary.startedAt).toLocaleString()
+						] })
+					]
+				})]
+			})
+		}), /* @__PURE__ */ jsx(StatStrip, { items: [
+			{
+				label: "Duration",
+				value: duration(summary.durationMs),
+				sub: `${summary.spanCount} spans`,
+				icon: UiClock
+			},
+			{
+				label: "LLM",
+				value: duration(ms(llm)),
+				sub: `${llm.length} calls · ${metric(tokensIn)} in / ${metric(tokensOut)} out`,
+				icon: UiSparkles
+			},
+			{
+				label: "Database",
+				value: duration(ms(db)),
+				sub: `${db.length} calls · ${new Set(db.map((span) => span.attributes?.["db.sql.table"])).size} tables`,
+				icon: UiDatabase
+			},
+			{
+				label: "Cost",
+				value: metric(cost, (value) => `$${value.toFixed(4)}`),
+				sub: budget ? `of $${budget} budget` : "budget unavailable",
+				icon: UiCoins
+			},
+			{
+				label: "Root self-time",
+				value: duration(selfTimeMs(index, root)),
+				sub: "not covered by any child span",
+				icon: UiRobotAi,
+				tone: "warning"
+			}
+		] })]
+	});
+}
+function Toolbar(props) {
+	const counts = props.trace.spans.reduce((acc, span) => ({
+		...acc,
+		[category(span)]: (acc[category(span)] ?? 0) + 1
+	}), {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx(SearchInput, {
+				className: "w-72",
+				placeholder: "Filter by name, table or attribute",
+				value: props.query,
+				onChange: props.setQuery
+			}),
+			Object.keys(counts).map((c) => {
+				const on = props.categories.has(c);
+				return /* @__PURE__ */ jsxs(Button, {
+					size: "sm",
+					variant: on ? "default" : "outline",
+					"aria-pressed": on,
+					onClick: () => props.toggleCategory(c),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "mr-1.5 inline-block size-2 rounded-full",
+							style: { background: CATEGORY_COLOR[c] }
+						}),
+						CATEGORY_LABEL[c],
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: "ml-1 text-muted-foreground",
+							children: counts[c]
+						})
+					]
+				}, c);
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "ml-2 inline-flex items-center gap-2 text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(Switch, {
+					checked: props.group,
+					"aria-label": "Group repeated database calls",
+					onChange: props.setGroup
+				}), "Group repeated DB calls"]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "mr-2 text-xs text-muted-foreground",
+						children: [props.shown, " rows"]
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						variant: "ghost",
+						onClick: props.expandAll,
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: UiExpandAll,
+							className: "mr-1"
+						}), "Expand all"]
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						variant: "ghost",
+						onClick: props.collapseAll,
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: UiCollapseAll,
+							className: "mr-1"
+						}), "Collapse"]
+					})
+				]
+			})
+		]
+	});
+}
+function Waterfall(props) {
+	const { index, rows, selected, onSelect } = props;
+	const total = Math.max(index.totalMs, .001);
+	const step = niceStep(total);
+	const ticks = Array.from({ length: Math.floor(total / step) + 1 }, (_, i) => i * step);
+	const scroller = useRef(null);
+	useEffect(() => {
+		scroller.current?.querySelector(`[data-row-id="${CSS.escape(selected)}"]`)?.scrollIntoView?.({ block: "nearest" });
+	}, [selected]);
+	const onKey = (event) => {
+		const at = rows.findIndex((row) => row.id === selected);
+		const next = event.key === "ArrowDown" ? rows[at + 1] : event.key === "ArrowUp" ? rows[at - 1] : void 0;
+		const row = rows[at];
+		if (next) onSelect(next.id);
+		else if (row && (event.key === "ArrowRight" || event.key === "ArrowLeft")) {
+			if ((row.type === "group" ? props.expanded.has(row.id) : !props.collapsed.has(row.id)) !== (event.key === "ArrowRight") && (row.type === "group" || row.childCount > 0)) (row.type === "group" ? props.onToggleGroup : props.onToggleSpan)(row.id);
+		} else return;
+		event.preventDefault();
+	};
+	const pct = (ms) => `${ms / total * 100}%`;
+	return /* @__PURE__ */ jsx("div", {
+		ref: scroller,
+		tabIndex: 0,
+		onKeyDown: onKey,
+		"aria-label": "Span waterfall",
+		className: "h-72 overflow-auto text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring md:h-[calc(100dvh-14rem)] md:min-h-[30rem]",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "min-w-[40rem]",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "sticky top-0 z-10 grid border-b border-border bg-muted text-muted-foreground",
+				style: {
+					gridTemplateColumns: NAME_COLUMN,
+					height: ROW_HEIGHT
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center px-density-2 font-medium",
+					children: "Span"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "relative mr-12",
+					children: ticks.map((t) => /* @__PURE__ */ jsx("span", {
+						className: "absolute top-1.5 -translate-x-1/2 tabular-nums",
+						style: { left: pct(t) },
+						children: t === 0 ? "0" : duration(t)
+					}, t))
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						"aria-hidden": true,
+						className: "pointer-events-none absolute inset-y-0 grid",
+						style: {
+							gridTemplateColumns: NAME_COLUMN,
+							left: 0,
+							right: 0
+						},
+						children: [/* @__PURE__ */ jsx("div", {}), /* @__PURE__ */ jsx("div", {
+							className: "relative mr-12",
+							children: ticks.map((t) => /* @__PURE__ */ jsx("span", {
+								className: "absolute inset-y-0 border-l border-border",
+								style: {
+									left: pct(t),
+									opacity: .6
+								}
+							}, t))
+						})]
+					}),
+					rows.map((row) => /* @__PURE__ */ jsx(WaterfallRow, {
+						...props,
+						row,
+						pct,
+						active: row.id === selected
+					}, row.id)),
+					rows.length === 0 && /* @__PURE__ */ jsx("p", {
+						className: "p-density-4 text-sm text-muted-foreground",
+						children: "No spans match these filters."
+					})
+				]
+			})]
+		})
+	});
+}
+function WaterfallRow({ index, row, active, pct, onSelect, suspects, onToggleSpan, onToggleGroup, expanded, collapsed }) {
+	const indent = { paddingLeft: `${row.depth * 14 + 4}px` };
+	const toggleButton = (open, onClick, label) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": `${open ? "Collapse" : "Expand"} ${label}`,
+		className: "flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted",
+		onClick: (event) => {
+			event.stopPropagation();
+			onClick();
+		},
+		children: /* @__PURE__ */ jsx(Icon, { icon: open ? UiChevronDown : UiChevronRight })
+	});
+	const rowClass = `relative grid w-full cursor-pointer items-center text-left ${active ? "bg-accent" : "hover:bg-muted"}`;
+	if (row.type === "group") {
+		const open = expanded.has(row.id);
+		const ops = Object.entries(row.spans.reduce((acc, span) => ({
+			...acc,
+			[span.operation.replace("gorm.", "")]: (acc[span.operation.replace("gorm.", "")] ?? 0) + 1
+		}), {}));
+		const first = index.offsetMs(row.spans[0]);
+		const last = row.spans.at(-1);
+		const end = index.offsetMs(last) + last.durationMs;
+		const busy = row.spans.reduce((total, span) => total + span.durationMs, 0);
+		const suspectCount = row.spans.filter((span) => suspects.has(span.spanId)).length;
+		return /* @__PURE__ */ jsxs("div", {
+			role: "button",
+			tabIndex: -1,
+			"data-row-id": row.id,
+			"aria-selected": active,
+			className: rowClass,
+			style: {
+				gridTemplateColumns: NAME_COLUMN,
+				height: ROW_HEIGHT
+			},
+			onClick: () => onSelect(row.id),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-1 pr-2",
+				style: indent,
+				children: [
+					toggleButton(open, () => onToggleGroup(row.id), "database group"),
+					/* @__PURE__ */ jsx(Tinted, {
+						icon: UiDatabase,
+						color: CATEGORY_COLOR.db
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "truncate",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "font-medium",
+								children: [row.spans.length, " DB calls"]
+							}),
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: ops.map(([op, n]) => `${op} ×${n}`).join(", ")
+							})
+						]
+					}),
+					suspectCount > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tinted, {
+						icon: UiWarningTriangle,
+						color: "var(--fs-warning)",
+						label: `${suspectCount} calls run inside a nested agent but are parented elsewhere`
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: suspectCount
+					})] })
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "relative mr-12 h-full",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "absolute rounded-sm",
+						style: {
+							left: pct(first),
+							width: pct(end - first),
+							top: 11,
+							height: 6,
+							background: CATEGORY_COLOR.db,
+							opacity: .18
+						}
+					}),
+					row.spans.map((span) => /* @__PURE__ */ jsx("span", {
+						className: "absolute rounded-sm",
+						style: {
+							left: pct(index.offsetMs(span)),
+							width: pct(span.durationMs),
+							minWidth: 2,
+							top: 8,
+							height: 12,
+							background: CATEGORY_COLOR.db
+						}
+					}, span.spanId)),
+					/* @__PURE__ */ jsx(BarLabel, {
+						start: first / Math.max(index.totalMs, .001) * 100,
+						end: end / Math.max(index.totalMs, .001) * 100,
+						text: `${duration(busy)} busy`
+					})
+				]
+			})]
+		});
+	}
+	const { span } = row;
+	const c = category(span);
+	const parent = span.parentId ? index.byId.get(span.parentId) : void 0;
+	const left = index.offsetMs(span) / Math.max(index.totalMs, .001) * 100;
+	const width = span.durationMs / Math.max(index.totalMs, .001) * 100;
+	const error = isError(span);
+	const label = shortOperation(span.operation);
+	const table = span.attributes?.["db.sql.table"];
+	return /* @__PURE__ */ jsxs("div", {
+		role: "button",
+		tabIndex: -1,
+		"data-row-id": row.id,
+		"aria-selected": active,
+		className: rowClass,
+		style: {
+			gridTemplateColumns: NAME_COLUMN,
+			height: ROW_HEIGHT
+		},
+		onClick: () => onSelect(row.id),
+		title: span.operation,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-1 pr-2",
+			style: indent,
+			children: [
+				row.childCount > 0 ? toggleButton(!collapsed.has(span.spanId), () => onToggleSpan(span.spanId), label) : /* @__PURE__ */ jsx("span", { className: "size-5 shrink-0" }),
+				/* @__PURE__ */ jsx(Tinted, {
+					icon: CATEGORY_ICON[c],
+					color: CATEGORY_COLOR[c]
+				}),
+				parent && parent.service !== span.service && /* @__PURE__ */ jsx(Badge, {
+					size: "sm",
+					variant: "outline",
+					children: span.service
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: `truncate ${c === "db" ? "" : "font-medium"}`,
+					children: label
+				}),
+				typeof table === "string" && /* @__PURE__ */ jsx("span", {
+					className: "truncate text-muted-foreground",
+					children: table
+				}),
+				row.childCount > 0 && collapsed.has(span.spanId) && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: ["+", row.childCount]
+				}),
+				suspects.has(span.spanId) && /* @__PURE__ */ jsx(Tinted, {
+					icon: UiWarningTriangle,
+					color: "var(--fs-warning)",
+					label: "Runs inside a nested agent but is parented elsewhere"
+				}),
+				error && /* @__PURE__ */ jsx(Badge, {
+					size: "sm",
+					tone: "danger",
+					variant: "soft",
+					children: "error"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "relative mr-12 h-full",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "absolute rounded-sm",
+				style: {
+					left: `${left}%`,
+					width: `${width}%`,
+					minWidth: 2,
+					top: 7,
+					height: 14,
+					background: error ? "var(--destructive)" : CATEGORY_COLOR[c],
+					opacity: c === "agent" ? .85 : 1
+				}
+			}), /* @__PURE__ */ jsx(BarLabel, {
+				start: left,
+				end: left + width,
+				inside: width > 14,
+				text: duration(span.durationMs)
+			})]
+		})]
+	});
+}
+/** Duration next to the bar's end — or inside a wide bar — and flipped left of the start near the right edge. */
+function BarLabel({ start, end, inside, text }) {
+	if (inside) return /* @__PURE__ */ jsx("span", {
+		className: "absolute top-1.5 px-1.5 font-medium text-white tabular-nums",
+		style: { left: `${start}%` },
+		children: text
+	});
+	const position = end > 90 ? {
+		right: `${100 - start}%`,
+		paddingRight: 4
+	} : {
+		left: `${end}%`,
+		paddingLeft: 4
+	};
+	return /* @__PURE__ */ jsx("span", {
+		className: "absolute top-1.5 whitespace-nowrap tabular-nums text-muted-foreground",
+		style: position,
+		children: text
+	});
+}
+function SpanDetail({ index, span, host, onSelect }) {
+	const c = category(span);
+	const ancestors = [];
+	for (let p = span.parentId ? index.byId.get(span.parentId) : void 0; p; p = p.parentId ? index.byId.get(p.parentId) : void 0) ancestors.unshift(p);
+	const attributes = Object.entries(span.attributes ?? {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5",
+				children: [
+					ancestors.length > 0 && /* @__PURE__ */ jsx("p", {
+						className: "flex flex-wrap items-center gap-1 text-xs text-muted-foreground",
+						children: ancestors.map((a) => /* @__PURE__ */ jsxs("span", {
+							className: "inline-flex items-center gap-1",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "hover:underline",
+								onClick: () => onSelect(a.spanId),
+								children: shortOperation(a.operation)
+							}), /* @__PURE__ */ jsx(Icon, { icon: UiChevronRight })]
+						}, a.spanId))
+					}),
+					/* @__PURE__ */ jsxs("h3", {
+						className: "flex items-center gap-2 text-base font-semibold",
+						title: span.operation,
+						children: [/* @__PURE__ */ jsx(Tinted, {
+							icon: CATEGORY_ICON[c],
+							color: CATEGORY_COLOR[c]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: shortOperation(span.operation)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-1.5 text-xs",
+						children: [
+							/* @__PURE__ */ jsx(Badge, {
+								variant: "soft",
+								size: "sm",
+								children: CATEGORY_LABEL[c]
+							}),
+							span.kind && /* @__PURE__ */ jsx(Badge, {
+								variant: "outline",
+								size: "sm",
+								children: span.kind
+							}),
+							isError(span) && /* @__PURE__ */ jsx(Badge, {
+								tone: "danger",
+								variant: "soft",
+								size: "sm",
+								children: "error"
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "tabular-nums text-muted-foreground",
+								children: [
+									duration(span.durationMs),
+									" · starts at +",
+									duration(index.offsetMs(span))
+								]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "ml-auto inline-flex items-center gap-1 text-muted-foreground",
+								children: [/* @__PURE__ */ jsx("code", { children: span.spanId }), /* @__PURE__ */ jsx(CopyButton, {
+									value: span.spanId,
+									label: "Copy span ID"
+								})]
+							})
+						]
+					})
+				]
+			}),
+			host && /* @__PURE__ */ jsx(Callout, {
+				variant: "warning",
+				title: "Likely mis-parented",
+				children: /* @__PURE__ */ jsxs("p", {
+					className: "text-sm",
+					children: [
+						"Runs entirely inside ",
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "underline",
+							onClick: () => onSelect(host.spanId),
+							children: shortOperation(host.operation)
+						}),
+						" but its parent is ",
+						span.parentId ? shortOperation(index.byId.get(span.parentId)?.operation ?? span.parentId) : "missing",
+						"."
+					]
+				})
+			}),
+			c === "agent" && /* @__PURE__ */ jsx(AgentCard, {
+				index,
+				span
+			}),
+			c === "llm" && /* @__PURE__ */ jsx(LlmCard, { span }),
+			c === "db" && /* @__PURE__ */ jsx(DbCard, { span }),
+			/* @__PURE__ */ jsx(Section, {
+				title: `All attributes (${attributes.length})`,
+				defaultOpen: c === "other",
+				children: /* @__PURE__ */ jsx(Properties, {
+					renderLabel: (key) => /* @__PURE__ */ jsx("code", {
+						className: "text-xs",
+						children: key
+					}),
+					items: attributes.map(([key, value]) => ({
+						key,
+						value
+					}))
+				})
+			}),
+			span.otlp && /* @__PURE__ */ jsx(Section, {
+				title: "OpenTelemetry metadata",
+				defaultOpen: false,
+				children: /* @__PURE__ */ jsx(CodeBlock, {
+					language: "json",
+					source: JSON.stringify(span.otlp, null, 2),
+					jsonDefaultOpenDepth: 4,
+					copyable: true
+				})
+			}),
+			/* @__PURE__ */ jsx(Section, {
+				title: `Resource (${Object.keys(span.resource ?? {}).length})`,
+				defaultOpen: false,
+				children: /* @__PURE__ */ jsx(Properties, {
+					renderLabel: (key) => /* @__PURE__ */ jsx("code", {
+						className: "text-xs",
+						children: key
+					}),
+					items: Object.entries(span.resource ?? {}).map(([key, value]) => ({
+						key,
+						value
+					}))
+				})
+			})
+		]
+	});
+}
+export { OtelTraceDetail };
+
+//# sourceMappingURL=OtelTraceDetail.js.map