@flanksource/clicky-ui 0.3.55 → 0.3.57

package/dist/data/traces/otel/SpanCards.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanCards.cjs","names":["num","StatStrip","metric","Properties","category","duration","selfTimeMs","_Fragment","useState","CodeBlock","Button","Icon","UiSqlQuery","Tinted","UiDatabase","CATEGORY_COLOR"],"sources":["../../../../src/data/traces/otel/SpanCards.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Button } from \"../../../components\";\nimport { CodeBlock } from \"../../CodeBlock\";\nimport { Properties } from \"../../Properties\";\nimport { StatStrip } from \"../../StatStrip\";\nimport { Icon } from \"../../Icon\";\nimport { UiDatabase, UiSqlQuery } from \"../../../icons\";\nimport { Tinted } from \"./SpanCategory\";\nimport { CATEGORY_COLOR, category, duration, num, selfTimeMs, type Span, type TraceIndex } from \"./model\";\nimport { metric } from \"./metrics\";\nconst attr = (span: Span, key: string) => span.attributes?.[key];\n\nexport function AgentCard({ index, span }: { index: TraceIndex; span: Span }) {\n  const cost = num(attr(span, \"captain.cost_usd\"));\n  const budget = num(attr(span, \"captain.budget.cost_usd\"));\n  const kids = index.children.get(span.spanId) ?? [];\n  return (\n    <div className=\"space-y-3\">\n      <StatStrip\n        columns={3}\n        items={[\n          { label: \"Iterations\", value: `${attr(span, \"captain.iterations\") ?? \"—\"} / ${attr(span, \"captain.max_iterations\") ?? \"—\"}` },\n          { label: \"Stopped\", value: String(attr(span, \"captain.stop_reason\") ?? \"—\"), tone: attr(span, \"captain.verified\") === true ? \"success\" : \"warning\", sub: attr(span, \"captain.verified\") === true ? \"verified\" : \"not verified\" },\n          { label: \"Cost\", value: metric(cost, value => `$${value.toFixed(5)}`), sub: budget && cost !== undefined ? `${((cost / budget) * 100).toFixed(3)}% of $${budget}` : \"budget unavailable\" },\n        ]}\n      />\n      <Properties items={[\n        { key: \"Prompt\", value: String(attr(span, \"gen_ai.agent.name\") ?? \"—\") },\n        { key: \"Scope\", value: String(attr(span, \"captain.scope\") ?? \"—\") },\n        { key: \"Children\", value: `${kids.length} spans · ${kids.filter(k => category(k) === \"llm\").length} LLM · ${kids.filter(k => category(k) === \"db\").length} DB` },\n        { key: \"Self-time\", value: `${duration(selfTimeMs(index, span))} not covered by a child span` },\n      ]} />\n    </div>\n  );\n}\n\nexport function LlmCard({ span }: { span: Span }) {\n  const n = (key: string) => num(attr(span, key));\n  const requested = attr(span, \"gen_ai.request.model\");\n  const served = attr(span, \"gen_ai.response.model\");\n  const output = n(\"gen_ai.usage.output_tokens\");\n  const outRate = output !== undefined && span.durationMs > 0 ? output / (span.durationMs / 1000) : undefined;\n  return (\n    <div className=\"space-y-3\">\n      <p className=\"text-sm\">\n        <span className=\"text-muted-foreground\">{String(attr(span, \"gen_ai.provider.name\") ?? \"—\")} · </span>\n        <code>{String(requested ?? \"—\")}</code>\n        {served !== undefined && served !== requested && <> → <code>{String(served ?? \"—\")}</code></>}\n        <span className=\"text-muted-foreground\"> · {String(attr(span, \"captain.mode\") ?? \"—\")} · {String(attr(span, \"captain.prompt.source\") ?? \"—\")}</span>\n      </p>\n      <StatStrip\n        columns={4}\n        items={[\n          { label: \"Input\", value: metric(n(\"gen_ai.usage.input_tokens\")), sub: `${metric(n(\"gen_ai.usage.cache_read.input_tokens\"))} cached` },\n          { label: \"Output\", value: metric(n(\"gen_ai.usage.output_tokens\")), sub: `${metric(n(\"gen_ai.usage.reasoning_tokens\"))} reasoning` },\n          { label: \"Throughput\", value: metric(outRate, value => value.toFixed(0)), sub: \"output tok/s\" },\n          { label: \"Cost\", value: metric(n(\"captain.cost_usd\"), value => `$${value.toFixed(5)}`) },\n        ]}\n      />\n    </div>\n  );\n}\n\nconst PREVIEW_CHARS = 1200;\n\nexport function DbCard({ span }: { span: Span }) {\n  const statement = String(attr(span, \"db.statement\") ?? \"\");\n  const [full, setFull] = useState(false);\n  useEffect(() => setFull(false), [span.spanId]);\n  const clipped = statement.length > PREVIEW_CHARS && !full;\n  return (\n    <div className=\"space-y-3\">\n      <p className=\"text-sm\"><span className=\"text-muted-foreground\">{String(attr(span, \"db.system\"))} · </span><code>{String(attr(span, \"db.sql.table\") ?? \"no table\")}</code></p>\n      <StatStrip\n        columns={2}\n        items={[\n          { label: \"Rows affected\", value: String(attr(span, \"db.rows_affected\") ?? \"—\") },\n          { label: \"Statement\", value: `${(statement.length / 1024).toFixed(statement.length > 10240 ? 0 : 1)} KB`, sub: span.operation.replace(\"gorm.\", \"\"), tone: statement.length > 10240 ? \"warning\" : \"neutral\" },\n        ]}\n      />\n      <div className=\"space-y-1\">\n        <CodeBlock language=\"sql\" source={clipped ? `${statement.slice(0, PREVIEW_CHARS)} …` : statement} copyable />\n        {statement.length > PREVIEW_CHARS && (\n          <Button size=\"sm\" variant=\"ghost\" onClick={() => setFull(on => !on)}>\n            <Icon icon={UiSqlQuery} className=\"mr-1\" />\n            {full ? \"Clip statement\" : `Show all ${statement.length.toLocaleString()} characters`}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function GroupDetail({ index, spans, onSelect }: { index: TraceIndex; spans: Span[]; onSelect: (id: string) => void }) {\n  const busy = spans.reduce((total, span) => total + span.durationMs, 0);\n  const tables = new Map<string, { calls: number; ms: number }>();\n  for (const span of spans) {\n    const key = String(attr(span, \"db.sql.table\") ?? \"—\");\n    const entry = tables.get(key) ?? { calls: 0, ms: 0 };\n    tables.set(key, { calls: entry.calls + 1, ms: entry.ms + span.durationMs });\n  }\n  const slowest = [...spans].sort((a, b) => b.durationMs - a.durationMs)[0]!;\n  return (\n    <div className=\"space-y-4\">\n      <h3 className=\"flex items-center gap-2 text-base font-semibold\"><Tinted icon={UiDatabase} color={CATEGORY_COLOR.db} />{spans.length} consecutive database calls</h3>\n      <StatStrip\n        columns={3}\n        items={[\n          { label: \"Busy\", value: duration(busy), sub: `over ${duration(index.offsetMs(spans.at(-1)!) + spans.at(-1)!.durationMs - index.offsetMs(spans[0]!))} wall` },\n          { label: \"Tables\", value: String(tables.size) },\n          { label: \"Slowest\", value: duration(slowest.durationMs), sub: `${slowest.operation.replace(\"gorm.\", \"\")} ${String(attr(slowest, \"db.sql.table\"))}` },\n        ]}\n      />\n      <table className=\"w-full text-xs\">\n        <thead className=\"border-b border-border text-left text-muted-foreground\">\n          <tr><th className=\"py-1 font-medium\">Call</th><th className=\"py-1 font-medium\">Table</th><th className=\"py-1 text-right font-medium\">Rows</th><th className=\"py-1 text-right font-medium\">Duration</th></tr>\n        </thead>\n        <tbody className=\"divide-y divide-border\">\n          {spans.map(span => (\n            <tr key={span.spanId} className=\"cursor-pointer hover:bg-muted\" onClick={() => onSelect(span.spanId)}>\n              <td className=\"py-1\">{span.operation.replace(\"gorm.\", \"\")}</td>\n              <td className=\"py-1 text-muted-foreground\">{String(attr(span, \"db.sql.table\") ?? \"—\")}</td>\n              <td className=\"py-1 text-right tabular-nums\">{String(attr(span, \"db.rows_affected\") ?? \"\")}</td>\n              <td className=\"py-1 text-right tabular-nums\">{duration(span.durationMs)}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/data/traces/otel/SpanCards.d.ts

