@kopai/ui 0.8.0 → 0.9.0

package/dist/index.mjs

@@ -2,12 +2,11 @@ import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRe
 import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { KopaiClient } from "@kopai/sdk";
-import z$1, { z } from "zod";
+import { z } from "zod";
 import { dataFilterSchemas } from "@kopai/core";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { Area, AreaChart, Bar, BarChart, Brush, CartesianGrid, Cell, Legend, Line, LineChart, ReferenceLine, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis } from "recharts";
 import { createPortal } from "react-dom";
-import { Area, AreaChart, Bar, BarChart, Brush, CartesianGrid, Cell, Legend, Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-
+import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/providers/kopai-provider.tsx
 const KopaiSDKContext = createContext(null);
 const queryClient = new QueryClient({ defaultOptions: { queries: {
@@ -29,7 +28,6 @@ function useKopaiSDK() {
 	if (!ctx) throw new Error("useKopaiSDK must be used within KopaiSDKProvider");
 	return ctx.client;
 }
-
 //#endregion
 //#region src/hooks/use-kopai-data.ts
 function fetchForDataSource(client, dataSource, signal) {
@@ -39,6 +37,9 @@ function fetchForDataSource(client, dataSource, signal) {
 		case "searchMetricsPage": return client.searchMetricsPage(dataSource.params, { signal });
 		case "getTrace": return client.getTrace(dataSource.params.traceId, { signal });
 		case "discoverMetrics": return client.discoverMetrics({ signal });
+		case "getServices": return client.getServices({ signal });
+		case "getOperations": return client.getOperations(dataSource.params.serviceName, { signal });
+		case "searchTraceSummariesPage": return client.searchTraceSummariesPage(dataSource.params, { signal });
 		default: {
 			const exhaustiveCheck = dataSource;
 			throw new Error(`Unknown method: ${exhaustiveCheck.method}`);
@@ -64,7 +65,6 @@ function useKopaiData(dataSource) {
 		refetch
 	};
 }
-
 //#endregion
 //#region src/lib/log-buffer.ts
 function logKey(row) {
@@ -116,7 +116,6 @@ var LogBuffer = class {
 		this.keys.clear();
 	}
 };
-
 //#endregion
 //#region src/hooks/use-live-logs.ts
 function useLiveLogs({ params, pollIntervalMs = 3e3, maxLogs = 1e3, enabled = true }) {
@@ -171,7 +170,6 @@ function useLiveLogs({ params, pollIntervalMs = 3e3, maxLogs = 1e3, enabled = tr
 		setLive
 	};
 }
-
 //#endregion
 //#region src/lib/component-catalog.ts
 const dataSourceSchema = z.discriminatedUnion("method", [
@@ -199,6 +197,21 @@ const dataSourceSchema = z.discriminatedUnion("method", [
 		method: z.literal("discoverMetrics"),
 		params: z.object({}).optional(),
 		refetchIntervalMs: z.number().optional()
+	}),
+	z.object({
+		method: z.literal("getServices"),
+		params: z.object({}).optional(),
+		refetchIntervalMs: z.number().optional()
+	}),
+	z.object({
+		method: z.literal("getOperations"),
+		params: z.object({ serviceName: z.string() }),
+		refetchIntervalMs: z.number().optional()
+	}),
+	z.object({
+		method: z.literal("searchTraceSummariesPage"),
+		params: dataFilterSchemas.traceSummariesFilterSchema,
+		refetchIntervalMs: z.number().optional()
 	})
 ]);
 const componentDefinitionSchema = z.object({
@@ -206,7 +219,7 @@ const componentDefinitionSchema = z.object({
 	description: z.string().describe("Component description to be displayed by the prompt generator"),
 	props: z.unknown()
 }).describe("All options and properties necessary to render the React component with renderer");
-const catalogConfigSchema = z.object({
+z.object({
 	name: z.string().describe("catalog name"),
 	components: z.record(z.string().describe("React component name"), componentDefinitionSchema)
 });
@@ -253,7 +266,6 @@ function createCatalog(catalogConfig) {
 		uiTreeSchema
 	};
 }
-
 //#endregion
 //#region src/lib/observability-catalog.ts
 const observabilityCatalog = createCatalog({
@@ -412,7 +424,6 @@ const observabilityCatalog = createCatalog({
 		}
 	}
 });
-
 //#endregion
 //#region src/components/observability/TabBar/index.tsx
 function renderLabel(label, shortcutKey) {
@@ -441,7 +452,6 @@ function TabBar({ tabs, active, onChange }) {
 		}, t.key))
 	});
 }
-
 //#endregion
 //#region src/components/observability/utils/colors.ts
 /**
@@ -461,38 +471,6 @@ function getSpanBarColor(serviceName, isError) {
 	if (isError) return ERROR_COLOR;
 	return getServiceColor(serviceName);
 }
-
-//#endregion
-//#region src/components/observability/ServiceList/index.tsx
-function ServiceList({ services, isLoading, error, onSelect }) {
-	if (isLoading) return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2 text-muted-foreground py-8",
-		children: [/* @__PURE__ */ jsx("div", { className: "w-4 h-4 border-2 border-muted-foreground border-t-transparent rounded-full animate-spin" }), "Loading services..."]
-	});
-	if (error) return /* @__PURE__ */ jsxs("div", {
-		className: "text-red-400 py-4",
-		children: ["Error loading services: ", error.message]
-	});
-	if (services.length === 0) return /* @__PURE__ */ jsx("div", {
-		className: "text-muted-foreground py-8",
-		children: "No services found"
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "space-y-1",
-		children: services.map((svc) => /* @__PURE__ */ jsx("button", {
-			onClick: () => onSelect(svc.name),
-			className: "w-full text-left px-4 py-3 rounded-lg border border-border hover:border-foreground/30 hover:bg-muted/50 transition-colors group",
-			children: /* @__PURE__ */ jsxs("span", {
-				className: "flex items-center gap-2 font-medium text-foreground",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "inline-block w-2.5 h-2.5 rounded-full shrink-0",
-					style: { backgroundColor: getServiceColor(svc.name) }
-				}), svc.name]
-			})
-		}, svc.name))
-	});
-}
-
 //#endregion
 //#region src/components/observability/utils/time.ts
 /**
@@ -514,6 +492,10 @@ function formatTimestamp$1(timestampMs) {
 		timeZoneName: "short"
 	});
 }
+function formatRelativeTime$1(eventTimeMs, spanStartMs) {
+	const relativeMs = eventTimeMs - spanStartMs;
+	return `${relativeMs < 0 ? "-" : "+"}${formatDuration(Math.abs(relativeMs))}`;
+}
 function calculateRelativeTime(timeMs, minTimeMs, maxTimeMs) {
 	const totalDuration = maxTimeMs - minTimeMs;
 	if (totalDuration === 0) return 0;
@@ -523,259 +505,556 @@ function calculateRelativeDuration(durationMs, totalDurationMs) {
 	if (totalDurationMs === 0) return 0;
 	return durationMs / totalDurationMs;
 }
-
 //#endregion
-//#region src/components/observability/TraceSearch/index.tsx
+//#region src/components/observability/TraceSearch/SearchForm.tsx
+/**
+* SearchForm - Jaeger-style sidebar search form for trace filtering.
+* Owns its own form state; parent only receives values on submit.
+*/
 const LOOKBACK_OPTIONS$1 = [
 	{
 		label: "Last 5 Minutes",
-		ms: 5 * 6e4
+		value: "5m"
 	},
 	{
 		label: "Last 15 Minutes",
-		ms: 15 * 6e4
+		value: "15m"
 	},
 	{
 		label: "Last 30 Minutes",
-		ms: 30 * 6e4
+		value: "30m"
 	},
 	{
 		label: "Last 1 Hour",
-		ms: 60 * 6e4
+		value: "1h"
 	},
 	{
 		label: "Last 2 Hours",
-		ms: 120 * 6e4
+		value: "2h"
 	},
 	{
 		label: "Last 6 Hours",
-		ms: 360 * 6e4
+		value: "6h"
 	},
 	{
 		label: "Last 12 Hours",
-		ms: 720 * 6e4
+		value: "12h"
 	},
 	{
 		label: "Last 24 Hours",
-		ms: 1440 * 6e4
+		value: "24h"
 	}
 ];
-function TraceSearch({ service, traces, operations = [], isLoading, error, onSelectTrace, onBack, onSearch }) {
-	const [operation, setOperation] = useState("all");
-	const [lookbackIdx, setLookbackIdx] = useState(-1);
-	const [minDuration, setMinDuration] = useState("");
-	const [maxDuration, setMaxDuration] = useState("");
-	const [limit, setLimit] = useState(20);
-	const [filtersOpen, setFiltersOpen] = useState(true);
-	const handleFindTraces = () => {
-		onSearch?.({
-			operation: operation !== "all" ? operation : void 0,
-			lookbackMs: lookbackIdx >= 0 ? LOOKBACK_OPTIONS$1[lookbackIdx].ms : void 0,
-			minDuration: minDuration || void 0,
-			maxDuration: maxDuration || void 0,
+const inputClass = "w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground";
+function SearchForm({ services, operations, initialValues, onSubmit, isLoading }) {
+	const [service, setService] = useState(initialValues?.service ?? "");
+	const [operation, setOperation] = useState(initialValues?.operation ?? "");
+	const [tags, setTags] = useState(initialValues?.tags ?? "");
+	const [lookback, setLookback] = useState(initialValues?.lookback ?? "");
+	const [minDuration, setMinDuration] = useState(initialValues?.minDuration ?? "");
+	const [maxDuration, setMaxDuration] = useState(initialValues?.maxDuration ?? "");
+	const [limit, setLimit] = useState(initialValues?.limit ?? 20);
+	useEffect(() => {
+		if (initialValues?.service != null) setService(initialValues.service);
+	}, [initialValues?.service]);
+	const handleSubmit = () => {
+		onSubmit({
+			service,
+			operation,
+			tags,
+			lookback,
+			minDuration,
+			maxDuration,
 			limit
 		});
 	};
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-1.5 text-sm text-muted-foreground mb-4",
-			children: [
-				/* @__PURE__ */ jsx("button", {
-					onClick: onBack,
-					className: "hover:text-foreground transition-colors",
-					children: "Services"
-				}),
-				/* @__PURE__ */ jsx("span", { children: "/" }),
-				/* @__PURE__ */ jsx("span", {
-					className: "text-foreground",
-					children: service
-				})
-			]
-		}),
-		onSearch && /* @__PURE__ */ jsxs("div", {
-			className: "border border-border rounded-lg mb-4",
-			children: [/* @__PURE__ */ jsxs("button", {
-				onClick: () => setFiltersOpen((v) => !v),
-				className: "w-full flex items-center justify-between px-4 py-2.5 text-sm font-medium text-foreground hover:bg-muted/30 transition-colors",
-				children: [/* @__PURE__ */ jsx("span", { children: "Filters" }), /* @__PURE__ */ jsx("span", {
-					className: "text-muted-foreground text-xs",
-					children: filtersOpen ? "▲" : "▼"
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-semibold text-foreground uppercase tracking-wider",
+				children: "Search"
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "block space-y-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: "Service"
+				}), /* @__PURE__ */ jsxs("select", {
+					value: service,
+					onChange: (e) => setService(e.target.value),
+					className: inputClass,
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: "All Services"
+					}), services.map((s) => /* @__PURE__ */ jsx("option", {
+						value: s,
+						children: s
+					}, s))]
 				})]
-			}), filtersOpen && /* @__PURE__ */ jsxs("div", {
-				className: "px-4 pb-4 pt-1 border-t border-border space-y-3",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "grid grid-cols-2 md:grid-cols-3 gap-3",
-					children: [
-						/* @__PURE__ */ jsxs("label", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
-								children: "Operation"
-							}), /* @__PURE__ */ jsxs("select", {
-								value: operation,
-								onChange: (e) => setOperation(e.target.value),
-								className: "w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground",
-								children: [/* @__PURE__ */ jsx("option", {
-									value: "all",
-									children: "All"
-								}), operations.map((op) => /* @__PURE__ */ jsx("option", {
-									value: op,
-									children: op
-								}, op))]
-							})]
-						}),
-						/* @__PURE__ */ jsxs("label", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
-								children: "Lookback"
-							}), /* @__PURE__ */ jsxs("select", {
-								value: lookbackIdx,
-								onChange: (e) => setLookbackIdx(Number(e.target.value)),
-								className: "w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground",
-								children: [/* @__PURE__ */ jsx("option", {
-									value: -1,
-									children: "All time"
-								}), LOOKBACK_OPTIONS$1.map((opt, i) => /* @__PURE__ */ jsx("option", {
-									value: i,
-									children: opt.label
-								}, i))]
-							})]
-						}),
-						/* @__PURE__ */ jsxs("label", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
-								children: "Limit"
-							}), /* @__PURE__ */ jsx("input", {
-								type: "number",
-								min: 1,
-								max: 1e3,
-								value: limit,
-								onChange: (e) => {
-									const n = Number(e.target.value);
-									setLimit(Number.isNaN(n) ? 20 : Math.max(1, Math.min(1e3, n)));
-								},
-								className: "w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground"
-							})]
-						}),
-						/* @__PURE__ */ jsxs("label", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
-								children: "Min Duration"
-							}), /* @__PURE__ */ jsx("input", {
-								type: "text",
-								placeholder: "e.g. 100ms",
-								value: minDuration,
-								onChange: (e) => setMinDuration(e.target.value),
-								className: "w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground/50"
-							})]
-						}),
-						/* @__PURE__ */ jsxs("label", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
-								children: "Max Duration"
-							}), /* @__PURE__ */ jsx("input", {
-								type: "text",
-								placeholder: "e.g. 5s",
-								value: maxDuration,
-								onChange: (e) => setMaxDuration(e.target.value),
-								className: "w-full bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground/50"
-							})]
-						})
-					]
-				}), /* @__PURE__ */ jsx("button", {
-					onClick: handleFindTraces,
-					className: "px-4 py-1.5 text-sm font-medium bg-foreground text-background rounded hover:bg-foreground/90 transition-colors",
-					children: "Find Traces"
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "block space-y-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: "Operation"
+				}), /* @__PURE__ */ jsxs("select", {
+					value: operation,
+					onChange: (e) => setOperation(e.target.value),
+					className: inputClass,
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: "All Operations"
+					}), operations.map((op) => /* @__PURE__ */ jsx("option", {
+						value: op,
+						children: op
+					}, op))]
 				})]
