@kopai/ui 0.4.0 → 0.6.0

package/dist/index.mjs

@@ -6,7 +6,7 @@ import z$1, { z } from "zod";
 import { dataFilterSchemas } from "@kopai/core";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { createPortal } from "react-dom";
-import "recharts";
+import { Area, AreaChart, Bar, BarChart, Brush, CartesianGrid, Cell, Legend, Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 
 //#region src/providers/kopai-provider.tsx
 const KopaiSDKContext = createContext(null);
@@ -376,13 +376,19 @@ const observabilityCatalog = createCatalog({
 		MetricTimeSeries: {
 			props: z.object({
 				height: z.number().nullable(),
-				showBrush: z.boolean().nullable()
+				showBrush: z.boolean().nullable(),
+				yAxisLabel: z.string().nullable(),
+				unit: z.string().nullable()
 			}),
 			hasChildren: false,
 			description: "Time series line chart for Gauge/Sum metrics"
 		},
 		MetricHistogram: {
-			props: z.object({ height: z.number().nullable() }),
+			props: z.object({
+				height: z.number().nullable(),
+				yAxisLabel: z.string().nullable(),
+				unit: z.string().nullable()
+			}),
 			hasChildren: false,
 			description: "Histogram bar chart for distribution metrics"
 		},
@@ -407,111 +413,6 @@ const observabilityCatalog = createCatalog({
 	}
 });
 
-//#endregion
-//#region src/lib/renderer.tsx
-/**
-* Creates a typed Renderer component bound to a catalog and component implementations.
-*
-* @param _catalog - The catalog created via createCatalog (used for type inference)
-* @param components - React component implementations matching catalog definitions
-* @returns A Renderer component that only needs `tree` and optional `fallback`
-*
-* @example
-* ```tsx
-* const DashboardRenderer = createRendererFromCatalog(catalog, {
-*   Card: ({ element, children }) => <div className="card">{children}</div>,
-*   Table: ({ element, data }) => <table>...</table>,
-* });
-*
-* <DashboardRenderer tree={uiTree} />
-* ```
-*/
-function createRendererFromCatalog(_catalog, components) {
-	return function CatalogRenderer({ tree, fallback }) {
-		return /* @__PURE__ */ jsx(Renderer, {
-			tree,
-			registry: components,
-			fallback
-		});
-	};
-}
-/**
-* Wrapper component for elements with dataSource
-*/
-function DataSourceElement({ element, Component, children }) {
-	const [paramsOverride, setParamsOverride] = useState({});
-	const { data, loading, error, refetch } = useKopaiData(useMemo(() => {
-		if (!element.dataSource) return void 0;
-		return {
-			...element.dataSource,
-			params: {
-				...element.dataSource.params,
-				...paramsOverride
-			}
-		};
-	}, [element.dataSource, paramsOverride]));
-	return /* @__PURE__ */ jsx(Component, {
-		element,
-		hasData: true,
-		data,
-		loading,
-		error,
-		refetch,
-		updateParams: useCallback((params) => {
-			setParamsOverride((prev) => ({
-				...prev,
-				...params
-			}));
-		}, []),
-		children
-	});
-}
-/**
-* Internal element renderer - recursively renders elements and children
-*/
-function ElementRenderer({ element, tree, registry, fallback }) {
-	const Component = registry[element.type] ?? fallback;
-	if (!Component) {
-		console.warn(`No renderer for component type: ${element.type}`);
-		return null;
-	}
-	const children = element.children?.map((childKey) => {
-		const childElement = tree.elements[childKey];
-		if (!childElement) return null;
-		return /* @__PURE__ */ jsx(ElementRenderer, {
-			element: childElement,
-			tree,
-			registry,
-			fallback
-		}, childKey);
-	});
-	if (element.dataSource) return /* @__PURE__ */ jsx(DataSourceElement, {
-		element,
-		Component,
-		children
-	});
-	return /* @__PURE__ */ jsx(Component, {
-		element,
-		hasData: false,
-		children
-	});
-}
-/**
-* Renders a UITree using a component registry.
-* Prefer using {@link createRendererFromCatalog} for type-safe rendering.
-*/
-function Renderer({ tree, registry, fallback }) {
-	if (!tree || !tree.root) return null;
-	const rootElement = tree.elements[tree.root];
-	if (!rootElement) return null;
-	return /* @__PURE__ */ jsx(ElementRenderer, {
-		element: rootElement,
-		tree,
-		registry,
-		fallback
-	});
-}
-
 //#endregion
 //#region src/components/observability/TabBar/index.tsx
 function renderLabel(label, shortcutKey) {
@@ -1000,7 +901,7 @@ function TraceHeader({ trace }) {
 
 //#endregion
 //#region src/components/observability/TraceTimeline/Tooltip.tsx
-function Tooltip({ content, children }) {
+function Tooltip$1({ content, children }) {
 	const [isVisible, setIsVisible] = useState(false);
 	const [position, setPosition] = useState({
 		x: 0,
@@ -1037,7 +938,7 @@ function TimelineBar({ span, relativeStart, relativeDuration }) {
 	const widthPercent = Math.max(.2, relativeDuration * 100);
 	return /* @__PURE__ */ jsx("div", {
 		className: "relative h-full",
-		children: /* @__PURE__ */ jsx(Tooltip, {
+		children: /* @__PURE__ */ jsx(Tooltip$1, {
 			content: `${span.name}\n${formatDuration(span.durationMs)}\nStatus: ${isError ? "ERROR" : "OK"}`,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "absolute inset-0",
@@ -1172,6 +1073,12 @@ function formatAttributeValue(value) {
 	if (Array.isArray(value) || typeof value === "object") return JSON.stringify(value, null, 2);
 	return String(value);
 }
+function formatSeriesLabel(labels) {
+	const entries = Object.entries(labels);
+	if (entries.length === 0) return "";
+	if (entries.length === 1) return String(entries[0][1]);
+	return entries.map(([k, v]) => `${k}=${v}`).join(", ");
+}
 function isComplexValue(value) {
 	return typeof value === "object" && value !== null && (Array.isArray(value) || Object.keys(value).length > 0);
 }
@@ -3825,91 +3732,1295 @@ function LogFilter({ value, onChange, rows = [], selectedServices = [], onSelect
 }
 
 //#endregion
-//#region src/components/observability/ServiceList/shortcuts.ts
-const SERVICES_SHORTCUTS = {
-	name: "Services",
-	shortcuts: [{
-		keys: ["Backspace"],
-		description: "Go back"
-	}]
-};
+//#region src/components/observability/utils/lttb.ts
+function triangleArea(p1, p2, p3) {
+	return Math.abs((p1.x - p3.x) * (p2.y - p1.y) - (p1.x - p2.x) * (p3.y - p1.y)) / 2;
+}
+function downsampleLTTB(data, targetPoints) {
+	if (data.length <= 2 || targetPoints >= data.length) return data.slice();
+	if (targetPoints <= 2) return [data[0], data[data.length - 1]];
+	const sampled = [];
+	const bucketSize = (data.length - 2) / (targetPoints - 2);
+	const firstPoint = data[0];
+	if (!firstPoint) return data;
+	sampled.push(firstPoint);
+	let prevSelectedIndex = 0;
+	for (let i = 0; i < targetPoints - 2; i++) {
+		const bucketStart = Math.floor((i + 0) * bucketSize) + 1;
+		const bucketEnd = Math.min(Math.floor((i + 1) * bucketSize) + 1, data.length - 1);
+		const nextBucketStart = Math.floor((i + 1) * bucketSize) + 1;
+		const nextBucketEnd = Math.min(Math.floor((i + 2) * bucketSize) + 1, data.length - 1);
+		let avgX = 0;
+		let avgY = 0;
+		let nextBucketCount = 0;
+		for (let j = nextBucketStart; j < nextBucketEnd; j++) {
+			const point = data[j];
+			if (point) {
+				avgX += point.x;
+				avgY += point.y;
+				nextBucketCount++;
+			}
+		}
+		if (nextBucketCount > 0) {
+			avgX /= nextBucketCount;
+			avgY /= nextBucketCount;
+		} else {
+			const lastPoint = data[data.length - 1];
+			if (lastPoint) {
+				avgX = lastPoint.x;
+				avgY = lastPoint.y;
+			}
+		}
+		const avgPoint = {
+			x: avgX,
+			y: avgY
+		};
+		let maxArea = -1;
+		let maxAreaIndex = bucketStart;
+		const prevPoint = data[prevSelectedIndex];
+		if (!prevPoint) continue;
+		for (let j = bucketStart; j < bucketEnd; j++) {
+			const currentPoint = data[j];
+			if (!currentPoint) continue;
+			const area = triangleArea(prevPoint, currentPoint, avgPoint);
+			if (area > maxArea) {
+				maxArea = area;
+				maxAreaIndex = j;
+			}
+		}
+		const selectedPoint = data[maxAreaIndex];
+		if (selectedPoint) sampled.push(selectedPoint);
+		prevSelectedIndex = maxAreaIndex;
+	}
+	const lastPoint = data[data.length - 1];
+	if (lastPoint) sampled.push(lastPoint);
+	return sampled;
+}
 
 //#endregion
-//#region src/components/observability/renderers/OtelMetricDiscovery.tsx
-const TYPE_ORDER = {
-	Gauge: 0,
-	Sum: 1,
-	Histogram: 2,
-	ExponentialHistogram: 3,
-	Summary: 4
+//#region src/components/observability/utils/units.ts
+const BYTE_SCALES = [
+	{
+		threshold: 0xe8d4a51000,
+		divisor: 0xe8d4a51000,
+		suffix: "TB"
+	},
+	{
+		threshold: 1e9,
+		divisor: 1e9,
+		suffix: "GB"
+	},
+	{
+		threshold: 1e6,
+		divisor: 1e6,
+		suffix: "MB"
+	},
+	{
+		threshold: 1e3,
+		divisor: 1e3,
+		suffix: "KB"
+	},
+	{
+		threshold: 0,
+		divisor: 1,
+		suffix: "B"
+	}
+];
+const SECOND_SCALES = [
+	{
+		threshold: 3600,
+		divisor: 3600,
+		suffix: "h"
+	},
+	{
+		threshold: 60,
+		divisor: 60,
+		suffix: "min"
+	},
+	{
+		threshold: 1,
+		divisor: 1,
+		suffix: "s"
+	},
+	{
+		threshold: 0,
+		divisor: .001,
+		suffix: "ms"
+	}
+];
+const MS_SCALES = [{
+	threshold: 1e3,
+	divisor: 1e3,
+	suffix: "s"
+}, {
+	threshold: 0,
+	divisor: 1,
+	suffix: "ms"
+}];
+const US_SCALES = [
+	{
+		threshold: 1e6,
+		divisor: 1e6,
+		suffix: "s"
+	},
+	{
+		threshold: 1e3,
+		divisor: 1e3,
+		suffix: "ms"
+	},
+	{
+		threshold: 0,
+		divisor: 1,
+		suffix: "μs"
+	}
+];
+const GENERIC_SCALES = [
+	{
+		threshold: 1e9,
+		divisor: 1e9,
+		suffix: "B"
+	},
+	{
+		threshold: 1e6,
+		divisor: 1e6,
+		suffix: "M"
+	},
+	{
+		threshold: 1e3,
+		divisor: 1e3,
+		suffix: "K"
+	},
+	{
+		threshold: 0,
+		divisor: 1,
+		suffix: ""
+	}
+];
+const BRACE_UNIT_PATTERN = /^\{(.+)\}$/;
+const UNIT_SCALE_MAP = {
+	By: BYTE_SCALES,
+	s: SECOND_SCALES,
+	ms: MS_SCALES,
+	us: US_SCALES
 };
-function OtelMetricDiscovery(props) {
-	const data = props.hasData ? props.data : null;
-	const loading = props.hasData ? props.loading : false;
-	const error = props.hasData ? props.error : null;
-	const sorted = useMemo(() => {
-		if (!data?.metrics) return [];
-		return [...data.metrics].sort((a, b) => a.name.localeCompare(b.name) || (TYPE_ORDER[a.type] ?? 99) - (TYPE_ORDER[b.type] ?? 99));
-	}, [data]);
-	if (loading && !sorted.length) return /* @__PURE__ */ jsx("p", {
-		className: "text-muted-foreground py-4",
-		children: "Loading metrics…"
+function pickScale(scales, maxValue) {
+	const abs = Math.abs(maxValue);
+	for (const s of scales) if (abs >= s.threshold && s.threshold > 0) return s;
+	return scales[scales.length - 1];
+}
+function resolveUnitScale(unit, maxValue) {
+	if (!unit) {
+		const s = pickScale(GENERIC_SCALES, maxValue);
+		return {
+			divisor: s.divisor,
+			suffix: s.suffix,
+			label: "",
+			isPercent: false
+		};
+	}
+	if (unit === "1") return {
+		divisor: .01,
+		suffix: "%",
+		label: "Percent",
+		isPercent: true
+	};
+	const scales = UNIT_SCALE_MAP[unit];
+	if (scales) {
+		const s = pickScale(scales, maxValue);
+		return {
+			divisor: s.divisor,
+			suffix: s.suffix,
+			label: s.suffix,
+			isPercent: false
+		};
+	}
+	const braceMatch = BRACE_UNIT_PATTERN.exec(unit);
+	if (braceMatch) {
+		const cleaned = braceMatch[1];
+		const s = pickScale(GENERIC_SCALES, maxValue);
+		const suffix = s.suffix ? `${s.suffix} ${cleaned}` : cleaned;
+		return {
+			divisor: s.divisor,
+			suffix,
+			label: cleaned,
+			isPercent: false
+		};
+	}
+	const s = pickScale(GENERIC_SCALES, maxValue);
+	const suffix = s.suffix ? `${s.suffix} ${unit}` : unit;
+	return {
+		divisor: s.divisor,
+		suffix,
+		label: unit,
+		isPercent: false
+	};
+}
+function formatTickValue(value, scale) {
+	const scaled = value / scale.divisor;
+	if (scale.isPercent) return `${scaled.toFixed(1)}`;
+	if (Number.isInteger(scaled) && Math.abs(scaled) < 1e4) return scaled.toString();
+	return scaled.toFixed(1);
+}
+function formatDisplayValue(value, scale) {
+	const tick = formatTickValue(value, scale);
+	if (!scale.suffix) return tick;
+	if (scale.isPercent) return `${tick}${scale.suffix}`;
+	return `${tick} ${scale.suffix}`;
+}
+/** Convenience: resolve + format in one call (for MetricStat) */
+function formatOtelValue(value, unit) {
+	return formatDisplayValue(value, resolveUnitScale(unit, Math.abs(value)));
+}
+
+//#endregion
+//#region src/components/observability/MetricTimeSeries/index.tsx
+/**
+* MetricTimeSeries - Accepts OtelMetricsRow[] and renders line charts.
+*/
+const COLORS$1 = [
+	"#8884d8",
+	"#82ca9d",
+	"#ffc658",
+	"#ff7300",
+	"#00C49F",
+	"#0088FE",
+	"#FFBB28",
+	"#FF8042",
+	"#a4de6c",
+	"#d0ed57"
+];
+const defaultFormatTime = (timestamp) => {
+	return new Date(timestamp).toLocaleTimeString("en-US", {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		hour12: false
 	});
-	if (error) return /* @__PURE__ */ jsxs("p", {
-		className: "text-red-400 py-4",
-		children: ["Error: ", error.message]
+};
+function getStrokeDashArray(style) {
+	if (style === "solid") return void 0;
+	if (style === "dotted") return "2 2";
+	return "5 5";
+}
+/** Build metrics from denormalized rows */
+function buildMetrics(rows) {
+	const metricMap = /* @__PURE__ */ new Map();
+	const metricMeta = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		const name = row.MetricName ?? "unknown";
+		const type = row.MetricType;
+		if (type === "Histogram" || type === "ExponentialHistogram" || type === "Summary") continue;
+		if (!metricMap.has(name)) metricMap.set(name, /* @__PURE__ */ new Map());
+		if (!metricMeta.has(name)) metricMeta.set(name, {
+			description: row.MetricDescription ?? "",
+			unit: row.MetricUnit ?? "",
+			type,
+			serviceName: row.ServiceName ?? "unknown"
+		});
+		const seriesKey = row.Attributes ? JSON.stringify(Object.fromEntries(Object.entries(row.Attributes).sort(([a], [b]) => a.localeCompare(b)))) : "__default__";
+		const seriesMap = metricMap.get(name);
+		if (!seriesMap.has(seriesKey)) {
+			const labels = {};
+			if (row.Attributes) for (const [k, v] of Object.entries(row.Attributes)) labels[k] = String(v);
+			seriesMap.set(seriesKey, {
+				key: seriesKey === "__default__" ? name : seriesKey,
+				labels,
+				dataPoints: []
+			});
+		}
+		if (!("Value" in row)) continue;
+		const value = row.Value;
+		const timestamp = parseInt(row.TimeUnix, 10) / 1e6;
+		seriesMap.get(seriesKey).dataPoints.push({
+			timestamp,
+			value
+		});
+	}
+	const results = [];
+	for (const [name, seriesMap] of metricMap) {
+		const meta = metricMeta.get(name);
+		const series = Array.from(seriesMap.values());
+		for (const s of series) s.dataPoints.sort((a, b) => a.timestamp - b.timestamp);
+		results.push({
+			name,
+			description: meta.description,
+			unit: meta.unit,
+			type: meta.type,
+			series,
+			serviceName: meta.serviceName
+		});
+	}
+	return results;
+}
+function toRechartsData(metrics) {
+	const timestampMap = /* @__PURE__ */ new Map();
+	for (const metric of metrics) for (const series of metric.series) {
+		const seriesName = series.key === "__default__" ? metric.name : series.key;
+		for (const dp of series.dataPoints) {
+			if (!timestampMap.has(dp.timestamp)) timestampMap.set(dp.timestamp, { timestamp: dp.timestamp });
+			timestampMap.get(dp.timestamp)[seriesName] = dp.value;
+		}
+	}
+	return Array.from(timestampMap.values()).sort((a, b) => a.timestamp - b.timestamp);
+}
+function getSeriesKeys(metrics) {
+	const keys = /* @__PURE__ */ new Set();
+	for (const m of metrics) for (const s of m.series) keys.add(s.key === "__default__" ? m.name : s.key);
+	return Array.from(keys);
+}
+function buildDisplayLabelMap(metrics) {
+	const map = /* @__PURE__ */ new Map();
+	for (const m of metrics) for (const s of m.series) {
+		const dataKey = s.key === "__default__" ? m.name : s.key;
+		const label = formatSeriesLabel(s.labels);
+		map.set(dataKey, label || m.name);
+	}
+	return map;
+}
+function downsampleRechartsData(data, seriesKeys, maxPoints) {
+	if (data.length <= maxPoints) return data;
+	const timestamps = /* @__PURE__ */ new Set();
+	for (const key of seriesKeys) {
+		const pts = [];
+		for (const d of data) {
+			const v = d[key];
+			if (v !== void 0) pts.push({
+				x: d.timestamp,
+				y: v
+			});
+		}
+		if (pts.length === 0) continue;
+		const ds = downsampleLTTB(pts, Math.ceil(maxPoints / seriesKeys.length));
+		for (const p of ds) timestamps.add(p.x);
+	}
+	return data.filter((d) => timestamps.has(d.timestamp));
+}
+function MetricTimeSeries({ rows, isLoading = false, error, maxDataPoints = 500, showBrush = true, height = 400, unit: unitProp, yAxisLabel, formatTime = defaultFormatTime, formatValue, onBrushChange, legendMaxLength = 30, thresholdLines }) {
+	const [hiddenSeries, setHiddenSeries] = useState(/* @__PURE__ */ new Set());
+	const parsedMetrics = useMemo(() => buildMetrics(rows), [rows]);
+	const effectiveUnit = unitProp ?? parsedMetrics[0]?.unit ?? "";
+	const chartData = useMemo(() => toRechartsData(parsedMetrics), [parsedMetrics]);
+	const seriesKeys = useMemo(() => getSeriesKeys(parsedMetrics), [parsedMetrics]);
+	const displayLabelMap = useMemo(() => buildDisplayLabelMap(parsedMetrics), [parsedMetrics]);
+	const displayData = useMemo(() => downsampleRechartsData(chartData, seriesKeys, maxDataPoints), [
+		chartData,
+		seriesKeys,
+		maxDataPoints
+	]);
+	const { tickFormatter, displayFormatter, resolvedYAxisLabel } = useMemo(() => {
+		let max = 0;
+		for (const dp of displayData) for (const key of seriesKeys) {
+			const v = dp[key];
+			if (v !== void 0 && Math.abs(v) > max) max = Math.abs(v);
+		}
+		const scale = resolveUnitScale(effectiveUnit, max);
+		return {
+			tickFormatter: formatValue ?? ((v) => formatTickValue(v, scale)),
+			displayFormatter: formatValue ?? ((v) => formatDisplayValue(v, scale)),
+			resolvedYAxisLabel: yAxisLabel ?? (scale.label || void 0)
+		};
+	}, [
+		displayData,
+		seriesKeys,
+		effectiveUnit,
+		formatValue,
+		yAxisLabel
+	]);
+	const handleLegendClick = useCallback((dataKey) => {
+		setHiddenSeries((prev) => {
+			const next = new Set(prev);
+			if (next.has(dataKey)) next.delete(dataKey);
+			else next.add(dataKey);
+			return next;
+		});
+	}, []);
+	const handleBrushChange = useCallback((brushData) => {
+		if (!onBrushChange || !displayData.length) return;
+		const { startIndex, endIndex } = brushData;
+		if (startIndex === void 0 || endIndex === void 0) return;
+		const sp = displayData[startIndex], ep = displayData[endIndex];
+		if (sp && ep) onBrushChange(sp.timestamp, ep.timestamp);
+	}, [displayData, onBrushChange]);
+	if (isLoading) return /* @__PURE__ */ jsx(MetricLoadingSkeleton, { height });
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center bg-background rounded-lg border border-red-800",
+		style: { height },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-center p-4",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-red-400 font-medium",
+				children: "Error loading metrics"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-gray-500 text-sm mt-1",
+				children: error.message
+			})]
+		})
 	});
-	if (!sorted.length) return /* @__PURE__ */ jsx("p", {
-		className: "text-muted-foreground py-4",
-		children: "No metrics discovered."
+	if (rows.length === 0 || displayData.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center bg-background rounded-lg border border-gray-800",
+		style: { height },
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-gray-500",
+			children: "No metric data available"
+		})
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: "overflow-x-auto",
-		children: /* @__PURE__ */ jsxs("table", {
-			className: "w-full text-sm text-left text-foreground border-collapse",
-			children: [/* @__PURE__ */ jsx("thead", {
-				className: "text-xs uppercase text-muted-foreground border-b border-border",
-				children: /* @__PURE__ */ jsxs("tr", { children: [
-					/* @__PURE__ */ jsx("th", {
-						className: "px-3 py-2",
-						children: "Name"
+		className: "bg-background rounded-lg p-4",
+		style: { height },
+		"data-testid": "metric-time-series",
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(LineChart, {
+				data: displayData,
+				margin: {
+					top: 5,
+					right: 30,
+					left: 20,
+					bottom: 5
+				},
+				children: [
+					/* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray: "3 3",
+						stroke: "#374151"
 					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "px-3 py-2",
-						children: "Type"
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "timestamp",
+						tickFormatter: formatTime,
+						stroke: "#9CA3AF",
+						tick: {
+							fill: "#9CA3AF",
+							fontSize: 12
+						}
 					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "px-3 py-2",
-						children: "Unit"
+					/* @__PURE__ */ jsx(YAxis, {
+						tickFormatter,
+						stroke: "#9CA3AF",
+						tick: {
+							fill: "#9CA3AF",
+							fontSize: 12
+						},
+						label: resolvedYAxisLabel ? {
+							value: resolvedYAxisLabel,
+							angle: -90,
+							position: "insideLeft",
+							fill: "#9CA3AF"
+						} : void 0
 					}),
-					/* @__PURE__ */ jsx("th", {
-						className: "px-3 py-2",
-						children: "Description"
+					/* @__PURE__ */ jsx(Tooltip, { content: (props) => /* @__PURE__ */ jsx(CustomTooltip, {
+						...props,
+						formatTime,
+						formatValue: displayFormatter,
+						displayLabelMap
+					}) }),
+					/* @__PURE__ */ jsx(Legend, {
+						onClick: (e) => {
+							const dk = e?.dataKey;
+							if (typeof dk === "string") handleLegendClick(dk);
+						},
+						formatter: (value) => {
+							const label = displayLabelMap.get(value) ?? value;
+							const truncated = label.length > legendMaxLength ? label.slice(0, legendMaxLength - 3) + "..." : label;
+							const isHidden = hiddenSeries.has(value);
+							return /* @__PURE__ */ jsx("span", {
+								style: {
+									color: isHidden ? "#6B7280" : "#E5E7EB",
+									textDecoration: isHidden ? "line-through" : "none",
+									cursor: "pointer"
+								},
+								title: truncated !== label ? label : void 0,
+								children: truncated
+							});
+						}
+					}),
+					thresholdLines?.map((t, i) => /* @__PURE__ */ jsx(ReferenceLine, {
+						y: t.value,
+						stroke: t.color,
+						strokeDasharray: getStrokeDashArray(t.style),
+						strokeWidth: 1.5,
+						label: t.label ? {
+							value: t.label,
+							position: "right",
+							fill: t.color,
+							fontSize: 11
+						} : void 0
+					}, `t-${i}`)),
+					seriesKeys.map((key, i) => /* @__PURE__ */ jsx(Line, {
+						type: "monotone",
+						dataKey: key,
+						stroke: COLORS$1[i % COLORS$1.length],
+						strokeWidth: 2,
+						dot: false,
+						activeDot: { r: 4 },
+						hide: hiddenSeries.has(key),
+						connectNulls: true
+					}, key)),
+					showBrush && displayData.length > 10 && /* @__PURE__ */ jsx(Brush, {
+						dataKey: "timestamp",
+						height: 30,
+						stroke: "#6B7280",
+						fill: "#1F2937",
+						tickFormatter: formatTime,
+						onChange: handleBrushChange
 					})
-				] })
-			}), /* @__PURE__ */ jsx("tbody", { children: sorted.map((m) => /* @__PURE__ */ jsxs("tr", {
-				className: "border-b border-border/50 hover:bg-muted/40",
+				]
+			})
+		})
+	});
+}
+function CustomTooltip({ active, payload, label, formatTime, formatValue, displayLabelMap }) {
+	if (!active || !payload || label == null) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-background border border-gray-700 rounded-lg p-3 shadow-lg",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-gray-400 text-xs mb-2",
+			children: formatTime(typeof label === "number" ? label : Number(label))
+		}), payload.map((entry, i) => /* @__PURE__ */ jsxs("p", {
+			className: "text-sm",
+			style: { color: entry.color },
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [displayLabelMap.get(entry.dataKey) ?? entry.dataKey, ":"]
+				}),
+				" ",
+				formatValue(entry.value)
+			]
+		}, i))]
+	});
+}
+function MetricLoadingSkeleton({ height = 400 }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-background rounded-lg p-4 animate-pulse",
+		style: { height },
+		"data-testid": "metric-time-series-loading",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "h-full flex flex-col",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col justify-between w-12",
+					children: [
+						1,
+						2,
+						3,
+						4,
+						5
+					].map((i) => /* @__PURE__ */ jsx("div", { className: "h-3 w-8 bg-gray-700 rounded" }, i))
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex-1 relative",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "absolute inset-0 flex flex-col justify-between",
+						children: [
+							1,
+							2,
+							3,
+							4,
+							5
+						].map((i) => /* @__PURE__ */ jsx("div", { className: "h-px bg-gray-800" }, i))
+					})
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex justify-between mt-2 px-14",
 				children: [
-					/* @__PURE__ */ jsx("td", {
-						className: "px-3 py-2 font-mono whitespace-nowrap",
-						children: m.name
+					1,
+					2,
+					3,
+					4,
+					5
+				].map((i) => /* @__PURE__ */ jsx("div", { className: "h-3 w-12 bg-gray-700 rounded" }, i))
+			})]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/observability/MetricHistogram/index.tsx
+/**
+* MetricHistogram - Accepts OtelMetricsRow[] and renders histogram bar charts.
+*/
+const COLORS = [
+	"#8884d8",
+	"#82ca9d",
+	"#ffc658",
+	"#ff7300",
+	"#00C49F",
+	"#0088FE"
+];
+const defaultFormatBucketLabel = (bound, index, bounds) => {
+	if (index === 0) return `≤${bound}`;
+	if (index === bounds.length) return `>${bounds[bounds.length - 1]}`;
+	return `${bounds[index - 1]}-${bound}`;
+};
+const defaultFormatValue$2 = (value) => {
+	if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+	if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+	return value.toFixed(0);
+};
+function buildHistogramData(rows, formatLabel = defaultFormatBucketLabel) {
+	const buckets = [];
+	const seriesKeysSet = /* @__PURE__ */ new Set();
+	const displayLabelMap = /* @__PURE__ */ new Map();
+	let unit = "";
+	for (const row of rows) {
+		if (row.MetricType !== "Histogram") continue;
+		if (!unit && row.MetricUnit) unit = row.MetricUnit;
+		const name = row.MetricName ?? "count";
+		const key = row.Attributes ? JSON.stringify(row.Attributes) : "__default__";
+		const seriesName = key === "__default__" ? name : key;
+		seriesKeysSet.add(seriesName);
+		if (!displayLabelMap.has(seriesName)) if (key === "__default__") displayLabelMap.set(seriesName, name);
+		else {
+			const labels = {};
+			if (row.Attributes) for (const [k, v] of Object.entries(row.Attributes)) labels[k] = String(v);
+			displayLabelMap.set(seriesName, formatSeriesLabel(labels) || name);
+		}
+		const bounds = row.ExplicitBounds ?? [];
+		const counts = row.BucketCounts ?? [];
+		for (let i = 0; i < counts.length; i++) {
+			const count = counts[i] ?? 0;
+			const bucketLabel = formatLabel(i < bounds.length ? bounds[i] : Infinity, i, bounds);
+			let bucket = buckets.find((b) => b.bucket === bucketLabel);
+			if (!bucket) {
+				bucket = {
+					bucket: bucketLabel,
+					lowerBound: i === 0 ? 0 : bounds[i - 1] ?? 0,
+					upperBound: bounds[i] ?? Infinity
+				};
+				buckets.push(bucket);
+			}
+			bucket[seriesName] = (bucket[seriesName] ?? 0) + count;
+		}
+	}
+	buckets.sort((a, b) => a.lowerBound - b.lowerBound);
+	return {
+		buckets,
+		seriesKeys: Array.from(seriesKeysSet),
+		displayLabelMap,
+		unit
+	};
+}
+function MetricHistogram({ rows, isLoading = false, error, height = 400, unit: unitProp, yAxisLabel, showLegend = true, formatBucketLabel, formatValue = defaultFormatValue$2, labelStyle = "staggered" }) {
+	const bucketLabelFormatter = formatBucketLabel ?? defaultFormatBucketLabel;
+	const { buckets, seriesKeys, displayLabelMap, unit } = useMemo(() => {
+		if (rows.length === 0) return {
+			buckets: [],
+			seriesKeys: [],
+			displayLabelMap: /* @__PURE__ */ new Map(),
+			unit: ""
+		};
+		return buildHistogramData(rows, bucketLabelFormatter);
+	}, [rows, bucketLabelFormatter]);
+	const effectiveUnit = unitProp ?? unit;
+	const boundsScale = useMemo(() => {
+		if (!effectiveUnit || buckets.length === 0) return null;
+		for (let i = buckets.length - 1; i >= 0; i--) if (buckets[i].upperBound !== Infinity) return resolveUnitScale(effectiveUnit, buckets[i].upperBound);
+		return null;
+	}, [effectiveUnit, buckets]);
+	if (isLoading) return /* @__PURE__ */ jsx(HistogramLoadingSkeleton, { height });
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center bg-background rounded-lg border border-red-800",
+		style: { height },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-center p-4",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-red-400 font-medium",
+				children: "Error loading histogram"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-gray-500 text-sm mt-1",
+				children: error.message
+			})]
+		})
+	});
+	if (rows.length === 0 || buckets.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center bg-background rounded-lg border border-gray-800",
+		style: { height },
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-gray-500",
+			children: "No histogram data available"
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-background rounded-lg p-4",
+		style: { height },
+		"data-testid": "metric-histogram",
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(BarChart, {
+				data: buckets,
+				margin: {
+					top: 5,
+					right: 30,
+					left: 20,
+					bottom: 5
+				},
+				children: [
+					/* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray: "3 3",
+						stroke: "#374151"
 					}),
-					/* @__PURE__ */ jsx("td", {
-						className: "px-3 py-2 text-muted-foreground",
-						children: m.type
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "bucket",
+						stroke: "#9CA3AF",
+						tick: labelStyle === "staggered" ? (props) => {
+							if (!props.payload) return /* @__PURE__ */ jsx("g", {});
+							const yOffset = props.payload.index % 2 === 0 ? 0 : 12;
+							return /* @__PURE__ */ jsx("g", {
+								transform: `translate(${props.x},${props.y})`,
+								children: /* @__PURE__ */ jsx("text", {
+									x: 0,
+									y: yOffset,
+									dy: 12,
+									textAnchor: "middle",
+									fill: "#9CA3AF",
+									fontSize: 11,
+									children: props.payload.value
+								})
+							});
+						} : {
+							fill: "#9CA3AF",
+							fontSize: 11
+						},
+						angle: labelStyle === "rotated" ? -45 : 0,
+						textAnchor: labelStyle === "rotated" ? "end" : "middle",
+						height: labelStyle === "staggered" ? 50 : 60,
+						interval: 0
 					}),
-					/* @__PURE__ */ jsx("td", {
-						className: "px-3 py-2 text-muted-foreground",
-						children: m.unit || "–"
+					/* @__PURE__ */ jsx(YAxis, {
+						tickFormatter: formatValue,
+						stroke: "#9CA3AF",
+						tick: {
+							fill: "#9CA3AF",
+							fontSize: 12
+						},
+						label: yAxisLabel ? {
+							value: yAxisLabel,
+							angle: -90,
+							position: "insideLeft",
+							fill: "#9CA3AF"
+						} : void 0
 					}),
-					/* @__PURE__ */ jsx("td", {
-						className: "px-3 py-2 text-muted-foreground",
-						children: m.description || "–"
-					})
+					/* @__PURE__ */ jsx(Tooltip, { content: (props) => /* @__PURE__ */ jsx(HistogramTooltip, {
+						...props,
+						formatValue,
+						boundsScale,
+						displayLabelMap
+					}) }),
+					showLegend && seriesKeys.length > 1 && /* @__PURE__ */ jsx(Legend, { formatter: (value) => displayLabelMap.get(value) ?? value }),
+					seriesKeys.map((key, i) => /* @__PURE__ */ jsx(Bar, {
+						dataKey: key,
+						fill: COLORS[i % COLORS.length],
+						radius: [
+							4,
+							4,
+							0,
+							0
+						],
+						children: buckets.map((_, bi) => /* @__PURE__ */ jsx(Cell, { fill: COLORS[i % COLORS.length] }, `cell-${bi}`))
+					}, key))
 				]
-			}, `${m.name}-${m.type}`)) })]
+			})
+		})
+	});
+}
+function HistogramTooltip({ active, payload, formatValue, boundsScale, displayLabelMap }) {
+	if (!active || !payload?.length) return null;
+	const bucket = payload[0]?.payload;
+	if (!bucket) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-background border border-gray-700 rounded-lg p-3 shadow-lg",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "text-gray-300 text-sm font-medium mb-2",
+			children: ["Bucket: ", boundsScale ? `${formatDisplayValue(bucket.lowerBound, boundsScale)} – ${bucket.upperBound === Infinity ? "∞" : formatDisplayValue(bucket.upperBound, boundsScale)}` : bucket.bucket]
+		}), payload.map((entry, i) => /* @__PURE__ */ jsxs("p", {
+			className: "text-sm",
+			style: { color: entry.color },
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [displayLabelMap.get(entry.dataKey) ?? entry.dataKey, ":"]
+				}),
+				" ",
+				formatValue(entry.value)
+			]
+		}, i))]
+	});
+}
+function HistogramLoadingSkeleton({ height = 400 }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-background rounded-lg p-4 animate-pulse",
+		style: { height },
+		"data-testid": "metric-histogram-loading",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "h-full flex flex-col",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col justify-between w-12",
+					children: [
+						1,
+						2,
+						3,
+						4
+					].map((i) => /* @__PURE__ */ jsx("div", { className: "h-3 w-8 bg-gray-700 rounded" }, i))
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex-1 flex items-end justify-around gap-2 pb-8",
+					children: [
+						30,
+						50,
+						80,
+						65,
+						45,
+						25,
+						15,
+						8
+					].map((h, i) => /* @__PURE__ */ jsx("div", {
+						className: "w-8 bg-gray-700 rounded-t",
+						style: { height: `${h}%` }
+					}, i))
+				})]
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/observability/MetricStat/index.tsx
+/**
+* MetricStat - Accepts OtelMetricsRow[] and renders stat cards with optional sparklines.
+*/
+const THRESHOLD_COLORS = {
+	green: {
+		bg: "bg-green-900/20",
+		border: "border-green-700",
+		text: "text-green-400",
+		stroke: "#4ade80",
+		fill: "#22c55e"
+	},
+	yellow: {
+		bg: "bg-yellow-900/20",
+		border: "border-yellow-700",
+		text: "text-yellow-400",
+		stroke: "#facc15",
+		fill: "#eab308"
+	},
+	red: {
+		bg: "bg-red-900/20",
+		border: "border-red-700",
+		text: "text-red-400",
+		stroke: "#f87171",
+		fill: "#ef4444"
+	},
+	gray: {
+		bg: "bg-background",
+		border: "border-gray-800",
+		text: "text-gray-400",
+		stroke: "#9ca3af",
+		fill: "#6b7280"
+	}
+};
+function getColorConfig(color) {
+	return THRESHOLD_COLORS[color] ?? {
+		bg: "bg-background",
+		border: "border-gray-800",
+		text: "text-gray-400",
+		stroke: color,
+		fill: color
+	};
+}
+function getThresholdColor(value, thresholds) {
+	const sorted = [...thresholds].sort((a, b) => a.value - b.value);
+	for (const t of sorted) if (value < t.value) return t.color;
+	return sorted[sorted.length - 1]?.color ?? "gray";
+}
+const defaultFormatValue$1 = (value, unit) => {
+	let formatted;
+	if (Math.abs(value) >= 1e6) formatted = `${(value / 1e6).toFixed(1)}M`;
+	else if (Math.abs(value) >= 1e3) formatted = `${(value / 1e3).toFixed(1)}K`;
+	else if (Number.isInteger(value)) formatted = value.toString();
+	else formatted = value.toFixed(2);
+	return unit ? `${formatted} ${unit}` : formatted;
+};
+function buildStatData(rows) {
+	let latestTimestamp = 0;
+	let latestValue = null;
+	let unit = "";
+	let metricName = "Metric";
+	const dataPoints = [];
+	for (const row of rows) {
+		if (row.MetricType === "Histogram" || row.MetricType === "ExponentialHistogram" || row.MetricType === "Summary") continue;
+		const timestamp = parseInt(row.TimeUnix, 10) / 1e6;
+		const value = "Value" in row ? row.Value : 0;
+		if (!unit && row.MetricUnit) unit = row.MetricUnit;
+		if (!metricName || metricName === "Metric") metricName = row.MetricName ?? "Metric";
+		dataPoints.push({
+			timestamp,
+			value
+		});
+		if (timestamp > latestTimestamp) {
+			latestTimestamp = timestamp;
+			latestValue = value;
+		}
+	}
+	dataPoints.sort((a, b) => a.timestamp - b.timestamp);
+	return {
+		latestValue,
+		unit,
+		timestamp: latestTimestamp,
+		dataPoints,
+		metricName
+	};
+}
+function MetricStat({ rows, isLoading = false, error, label, formatValue = defaultFormatValue$1, showTimestamp = false, trend, trendValue, className = "", showSparkline = false, sparklinePoints = 20, sparklineHeight = 40, thresholds, colorBackground, colorValue = false }) {
+	const { latestValue, unit, timestamp, dataPoints, metricName } = useMemo(() => buildStatData(rows), [rows]);
+	const sparklineData = useMemo(() => {
+		if (!showSparkline || dataPoints.length === 0) return [];
+		return dataPoints.slice(-sparklinePoints).map((dp) => ({ value: dp.value }));
+	}, [
+		dataPoints,
+		showSparkline,
+		sparklinePoints
+	]);
+	const colorConfig = getColorConfig(useMemo(() => {
+		if (!thresholds || latestValue === null) return "gray";
+		return getThresholdColor(latestValue, thresholds);
+	}, [thresholds, latestValue]));
+	const shouldColorBackground = colorBackground ?? thresholds !== void 0;
+	const displayLabel = label ?? metricName;
+	const bgClass = shouldColorBackground ? colorConfig.bg : "bg-background";
+	const borderClass = shouldColorBackground ? `border ${colorConfig.border}` : "";
+	const valueClass = colorValue ? colorConfig.text : "text-white";
+	if (isLoading) return /* @__PURE__ */ jsxs("div", {
+		className: `bg-background rounded-lg p-4 animate-pulse ${className}`,
+		"data-testid": "metric-stat-loading",
+		children: [/* @__PURE__ */ jsx("div", { className: "h-4 w-24 bg-gray-700 rounded mb-2" }), /* @__PURE__ */ jsx("div", { className: "h-10 w-32 bg-gray-700 rounded" })]
+	});
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: `bg-background rounded-lg p-4 border border-red-800 ${className}`,
+		"data-testid": "metric-stat-error",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-red-400 text-sm",
+			children: error.message
 		})
 	});
