@mtharrison/loupe 1.1.1 → 1.3.0

package/dist/client/app.js

@@ -20995,6 +20995,82 @@ var init_theme = __esm({
 function deriveSessionNavItems(sessionNodes, traceById) {
   return sessionNodes.map((node) => deriveSessionNavItem(node, traceById)).sort(compareSessionNavItems);
 }
+function sortSessionNodesForNav(sessionNodes, traceById) {
+  const itemById = new Map(
+    sessionNodes.map((node) => [node.id, deriveSessionNavItem(node, traceById)])
+  );
+  return sessionNodes.slice().sort(
+    (left, right) => compareSessionNavItems(
+      itemById.get(left.id),
+      itemById.get(right.id)
+    )
+  );
+}
+function findSessionNodePath(nodes, id, trail = []) {
+  for (const node of nodes) {
+    const nextTrail = [...trail, node];
+    if (node.id === id) {
+      return nextTrail;
+    }
+    const childTrail = findSessionNodePath(node.children, id, nextTrail);
+    if (childTrail.length) {
+      return childTrail;
+    }
+  }
+  return [];
+}
+function findSessionNodeById(nodes, id) {
+  return findSessionNodePath(nodes, id).at(-1) ?? null;
+}
+function getNewestTraceIdForNode(node) {
+  if (!node?.traceIds.length) {
+    return null;
+  }
+  if (typeof node.meta?.traceId === "string" && node.meta.traceId) {
+    return node.meta.traceId;
+  }
+  return node.traceIds[0] || null;
+}
+function resolveSessionTreeSelection(sessionNodes, selectedNodeId, selectedTraceId) {
+  const selectedNode = selectedNodeId ? findSessionNodeById(sessionNodes, selectedNodeId) : null;
+  const selectedTraceNode = selectedTraceId ? findSessionNodeById(sessionNodes, `trace:${selectedTraceId}`) : null;
+  const fallbackNode = selectedNode ?? selectedTraceNode ?? sessionNodes[0] ?? null;
+  if (!fallbackNode) {
+    return {
+      selectedNodeId: null,
+      selectedTraceId: null
+    };
+  }
+  const nextSelectedNodeId = selectedNode?.id ?? fallbackNode.id;
+  const nextSelectedTraceId = selectedTraceId && fallbackNode.traceIds.includes(selectedTraceId) ? selectedTraceId : getNewestTraceIdForNode(fallbackNode);
+  return {
+    selectedNodeId: nextSelectedNodeId,
+    selectedTraceId: nextSelectedTraceId
+  };
+}
+function getDefaultExpandedSessionTreeNodeIds(sessionNodes, activeSessionId, selectedNodeId) {
+  const expanded = /* @__PURE__ */ new Set();
+  const activeSession = (activeSessionId ? sessionNodes.find((node) => node.id === activeSessionId) ?? null : null) ?? sessionNodes[0] ?? null;
+  if (!activeSession) {
+    return expanded;
+  }
+  if (activeSession.children.length) {
+    expanded.add(activeSession.id);
+  }
+  visitSessionTree(activeSession.children, (node) => {
+    if (node.children.length && node.type === "actor") {
+      expanded.add(node.id);
+    }
+  });
+  if (selectedNodeId) {
+    for (const node of findSessionNodePath([activeSession], selectedNodeId)) {
+      if (node.children.length) {
+        expanded.add(node.id);
+      }
+    }
+  }
+  return expanded;
+}
 function deriveSessionNavItem(node, traceById) {
   const traces = node.traceIds.map((traceId) => traceById.get(traceId)).filter((trace) => Boolean(trace));
   const latestTrace = getLatestTrace(traces);
@@ -21110,6 +21186,12 @@ function formatCompactTimestamp(value) {
     minute: "2-digit"
   });
 }
+function visitSessionTree(nodes, visitor) {
+  for (const node of nodes) {
+    visitor(node);
+    visitSessionTree(node.children, visitor);
+  }
+}
 var init_session_nav = __esm({
   "src/session-nav.ts"() {
   }
@@ -21122,14 +21204,9 @@ function App() {
     hierarchy: { filtered: 0, rootNodes: [], total: 0 },
     traces: { filtered: 0, items: [], total: 0 }
   });
-  const [navMode, setNavMode] = (0, import_react3.useState)("sessions");
   const [theme, setTheme] = (0, import_react3.useState)(() => resolvePreferredTheme());
   const [eventsConnected, setEventsConnected] = (0, import_react3.useState)(false);
   const [expandedNodeOverrides, setExpandedNodeOverrides] = (0, import_react3.useState)({});
-  const [collapsedTraceGroups, setCollapsedTraceGroups] = (0, import_react3.useState)({});
-  const [selectedSessionId, setSelectedSessionId] = (0, import_react3.useState)(
-    null
-  );
   const [selectedNodeId, setSelectedNodeId] = (0, import_react3.useState)(null);
   const [selectedTraceId, setSelectedTraceId] = (0, import_react3.useState)(null);
   const [detail, setDetail] = (0, import_react3.useState)(null);
@@ -21194,9 +21271,6 @@ function App() {
       (0, import_react3.startTransition)(() => {
         setData({ traces, hierarchy });
         setAllSessionCount(nextAllSessionCount);
-        setSelectedSessionId(
-          (current) => current ?? hierarchy.rootNodes[0]?.id ?? null
-        );
       });
     } finally {
       refreshInFlightRef.current = false;
@@ -21314,7 +21388,6 @@ function App() {
         traces: { filtered: 0, items: [], total: 0 }
       });
       setAllSessionCount(0);
-      setSelectedSessionId(null);
       setSelectedNodeId(null);
       setSelectedTraceId(null);
       setDetail(null);
@@ -21322,34 +21395,36 @@ function App() {
   });
   const handleSseMessage = (0, import_react3.useEffectEvent)((data2) => {
     const payload = parseEvent(data2);
+    const nextTrace = payload?.span;
+    const nextTraceId = payload?.spanId;
     if (payload?.type === "ui:reload") {
       window.location.reload();
       return;
     }
-    if (payload?.trace && selectedTraceId && payload.traceId === selectedTraceId) {
-      (0, import_react3.startTransition)(() => setDetail(payload.trace));
+    if (nextTrace && selectedTraceId && nextTraceId === selectedTraceId) {
+      (0, import_react3.startTransition)(() => setDetail(nextTrace));
     }
     if (!queryString) {
-      if (payload?.type === "trace:update" && payload.trace) {
-        applyIncrementalTraceUpdate(payload.trace);
+      if ((payload?.type === "span:update" || payload?.type === "span:end") && nextTrace) {
+        applyIncrementalTraceUpdate(nextTrace);
         return;
       }
-      if (payload?.type === "trace:add" && payload.trace) {
-        applyIncrementalTraceAdd(payload.trace);
+      if (payload?.type === "span:start" && nextTrace) {
+        applyIncrementalTraceAdd(nextTrace);
         scheduleRefresh(180);
         return;
       }
-      if (payload?.type === "trace:evict") {
-        applyIncrementalTraceEvict(payload.traceId);
+      if (payload?.type === "span:evict") {
+        applyIncrementalTraceEvict(nextTraceId);
         scheduleRefresh(180);
         return;
       }
-      if (payload?.type === "trace:clear") {
+      if (payload?.type === "span:clear") {
         clearIncrementalState();
         return;
       }
     }
-    scheduleRefresh(payload?.type === "trace:update" ? 700 : 180);
+    scheduleRefresh(payload?.type === "span:update" || payload?.type === "span:end" ? 700 : 180);
   });
   (0, import_react3.useEffect)(() => {
     const events = new EventSource("/api/events");
@@ -21373,75 +21448,61 @@ function App() {
     () => getMaxDurationMs(traceItems),
     [traceItems]
   );
-  const traceGroups = (0, import_react3.useMemo)(
-    () => groupTracesForNav(traceItems),
-    [traceItems]
-  );
   const sessionNodes = (0, import_react3.useMemo)(
-    () => data.hierarchy.rootNodes.filter((node) => node.type === "session"),
-    [data.hierarchy.rootNodes]
-  );
-  const sessionNodeById = (0, import_react3.useMemo)(
-    () => new Map(sessionNodes.map((node) => [node.id, node])),
-    [sessionNodes]
+    () => sortSessionNodesForNav(
+      data.hierarchy.rootNodes.filter((node) => node.type === "session"),
+      traceById
+    ),
+    [data.hierarchy.rootNodes, traceById]
   );
   const sessionNavItems = (0, import_react3.useMemo)(
     () => deriveSessionNavItems(sessionNodes, traceById),
     [sessionNodes, traceById]
   );
+  const sessionNavById = (0, import_react3.useMemo)(
+    () => new Map(sessionNavItems.map((item) => [item.id, item])),
+    [sessionNavItems]
+  );
   const hasActiveFilters = Boolean(
     filters.search || filters.status || filters.kind || filters.tags
   );
-  const filteredSessionCount = sessionNavItems.length;
+  const filteredSessionCount = sessionNodes.length;
   const hasRecordedSessions = allSessionCount > 0;
   const showFilteredSessionEmptyState = hasActiveFilters && hasRecordedSessions && filteredSessionCount === 0;
+  const selectedNodePath = (0, import_react3.useMemo)(
+    () => selectedNodeId ? findSessionNodePath(sessionNodes, selectedNodeId) : [],
+    [sessionNodes, selectedNodeId]
+  );
+  const selectedTracePath = (0, import_react3.useMemo)(
+    () => selectedTraceId ? findSessionNodePath(sessionNodes, toTraceNodeId(selectedTraceId)) : [],
+    [sessionNodes, selectedTraceId]
+  );
+  const selectedPathIds = (0, import_react3.useMemo)(
+    () => new Set(selectedNodePath.map((node) => node.id)),
+    [selectedNodePath]
+  );
   const selectedSessionNode = (0, import_react3.useMemo)(
-    () => selectedSessionId ? sessionNodeById.get(selectedSessionId) ?? null : (sessionNavItems[0] && sessionNodeById.get(sessionNavItems[0].id)) ?? null,
-    [selectedSessionId, sessionNavItems, sessionNodeById]
+    () => (selectedNodePath[0]?.type === "session" ? selectedNodePath[0] : null) ?? (selectedTracePath[0]?.type === "session" ? selectedTracePath[0] : null) ?? sessionNodes[0] ?? null,
+    [selectedNodePath, selectedTracePath, sessionNodes]
   );
   const selectedTraceSummary = (0, import_react3.useMemo)(
     () => selectedTraceId ? traceById.get(selectedTraceId) ?? null : null,
     [selectedTraceId, traceById]
   );
   (0, import_react3.useEffect)(() => {
-    if (!selectedSessionId || !sessionNodeById.has(selectedSessionId)) {
-      (0, import_react3.startTransition)(
-        () => setSelectedSessionId(sessionNavItems[0]?.id ?? null)
-      );
-    }
-  }, [selectedSessionId, sessionNavItems, sessionNodeById]);
-  (0, import_react3.useEffect)(() => {
-    if (navMode !== "sessions") {
-      return;
-    }
-    const currentSelectedNode = selectedNodeId && selectedSessionNode ? findNodeById([selectedSessionNode], selectedNodeId) : null;
-    const fallbackTraceId = getNewestTraceId(selectedSessionNode);
-    const fallbackNodeId = currentSelectedNode?.id ?? (fallbackTraceId ? toTraceNodeId(fallbackTraceId) : selectedSessionNode?.id ?? null);
-    if (fallbackNodeId !== selectedNodeId) {
-      (0, import_react3.startTransition)(() => setSelectedNodeId(fallbackNodeId));
-    }
-  }, [navMode, selectedNodeId, selectedSessionNode]);
-  (0, import_react3.useEffect)(() => {
-    const hasSelectedTrace = selectedTraceId ? traceItems.some((trace) => trace.id === selectedTraceId) : false;
-    if (navMode === "traces") {
-      if (!hasSelectedTrace) {
-        (0, import_react3.startTransition)(() => setSelectedTraceId(traceItems[0]?.id ?? null));
-      }
+    const nextSelection = resolveSessionTreeSelection(
+      sessionNodes,
+      selectedNodeId,
+      selectedTraceId
+    );
+    if (nextSelection.selectedNodeId === selectedNodeId && nextSelection.selectedTraceId === selectedTraceId) {
       return;
     }
-    const fallbackNode = (selectedNodeId ? findNodeById(data.hierarchy.rootNodes, selectedNodeId) : null) ?? selectedSessionNode;
-    const nextTraceId = hasSelectedTrace ? selectedTraceId : getNewestTraceId(fallbackNode);
-    if (nextTraceId !== selectedTraceId) {
-      (0, import_react3.startTransition)(() => setSelectedTraceId(nextTraceId));
-    }
-  }, [
-    data.hierarchy.rootNodes,
-    navMode,
-    selectedNodeId,
-    selectedSessionNode,
-    selectedTraceId,
-    traceItems
-  ]);
+    (0, import_react3.startTransition)(() => {
+      setSelectedNodeId(nextSelection.selectedNodeId);
+      setSelectedTraceId(nextSelection.selectedTraceId);
+    });
+  }, [selectedNodeId, selectedTraceId, sessionNodes]);
   const loadDetail = (0, import_react3.useEffectEvent)(async (traceId) => {
     const requestId = detailRequestRef.current + 1;
     detailRequestRef.current = requestId;
@@ -21468,43 +21529,13 @@ function App() {
     void loadDetail(selectedTraceId);
   }, [selectedTraceId]);
   const defaultExpandedNodeIds = (0, import_react3.useMemo)(
-    () => getDefaultExpandedNodeIds(data.hierarchy.rootNodes),
-    [data.hierarchy.rootNodes]
-  );
-  const selectedNodePath = (0, import_react3.useMemo)(
-    () => selectedNodeId ? findNodePath(data.hierarchy.rootNodes, selectedNodeId) : [],
-    [data.hierarchy.rootNodes, selectedNodeId]
-  );
-  const selectedTimelineModel = (0, import_react3.useMemo)(
-    () => buildHierarchyTimelineModel(
-      selectedSessionNode,
-      traceById,
-      selectedNodeId,
-      selectedNodePath,
-      selectedTraceId
+    () => getDefaultExpandedSessionTreeNodeIds(
+      sessionNodes,
+      selectedSessionNode?.id ?? null,
+      selectedNodeId
     ),
-    [
-      selectedNodeId,
-      selectedNodePath,
-      selectedSessionNode,
-      selectedTraceId,
-      traceById
-    ]
+    [selectedNodeId, selectedSessionNode, sessionNodes]
   );
-  (0, import_react3.useEffect)(() => {
-    if (!selectedNodePath.length) {
-      return;
-    }
-    (0, import_react3.startTransition)(() => {
-      setExpandedNodeOverrides((current) => {
-        const next = { ...current };
-        for (const node of selectedNodePath.slice(0, -1)) {
-          next[node.id] = true;
-        }
-        return next;
-      });
-    });
-  }, [selectedNodePath]);
   const activeTabJsonMode = tabModes[detailTab] ?? "formatted";
   const activeTagFilterCount = countTagFilters(filters.tags);
   const onFilterChange = (key, value) => {
@@ -21543,24 +21574,13 @@ function App() {
       }));
     });
   };
-  const toggleTraceGroupCollapse = (groupId) => {
-    (0, import_react3.startTransition)(() => {
-      setCollapsedTraceGroups((current) => ({
-        ...current,
-        [groupId]: !current[groupId]
-      }));
-    });
-  };
   const resetFilters = () => {
-    const nextSessionNode = (sessionNavItems[0] && sessionNodeById.get(sessionNavItems[0].id)) ?? null;
     (0, import_react3.startTransition)(() => {
       setFilters(INITIAL_FILTERS);
       setShowAdvancedFilters(false);
-      setSelectedSessionId(nextSessionNode?.id ?? null);
-      setSelectedNodeId(nextSessionNode?.id ?? null);
-      setSelectedTraceId(
-        navMode === "traces" ? traceItems[0]?.id ?? null : getNewestTraceId(nextSessionNode)
-      );
+      setSelectedNodeId(null);
+      setSelectedTraceId(null);
+      setDetailTab("conversation");
     });
   };
   const clearTraces = async () => {
@@ -21594,78 +21614,21 @@ function App() {
       () => setIsSessionsPanelCollapsed((current) => !current)
     );
   };
-  const showSessionsMode = () => {
-    const tracePath = selectedTraceId ? findNodePath(data.hierarchy.rootNodes, `trace:${selectedTraceId}`) : [];
-    const fallbackSessionNode = tracePath[0] ?? selectedSessionNode ?? ((sessionNavItems[0] && sessionNodeById.get(sessionNavItems[0].id)) ?? null);
-    const fallbackNodeId = tracePath[tracePath.length - 1]?.id ?? selectedNodeId ?? fallbackSessionNode?.id ?? null;
-    const nextTraceId = selectedTraceId && traceById.has(selectedTraceId) ? selectedTraceId : getNewestTraceId(fallbackSessionNode);
-    (0, import_react3.startTransition)(() => {
-      setNavMode("sessions");
-      setSelectedSessionId(fallbackSessionNode?.id ?? null);
-      setSelectedNodeId(fallbackNodeId);
-      setSelectedTraceId(nextTraceId);
-      setDetailTab("conversation");
-    });
-  };
-  const showTracesMode = () => {
-    (0, import_react3.startTransition)(() => {
-      const nextTraceId = selectedTraceId && traceItems.some((trace) => trace.id === selectedTraceId) ? selectedTraceId : traceItems[0]?.id ?? null;
-      setNavMode("traces");
-      setSelectedTraceId(nextTraceId);
-      setSelectedNodeId(nextTraceId ? `trace:${nextTraceId}` : selectedNodeId);
-      setDetailTab("conversation");
-      if (nextTraceId) {
-        const nextTrace = traceById.get(nextTraceId);
-        if (nextTrace?.hierarchy.sessionId) {
-          setSelectedSessionId(toSessionNodeId(nextTrace.hierarchy.sessionId));
-        }
-      }
-    });
-  };
-  const selectTraceFromList = (traceId) => {
-    const trace = traceById.get(traceId);
-    (0, import_react3.startTransition)(() => {
-      setNavMode("traces");
-      setSelectedTraceId(traceId);
-      setSelectedNodeId(`trace:${traceId}`);
-      setDetailTab("conversation");
-      if (trace?.hierarchy.sessionId) {
-        setSelectedSessionId(toSessionNodeId(trace.hierarchy.sessionId));
-      }
-    });
-  };
   const handleHierarchySelect = (node) => {
-    const nodePath = findNodePath(data.hierarchy.rootNodes, node.id);
-    const nextTraceId = node.type === "trace" ? node.meta.traceId ?? node.traceIds[0] ?? null : getNewestTraceId(node);
-    const nextSessionId = nodePath[0]?.type === "session" ? nodePath[0].id : selectedSessionId;
-    const nextSelectedNodeId = node.type === "trace" ? node.id : nextTraceId ? toTraceNodeId(nextTraceId) : node.id;
+    const nextTraceId = node.type === "trace" ? node.meta.traceId ?? node.traceIds[0] ?? null : getNewestTraceIdForNode(node);
     (0, import_react3.startTransition)(() => {
-      setNavMode("sessions");
-      setSelectedSessionId(nextSessionId ?? null);
-      setSelectedNodeId(nextSelectedNodeId);
+      setSelectedNodeId(node.id);
       setSelectedTraceId(nextTraceId);
       setDetailTab("conversation");
     });
   };
-  const handleTimelineSelect = (nodeId) => {
-    const scopeNodes = selectedSessionNode ? [selectedSessionNode] : data.hierarchy.rootNodes;
-    const node = findNodeById(scopeNodes, nodeId) ?? findNodeById(data.hierarchy.rootNodes, nodeId);
-    if (!node) {
-      return;
-    }
-    handleHierarchySelect(node);
-  };
   const navigateToHierarchyNode = (nodeId) => {
-    const node = findNodeById(data.hierarchy.rootNodes, nodeId);
+    const node = findSessionNodeById(sessionNodes, nodeId);
     if (!node) {
       return;
     }
-    const nodePath = findNodePath(data.hierarchy.rootNodes, nodeId);
-    const nextSessionId = nodePath[0]?.type === "session" ? nodePath[0].id : selectedSessionId;
-    const nextTraceId = selectedTraceId && node.traceIds.includes(selectedTraceId) ? selectedTraceId : getNewestTraceId(node);
+    const nextTraceId = selectedTraceId && node.traceIds.includes(selectedTraceId) ? selectedTraceId : getNewestTraceIdForNode(node);
     (0, import_react3.startTransition)(() => {
-      setNavMode("sessions");
-      setSelectedSessionId(nextSessionId ?? null);
       setSelectedNodeId(nodeId);
       if (nextTraceId !== selectedTraceId) {
         setSelectedTraceId(nextTraceId);
@@ -21674,17 +21637,6 @@ function App() {
   };
   const detailTabs = buildDetailTabs(detail);
   const activeTab = detailTabs.some((tab) => tab.id === detailTab) ? detailTab : detailTabs[0]?.id ?? "conversation";
-  const handleSessionChange = (sessionId) => {
-    const sessionNode = sessionNodeById.get(sessionId) ?? null;
-    const nextTraceId = getNewestTraceId(sessionNode);
-    (0, import_react3.startTransition)(() => {
-      setNavMode("sessions");
-      setSelectedSessionId(sessionId);
-      setSelectedNodeId(nextTraceId ? toTraceNodeId(nextTraceId) : sessionId);
-      setSelectedTraceId(nextTraceId);
-      setDetailTab("conversation");
-    });
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "app-shell", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BackgroundGlow, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "app-frame", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "board-shell inspector-shell", children: [
@@ -21813,46 +21765,45 @@ function App() {
             isSessionsPanelCollapsed && "is-sidebar-collapsed"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { className: "sidebar-card session-sidebar-card inspector-card", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-sidebar-shell", children: [
-              sessionNavItems.length || hasActiveFilters || hasRecordedSessions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                SessionNavList,
-                {
-                  hasActiveFilters,
-                  items: sessionNavItems,
-                  onChange: handleSessionChange,
-                  totalCount: allSessionCount,
-                  selectedId: selectedSessionNode?.id ?? null
-                }
-              ) : null,
-              selectedTimelineModel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                HierarchyTimelineOverview,
-                {
-                  axisStops: COMPACT_TIMELINE_AXIS_STOPS,
-                  model: selectedTimelineModel,
-                  onSelectRow: handleTimelineSelect
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-sidebar-empty", children: showFilteredSessionEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-sidebar-empty-state", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  EmptyState,
-                  {
-                    icon: Funnel,
-                    title: "No sessions match the current filters",
-                    description: "Try adjusting the search, status, kind, or tag filters to broaden the result set."
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, { variant: "outline", onClick: resetFilters, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { "data-icon": "inline-start" }),
-                  "Clear filters"
-                ] })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { className: "sidebar-card session-sidebar-card inspector-card", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-sidebar-shell", children: sessionNodes.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              SessionTreeNavigator,
+              {
+                defaultExpandedNodeIds,
+                expandedNodeOverrides,
+                hasActiveFilters,
+                items: sessionNavItems,
+                maxDurationMs: navigatorMaxDurationMs,
+                nodes: sessionNodes,
+                onSelect: handleHierarchySelect,
+                onToggle: toggleNodeExpansion,
+                selectedNodeId,
+                selectedPathIds,
+                selectedTraceId,
+                sessionNavById,
+                totalCount: allSessionCount,
+                traceById
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-sidebar-empty", children: showFilteredSessionEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-sidebar-empty-state", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 EmptyState,
                 {
-                  icon: Network,
-                  title: "No sessions yet",
-                  description: "Trigger any traced LLM call and the session timeline will appear here."
+                  icon: Funnel,
+                  title: "No sessions match the current filters",
+                  description: "Try adjusting the search, status, kind, or tag filters to broaden the result set."
                 }
-              ) })
-            ] }) }),
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, { variant: "outline", onClick: resetFilters, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { "data-icon": "inline-start" }),
+                "Clear filters"
+              ] })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              EmptyState,
+              {
+                icon: Network,
+                title: "No sessions yet",
+                description: "Trigger any traced LLM call and the session tree will appear here."
+              }
+            ) }) }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { className: "timeline-card content-card inspector-card", children: selectedTraceId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               TraceDetailPanel,
               {
@@ -21865,20 +21816,18 @@ function App() {
                 onApplyTraceFilter: applyTraceFilter,
                 onNavigateHierarchyNode: navigateToHierarchyNode,
                 onTabChange: (value) => setDetailTab(value),
-                onSelectTimelineNode: handleTimelineSelect,
                 onToggleJsonMode: (tabId) => (0, import_react3.startTransition)(() => {
                   setTabModes((current) => ({
                     ...current,
                     [tabId]: (current[tabId] ?? "formatted") === "formatted" ? "raw" : "formatted"
                   }));
-                }),
-                timelineModel: null
+                })
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, { className: "content-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               EmptyState,
               {
                 icon: ArrowUpRight,
-                title: "Select a trace from the session timeline",
+                title: "Select a trace from the session tree",
                 description: "Choose any call on the left to inspect the full request, response, context, and stream details."
               }
             ) }) })