-			})]
-		}),
-		isLoading && /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 text-muted-foreground py-8",
-			children: [/* @__PURE__ */ jsx("div", { className: "w-4 h-4 border-2 border-muted-foreground border-t-transparent rounded-full animate-spin" }), "Loading traces..."]
-		}),
-		error && /* @__PURE__ */ jsxs("div", {
-			className: "text-red-400 py-4",
-			children: ["Error loading traces: ", error.message]
-		}),
-		!isLoading && !error && traces.length === 0 && /* @__PURE__ */ jsxs("div", {
-			className: "text-muted-foreground py-8",
-			children: ["No traces found for ", service]
-		}),
-		traces.length > 0 && /* @__PURE__ */ jsx("div", {
-			className: "space-y-2",
-			children: traces.map((t) => /* @__PURE__ */ jsxs("div", {
-				onClick: () => onSelectTrace(t.traceId),
-				className: "border border-border rounded-lg px-4 py-3 hover:border-foreground/30 hover:bg-muted/30 cursor-pointer transition-colors",
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "block space-y-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: "Tags"
+				}), /* @__PURE__ */ jsx("textarea", {
+					value: tags,
+					onChange: (e) => setTags(e.target.value),
+					placeholder: "key=value key2=\"quoted value\"",
+					rows: 3,
+					className: `${inputClass} placeholder:text-muted-foreground/50 resize-y`
+				})]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "block space-y-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: "Lookback"
+				}), /* @__PURE__ */ jsxs("select", {
+					value: lookback,
+					onChange: (e) => setLookback(e.target.value),
+					className: inputClass,
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: "All time"
+					}), LOOKBACK_OPTIONS$1.map((opt) => /* @__PURE__ */ jsx("option", {
+						value: opt.value,
+						children: opt.label
+					}, opt.value))]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-2 gap-2",
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "block space-y-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground",
+						children: "Min Duration"
+					}), /* @__PURE__ */ jsx("input", {
+						type: "text",
+						placeholder: "e.g. 100ms",
+						value: minDuration,
+						onChange: (e) => setMinDuration(e.target.value),
+						className: `${inputClass} placeholder:text-muted-foreground/50`
+					})]
+				}), /* @__PURE__ */ jsxs("label", {
+					className: "block space-y-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground",
+						children: "Max Duration"
+					}), /* @__PURE__ */ jsx("input", {
+						type: "text",
+						placeholder: "e.g. 5s",
+						value: maxDuration,
+						onChange: (e) => setMaxDuration(e.target.value),
+						className: `${inputClass} placeholder:text-muted-foreground/50`
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "block space-y-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: "Limit"
+				}), /* @__PURE__ */ jsx("input", {
+					type: "number",
+					min: 1,
+					max: 1e3,
+					value: limit,
+					onChange: (e) => {
+						const n = Number(e.target.value);
+						setLimit(Number.isNaN(n) ? 20 : Math.max(1, Math.min(1e3, n)));
+					},
+					className: inputClass
+				})]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: handleSubmit,
+				disabled: isLoading,
+				className: "w-full px-4 py-2 text-sm font-medium bg-foreground text-background rounded hover:bg-foreground/90 transition-colors disabled:opacity-50",
+				children: isLoading ? "Searching..." : "Find Traces"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/observability/TraceSearch/ScatterPlot.tsx
+/**
+* ScatterPlot - Scatter chart showing trace duration vs timestamp.
+*/
+function CustomTooltip$1({ active, payload }) {
+	if (!active || !payload?.[0]) return null;
+	const d = payload[0].payload;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-background border border-border rounded px-3 py-2 text-xs shadow-lg",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "font-medium text-foreground",
 				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-baseline justify-between gap-2",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-baseline gap-1.5 min-w-0",
-							children: [/* @__PURE__ */ jsxs("span", {
-								className: "font-medium text-foreground truncate",
-								children: [
-									t.serviceName,
-									": ",
-									t.rootSpanName
-								]
-							}), /* @__PURE__ */ jsx("span", {
-								className: "text-xs font-mono text-muted-foreground shrink-0",
-								children: t.traceId.slice(0, 7)
-							})]
-						}), /* @__PURE__ */ jsx("span", {
-							className: "text-sm text-foreground/80 shrink-0",
-							children: formatDuration(t.durationMs)
-						})]
+					d.serviceName,
+					": ",
+					d.rootSpanName
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground mt-1",
+				children: [
+					d.spanCount,
+					" span",
+					d.spanCount !== 1 ? "s" : "",
+					" ·",
+					" ",
+					formatDuration(d.y)
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground",
+				children: formatTimestamp$1(d.x)
+			})
+		]
+	});
+}
+function ScatterPlot({ traces, onSelectTrace }) {
+	const data = useMemo(() => traces.map((t) => ({
+		x: t.timestampMs,
+		y: t.durationMs,
+		traceId: t.traceId,
+		serviceName: t.serviceName,
+		rootSpanName: t.rootSpanName,
+		spanCount: t.spanCount,
+		hasError: t.errorCount > 0
+	})), [traces]);
+	const handleClick = useCallback((entry) => {
+		const payload = entry?.payload;
+		if (payload?.traceId) onSelectTrace(payload.traceId);
+	}, [onSelectTrace]);
+	if (traces.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "border border-border rounded-lg p-4 bg-background",
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: 200,
+			children: /* @__PURE__ */ jsxs(ScatterChart, {
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 4,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray: "3 3",
+						stroke: "hsl(var(--border))",
+						opacity: .4
 					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center flex-wrap gap-1.5 mt-1.5",
-						children: [
-							/* @__PURE__ */ jsxs("span", {
-								className: "text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground",
-								children: [
-									t.spanCount,
-									" Span",
-									t.spanCount !== 1 ? "s" : ""
-								]
-							}),
-							t.errorCount > 0 && /* @__PURE__ */ jsxs("span", {
-								className: "text-xs px-1.5 py-0.5 rounded bg-red-500/20 text-red-400",
-								children: [
-									t.errorCount,
-									" Error",
-									t.errorCount !== 1 ? "s" : ""
-								]
-							}),
-							t.services.map((svc) => /* @__PURE__ */ jsxs("span", {
-								className: "inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded",
-								style: {
-									backgroundColor: `${getServiceColor(svc.name)}20`,
-									color: getServiceColor(svc.name)
-								},
-								children: [
-									svc.hasError && /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-red-500 shrink-0" }),
-									svc.name,
-									" (",
-									svc.count,
-									")"
-								]
-							}, svc.name))
-						]
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "x",
+						type: "number",
+						domain: ["dataMin", "dataMax"],
+						tickFormatter: (v) => {
+							const d = new Date(v);
+							return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`;
+						},
+						tick: {
+							fontSize: 11,
+							fill: "hsl(var(--muted-foreground))"
+						},
+						stroke: "hsl(var(--border))",
+						name: "Time"
 					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "text-xs text-muted-foreground mt-1 text-right",
-						children: formatTimestamp$1(t.timestampMs)
+					/* @__PURE__ */ jsx(YAxis, {
+						dataKey: "y",
+						type: "number",
+						tickFormatter: (v) => formatDuration(v),
+						tick: {
+							fontSize: 11,
+							fill: "hsl(var(--muted-foreground))"
+						},
+						stroke: "hsl(var(--border))",
+						name: "Duration",
+						width: 70
+					}),
+					/* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip$1, {}) }),
+					/* @__PURE__ */ jsx(Scatter, {
+						data,
+						onClick: handleClick,
+						cursor: "pointer",
+						children: data.map((point, i) => /* @__PURE__ */ jsx(Cell, {
+							fill: point.hasError ? "#ef4444" : getServiceColor(point.serviceName),
+							stroke: point.hasError ? "#ef4444" : "none",
+							strokeWidth: point.hasError ? 2 : 0
+						}, i))
 					})
 				]
-			}, t.traceId))
+			})
 		})
-	] });
+	});
+}
+//#endregion
+//#region src/components/observability/TraceSearch/SortDropdown.tsx
+const SORT_OPTIONS = [
+	{
+		value: "recent",
+		label: "Most Recent"
+	},
+	{
+		value: "longest",
+		label: "Longest First"
+	},
+	{
+		value: "shortest",
+		label: "Shortest First"
+	},
+	{
+		value: "mostSpans",
+		label: "Most Spans"
+	},
+	{
+		value: "leastSpans",
+		label: "Least Spans"
+	}
+];
+function SortDropdown({ value, onChange }) {
+	return /* @__PURE__ */ jsx("select", {
+		value,
+		onChange: (e) => onChange(e.target.value),
+		className: "bg-muted/50 border border-border rounded px-2 py-1.5 text-sm text-foreground",
+		children: SORT_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", {
+			value: opt.value,
+			children: opt.label
+		}, opt.value))
+	});
+}
+//#endregion
+//#region src/components/observability/TraceSearch/DurationBar.tsx
+/**
+* DurationBar - Horizontal bar showing relative trace duration.
+*/
+function DurationBar({ durationMs, maxDurationMs, color }) {
+	const rawPct = maxDurationMs > 0 ? durationMs / maxDurationMs * 100 : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex-1 h-2 bg-muted/30 rounded overflow-hidden",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "h-full rounded",
+				style: {
+					width: `${durationMs <= 0 ? 0 : Math.min(Math.max(rawPct, 1), 100)}%`,
+					backgroundColor: color,
+					opacity: .7
+				}
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-foreground/80 shrink-0 w-16 text-right font-mono",
+			children: formatDuration(durationMs)
+		})]
+	});
+}
+//#endregion
+//#region src/components/observability/TraceSearch/index.tsx
+function sortTraces(traces, sort) {
+	const sorted = [...traces];
+	switch (sort) {
+		case "longest": return sorted.sort((a, b) => b.durationMs - a.durationMs);
+		case "shortest": return sorted.sort((a, b) => a.durationMs - b.durationMs);
+		case "mostSpans": return sorted.sort((a, b) => b.spanCount - a.spanCount);
+		case "leastSpans": return sorted.sort((a, b) => a.spanCount - b.spanCount);
+		default: return sorted.sort((a, b) => b.timestampMs - a.timestampMs);
+	}
+}
+function TraceSearch({ services = [], service, operations = [], traces, isLoading, error, onSelectTrace, onSearch, onCompare, sort: controlledSort, onSortChange }) {
+	const [internalSort, setInternalSort] = useState("recent");
+	const currentSort = controlledSort ?? internalSort;
+	const handleSortChange = (s) => {
+		if (onSortChange) onSortChange(s);
+		else setInternalSort(s);
+	};
+	const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+	const toggleSelected = (traceId) => {
+		setSelected((prev) => {
+			const next = new Set(prev);
+			if (next.has(traceId)) next.delete(traceId);
+			else {
+				if (next.size >= 2) return prev;
+				next.add(traceId);
+			}
+			return next;
+		});
+	};
+	const handleFormSubmit = (values) => {
+		onSearch?.({
+			service: values.service || void 0,
+			operation: values.operation || void 0,
+			tags: values.tags || void 0,
+			lookback: values.lookback || void 0,
+			minDuration: values.minDuration || void 0,
+			maxDuration: values.maxDuration || void 0,
+			limit: values.limit
+		});
+	};
+	const sortedTraces = useMemo(() => sortTraces(traces, currentSort), [traces, currentSort]);
+	const maxDurationMs = useMemo(() => Math.max(...traces.map((t) => t.durationMs), 0), [traces]);
+	const selectedArr = Array.from(selected);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-6 min-h-0",
+		children: [onSearch && /* @__PURE__ */ jsx("div", {
+			className: "w-72 shrink-0 border border-border rounded-lg p-4 self-start",
+			children: /* @__PURE__ */ jsx(SearchForm, {
+				services,
+				operations,
+				initialValues: { service },
+				onSubmit: handleFormSubmit,
+				isLoading
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-w-0 space-y-4",
+			children: [
+				traces.length > 0 && /* @__PURE__ */ jsx(ScatterPlot, {
+					traces,
+					onSelectTrace
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							traces.length,
+							" Trace",
+							traces.length !== 1 ? "s" : ""
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [onCompare && selected.size === 2 && /* @__PURE__ */ jsx("button", {
+							onClick: () => onCompare(selectedArr),
+							className: "px-3 py-1.5 text-xs font-medium bg-foreground text-background rounded hover:bg-foreground/90 transition-colors",
+							children: "Compare"
+						}), /* @__PURE__ */ jsx(SortDropdown, {
+							value: currentSort,
+							onChange: handleSortChange
+						})]
+					})]
+				}),
+				isLoading && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-muted-foreground py-8",
+					children: [/* @__PURE__ */ jsx("div", { className: "w-4 h-4 border-2 border-muted-foreground border-t-transparent rounded-full animate-spin" }), "Loading traces..."]
+				}),
+				error && /* @__PURE__ */ jsxs("div", {
+					className: "text-red-400 py-4",
+					children: ["Error loading traces: ", error.message]
+				}),
+				!isLoading && !error && traces.length === 0 && /* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground py-8",
+					children: "No traces found"
+				}),
+				sortedTraces.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "space-y-2",
+					children: sortedTraces.map((t) => /* @__PURE__ */ jsx("div", {
+						className: "border border-border rounded-lg px-4 py-3 hover:border-foreground/30 hover:bg-muted/30 cursor-pointer transition-colors",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [onCompare && /* @__PURE__ */ jsx("input", {
+								type: "checkbox",
+								checked: selected.has(t.traceId),
+								onChange: () => toggleSelected(t.traceId),
+								onClick: (e) => e.stopPropagation(),
+								className: "shrink-0",
+								disabled: !selected.has(t.traceId) && selected.size >= 2
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex-1 min-w-0",
+								onClick: () => onSelectTrace(t.traceId),
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "flex items-baseline justify-between gap-2",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "flex items-baseline gap-1.5 min-w-0",
+											children: [/* @__PURE__ */ jsxs("span", {
+												className: "font-medium text-foreground truncate",
+												children: [
+													t.serviceName,
+													": ",
+													t.rootSpanName
+												]
+											}), /* @__PURE__ */ jsx("span", {
+												className: "text-xs font-mono text-muted-foreground shrink-0",
+												children: t.traceId.slice(0, 7)
+											})]
+										})
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "mt-1.5",
+										children: /* @__PURE__ */ jsx(DurationBar, {
+											durationMs: t.durationMs,
+											maxDurationMs,
+											color: getServiceColor(t.serviceName)
+										})
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center flex-wrap gap-1.5 mt-1.5",
+										children: [
+											/* @__PURE__ */ jsxs("span", {
+												className: "text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground",
+												children: [
+													t.spanCount,
+													" Span",
+													t.spanCount !== 1 ? "s" : ""
+												]
+											}),
+											t.errorCount > 0 && /* @__PURE__ */ jsxs("span", {
+												className: "text-xs px-1.5 py-0.5 rounded bg-red-500/20 text-red-400",
+												children: [
+													t.errorCount,
+													" Error",
+													t.errorCount !== 1 ? "s" : ""
+												]
+											}),
+											t.services.map((svc) => /* @__PURE__ */ jsxs("span", {
+												className: "inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded",
+												style: {
+													backgroundColor: `${getServiceColor(svc.name)}20`,
+													color: getServiceColor(svc.name)
+												},
+												children: [
+													svc.hasError && /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-red-500 shrink-0" }),
+													svc.name,
+													" (",
+													svc.count,
+													")"
+												]
+											}, svc.name))
+										]
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "text-xs text-muted-foreground mt-1 text-right",
+										children: formatTimestamp$1(t.timestampMs)
+									})
+								]
+							})]
+						})
+					}, t.traceId))
+				})
+			]
+		})]
+	});
 }
-
 //#endregion
 //#region src/components/observability/utils/flatten-tree.ts
 function flattenTree(rootSpans, collapsedIds) {
@@ -790,6 +1069,17 @@ function flattenTree(rootSpans, collapsedIds) {
 	rootSpans.forEach((root) => traverse(root, 0));
 	return result;
 }
+/** Flatten all spans (ignoring collapse state) with depth. */
+function flattenAllSpans(rootSpans) {
+	return flattenTree(rootSpans, /* @__PURE__ */ new Set());
+}
+function spanMatchesSearch(span, query) {
+	const q = query.toLowerCase();
+	if (span.name.toLowerCase().includes(q)) return true;
+	if (span.serviceName.toLowerCase().includes(q)) return true;
+	for (const val of Object.values(span.attributes)) if (String(val).toLowerCase().includes(q)) return true;
+	return false;
+}
 function getAllSpanIds(rootSpans) {
 	const ids = [];
 	function traverse(span) {
@@ -799,15 +1089,26 @@ function getAllSpanIds(rootSpans) {
 	rootSpans.forEach((root) => traverse(root));
 	return ids;
 }
-
 //#endregion
 //#region src/components/observability/TraceTimeline/TraceHeader.tsx
-function TraceHeader({ trace }) {
+function computeMaxDepth(spans) {
+	let max = 0;
+	function walk(nodes, depth) {
+		for (const node of nodes) {
+			if (depth > max) max = depth;
+			walk(node.children, depth + 1);
+		}
+	}
+	walk(spans, 1);
+	return max;
+}
+function TraceHeader({ trace, services = [], onHeaderToggle, isCollapsed = false }) {
 	const [copied, setCopied] = useState(false);
 	const rootSpan = trace.rootSpans[0];
 	const rootServiceName = rootSpan?.serviceName ?? "unknown";
 	const rootSpanName = rootSpan?.name ?? "unknown";
 	const totalDuration = trace.maxTimeMs - trace.minTimeMs;
+	const maxDepth = computeMaxDepth(trace.rootSpans);
 	const handleCopyTraceId = async () => {
 		try {
 			await navigator.clipboard.writeText(trace.traceId);
@@ -817,9 +1118,35 @@ function TraceHeader({ trace }) {
 			console.error("Failed to copy trace ID:", err);
 		}
 	};
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		className: "bg-background border-b border-border px-4 py-3",
-		children: /* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 mb-1",
+			children: [onHeaderToggle && /* @__PURE__ */ jsx("button", {
+				onClick: onHeaderToggle,
+				className: "p-0.5 text-muted-foreground hover:text-foreground",
+				"aria-label": isCollapsed ? "Expand header" : "Collapse header",
+				children: /* @__PURE__ */ jsx("svg", {
+					className: `w-4 h-4 transition-transform ${isCollapsed ? "-rotate-90" : ""}`,
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M19 9l-7 7-7-7"
+					})
+				})
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "text-sm font-semibold text-foreground",
+				children: [
+					rootServiceName,
+					": ",
+					rootSpanName
+				]
+			})]
+		}), !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-6 flex-wrap",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
@@ -845,43 +1172,30 @@ function TraceHeader({ trace }) {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-xs font-semibold text-muted-foreground",
-						children: "Root:"
-					}), /* @__PURE__ */ jsxs("span", {
-						className: "text-sm",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "text-muted-foreground",
-								children: rootServiceName
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "mx-1 text-muted-foreground/70",
-								children: "/"
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "font-medium text-foreground",
-								children: rootSpanName
-							})
-						]
+						children: "Duration:"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-medium text-foreground",
+						children: formatDuration(totalDuration)
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-xs font-semibold text-muted-foreground",
-						children: "Duration:"
+						children: "Spans:"
 					}), /* @__PURE__ */ jsx("span", {
 						className: "text-sm font-medium text-foreground",
-						children: formatDuration(totalDuration)
+						children: trace.totalSpanCount
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-xs font-semibold text-muted-foreground",
-						children: "Spans:"
+						children: "Depth:"
 					}), /* @__PURE__ */ jsx("span", {
 						className: "text-sm font-medium text-foreground",
-						children: trace.totalSpanCount
+						children: maxDepth
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
@@ -895,10 +1209,21 @@ function TraceHeader({ trace }) {
 					})]
 				})
 			]
-		})
+		}), services.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-3 mt-2 flex-wrap",
+			children: services.map((svc) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "w-2.5 h-2.5 rounded-full flex-shrink-0",
+					style: { backgroundColor: getServiceColor(svc) }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: svc
+				})]
+			}, svc))
+		})] })]
 	});
 }
-
 //#endregion
 //#region src/components/observability/TraceTimeline/Tooltip.tsx
 function Tooltip$1({ content, children }) {
@@ -928,7 +1253,6 @@ function Tooltip$1({ content, children }) {
 		children: content
 	}), document.body)] });
 }
-
 //#endregion
 //#region src/components/observability/TraceTimeline/TimelineBar.tsx
 function TimelineBar({ span, relativeStart, relativeDuration }) {
@@ -936,45 +1260,48 @@ function TimelineBar({ span, relativeStart, relativeDuration }) {
 	const barColor = getSpanBarColor(span.serviceName, isError);
 	const leftPercent = relativeStart * 100;
 	const widthPercent = Math.max(.2, relativeDuration * 100);
+	const isWide = widthPercent > 8;
+	const tooltipText = `${span.name}\n${formatDuration(span.durationMs)}\nStatus: ${isError ? "ERROR" : "OK"}`;
+	const durationLabel = formatDuration(span.durationMs);
 	return /* @__PURE__ */ jsx("div", {
 		className: "relative h-full",
 		children: /* @__PURE__ */ jsx(Tooltip$1, {
-			content: `${span.name}\n${formatDuration(span.durationMs)}\nStatus: ${isError ? "ERROR" : "OK"}`,
-			children: /* @__PURE__ */ jsx("div", {
+			content: tooltipText,
+			children: /* @__PURE__ */ jsxs("div", {
 				className: "absolute inset-0",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "absolute top-1/2 -translate-y-1/2 h-2 rounded-sm cursor-pointer hover:opacity-80 transition-opacity",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "absolute top-1/2 -translate-y-1/2 h-2 rounded-sm cursor-pointer hover:opacity-80 transition-opacity flex items-center",
 					style: {
 						left: `${leftPercent}%`,
 						width: `max(2px, ${widthPercent}%)`,
 						backgroundColor: barColor
-					}
-				})
+					},
+					children: isWide && /* @__PURE__ */ jsx("span", {
+						className: "text-[10px] font-mono text-white px-1 truncate",
+						children: durationLabel
+					})
+				}), !isWide && /* @__PURE__ */ jsx("span", {
+					className: "absolute top-1/2 -translate-y-1/2 text-[10px] font-mono text-muted-foreground whitespace-nowrap",
+					style: { left: `calc(${leftPercent + widthPercent}% + 4px)` },
+					children: durationLabel
+				})]
 			})
 		})
 	});
 }
-
 //#endregion
 //#region src/components/observability/TraceTimeline/SpanRow.tsx
-function getHttpContext(span) {
-	const attrs = span.attributes;
-	const method = attrs["http.method"];
-	const url = attrs["http.url"] || attrs["http.target"];
-	const statusCode = attrs["http.status_code"];
-	if (!method && !url) return null;
-	const parts = [];
-	if (method) parts.push(String(method));
-	if (url) parts.push(String(url));
-	if (statusCode) parts.push(`[${statusCode}]`);
-	return parts.join(" ");
-}
-const SpanRow = memo(function SpanRow({ span, level, isCollapsed, isSelected, isParentOfHovered = false, relativeStart, relativeDuration, onClick, onToggleCollapse, onMouseEnter, onMouseLeave }) {
+const SpanRow = memo(function SpanRow({ span, level, isCollapsed, isSelected, isParentOfHovered = false, relativeStart, relativeDuration, onClick, onToggleCollapse, onMouseEnter, onMouseLeave, uiFind }) {
 	const hasChildren = span.children.length > 0;
 	const isError = span.status === "ERROR";
-	const httpContext = getHttpContext(span);
+	const serviceColor = getServiceColor(span.serviceName);
+	const isDimmed = uiFind ? !spanMatchesSearch(span, uiFind) : false;
 	return /* @__PURE__ */ jsxs("div", {
 		className: `flex h-8 border-b border-border hover:bg-muted cursor-pointer ${isSelected ? "bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/30" : ""}`,
+		style: {
+			borderLeft: `3px solid ${serviceColor}`,
+			opacity: isDimmed ? .4 : 1
+		},
 		onClick,
 		onMouseEnter,
 		onMouseLeave,
@@ -1029,7 +1356,8 @@ const SpanRow = memo(function SpanRow({ span, level, isCollapsed, isSelected, is
 					})
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "text-xs text-muted-foreground flex-shrink-0 mr-2",
+					className: "text-xs flex-shrink-0 mr-2 font-medium",
+					style: { color: serviceColor },
 					children: span.serviceName
 				}),
 				/* @__PURE__ */ jsx("span", {
@@ -1044,10 +1372,6 @@ const SpanRow = memo(function SpanRow({ span, level, isCollapsed, isSelected, is
 						")"
 					]
 				}),
-				httpContext && /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-muted-foreground truncate ml-2 flex-shrink-0 max-w-xs",
-					children: httpContext
-				}),
 				/* @__PURE__ */ jsx("span", {
 					className: "text-xs text-muted-foreground flex-shrink-0 ml-2",
 					children: formatDuration(span.durationMs)
@@ -1063,7 +1387,6 @@ const SpanRow = memo(function SpanRow({ span, level, isCollapsed, isSelected, is
 		})]
 	});
 });
-
 //#endregion
 //#region src/components/observability/utils/attributes.ts
 function formatAttributeValue(value) {
@@ -1082,500 +1405,203 @@ function formatSeriesLabel(labels) {
 function isComplexValue(value) {
 	return typeof value === "object" && value !== null && (Array.isArray(value) || Object.keys(value).length > 0);
 }
-
 //#endregion
-//#region src/components/observability/TraceTimeline/DetailPane/AttributesTab.tsx
-const HTTP_SEMANTIC_CONVENTIONS = new Set([
-	"http.method",
-	"http.url",
-	"http.status_code",
-	"http.target",
-	"http.host",
-	"http.scheme",
-	"http.route",
-	"http.user_agent",
-	"http.request_content_length",
-	"http.response_content_length"
-]);
-function AttributesTab$1({ span }) {
-	const { httpAttributes, otherAttributes, resourceAttributes } = useMemo(() => {
-		const http = [];
-		const other = [];
-		const resource = [];
-		if (span.attributes) Object.entries(span.attributes).forEach(([key, value]) => {
-			if (HTTP_SEMANTIC_CONVENTIONS.has(key)) http.push([key, value]);
-			else other.push([key, value]);
-		});
-		if (span.resourceAttributes) Object.entries(span.resourceAttributes).forEach(([key, value]) => {
-			resource.push([key, value]);
-		});
-		http.sort(([a], [b]) => a.localeCompare(b));
-		other.sort(([a], [b]) => a.localeCompare(b));
-		resource.sort(([a], [b]) => a.localeCompare(b));
-		return {
-			httpAttributes: http,
-			otherAttributes: other,
-			resourceAttributes: resource
-		};
-	}, [span]);
-	if (!(httpAttributes.length > 0 || otherAttributes.length > 0 || resourceAttributes.length > 0)) return /* @__PURE__ */ jsx("div", {
-		className: "text-sm text-muted-foreground text-center py-8",
-		children: "No attributes available"
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-6",
+//#region src/components/observability/TraceTimeline/SpanDetailInline.tsx
+function CollapsibleSection({ title, count, children }) {
+	const [open, setOpen] = useState(false);
+	if (count === 0) return null;
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
+		className: "flex items-center gap-1 text-xs font-medium text-foreground hover:text-blue-600 dark:hover:text-blue-400 py-1",
+		onClick: (e) => {
+			e.stopPropagation();
+			setOpen((p) => !p);
+		},
 		children: [
-			httpAttributes.length > 0 && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsxs("h3", {
-				className: "text-sm font-semibold text-foreground mb-3 flex items-center",
-				children: [/* @__PURE__ */ jsx("span", { className: "w-2 h-2 bg-blue-500 rounded-full mr-2" }), "HTTP Attributes"]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "space-y-2",
-				children: httpAttributes.map(([key, value]) => /* @__PURE__ */ jsx(AttributeRow, {
-					attrKey: key,
-					value,
-					highlighted: true
-				}, key))
-			})] }),
-			otherAttributes.length > 0 && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-sm font-semibold text-foreground mb-3",
-				children: "Span Attributes"
-			}), /* @__PURE__ */ jsx("div", {
-				className: "space-y-2",
-				children: otherAttributes.map(([key, value]) => /* @__PURE__ */ jsx(AttributeRow, {
-					attrKey: key,
-					value
-				}, key))
-			})] }),
-			resourceAttributes.length > 0 && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-sm font-semibold text-foreground mb-3",
-				children: "Resource Attributes"
-			}), /* @__PURE__ */ jsx("div", {
-				className: "space-y-2",
-				children: resourceAttributes.map(([key, value]) => /* @__PURE__ */ jsx(AttributeRow, {
-					attrKey: key,
-					value
-				}, key))
-			})] })
+			/* @__PURE__ */ jsx("span", {
+				className: "w-3 text-center",
+				children: open ? "▾" : "▸"
+			}),
+			title,
+			/* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground",
+				children: [
+					"(",
+					count,
+					")"
+				]
+			})
 		]
-	});
+	}), open && /* @__PURE__ */ jsx("div", {
+		className: "ml-4 mt-1 space-y-1",
+		children
+	})] });
 }
-function AttributeRow({ attrKey, value, highlighted }) {
-	const isComplex = isComplexValue(value);
-	const formattedValue = formatAttributeValue(value);
+function KeyValueRow({ k, v }) {
+	const formatted = formatAttributeValue(v);
 	return /* @__PURE__ */ jsxs("div", {
-		className: `grid grid-cols-[minmax(150px,1fr)_2fr] gap-4 p-2 rounded text-sm ${highlighted ? "bg-blue-50 dark:bg-blue-950 border-l-2 border-blue-500" : "bg-muted"}`,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: `font-mono font-medium break-words ${highlighted ? "text-blue-700 dark:text-blue-300" : "text-foreground"}`,
-			title: attrKey,
-			children: attrKey
-		}), /* @__PURE__ */ jsx("div", {
-			className: "break-words",
-			children: isComplex ? /* @__PURE__ */ jsx("pre", {
-				className: "text-xs text-foreground bg-background p-2 rounded border border-border overflow-x-auto",
-				children: formattedValue
-			}) : /* @__PURE__ */ jsx("span", {
+		className: "flex gap-2 text-xs font-mono py-0.5",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground flex-shrink-0",
+				children: k
+			}),
+			/* @__PURE__ */ jsx("span", {
 				className: "text-foreground",
-				children: formattedValue
+				children: "="
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-foreground break-all",
+				children: formatted
 			})
-		})]
-	});
-}
-
-//#endregion
-//#region src/components/observability/TraceTimeline/DetailPane/EventsTab.tsx
-function formatRelativeTime$1(eventTimeMs, spanStartMs) {
-	const relativeMs = eventTimeMs - spanStartMs;
-	return `${relativeMs < 0 ? "-" : "+"}${formatDuration(Math.abs(relativeMs))}`;
-}
-function EventsTab({ span }) {
-	const [expandedEvents, setExpandedEvents] = useState(/* @__PURE__ */ new Set());
-	const toggleEventExpanded = (index) => {
-		setExpandedEvents((prev) => {
-			const next = new Set(prev);
-			if (next.has(index)) next.delete(index);
-			else next.add(index);
-			return next;
-		});
-	};
-	if (!span.events || span.events.length === 0) return /* @__PURE__ */ jsx("div", {
-		className: "text-sm text-muted-foreground text-center py-8",
-		children: "No events available"
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "space-y-3",
-		children: span.events.map((event, index) => {
-			const isExpanded = expandedEvents.has(index);
-			const hasAttributes = event.attributes && Object.keys(event.attributes).length > 0;
-			const relativeTime = formatRelativeTime$1(event.timeUnixMs, span.startTimeUnixMs);
-			return /* @__PURE__ */ jsxs("div", {
-				className: "border border-border rounded-lg overflow-hidden",
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "bg-muted p-3",
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "flex items-start justify-between gap-2",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "flex-1 min-w-0",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "font-medium text-sm text-foreground truncate",
-									children: event.name
-								}), /* @__PURE__ */ jsxs("div", {
-									className: "text-xs text-muted-foreground mt-1 font-mono",
-									children: [relativeTime, " from span start"]
-								})]
-							}), hasAttributes && /* @__PURE__ */ jsx("button", {
-								onClick: () => toggleEventExpanded(index),
-								className: "p-1 hover:bg-muted/80 rounded transition-colors",
-								"aria-label": isExpanded ? "Collapse attributes" : "Expand attributes",
-								"aria-expanded": isExpanded,
-								children: /* @__PURE__ */ jsx("svg", {
-									className: `w-4 h-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-180" : ""}`,
-									fill: "none",
-									stroke: "currentColor",
-									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ jsx("path", {
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										strokeWidth: 2,
-										d: "M19 9l-7 7-7-7"
-									})
-								})
-							})]
-						})
-					}),
-					hasAttributes && isExpanded && /* @__PURE__ */ jsxs("div", {
-						className: "p-3 bg-background border-t border-border",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "text-xs font-semibold text-foreground mb-2",
-							children: "Attributes"
-						}), /* @__PURE__ */ jsx("div", {
-							className: "space-y-2",
-							children: Object.entries(event.attributes).map(([key, value]) => /* @__PURE__ */ jsxs("div", {
-								className: "grid grid-cols-[minmax(100px,1fr)_2fr] gap-3 text-xs",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "font-mono font-medium text-foreground break-words",
-									children: key
-								}), /* @__PURE__ */ jsx("div", {
-									className: "text-foreground break-words",
-									children: typeof value === "object" ? /* @__PURE__ */ jsx("pre", {
-										className: "text-xs bg-muted p-2 rounded border border-border overflow-x-auto",
-										children: formatAttributeValue(value)
-									}) : /* @__PURE__ */ jsx("span", { children: formatAttributeValue(value) })
-								})]
-							}, key))
-						})]
-					}),
-					!hasAttributes && /* @__PURE__ */ jsx("div", {
-						className: "px-3 pb-3 text-xs text-muted-foreground italic",
-						children: "No attributes"
-					})
-				]
-			}, index);
-		})
-	});
-}
-
-//#endregion
-//#region src/components/observability/TraceTimeline/DetailPane/LinksTab.tsx
-function truncateId(id) {
-	return id.length > 8 ? `${id.substring(0, 8)}...` : id;
-}
-function LinksTab({ span, onLinkClick }) {
-	const [expandedLinks, setExpandedLinks] = useState(/* @__PURE__ */ new Set());
-	const [copiedId, setCopiedId] = useState(null);
-	const toggleLinkExpanded = (index) => {
-		setExpandedLinks((prev) => {
-			const next = new Set(prev);
-			if (next.has(index)) next.delete(index);
-			else next.add(index);
-			return next;
-		});
-	};
-	const copyToClipboard = async (text, type, index) => {
-		try {
-			await navigator.clipboard.writeText(text);
-			setCopiedId(`${type}-${index}-${text}`);
-			setTimeout(() => setCopiedId(null), 2e3);
-		} catch (err) {
-			console.error("Failed to copy:", err);
-		}
-	};
-	if (!span.links || span.links.length === 0) return /* @__PURE__ */ jsx("div", {
-		className: "text-sm text-muted-foreground text-center py-8",
-		children: "No links available"
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "space-y-3",
-		children: span.links.map((link, index) => {
-			const isExpanded = expandedLinks.has(index);
-			const hasAttributes = link.attributes && Object.keys(link.attributes).length > 0;
-			return /* @__PURE__ */ jsxs("div", {
-				className: "border border-border rounded-lg overflow-hidden",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "bg-muted p-3",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "mb-2",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "text-xs font-semibold text-muted-foreground mb-1",
-								children: "Trace ID"
-							}), /* @__PURE__ */ jsxs("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ jsx("code", {
-									className: "text-xs font-mono text-foreground bg-background px-2 py-1 rounded border border-border flex-1 truncate",
-									title: link.traceId,
-									children: truncateId(link.traceId)
-								}), /* @__PURE__ */ jsx("button", {
-									onClick: () => copyToClipboard(link.traceId, "trace", index),
-									className: "p-1 hover:bg-muted/80 rounded transition-colors",
-									"aria-label": "Copy trace ID",
-									children: /* @__PURE__ */ jsx("svg", {
-										className: `w-4 h-4 ${copiedId === `trace-${index}-${link.traceId}` ? "text-green-600" : "text-muted-foreground"}`,
-										fill: "none",
-										stroke: "currentColor",
-										viewBox: "0 0 24 24",
-										children: copiedId === `trace-${index}-${link.traceId}` ? /* @__PURE__ */ jsx("path", {
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											strokeWidth: 2,
-											d: "M5 13l4 4L19 7"
-										}) : /* @__PURE__ */ jsx("path", {
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											strokeWidth: 2,
-											d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-										})
-									})
-								})]
-							})]
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "mb-2",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "text-xs font-semibold text-muted-foreground mb-1",
-								children: "Span ID"
-							}), /* @__PURE__ */ jsxs("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ jsx("code", {
-									className: "text-xs font-mono text-foreground bg-background px-2 py-1 rounded border border-border flex-1 truncate",
-									title: link.spanId,
-									children: truncateId(link.spanId)
-								}), /* @__PURE__ */ jsx("button", {
-									onClick: () => copyToClipboard(link.spanId, "span", index),
-									className: "p-1 hover:bg-muted/80 rounded transition-colors",
-									"aria-label": "Copy span ID",
-									children: /* @__PURE__ */ jsx("svg", {
-										className: `w-4 h-4 ${copiedId === `span-${index}-${link.spanId}` ? "text-green-600" : "text-muted-foreground"}`,
-										fill: "none",
-										stroke: "currentColor",
-										viewBox: "0 0 24 24",
-										children: copiedId === `span-${index}-${link.spanId}` ? /* @__PURE__ */ jsx("path", {
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											strokeWidth: 2,
-											d: "M5 13l4 4L19 7"
-										}) : /* @__PURE__ */ jsx("path", {
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											strokeWidth: 2,
-											d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-										})
-									})
-								})]
-							})]
-						}),
-						onLinkClick && /* @__PURE__ */ jsx("button", {
-							onClick: () => onLinkClick(link.traceId, link.spanId),
-							className: "w-full mt-2 px-3 py-2 bg-primary text-primary-foreground text-sm font-medium rounded hover:bg-primary/90 transition-colors",
-							children: "Navigate to Span"
-						}),
-						hasAttributes && /* @__PURE__ */ jsxs("button", {
-							onClick: () => toggleLinkExpanded(index),
-							className: "w-full mt-2 px-3 py-1.5 text-xs text-foreground bg-background border border-border rounded hover:bg-muted transition-colors flex items-center justify-center gap-1",
-							"aria-expanded": isExpanded,
-							children: [/* @__PURE__ */ jsxs("span", { children: [
-								isExpanded ? "Hide" : "Show",
-								" Attributes (",
-								Object.keys(link.attributes).length,
-								")"
-							] }), /* @__PURE__ */ jsx("svg", {
-								className: `w-3 h-3 transition-transform ${isExpanded ? "rotate-180" : ""}`,
-								fill: "none",
-								stroke: "currentColor",
-								viewBox: "0 0 24 24",
-								children: /* @__PURE__ */ jsx("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									strokeWidth: 2,
-									d: "M19 9l-7 7-7-7"
-								})
-							})]
-						})
-					]
-				}), hasAttributes && isExpanded && /* @__PURE__ */ jsx("div", {
-					className: "p-3 bg-background border-t border-border",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "space-y-2",
-						children: Object.entries(link.attributes).map(([key, value]) => /* @__PURE__ */ jsxs("div", {
-							className: "grid grid-cols-[minmax(100px,1fr)_2fr] gap-3 text-xs",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "font-mono font-medium text-foreground break-words",
-								children: key
-							}), /* @__PURE__ */ jsx("div", {
-								className: "text-foreground break-words",
-								children: typeof value === "object" ? /* @__PURE__ */ jsx("pre", {
-									className: "text-xs bg-muted p-2 rounded border border-border overflow-x-auto",
-									children: formatAttributeValue(value)
-								}) : /* @__PURE__ */ jsx("span", { children: formatAttributeValue(value) })
-							})]
-						}, key))
-					})
-				})]
-			}, index);
-		})
+		]
 	});
 }