+	if (latestValue === null) return /* @__PURE__ */ jsxs("div", {
+		className: `bg-background rounded-lg p-4 border border-gray-800 ${className}`,
+		"data-testid": "metric-stat-empty",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-gray-500 text-sm",
+			children: displayLabel
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-gray-600 text-2xl font-semibold",
+			children: "--"
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${bgClass} ${borderClass} rounded-lg p-4 ${className}`,
+		"data-testid": "metric-stat",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between mb-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-gray-400 text-sm font-medium",
+					children: displayLabel
+				}), trend && /* @__PURE__ */ jsx(TrendIndicator, {
+					direction: trend,
+					value: trendValue
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: `${valueClass} text-3xl font-bold`,
+				children: formatValue(latestValue, unit)
+			}),
+			showTimestamp && /* @__PURE__ */ jsx("p", {
+				className: "text-gray-500 text-xs mt-1",
+				children: new Date(timestamp).toLocaleTimeString()
+			}),
+			showSparkline && sparklineData.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "mt-2",
+				style: { height: sparklineHeight },
+				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(AreaChart, {
+						data: sparklineData,
+						margin: {
+							top: 0,
+							right: 0,
+							left: 0,
+							bottom: 0
+						},
+						children: [/* @__PURE__ */ jsx(YAxis, {
+							domain: ["dataMin", "dataMax"],
+							hide: true
+						}), /* @__PURE__ */ jsx(Area, {
+							type: "monotone",
+							dataKey: "value",
+							stroke: colorConfig.stroke,
+							fill: colorConfig.fill,
+							fillOpacity: .3,
+							strokeWidth: 1.5,
+							isAnimationActive: false
+						})]
+					})
+				})
+			})
+		]
+	});
+}
+function TrendIndicator({ direction, value }) {
+	const colorClass = direction === "up" ? "text-green-400" : direction === "down" ? "text-red-400" : "text-gray-400";
+	const arrow = direction === "up" ? "↑" : direction === "down" ? "↓" : "→";
+	return /* @__PURE__ */ jsxs("span", {
+		className: `text-sm font-medium ${colorClass}`,
+		children: [arrow, value !== void 0 && ` ${Math.abs(value).toFixed(1)}%`]
+	});
+}
+
+//#endregion
+//#region src/components/observability/MetricTable/index.tsx
+/**
+* MetricTable - Accepts OtelMetricsRow[] and renders tabular metric data.
+*/
+const defaultFormatValue = (value) => {
+	if (Number.isInteger(value)) return value.toLocaleString();
+	return value.toFixed(2);
+};
+const defaultFormatTimestamp = (timestamp) => {
+	return new Date(timestamp).toLocaleString();
+};
+function formatLabels(labels) {
+	const entries = Object.entries(labels);
+	if (entries.length === 0) return "-";
+	return entries.map(([k, v]) => `${k}=${v}`).join(", ");
+}
+function buildTableRows(rows, maxRows) {
+	const result = [];
+	for (const row of rows) {
+		if (row.MetricType === "Histogram" || row.MetricType === "ExponentialHistogram" || row.MetricType === "Summary") continue;
+		const timestamp = Number(BigInt(row.TimeUnix) / 1000000n);
+		const value = "Value" in row ? row.Value : 0;
+		const labels = {};
+		if (row.Attributes) for (const [k, v] of Object.entries(row.Attributes)) labels[k] = String(v);
+		const key = row.Attributes ? JSON.stringify(row.Attributes) : "__default__";
+		result.push({
+			id: `${row.MetricName}-${key}-${timestamp}`,
+			timestamp,
+			metricName: row.MetricName ?? "unknown",
+			labels,
+			value,
+			unit: row.MetricUnit ?? ""
+		});
+	}
+	return result.sort((a, b) => b.timestamp - a.timestamp).slice(0, maxRows);
+}
+function MetricTable({ rows, isLoading = false, error, maxRows = 100, formatValue = defaultFormatValue, formatTimestamp = defaultFormatTimestamp, columns = [
+	"timestamp",
+	"metric",
+	"labels",
+	"value"
+], className = "" }) {
+	const tableRows = useMemo(() => buildTableRows(rows, maxRows), [rows, maxRows]);
+	if (isLoading) return /* @__PURE__ */ jsx("div", {
+		className: `bg-background rounded-lg p-4 ${className}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "animate-pulse",
+			"data-testid": "metric-table-loading",
+			children: [/* @__PURE__ */ jsx("div", { className: "h-10 bg-gray-800 rounded mb-2" }), [
+				1,
+				2,
+				3,
+				4,
+				5
+			].map((i) => /* @__PURE__ */ jsx("div", { className: "h-12 bg-gray-800/50 rounded mb-1" }, i))]
+		})
+	});
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: `bg-background rounded-lg p-4 border border-red-800 ${className}`,
+		"data-testid": "metric-table-error",
+		children: /* @__PURE__ */ jsxs("p", {
+			className: "text-red-400",
+			children: ["Error loading metrics: ", error.message]
+		})
+	});
+	if (tableRows.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: `bg-background rounded-lg p-4 border border-gray-800 ${className}`,
+		"data-testid": "metric-table-empty",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-gray-500 text-center py-4",
+			children: "No metric data available"
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: `bg-background rounded-lg overflow-hidden ${className}`,
+		"data-testid": "metric-table",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "overflow-x-auto",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full text-sm",
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+					className: "bg-gray-800 text-gray-300 text-left",
+					children: [
+						columns.includes("timestamp") && /* @__PURE__ */ jsx("th", {
+							className: "px-4 py-3 font-medium",
+							children: "Timestamp"
+						}),
+						columns.includes("metric") && /* @__PURE__ */ jsx("th", {
+							className: "px-4 py-3 font-medium",
+							children: "Metric"
+						}),
+						columns.includes("labels") && /* @__PURE__ */ jsx("th", {
+							className: "px-4 py-3 font-medium",
+							children: "Labels"
+						}),
+						columns.includes("value") && /* @__PURE__ */ jsx("th", {
+							className: "px-4 py-3 font-medium text-right",
+							children: "Value"
+						})
+					]
+				}) }), /* @__PURE__ */ jsx("tbody", {
+					className: "divide-y divide-gray-800",
+					children: tableRows.map((row) => /* @__PURE__ */ jsxs("tr", {
+						className: "hover:bg-gray-800/50 transition-colors",
+						children: [
+							columns.includes("timestamp") && /* @__PURE__ */ jsx("td", {
+								className: "px-4 py-3 text-gray-400 whitespace-nowrap",
+								children: formatTimestamp(row.timestamp)
+							}),
+							columns.includes("metric") && /* @__PURE__ */ jsx("td", {
+								className: "px-4 py-3 text-gray-200 font-mono",
+								children: row.metricName
+							}),
+							columns.includes("labels") && /* @__PURE__ */ jsx("td", {
+								className: "px-4 py-3 text-gray-400 font-mono text-xs",
+								children: formatLabels(row.labels)
+							}),
+							columns.includes("value") && /* @__PURE__ */ jsxs("td", {
+								className: "px-4 py-3 text-white font-medium text-right whitespace-nowrap",
+								children: [formatValue(row.value), row.unit && /* @__PURE__ */ jsx("span", {
+									className: "text-gray-500 ml-1",
+									children: row.unit
+								})]
+							})
+						]
+					}, row.id))
+				})]
+			})
+		}), tableRows.length === maxRows && /* @__PURE__ */ jsxs("div", {
+			className: "px-4 py-2 bg-gray-800 text-gray-500 text-xs text-center",
+			children: [
+				"Showing first ",
+				maxRows,
+				" rows"
+			]
+		})]
+	});
+}
+
+//#endregion
+//#region src/lib/renderer.tsx
+/**
+* Creates a typed Renderer component bound to a catalog and component implementations.
+*
+* @param _catalog - The catalog created via createCatalog (used for type inference)
+* @param components - React component implementations matching catalog definitions
+* @returns A Renderer component that only needs `tree` and optional `fallback`
+*
+* @example
+* ```tsx
+* const DashboardRenderer = createRendererFromCatalog(catalog, {
+*   Card: ({ element, children }) => <div className="card">{children}</div>,
+*   Table: ({ element, data }) => <table>...</table>,
+* });
+*
+* <DashboardRenderer tree={uiTree} />
+* ```
+*/
+function createRendererFromCatalog(_catalog, components) {
+	return function CatalogRenderer({ tree, fallback }) {
+		return /* @__PURE__ */ jsx(Renderer, {
+			tree,
+			registry: components,
+			fallback
+		});
+	};
+}
+/**
+* Wrapper component for elements with dataSource
+*/
+function DataSourceElement({ element, Component, children }) {
+	const [paramsOverride, setParamsOverride] = useState({});
+	const { data, loading, error, refetch } = useKopaiData(useMemo(() => {
+		if (!element.dataSource) return void 0;
+		return {
+			...element.dataSource,
+			params: {
+				...element.dataSource.params,
+				...paramsOverride
+			}
+		};
+	}, [element.dataSource, paramsOverride]));
+	return /* @__PURE__ */ jsx(Component, {
+		element,
+		hasData: true,
+		data,
+		loading,
+		error,
+		refetch,
+		updateParams: useCallback((params) => {
+			setParamsOverride((prev) => ({
+				...prev,
+				...params
+			}));
+		}, []),
+		children
+	});
+}
+/**
+* Internal element renderer - recursively renders elements and children
+*/
+function ElementRenderer({ element, tree, registry, fallback }) {
+	const Component = registry[element.type] ?? fallback;
+	if (!Component) {
+		console.warn(`No renderer for component type: ${element.type}`);
+		return null;
+	}
+	const children = element.children?.map((childKey) => {
+		const childElement = tree.elements[childKey];
+		if (!childElement) return null;
+		return /* @__PURE__ */ jsx(ElementRenderer, {
+			element: childElement,
+			tree,
+			registry,
+			fallback
+		}, childKey);
+	});
+	if (element.dataSource) return /* @__PURE__ */ jsx(DataSourceElement, {
+		element,
+		Component,
+		children
+	});
+	return /* @__PURE__ */ jsx(Component, {
+		element,
+		hasData: false,
+		children
+	});
+}
+/**
+* Renders a UITree using a component registry.
+* Prefer using {@link createRendererFromCatalog} for type-safe rendering.
+*/
+function Renderer({ tree, registry, fallback }) {
+	if (!tree || !tree.root) return null;
+	const rootElement = tree.elements[tree.root];
+	if (!rootElement) return null;
+	return /* @__PURE__ */ jsx(ElementRenderer, {
+		element: rootElement,
+		tree,
+		registry,
+		fallback
+	});
 }
 
 //#endregion