@@ -21931,63 +21880,51 @@ function ThemeSwitcher({
     )
   ] });
 }
-function SessionNavList({
+function SessionTreeNavigator({
+  defaultExpandedNodeIds,
+  expandedNodeOverrides,
   hasActiveFilters,
   items,
-  onChange,
-  selectedId,
-  totalCount
+  maxDurationMs,
+  nodes,
+  onSelect,
+  onToggle,
+  selectedNodeId,
+  selectedPathIds,
+  selectedTraceId,
+  sessionNavById,
+  totalCount,
+  traceById
 }) {
   const filteredCount = items.length;
   const countLabel = hasActiveFilters && totalCount > filteredCount ? `${filteredCount} of ${totalCount} sessions` : formatCountLabel(
     hasActiveFilters ? filteredCount : Math.max(filteredCount, totalCount),
     "session"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-nav-section", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-nav-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-nav-title-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-nav-title", children: "Sessions" }),
-        hasActiveFilters ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { variant: "outline", className: "session-nav-filter-badge", children: "Filtered" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-tree-section", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-tree-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-tree-title-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-tree-title", children: "Sessions" }),
+        hasActiveFilters ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { variant: "outline", className: "session-tree-filter-badge", children: "Filtered" }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-nav-meta", children: countLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-tree-meta", children: countLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-nav-list", role: "list", "aria-label": "Sessions", children: items.map((item) => {
-      const costLabel = formatUsdCost(item.costUsd);
-      const detailLabel = formatList([formatCountLabel(item.callCount, "call"), costLabel]) || formatCountLabel(item.callCount, "call");
-      const badge = getSessionNavBadge(item);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "button",
-        {
-          type: "button",
-          role: "listitem",
-          className: cn(
-            "session-nav-card",
-            item.id === selectedId && "is-active"
-          ),
-          "aria-pressed": item.id === selectedId,
-          onClick: () => onChange(item.id),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-nav-card-header", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  className: "session-nav-card-title",
-                  title: item.primaryLabel,
-                  children: item.primaryLabel
-                }
-              ),
-              item.latestTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-nav-card-time", children: item.latestTimestamp }) : null
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-nav-card-meta", children: detailLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-nav-card-footer", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-nav-card-id", children: item.shortSessionId }),
-              badge
-            ] })
-          ]
-        },
-        item.id
-      );
-    }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-tree-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      HierarchyTree,
+      {
+        defaultExpandedNodeIds,
+        expandedNodeOverrides,
+        maxDurationMs,
+        nodes,
+        onSelect,
+        onToggle,
+        selectedNodeId,
+        selectedPathIds,
+        selectedTraceId,
+        sessionNavById,
+        traceById
+      }
+    ) })
   ] });
 }
 function getSessionNavBadge(item) {
@@ -22009,6 +21946,374 @@ function BackgroundGlow() {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid-noise" })
   ] });
 }