-
-//#endregion
-//#region src/components/observability/TraceTimeline/DetailPane/index.tsx
-function DetailPane({ span, onClose, onLinkClick, initialTab = "attributes" }) {
-	const [activeTab, setActiveTab] = useState(initialTab);
+function SpanDetailInline({ span, traceStartMs }) {
 	const [copiedId, setCopiedId] = useState(false);
-	const handleTabChange = useCallback((tab) => {
-		setActiveTab(tab);
-	}, []);
-	const handleCopySpanId = useCallback(async () => {
+	const serviceColor = getServiceColor(span.serviceName);
+	const relativeStartMs = span.startTimeUnixMs - traceStartMs;
+	const handleCopy = useCallback(async () => {
 		try {
 			await navigator.clipboard.writeText(span.spanId);
 			setCopiedId(true);
 			setTimeout(() => setCopiedId(false), 2e3);
-		} catch (err) {
-			console.error("Failed to copy span ID:", err);
-		}
+		} catch {}
 	}, [span.spanId]);
+	const spanAttrs = Object.entries(span.attributes).sort(([a], [b]) => a.localeCompare(b));
+	const resourceAttrs = Object.entries(span.resourceAttributes).sort(([a], [b]) => a.localeCompare(b));
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col h-full bg-background border-l border-border",
-		onKeyDown: useCallback((e) => {
-			if (e.key === "Escape") onClose();
-		}, [onClose]),
-		tabIndex: -1,
-		role: "complementary",
-		"aria-label": "Span details",
+		className: "border-b border-border bg-muted/50 px-4 py-3",
+		style: { borderLeft: `3px solid ${serviceColor}` },
+		onClick: (e) => e.stopPropagation(),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "p-4 border-b border-border",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center justify-between mb-3",
-						children: [/* @__PURE__ */ jsx("h2", {
-							className: "text-lg font-semibold text-foreground truncate",
-							children: "Span Details"
-						}), /* @__PURE__ */ jsx("button", {
-							onClick: onClose,
-							className: "p-1 hover:bg-muted rounded transition-colors",
-							"aria-label": "Close detail pane",
-							title: "Close (Esc)",
-							children: /* @__PURE__ */ jsx("svg", {
-								className: "w-5 h-5 text-muted-foreground",
-								fill: "none",
-								stroke: "currentColor",
-								viewBox: "0 0 24 24",
-								children: /* @__PURE__ */ jsx("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									strokeWidth: 2,
-									d: "M6 18L18 6M6 6l12 12"
-								})
+				className: "mb-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "text-sm font-medium text-foreground",
+					children: span.name
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground mt-1",
+					children: [
+						/* @__PURE__ */ jsxs("span", { children: ["Service: ", /* @__PURE__ */ jsx("span", {
+							className: "text-foreground",
+							children: span.serviceName
+						})] }),
+						/* @__PURE__ */ jsxs("span", { children: [
+							"Duration:",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "text-foreground",
+								children: formatDuration(span.durationMs)
 							})
-						})]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "mb-2",
-						children: /* @__PURE__ */ jsx("div", {
-							className: "text-sm font-medium text-foreground truncate",
-							title: span.name,
-							children: span.name
-						})
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [
+						] }),
+						/* @__PURE__ */ jsxs("span", { children: [
+							"Start:",
+							" ",
 							/* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
-								children: "Span ID:"
-							}),
-							/* @__PURE__ */ jsx("code", {
-								className: "text-xs font-mono text-foreground bg-muted px-2 py-1 rounded flex-1 truncate",
-								title: span.spanId,
-								children: span.spanId
-							}),
-							/* @__PURE__ */ jsx("button", {
-								onClick: handleCopySpanId,
-								className: "p-1 hover:bg-muted rounded transition-colors",
-								"aria-label": "Copy span ID",
-								children: /* @__PURE__ */ jsx("svg", {
-									className: `w-4 h-4 ${copiedId ? "text-green-600 dark:text-green-400" : "text-muted-foreground"}`,
-									fill: "none",
-									stroke: "currentColor",
-									viewBox: "0 0 24 24",
-									children: copiedId ? /* @__PURE__ */ jsx("path", {
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										strokeWidth: 2,
-										d: "M5 13l4 4L19 7"
-									}) : /* @__PURE__ */ jsx("path", {
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										strokeWidth: 2,
-										d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-									})
-								})
+								className: "text-foreground",
+								children: formatDuration(relativeStartMs)
 							})
-						]
-					})
-				]
+						] }),
+						/* @__PURE__ */ jsxs("span", { children: ["Kind: ", /* @__PURE__ */ jsx("span", {
+							className: "text-foreground",
+							children: span.kind
+						})] }),
+						span.status !== "UNSET" && /* @__PURE__ */ jsxs("span", { children: [
+							"Status:",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: span.status === "ERROR" ? "text-red-500" : "text-foreground",
+								children: span.status
+							})
+						] })
+					]
+				})]
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "flex border-b border-border",
-				role: "tablist",
-				"aria-label": "Span detail tabs",
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
 				children: [
-					"attributes",
-					"events",
-					"links"
-				].map((tab) => {
-					const count = tab === "attributes" ? Object.keys(span.attributes).length : tab === "events" ? span.events.length : span.links.length;
-					return /* @__PURE__ */ jsxs("button", {
-						role: "tab",
-						"aria-selected": activeTab === tab,
-						onClick: () => handleTabChange(tab),
-						className: `px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab ? "text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400" : "text-muted-foreground hover:text-foreground"}`,
-						children: [tab.charAt(0).toUpperCase() + tab.slice(1), count > 0 && /* @__PURE__ */ jsxs("span", {
-							className: "ml-1 text-xs text-muted-foreground",
+					/* @__PURE__ */ jsx(CollapsibleSection, {
+						title: "Tags",
+						count: spanAttrs.length,
+						children: spanAttrs.map(([k, v]) => /* @__PURE__ */ jsx(KeyValueRow, {
+							k,
+							v
+						}, k))
+					}),
+					/* @__PURE__ */ jsx(CollapsibleSection, {
+						title: "Process",
+						count: resourceAttrs.length,
+						children: resourceAttrs.map(([k, v]) => /* @__PURE__ */ jsx(KeyValueRow, {
+							k,
+							v
+						}, k))
+					}),
+					/* @__PURE__ */ jsx(CollapsibleSection, {
+						title: "Events",
+						count: span.events.length,
+						children: span.events.map((event, i) => /* @__PURE__ */ jsxs("div", {
+							className: "text-xs border-l-2 border-border pl-2 py-1.5 space-y-0.5",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "font-mono text-muted-foreground flex-shrink-0",
+									children: formatRelativeTime$1(event.timeUnixMs, span.startTimeUnixMs)
+								}), /* @__PURE__ */ jsx("span", {
+									className: "font-medium text-foreground",
+									children: event.name
+								})]
+							}), Object.entries(event.attributes).map(([k, v]) => /* @__PURE__ */ jsx(KeyValueRow, {
+								k,
+								v
+							}, k))]
+						}, i))
+					}),
+					/* @__PURE__ */ jsx(CollapsibleSection, {
+						title: "Links",
+						count: span.links.length,
+						children: span.links.map((link, i) => /* @__PURE__ */ jsxs("div", {
+							className: "text-xs font-mono py-0.5",
 							children: [
-								"(",
-								count,
-								")"
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground",
+									children: "trace:"
+								}),
+								" ",
+								link.traceId,
+								" ",
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground",
+									children: "span:"
+								}),
+								" ",
+								link.spanId
 							]
-						})]
-					}, tab);
-				})
+						}, i))
+					})
+				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex-1 overflow-auto p-4",
+				className: "flex items-center justify-end gap-2 mt-2 pt-2 border-t border-border",
 				children: [
-					activeTab === "attributes" && /* @__PURE__ */ jsx(AttributesTab$1, { span }),
-					activeTab === "events" && /* @__PURE__ */ jsx(EventsTab, { span }),
-					activeTab === "links" && /* @__PURE__ */ jsx(LinksTab, {
-						span,
-						onLinkClick
+					/* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground",
+						children: "SpanID:"
+					}),
+					/* @__PURE__ */ jsx("code", {
+						className: "text-xs font-mono text-foreground",
+						children: span.spanId
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: handleCopy,
+						className: "text-xs text-muted-foreground hover:text-foreground",
+						"aria-label": "Copy span ID",
+						children: copiedId ? "✓" : "Copy"
 					})
 				]
 			})
 		]
 	});
 }