@@ -0,0 +1,17 @@
+import { Span, TraceIndex } from './model.js';
+export declare function AgentCard({ index, span }: {
+    index: TraceIndex;
+    span: Span;
+}): import("react").JSX.Element;
+export declare function LlmCard({ span }: {
+    span: Span;
+}): import("react").JSX.Element;
+export declare function DbCard({ span }: {
+    span: Span;
+}): import("react").JSX.Element;
+export declare function GroupDetail({ index, spans, onSelect }: {
+    index: TraceIndex;
+    spans: Span[];
+    onSelect: (id: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SpanCards.d.ts.map

package/dist/data/traces/otel/SpanCards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanCards.d.ts","sourceRoot":"","sources":["../../../../src/data/traces/otel/SpanCards.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAuD,KAAK,IAAI,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1G,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,+BAsB3E;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,+BAyB/C;AAID,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,+BA0B9C;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAC;IAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,+BAqC3H"}

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

@@ -0,0 +1,261 @@
+import { UiSqlQuery } from "../../../icons/components/UiSqlQuery.js";
+import { UiDatabase } from "../../../icons/components/UiDatabase.js";
+import { Icon } from "../../Icon.js";
+import { Button } from "../../../components/button.js";
+import { Properties } from "../../Properties.js";
+import { CodeBlock } from "../../CodeBlock.js";
+import { StatStrip } from "../../StatStrip.js";
+import { Tinted } from "./SpanCategory.js";
+import { CATEGORY_COLOR, category, duration, num, selfTimeMs } from "./model.js";
+import { metric } from "./metrics.js";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/data/traces/otel/SpanCards.tsx
+var attr = (span, key) => span.attributes?.[key];
+function AgentCard({ index, span }) {
+	const cost = num(attr(span, "captain.cost_usd"));
+	const budget = num(attr(span, "captain.budget.cost_usd"));
+	const kids = index.children.get(span.spanId) ?? [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsx(StatStrip, {
+			columns: 3,
+			items: [
+				{
+					label: "Iterations",
+					value: `${attr(span, "captain.iterations") ?? "—"} / ${attr(span, "captain.max_iterations") ?? "—"}`
+				},
+				{
+					label: "Stopped",
+					value: String(attr(span, "captain.stop_reason") ?? "—"),
+					tone: attr(span, "captain.verified") === true ? "success" : "warning",
+					sub: attr(span, "captain.verified") === true ? "verified" : "not verified"
+				},
+				{
+					label: "Cost",
+					value: metric(cost, (value) => `$${value.toFixed(5)}`),
+					sub: budget && cost !== void 0 ? `${(cost / budget * 100).toFixed(3)}% of $${budget}` : "budget unavailable"
+				}
+			]
+		}), /* @__PURE__ */ jsx(Properties, { items: [
+			{
+				key: "Prompt",
+				value: String(attr(span, "gen_ai.agent.name") ?? "—")
+			},
+			{
+				key: "Scope",
+				value: String(attr(span, "captain.scope") ?? "—")
+			},
+			{
+				key: "Children",
+				value: `${kids.length} spans · ${kids.filter((k) => category(k) === "llm").length} LLM · ${kids.filter((k) => category(k) === "db").length} DB`
+			},
+			{
+				key: "Self-time",
+				value: `${duration(selfTimeMs(index, span))} not covered by a child span`
+			}
+		] })]
+	});
+}
+function LlmCard({ span }) {
+	const n = (key) => num(attr(span, key));
+	const requested = attr(span, "gen_ai.request.model");
+	const served = attr(span, "gen_ai.response.model");
+	const output = n("gen_ai.usage.output_tokens");
+	const outRate = output !== void 0 && span.durationMs > 0 ? output / (span.durationMs / 1e3) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "text-sm",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [String(attr(span, "gen_ai.provider.name") ?? "—"), " · "]
+				}),
+				/* @__PURE__ */ jsx("code", { children: String(requested ?? "—") }),
+				served !== void 0 && served !== requested && /* @__PURE__ */ jsxs(Fragment$1, { children: [" → ", /* @__PURE__ */ jsx("code", { children: String(served ?? "—") })] }),
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [
+						" · ",
+						String(attr(span, "captain.mode") ?? "—"),
+						" · ",
+						String(attr(span, "captain.prompt.source") ?? "—")
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx(StatStrip, {
+			columns: 4,
+			items: [
+				{
+					label: "Input",
+					value: metric(n("gen_ai.usage.input_tokens")),
+					sub: `${metric(n("gen_ai.usage.cache_read.input_tokens"))} cached`
+				},
+				{
+					label: "Output",
+					value: metric(n("gen_ai.usage.output_tokens")),
+					sub: `${metric(n("gen_ai.usage.reasoning_tokens"))} reasoning`
+				},
+				{
+					label: "Throughput",
+					value: metric(outRate, (value) => value.toFixed(0)),
+					sub: "output tok/s"
+				},
+				{
+					label: "Cost",
+					value: metric(n("captain.cost_usd"), (value) => `$${value.toFixed(5)}`)
+				}
+			]
+		})]
+	});
+}
+var PREVIEW_CHARS = 1200;
+function DbCard({ span }) {
+	const statement = String(attr(span, "db.statement") ?? "");
+	const [full, setFull] = useState(false);
+	useEffect(() => setFull(false), [span.spanId]);
+	const clipped = statement.length > PREVIEW_CHARS && !full;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "text-sm",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [String(attr(span, "db.system")), " · "]
+				}), /* @__PURE__ */ jsx("code", { children: String(attr(span, "db.sql.table") ?? "no table") })]
+			}),
+			/* @__PURE__ */ jsx(StatStrip, {
+				columns: 2,
+				items: [{
+					label: "Rows affected",
+					value: String(attr(span, "db.rows_affected") ?? "—")
+				}, {
+					label: "Statement",
+					value: `${(statement.length / 1024).toFixed(statement.length > 10240 ? 0 : 1)} KB`,
+					sub: span.operation.replace("gorm.", ""),
+					tone: statement.length > 10240 ? "warning" : "neutral"
+				}]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsx(CodeBlock, {
+					language: "sql",
+					source: clipped ? `${statement.slice(0, PREVIEW_CHARS)} …` : statement,
+					copyable: true
+				}), statement.length > PREVIEW_CHARS && /* @__PURE__ */ jsxs(Button, {
+					size: "sm",
+					variant: "ghost",
+					onClick: () => setFull((on) => !on),
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: UiSqlQuery,
+						className: "mr-1"
+					}), full ? "Clip statement" : `Show all ${statement.length.toLocaleString()} characters`]
+				})]
+			})
+		]
+	});
+}
+function GroupDetail({ index, spans, onSelect }) {
+	const busy = spans.reduce((total, span) => total + span.durationMs, 0);
+	const tables = /* @__PURE__ */ new Map();
+	for (const span of spans) {
+		const key = String(attr(span, "db.sql.table") ?? "—");
+		const entry = tables.get(key) ?? {
+			calls: 0,
+			ms: 0
+		};
+		tables.set(key, {
+			calls: entry.calls + 1,
+			ms: entry.ms + span.durationMs
+		});
+	}
+	const slowest = [...spans].sort((a, b) => b.durationMs - a.durationMs)[0];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsxs("h3", {
+				className: "flex items-center gap-2 text-base font-semibold",
+				children: [
+					/* @__PURE__ */ jsx(Tinted, {
+						icon: UiDatabase,
+						color: CATEGORY_COLOR.db
+					}),
+					spans.length,
+					" consecutive database calls"
+				]
+			}),
+			/* @__PURE__ */ jsx(StatStrip, {
+				columns: 3,
+				items: [
+					{
+						label: "Busy",
+						value: duration(busy),
+						sub: `over ${duration(index.offsetMs(spans.at(-1)) + spans.at(-1).durationMs - index.offsetMs(spans[0]))} wall`
+					},
+					{
+						label: "Tables",
+						value: String(tables.size)
+					},
+					{
+						label: "Slowest",
+						value: duration(slowest.durationMs),
+						sub: `${slowest.operation.replace("gorm.", "")} ${String(attr(slowest, "db.sql.table"))}`
+					}
+				]
+			}),
+			/* @__PURE__ */ jsxs("table", {
+				className: "w-full text-xs",
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "border-b border-border text-left text-muted-foreground",
+					children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: "py-1 font-medium",
+							children: "Call"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "py-1 font-medium",
+							children: "Table"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "py-1 text-right font-medium",
+							children: "Rows"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "py-1 text-right font-medium",
+							children: "Duration"
+						})
+					] })
+				}), /* @__PURE__ */ jsx("tbody", {
+					className: "divide-y divide-border",
+					children: spans.map((span) => /* @__PURE__ */ jsxs("tr", {
+						className: "cursor-pointer hover:bg-muted",
+						onClick: () => onSelect(span.spanId),
+						children: [
+							/* @__PURE__ */ jsx("td", {
+								className: "py-1",
+								children: span.operation.replace("gorm.", "")
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "py-1 text-muted-foreground",
+								children: String(attr(span, "db.sql.table") ?? "—")
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "py-1 text-right tabular-nums",
+								children: String(attr(span, "db.rows_affected") ?? "")
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "py-1 text-right tabular-nums",
+								children: duration(span.durationMs)
+							})
+						]
+					}, span.spanId))
+				})]
+			})
+		]
+	});
+}
+export { AgentCard, DbCard, GroupDetail, LlmCard };
+
+//# sourceMappingURL=SpanCards.js.map