+function HierarchyTree({
+  defaultExpandedNodeIds,
+  expandedNodeOverrides,
+  maxDurationMs,
+  nodes,
+  onSelect,
+  onToggle,
+  selectedNodeId,
+  selectedPathIds,
+  selectedTraceId,
+  sessionNavById,
+  traceById
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tree-root", children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    HierarchyTreeNode,
+    {
+      defaultExpandedNodeIds,
+      depth: 0,
+      expandedNodeOverrides,
+      maxDurationMs,
+      node,
+      onSelect,
+      onToggle,
+      selectedNodeId,
+      selectedPathIds,
+      selectedTraceId,
+      sessionNavById,
+      traceById
+    },
+    node.id
+  )) });
+}
+function HierarchyTreeNode({
+  defaultExpandedNodeIds,
+  depth,
+  expandedNodeOverrides,
+  maxDurationMs,
+  node,
+  onSelect,
+  onToggle,
+  selectedNodeId,
+  selectedPathIds,
+  selectedTraceId,
+  sessionNavById,
+  traceById
+}) {
+  const isExpandable = node.children.length > 0;
+  const isForcedExpanded = isExpandable && selectedPathIds.has(node.id);
+  const expandedOverride = expandedNodeOverrides[node.id];
+  const isExpanded = isExpandable && (expandedOverride ?? (isForcedExpanded || defaultExpandedNodeIds.has(node.id)));
+  const isInPath = selectedPathIds.has(node.id);
+  const nodeCopy = getHierarchyNodeCopy(node, traceById);
+  const trace = node.meta.traceId ? traceById.get(node.meta.traceId) ?? null : null;
+  const sessionNavItem = node.type === "session" ? sessionNavById.get(node.id) ?? null : null;
+  if (node.type === "trace" && trace) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      TraceHierarchyLeaf,
+      {
+        depth,
+        maxDurationMs,
+        node,
+        nodeCopy,
+        onSelect,
+        inPath: isInPath,
+        selected: selectedNodeId === node.id,
+        selectedTrace: selectedTraceId === trace.id,
+        trace
+      }
+    );
+  }
+  if (sessionNavItem) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SessionHierarchyBranch,
+      {
+        depth,
+        defaultExpandedNodeIds,
+        expandedNodeOverrides,
+        isExpanded,
+        item: sessionNavItem,
+        maxDurationMs,
+        node,
+        onSelect,
+        onToggle,
+        selected: selectedNodeId === node.id,
+        selectedNodeId,
+        selectedPathIds,
+        selectedTraceId,
+        sessionNavById,
+        traceById
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "tree-node-wrap",
+      style: { "--depth": String(depth) },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: clsx_default(
+              "tree-node-card",
+              selectedNodeId === node.id && "is-active",
+              isInPath && "is-in-path",
+              node.type === "trace" && "is-trace"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: clsx_default("tree-node-toggle", !isExpandable && "is-static"),
+                  disabled: !isExpandable,
+                  onClick: () => {
+                    if (isExpandable) {
+                      onToggle(node.id);
+                    }
+                  },
+                  "aria-label": isExpandable ? `${isExpanded ? "Collapse" : "Expand"} ${nodeCopy.label}` : void 0,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { className: clsx_default(isExpanded && "is-open") })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "tree-node-select",
+                  onClick: () => onSelect(node),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tree-node-copy", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tree-node-heading", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tree-node-label", children: nodeCopy.label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        Badge,
+                        {
+                          variant: "secondary",
+                          className: "tree-node-inline-badge",
+                          semantic: nodeCopy.badge,
+                          children: nodeCopy.badge
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tree-node-meta", children: nodeCopy.meta })
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tree-node-children", children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          HierarchyTreeNode,
+          {
+            defaultExpandedNodeIds,
+            depth: depth + 1,
+            expandedNodeOverrides,
+            maxDurationMs,
+            node: child,
+            onSelect,
+            onToggle,
+            selectedNodeId,
+            selectedPathIds,
+            selectedTraceId,
+            sessionNavById,
+            traceById
+          },
+          child.id
+        )) }) : null
+      ]
+    }
+  );
+}
+function SessionHierarchyBranch({
+  defaultExpandedNodeIds,
+  depth,
+  expandedNodeOverrides,
+  isExpanded,
+  item,
+  maxDurationMs,
+  node,
+  onSelect,
+  onToggle,
+  selected,
+  selectedNodeId,
+  selectedPathIds,
+  selectedTraceId,
+  sessionNavById,
+  traceById
+}) {
+  const detailLabel = formatList([
+    formatCountLabel(item.callCount, "call"),
+    formatUsdCost(item.costUsd)
+  ]) || formatCountLabel(item.callCount, "call");
+  const sessionSelectedPath = selectedNodeId ? findSessionNodePath([node], selectedNodeId) : [];
+  const sessionTimelineModel = buildHierarchyTimelineModel(
+    node,
+    traceById,
+    selectedNodeId,
+    sessionSelectedPath,
+    selectedTraceId
+  );
+  const sessionTimelineRow = sessionTimelineModel?.rows[0] ?? null;
+  const showEmbeddedTimeline = isExpanded && Boolean(sessionTimelineModel?.rows.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "tree-node-wrap",
+      style: { "--depth": String(depth) },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: clsx_default(
+              "tree-node-card tree-session-card",
+              selected && "is-active",
+              selectedPathIds.has(node.id) && "is-in-path"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: clsx_default(
+                    "tree-node-toggle",
+                    !node.children.length && "is-static"
+                  ),
+                  disabled: !node.children.length,
+                  onClick: () => {
+                    if (node.children.length) {
+                      onToggle(node.id);
+                    }
+                  },
+                  "aria-label": node.children.length ? `${isExpanded ? "Collapse" : "Expand"} ${item.primaryLabel}` : void 0,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { className: clsx_default(isExpanded && "is-open") })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: "tree-node-select session-tree-select",
+                  onClick: () => onSelect(node),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tree-node-copy session-tree-copy", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "session-tree-card-header", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "session-tree-card-title", title: item.primaryLabel, children: item.primaryLabel }),
+                        item.latestTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "session-tree-card-time", children: item.latestTimestamp }) : null
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tree-node-meta", children: detailLabel }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "session-tree-card-footer", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "session-tree-card-id", children: item.shortSessionId }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "session-tree-card-badges", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { variant: "outline", children: "Session" }),
+                          getSessionNavBadge(item)
+                        ] })
+                      ] })
+                    ] }),
+                    sessionTimelineModel && sessionTimelineRow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      SessionTreeTimelineBar,
+                      {
+                        model: sessionTimelineModel,
+                        row: sessionTimelineRow
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        showEmbeddedTimeline && sessionTimelineModel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "session-tree-timeline-shell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "session-tree-timeline-list",
+            role: "list",
+            "aria-label": "Session timeline",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              HierarchyTimelineRows,
+              {
+                className: "is-embedded",
+                model: sessionTimelineModel,
+                onSelectRow: (nodeId) => {
+                  const selectedTimelineNode = findSessionNodeById([node], nodeId);
+                  if (selectedTimelineNode) {
+                    onSelect(selectedTimelineNode);
+                  }
+                },
+                rows: sessionTimelineModel.rows.slice(1)
+              }
+            )
+          }
+        ) }) : isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tree-node-children", children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          HierarchyTreeNode,
+          {
+            defaultExpandedNodeIds,
+            depth: depth + 1,
+            expandedNodeOverrides,
+            maxDurationMs,
+            node: child,
+            onSelect,
+            onToggle,
+            selectedNodeId,
+            selectedPathIds,
+            selectedTraceId,
+            sessionNavById,
+            traceById
+          },
+          child.id
+        )) }) : null
+      ]
+    }
+  );
+}
+function TraceHierarchyLeaf({
+  depth,
+  inPath,
+  maxDurationMs,
+  node,
+  nodeCopy,
+  onSelect,
+  selected,
+  selectedTrace,
+  trace
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "tree-node-wrap tree-trace-wrap",
+      style: { "--depth": String(depth) },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: clsx_default(
+            "tree-node-card is-trace",
+            inPath && "is-in-path",
+            selected && "is-active",
+            selectedTrace && "is-detail-trace"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "tree-node-select tree-trace-select",
+              onClick: () => onSelect(node),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tree-node-copy", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "trace-nav-kicker", children: getTraceActorLabel(trace) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tree-node-label", children: nodeCopy.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tree-node-meta", children: formatList([
+                    formatTimelineTimestamp(trace.startedAt),
+                    nodeCopy.meta
+                  ]) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  TraceElapsedBar,
+                  {
+                    compact: true,
+                    durationMs: trace.durationMs,
+                    maxDurationMs
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
 function StatusBadge({
   status,
   onClick
@@ -22031,235 +22336,191 @@ function TraceMetricPill({
     }
   );
 }
-function HierarchyTimelineOverview({
-  axisStops = TIMELINE_AXIS_STOPS,
-  model,
-  onSelectRow
+function TraceElapsedBar({
+  compact = false,
+  durationMs,
+  maxDurationMs
 }) {
-  const listRef = (0, import_react3.useRef)(null);
-  const hasInitializedScrollRef = (0, import_react3.useRef)(false);
-  const totalCostLabel = formatCostSummaryLabel(
-    model.costUsd,
-    model.rows.length > 1
-  );
-  const hasTraceRows = model.rows.some((row) => row.type === "trace");
-  const activeRowId = model.rows.find((row) => row.isActive)?.id ?? model.rows.find((row) => row.isDetailTrace)?.id ?? null;
-  (0, import_react3.useEffect)(() => {
-    if (!activeRowId || !listRef.current) {
-      return;
-    }
-    if (!hasInitializedScrollRef.current) {
-      hasInitializedScrollRef.current = true;
-      return;
-    }
-    const list = listRef.current;
-    const target = [...list.querySelectorAll(
-      "[data-hierarchy-row-id]"
-    )].find((element) => element.dataset.hierarchyRowId === activeRowId);
-    if (!target) {
-      return;
+  const durationLabel = formatElapsedLabel(durationMs);
+  const scale = getElapsedScale(durationMs, maxDurationMs);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cn(
+        "trace-elapsed-bar",
+        compact && "is-compact",
+        durationMs === null && "is-pending"
+      ),
+      style: { "--elapsed-scale": String(scale) },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "trace-elapsed-track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "trace-elapsed-span" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "trace-elapsed-label", children: durationLabel })
+      ]
     }
-    const viewportTop = list.scrollTop;
-    const viewportBottom = viewportTop + list.clientHeight;
-    const targetTop = target.offsetTop;
-    const targetBottom = targetTop + target.offsetHeight;
-    if (targetTop >= viewportTop && targetBottom <= viewportBottom) {
-      return;
+  );
+}
+function SessionTreeTimelineBar({
+  model,
+  row
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      className: "session-tree-timeline",
+      style: {
+        "--session-tree-offset": model.durationMs > 0 ? String(row.offsetMs / model.durationMs) : "0",
+        "--session-tree-span": model.durationMs > 0 ? String(row.durationMs / model.durationMs) : "1"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "session-tree-timeline-meta", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "session-tree-timeline-start", children: formatTimelineTimestamp(row.startedAt) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "session-tree-timeline-duration", children: formatElapsedLabel(row.durationMs) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "session-tree-timeline-track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "session-tree-timeline-bar" }) })
+      ]
     }
-    const contextOffset = Math.max(
-      target.offsetHeight * 1.5,
-      list.clientHeight * 0.35
+  );
+}
+function HierarchyTimelineRows({
+  className,
+  model,
+  onSelectRow,
+  rows
+}) {
+  return rows.map((row) => {
+    const isTraceRow = row.type === "trace";
+    const rowClassName = cn(
+      "hierarchy-timeline-row",
+      className,
+      isTraceRow ? "is-clickable" : "is-structure",
+      row.depth === 0 && "is-root",
+      row.isActive && "is-active",
+      row.isDetailTrace && "is-detail-trace",
+      row.isInPath && "is-in-path",
+      `is-${row.type.replace(/[^a-z0-9-]/gi, "-")}`
     );
-    const nextTop = Math.max(0, targetTop - contextOffset);
-    list.scrollTo({ top: nextTop });
-  }, [activeRowId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-panel", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-title", children: "Session timeline" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-meta", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: model.sessionLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatTimelineTimestamp(model.startedAt) })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-header-side", children: [
-        totalCostLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TraceMetricPill, { tone: "cost", children: totalCostLabel }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TraceMetricPill, { tone: "latency", children: formatElapsedLabel(model.durationMs) })
-      ] })
-    ] }),
-    hasTraceRows ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-hint", children: "Click a call row to inspect it on the right." }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-axis", "aria-hidden": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-axis-track", children: axisStops.map((stop) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "span",
-        {
-          className: "hierarchy-timeline-axis-tick",
-          style: { "--timeline-axis-offset": String(stop) },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hierarchy-timeline-axis-label", children: formatElapsedLabel(model.durationMs * stop) })
-        },
-        stop
-      )) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref: listRef,
-        className: "hierarchy-timeline-list",
-        role: "list",
-        "aria-label": "Nested session timeline",
-        children: model.rows.map((row) => {
-          const isTraceRow = row.type === "trace";
-          const rowClassName = cn(
-            "hierarchy-timeline-row",
-            isTraceRow ? "is-clickable" : "is-structure",
-            row.depth === 0 && "is-root",
-            row.isActive && "is-active",
-            row.isDetailTrace && "is-detail-trace",
-            row.isInPath && "is-in-path",
-            `is-${row.type.replace(/[^a-z0-9-]/gi, "-")}`
-          );
-          const rowStyle = {
-            "--timeline-depth": String(row.depth),
-            "--timeline-offset": String(
-              model.durationMs > 0 ? row.offsetMs / model.durationMs : 0
-            ),
-            "--timeline-span": String(
-              model.durationMs > 0 ? row.durationMs / model.durationMs : 1
-            )
-          };
-          const rowContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react3.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-row-time", children: formatTimelineTimestamp(row.startedAt) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-row-branch", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                "div",
-                {
-                  className: "hierarchy-timeline-row-gutter",
-                  "aria-hidden": "true",
-                  children: [
-                    row.ancestorContinuations.map((continues, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "span",
-                      {
-                        className: cn(
-                          "hierarchy-timeline-row-ancestor",
-                          continues && "has-line"
-                        ),
-                        style: {
-                          "--timeline-connector-index": String(index)
-                        }
-                      },
-                      `${row.id}-ancestor-${index}`
-                    )),
-                    row.depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                      "span",
-                      {
-                        className: "hierarchy-timeline-row-connector",
-                        style: {
-                          "--timeline-connector-index": String(
-                            row.depth - 1
-                          )
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hierarchy-timeline-row-connector-top" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hierarchy-timeline-row-connector-elbow" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            "span",
-                            {
-                              className: cn(
-                                "hierarchy-timeline-row-connector-bottom",
-                                (row.hasVisibleChildren || !row.isLastSibling) && "has-line"
-                              )
-                            }
-                          )
-                        ]
-                      }
-                    ) : null
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-row-labels", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-row-title", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hierarchy-timeline-row-title-text", children: row.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    Badge,
-                    {
-                      variant: "secondary",
-                      className: "hierarchy-timeline-pill",
-                      semantic: row.badge,
-                      children: row.badge
-                    }
-                  ),
-                  row.hasStructuredInput ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "span",
-                    {
-                      className: "hierarchy-timeline-row-flag",
-                      title: "Structured input detected for this call",
-                      children: "Structured input"
-                    }
-                  ) : null,
-                  row.hasHighlights && !row.hasStructuredInput ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "span",
-                    {
-                      className: "hierarchy-timeline-row-flag is-highlight",
-                      title: "Trace insights available",
-                      children: "Insight"
-                    }
-                  ) : null
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-row-meta", children: row.meta })
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-row-bars", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "div",
-                {
-                  className: "hierarchy-timeline-row-track",
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hierarchy-timeline-row-bar" })
-                }
+    const rowStyle = {
+      "--timeline-depth": String(row.depth),
+      "--timeline-offset": String(
+        model.durationMs > 0 ? row.offsetMs / model.durationMs : 0
+      ),
+      "--timeline-span": String(
+        model.durationMs > 0 ? row.durationMs / model.durationMs : 1
+      )
+    };
+    const rowContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-row-time", children: formatTimelineTimestamp(row.startedAt) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-row-branch", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-row-gutter", "aria-hidden": "true", children: [
+          row.ancestorContinuations.map((continues, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: cn(
+                "hierarchy-timeline-row-ancestor",
+                continues && "has-line"
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-row-duration", children: formatElapsedLabel(row.durationMs) })
-            ] })
-          ] });
-          if (isTraceRow) {
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                role: "listitem",
-                title: buildHierarchyTimelineRowTooltip(row),
-                "aria-current": row.isActive || row.isDetailTrace ? "true" : void 0,
-                "data-hierarchy-row-id": row.id,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "button",
+              style: {
+                "--timeline-connector-index": String(index)
+              }
+            },
+            `${row.id}-ancestor-${index}`
+          )),
+          row.depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "span",
+            {
+              className: "hierarchy-timeline-row-connector",
+              style: {
+                "--timeline-connector-index": String(row.depth - 1)
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hierarchy-timeline-row-connector-top" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hierarchy-timeline-row-connector-elbow" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
                   {
-                    type: "button",
-                    className: rowClassName,
-                    style: rowStyle,
-                    onClick: () => onSelectRow(row.id),
-                    children: rowContent
+                    className: cn(
+                      "hierarchy-timeline-row-connector-bottom",
+                      (row.hasVisibleChildren || !row.isLastSibling) && "has-line"
+                    )
                   }
                 )
-              },
-              row.id
-            );
-          }
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
+              ]
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-row-labels", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-row-title", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hierarchy-timeline-row-title-text", children: row.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              Badge,
+              {
+                variant: "secondary",
+                className: "hierarchy-timeline-pill",
+                semantic: row.badge,
+                children: row.badge
+              }
+            ),
+            row.hasStructuredInput ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: "hierarchy-timeline-row-flag",
+                title: "Structured input detected for this call",
+                children: "Structured input"
+              }
+            ) : null,
+            row.hasHighlights && !row.hasStructuredInput ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: "hierarchy-timeline-row-flag is-highlight",
+                title: "Trace insights available",
+                children: "Insight"
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-row-meta", children: row.meta })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hierarchy-timeline-row-bars", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-row-track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hierarchy-timeline-row-bar" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-row-duration", children: formatElapsedLabel(row.durationMs) })
+      ] })
+    ] });
+    if (isTraceRow) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          role: "listitem",
+          title: buildHierarchyTimelineRowTooltip(row),
+          "aria-current": row.isActive || row.isDetailTrace ? "true" : void 0,
+          "data-hierarchy-row-id": row.id,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
             {
-              role: "listitem",
+              type: "button",
               className: rowClassName,
               style: rowStyle,
-              title: buildHierarchyTimelineRowTooltip(row),
-              "aria-current": row.isActive || row.isDetailTrace ? "true" : void 0,
-              "data-hierarchy-row-id": row.id,
+              onClick: () => onSelectRow(row.id),
               children: rowContent
-            },
-            row.id
-          );
-        })
-      }
-    )
-  ] });
+            }
+          )
+        },
+        row.id
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        role: "listitem",
+        className: rowClassName,
+        style: rowStyle,
+        title: buildHierarchyTimelineRowTooltip(row),
+        "aria-current": row.isActive || row.isDetailTrace ? "true" : void 0,
+        "data-hierarchy-row-id": row.id,
+        children: rowContent
+      },
+      row.id
+    );
+  });
 }
 function TraceDetailPanel({
   activeTab,
@@ -22271,10 +22532,8 @@ function TraceDetailPanel({
   onApplyTraceFilter,
   onBack,
   onNavigateHierarchyNode,
-  onSelectTimelineNode,
   onTabChange,
-  onToggleJsonMode,
-  timelineModel
+  onToggleJsonMode
 }) {
   const traceDetailPrimaryRef = (0, import_react3.useRef)(null);
   const [showInlineContextRail, setShowInlineContextRail] = (0, import_react3.useState)(false);
@@ -22284,7 +22543,6 @@ function TraceDetailPanel({
   const detailSubtitle = formatTraceProviderSummary(detail ?? fallbackTrace);
   const detailCostUsd = detail ? getUsageCostUsd(detail.usage) : fallbackTrace?.costUsd ?? null;
   const detailCostLabel = formatUsdCost(detailCostUsd);
-  const hasSecondaryInspector = Boolean(detail && timelineModel);
   const detailFilterSource = detail ?? fallbackTrace;
   const canInlineContextRailTab = activeTab === "conversation" || activeTab === "request" || activeTab === "response";
   const visibleDetailTabs = canInlineContextRailTab && showInlineContextRail ? detailTabs.filter((tab) => tab.id !== "context") : detailTabs;
@@ -22386,77 +22644,59 @@ function TraceDetailPanel({
       onBack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-actions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { variant: "outline", onClick: onBack, children: "Show hierarchy" }) }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-body", children: detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        className: cn(
-          "trace-detail-main",
-          hasSecondaryInspector && "has-secondary-inspector"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "trace-detail-primary", ref: traceDetailPrimaryRef, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "trace-detail-toolbar", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-tabs-shell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs, { value: activeTab, onChange: onTabChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsList, { className: "detail-tabs", children: visibleDetailTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTrigger, { value: tab.id, children: tab.label }, tab.id)) }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                Button,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-body", children: detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-main", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "trace-detail-primary", ref: traceDetailPrimaryRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "trace-detail-toolbar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-tabs-shell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs, { value: activeTab, onChange: onTabChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsList, { className: "detail-tabs", children: visibleDetailTabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTrigger, { value: tab.id, children: tab.label }, tab.id)) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          Button,
+          {
+            variant: "outline",
+            className: "trace-detail-json-toggle",
+            onClick: () => onToggleJsonMode(activeTab),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Boxes, { "data-icon": "inline-start" }),
+              jsonMode === "formatted" ? "Raw JSON" : "Formatted"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-pane", children: showContextRailInPrimary ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "detail-inline-context-layout", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "detail-inline-context-main", children: renderTabContent(
+          activeTab,
+          detail,
+          jsonMode,
+          onApplyTagFilter,
+          onApplyTraceFilter
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "aside",
+          {
+            className: "conversation-context-rail",
+            "aria-label": "Context summary",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "conversation-context-rail-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "conversation-context-rail-title", children: "Context" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "conversation-context-rail-copy", children: "Key trace metadata alongside the conversation." })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ContextInspectorView,
                 {
-                  variant: "outline",
-                  className: "trace-detail-json-toggle",
-                  onClick: () => onToggleJsonMode(activeTab),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Boxes, { "data-icon": "inline-start" }),
-                    jsonMode === "formatted" ? "Raw JSON" : "Formatted"
-                  ]
+                  detail,
+                  onApplyTagFilter
                 }
               )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-pane", children: showContextRailInPrimary ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "detail-inline-context-layout", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "detail-inline-context-main", children: renderTabContent(
-                activeTab,
-                detail,
-                jsonMode,
-                onApplyTagFilter,
-                onApplyTraceFilter
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                "aside",
-                {
-                  className: "conversation-context-rail",
-                  "aria-label": "Context summary",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "conversation-context-rail-header", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "conversation-context-rail-title", children: "Context" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "conversation-context-rail-copy", children: "Key trace metadata alongside the conversation." })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      ContextInspectorView,
-                      {
-                        detail,
-                        onApplyTagFilter
-                      }
-                    )
-                  ]
-                }
-              )
-            ] }) : renderTabContent(
-              activeTab,
-              detail,
-              jsonMode,
-              onApplyTagFilter,
-              onApplyTraceFilter
-            ) }) })
-          ] }),
-          timelineModel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: "trace-detail-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            HierarchyTimelineOverview,
-            {
-              model: timelineModel,
-              onSelectRow: onSelectTimelineNode
-            }
-          ) }) : null
-        ]
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-empty", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ]
+          }
+        )
+      ] }) : renderTabContent(
+        activeTab,
+        detail,
+        jsonMode,
+        onApplyTagFilter,
+        onApplyTraceFilter
+      ) }) })
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-detail-empty", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       EmptyState,
       {
         icon: ArrowUpRight,
@@ -23528,52 +23768,6 @@ function buildDetailTabs(detail) {
   }
   return tabs;
 }