-
 //#endregion
 //#region src/components/observability/shared/LoadingSkeleton.tsx
 function LoadingSkeleton() {
@@ -1617,7 +1643,6 @@ function LoadingSkeleton() {
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/KeyboardShortcuts/context.ts
 const noop = () => {};
@@ -1637,7 +1662,6 @@ function useRegisterShortcuts(id, group) {
 		unregister
 	]);
 }
-
 //#endregion
 //#region src/components/KeyboardShortcuts/ShortcutsHelpDialog.tsx
 function ShortcutsHelpDialog({ open, onClose, groups }) {
@@ -1694,7 +1718,6 @@ function ShortcutsHelpDialog({ open, onClose, groups }) {
 		})
 	});
 }
-
 //#endregion
 //#region src/components/KeyboardShortcuts/KeyboardShortcutsProvider.tsx
 const GENERAL_GROUP = {
@@ -1705,8 +1728,8 @@ const GENERAL_GROUP = {
 			description: "Toggle shortcuts help"
 		},
 		{
-			keys: ["Shift", "S"],
-			description: "Services tab"
+			keys: ["Shift", "T"],
+			description: "Traces tab"
 		},
 		{
 			keys: ["Shift", "L"],
@@ -1737,8 +1760,8 @@ function KeyboardShortcutsProvider({ children, onNavigateServices, onNavigateLog
 	}, []);
 	useEffect(() => {
 		function handleKeyDown(e) {
-			const target = e.target;
-			if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable) return;
+			if (!(e.target instanceof HTMLElement)) return;
+			if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA" || e.target.tagName === "SELECT" || e.target.isContentEditable) return;
 			if (e.shiftKey && e.key === "?") {
 				e.preventDefault();
 				setIsOpen((v) => !v);
@@ -1749,7 +1772,7 @@ function KeyboardShortcutsProvider({ children, onNavigateServices, onNavigateLog
 				setIsOpen(false);
 				return;
 			}
-			if (e.shiftKey && e.key === "S") {
+			if (e.shiftKey && e.key === "T") {
 				e.preventDefault();
 				onNavigateServices();
 				return;
@@ -1789,7 +1812,6 @@ function KeyboardShortcutsProvider({ children, onNavigateServices, onNavigateLog
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/observability/TraceTimeline/shortcuts.ts
 const TRACE_VIEWER_SHORTCUTS = {
@@ -1841,7 +1863,914 @@ const TRACE_VIEWER_SHORTCUTS = {
 		}
 	]
 };
-
+//#endregion
+//#region src/components/observability/TraceTimeline/TimeRuler.tsx
+const TICK_COUNT = 5;
+function TimeRuler({ totalDurationMs, leftColumnWidth, offsetMs = 0 }) {
+	const ticks = Array.from({ length: TICK_COUNT + 1 }, (_, i) => {
+		const fraction = i / TICK_COUNT;
+		return {
+			label: formatDuration(offsetMs + totalDurationMs * fraction),
+			percent: fraction * 100
+		};
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex border-b border-border bg-background",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex-shrink-0",
+			style: { width: leftColumnWidth }
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 relative h-6 px-2",
+			children: ticks.map((tick) => /* @__PURE__ */ jsxs("div", {
+				className: "absolute top-0 h-full flex flex-col justify-end",
+				style: { left: `${tick.percent}%` },
+				children: [/* @__PURE__ */ jsx("div", { className: "h-2 border-l border-muted-foreground/40" }), /* @__PURE__ */ jsx("span", {
+					className: "text-[10px] text-muted-foreground font-mono -translate-x-1/2 absolute bottom-0 whitespace-nowrap",
+					style: {
+						left: 0,
+						transform: tick.percent === 100 ? "translateX(-100%)" : tick.percent === 0 ? "none" : "translateX(-50%)"
+					},
+					children: tick.label
+				})]
+			}, tick.percent))
+		})]
+	});
+}
+//#endregion
+//#region src/components/observability/TraceTimeline/SpanSearch.tsx
+function SpanSearch({ value, onChange, matchCount, currentMatch, onPrev, onNext }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1 px-2 py-1 border-b border-border bg-background",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "text",
+			placeholder: "Find...",
+			value,
+			onChange: (e) => onChange(e.target.value),
+			className: "bg-muted text-foreground text-sm px-2 py-0.5 rounded border border-border outline-none focus:border-blue-500 w-48"
+		}), value && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-xs text-muted-foreground whitespace-nowrap",
+				children: matchCount > 0 ? `${currentMatch + 1}/${matchCount}` : "0 matches"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: onPrev,
+				disabled: matchCount === 0,
+				className: "p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30",
+				"aria-label": "Previous match",
+				children: /* @__PURE__ */ jsx("svg", {
+					className: "w-3.5 h-3.5",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M5 15l7-7 7 7"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: onNext,
+				disabled: matchCount === 0,
+				className: "p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-30",
+				"aria-label": "Next match",
+				children: /* @__PURE__ */ jsx("svg", {
+					className: "w-3.5 h-3.5",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M19 9l-7 7-7-7"
+					})
+				})
+			})
+		] })]
+	});
+}
+//#endregion
+//#region src/components/observability/TraceTimeline/ViewTabs.tsx
+const VIEWS = [
+	"timeline",
+	"graph",
+	"statistics",
+	"flamegraph"
+];
+const VIEW_LABELS = {
+	timeline: "Timeline",
+	graph: "Graph",
+	statistics: "Statistics",
+	flamegraph: "Flamegraph"
+};
+function ViewTabs({ activeView, onChange }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex border-b border-border bg-background",
+		children: VIEWS.map((view) => /* @__PURE__ */ jsx("button", {
+			onClick: () => onChange(view),
+			className: `px-4 py-1.5 text-sm font-medium transition-colors ${activeView === view ? "text-foreground border-b-2 border-blue-500" : "text-muted-foreground hover:text-foreground"}`,
+			children: VIEW_LABELS[view]
+		}, view))
+	});
+}
+//#endregion
+//#region src/components/observability/TraceTimeline/GraphView.tsx
+/**
+* GraphView - SVG-based DAG showing service dependencies within a trace.
+*/
+function buildDAG(trace) {
+	const nodeMap = /* @__PURE__ */ new Map();
+	const edgeMap = /* @__PURE__ */ new Map();
+	const childServices = /* @__PURE__ */ new Map();
+	function walk(span, parentService) {
+		const svc = span.serviceName;
+		const existing = nodeMap.get(svc);
+		if (existing) {
+			existing.spanCount++;
+			if (span.status === "ERROR") existing.errorCount++;
+		} else nodeMap.set(svc, {
+			spanCount: 1,
+			errorCount: span.status === "ERROR" ? 1 : 0
+		});
+		if (parentService && parentService !== svc) {
+			const key = `${parentService}→${svc}`;
+			const edge = edgeMap.get(key);
+			if (edge) {
+				edge.callCount++;
+				edge.totalDurationMs += span.durationMs;
+			} else edgeMap.set(key, {
+				callCount: 1,
+				totalDurationMs: span.durationMs
+			});
+			if (!childServices.has(parentService)) childServices.set(parentService, /* @__PURE__ */ new Set());
+			const parentChildren = childServices.get(parentService);
+			if (parentChildren) parentChildren.add(svc);
+		}
+		for (const child of span.children) walk(child, svc);
+	}
+	for (const root of trace.rootSpans) walk(root);
+	const edges = [];
+	for (const [key, meta] of edgeMap) {
+		const [from, to] = key.split("→");
+		if (from && to) edges.push({
+			from,
+			to,
+			...meta
+		});
+	}
+	return {
+		nodeMap,
+		edges,
+		childServices
+	};
+}
+const NODE_W = 160;
+const NODE_H = 60;
+const LAYER_GAP_Y = 100;
+const NODE_GAP_X = 40;
+function layoutNodes(nodeMap, edges) {
+	const children = /* @__PURE__ */ new Map();
+	const hasParent = /* @__PURE__ */ new Set();
+	for (const e of edges) {
+		if (!children.has(e.from)) children.set(e.from, /* @__PURE__ */ new Set());
+		const fromChildren = children.get(e.from);
+		if (fromChildren) fromChildren.add(e.to);
+		hasParent.add(e.to);
+	}
+	const roots = [...nodeMap.keys()].filter((s) => !hasParent.has(s));
+	if (roots.length === 0 && nodeMap.size > 0) {
+		const firstKey = nodeMap.keys().next().value;
+		if (firstKey !== void 0) roots.push(firstKey);
+	}
+	const layerOf = /* @__PURE__ */ new Map();
+	const enqueueCount = /* @__PURE__ */ new Map();
+	const maxEnqueue = nodeMap.size * 2;
+	const queue = [];
+	for (const r of roots) {
+		layerOf.set(r, 0);
+		queue.push(r);
+	}
+	while (queue.length > 0) {
+		const cur = queue.shift();
+		if (!cur) continue;
+		const curLayer = layerOf.get(cur);
+		if (curLayer === void 0) continue;
+		const kids = children.get(cur);
+		if (!kids) continue;
+		for (const kid of kids) {
+			const prev = layerOf.get(kid);
+			const count = enqueueCount.get(kid) ?? 0;
+			if (prev === void 0 && count < maxEnqueue) {
+				layerOf.set(kid, curLayer + 1);
+				enqueueCount.set(kid, count + 1);
+				queue.push(kid);
+			}
+		}
+	}
+	for (const name of nodeMap.keys()) if (!layerOf.has(name)) layerOf.set(name, 0);
+	const layers = /* @__PURE__ */ new Map();
+	for (const [name, layer] of layerOf) {
+		if (!layers.has(layer)) layers.set(layer, []);
+		const layerNames = layers.get(layer);
+		if (layerNames) layerNames.push(name);
+	}
+	const nodes = [];
+	const totalWidth = Math.max(...Array.from(layers.values()).map((l) => l.length), 1) * (NODE_W + NODE_GAP_X) - NODE_GAP_X;
+	for (const [layer, names] of layers) {
+		const offsetX = (totalWidth - (names.length * (NODE_W + NODE_GAP_X) - NODE_GAP_X)) / 2;
+		names.forEach((name, i) => {
+			const meta = nodeMap.get(name);
+			if (!meta) return;
+			nodes.push({
+				name,
+				spanCount: meta.spanCount,
+				errorCount: meta.errorCount,
+				layer,
+				x: offsetX + i * (NODE_W + NODE_GAP_X),
+				y: layer * (NODE_H + LAYER_GAP_Y)
+			});
+		});
+	}
+	return nodes;
+}
+function GraphView({ trace }) {
+	const { nodes, edges, svgWidth, svgHeight } = useMemo(() => {
+		const { nodeMap, edges } = buildDAG(trace);
+		const nodes = layoutNodes(nodeMap, edges);
+		const maxX = Math.max(...nodes.map((n) => n.x + NODE_W), NODE_W);
+		const maxY = Math.max(...nodes.map((n) => n.y + NODE_H), NODE_H);
+		const padding = 40;
+		return {
+			nodes,
+			edges,
+			svgWidth: maxX + padding * 2,
+			svgHeight: maxY + padding * 2
+		};
+	}, [trace]);
+	const nodeByName = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const n of nodes) m.set(n.name, n);
+		return m;
+	}, [nodes]);
+	const padding = 40;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 overflow-auto bg-background p-4 flex justify-center",
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+			width: svgWidth,
+			height: svgHeight,
+			role: "img",
+			"aria-label": "Service dependency graph",
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+					id: "arrowhead",
+					markerWidth: "10",
+					markerHeight: "7",
+					refX: "9",
+					refY: "3.5",
+					orient: "auto",
+					children: /* @__PURE__ */ jsx("polygon", {
+						points: "0 0, 10 3.5, 0 7",
+						fill: "#94a3b8"
+					})
+				}) }),
+				edges.map((edge) => {
+					const from = nodeByName.get(edge.from);
+					const to = nodeByName.get(edge.to);
+					if (!from || !to) return null;
+					const x1 = padding + from.x + NODE_W / 2;
+					const y1 = padding + from.y + NODE_H;
+					const x2 = padding + to.x + NODE_W / 2;
+					const y2 = padding + to.y;
+					const midY = (y1 + y2) / 2;
+					return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+						d: `M ${x1} ${y1} C ${x1} ${midY}, ${x2} ${midY}, ${x2} ${y2}`,
+						fill: "none",
+						stroke: "#475569",
+						strokeWidth: 1.5,
+						markerEnd: "url(#arrowhead)"
+					}), edge.callCount > 1 && /* @__PURE__ */ jsxs("text", {
+						x: (x1 + x2) / 2,
+						y: midY - 6,
+						textAnchor: "middle",
+						fontSize: 11,
+						fill: "#94a3b8",
+						children: [edge.callCount, "x"]
+					})] }, `${edge.from}→${edge.to}`);
+				}),
+				nodes.map((node) => {
+					const color = getServiceColor(node.name);
+					const hasError = node.errorCount > 0;
+					const textColor = "#f8fafc";
+					const nx = padding + node.x;
+					const ny = padding + node.y;
+					return /* @__PURE__ */ jsxs("g", { children: [
+						/* @__PURE__ */ jsx("rect", {
+							x: nx,
+							y: ny,
+							width: NODE_W,
+							height: NODE_H,
+							rx: 8,
+							ry: 8,
+							fill: color,
+							stroke: hasError ? "#ef4444" : "none",
+							strokeWidth: hasError ? 2 : 0
+						}),
+						/* @__PURE__ */ jsx("text", {
+							x: nx + NODE_W / 2,
+							y: ny + 24,
+							textAnchor: "middle",
+							fontSize: 13,
+							fontWeight: 600,
+							fill: textColor,
+							children: node.name.length > 18 ? node.name.slice(0, 16) + "..." : node.name
+						}),
+						/* @__PURE__ */ jsxs("text", {
+							x: nx + NODE_W / 2,
+							y: ny + 44,
+							textAnchor: "middle",
+							fontSize: 11,
+							fill: textColor,
+							opacity: .85,
+							children: [
+								node.spanCount,
+								" span",
+								node.spanCount !== 1 ? "s" : "",
+								node.errorCount > 0 && ` · ${node.errorCount} err`
+							]
+						})
+					] }, node.name);
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/observability/TraceTimeline/StatisticsView.tsx
+function computeSelfTime(span) {
+	const childrenTotal = span.children.reduce((sum, child) => sum + child.durationMs, 0);
+	return Math.max(0, span.durationMs - childrenTotal);
+}
+function computeStats(trace) {
+	const allFlattened = flattenAllSpans(trace.rootSpans);
+	const groups = /* @__PURE__ */ new Map();
+	for (const { span } of allFlattened) {
+		const key = `${span.serviceName}:${span.name}`;
+		let group = groups.get(key);
+		if (!group) {
+			group = {
+				spans: [],
+				selfTimes: []
+			};
+			groups.set(key, group);
+		}
+		group.spans.push(span);
+		group.selfTimes.push(computeSelfTime(span));
+	}
+	const stats = [];
+	for (const [key, { spans, selfTimes }] of groups) {
+		const durations = spans.map((s) => s.durationMs);
+		const count = spans.length;
+		const totalDuration = durations.reduce((a, b) => a + b, 0);
+		const selfTimeTotal = selfTimes.reduce((a, b) => a + b, 0);
+		const firstSpan = spans[0];
+		if (!firstSpan) continue;
+		stats.push({
+			key,
+			serviceName: firstSpan.serviceName,
+			spanName: firstSpan.name,
+			count,
+			totalDuration,
+			avgDuration: totalDuration / count,
+			minDuration: Math.min(...durations),
+			maxDuration: Math.max(...durations),
+			selfTimeTotal,
+			selfTimeAvg: selfTimeTotal / count,
+			selfTimeMin: Math.min(...selfTimes),
+			selfTimeMax: Math.max(...selfTimes)
+		});
+	}
+	return stats;
+}
+function getSortValue(stat, field) {
+	switch (field) {
+		case "name": return stat.key.toLowerCase();
+		case "count": return stat.count;
+		case "total": return stat.totalDuration;
+		case "avg": return stat.avgDuration;
+		case "min": return stat.minDuration;
+		case "max": return stat.maxDuration;
+		case "selfTotal": return stat.selfTimeTotal;
+		case "selfAvg": return stat.selfTimeAvg;
+		case "selfMin": return stat.selfTimeMin;
+		case "selfMax": return stat.selfTimeMax;
+	}
+}
+const COLUMNS = [
+	{
+		label: "Name",
+		field: "name"
+	},
+	{
+		label: "Count",
+		field: "count"
+	},
+	{
+		label: "Total",
+		field: "total"
+	},
+	{
+		label: "Avg",
+		field: "avg"
+	},
+	{
+		label: "Min",
+		field: "min"
+	},
+	{
+		label: "Max",
+		field: "max"
+	},
+	{
+		label: "ST Total",
+		field: "selfTotal"
+	},
+	{
+		label: "ST Avg",
+		field: "selfAvg"
+	},
+	{
+		label: "ST Min",
+		field: "selfMin"
+	},
+	{
+		label: "ST Max",
+		field: "selfMax"
+	}
+];
+function StatisticsView({ trace }) {
+	const [sortField, setSortField] = useState("total");
+	const [sortAsc, setSortAsc] = useState(false);
+	const stats = useMemo(() => computeStats(trace), [trace]);
+	const sorted = useMemo(() => {
+		const copy = [...stats];
+		copy.sort((a, b) => {
+			const aVal = getSortValue(a, sortField);
+			const bVal = getSortValue(b, sortField);
+			let cmp;
+			if (typeof aVal === "string" && typeof bVal === "string") cmp = aVal.localeCompare(bVal);
+			else if (typeof aVal === "number" && typeof bVal === "number") cmp = aVal - bVal;
+			else cmp = 0;
+			return sortAsc ? cmp : -cmp;
+		});
+		return copy;
+	}, [
+		stats,
+		sortField,
+		sortAsc
+	]);
+	const handleSort = (field) => {
+		if (sortField === field) setSortAsc((p) => !p);
+		else {
+			setSortField(field);
+			setSortAsc(false);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 overflow-auto p-2",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full text-sm border-collapse",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+				className: "border-b border-border",
+				children: COLUMNS.map((col) => /* @__PURE__ */ jsxs("th", {
+					className: "px-3 py-2 text-left text-xs font-medium text-muted-foreground cursor-pointer select-none hover:text-foreground whitespace-nowrap",
+					onClick: () => handleSort(col.field),
+					children: [
+						col.label,
+						" ",
+						sortField === col.field ? sortAsc ? "▲" : "▼" : ""
+					]
+				}, col.field))
+			}) }), /* @__PURE__ */ jsx("tbody", { children: sorted.map((stat, i) => /* @__PURE__ */ jsxs("tr", {
+				className: `border-b border-border/50 ${i % 2 === 0 ? "bg-background" : "bg-muted/30"}`,
+				children: [
+					/* @__PURE__ */ jsxs("td", {
+						className: "px-3 py-1.5 text-foreground font-mono text-xs whitespace-nowrap",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: stat.serviceName
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground/50",
+								children: ":"
+							}),
+							" ",
+							stat.spanName
+						]
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1.5 text-foreground tabular-nums",
+						children: stat.count
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1.5 text-foreground tabular-nums",
+						children: formatDuration(stat.totalDuration)
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1.5 text-foreground tabular-nums",
+						children: formatDuration(stat.avgDuration)
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1.5 text-foreground tabular-nums",
+						children: formatDuration(stat.minDuration)
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1.5 text-foreground tabular-nums",
+						children: formatDuration(stat.maxDuration)
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1.5 text-foreground tabular-nums",
+						children: formatDuration(stat.selfTimeTotal)
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1.5 text-foreground tabular-nums",
+						children: formatDuration(stat.selfTimeAvg)
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1.5 text-foreground tabular-nums",
+						children: formatDuration(stat.selfTimeMin)
+					}),
+					/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1.5 text-foreground tabular-nums",
+						children: formatDuration(stat.selfTimeMax)
+					})
+				]
+			}, stat.key)) })]
+		})
+	});
+}
+//#endregion
+//#region src/components/observability/TraceTimeline/FlamegraphView.tsx
+const ROW_HEIGHT = 24;
+const MIN_WIDTH = 1;
+const LABEL_MIN_WIDTH = 40;
+function findSpanById(rootSpans, spanId) {
+	for (const root of rootSpans) {
+		if (root.spanId === spanId) return root;
+		const found = findSpanById(root.children, spanId);
+		if (found) return found;
+	}
+	return null;
+}
+function getAncestorPath(rootSpans, targetId) {
+	const path = [];
+	function walk(span, ancestors) {
+		if (span.spanId === targetId) {
+			path.push(...ancestors, span);
+			return true;
+		}
+		for (const child of span.children) if (walk(child, [...ancestors, span])) return true;
+		return false;
+	}
+	for (const root of rootSpans) if (walk(root, [])) break;
+	return path;
+}
+function FlamegraphView({ trace, onSpanClick, selectedSpanId }) {
+	const [zoomSpanId, setZoomSpanId] = useState(null);
+	const [tooltip, setTooltip] = useState(null);
+	const zoomRoot = useMemo(() => {
+		if (!zoomSpanId) return null;
+		return findSpanById(trace.rootSpans, zoomSpanId);
+	}, [trace.rootSpans, zoomSpanId]);
+	const breadcrumbs = useMemo(() => {
+		if (!zoomSpanId) return [];
+		return getAncestorPath(trace.rootSpans, zoomSpanId);
+	}, [trace.rootSpans, zoomSpanId]);
+	const viewRoots = zoomRoot ? [zoomRoot] : trace.rootSpans;
+	const viewMinTime = zoomRoot ? zoomRoot.startTimeUnixMs : trace.minTimeMs;
+	const viewDuration = (zoomRoot ? zoomRoot.endTimeUnixMs : trace.maxTimeMs) - viewMinTime;
+	const flatSpans = useMemo(() => flattenAllSpans(viewRoots).map((fs) => ({
+		span: fs.span,
+		depth: fs.level
+	})), [viewRoots]);
+	const maxDepth = useMemo(() => flatSpans.reduce((max, fs) => Math.max(max, fs.depth), 0) + 1, [flatSpans]);
+	const svgWidth = 1200;
+	const svgHeight = maxDepth * ROW_HEIGHT;
+	const handleClick = useCallback((span) => {
+		onSpanClick?.(span);
+		setZoomSpanId(span.spanId);
+	}, [onSpanClick]);
+	const handleZoomOut = useCallback((spanId) => {
+		setZoomSpanId(spanId);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex-1 overflow-auto p-2",
+		children: [
+			breadcrumbs.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1 text-xs text-muted-foreground mb-2 flex-wrap",
+				children: [/* @__PURE__ */ jsx("button", {
+					className: "hover:text-foreground underline",
+					onClick: () => handleZoomOut(null),
+					children: "root"
+				}), breadcrumbs.map((bc, i) => /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground/50",
+						children: ">"
+					}), i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsxs("button", {
+						className: "hover:text-foreground underline",
+						onClick: () => handleZoomOut(bc.spanId),
+						children: [
+							bc.serviceName,
+							": ",
+							bc.name
+						]
+					}) : /* @__PURE__ */ jsxs("span", {
+						className: "text-foreground",
+						children: [
+							bc.serviceName,
+							": ",
+							bc.name
+						]
+					})]
+				}, bc.spanId))]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ jsx("svg", {
+					width: svgWidth,
+					height: svgHeight,
+					className: "block",
+					onMouseLeave: () => setTooltip(null),
+					children: flatSpans.map(({ span, depth }) => {
+						const x = viewDuration > 0 ? (span.startTimeUnixMs - viewMinTime) / viewDuration * svgWidth : 0;
+						const w = viewDuration > 0 ? Math.max(MIN_WIDTH, span.durationMs / viewDuration * svgWidth) : svgWidth;
+						const y = depth * ROW_HEIGHT;
+						const color = getServiceColor(span.serviceName);
+						const isSelected = span.spanId === selectedSpanId;
+						const showLabel = w >= LABEL_MIN_WIDTH;
+						const label = `${span.serviceName}: ${span.name}`;
+						return /* @__PURE__ */ jsxs("g", {
+							className: "cursor-pointer",
+							onClick: () => handleClick(span),
+							onMouseEnter: (e) => setTooltip({
+								span,
+								x: e.clientX,
+								y: e.clientY
+							}),
+							onMouseMove: (e) => setTooltip((prev) => prev ? {
+								...prev,
+								x: e.clientX,
+								y: e.clientY
+							} : null),
+							onMouseLeave: () => setTooltip(null),
+							children: [/* @__PURE__ */ jsx("rect", {
+								x,
+								y,
+								width: w,
+								height: ROW_HEIGHT - 1,
+								fill: color,
+								opacity: .85,
+								rx: 2,
+								stroke: isSelected ? "#ffffff" : "transparent",
+								strokeWidth: isSelected ? 2 : 0,
+								className: "hover:opacity-100"
+							}), showLabel && /* @__PURE__ */ jsx("text", {
+								x: x + 4,
+								y: y + ROW_HEIGHT / 2 + 1,
+								dominantBaseline: "middle",
+								fill: "#ffffff",
+								fontSize: 11,
+								fontFamily: "monospace",
+								clipPath: `inset(0 0 0 0)`,
+								children: /* @__PURE__ */ jsx("tspan", { children: label.length > w / 7 ? label.slice(0, Math.floor(w / 7) - 1) + "…" : label })
+							})]
+						}, span.spanId);
+					})
+				})
+			}),
+			tooltip && /* @__PURE__ */ jsxs("div", {
+				className: "fixed z-50 pointer-events-none bg-popover border border-border rounded px-3 py-2 text-xs shadow-lg",
+				style: {
+					left: tooltip.x + 12,
+					top: tooltip.y + 12
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "font-medium text-foreground",
+						children: tooltip.span.name
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground",
+						children: tooltip.span.serviceName
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "text-foreground mt-1",
+						children: formatDuration(tooltip.span.durationMs)
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/observability/TraceTimeline/Minimap.tsx
+/**
+* Minimap - Compressed overview of all spans with a draggable viewport.
+*/
+const MINIMAP_HEIGHT = 40;
+const SPAN_HEIGHT = 2;
+const SPAN_GAP = 1;
+const MIN_VIEWPORT_WIDTH = .02;
+const HANDLE_WIDTH = 6;
+function Minimap({ trace, viewStart, viewEnd, onViewChange }) {
+	const containerRef = useRef(null);
+	const dragRef = useRef(null);
+	const cleanupRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			cleanupRef.current?.();
+		};
+	}, []);
+	const allSpans = useMemo(() => flattenAllSpans(trace.rootSpans), [trace.rootSpans]);
+	const traceDuration = trace.maxTimeMs - trace.minTimeMs;
+	const getFraction = useCallback((clientX) => {
+		const el = containerRef.current;
+		if (!el) return 0;
+		const rect = el.getBoundingClientRect();
+		if (!rect.width) return 0;
+		return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+	}, []);
+	const clampView = useCallback((start, end) => {
+		let s = Math.max(0, Math.min(1 - MIN_VIEWPORT_WIDTH, start));
+		let e = Math.max(s + MIN_VIEWPORT_WIDTH, Math.min(1, end));
+		if (e > 1) {
+			e = 1;
+			s = Math.max(0, e - Math.max(MIN_VIEWPORT_WIDTH, end - start));
+		}
+		return [s, e];
+	}, []);
+	const handleMouseDown = useCallback((e, mode) => {
+		e.preventDefault();
+		e.stopPropagation();
+		cleanupRef.current?.();
+		dragRef.current = {
+			mode,
+			startX: e.clientX,
+			origViewStart: viewStart,
+			origViewEnd: viewEnd
+		};
+		const handleMouseMove = (ev) => {
+			const drag = dragRef.current;
+			if (!drag || !containerRef.current) return;
+			const rect = containerRef.current.getBoundingClientRect();
+			if (!rect.width) return;
+			const deltaFrac = (ev.clientX - drag.startX) / rect.width;
+			let newStart;
+			let newEnd;
+			if (drag.mode === "pan") {
+				const width = drag.origViewEnd - drag.origViewStart;
+				newStart = drag.origViewStart + deltaFrac;
+				newEnd = newStart + width;
+				if (newStart < 0) {
+					newStart = 0;
+					newEnd = width;
+				}
+				if (newEnd > 1) {
+					newEnd = 1;
+					newStart = 1 - width;
+				}
+			} else if (drag.mode === "resize-left") {
+				newStart = drag.origViewStart + deltaFrac;
+				newEnd = drag.origViewEnd;
+			} else {
+				newStart = drag.origViewStart;
+				newEnd = drag.origViewEnd + deltaFrac;
+			}
+			const [s, e] = clampView(newStart, newEnd);
+			onViewChange(s, e);
+		};
+		const handleMouseUp = () => {
+			dragRef.current = null;
+			cleanupRef.current = null;
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("mouseup", handleMouseUp);
+		};
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleMouseUp);
+		cleanupRef.current = handleMouseUp;
+	}, [
+		viewStart,
+		viewEnd,
+		onViewChange,
+		clampView
+	]);
+	const handleBackgroundClick = useCallback((e) => {
+		if (dragRef.current) return;
+		if (e.target !== e.currentTarget) return;
+		const frac = getFraction(e.clientX);
+		const half = (viewEnd - viewStart) / 2;
+		const [s, eVal] = clampView(frac - half, frac + half);
+		onViewChange(s, eVal);
+	}, [
+		viewStart,
+		viewEnd,
+		onViewChange,
+		getFraction,
+		clampView
+	]);
+	const handleKeyDown = useCallback((e) => {
+		const step = .05;
+		const width = viewEnd - viewStart;
+		let newStart;
+		if (e.key === "ArrowLeft" || e.key === "ArrowUp") newStart = viewStart - step;
+		else if (e.key === "ArrowRight" || e.key === "ArrowDown") newStart = viewStart + step;
+		else return;
+		e.preventDefault();
+		const [s, eVal] = clampView(newStart, newStart + width);
+		onViewChange(s, eVal);
+	}, [
+		viewStart,
+		viewEnd,
+		onViewChange,
+		clampView
+	]);
+	const viewStartPct = viewStart * 100;
+	const viewEndPct = viewEnd * 100;
+	const viewWidthPct = viewEndPct - viewStartPct;
+	const totalRows = allSpans.length;
+	const availableHeight = MINIMAP_HEIGHT - 4;
+	const rowHeight = totalRows > 0 ? Math.min(SPAN_HEIGHT + SPAN_GAP, availableHeight / totalRows) : SPAN_HEIGHT;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative w-full border-b border-border bg-muted/30 select-none",
+		style: { height: MINIMAP_HEIGHT },
+		onClick: handleBackgroundClick,
+		onKeyDown: handleKeyDown,
+		role: "slider",
+		tabIndex: 0,
+		"aria-label": "Trace minimap viewport",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(viewStartPct),
+		children: [
+			traceDuration > 0 && allSpans.map(({ span }, i) => {
+				const left = (span.startTimeUnixMs - trace.minTimeMs) / traceDuration * 100;
+				const width = Math.max(.2, span.durationMs / traceDuration * 100);
+				const color = getSpanBarColor(span.serviceName, span.status === "ERROR");
+				return /* @__PURE__ */ jsx("div", {
+					className: "absolute pointer-events-none",
+					style: {
+						left: `${left}%`,
+						width: `${width}%`,
+						top: 2 + i * rowHeight,
+						height: Math.max(1, rowHeight - SPAN_GAP),
+						backgroundColor: color,
+						opacity: .8,
+						borderRadius: 1
+					}
+				}, span.spanId);
+			}),
+			viewStartPct > 0 && /* @__PURE__ */ jsx("div", {
+				className: "absolute top-0 left-0 h-full bg-black/30 pointer-events-none",
+				style: { width: `${viewStartPct}%` }
+			}),
+			viewEndPct < 100 && /* @__PURE__ */ jsx("div", {
+				className: "absolute top-0 h-full bg-black/30 pointer-events-none",
+				style: {
+					left: `${viewEndPct}%`,
+					right: 0
+				}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "absolute top-0 h-full border border-blue-500/50 bg-blue-500/10 cursor-grab active:cursor-grabbing",
+				style: {
+					left: `${viewStartPct}%`,
+					width: `${viewWidthPct}%`
+				},
+				onMouseDown: (e) => handleMouseDown(e, "pan"),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "absolute top-0 left-0 h-full cursor-ew-resize z-10",
+					style: {
+						width: HANDLE_WIDTH,
+						marginLeft: -HANDLE_WIDTH / 2
+					},
+					onMouseDown: (e) => handleMouseDown(e, "resize-left")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "absolute top-0 right-0 h-full cursor-ew-resize z-10",
+					style: {
+						width: HANDLE_WIDTH,
+						marginRight: -HANDLE_WIDTH / 2
+					},
+					onMouseDown: (e) => handleMouseDown(e, "resize-right")
+				})]
+			})
+		]
+	});
+}
 //#endregion
 //#region src/components/observability/TraceTimeline/index.tsx
 /**
@@ -1930,25 +2859,43 @@ function isSpanAncestorOf(potentialAncestor, descendantId, flattenedSpans) {
 	}
 	return false;
 }
-function TraceTimeline({ rows, onSpanClick, selectedSpanId: externalSelectedSpanId, isLoading, error }) {
+function collectServices(rootSpans) {
+	const set = /* @__PURE__ */ new Set();
+	function walk(span) {
+		set.add(span.serviceName);
+		span.children.forEach(walk);
+	}
+	rootSpans.forEach(walk);
+	return Array.from(set).sort();
+}
+function TraceTimeline({ rows, onSpanClick, onSpanDeselect, selectedSpanId: externalSelectedSpanId, isLoading, error, view: externalView, onViewChange, uiFind: externalUiFind, onUiFindChange, viewStart: externalViewStart, viewEnd: externalViewEnd, onViewRangeChange }) {
 	useRegisterShortcuts("trace-viewer", TRACE_VIEWER_SHORTCUTS);
 	const [collapsedIds, setCollapsedIds] = useState(/* @__PURE__ */ new Set());
 	const [internalSelectedSpanId, setInternalSelectedSpanId] = useState(null);
 	const [hoveredSpanId, setHoveredSpanId] = useState(null);
+	const [internalView, setInternalView] = useState("timeline");
+	const [internalUiFind, setInternalUiFind] = useState("");
+	const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
+	const [headerCollapsed, setHeaderCollapsed] = useState(false);
+	const [internalViewStart, setInternalViewStart] = useState(0);
+	const [internalViewEnd, setInternalViewEnd] = useState(1);
 	const selectedSpanId = externalSelectedSpanId ?? internalSelectedSpanId;
+	const viewStart = externalViewStart ?? internalViewStart;
+	const viewEnd = externalViewEnd ?? internalViewEnd;
+	const activeView = externalView ?? internalView;
+	const uiFind = externalUiFind ?? internalUiFind;
 	const scrollRef = useRef(null);
 	const announcementRef = useRef(null);
 	const parsedTrace = useMemo(() => buildTrace(rows), [rows]);
+	const services = useMemo(() => parsedTrace ? collectServices(parsedTrace.rootSpans) : [], [parsedTrace]);
 	const flattenedSpans = useMemo(() => {
 		if (!parsedTrace) return [];
 		return flattenTree(parsedTrace.rootSpans, collapsedIds);
 	}, [parsedTrace, collapsedIds]);
-	const virtualizer = useVirtualizer({
-		count: flattenedSpans.length,
-		getScrollElement: () => scrollRef.current,
-		estimateSize: () => 32,
-		overscan: 5
-	});
+	const matchingIndices = useMemo(() => {
+		if (!uiFind) return [];
+		return flattenedSpans.map((item, idx) => spanMatchesSearch(item.span, uiFind) ? idx : -1).filter((idx) => idx !== -1);
+	}, [flattenedSpans, uiFind]);
 	const handleToggleCollapse = (spanId) => {
 		setCollapsedIds((prev) => {
 			const next = new Set(prev);
@@ -1957,11 +2904,22 @@ function TraceTimeline({ rows, onSpanClick, selectedSpanId: externalSelectedSpan
 			return next;
 		});
 	};
+	const handleDeselect = useCallback(() => {
+		setInternalSelectedSpanId(null);
+		onSpanDeselect?.();
+	}, [onSpanDeselect]);
 	const handleSpanClick = useCallback((span) => {
-		setInternalSelectedSpanId(span.spanId);
-		onSpanClick?.(span);
-		if (announcementRef.current) announcementRef.current.textContent = `Selected span: ${span.name}, duration: ${formatDuration(span.durationMs)}`;
-	}, [onSpanClick]);
+		if (selectedSpanId === span.spanId) handleDeselect();
+		else {
+			setInternalSelectedSpanId(span.spanId);
+			onSpanClick?.(span);
+			if (announcementRef.current) announcementRef.current.textContent = `Selected span: ${span.name}, duration: ${formatDuration(span.durationMs)}`;
+		}
+	}, [
+		onSpanClick,
+		selectedSpanId,
+		handleDeselect
+	]);
 	const handleExpandAll = useCallback(() => {
 		setCollapsedIds(/* @__PURE__ */ new Set());
 	}, []);
@@ -2010,23 +2968,77 @@ function TraceTimeline({ rows, onSpanClick, selectedSpanId: externalSelectedSpan
 			return next;
 		});
 	}, [selectedSpanId, flattenedSpans]);