package/dist/data/traces/otel/SpanCards.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanCards.js","names":["_Fragment"],"sources":["../../../../src/data/traces/otel/SpanCards.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Button } from \"../../../components\";\nimport { CodeBlock } from \"../../CodeBlock\";\nimport { Properties } from \"../../Properties\";\nimport { StatStrip } from \"../../StatStrip\";\nimport { Icon } from \"../../Icon\";\nimport { UiDatabase, UiSqlQuery } from \"../../../icons\";\nimport { Tinted } from \"./SpanCategory\";\nimport { CATEGORY_COLOR, category, duration, num, selfTimeMs, type Span, type TraceIndex } from \"./model\";\nimport { metric } from \"./metrics\";\nconst attr = (span: Span, key: string) => span.attributes?.[key];\n\nexport function AgentCard({ index, span }: { index: TraceIndex; span: Span }) {\n  const cost = num(attr(span, \"captain.cost_usd\"));\n  const budget = num(attr(span, \"captain.budget.cost_usd\"));\n  const kids = index.children.get(span.spanId) ?? [];\n  return (\n    <div className=\"space-y-3\">\n      <StatStrip\n        columns={3}\n        items={[\n          { label: \"Iterations\", value: `${attr(span, \"captain.iterations\") ?? \"—\"} / ${attr(span, \"captain.max_iterations\") ?? \"—\"}` },\n          { label: \"Stopped\", value: String(attr(span, \"captain.stop_reason\") ?? \"—\"), tone: attr(span, \"captain.verified\") === true ? \"success\" : \"warning\", sub: attr(span, \"captain.verified\") === true ? \"verified\" : \"not verified\" },\n          { label: \"Cost\", value: metric(cost, value => `$${value.toFixed(5)}`), sub: budget && cost !== undefined ? `${((cost / budget) * 100).toFixed(3)}% of $${budget}` : \"budget unavailable\" },\n        ]}\n      />\n      <Properties items={[\n        { key: \"Prompt\", value: String(attr(span, \"gen_ai.agent.name\") ?? \"—\") },\n        { key: \"Scope\", value: String(attr(span, \"captain.scope\") ?? \"—\") },\n        { key: \"Children\", value: `${kids.length} spans · ${kids.filter(k => category(k) === \"llm\").length} LLM · ${kids.filter(k => category(k) === \"db\").length} DB` },\n        { key: \"Self-time\", value: `${duration(selfTimeMs(index, span))} not covered by a child span` },\n      ]} />\n    </div>\n  );\n}\n\nexport function LlmCard({ span }: { span: Span }) {\n  const n = (key: string) => num(attr(span, key));\n  const requested = attr(span, \"gen_ai.request.model\");\n  const served = attr(span, \"gen_ai.response.model\");\n  const output = n(\"gen_ai.usage.output_tokens\");\n  const outRate = output !== undefined && span.durationMs > 0 ? output / (span.durationMs / 1000) : undefined;\n  return (\n    <div className=\"space-y-3\">\n      <p className=\"text-sm\">\n        <span className=\"text-muted-foreground\">{String(attr(span, \"gen_ai.provider.name\") ?? \"—\")} · </span>\n        <code>{String(requested ?? \"—\")}</code>\n        {served !== undefined && served !== requested && <> → <code>{String(served ?? \"—\")}</code></>}\n        <span className=\"text-muted-foreground\"> · {String(attr(span, \"captain.mode\") ?? \"—\")} · {String(attr(span, \"captain.prompt.source\") ?? \"—\")}</span>\n      </p>\n      <StatStrip\n        columns={4}\n        items={[\n          { label: \"Input\", value: metric(n(\"gen_ai.usage.input_tokens\")), sub: `${metric(n(\"gen_ai.usage.cache_read.input_tokens\"))} cached` },\n          { label: \"Output\", value: metric(n(\"gen_ai.usage.output_tokens\")), sub: `${metric(n(\"gen_ai.usage.reasoning_tokens\"))} reasoning` },\n          { label: \"Throughput\", value: metric(outRate, value => value.toFixed(0)), sub: \"output tok/s\" },\n          { label: \"Cost\", value: metric(n(\"captain.cost_usd\"), value => `$${value.toFixed(5)}`) },\n        ]}\n      />\n    </div>\n  );\n}\n\nconst PREVIEW_CHARS = 1200;\n\nexport function DbCard({ span }: { span: Span }) {\n  const statement = String(attr(span, \"db.statement\") ?? \"\");\n  const [full, setFull] = useState(false);\n  useEffect(() => setFull(false), [span.spanId]);\n  const clipped = statement.length > PREVIEW_CHARS && !full;\n  return (\n    <div className=\"space-y-3\">\n      <p className=\"text-sm\"><span className=\"text-muted-foreground\">{String(attr(span, \"db.system\"))} · </span><code>{String(attr(span, \"db.sql.table\") ?? \"no table\")}</code></p>\n      <StatStrip\n        columns={2}\n        items={[\n          { label: \"Rows affected\", value: String(attr(span, \"db.rows_affected\") ?? \"—\") },\n          { label: \"Statement\", value: `${(statement.length / 1024).toFixed(statement.length > 10240 ? 0 : 1)} KB`, sub: span.operation.replace(\"gorm.\", \"\"), tone: statement.length > 10240 ? \"warning\" : \"neutral\" },\n        ]}\n      />\n      <div className=\"space-y-1\">\n        <CodeBlock language=\"sql\" source={clipped ? `${statement.slice(0, PREVIEW_CHARS)} …` : statement} copyable />\n        {statement.length > PREVIEW_CHARS && (\n          <Button size=\"sm\" variant=\"ghost\" onClick={() => setFull(on => !on)}>\n            <Icon icon={UiSqlQuery} className=\"mr-1\" />\n            {full ? \"Clip statement\" : `Show all ${statement.length.toLocaleString()} characters`}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function GroupDetail({ index, spans, onSelect }: { index: TraceIndex; spans: Span[]; onSelect: (id: string) => void }) {\n  const busy = spans.reduce((total, span) => total + span.durationMs, 0);\n  const tables = new Map<string, { calls: number; ms: number }>();\n  for (const span of spans) {\n    const key = String(attr(span, \"db.sql.table\") ?? \"—\");\n    const entry = tables.get(key) ?? { calls: 0, ms: 0 };\n    tables.set(key, { calls: entry.calls + 1, ms: entry.ms + span.durationMs });\n  }\n  const slowest = [...spans].sort((a, b) => b.durationMs - a.durationMs)[0]!;\n  return (\n    <div className=\"space-y-4\">\n      <h3 className=\"flex items-center gap-2 text-base font-semibold\"><Tinted icon={UiDatabase} color={CATEGORY_COLOR.db} />{spans.length} consecutive database calls</h3>\n      <StatStrip\n        columns={3}\n        items={[\n          { label: \"Busy\", value: duration(busy), sub: `over ${duration(index.offsetMs(spans.at(-1)!) + spans.at(-1)!.durationMs - index.offsetMs(spans[0]!))} wall` },\n          { label: \"Tables\", value: String(tables.size) },\n          { label: \"Slowest\", value: duration(slowest.durationMs), sub: `${slowest.operation.replace(\"gorm.\", \"\")} ${String(attr(slowest, \"db.sql.table\"))}` },\n        ]}\n      />\n      <table className=\"w-full text-xs\">\n        <thead className=\"border-b border-border text-left text-muted-foreground\">\n          <tr><th className=\"py-1 font-medium\">Call</th><th className=\"py-1 font-medium\">Table</th><th className=\"py-1 text-right font-medium\">Rows</th><th className=\"py-1 text-right font-medium\">Duration</th></tr>\n        </thead>\n        <tbody className=\"divide-y divide-border\">\n          {spans.map(span => (\n            <tr key={span.spanId} className=\"cursor-pointer hover:bg-muted\" onClick={() => onSelect(span.spanId)}>\n              <td className=\"py-1\">{span.operation.replace(\"gorm.\", \"\")}</td>\n              <td className=\"py-1 text-muted-foreground\">{String(attr(span, \"db.sql.table\") ?? \"—\")}</td>\n              <td className=\"py-1 text-right tabular-nums\">{String(attr(span, \"db.rows_affected\") ?? \"\")}</td>\n              <td className=\"py-1 text-right tabular-nums\">{duration(span.durationMs)}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/data/traces/otel/SpanCategory.cjs