@@ -4339,6 +5450,245 @@ function Text({ element }) {
 	});
 }
 
+//#endregion
+//#region src/components/observability/renderers/OtelLogTimeline.tsx
+function OtelLogTimeline(props) {
+	if (!props.hasData) return /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: 24,
+			color: "var(--muted)"
+		},
+		children: "No data source"
+	});
+	const response = props.data;
+	return /* @__PURE__ */ jsx(LogTimeline, {
+		rows: response?.data ?? [],
+		isLoading: props.loading,
+		error: props.error ?? void 0
+	});
+}
+
+//#endregion
+//#region src/components/observability/renderers/OtelMetricDiscovery.tsx
+const TYPE_ORDER = {
+	Gauge: 0,
+	Sum: 1,
+	Histogram: 2,
+	ExponentialHistogram: 3,
+	Summary: 4
+};
+function OtelMetricDiscovery(props) {
+	const data = props.hasData ? props.data : null;
+	const loading = props.hasData ? props.loading : false;
+	const error = props.hasData ? props.error : null;
+	const sorted = useMemo(() => {
+		if (!data?.metrics) return [];
+		return [...data.metrics].sort((a, b) => a.name.localeCompare(b.name) || (TYPE_ORDER[a.type] ?? 99) - (TYPE_ORDER[b.type] ?? 99));
+	}, [data]);
+	if (loading && !sorted.length) return /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground py-4",
+		children: "Loading metrics…"
+	});
+	if (error) return /* @__PURE__ */ jsxs("p", {
+		className: "text-red-400 py-4",
+		children: ["Error: ", error.message]
+	});
+	if (!sorted.length) return /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground py-4",
+		children: "No metrics discovered."
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "overflow-x-auto",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full text-sm text-left text-foreground border-collapse",
+			children: [/* @__PURE__ */ jsx("thead", {
+				className: "text-xs uppercase text-muted-foreground border-b border-border",
+				children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						className: "px-3 py-2",
+						children: "Name"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "px-3 py-2",
+						children: "Type"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "px-3 py-2",
+						children: "Unit"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						className: "px-3 py-2",
+						children: "Description"
+					})
+				] })
+			}), /* @__PURE__ */ jsx("tbody", { children: sorted.map((m) => /* @__PURE__ */ jsxs("tr", {
+				className: "border-b border-border/50 hover:bg-muted/40",
+				children: [
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-2 font-mono whitespace-nowrap",
+						children: m.name
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-2 text-muted-foreground",
+						children: m.type
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-2 text-muted-foreground",
+						children: m.unit || "–"
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-2 text-muted-foreground",
+						children: m.description || "–"
+					})
+				]
+			}, `${m.name}-${m.type}`)) })]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/observability/renderers/OtelMetricHistogram.tsx
+function OtelMetricHistogram(props) {
+	if (!props.hasData) return /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: 24,
+			color: "var(--muted)"
+		},
+		children: "No data source"
+	});
+	const response = props.data;
+	return /* @__PURE__ */ jsx(MetricHistogram, {
+		rows: response?.data ?? [],
+		isLoading: props.loading,
+		error: props.error ?? void 0,
+		height: props.element.props.height ?? 400,
+		yAxisLabel: props.element.props.yAxisLabel ?? void 0,
+		unit: props.element.props.unit ?? void 0
+	});
+}
+
+//#endregion
+//#region src/components/observability/renderers/OtelMetricStat.tsx
+function OtelMetricStat(props) {
+	if (!props.hasData) return /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: 24,
+			color: "var(--muted)"
+		},
+		children: "No data source"
+	});
+	const response = props.data;
+	return /* @__PURE__ */ jsx(MetricStat, {
+		rows: response?.data ?? [],
+		isLoading: props.loading,
+		error: props.error ?? void 0,
+		label: props.element.props.label ?? void 0,
+		showSparkline: props.element.props.showSparkline ?? false,
+		formatValue: formatOtelValue
+	});
+}
+
+//#endregion
+//#region src/components/observability/renderers/OtelMetricTable.tsx
+function OtelMetricTable(props) {
+	if (!props.hasData) return /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: 24,
+			color: "var(--muted)"
+		},
+		children: "No data source"
+	});
+	const response = props.data;
+	return /* @__PURE__ */ jsx(MetricTable, {
+		rows: response?.data ?? [],
+		isLoading: props.loading,
+		error: props.error ?? void 0,
+		maxRows: props.element.props.maxRows ?? 100
+	});
+}
+
+//#endregion
+//#region src/components/observability/renderers/OtelMetricTimeSeries.tsx
+function OtelMetricTimeSeries(props) {
+	if (!props.hasData) return /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: 24,
+			color: "var(--muted)"
+		},
+		children: "No data source"
+	});
+	const response = props.data;
+	return /* @__PURE__ */ jsx(MetricTimeSeries, {
+		rows: response?.data ?? [],
+		isLoading: props.loading,
+		error: props.error ?? void 0,
+		height: props.element.props.height ?? 400,
+		showBrush: props.element.props.showBrush ?? true,
+		yAxisLabel: props.element.props.yAxisLabel ?? void 0,
+		unit: props.element.props.unit ?? void 0
+	});
+}
+
+//#endregion
+//#region src/components/observability/renderers/OtelTraceDetail.tsx
+function OtelTraceDetail(props) {
+	if (!props.hasData) return /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: 24,
+			color: "var(--muted)"
+		},
+		children: "No data source"
+	});
+	const rows = props.data?.data ?? [];
+	const firstRow = rows[0];
+	const service = firstRow?.ServiceName ?? "unknown";
+	const traceId = firstRow?.TraceId ?? "";
+	return /* @__PURE__ */ jsx(TraceDetail, {
+		rows,
+		isLoading: props.loading,
+		error: props.error ?? void 0,
+		service,
+		traceId,
+		onBack: () => {}
+	});
+}
+
+//#endregion
+//#region src/components/observability/DynamicDashboard/index.tsx
+const MetricsRenderer = createRendererFromCatalog(observabilityCatalog, {
+	Card,
+	Grid,
+	Stack,
+	Heading,
+	Text,
+	Badge,
+	Divider,
+	Empty,
+	LogTimeline: OtelLogTimeline,
+	TraceDetail: OtelTraceDetail,
+	MetricTimeSeries: OtelMetricTimeSeries,
+	MetricHistogram: OtelMetricHistogram,
+	MetricStat: OtelMetricStat,
+	MetricTable: OtelMetricTable,
+	MetricDiscovery: OtelMetricDiscovery
+});
+function DynamicDashboard({ kopaiClient, uiTree }) {
+	return /* @__PURE__ */ jsx(KopaiSDKProvider, {
+		client: kopaiClient,
+		children: /* @__PURE__ */ jsx(MetricsRenderer, { tree: uiTree })
+	});
+}
+
+//#endregion
+//#region src/components/observability/ServiceList/shortcuts.ts
+const SERVICES_SHORTCUTS = {
+	name: "Services",
+	shortcuts: [{
+		keys: ["Backspace"],
+		description: "Go back"
+	}]
+};
+
 //#endregion
 //#region src/pages/observability.tsx
 const TABS = [
@@ -4363,12 +5713,14 @@ function readURLState() {
 	const service = params.get("service");
 	const trace = params.get("trace");
 	const span = params.get("span");
+	const dashboardId = params.get("dashboardId");
 	const rawTab = params.get("tab");
 	return {
 		tab: service ? "services" : rawTab === "logs" || rawTab === "metrics" ? rawTab : "services",
 		service,
 		trace,
-		span
+		span,
+		dashboardId
 	};
 }
 function pushURLState(state, { replace = false } = {}) {
@@ -4377,6 +5729,8 @@ function pushURLState(state, { replace = false } = {}) {
 	if (state.service) params.set("service", state.service);
 	if (state.trace) params.set("trace", state.trace);
 	if (state.span) params.set("span", state.span);
+	const dashboardId = state.dashboardId !== void 0 ? state.dashboardId : new URLSearchParams(window.location.search).get("dashboardId");
+	if (dashboardId) params.set("dashboardId", dashboardId);
 	const qs = params.toString();
 	const url = `${window.location.pathname}${qs ? `?${qs}` : ""}`;
 	if (replace) history.replaceState(null, "", url);
@@ -4392,7 +5746,8 @@ let _cachedState = {
 	tab: "services",
 	service: null,
 	trace: null,
-	span: null
+	span: null,
+	dashboardId: null
 };
 function getURLSnapshot() {
 	const search = window.location.search;
@@ -4740,23 +6095,7 @@ function ServicesTab({ selectedService, selectedTraceId, selectedSpanId, onSelec
 	});
 	return /* @__PURE__ */ jsx(ServiceListView, { onSelect: onSelectService });
 }
-const MetricsRenderer = createRendererFromCatalog(observabilityCatalog, {
-	Card,
-	Grid,
-	Stack,
-	Heading,
-	Text,
-	Badge,
-	Divider,
-	Empty,
-	LogTimeline: () => null,
-	TraceDetail: () => null,
-	MetricTimeSeries: () => null,
-	MetricHistogram: () => null,
-	MetricStat: () => null,
-	MetricTable: () => null,
-	MetricDiscovery: OtelMetricDiscovery
-});
+const DASHBOARDS_API_BASE = "/dashboards";
 const METRICS_TREE = {
 	root: "root",
 	elements: {
@@ -4817,11 +6156,53 @@ const METRICS_TREE = {
 		}
 	}
 };
+function useDashboardTree(dashboardId) {
+	const { data, isFetching, error } = useQuery({
+		queryKey: ["dashboard-tree", dashboardId],
+		queryFn: async ({ signal }) => {
+			const res = await fetch(`${DASHBOARDS_API_BASE}/${dashboardId}`, { signal });
+			if (!res.ok) throw new Error(`Failed to load dashboard: ${res.status}`);
+			const json = await res.json();
+			const parsed = observabilityCatalog.uiTreeSchema.safeParse(json.uiTree);
+			if (!parsed.success) {
+				const issue = parsed.error.issues[0];
+				const path = issue?.path.length ? issue.path.join(".") + ": " : "";
+				throw new Error(`Dashboard has an invalid layout: ${path}${issue?.message}`);
+			}
+			return parsed.data;
+		},
+		enabled: !!dashboardId
+	});
+	return {
+		loading: isFetching,
+		error: error?.message ?? null,
+		tree: data ?? null
+	};
+}
 function MetricsTab() {
-	return /* @__PURE__ */ jsx(MetricsRenderer, { tree: METRICS_TREE });
+	const kopaiClient = useKopaiSDK();
+	const { dashboardId } = useURLState();
+	const { loading, error, tree } = useDashboardTree(dashboardId);
+	if (loading) return /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground text-sm",
+		children: "Loading dashboard..."
+	});
+	if (error) return /* @__PURE__ */ jsxs("p", {
+		className: "text-muted-foreground text-sm",
+		children: ["Error: ", error]
+	});
+	return /* @__PURE__ */ jsx(DynamicDashboard, {
+		kopaiClient,
+		uiTree: tree ?? METRICS_TREE
+	});
+}
+let _defaultClient;
+function getDefaultClient() {
+	_defaultClient ??= new KopaiClient({ baseUrl: "" });
+	return _defaultClient;
 }
-const client = new KopaiClient({ baseUrl: "/signals" });
-function ObservabilityPage() {
+function ObservabilityPage({ client }) {
+	const activeClient = client ?? getDefaultClient();
 	const { tab: activeTab, service: selectedService, trace: selectedTraceId, span: selectedSpanId } = useURLState();
 	const handleTabChange = useCallback((tab) => {
 		pushURLState({ tab });
@@ -4857,7 +6238,7 @@ function ObservabilityPage() {
 		});
 	}, [selectedService]);
 	return /* @__PURE__ */ jsx(KopaiSDKProvider, {
-		client,
+		client: activeClient,
 		children: /* @__PURE__ */ jsx(KeyboardShortcutsProvider, {
 			onNavigateServices: () => pushURLState({ tab: "services" }),
 			onNavigateLogs: () => pushURLState({ tab: "logs" }),
@@ -4923,16 +6304,17 @@ function buildExampleElements(names, components) {
 	for (const name of otherNames) {
 		const key = `${String(name).toLowerCase()}-1`;
 		childKeys.push(key);
-		elements[key] = {
+		const element = {
 			key,
 			type: String(name),
 			props: {},
-			parentKey: containerKey,
-			dataSource: {
-				method: "searchTracesPage",
-				params: { limit: 10 }
-			}
+			parentKey: containerKey
+		};
+		if (!components[name]?.hasChildren) element.dataSource = {
+			method: "searchTracesPage",
+			params: { limit: 10 }
 		};
+		elements[key] = element;
 	}
 	return {
 		root: containerKey,
@@ -4976,7 +6358,7 @@ function buildUnifiedSchema(treeSchema) {
 * const prompt = `Build a dashboard UI.\n\n${instructions}`;
 * ```
 */
-function generatePromptInstructions(catalog) {
+function generatePromptInstructions(catalog, uiTreeVersion) {
 	const componentNames = Object.keys(catalog.components);
 	const componentSections = componentNames.map((name) => {
 		const def = catalog.components[name];
@@ -4991,7 +6373,13 @@ ${roleLine}`;
 	}).join("\n\n---\n\n");
 	const unifiedSchema = buildUnifiedSchema(catalog.uiTreeSchema);
 	const exampleElements = buildExampleElements(componentNames, catalog.components);
-	return `## Available Components
+	return `## UI Tree Version
+
+Use uiTreeVersion: "${uiTreeVersion}" when creating dashboards.
+
+---
+
+## Available Components
 
 ${componentSections}
 
@@ -5009,5 +6397,5 @@ ${JSON.stringify(exampleElements)}`;
 }
 
 //#endregion
-export { KopaiSDKProvider, ObservabilityPage, Renderer, createCatalog, createRendererFromCatalog, generatePromptInstructions, useKopaiSDK };
+export { KopaiSDKProvider, ObservabilityPage, Renderer, createCatalog, createRendererFromCatalog, generatePromptInstructions, observabilityCatalog, useKopaiSDK };
 //# sourceMappingURL=index.mjs.map