-	const handleDeselect = useCallback(() => {
-		setInternalSelectedSpanId(null);
-	}, []);
-	useEffect(() => {
-		if (!selectedSpanId) return;
-		const selectedIndex = flattenedSpans.findIndex((item) => item.span.spanId === selectedSpanId);
-		if (selectedIndex !== -1) virtualizer.scrollToIndex(selectedIndex, {
-			align: "center",
+	const handleViewChange = useCallback((view) => {
+		if (onViewChange) onViewChange(view);
+		else setInternalView(view);
+	}, [onViewChange]);
+	const handleUiFindChange = useCallback((value) => {
+		if (onUiFindChange) onUiFindChange(value);
+		else setInternalUiFind(value);
+		setCurrentMatchIndex(0);
+	}, [onUiFindChange]);
+	const handleViewRangeChange = useCallback((start, end) => {
+		if (onViewRangeChange) onViewRangeChange(start, end);
+		else {
+			setInternalViewStart(start);
+			setInternalViewEnd(end);
+		}
+	}, [onViewRangeChange]);
+	const scrollToSpan = useCallback((spanId) => {
+		(scrollRef.current?.querySelector(`[data-span-id="${spanId}"]`))?.scrollIntoView({
+			block: "center",
 			behavior: "smooth"
 		});
+	}, []);
+	const handleSearchNext = useCallback(() => {
+		if (matchingIndices.length === 0) return;
+		const next = (currentMatchIndex + 1) % matchingIndices.length;
+		setCurrentMatchIndex(next);
+		const idx = matchingIndices[next];
+		if (idx !== void 0) {
+			const item = flattenedSpans[idx];
+			if (item) {
+				handleSpanClick(item.span);
+				scrollToSpan(item.span.spanId);
+			}
+		}
 	}, [
-		selectedSpanId,
+		matchingIndices,
+		currentMatchIndex,
 		flattenedSpans,
-		virtualizer
+		handleSpanClick,
+		scrollToSpan
+	]);
+	const handleSearchPrev = useCallback(() => {
+		if (matchingIndices.length === 0) return;
+		const prev = (currentMatchIndex - 1 + matchingIndices.length) % matchingIndices.length;
+		setCurrentMatchIndex(prev);
+		const idx = matchingIndices[prev];
+		if (idx !== void 0) {
+			const item = flattenedSpans[idx];
+			if (item) {
+				handleSpanClick(item.span);
+				scrollToSpan(item.span.spanId);
+			}
+		}
+	}, [
+		matchingIndices,
+		currentMatchIndex,
+		flattenedSpans,
+		handleSpanClick,
+		scrollToSpan
 	]);
+	useEffect(() => {
+		if (!selectedSpanId) return;
+		scrollToSpan(selectedSpanId);
+	}, [selectedSpanId, scrollToSpan]);
 	useEffect(() => {
 		const handleKeyDown = (e) => {
+			if (e.key === "Escape" && selectedSpanId) {
+				e.preventDefault();
+				handleDeselect();
+				return;
+			}
 			if (!(scrollRef.current?.parentElement)?.contains(document.activeElement)) return;
 			switch (e.key) {
 				case "ArrowUp":
@@ -2049,10 +3061,7 @@ function TraceTimeline({ rows, onSpanClick, selectedSpanId: externalSelectedSpan
 					e.preventDefault();
 					handleCollapseExpand(false);
 					break;
-				case "Escape":
-					e.preventDefault();
-					handleDeselect();
-					break;
+				case "Escape": break;
 				case "Enter":
 					if (selectedSpanId) {
 						e.preventDefault();
@@ -2120,10 +3129,9 @@ function TraceTimeline({ rows, onSpanClick, selectedSpanId: externalSelectedSpan
 		})
 	});
 	const totalDurationMs = parsedTrace.maxTimeMs - parsedTrace.minTimeMs;
-	const selectedSpan = selectedSpanId && flattenedSpans.length > 0 ? flattenedSpans.find((item) => item.span.spanId === selectedSpanId)?.span : null;
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		className: "flex h-full bg-background",
-		children: [/* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col flex-1 min-w-0",
 			children: [
 				/* @__PURE__ */ jsx("div", {
@@ -2133,39 +3141,58 @@ function TraceTimeline({ rows, onSpanClick, selectedSpanId: externalSelectedSpan
 					"aria-live": "polite",
 					"aria-atomic": "true"
 				}),
-				/* @__PURE__ */ jsx(TraceHeader, { trace: parsedTrace }),
-				/* @__PURE__ */ jsx("div", {
-					ref: scrollRef,
-					className: "flex-1 overflow-auto outline-none",
-					role: "tree",
-					"aria-label": "Trace timeline",
-					tabIndex: 0,
-					children: /* @__PURE__ */ jsx("div", {
-						style: {
-							height: `${virtualizer.getTotalSize()}px`,
-							width: "100%",
-							position: "relative"
-						},
-						children: virtualizer.getVirtualItems().map((virtualItem) => {
-							const item = flattenedSpans[virtualItem.index];
-							if (!item) return null;
+				/* @__PURE__ */ jsx(TraceHeader, {
+					trace: parsedTrace,
+					services,
+					onHeaderToggle: () => setHeaderCollapsed((p) => !p),
+					isCollapsed: headerCollapsed
+				}),
+				/* @__PURE__ */ jsx(ViewTabs, {
+					activeView,
+					onChange: handleViewChange
+				}),
+				/* @__PURE__ */ jsx(SpanSearch, {
+					value: uiFind,
+					onChange: handleUiFindChange,
+					matchCount: matchingIndices.length,
+					currentMatch: currentMatchIndex,
+					onPrev: handleSearchPrev,
+					onNext: handleSearchNext
+				}),
+				activeView === "graph" ? /* @__PURE__ */ jsx(GraphView, { trace: parsedTrace }) : activeView === "statistics" ? /* @__PURE__ */ jsx(StatisticsView, { trace: parsedTrace }) : activeView === "flamegraph" ? /* @__PURE__ */ jsx(FlamegraphView, {
+					trace: parsedTrace,
+					onSpanClick: handleSpanClick,
+					selectedSpanId: selectedSpanId ?? void 0
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Minimap, {
+						trace: parsedTrace,
+						viewStart,
+						viewEnd,
+						onViewChange: handleViewRangeChange
+					}),
+					/* @__PURE__ */ jsx(TimeRuler, {
+						totalDurationMs: totalDurationMs * (viewEnd - viewStart),
+						leftColumnWidth: "24rem",
+						offsetMs: totalDurationMs * viewStart
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: scrollRef,
+						className: "flex-1 overflow-auto outline-none",
+						role: "tree",
+						"aria-label": "Trace timeline",
+						tabIndex: 0,
+						children: flattenedSpans.map((item) => {
 							const { span, level } = item;
 							const isCollapsed = collapsedIds.has(span.spanId);
 							const isSelected = span.spanId === selectedSpanId;
 							const isHovered = span.spanId === hoveredSpanId;
 							const isParentOfHovered = hoveredSpanId ? isSpanAncestorOf(span, hoveredSpanId, flattenedSpans) : false;
-							const relativeStart = calculateRelativeTime(span.startTimeUnixMs, parsedTrace.minTimeMs, parsedTrace.maxTimeMs);
-							const relativeDuration = calculateRelativeDuration(span.durationMs, totalDurationMs);
-							return /* @__PURE__ */ jsx("div", {
-								style: {
-									position: "absolute",
-									top: 0,
-									left: 0,
-									width: "100%",
-									height: `${virtualItem.size}px`,
-									transform: `translateY(${virtualItem.start}px)`
-								},
-								children: /* @__PURE__ */ jsx(SpanRow, {
+							const viewRange = viewEnd - viewStart;
+							const relativeStart = (calculateRelativeTime(span.startTimeUnixMs, parsedTrace.minTimeMs, parsedTrace.maxTimeMs) - viewStart) / viewRange;
+							const relativeDuration = calculateRelativeDuration(span.durationMs, totalDurationMs) / viewRange;
+							return /* @__PURE__ */ jsxs("div", {
+								"data-span-id": span.spanId,
+								children: [/* @__PURE__ */ jsx(SpanRow, {
 									span,
 									level,
 									isCollapsed,
@@ -2177,34 +3204,30 @@ function TraceTimeline({ rows, onSpanClick, selectedSpanId: externalSelectedSpan
 									onClick: () => handleSpanClick(span),
 									onToggleCollapse: () => handleToggleCollapse(span.spanId),
 									onMouseEnter: () => setHoveredSpanId(span.spanId),
-									onMouseLeave: () => setHoveredSpanId(null)
-								})
+									onMouseLeave: () => setHoveredSpanId(null),
+									uiFind: uiFind || void 0
+								}), isSelected && /* @__PURE__ */ jsx(SpanDetailInline, {
+									span,
+									traceStartMs: parsedTrace.minTimeMs
+								})]
 							}, span.spanId);
 						})
 					})
-				})
+				] })
 			]
-		}), selectedSpan && /* @__PURE__ */ jsx("div", {
-			className: "w-96 h-full flex-shrink-0",
-			children: /* @__PURE__ */ jsx(DetailPane, {
-				span: selectedSpan,
-				onClose: handleDeselect,
-				onLinkClick: void 0
-			})
-		})]
+		})
 	});
 }
-
 //#endregion
 //#region src/components/observability/TraceDetail/index.tsx
-function TraceDetail({ service, traceId, rows, isLoading, error, selectedSpanId, onSpanClick, onBack }) {
+function TraceDetail({ traceId, rows, isLoading, error, selectedSpanId, onSpanClick, onSpanDeselect, onBack }) {
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-1.5 text-sm text-muted-foreground mb-4",
 		children: [
-			/* @__PURE__ */ jsxs("button", {
+			/* @__PURE__ */ jsx("button", {
 				onClick: onBack,
 				className: "hover:text-foreground transition-colors",
-				children: ["Services / ", service]
+				children: "Traces"
 			}),
 			/* @__PURE__ */ jsx("span", { children: "/" }),
 			/* @__PURE__ */ jsxs("span", {
@@ -2217,10 +3240,10 @@ function TraceDetail({ service, traceId, rows, isLoading, error, selectedSpanId,
 		isLoading,
 		error,
 		selectedSpanId,
-		onSpanClick
+		onSpanClick,
+		onSpanDeselect
 	})] });
 }
-
 //#endregion
 //#region src/components/observability/LogTimeline/LogRow.tsx
 function formatTimestamp(timeMs) {
@@ -2346,7 +3369,6 @@ const LogRow = memo(function LogRow({ log, isSelected, onClick, searchText, rela
 		]
 	});
 });
-
 //#endregion
 //#region src/components/observability/LogTimeline/LogDetailPane/AttributesTab.tsx
 function AttributesTab({ log }) {
@@ -2379,7 +3401,6 @@ function AttributesTab({ log }) {
 		})
 	});
 }
-
 //#endregion
 //#region src/components/observability/LogTimeline/LogDetailPane/JsonTreeView.tsx
 function JsonTreeView({ data, level = 0 }) {
@@ -2467,7 +3488,6 @@ function formatPrimitiveValue(value) {
 	if (typeof value === "number") return String(value);
 	return String(value);
 }
-
 //#endregion
 //#region src/components/observability/LogTimeline/LogDetailPane/index.tsx
 function LogDetailPane({ log, onClose, onTraceLinkClick, initialTab = "message", wordWrap = true }) {
@@ -2679,7 +3699,6 @@ function getSeverityColor(severity) {
 		bg: "bg-gray-50 dark:bg-gray-800/20"
 	};
 }
-
 //#endregion
 //#region src/components/observability/LogTimeline/shortcuts.ts
 const LOG_VIEWER_SHORTCUTS = {
@@ -2731,7 +3750,6 @@ const LOG_VIEWER_SHORTCUTS = {
 		}
 	]
 };
-
 //#endregion
 //#region src/components/observability/LogTimeline/index.tsx
 /**
@@ -2937,7 +3955,7 @@ function LogTimeline({ rows, onLogClick, onTraceLinkClick, selectedLogId: extern
 	useEffect(() => {
 		const handleKeyDown = (e) => {
 			const isFormField = e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement;
-			if (isFormField && e.key === "Escape") {
+			if (isFormField && e.key === "Escape" && e.target instanceof HTMLElement) {
 				e.target.blur();
 				return;
 			}
@@ -3178,7 +4196,6 @@ function LogTimeline({ rows, onLogClick, onTraceLinkClick, selectedLogId: extern
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/observability/LogTimeline/LogFilter.tsx
 /**
@@ -3279,7 +4296,7 @@ function MultiSelect({ options, selected, onChange, testId }) {
 	useEffect(() => {
 		if (!dropOpen) return;
 		const handler = (e) => {
-			if (ref.current && !ref.current.contains(e.target)) setDropOpen(false);
+			if (ref.current && e.target instanceof Node && !ref.current.contains(e.target)) setDropOpen(false);
 		};
 		document.addEventListener("mousedown", handler);
 		return () => document.removeEventListener("mousedown", handler);
@@ -3730,7 +4747,6 @@ function LogFilter({ value, onChange, rows = [], selectedServices = [], onSelect
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/observability/utils/lttb.ts
 function triangleArea(p1, p2, p3) {
@@ -3796,7 +4812,27 @@ function downsampleLTTB(data, targetPoints) {
 	if (lastPoint) sampled.push(lastPoint);
 	return sampled;
 }
-
+//#endregion
+//#region src/components/observability/shared/TooltipEntryList.tsx
+function TooltipEntryList({ payload, displayLabelMap, formatValue }) {
+	return payload.map((entry, i) => {
+		const dataKey = entry.dataKey;
+		const value = entry.value;
+		if (typeof dataKey !== "string" || typeof value !== "number") return null;
+		return /* @__PURE__ */ jsxs("p", {
+			className: "text-sm",
+			style: { color: entry.color },
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [displayLabelMap.get(dataKey) ?? dataKey, ":"]
+				}),
+				" ",
+				formatValue(value)
+			]
+		}, i);
+	});
+}
 //#endregion
 //#region src/components/observability/utils/units.ts
 const BYTE_SCALES = [
@@ -3971,7 +5007,6 @@ function formatDisplayValue(value, scale) {
 function formatOtelValue(value, unit) {
 	return formatDisplayValue(value, resolveUnitScale(unit, Math.abs(value)));
 }
-
 //#endregion
 //#region src/components/observability/MetricTimeSeries/index.tsx
 /**
@@ -4280,18 +5315,11 @@ function CustomTooltip({ active, payload, label, formatTime, formatValue, displa
 		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))]
+		}), /* @__PURE__ */ jsx(TooltipEntryList, {
+			payload,
+			displayLabelMap,
+			formatValue
+		})]
 	});
 }
 function MetricLoadingSkeleton({ height = 400 }) {
@@ -4338,7 +5366,6 @@ function MetricLoadingSkeleton({ height = 400 }) {
 		})
 	});
 }