@@ -0,0 +1,18 @@
+const require_Icon = require("../../Icon.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/data/traces/otel/SpanCategory.tsx
+function Tinted({ icon, color, label }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "inline-flex shrink-0",
+		style: { color },
+		...label ? {
+			role: "img",
+			"aria-label": label,
+			title: label
+		} : {},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, { icon })
+	});
+}
+exports.Tinted = Tinted;
+
+//# sourceMappingURL=SpanCategory.cjs.map

package/dist/data/traces/otel/SpanCategory.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanCategory.cjs","names":["Icon"],"sources":["../../../../src/data/traces/otel/SpanCategory.tsx"],"sourcesContent":["import { Icon } from \"../../Icon\";\nimport { UiClock } from \"../../../icons\";\nexport function Tinted({ icon, color, label }: { icon: typeof UiClock; color: string; label?: string }) {\n  return <span className=\"inline-flex shrink-0\" style={{ color }} {...(label ? { role: \"img\", \"aria-label\": label, title: label } : {})}><Icon icon={icon} /></span>;\n}\n"],"mappings":";;;AAEA,SAAgB,OAAO,EAAE,MAAM,OAAO,SAAkE;CACtG,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EAAuB,OAAO,EAAE,MAAM;EAAG,GAAK,QAAQ;GAAE,MAAM;GAAO,cAAc;GAAO,OAAO;EAAM,IAAI,CAAC;EAAI,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,aAAAA,MAAD,EAAY,KAAO,CAAA;CAAO,CAAA;AACnK"}