-function findNodeById(nodes, id) {
-  for (const node of nodes) {
-    if (node.id === id) {
-      return node;
-    }
-    const child = findNodeById(node.children, id);
-    if (child) {
-      return child;
-    }
-  }
-  return null;
-}
-function findNodePath(nodes, id, trail = []) {
-  for (const node of nodes) {
-    const nextTrail = [...trail, node];
-    if (node.id === id) {
-      return nextTrail;
-    }
-    const childTrail = findNodePath(node.children, id, nextTrail);
-    if (childTrail.length) {
-      return childTrail;
-    }
-  }
-  return [];
-}
-function getNewestTraceId(node) {
-  if (!node?.traceIds.length) {
-    return null;
-  }
-  return node.traceIds[0] || null;
-}
-function getDefaultExpandedNodeIds(nodes) {
-  const expanded = /* @__PURE__ */ new Set();
-  const visit = (node) => {
-    if (node.children.length && (node.type === "session" || node.type === "actor")) {
-      expanded.add(node.id);
-    }
-    for (const child of node.children) {
-      visit(child);
-    }
-  };
-  for (const node of nodes) {
-    visit(node);
-  }
-  return expanded;
-}
 function getHierarchyNodeCopy(node, traceById) {
   switch (node.type) {
     case "session":
@@ -23710,40 +23904,6 @@ function formatTraceProviderSummary(trace) {
   }
   return formatList([trace.provider, trace.model]);
 }
-function groupTracesForNav(items) {
-  const groups = /* @__PURE__ */ new Map();
-  const uniqueSessions = new Set(items.map((item) => item.hierarchy.sessionId));
-  const groupMode = uniqueSessions.size > 1 ? "session" : "kind";
-  for (const item of items) {
-    const key = groupMode === "session" ? `session:${item.hierarchy.sessionId || "unknown-session"}` : `kind:${item.kind}:${item.hierarchy.guardrailPhase || item.hierarchy.stage || item.mode}`;
-    const group = groups.get(key) ?? [];
-    group.push(item);
-    groups.set(key, group);
-  }
-  return [...groups.entries()].map(([groupKey, traces]) => {
-    const latestStartedAt = traces[0]?.startedAt ?? null;
-    return {
-      costUsd: sumTraceCosts(traces),
-      id: `trace-group:${groupKey}`,
-      isAggregateCost: traces.length > 1,
-      items: traces,
-      label: groupMode === "session" ? `Session ${shortId2(traces[0]?.hierarchy.sessionId || "unknown")}` : getTraceActorLabel(traces[0]),
-      meta: formatList([
-        latestStartedAt ? formatCompactTimestamp2(latestStartedAt) : null,
-        formatCountLabel(traces.length, "trace")
-      ]) || "No metadata"
-    };
-  });
-}
-function sumTraceCosts(items) {
-  const costs = items.map((item) => item.costUsd).filter(
-    (value) => value !== null && Number.isFinite(value)
-  );
-  if (!costs.length) {
-    return null;
-  }
-  return roundCostUsd2(costs.reduce((sum, value) => sum + value, 0));
-}
 function getTraceActorLabel(trace) {
   if (trace.kind === "guardrail") {
     return `${capitalize(trace.hierarchy.guardrailPhase || "guardrail")} guardrail`;
@@ -24287,9 +24447,6 @@ async function copyText(value) {
     return false;
   }
 }
-function toSessionNodeId(sessionId) {
-  return `session:${sessionId}`;
-}
 function toTraceNodeId(traceId) {
   return `trace:${traceId}`;
 }
@@ -24784,12 +24941,6 @@ function getSemanticBadgeValue(value) {
       return null;
   }
 }
-function formatCompactTimestamp2(value) {
-  return new Date(value).toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit"
-  });
-}
 function formatTimelineTimestamp(value) {
   return new Date(value).toLocaleTimeString([], {
     hour: "2-digit",
@@ -24803,6 +24954,14 @@ function getMaxDurationMs(items) {
   );
   return durations.length ? Math.max(...durations) : 1;
 }
+function getElapsedScale(durationMs, maxDurationMs) {
+  if (durationMs === null || durationMs <= 0 || !Number.isFinite(durationMs)) {
+    return 0.16;
+  }
+  const safeMax = Math.max(maxDurationMs, durationMs, 1);
+  const ratio = Math.log1p(durationMs) / Math.log1p(safeMax);
+  return Math.max(0.14, Math.min(1, ratio));
+}
 function formatElapsedLabel(durationMs) {
   if (durationMs === null || !Number.isFinite(durationMs)) {
     return "Running";
@@ -24993,7 +25152,7 @@ function parseEvent(data) {
     return null;
   }
 }
-var import_react3, import_jsx_runtime, MESSAGE_COLLAPSE_CHAR_LIMIT, MESSAGE_COLLAPSE_LINE_LIMIT, MESSAGE_COLLAPSE_HEIGHT_PROSE, MESSAGE_COLLAPSE_HEIGHT_STRUCTURED, MESSAGE_COLLAPSE_CHAR_LIMIT_SYSTEM, MESSAGE_COLLAPSE_LINE_LIMIT_SYSTEM, MESSAGE_COLLAPSE_HEIGHT_PROSE_SYSTEM, MESSAGE_COLLAPSE_HEIGHT_STRUCTURED_SYSTEM, TIMELINE_AXIS_STOPS, COMPACT_TIMELINE_AXIS_STOPS, EMPTY_TRACE_INSIGHTS, MarkdownBlock, STATUS_OPTIONS, KIND_OPTIONS, INITIAL_FILTERS;
+var import_react3, import_jsx_runtime, MESSAGE_COLLAPSE_CHAR_LIMIT, MESSAGE_COLLAPSE_LINE_LIMIT, MESSAGE_COLLAPSE_HEIGHT_PROSE, MESSAGE_COLLAPSE_HEIGHT_STRUCTURED, MESSAGE_COLLAPSE_CHAR_LIMIT_SYSTEM, MESSAGE_COLLAPSE_LINE_LIMIT_SYSTEM, MESSAGE_COLLAPSE_HEIGHT_PROSE_SYSTEM, MESSAGE_COLLAPSE_HEIGHT_STRUCTURED_SYSTEM, EMPTY_TRACE_INSIGHTS, MarkdownBlock, STATUS_OPTIONS, KIND_OPTIONS, INITIAL_FILTERS;
 var init_app = __esm({
   "client/src/app.tsx"() {
     init_lucide_react();
@@ -25011,8 +25170,6 @@ var init_app = __esm({
     MESSAGE_COLLAPSE_LINE_LIMIT_SYSTEM = 5;
     MESSAGE_COLLAPSE_HEIGHT_PROSE_SYSTEM = "9rem";
     MESSAGE_COLLAPSE_HEIGHT_STRUCTURED_SYSTEM = "9rem";
-    TIMELINE_AXIS_STOPS = [0, 0.25, 0.5, 0.75, 1];
-    COMPACT_TIMELINE_AXIS_STOPS = [0, 0.5, 1];
     EMPTY_TRACE_INSIGHTS = {
       highlights: [],
       structuredInputs: []