-
 //#endregion
 //#region src/components/observability/MetricHistogram/index.tsx
 /**
@@ -4352,6 +5379,9 @@ const COLORS = [
 	"#00C49F",
 	"#0088FE"
 ];
+function isBucketData(v) {
+	return typeof v === "object" && v !== null && "bucket" in v && "lowerBound" in v;
+}
 const defaultFormatBucketLabel = (bound, index, bounds) => {
 	if (index === 0) return `≤${bound}`;
 	if (index === bounds.length) return `>${bounds[bounds.length - 1]}`;
@@ -4394,7 +5424,8 @@ function buildHistogramData(rows, formatLabel = defaultFormatBucketLabel) {
 				};
 				buckets.push(bucket);
 			}
-			bucket[seriesName] = (bucket[seriesName] ?? 0) + count;
+			const prev = bucket[seriesName];
+			bucket[seriesName] = (typeof prev === "number" ? prev : 0) + count;
 		}
 	}
 	buckets.sort((a, b) => a.lowerBound - b.lowerBound);
@@ -4531,25 +5562,18 @@ function MetricHistogram({ rows, isLoading = false, error, height = 400, unit: u
 }
 function HistogramTooltip({ active, payload, formatValue, boundsScale, displayLabelMap }) {
 	if (!active || !payload?.length) return null;
-	const bucket = payload[0]?.payload;
-	if (!bucket) return null;
+	const raw = payload[0]?.payload;
+	if (!isBucketData(raw)) 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))]
+			children: ["Bucket: ", boundsScale ? `${formatDisplayValue(raw.lowerBound, boundsScale)} – ${raw.upperBound === Infinity ? "∞" : formatDisplayValue(raw.upperBound, boundsScale)}` : raw.bucket]
+		}), /* @__PURE__ */ jsx(TooltipEntryList, {
+			payload,
+			displayLabelMap,
+			formatValue
+		})]
 	});
 }
 function HistogramLoadingSkeleton({ height = 400 }) {
@@ -4589,7 +5613,6 @@ function HistogramLoadingSkeleton({ height = 400 }) {
 		})
 	});
 }