package/dist/data/traces/otel/SpanCategory.d.ts

@@ -0,0 +1,7 @@
+import { UiClock } from '../../../icons.js';
+export declare function Tinted({ icon, color, label }: {
+    icon: typeof UiClock;
+    color: string;
+    label?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SpanCategory.d.ts.map

package/dist/data/traces/otel/SpanCategory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanCategory.d.ts","sourceRoot":"","sources":["../../../../src/data/traces/otel/SpanCategory.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,OAAO,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAErG"}

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

@@ -0,0 +1,18 @@
+import { Icon } from "../../Icon.js";
+import { jsx } from "react/jsx-runtime";
+// src/data/traces/otel/SpanCategory.tsx
+function Tinted({ icon, color, label }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex shrink-0",
+		style: { color },
+		...label ? {
+			role: "img",
+			"aria-label": label,
+			title: label
+		} : {},
+		children: /* @__PURE__ */ jsx(Icon, { icon })
+	});
+}
+export { Tinted };
+
+//# sourceMappingURL=SpanCategory.js.map

package/dist/data/traces/otel/SpanCategory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanCategory.js","names":[],"sources":["../../../../src/data/traces/otel/SpanCategory.tsx"],"sourcesContent":["import { Icon } from \"../../Icon\";\nimport { UiClock } from \"../../../icons\";\nexport function Tinted({ icon, color, label }: { icon: typeof UiClock; color: string; label?: string }) {\n  return <span className=\"inline-flex shrink-0\" style={{ color }} {...(label ? { role: \"img\", \"aria-label\": label, title: label } : {})}><Icon icon={icon} /></span>;\n}\n"],"mappings":";;;AAEA,SAAgB,OAAO,EAAE,MAAM,OAAO,SAAkE;CACtG,OAAO,oBAAC,QAAD;EAAM,WAAU;EAAuB,OAAO,EAAE,MAAM;EAAG,GAAK,QAAQ;GAAE,MAAM;GAAO,cAAc;GAAO,OAAO;EAAM,IAAI,CAAC;EAAI,UAAA,oBAAC,MAAD,EAAY,KAAO,CAAA;CAAO,CAAA;AACnK"}

