@flanksource/clicky-ui 0.3.56 → 0.3.57

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

@@ -0,0 +1,158 @@
+const require_SegmentedControl = require("../../../components/SegmentedControl.cjs");
+const require_FilterBar = require("../../../components/FilterBar.cjs");
+const require_query = require("./query.cjs");
+const require_source = require("./source.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/data/traces/otel/QueryBar.tsx
+function chooseSource(choice) {
+	if (choice === "received") return {
+		source: "records",
+		run: require_source.RECEIVER_RUN,
+		index: void 0,
+		format: void 0
+	};
+	return {
+		source: choice,
+		run: void 0,
+		index: void 0,
+		format: void 0
+	};
+}
+/** Options for a filter, keeping its selected values listed while the result that suggests them loads. */
+function withSelected(options, selected) {
+	const listed = new Set(options.map((option) => option.value));
+	return [...options, ...Object.keys(selected ?? {}).filter((value) => !listed.has(value)).map((value) => ({
+		value,
+		label: value
+	}))];
+}
+/** One line of trace filters: source, services, root operations, attributes, status, duration, span count and the time window. */
+function QueryBar({ value, onChange, onError, sources, runs, result, allowRecords = true }) {
+	const choice = require_source.sourceChoice(value);
+	const connection = sources.find((source) => source.id === value.source && source.id !== "records");
+	const multi = (key, label, options, extra = {}) => ({
+		...extra,
+		key,
+		kind: "multi",
+		label,
+		value: value[key] ?? {},
+		onChange: (next) => onChange({ [key]: next }),
+		options: withSelected(options, value[key])
+	});
+	const filters = [
+		multi("services", "Service", (result?.services ?? []).map((service) => ({
+			value: service,
+			label: service
+		}))),
+		multi("operations", "Root operation", (result?.rootOperations ?? []).map(({ operation }) => ({
+			value: operation,
+			label: require_query.shortOperation(operation),
+			...operation !== require_query.shortOperation(operation) ? { description: operation } : {}
+		}))),
+		multi("attributes", "Attributes", (result?.attributes ?? []).map(({ value: expr, count }) => ({
+			value: expr,
+			label: expr,
+			description: `${count} traces`
+		})), {
+			allowCustomValue: true,
+			placeholder: "key=value",
+			description: "Any span's attribute: key=value, key=prefix*, or a bare key to match its presence."
+		}),
+		multi("statuses", "Status", [{
+			value: "ok",
+			label: "OK"
+		}, {
+			value: "error",
+			label: "Error"
+		}]),
+		{
+			key: "duration",
+			kind: "duration",
+			label: "Duration",
+			value: require_query.durationOf(value),
+			onChange: (next) => onChange(require_query.durationRequest(next)),
+			unit: "s"
+		},
+		{
+			key: "hide-single",
+			kind: "boolean",
+			label: "Hide single-span traces",
+			value: (value.minSpans ?? 0) >= 2,
+			onChange: (hide) => onChange({ minSpans: hide ? 2 : void 0 })
+		}
+	];
+	if (choice === "records") filters.push({
+		key: "run",
+		kind: "enum",
+		label: "Run",
+		value: value.run ?? "",
+		onChange: (run) => onChange({ run: run || void 0 }),
+		options: [{
+			value: "",
+			label: "Every run"
+		}, ...runs.filter((run) => run !== require_source.RECEIVER_RUN).map((run) => ({ value: run }))]
+	});
+	if (connection) filters.push({
+		key: "index",
+		kind: "text",
+		label: "Index",
+		value: value.index ?? "",
+		onChange: (index) => onChange({ index: index || void 0 }),
+		placement: "overflow"
+	}, {
+		key: "format",
+		kind: "enum",
+		label: "Document format",
+		value: value.format ?? "",
+		onChange: (format) => onChange({ format: format || void 0 }),
+		options: [
+			{
+				value: "",
+				label: "Connection default"
+			},
+			{ value: "flat" },
+			{ value: "jaeger" }
+		],
+		placement: "overflow"
+	});
+	const range = require_query.rangeOf(value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FilterBar.FilterBar, {
+		leading: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SegmentedControl.SegmentedControl, {
+			"aria-label": "Source",
+			size: "sm",
+			value: choice,
+			onChange: (next) => onChange(chooseSource(next)),
+			options: [
+				...runs.includes("receiver") ? [{
+					id: "received",
+					label: "Received"
+				}] : [],
+				...allowRecords ? [{
+					id: "records",
+					label: "Recorded"
+				}] : [],
+				...sources.filter((source) => source.id !== "records").map((source) => ({
+					id: source.id,
+					label: source.name
+				}))
+			]
+		}),
+		filters,
+		timeRange: {
+			from: range.from,
+			to: range.to,
+			timeEnabled: true,
+			emptyLabel: "Last hour",
+			onApply: (from, to) => {
+				try {
+					onChange(require_query.windowOf(from, to, Date.now()));
+				} catch (error) {
+					onError(error instanceof Error ? error.message : String(error));
+				}
+			}
+		}
+	});
+}
+exports.QueryBar = QueryBar;
+
+//# sourceMappingURL=QueryBar.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBar.cjs","names":["RECEIVER_RUN","sourceChoice","shortOperation","durationOf","durationRequest","rangeOf","FilterBar","SegmentedControl","windowOf"],"sources":["../../../../src/data/traces/otel/QueryBar.tsx"],"sourcesContent":["import { RECEIVER_RUN, sourceChoice } from \"./source\";\nimport { FilterBar, SegmentedControl, type FilterBarFilter, type FilterBarMultiFilter } from \"../../../components\";\nimport type { ModeFilter, Modes, SearchResult, SearchValues, Source } from \"./api\";\nimport { durationOf, durationRequest, MULTI_SPAN, rangeOf, shortOperation, windowOf } from \"./query\";\n\nfunction chooseSource(choice: string): SearchValues {\n  if (choice === \"received\") return { source: \"records\", run: RECEIVER_RUN, index: undefined, format: undefined };\n  return { source: choice, run: undefined, index: undefined, format: undefined };\n}\n\n/** Options for a filter, keeping its selected values listed while the result that suggests them loads. */\nfunction withSelected(options: { value: string; label: string; description?: string }[], selected: Modes | undefined) {\n  const listed = new Set(options.map(option => option.value));\n  return [...options, ...Object.keys(selected ?? {}).filter(value => !listed.has(value)).map(value => ({ value, label: value }))];\n}\n\n/** One line of trace filters: source, services, root operations, attributes, status, duration, span count and the time window. */\nexport function QueryBar({ value, onChange, onError, sources, runs, result, allowRecords = true }: {\n  value: SearchValues;\n  onChange: (next: Partial<SearchValues>) => void;\n  onError: (message: string) => void;\n  sources: Source[];\n  runs: string[];\n  result?: SearchResult;\n  allowRecords?: boolean;\n}) {\n  const choice = sourceChoice(value);\n  const connection = sources.find(source => source.id === value.source && source.id !== \"records\");\n  const multi = (key: ModeFilter, label: string, options: { value: string; label: string; description?: string }[], extra: Partial<FilterBarMultiFilter> = {}): FilterBarMultiFilter => ({\n    ...extra, key, kind: \"multi\", label, value: value[key] ?? {}, onChange: next => onChange({ [key]: next }), options: withSelected(options, value[key]),\n  });\n  const filters: FilterBarFilter[] = [\n    multi(\"services\", \"Service\", (result?.services ?? []).map(service => ({ value: service, label: service }))),\n    multi(\"operations\", \"Root operation\", (result?.rootOperations ?? []).map(({ operation }) => ({\n      value: operation, label: shortOperation(operation), ...(operation !== shortOperation(operation) ? { description: operation } : {}),\n    }))),\n    multi(\"attributes\", \"Attributes\", (result?.attributes ?? []).map(({ value: expr, count }) => ({ value: expr, label: expr, description: `${count} traces` })), {\n      allowCustomValue: true, placeholder: \"key=value\", description: \"Any span's attribute: key=value, key=prefix*, or a bare key to match its presence.\",\n    }),\n    multi(\"statuses\", \"Status\", [{ value: \"ok\", label: \"OK\" }, { value: \"error\", label: \"Error\" }]),\n    { key: \"duration\", kind: \"duration\", label: \"Duration\", value: durationOf(value), onChange: next => onChange(durationRequest(next)), unit: \"s\" },\n    { key: \"hide-single\", kind: \"boolean\", label: \"Hide single-span traces\", value: (value.minSpans ?? 0) >= MULTI_SPAN, onChange: hide => onChange({ minSpans: hide ? MULTI_SPAN : undefined }) },\n  ];\n  if (choice === \"records\") filters.push({\n    key: \"run\", kind: \"enum\", label: \"Run\", value: value.run ?? \"\", onChange: run => onChange({ run: run || undefined }),\n    options: [{ value: \"\", label: \"Every run\" }, ...runs.filter(run => run !== RECEIVER_RUN).map(run => ({ value: run }))],\n  });\n  if (connection) filters.push(\n    { key: \"index\", kind: \"text\", label: \"Index\", value: value.index ?? \"\", onChange: index => onChange({ index: index || undefined }), placement: \"overflow\" },\n    { key: \"format\", kind: \"enum\", label: \"Document format\", value: value.format ?? \"\", onChange: format => onChange({ format: format || undefined }), options: [{ value: \"\", label: \"Connection default\" }, { value: \"flat\" }, { value: \"jaeger\" }], placement: \"overflow\" },\n  );\n  const range = rangeOf(value);\n  return (\n    <FilterBar\n      leading={\n        <SegmentedControl\n          aria-label=\"Source\"\n          size=\"sm\"\n          value={choice}\n          onChange={next => onChange(chooseSource(next))}\n          options={[\n            ...(runs.includes(RECEIVER_RUN) ? [{ id: \"received\", label: \"Received\" }] : []),\n            ...(allowRecords ? [{ id: \"records\", label: \"Recorded\" }] : []),\n            ...sources.filter(source => source.id !== \"records\").map(source => ({ id: source.id, label: source.name })),\n          ]}\n        />\n      }\n      filters={filters}\n      timeRange={{\n        from: range.from, to: range.to, timeEnabled: true, emptyLabel: \"Last hour\",\n        onApply: (from, to) => {\n          try {\n            onChange(windowOf(from, to, Date.now()));\n          } catch (error) {\n            onError(error instanceof Error ? error.message : String(error));\n          }\n        },\n      }}\n    />\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+import { SearchResult, SearchValues, Source } from './api.js';
+/** One line of trace filters: source, services, root operations, attributes, status, duration, span count and the time window. */
+export declare function QueryBar({ value, onChange, onError, sources, runs, result, allowRecords }: {
+    value: SearchValues;
+    onChange: (next: Partial<SearchValues>) => void;
+    onError: (message: string) => void;
+    sources: Source[];
+    runs: string[];
+    result?: SearchResult;
+    allowRecords?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=QueryBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBar.d.ts","sourceRoot":"","sources":["../../../../src/data/traces/otel/QueryBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAqB,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAcnF,kIAAkI;AAClI,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,YAAmB,EAAE,EAAE;IACjG,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,+BAuDA"}

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

@@ -0,0 +1,158 @@
+import { SegmentedControl } from "../../../components/SegmentedControl.js";
+import { FilterBar } from "../../../components/FilterBar.js";
+import { durationOf, durationRequest, rangeOf, shortOperation, windowOf } from "./query.js";
+import { RECEIVER_RUN, sourceChoice } from "./source.js";
+import { jsx } from "react/jsx-runtime";
+// src/data/traces/otel/QueryBar.tsx
+function chooseSource(choice) {
+	if (choice === "received") return {
+		source: "records",
+		run: RECEIVER_RUN,
+		index: void 0,
+		format: void 0
+	};
+	return {
+		source: choice,
+		run: void 0,
+		index: void 0,
+		format: void 0
+	};
+}
+/** Options for a filter, keeping its selected values listed while the result that suggests them loads. */
+function withSelected(options, selected) {
+	const listed = new Set(options.map((option) => option.value));
+	return [...options, ...Object.keys(selected ?? {}).filter((value) => !listed.has(value)).map((value) => ({
+		value,
+		label: value
+	}))];
+}
+/** One line of trace filters: source, services, root operations, attributes, status, duration, span count and the time window. */
+function QueryBar({ value, onChange, onError, sources, runs, result, allowRecords = true }) {
+	const choice = sourceChoice(value);
+	const connection = sources.find((source) => source.id === value.source && source.id !== "records");
+	const multi = (key, label, options, extra = {}) => ({
+		...extra,
+		key,
+		kind: "multi",
+		label,
+		value: value[key] ?? {},
+		onChange: (next) => onChange({ [key]: next }),
+		options: withSelected(options, value[key])
+	});
+	const filters = [
+		multi("services", "Service", (result?.services ?? []).map((service) => ({
+			value: service,
+			label: service
+		}))),
+		multi("operations", "Root operation", (result?.rootOperations ?? []).map(({ operation }) => ({
+			value: operation,
+			label: shortOperation(operation),
+			...operation !== shortOperation(operation) ? { description: operation } : {}
+		}))),
+		multi("attributes", "Attributes", (result?.attributes ?? []).map(({ value: expr, count }) => ({
+			value: expr,
+			label: expr,
+			description: `${count} traces`
+		})), {
+			allowCustomValue: true,
+			placeholder: "key=value",
+			description: "Any span's attribute: key=value, key=prefix*, or a bare key to match its presence."
+		}),
+		multi("statuses", "Status", [{
+			value: "ok",
+			label: "OK"
+		}, {
+			value: "error",
+			label: "Error"
+		}]),
+		{
+			key: "duration",
+			kind: "duration",
+			label: "Duration",
+			value: durationOf(value),
+			onChange: (next) => onChange(durationRequest(next)),
+			unit: "s"
+		},
+		{
+			key: "hide-single",
+			kind: "boolean",
+			label: "Hide single-span traces",
+			value: (value.minSpans ?? 0) >= 2,
+			onChange: (hide) => onChange({ minSpans: hide ? 2 : void 0 })
+		}
+	];
+	if (choice === "records") filters.push({
+		key: "run",
+		kind: "enum",
+		label: "Run",
+		value: value.run ?? "",
+		onChange: (run) => onChange({ run: run || void 0 }),
+		options: [{
+			value: "",
+			label: "Every run"
+		}, ...runs.filter((run) => run !== RECEIVER_RUN).map((run) => ({ value: run }))]
+	});
+	if (connection) filters.push({
+		key: "index",
+		kind: "text",
+		label: "Index",
+		value: value.index ?? "",
+		onChange: (index) => onChange({ index: index || void 0 }),
+		placement: "overflow"
+	}, {
+		key: "format",
+		kind: "enum",
+		label: "Document format",
+		value: value.format ?? "",
+		onChange: (format) => onChange({ format: format || void 0 }),
+		options: [
+			{
+				value: "",
+				label: "Connection default"
+			},
+			{ value: "flat" },
+			{ value: "jaeger" }
+		],
+		placement: "overflow"
+	});
+	const range = rangeOf(value);
+	return /* @__PURE__ */ jsx(FilterBar, {
+		leading: /* @__PURE__ */ jsx(SegmentedControl, {
+			"aria-label": "Source",
+			size: "sm",
+			value: choice,
+			onChange: (next) => onChange(chooseSource(next)),
+			options: [
+				...runs.includes("receiver") ? [{
+					id: "received",
+					label: "Received"
+				}] : [],
+				...allowRecords ? [{
+					id: "records",
+					label: "Recorded"
+				}] : [],
+				...sources.filter((source) => source.id !== "records").map((source) => ({
+					id: source.id,
+					label: source.name
+				}))
+			]
+		}),
+		filters,
+		timeRange: {
+			from: range.from,
+			to: range.to,
+			timeEnabled: true,
+			emptyLabel: "Last hour",
+			onApply: (from, to) => {
+				try {
+					onChange(windowOf(from, to, Date.now()));
+				} catch (error) {
+					onError(error instanceof Error ? error.message : String(error));
+				}
+			}
+		}
+	});
+}
+export { QueryBar };
+
+//# sourceMappingURL=QueryBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBar.js","names":[],"sources":["../../../../src/data/traces/otel/QueryBar.tsx"],"sourcesContent":["import { RECEIVER_RUN, sourceChoice } from \"./source\";\nimport { FilterBar, SegmentedControl, type FilterBarFilter, type FilterBarMultiFilter } from \"../../../components\";\nimport type { ModeFilter, Modes, SearchResult, SearchValues, Source } from \"./api\";\nimport { durationOf, durationRequest, MULTI_SPAN, rangeOf, shortOperation, windowOf } from \"./query\";\n\nfunction chooseSource(choice: string): SearchValues {\n  if (choice === \"received\") return { source: \"records\", run: RECEIVER_RUN, index: undefined, format: undefined };\n  return { source: choice, run: undefined, index: undefined, format: undefined };\n}\n\n/** Options for a filter, keeping its selected values listed while the result that suggests them loads. */\nfunction withSelected(options: { value: string; label: string; description?: string }[], selected: Modes | undefined) {\n  const listed = new Set(options.map(option => option.value));\n  return [...options, ...Object.keys(selected ?? {}).filter(value => !listed.has(value)).map(value => ({ value, label: value }))];\n}\n\n/** One line of trace filters: source, services, root operations, attributes, status, duration, span count and the time window. */\nexport function QueryBar({ value, onChange, onError, sources, runs, result, allowRecords = true }: {\n  value: SearchValues;\n  onChange: (next: Partial<SearchValues>) => void;\n  onError: (message: string) => void;\n  sources: Source[];\n  runs: string[];\n  result?: SearchResult;\n  allowRecords?: boolean;\n}) {\n  const choice = sourceChoice(value);\n  const connection = sources.find(source => source.id === value.source && source.id !== \"records\");\n  const multi = (key: ModeFilter, label: string, options: { value: string; label: string; description?: string }[], extra: Partial<FilterBarMultiFilter> = {}): FilterBarMultiFilter => ({\n    ...extra, key, kind: \"multi\", label, value: value[key] ?? {}, onChange: next => onChange({ [key]: next }), options: withSelected(options, value[key]),\n  });\n  const filters: FilterBarFilter[] = [\n    multi(\"services\", \"Service\", (result?.services ?? []).map(service => ({ value: service, label: service }))),\n    multi(\"operations\", \"Root operation\", (result?.rootOperations ?? []).map(({ operation }) => ({\n      value: operation, label: shortOperation(operation), ...(operation !== shortOperation(operation) ? { description: operation } : {}),\n    }))),\n    multi(\"attributes\", \"Attributes\", (result?.attributes ?? []).map(({ value: expr, count }) => ({ value: expr, label: expr, description: `${count} traces` })), {\n      allowCustomValue: true, placeholder: \"key=value\", description: \"Any span's attribute: key=value, key=prefix*, or a bare key to match its presence.\",\n    }),\n    multi(\"statuses\", \"Status\", [{ value: \"ok\", label: \"OK\" }, { value: \"error\", label: \"Error\" }]),\n    { key: \"duration\", kind: \"duration\", label: \"Duration\", value: durationOf(value), onChange: next => onChange(durationRequest(next)), unit: \"s\" },\n    { key: \"hide-single\", kind: \"boolean\", label: \"Hide single-span traces\", value: (value.minSpans ?? 0) >= MULTI_SPAN, onChange: hide => onChange({ minSpans: hide ? MULTI_SPAN : undefined }) },\n  ];\n  if (choice === \"records\") filters.push({\n    key: \"run\", kind: \"enum\", label: \"Run\", value: value.run ?? \"\", onChange: run => onChange({ run: run || undefined }),\n    options: [{ value: \"\", label: \"Every run\" }, ...runs.filter(run => run !== RECEIVER_RUN).map(run => ({ value: run }))],\n  });\n  if (connection) filters.push(\n    { key: \"index\", kind: \"text\", label: \"Index\", value: value.index ?? \"\", onChange: index => onChange({ index: index || undefined }), placement: \"overflow\" },\n    { key: \"format\", kind: \"enum\", label: \"Document format\", value: value.format ?? \"\", onChange: format => onChange({ format: format || undefined }), options: [{ value: \"\", label: \"Connection default\" }, { value: \"flat\" }, { value: \"jaeger\" }], placement: \"overflow\" },\n  );\n  const range = rangeOf(value);\n  return (\n    <FilterBar\n      leading={\n        <SegmentedControl\n          aria-label=\"Source\"\n          size=\"sm\"\n          value={choice}\n          onChange={next => onChange(chooseSource(next))}\n          options={[\n            ...(runs.includes(RECEIVER_RUN) ? [{ id: \"received\", label: \"Received\" }] : []),\n            ...(allowRecords ? [{ id: \"records\", label: \"Recorded\" }] : []),\n            ...sources.filter(source => source.id !== \"records\").map(source => ({ id: source.id, label: source.name })),\n          ]}\n        />\n      }\n      filters={filters}\n      timeRange={{\n        from: range.from, to: range.to, timeEnabled: true, emptyLabel: \"Last hour\",\n        onApply: (from, to) => {\n          try {\n            onChange(windowOf(from, to, Date.now()));\n          } catch (error) {\n            onError(error instanceof Error ? error.message : String(error));\n          }\n        },\n      }}\n    />\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,264 @@
+const require_UiSqlQuery = require("../../../icons/components/UiSqlQuery.cjs");
+const require_UiDatabase = require("../../../icons/components/UiDatabase.cjs");
+const require_Icon = require("../../Icon.cjs");
+const require_button = require("../../../components/button.cjs");
+const require_Properties = require("../../Properties.cjs");
+const require_CodeBlock = require("../../CodeBlock.cjs");
+const require_StatStrip = require("../../StatStrip.cjs");
+const require_SpanCategory = require("./SpanCategory.cjs");
+const require_model = require("./model.cjs");
+const require_metrics = require("./metrics.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/data/traces/otel/SpanCards.tsx
+var attr = (span, key) => span.attributes?.[key];
+function AgentCard({ index, span }) {
+	const cost = require_model.num(attr(span, "captain.cost_usd"));
+	const budget = require_model.num(attr(span, "captain.budget.cost_usd"));
+	const kids = index.children.get(span.spanId) ?? [];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_StatStrip.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: require_metrics.metric(cost, (value) => `$${value.toFixed(5)}`),
+					sub: budget && cost !== void 0 ? `${(cost / budget * 100).toFixed(3)}% of $${budget}` : "budget unavailable"
+				}
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Properties.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) => require_model.category(k) === "llm").length} LLM · ${kids.filter((k) => require_model.category(k) === "db").length} DB`
+			},
+			{
+				key: "Self-time",
+				value: `${require_model.duration(require_model.selfTimeMs(index, span))} not covered by a child span`
+			}
+		] })]
+	});
+}
+function LlmCard({ span }) {
+	const n = (key) => require_model.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+			className: "text-sm",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "text-muted-foreground",
+					children: [String(attr(span, "gen_ai.provider.name") ?? "—"), " · "]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: String(requested ?? "—") }),
+				served !== void 0 && served !== requested && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" → ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: String(served ?? "—") })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "text-muted-foreground",
+					children: [
+						" · ",
+						String(attr(span, "captain.mode") ?? "—"),
+						" · ",
+						String(attr(span, "captain.prompt.source") ?? "—")
+					]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_StatStrip.StatStrip, {
+			columns: 4,
+			items: [
+				{
+					label: "Input",
+					value: require_metrics.metric(n("gen_ai.usage.input_tokens")),
+					sub: `${require_metrics.metric(n("gen_ai.usage.cache_read.input_tokens"))} cached`
+				},
+				{
+					label: "Output",
+					value: require_metrics.metric(n("gen_ai.usage.output_tokens")),
+					sub: `${require_metrics.metric(n("gen_ai.usage.reasoning_tokens"))} reasoning`
+				},
+				{
+					label: "Throughput",
+					value: require_metrics.metric(outRate, (value) => value.toFixed(0)),
+					sub: "output tok/s"
+				},
+				{
+					label: "Cost",
+					value: require_metrics.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] = (0, react.useState)(false);
+	(0, react.useEffect)(() => setFull(false), [span.spanId]);
+	const clipped = statement.length > PREVIEW_CHARS && !full;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				className: "text-sm",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "text-muted-foreground",
+					children: [String(attr(span, "db.system")), " · "]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: String(attr(span, "db.sql.table") ?? "no table") })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_StatStrip.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CodeBlock.CodeBlock, {
+					language: "sql",
+					source: clipped ? `${statement.slice(0, PREVIEW_CHARS)} …` : statement,
+					copyable: true
+				}), statement.length > PREVIEW_CHARS && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_button.Button, {
+					size: "sm",
+					variant: "ghost",
+					onClick: () => setFull((on) => !on),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+						icon: require_UiSqlQuery.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
+				className: "flex items-center gap-2 text-base font-semibold",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpanCategory.Tinted, {
+						icon: require_UiDatabase.UiDatabase,
+						color: require_model.CATEGORY_COLOR.db
+					}),
+					spans.length,
+					" consecutive database calls"
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_StatStrip.StatStrip, {
+				columns: 3,
+				items: [
+					{
+						label: "Busy",
+						value: require_model.duration(busy),
+						sub: `over ${require_model.duration(index.offsetMs(spans.at(-1)) + spans.at(-1).durationMs - index.offsetMs(spans[0]))} wall`
+					},
+					{
+						label: "Tables",
+						value: String(tables.size)
+					},
+					{
+						label: "Slowest",
+						value: require_model.duration(slowest.durationMs),
+						sub: `${slowest.operation.replace("gorm.", "")} ${String(attr(slowest, "db.sql.table"))}`
+					}
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+				className: "w-full text-xs",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+					className: "border-b border-border text-left text-muted-foreground",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "py-1 font-medium",
+							children: "Call"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "py-1 font-medium",
+							children: "Table"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "py-1 text-right font-medium",
+							children: "Rows"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+							className: "py-1 text-right font-medium",
+							children: "Duration"
+						})
+					] })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+					className: "divide-y divide-border",
+					children: spans.map((span) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+						className: "cursor-pointer hover:bg-muted",
+						onClick: () => onSelect(span.spanId),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "py-1",
+								children: span.operation.replace("gorm.", "")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "py-1 text-muted-foreground",
+								children: String(attr(span, "db.sql.table") ?? "—")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "py-1 text-right tabular-nums",
+								children: String(attr(span, "db.rows_affected") ?? "")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								className: "py-1 text-right tabular-nums",
+								children: require_model.duration(span.durationMs)
+							})
+						]
+					}, span.spanId))
+				})]
+			})
+		]
+	});
+}
+exports.AgentCard = AgentCard;
+exports.DbCard = DbCard;
+exports.GroupDetail = GroupDetail;
+exports.LlmCard = LlmCard;
+
+//# sourceMappingURL=SpanCards.cjs.map