-
 //#endregion
 //#region src/components/observability/MetricStat/index.tsx
 /**
@@ -4782,7 +5805,6 @@ function TrendIndicator({ direction, value }) {
 		children: [arrow, value !== void 0 && ` ${Math.abs(value).toFixed(1)}%`]
 	});
 }
-
 //#endregion
 //#region src/components/observability/MetricTable/index.tsx
 /**
@@ -4922,7 +5944,6 @@ function MetricTable({ rows, isLoading = false, error, maxRows = 100, formatValu
 		})]
 	});
 }
-
 //#endregion
 //#region src/lib/renderer.tsx
 /**
@@ -5027,7 +6048,6 @@ function Renderer({ tree, registry, fallback }) {
 		fallback
 	});
 }
-
 //#endregion
 //#region src/lib/catalog.ts
 const dashboardCatalog = createCatalog({
@@ -5227,8 +6247,7 @@ const dashboardCatalog = createCatalog({
 		}
 	}
 });
-const componentList = Object.keys(dashboardCatalog.components);
-
+Object.keys(dashboardCatalog.components);
 //#endregion
 //#region src/components/dashboard/Badge/index.tsx
 function Badge({ element }) {
@@ -5252,7 +6271,6 @@ function Badge({ element }) {
 		children: text
 	});
 }
-
 //#endregion
 //#region src/components/dashboard/Card/index.tsx
 function Card({ element, children }) {
@@ -5293,7 +6311,6 @@ function Card({ element, children }) {
 		})]
 	});
 }
-
 //#endregion
 //#region src/components/dashboard/Divider/index.tsx
 function Divider({ element }) {
@@ -5331,7 +6348,6 @@ function Divider({ element }) {
 		margin: "16px 0"
 	} });
 }
-
 //#endregion
 //#region src/components/dashboard/Empty/index.tsx
 function Empty({ element, onAction }) {
@@ -5374,7 +6390,6 @@ function Empty({ element, onAction }) {
 		]
 	});
 }
-
 //#endregion
 //#region src/components/dashboard/Grid/index.tsx
 function Grid({ element, children }) {
@@ -5392,7 +6407,6 @@ function Grid({ element, children }) {
 		children
 	});
 }
-
 //#endregion
 //#region src/components/dashboard/Heading/index.tsx
 function Heading({ element }) {
@@ -5411,7 +6425,6 @@ function Heading({ element }) {
 		children: text
 	});
 }
-
 //#endregion
 //#region src/components/dashboard/Stack/index.tsx
 function Stack({ element, children }) {
@@ -5435,7 +6448,6 @@ function Stack({ element, children }) {
 		children
 	});
 }
-
 //#endregion
 //#region src/components/dashboard/Text/index.tsx
 function Text({ element }) {
@@ -5454,7 +6466,6 @@ function Text({ element }) {
 		children: content
 	});
 }
-
 //#endregion
 //#region src/components/observability/renderers/OtelLogTimeline.tsx
 function OtelLogTimeline(props) {
@@ -5476,7 +6487,6 @@ function OtelLogTimeline(props) {
 		})
 	});
 }
-
 //#endregion
 //#region src/components/observability/renderers/OtelMetricDiscovery.tsx
 const TYPE_ORDER = {
@@ -5554,7 +6564,6 @@ function OtelMetricDiscovery(props) {
 		})
 	});
 }
-
 //#endregion
 //#region src/components/observability/renderers/OtelMetricHistogram.tsx
 function OtelMetricHistogram(props) {
@@ -5575,7 +6584,6 @@ function OtelMetricHistogram(props) {
 		unit: props.element.props.unit ?? void 0
 	});
 }
-
 //#endregion
 //#region src/components/observability/renderers/OtelMetricStat.tsx
 function OtelMetricStat(props) {
@@ -5596,7 +6604,6 @@ function OtelMetricStat(props) {
 		formatValue: formatOtelValue
 	});
 }
-
 //#endregion
 //#region src/components/observability/renderers/OtelMetricTable.tsx
 function OtelMetricTable(props) {
@@ -5615,7 +6622,6 @@ function OtelMetricTable(props) {
 		maxRows: props.element.props.maxRows ?? 100
 	});
 }
-
 //#endregion
 //#region src/components/observability/renderers/OtelMetricTimeSeries.tsx
 function OtelMetricTimeSeries(props) {
@@ -5637,7 +6643,6 @@ function OtelMetricTimeSeries(props) {
 		unit: props.element.props.unit ?? void 0
 	});
 }
-
 //#endregion
 //#region src/components/observability/renderers/OtelTraceDetail.tsx
 function OtelTraceDetail(props) {
@@ -5649,19 +6654,15 @@ function OtelTraceDetail(props) {
 		children: "No data source"
 	});
 	const rows = props.data?.data ?? [];
-	const firstRow = rows[0];
-	const service = firstRow?.ServiceName ?? "unknown";
-	const traceId = firstRow?.TraceId ?? "";
+	const traceId = rows[0]?.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, {
@@ -5687,24 +6688,275 @@ function DynamicDashboard({ kopaiClient, uiTree }) {
 		children: /* @__PURE__ */ jsx(MetricsRenderer, { tree: uiTree })
 	});
 }
-
+//#endregion
+//#region src/components/observability/TraceComparison/index.tsx
+function computeTraceStats(rows) {
+	if (rows.length === 0) return {
+		durationMs: 0,
+		spanCount: 0
+	};
+	let minTs = Infinity;
+	let maxEnd = -Infinity;
+	for (const row of rows) {
+		const startMs = parseInt(row.Timestamp, 10) / 1e6;
+		const endMs = startMs + (row.Duration ? parseInt(row.Duration, 10) : 0) / 1e6;
+		minTs = Math.min(minTs, startMs);
+		maxEnd = Math.max(maxEnd, endMs);
+	}
+	return {
+		durationMs: maxEnd - minTs,
+		spanCount: rows.length
+	};
+}
+function collectSignatures(rows) {
+	const map = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		const key = `${row.ServiceName ?? "unknown"}::${row.SpanName ?? ""}`;
+		const durMs = (row.Duration ? parseInt(row.Duration, 10) : 0) / 1e6;
+		const existing = map.get(key);
+		if (existing) {
+			existing.count++;
+			existing.totalDurationMs += durMs;
+		} else map.set(key, {
+			count: 1,
+			totalDurationMs: durMs
+		});
+	}
+	return map;
+}
+function computeDiff(rowsA, rowsB) {
+	const sigA = collectSignatures(rowsA);
+	const sigB = collectSignatures(rowsB);
+	const allKeys = new Set([...sigA.keys(), ...sigB.keys()]);
+	const result = [];
+	for (const key of allKeys) {
+		const [serviceName = "unknown", spanName = ""] = key.split("::");
+		const a = sigA.get(key);
+		const b = sigB.get(key);
+		const countA = a?.count ?? 0;
+		const countB = b?.count ?? 0;
+		const avgA = a ? a.totalDurationMs / a.count : 0;
+		const avgB = b ? b.totalDurationMs / b.count : 0;
+		result.push({
+			serviceName,
+			spanName,
+			countA,
+			countB,
+			avgDurationA: avgA,
+			avgDurationB: avgB,
+			deltaMs: avgB - avgA
+		});
+	}
+	return result.sort((a, b) => {
+		const aShared = a.countA > 0 && a.countB > 0;
+		if (aShared !== (b.countA > 0 && b.countB > 0)) return aShared ? 1 : -1;
+		return Math.abs(b.deltaMs) - Math.abs(a.deltaMs);
+	});
+}
+function formatDelta(ms) {
+	return `${ms > 0 ? "+" : ""}${formatDuration(ms)}`;
+}
+function TraceComparison({ traceIdA, traceIdB, onBack }) {
+	const dsA = useMemo(() => ({
+		method: "getTrace",
+		params: { traceId: traceIdA }
+	}), [traceIdA]);
+	const dsB = useMemo(() => ({
+		method: "getTrace",
+		params: { traceId: traceIdB }
+	}), [traceIdB]);
+	const { data: rowsA, loading: loadingA, error: errorA } = useKopaiData(dsA);
+	const { data: rowsB, loading: loadingB, error: errorB } = useKopaiData(dsB);
+	const statsA = useMemo(() => computeTraceStats(rowsA ?? []), [rowsA]);
+	const statsB = useMemo(() => computeTraceStats(rowsB ?? []), [rowsB]);
+	const diff = useMemo(() => computeDiff(rowsA ?? [], rowsB ?? []), [rowsA, rowsB]);
+	const durationDelta = statsB.durationMs - statsA.durationMs;
+	const spanDelta = statsB.spanCount - statsA.spanCount;
+	const isLoading = loadingA || loadingB;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between bg-background border border-border rounded-lg p-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-4",
+					children: [/* @__PURE__ */ jsx("button", {
+						onClick: onBack,
+						className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+						children: "← Back"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-6 text-sm",
+						children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground mr-1",
+							children: "A:"
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "font-mono text-xs text-foreground",
+							children: [traceIdA.slice(0, 16), "..."]
+						})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground mr-1",
+							children: "B:"
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "font-mono text-xs text-foreground",
+							children: [traceIdB.slice(0, 16), "..."]
+						})] })]
+					})]
+				}), !isLoading && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-6 text-sm",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground mr-1",
+						children: "Duration delta:"
+					}), /* @__PURE__ */ jsx("span", {
+						className: durationDelta > 0 ? "text-red-400" : durationDelta < 0 ? "text-green-400" : "text-foreground",
+						children: formatDelta(durationDelta)
+					})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground mr-1",
+						children: "Span count delta:"
+					}), /* @__PURE__ */ jsx("span", {
+						className: spanDelta > 0 ? "text-red-400" : spanDelta < 0 ? "text-green-400" : "text-foreground",
+						children: spanDelta > 0 ? `+${spanDelta}` : String(spanDelta)
+					})] })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-2 gap-4",
+				style: { height: "50vh" },
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "border border-border rounded-lg overflow-hidden",
+					children: /* @__PURE__ */ jsx(TraceTimeline, {
+						rows: rowsA ?? [],
+						isLoading: loadingA,
+						error: errorA ?? void 0
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "border border-border rounded-lg overflow-hidden",
+					children: /* @__PURE__ */ jsx(TraceTimeline, {
+						rows: rowsB ?? [],
+						isLoading: loadingB,
+						error: errorB ?? void 0
+					})
+				})]
+			}),
+			!isLoading && diff.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "border border-border rounded-lg overflow-hidden",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "px-4 py-3 border-b border-border bg-background",
+					children: /* @__PURE__ */ jsx("h3", {
+						className: "text-sm font-medium text-foreground",
+						children: "Structural Diff"
+					})
+				}), /* @__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: "border-b border-border bg-muted/30",
+							children: [
+								/* @__PURE__ */ jsx("th", {
+									className: "text-left px-4 py-2 text-muted-foreground font-medium",
+									children: "Service"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "text-left px-4 py-2 text-muted-foreground font-medium",
+									children: "Span"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "text-right px-4 py-2 text-muted-foreground font-medium",
+									children: "Count A"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "text-right px-4 py-2 text-muted-foreground font-medium",
+									children: "Count B"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "text-right px-4 py-2 text-muted-foreground font-medium",
+									children: "Avg Dur A"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "text-right px-4 py-2 text-muted-foreground font-medium",
+									children: "Avg Dur B"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "text-right px-4 py-2 text-muted-foreground font-medium",
+									children: "Delta"
+								})
+							]
+						}) }), /* @__PURE__ */ jsx("tbody", { children: diff.map((row) => {
+							const onlyA = row.countA > 0 && row.countB === 0;
+							const onlyB = row.countA === 0 && row.countB > 0;
+							return /* @__PURE__ */ jsxs("tr", {
+								className: `border-b border-border/50 ${onlyA ? "bg-red-500/5" : onlyB ? "bg-green-500/5" : ""}`,
+								children: [
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-1.5 text-foreground",
+										children: row.serviceName
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-1.5 font-mono text-xs text-foreground",
+										children: row.spanName
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-1.5 text-right text-foreground",
+										children: row.countA || /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground",
+											children: "-"
+										})
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-1.5 text-right text-foreground",
+										children: row.countB || /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground",
+											children: "-"
+										})
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-1.5 text-right text-foreground",
+										children: row.countA > 0 ? formatDuration(row.avgDurationA) : /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground",
+											children: "-"
+										})
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-1.5 text-right text-foreground",
+										children: row.countB > 0 ? formatDuration(row.avgDurationB) : /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground",
+											children: "-"
+										})
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-1.5 text-right",
+										children: row.countA > 0 && row.countB > 0 ? /* @__PURE__ */ jsx("span", {
+											className: row.deltaMs > 0 ? "text-red-400" : row.deltaMs < 0 ? "text-green-400" : "text-foreground",
+											children: formatDelta(row.deltaMs)
+										}) : /* @__PURE__ */ jsx("span", {
+											className: onlyA ? "text-red-400" : "text-green-400",
+											children: onlyA ? "removed" : "added"
+										})
+									})
+								]
+							}, `${row.serviceName}::${row.spanName}`);
+						}) })]
+					})
+				})]
+			})
+		]
+	});
+}
 //#endregion
 //#region src/components/observability/ServiceList/shortcuts.ts
 const SERVICES_SHORTCUTS = {
-	name: "Services",
+	name: "Traces",
 	shortcuts: [{
 		keys: ["Backspace"],
 		description: "Go back"
 	}]
 };