package/dist/data/traces/otel/TraceResults.cjs

@@ -0,0 +1,195 @@
+const require_Badge = require("../../Badge.cjs");
+const require_DataTable = require("../../DataTable.cjs");
+const require_api = require("./api.cjs");
+const require_query = require("./query.cjs");
+const require_result_model = require("./result-model.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/data/traces/otel/TraceResults.tsx
+var startMs = (trace) => Date.parse(trace.startedAt);
+var clock = (ms) => new Date(ms).toLocaleTimeString([], {
+	hour: "2-digit",
+	minute: "2-digit",
+	second: "2-digit"
+});
+function ResultSummary({ result }) {
+	const shown = result.traces.length;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+		className: "text-sm text-muted-foreground",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "font-medium text-foreground",
+				children: shown
+			}),
+			" ",
+			shown === 1 ? "trace" : "traces",
+			shown < result.total ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				" · the ",
+				shown,
+				" newest of ",
+				result.total.toLocaleString(),
+				". Narrow the window or operation to see older ones"
+			] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: " · all in the window" })
+		]
+	});
+}
+/** Each trace by when it started and how long it took, dot size by span count. */
+function Scatter({ traces, onOpen }) {
+	const starts = traces.map(startMs);
+	const t0 = Math.min(...starts);
+	const span = Math.max(...starts) - t0;
+	const slowest = Math.max(...traces.map((trace) => trace.durationMs)) || 1;
+	const step = require_result_model.niceStep(slowest, 4);
+	const top = Math.ceil(slowest * 1.05 / step) * step;
+	const yTicks = Array.from({ length: Math.round(top / step) + 1 }, (_, i) => i * step);
+	const xTicks = span === 0 ? [.5] : [
+		0,
+		.25,
+		.5,
+		.75,
+		1
+	];
+	const x = (ms) => span === 0 ? .5 : (ms - t0) / span;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figure", {
+		className: "rounded-lg border border-border p-density-2",
+		"aria-label": "Duration over time",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("figcaption", {
+				className: "mb-1 flex items-center gap-3 text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-medium text-foreground",
+					children: "Duration over time"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "dot size = span count · click to open" })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative ml-[4.5rem] mr-2 mt-3.5 h-[180px]",
+				children: [yTicks.map((y) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "absolute inset-x-0 border-t border-border/60",
+					style: { bottom: `${y / top * 100}%` },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "absolute right-full -translate-y-1/2 whitespace-nowrap pr-1.5 text-xs tabular-nums text-muted-foreground",
+						children: y === 0 ? "0" : require_api.duration(y)
+					})
+				}, y)), traces.map((trace) => {
+					const size = 6 + Math.log2(trace.spanCount) * 1.6;
+					const label = `${require_query.shortOperation(trace.operation)}, ${require_api.duration(trace.durationMs)}, ${trace.spanCount} spans at ${clock(startMs(trace))}`;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": label,
+						title: label,
+						onClick: () => onOpen(trace.traceId),
+						className: `absolute -translate-x-1/2 translate-y-1/2 rounded-full opacity-75 hover:ring-2 hover:ring-ring ${trace.errors > 0 ? "bg-destructive" : trace.spanCount > 1 ? "bg-primary" : "bg-muted-foreground"}`,
+						style: {
+							left: `${x(startMs(trace)) * 100}%`,
+							bottom: `${trace.durationMs / top * 100}%`,
+							width: size,
+							height: size
+						}
+					}, trace.traceId);
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "relative ml-[4.5rem] mr-2 mt-1 h-4 text-xs tabular-nums text-muted-foreground",
+				children: xTicks.map((fraction, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: `absolute whitespace-nowrap ${xTicks.length > 1 && i === 0 ? "" : xTicks.length > 1 && i === xTicks.length - 1 ? "-translate-x-full" : "-translate-x-1/2"}`,
+					style: { left: `${fraction * 100}%` },
+					children: clock(t0 + fraction * span)
+				}, fraction))
+			})
+		]
+	});
+}
+/** The traces, newest first: what ran, when, how long against the slowest, and its span count. */
+function ResultTable({ traces, href, onOpen, now, tableProps = {} }) {
+	const slowest = Math.max(1, ...traces.map((trace) => trace.durationMs));
+	const columns = [
+		{
+			key: "operation",
+			label: "Trace",
+			grow: true,
+			minWidth: 320,
+			render: (_, trace) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "flex min-w-0 items-center gap-2",
+				title: trace.operation,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "shrink-0 font-medium",
+						children: require_query.shortOperation(trace.operation) || trace.traceId
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+						className: "text-xs text-muted-foreground",
+						children: trace.traceId.slice(0, 8)
+					}),
+					trace.services.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate text-xs text-muted-foreground",
+						children: trace.services.join(" → ")
+					}),
+					trace.errors > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Badge.Badge, {
+						size: "sm",
+						tone: "danger",
+						variant: "soft",
+						children: [
+							trace.errors,
+							" ",
+							trace.errors === 1 ? "error" : "errors"
+						]
+					})
+				]
+			})
+		},
+		{
+			key: "startedAt",
+			label: "Started",
+			render: (_, trace) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "whitespace-nowrap tabular-nums",
+				children: [
+					clock(startMs(trace)),
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-muted-foreground",
+						children: require_result_model.ago(now - startMs(trace))
+					})
+				]
+			})
+		},
+		{
+			key: "durationMs",
+			label: "Duration",
+			render: (_, trace) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "relative h-1.5 w-24 rounded-full bg-muted",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "absolute inset-y-0 left-0 rounded-full bg-primary",
+						style: { width: `${trace.durationMs / slowest * 100}%` }
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "tabular-nums",
+					children: require_api.duration(trace.durationMs)
+				})]
+			})
+		},
+		{
+			key: "spanCount",
+			label: "Spans",
+			align: "right"
+		}
+	];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex h-[28rem] min-h-0 flex-col",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataTable.DataTable, {
+			...tableProps,
+			data: traces,
+			columns,
+			getRowId: (trace) => trace.traceId,
+			autoFilter: false,
+			getRowHref: (trace) => href(trace.traceId),
+			onRowClick: (trace) => onOpen(trace.traceId),
+			emptyMessage: "No traces match. Widen the time range, clear the duration or attribute filters, or show single-span traces."
+		})
+	});
+}
+exports.ResultSummary = ResultSummary;
+exports.ResultTable = ResultTable;
+exports.Scatter = Scatter;
+
+//# sourceMappingURL=TraceResults.cjs.map

package/dist/data/traces/otel/TraceResults.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TraceResults.cjs","names":["_Fragment","niceStep","duration","shortOperation","Badge","ago","DataTable"],"sources":["../../../../src/data/traces/otel/TraceResults.tsx"],"sourcesContent":["import { ago, niceStep } from \"./result-model\";\nimport { Badge } from \"../../Badge\";\nimport { DataTable, type DataTableColumn, type DataTableProps } from \"../../DataTable\";\nimport { duration, type SearchResult, type Summary } from \"./api\";\nimport { shortOperation } from \"./query\";\n\nconst startMs = (trace: Summary) => Date.parse(trace.startedAt);\nconst clock = (ms: number) => new Date(ms).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" });\n\nexport function ResultSummary({ result }: { result: SearchResult }) {\n  const shown = result.traces.length;\n  return (\n    <p className=\"text-sm text-muted-foreground\">\n      <span className=\"font-medium text-foreground\">{shown}</span> {shown === 1 ? \"trace\" : \"traces\"}\n      {shown < result.total\n        ? <> · the {shown} newest of {result.total.toLocaleString()}. Narrow the window or operation to see older ones</>\n        : <> · all in the window</>}\n    </p>\n  );\n}\n\n/** Each trace by when it started and how long it took, dot size by span count. */\nexport function Scatter({ traces, onOpen }: { traces: Summary[]; onOpen: (id: string) => void }) {\n  const starts = traces.map(startMs);\n  const t0 = Math.min(...starts);\n  const span = Math.max(...starts) - t0;\n  const slowest = Math.max(...traces.map(trace => trace.durationMs)) || 1;\n  const step = niceStep(slowest, 4);\n  const top = Math.ceil((slowest * 1.05) / step) * step;\n  const yTicks = Array.from({ length: Math.round(top / step) + 1 }, (_, i) => i * step);\n  // Traces that all started together sit mid-axis under one tick.\n  const xTicks = span === 0 ? [0.5] : [0, 0.25, 0.5, 0.75, 1];\n  const x = (ms: number) => (span === 0 ? 0.5 : (ms - t0) / span);\n  return (\n    <figure className=\"rounded-lg border border-border p-density-2\" aria-label=\"Duration over time\">\n      <figcaption className=\"mb-1 flex items-center gap-3 text-xs text-muted-foreground\">\n        <span className=\"font-medium text-foreground\">Duration over time</span>\n        <span>dot size = span count · click to open</span>\n      </figcaption>\n      <div className=\"relative ml-[4.5rem] mr-2 mt-3.5 h-[180px]\">\n        {yTicks.map(y => (\n          <div key={y} className=\"absolute inset-x-0 border-t border-border/60\" style={{ bottom: `${(y / top) * 100}%` }}>\n            <span className=\"absolute right-full -translate-y-1/2 whitespace-nowrap pr-1.5 text-xs tabular-nums text-muted-foreground\">{y === 0 ? \"0\" : duration(y)}</span>\n          </div>\n        ))}\n        {traces.map(trace => {\n          const size = 6 + Math.log2(trace.spanCount) * 1.6;\n          const label = `${shortOperation(trace.operation)}, ${duration(trace.durationMs)}, ${trace.spanCount} spans at ${clock(startMs(trace))}`;\n          return (\n            <button\n              key={trace.traceId}\n              type=\"button\"\n              aria-label={label}\n              title={label}\n              onClick={() => onOpen(trace.traceId)}\n              className={`absolute -translate-x-1/2 translate-y-1/2 rounded-full opacity-75 hover:ring-2 hover:ring-ring ${trace.errors > 0 ? \"bg-destructive\" : trace.spanCount > 1 ? \"bg-primary\" : \"bg-muted-foreground\"}`}\n              style={{ left: `${x(startMs(trace)) * 100}%`, bottom: `${(trace.durationMs / top) * 100}%`, width: size, height: size }}\n            />\n          );\n        })}\n      </div>\n      <div className=\"relative ml-[4.5rem] mr-2 mt-1 h-4 text-xs tabular-nums text-muted-foreground\">\n        {xTicks.map((fraction, i) => (\n          <span key={fraction} className={`absolute whitespace-nowrap ${xTicks.length > 1 && i === 0 ? \"\" : xTicks.length > 1 && i === xTicks.length - 1 ? \"-translate-x-full\" : \"-translate-x-1/2\"}`} style={{ left: `${fraction * 100}%` }}>\n            {clock(t0 + fraction * span)}\n          </span>\n        ))}\n      </div>\n    </figure>\n  );\n}\n\n/** The traces, newest first: what ran, when, how long against the slowest, and its span count. */\nexport function ResultTable({ traces, href, onOpen, now, tableProps = {} }: { traces: Summary[]; href: (id: string) => string; onOpen: (id: string) => void; now: number; tableProps?: Pick<DataTableProps<Summary>, \"externalFilters\" | \"externalSearch\" | \"externalTimeRange\" | \"pagination\" | \"infinite\" | \"loading\"> }) {\n  const slowest = Math.max(1, ...traces.map(trace => trace.durationMs));\n  const columns: DataTableColumn<Summary>[] = [\n    {\n      key: \"operation\",\n      label: \"Trace\",\n      grow: true,\n      minWidth: 320,\n      render: (_, trace) => (\n        <span className=\"flex min-w-0 items-center gap-2\" title={trace.operation}>\n          <span className=\"shrink-0 font-medium\">{shortOperation(trace.operation) || trace.traceId}</span>\n          <code className=\"text-xs text-muted-foreground\">{trace.traceId.slice(0, 8)}</code>\n          {trace.services.length > 1 && <span className=\"truncate text-xs text-muted-foreground\">{trace.services.join(\" → \")}</span>}\n          {trace.errors > 0 && <Badge size=\"sm\" tone=\"danger\" variant=\"soft\">{trace.errors} {trace.errors === 1 ? \"error\" : \"errors\"}</Badge>}\n        </span>\n      ),\n    },\n    {\n      key: \"startedAt\",\n      label: \"Started\",\n      render: (_, trace) => <span className=\"whitespace-nowrap tabular-nums\">{clock(startMs(trace))} <span className=\"text-muted-foreground\">{ago(now - startMs(trace))}</span></span>,\n    },\n    {\n      key: \"durationMs\",\n      label: \"Duration\",\n      render: (_, trace) => (\n        <span className=\"flex items-center gap-2\">\n          <span className=\"relative h-1.5 w-24 rounded-full bg-muted\">\n            <span className=\"absolute inset-y-0 left-0 rounded-full bg-primary\" style={{ width: `${(trace.durationMs / slowest) * 100}%` }} />\n          </span>\n          <span className=\"tabular-nums\">{duration(trace.durationMs)}</span>\n        </span>\n      ),\n    },\n    { key: \"spanCount\", label: \"Spans\", align: \"right\" },\n  ];\n  return (\n    <div className=\"flex h-[28rem] min-h-0 flex-col\">\n      <DataTable\n        {...tableProps}\n        data={traces}\n        columns={columns}\n        getRowId={trace => trace.traceId}\n        autoFilter={false}\n        getRowHref={trace => href(trace.traceId)}\n        onRowClick={trace => onOpen(trace.traceId)}\n        emptyMessage=\"No traces match. Widen the time range, clear the duration or attribute filters, or show single-span traces.\"\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}