-
 //#endregion
 //#region src/pages/observability.tsx
 const TABS = [
 	{
 		key: "services",
-		label: "Services",
-		shortcutKey: "S"
+		label: "Traces",
+		shortcutKey: "T"
 	},
 	{
 		key: "logs",
@@ -5724,20 +6976,53 @@ function readURLState() {
 	const span = params.get("span");
 	const dashboardId = params.get("dashboardId");
 	const rawTab = params.get("tab");
+	const tab = service ? "services" : rawTab === "logs" || rawTab === "metrics" ? rawTab : "services";
+	const rawLimit = params.get("limit");
+	const limit = rawLimit ? parseInt(rawLimit, 10) : null;
 	return {
-		tab: service ? "services" : rawTab === "logs" || rawTab === "metrics" ? rawTab : "services",
+		tab,
 		service,
+		operation: params.get("operation"),
+		tags: params.get("tags"),
+		lookback: params.get("lookback"),
+		tsMin: params.get("tsMin"),
+		tsMax: params.get("tsMax"),
+		minDuration: params.get("minDuration"),
+		maxDuration: params.get("maxDuration"),
+		limit: limit !== null && !isNaN(limit) ? limit : null,
+		sort: params.get("sort"),
 		trace,
 		span,
+		view: params.get("view"),
+		uiFind: params.get("uiFind"),
+		compare: params.get("compare"),
+		viewStart: params.get("viewStart"),
+		viewEnd: params.get("viewEnd"),
 		dashboardId
 	};
 }
 function pushURLState(state, { replace = false } = {}) {
 	const params = new URLSearchParams();
 	if (state.tab !== "services") params.set("tab", state.tab);
-	if (state.service) params.set("service", state.service);
-	if (state.trace) params.set("trace", state.trace);
-	if (state.span) params.set("span", state.span);
+	if (state.tab === "services") {
+		if (state.service) params.set("service", state.service);
+		if (state.operation) params.set("operation", state.operation);
+		if (state.tags) params.set("tags", state.tags);
+		if (state.lookback) params.set("lookback", state.lookback);
+		if (state.tsMin) params.set("tsMin", state.tsMin);
+		if (state.tsMax) params.set("tsMax", state.tsMax);
+		if (state.minDuration) params.set("minDuration", state.minDuration);
+		if (state.maxDuration) params.set("maxDuration", state.maxDuration);
+		if (state.limit != null && state.limit !== 20) params.set("limit", String(state.limit));
+		if (state.sort) params.set("sort", state.sort);
+		if (state.trace) params.set("trace", state.trace);
+		if (state.span) params.set("span", state.span);
+		if (state.view) params.set("view", state.view);
+		if (state.uiFind) params.set("uiFind", state.uiFind);
+		if (state.compare) params.set("compare", state.compare);
+		if (state.viewStart) params.set("viewStart", state.viewStart);
+		if (state.viewEnd) params.set("viewEnd", state.viewEnd);
+	}
 	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();
@@ -5754,8 +7039,22 @@ let _cachedSearch = "";
 let _cachedState = {
 	tab: "services",
 	service: null,
+	operation: null,
+	tags: null,
+	lookback: null,
+	tsMin: null,
+	tsMax: null,
+	minDuration: null,
+	maxDuration: null,
+	limit: null,
+	sort: null,
 	trace: null,
 	span: null,
+	view: null,
+	uiFind: null,
+	compare: null,
+	viewStart: null,
+	viewEnd: null,
 	dashboardId: null
 };
 function getURLSnapshot() {
@@ -5865,6 +7164,26 @@ function parseDuration(input) {
 		s: 1e9
 	}[unit]));
 }
+function parseLogfmt(str) {
+	const result = {};
+	const re = /(\w+)=(?:"([^"]*)"|([\S]*))/g;
+	let m;
+	while ((m = re.exec(str)) !== null) {
+		const key = m[1];
+		if (key) result[key] = m[2] ?? m[3] ?? "";
+	}
+	return result;
+}
+const LOOKBACK_MS = {
+	"5m": 5 * 6e4,
+	"15m": 15 * 6e4,
+	"30m": 30 * 6e4,
+	"1h": 60 * 6e4,
+	"2h": 120 * 6e4,
+	"6h": 360 * 6e4,
+	"12h": 720 * 6e4,
+	"24h": 1440 * 6e4
+};
 function LogsTab() {
 	const [initState] = useState(() => readLogFilters());
 	const [filters, setFilters] = useState(initState.filters);
@@ -5924,185 +7243,145 @@ function LogsTab() {
 		})]
 	});
 }
-const SERVICES_DS = {
-	method: "searchTracesPage",
-	params: {
-		limit: 1e3,
-		sortOrder: "DESC"
-	}
-};
-function ServiceListView({ onSelect }) {
-	const { data, loading, error } = useKopaiData(SERVICES_DS);
-	return /* @__PURE__ */ jsx(ServiceList, {
-		services: useMemo(() => {
-			if (!data?.data) return [];
-			const names = /* @__PURE__ */ new Set();
-			for (const row of data.data) names.add(row.ServiceName ?? "unknown");
-			return Array.from(names).sort().map((name) => ({ name }));
-		}, [data]),
-		isLoading: loading,
-		error: error ?? void 0,
-		onSelect
-	});
-}
-function TraceSearchView({ service, onBack, onSelectTrace }) {
-	const [ds, setDs] = useState(() => ({
-		method: "searchTracesPage",
-		params: {
-			serviceName: service,
-			limit: 20,
-			sortOrder: "DESC"
-		}
-	}));
-	const handleSearch = useCallback((filters) => {
+function TraceSearchView({ onSelectTrace, onCompare }) {
+	const urlState = useURLState();
+	const service = urlState.service;
+	const ds = useMemo(() => {
 		const params = {
-			serviceName: service,
-			limit: filters.limit,
+			limit: urlState.limit ?? 20,
 			sortOrder: "DESC"
 		};
-		if (filters.operation) params.spanName = filters.operation;
-		if (filters.lookbackMs) params.timestampMin = String((Date.now() - filters.lookbackMs) * 1e6);
-		if (filters.minDuration) {
-			const parsed = parseDuration(filters.minDuration);
+		if (service) params.serviceName = service;
+		if (urlState.operation) params.spanName = urlState.operation;
+		if (urlState.lookback) {
+			const ms = LOOKBACK_MS[urlState.lookback];
+			if (ms) params.timestampMin = String((Date.now() - ms) * 1e6);
+		}
+		if (urlState.tsMin) params.timestampMin = urlState.tsMin;
+		if (urlState.tsMax) params.timestampMax = urlState.tsMax;
+		if (urlState.minDuration) {
+			const parsed = parseDuration(urlState.minDuration);
 			if (parsed) params.durationMin = parsed;
 		}
-		if (filters.maxDuration) {
-			const parsed = parseDuration(filters.maxDuration);
+		if (urlState.maxDuration) {
+			const parsed = parseDuration(urlState.maxDuration);
 			if (parsed) params.durationMax = parsed;
 		}
-		setDs({
-			method: "searchTracesPage",
+		if (urlState.tags) {
+			const tagMap = parseLogfmt(urlState.tags);
+			if (Object.keys(tagMap).length > 0) params.tags = tagMap;
+		}
+		return {
+			method: "searchTraceSummariesPage",
 			params
+		};
+	}, [
+		service,
+		urlState.operation,
+		urlState.lookback,
+		urlState.tsMin,
+		urlState.tsMax,
+		urlState.minDuration,
+		urlState.maxDuration,
+		urlState.limit,
+		urlState.tags
+	]);
+	const handleSearch = useCallback((filters) => {
+		pushURLState({
+			tab: "services",
+			service: filters.service ?? service,
+			operation: filters.operation ?? null,
+			tags: filters.tags ?? null,
+			lookback: filters.lookback ?? null,
+			minDuration: filters.minDuration ?? null,
+			maxDuration: filters.maxDuration ?? null,
+			limit: filters.limit
 		});
 	}, [service]);
 	const { data, loading, error } = useKopaiData(ds);
-	const client = useKopaiSDK();
-	const [fullTraces, setFullTraces] = useState(() => /* @__PURE__ */ new Map());
-	useEffect(() => {
-		if (!data?.data?.length) {
-			setFullTraces(/* @__PURE__ */ new Map());
-			return;
-		}
-		const traceIds = [...new Set(data.data.map((r) => r.TraceId))];
-		const ac = new AbortController();
-		Promise.allSettled(traceIds.map((tid) => client.getTrace(tid, { signal: ac.signal }).then((spans) => [tid, spans]))).then((results) => {
-			if (!ac.signal.aborted) {
-				const entries = results.filter((r) => r.status === "fulfilled").map((r) => r.value);
-				setFullTraces(new Map(entries));
-			}
-		}).catch((err) => {
-			if (!ac.signal.aborted) console.error("Failed to fetch full traces", err);
-		});
-		return () => ac.abort();
-	}, [data, client]);
-	const operations = useMemo(() => {
+	const { data: servicesData } = useKopaiData(useMemo(() => ({ method: "getServices" }), []));
+	const _services = servicesData?.services ?? [];
+	const { data: opsData } = useKopaiData(useMemo(() => service ? {
+		method: "getOperations",
+		params: { serviceName: service }
+	} : void 0, [service]));
+	const operations = opsData?.operations ?? [];
+	const traces = useMemo(() => {
 		if (!data?.data) return [];
-		const set = /* @__PURE__ */ new Set();
-		for (const row of data.data) if (row.SpanName) set.add(row.SpanName);
-		return Array.from(set).sort();
+		return data.data.map((row) => ({
+			traceId: row.traceId,
+			rootSpanName: row.rootSpanName,
+			serviceName: row.rootServiceName,
+			durationMs: parseInt(row.durationNs, 10) / 1e6,
+			statusCode: row.errorCount > 0 ? "ERROR" : "OK",
+			timestampMs: parseInt(row.startTimeNs, 10) / 1e6,
+			spanCount: row.spanCount,
+			services: row.services,
+			errorCount: row.errorCount
+		}));
 	}, [data]);
 	return /* @__PURE__ */ jsx(TraceSearch, {
-		service,
-		traces: useMemo(() => {
-			if (!data?.data) return [];
-			const grouped = /* @__PURE__ */ new Map();
-			for (const row of data.data) {
-				const tid = row.TraceId;
-				if (!grouped.has(tid)) grouped.set(tid, []);
-				grouped.get(tid).push(row);
-			}
-			return Array.from(grouped.entries()).map(([traceId, searchSpans]) => {
-				const spans = fullTraces.get(traceId) ?? searchSpans;
-				const root = spans.find((s) => !s.ParentSpanId) ?? spans[0];
-				const durationNs = root.Duration ? parseInt(root.Duration, 10) : 0;
-				const svcMap = /* @__PURE__ */ new Map();
-				let errorCount = 0;
-				for (const s of spans) {
-					const svcName = s.ServiceName ?? "unknown";
-					const entry = svcMap.get(svcName) ?? {
-						count: 0,
-						hasError: false
-					};
-					entry.count++;
-					if (s.StatusCode === "ERROR") {
-						entry.hasError = true;
-						errorCount++;
-					}
-					svcMap.set(svcName, entry);
-				}
-				const services = Array.from(svcMap.entries()).map(([name, v]) => ({
-					name,
-					count: v.count,
-					hasError: v.hasError
-				})).sort((a, b) => b.count - a.count);
-				return {
-					traceId,
-					rootSpanName: root.SpanName ?? "unknown",
-					serviceName: root.ServiceName ?? "unknown",
-					durationMs: durationNs / 1e6,
-					statusCode: root.StatusCode ?? "UNSET",
-					timestampMs: parseInt(root.Timestamp, 10) / 1e6,
-					spanCount: spans.length,
-					services,
-					errorCount
-				};
-			});
-		}, [data, fullTraces]),
+		services: _services,
+		service: service ?? "",
+		traces,
 		operations,
 		isLoading: loading,
 		error: error ?? void 0,
 		onSelectTrace,
-		onBack,
+		onCompare,
 		onSearch: handleSearch
 	});
 }
-function TraceDetailView({ service, traceId, selectedSpanId, onSelectSpan, onBack }) {
+function TraceDetailView({ traceId, selectedSpanId, onSelectSpan, onDeselectSpan, onBack }) {
 	const { data, loading, error } = useKopaiData(useMemo(() => ({
 		method: "getTrace",
 		params: { traceId }
 	}), [traceId]));
 	return /* @__PURE__ */ jsx(TraceDetail, {
-		service,
 		traceId,
 		rows: data ?? [],
 		isLoading: loading,
 		error: error ?? void 0,
 		selectedSpanId: selectedSpanId ?? void 0,
 		onSpanClick: (span) => onSelectSpan(span.spanId),
+		onSpanDeselect: onDeselectSpan,
 		onBack
 	});
 }
-function ServicesTab({ selectedService, selectedTraceId, selectedSpanId, onSelectService, onSelectTrace, onSelectSpan, onBackToServices, onBackToTraceList }) {
+function ServicesTab({ selectedTraceId, selectedSpanId, compareParam, onSelectTrace, onSelectSpan, onDeselectSpan, onBack, onCompare }) {
 	useRegisterShortcuts("services-tab", SERVICES_SHORTCUTS);
-	const backToServicesRef = useRef(onBackToServices);
-	backToServicesRef.current = onBackToServices;
-	const backToTraceListRef = useRef(onBackToTraceList);
-	backToTraceListRef.current = onBackToTraceList;
+	const backRef = useRef(onBack);
+	backRef.current = onBack;
 	useEffect(() => {
 		const handleKeyDown = (e) => {
 			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement) return;
 			if (e.key === "Backspace") {
 				e.preventDefault();
-				if (selectedTraceId && selectedService) backToTraceListRef.current();
-				else if (selectedService) backToServicesRef.current();
+				backRef.current();
 			}
 		};
 		window.addEventListener("keydown", handleKeyDown);
 		return () => window.removeEventListener("keydown", handleKeyDown);
-	}, [selectedService, selectedTraceId]);
-	if (selectedTraceId && selectedService) return /* @__PURE__ */ jsx(TraceDetailView, {
-		service: selectedService,
+	}, []);
+	if (compareParam) {
+		const [traceIdA, traceIdB] = compareParam.split(",");
+		if (traceIdA && traceIdB) return /* @__PURE__ */ jsx(TraceComparison, {
+			traceIdA,
+			traceIdB,
+			onBack
+		});
+	}
+	if (selectedTraceId) return /* @__PURE__ */ jsx(TraceDetailView, {
 		traceId: selectedTraceId,
 		selectedSpanId,
 		onSelectSpan,
-		onBack: onBackToTraceList
+		onDeselectSpan,
+		onBack
 	});
-	if (selectedService) return /* @__PURE__ */ jsx(TraceSearchView, {
-		service: selectedService,
-		onBack: onBackToServices,
-		onSelectTrace
+	return /* @__PURE__ */ jsx(TraceSearchView, {
+		onSelectTrace,
+		onCompare
 	});
-	return /* @__PURE__ */ jsx(ServiceListView, { onSelect: onSelectService });
 }
 const METRICS_TREE = {
 	root: "root",
@@ -6209,40 +7488,56 @@ function getDefaultClient() {
 }
 function ObservabilityPage({ client }) {
 	const activeClient = client ?? getDefaultClient();
-	const { tab: activeTab, service: selectedService, trace: selectedTraceId, span: selectedSpanId } = useURLState();
+	const { tab: activeTab, trace: selectedTraceId, span: selectedSpanId, compare: compareParam } = useURLState();
 	const handleTabChange = useCallback((tab) => {
 		pushURLState({ tab });
 	}, []);
-	const handleSelectService = useCallback((service) => {
-		pushURLState({
-			tab: "services",
-			service
-		});
-	}, []);
 	const handleSelectTrace = useCallback((traceId) => {
 		pushURLState({
+			...readURLState(),
 			tab: "services",
-			service: selectedService,
 			trace: traceId
 		});
-	}, [selectedService]);
+	}, []);
 	const handleSelectSpan = useCallback((spanId) => {
 		pushURLState({
+			...readURLState(),
 			tab: "services",
-			service: selectedService,
-			trace: selectedTraceId,
 			span: spanId
 		}, { replace: true });
-	}, [selectedService, selectedTraceId]);
-	const handleBackToServices = useCallback(() => {
-		pushURLState({ tab: "services" });
 	}, []);
-	const handleBackToTraceList = useCallback(() => {
+	const handleDeselectSpan = useCallback(() => {
+		pushURLState({
+			...readURLState(),
+			span: null
+		}, { replace: true });
+	}, []);
+	const handleCompare = useCallback((traceIds) => {
 		pushURLState({
+			...readURLState(),
 			tab: "services",
-			service: selectedService
+			trace: null,
+			span: null,
+			view: null,
+			uiFind: null,
+			viewStart: null,
+			viewEnd: null,
+			compare: traceIds.join(",")
 		});
-	}, [selectedService]);
+	}, []);
+	const handleBack = useCallback(() => {
+		pushURLState({
+			...readURLState(),
+			tab: "services",
+			trace: null,
+			span: null,
+			view: null,
+			uiFind: null,
+			viewStart: null,
+			viewEnd: null,
+			compare: null
+		});
+	}, []);
 	return /* @__PURE__ */ jsx(KopaiSDKProvider, {
 		client: activeClient,
 		children: /* @__PURE__ */ jsx(KeyboardShortcutsProvider, {
@@ -6257,21 +7552,20 @@ function ObservabilityPage({ client }) {
 				}),
 				activeTab === "logs" && /* @__PURE__ */ jsx(LogsTab, {}),
 				activeTab === "services" && /* @__PURE__ */ jsx(ServicesTab, {
-					selectedService,
 					selectedTraceId,
 					selectedSpanId,
-					onSelectService: handleSelectService,
+					compareParam,
 					onSelectTrace: handleSelectTrace,
 					onSelectSpan: handleSelectSpan,
-					onBackToServices: handleBackToServices,
-					onBackToTraceList: handleBackToTraceList
+					onDeselectSpan: handleDeselectSpan,
+					onBack: handleBack,
+					onCompare: handleCompare
 				}),
 				activeTab === "metrics" && /* @__PURE__ */ jsx(MetricsTab, {})
 			] })
 		})
 	});
 }
-
 //#endregion
 //#region src/lib/generate-prompt-instructions.ts
 function formatPropType(prop) {
@@ -6401,7 +7695,7 @@ ${JSON.stringify(unifiedSchema)}
 
 ${JSON.stringify(exampleElements)}`;
 }
-
 //#endregion
 export { KopaiSDKProvider, ObservabilityPage, Renderer, createCatalog, createRendererFromCatalog, generatePromptInstructions, observabilityCatalog, useKopaiSDK };
+
 //# sourceMappingURL=index.mjs.map