@mtharrison/loupe 1.3.0 → 1.4.0

package/README.md

@@ -4,6 +4,8 @@
 
 # @mtharrison/loupe
 
+
+
 Loupe is a lightweight local tracing dashboard for LLM applications and agent systems. It captures full request and response payloads with tags and hierarchy context, then serves an inspector UI on `127.0.0.1` with no database, no containers, and no persistence.
 
 This package is for local development. Traces live in memory and are cleared on restart.

package/dist/client/app.css

@@ -402,7 +402,7 @@ pre {
 .workspace-grid {
   display: grid;
   flex: 1;
-  grid-template-columns: minmax(30rem, 36rem) minmax(0, 1fr);
+  grid-template-columns: clamp(34rem, 38vw, 42rem) minmax(0, 1fr);
   gap: 0.9rem;
   align-items: stretch;
   min-height: 0;
@@ -493,7 +493,7 @@ pre {
   min-height: 0;
   flex: 1;
   overflow: auto;
-  padding-right: 0.12rem;
+  padding-right: 0.4rem;
   scrollbar-gutter: stable;
 }
 .session-sidebar-empty {
@@ -1189,7 +1189,12 @@ pre {
   --timeline-indent: 1rem;
   --timeline-gutter-base: 1.25rem;
   --timeline-connector-base: 0.22rem;
+  --timeline-row-padding-x: 0.55rem;
+  --timeline-card-radius: 12px;
+  --timeline-card-inset-y: 0.14rem;
   --timeline-gutter-width: calc( var(--timeline-depth, 0) * var(--timeline-indent) + var(--timeline-gutter-base) );
+  --timeline-card-left: calc( var(--timeline-row-padding-x) + var(--timeline-time-column) + var(--timeline-column-gap) + var(--timeline-gutter-width) );
+  --timeline-card-right: var(--timeline-row-padding-x);
   --timeline-row-color: rgba(92, 121, 171, 0.9);
   --timeline-bar-stroke: color-mix(in srgb, var(--timeline-row-color) 74%, white);
   --timeline-connector-color: color-mix( in srgb, var(--timeline-row-color) 28%, rgba(84, 100, 125, 0.18) );
@@ -1201,7 +1206,7 @@ pre {
   width: 100%;
   border: 0;
   background: transparent;
-  padding: 0.12rem 0.55rem;
+  padding: 0.12rem var(--timeline-row-padding-x);
   color: inherit;
   cursor: default;
   font: inherit;
@@ -1213,11 +1218,11 @@ pre {
 .hierarchy-timeline-row::before {
   content: "";
   position: absolute;
-  top: 0.14rem;
-  right: 0.55rem;
-  bottom: 0.14rem;
-  left: calc(0.55rem + var(--timeline-time-column) + var(--timeline-column-gap) + var(--timeline-gutter-width));
-  border-radius: 12px;
+  top: var(--timeline-card-inset-y);
+  right: var(--timeline-card-right);
+  bottom: var(--timeline-card-inset-y);
+  left: var(--timeline-card-left);
+  border-radius: var(--timeline-card-radius);
   border: 1px solid transparent;
   background: rgba(255, 255, 255, 0.42);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 12px rgba(32, 50, 76, 0.03);
@@ -1248,8 +1253,18 @@ pre {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 12px rgba(32, 50, 76, 0.02);
 }
 .hierarchy-timeline-row:focus-visible {
-  outline: 2px solid rgba(40, 93, 168, 0.22);
-  outline-offset: 2px;
+  outline: none;
+}
+.hierarchy-timeline-row:focus-visible::after {
+  content: "";
+  position: absolute;
+  top: calc(var(--timeline-card-inset-y) - 0.08rem);
+  right: calc(var(--timeline-card-right) - 0.08rem);
+  bottom: calc(var(--timeline-card-inset-y) - 0.08rem);
+  left: calc(var(--timeline-card-left) - 0.08rem);
+  border-radius: calc(var(--timeline-card-radius) + 2px);
+  box-shadow: 0 0 0 2px rgba(40, 93, 168, 0.18);
+  pointer-events: none;
 }
 .hierarchy-timeline-row.is-in-path::before {
   background: rgba(240, 246, 255, 0.54);
@@ -1900,27 +1915,67 @@ pre {
   flex-wrap: wrap;
 }
 .session-tree-timeline-shell {
-  padding: 0 0.1rem 0.2rem 2.35rem;
+  padding: 0.08rem 0.1rem 0.24rem 0.5rem;
 }
 .session-tree-timeline-list {
   display: flex;
   flex-direction: column;
-  gap: 0.45rem;
+  gap: 0;
 }
 .session-tree-timeline-list .hierarchy-timeline-row {
-  grid-template-columns: 4rem minmax(0, 1fr) minmax(6rem, 7.25rem);
-  gap: 0.4rem;
+  --timeline-time-column: 4.8rem;
+  --timeline-column-gap: 0.4rem;
+  --timeline-indent: 0.72rem;
+  --timeline-gutter-base: 0.75rem;
+  --embedded-bars-space: clamp(10.75rem, 49%, 15.6rem);
+  --timeline-row-padding-x: 0.18rem;
+  --timeline-card-radius: 18px;
+  --timeline-card-inset-y: 0.24rem;
+  --timeline-card-left: calc( var(--timeline-row-padding-x) + var(--timeline-time-column) + var(--timeline-column-gap) + var(--timeline-gutter-width) - 0.12rem );
+  --timeline-card-right: 0.1rem;
+  display: flex;
+  gap: var(--timeline-column-gap);
+  align-items: stretch;
+  max-width: 100%;
+  overflow: visible;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-time {
+  flex: 0 0 var(--timeline-time-column);
+  justify-content: flex-start;
+  text-align: left;
+  padding-right: 0;
+  padding-left: 0.08rem;
+  overflow: visible;
+  font-size: 0.74rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-branch {
+  flex: 1 1 0;
+  min-width: 0;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-labels {
-  padding: 0.72rem 0.5rem 0.72rem 1.05rem;
+  min-width: 0;
+  gap: 0.24rem;
+  padding: 0.84rem calc(var(--embedded-bars-space) + 0.8rem) 0.84rem 0.92rem;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-bars {
-  grid-template-columns: minmax(4.8rem, 1fr) auto;
-  column-gap: 0.35rem;
-  padding: 0.72rem 0.8rem 0.72rem 0.2rem;
+  position: absolute;
+  top: 0.84rem;
+  right: 0.92rem;
+  width: var(--embedded-bars-space);
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.36rem;
+  padding: 0;
+  overflow: hidden;
+  z-index: 2;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-title {
-  flex-wrap: nowrap;
+  position: relative;
+  display: block;
+  min-height: 0;
+  padding-top: 2.05rem;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-title-text,
 .session-tree-timeline-list .hierarchy-timeline-row-meta {
@@ -1929,13 +1984,53 @@ pre {
   white-space: nowrap;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-title-text {
-  font-size: 0.84rem;
+  display: block;
+  font-size: 0.86rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-pill {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-flag {
+  margin-top: 0.35rem;
+  margin-right: 0.35rem;
 }
 .session-tree-timeline-list .hierarchy-timeline-row-meta,
 .session-tree-timeline-list .hierarchy-timeline-row-time,
 .session-tree-timeline-list .hierarchy-timeline-row-duration {
   font-size: 0.72rem;
 }
+.session-tree-timeline-list .hierarchy-timeline-row-track {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 1.3rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-track::before {
+  height: 0.4rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-bar {
+  width: max(0.65rem, calc(var(--timeline-span, 0.1) * 100%));
+  height: 0.65rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-bar::before,
+.session-tree-timeline-list .hierarchy-timeline-row-bar::after {
+  height: 0.9rem;
+}
+.session-tree-timeline-list .hierarchy-timeline-row-duration {
+  flex: 0 0 auto;
+}
+.session-tree-timeline-list .hierarchy-timeline-row.is-active::before {
+  border-color: rgba(40, 93, 168, 0.16);
+  background: rgba(236, 244, 255, 0.9);
+  box-shadow: inset 2px 0 0 rgba(40, 93, 168, 0.54), 0 8px 20px rgba(32, 50, 76, 0.06);
+}
+.session-tree-timeline-list .hierarchy-timeline-row.is-detail-trace:not(.is-active)::before {
+  box-shadow: inset 2px 0 0 rgba(40, 93, 168, 0.42), 0 6px 18px rgba(32, 50, 76, 0.05);
+}
+.session-tree-timeline-list .hierarchy-timeline-row:focus-visible::after {
+  box-shadow: 0 0 0 2px rgba(40, 93, 168, 0.14);
+}
 .session-tree-timeline {
   display: inline-flex;
   min-width: 0;

package/dist/client/app.js

@@ -21048,7 +21048,7 @@ function resolveSessionTreeSelection(sessionNodes, selectedNodeId, selectedTrace
     selectedTraceId: nextSelectedTraceId
   };
 }
-function getDefaultExpandedSessionTreeNodeIds(sessionNodes, activeSessionId, selectedNodeId) {
+function getDefaultExpandedSessionTreeNodeIds(sessionNodes, activeSessionId, selectedNodeId, selectedTraceId = null) {
   const expanded = /* @__PURE__ */ new Set();
   const activeSession = (activeSessionId ? sessionNodes.find((node) => node.id === activeSessionId) ?? null : null) ?? sessionNodes[0] ?? null;
   if (!activeSession) {
@@ -21069,6 +21069,16 @@ function getDefaultExpandedSessionTreeNodeIds(sessionNodes, activeSessionId, sel
       }
     }
   }
+  if (selectedTraceId) {
+    for (const node of findSessionNodePath(
+      [activeSession],
+      `trace:${selectedTraceId}`
+    )) {
+      if (node.children.length) {
+        expanded.add(node.id);
+      }
+    }
+  }
   return expanded;
 }
 function deriveSessionNavItem(node, traceById) {
@@ -21459,7 +21469,7 @@ function App() {
     () => deriveSessionNavItems(sessionNodes, traceById),
     [sessionNodes, traceById]
   );
-  const sessionNavById = (0, import_react3.useMemo)(
+  const sessionNavById2 = (0, import_react3.useMemo)(
     () => new Map(sessionNavItems.map((item) => [item.id, item])),
     [sessionNavItems]
   );
@@ -21478,8 +21488,10 @@ function App() {
     [sessionNodes, selectedTraceId]
   );
   const selectedPathIds = (0, import_react3.useMemo)(
-    () => new Set(selectedNodePath.map((node) => node.id)),
-    [selectedNodePath]
+    () => new Set(
+      [...selectedNodePath, ...selectedTracePath].map((node) => node.id)
+    ),
+    [selectedNodePath, selectedTracePath]
   );
   const selectedSessionNode = (0, import_react3.useMemo)(
     () => (selectedNodePath[0]?.type === "session" ? selectedNodePath[0] : null) ?? (selectedTracePath[0]?.type === "session" ? selectedTracePath[0] : null) ?? sessionNodes[0] ?? null,
@@ -21532,9 +21544,10 @@ function App() {
     () => getDefaultExpandedSessionTreeNodeIds(
       sessionNodes,
       selectedSessionNode?.id ?? null,
-      selectedNodeId
+      selectedNodeId,
+      selectedTraceId
     ),
-    [selectedNodeId, selectedSessionNode, sessionNodes]
+    [selectedNodeId, selectedSessionNode, selectedTraceId, sessionNodes]
   );
   const activeTabJsonMode = tabModes[detailTab] ?? "formatted";
   const activeTagFilterCount = countTagFilters(filters.tags);
@@ -21627,7 +21640,7 @@ function App() {
     if (!node) {
       return;
     }
-    const nextTraceId = selectedTraceId && node.traceIds.includes(selectedTraceId) ? selectedTraceId : getNewestTraceIdForNode(node);
+    const nextTraceId = node.type === "trace" ? node.meta.traceId ?? node.traceIds[0] ?? null : selectedTraceId && node.traceIds.includes(selectedTraceId) ? selectedTraceId : getNewestTraceIdForNode(node);
     (0, import_react3.startTransition)(() => {
       setSelectedNodeId(nodeId);
       if (nextTraceId !== selectedTraceId) {
@@ -21779,7 +21792,7 @@ function App() {
                 selectedNodeId,
                 selectedPathIds,
                 selectedTraceId,
-                sessionNavById,
+                sessionNavById: sessionNavById2,
                 totalCount: allSessionCount,
                 traceById
               }
@@ -21809,6 +21822,7 @@ function App() {
               {
                 activeTab,
                 detail,
+                detailPath: selectedTracePath.length ? selectedTracePath : selectedNodePath,
                 detailTabs,
                 fallbackTrace: selectedTraceSummary,
                 jsonMode: activeTabJsonMode,
@@ -21821,7 +21835,8 @@ function App() {
                     ...current,
                     [tabId]: (current[tabId] ?? "formatted") === "formatted" ? "raw" : "formatted"
                   }));
-                })
+                }),
+                traceById
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, { className: "content-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               EmptyState,
@@ -21892,7 +21907,7 @@ function SessionTreeNavigator({
   selectedNodeId,
   selectedPathIds,
   selectedTraceId,
-  sessionNavById,
+  sessionNavById: sessionNavById2,
   totalCount,
   traceById
 }) {
@@ -21921,7 +21936,7 @@ function SessionTreeNavigator({
         selectedNodeId,
         selectedPathIds,
         selectedTraceId,
-        sessionNavById,
+        sessionNavById: sessionNavById2,
         traceById
       }
     ) })
@@ -21956,7 +21971,7 @@ function HierarchyTree({
   selectedNodeId,
   selectedPathIds,
   selectedTraceId,
-  sessionNavById,
+  sessionNavById: sessionNavById2,
   traceById
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tree-root", children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -21972,7 +21987,7 @@ function HierarchyTree({
       selectedNodeId,
       selectedPathIds,
       selectedTraceId,
-      sessionNavById,
+      sessionNavById: sessionNavById2,
       traceById
     },
     node.id
@@ -21989,7 +22004,7 @@ function HierarchyTreeNode({
   selectedNodeId,
   selectedPathIds,
   selectedTraceId,
-  sessionNavById,
+  sessionNavById: sessionNavById2,
   traceById
 }) {
   const isExpandable = node.children.length > 0;
@@ -21999,20 +22014,28 @@ function HierarchyTreeNode({
   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;
+  const sessionNavItem = node.type === "session" ? sessionNavById2.get(node.id) ?? null : null;
   if (node.type === "trace" && trace) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      TraceHierarchyLeaf,
+      TraceHierarchyNode,
       {
+        defaultExpandedNodeIds,
         depth,
+        expandedNodeOverrides,
         maxDurationMs,
         node,
         nodeCopy,
         onSelect,
+        onToggle,
         inPath: isInPath,
+        isExpanded,
         selected: selectedNodeId === node.id,
+        selectedNodeId,
+        selectedPathIds,
         selectedTrace: selectedTraceId === trace.id,
-        trace
+        selectedTraceId,
+        trace,
+        traceById
       }
     );
   }
@@ -22033,7 +22056,7 @@ function HierarchyTreeNode({
         selectedNodeId,
         selectedPathIds,
         selectedTraceId,
-        sessionNavById,
+        sessionNavById: sessionNavById2,
         traceById
       }
     );
@@ -22108,7 +22131,7 @@ function HierarchyTreeNode({
             selectedNodeId,
             selectedPathIds,
             selectedTraceId,
-            sessionNavById,
+            sessionNavById: sessionNavById2,
             traceById
           },
           child.id
@@ -22131,7 +22154,7 @@ function SessionHierarchyBranch({
   selectedNodeId,
   selectedPathIds,
   selectedTraceId,
-  sessionNavById,
+  sessionNavById: sessionNavById2,
   traceById
 }) {
   const detailLabel = formatList([
@@ -22249,7 +22272,7 @@ function SessionHierarchyBranch({
             selectedNodeId,
             selectedPathIds,
             selectedTraceId,
-            sessionNavById,
+            sessionNavById: sessionNavById2,
             traceById
           },
           child.id
@@ -22258,59 +22281,105 @@ function SessionHierarchyBranch({
     }
   );
 }
-function TraceHierarchyLeaf({
+function TraceHierarchyNode({
+  defaultExpandedNodeIds,
   depth,
+  expandedNodeOverrides,
   inPath,
+  isExpanded,
   maxDurationMs,
   node,
   nodeCopy,
   onSelect,
+  onToggle,
   selected,
+  selectedNodeId,
+  selectedPathIds,
   selectedTrace,
-  trace
+  selectedTraceId,
+  trace,
+  traceById
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const isExpandable = node.children.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "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
-                  }
-                )
-              ]
-            }
-          )
-        }
-      )
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "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.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.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
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        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
+      ]
     }
   );
 }
@@ -22525,6 +22594,7 @@ function HierarchyTimelineRows({
 function TraceDetailPanel({
   activeTab,
   detail,
+  detailPath,
   detailTabs,
   fallbackTrace,
   jsonMode,
@@ -22533,11 +22603,12 @@ function TraceDetailPanel({
   onBack,
   onNavigateHierarchyNode,
   onTabChange,
-  onToggleJsonMode
+  onToggleJsonMode,
+  traceById
 }) {
   const traceDetailPrimaryRef = (0, import_react3.useRef)(null);
   const [showInlineContextRail, setShowInlineContextRail] = (0, import_react3.useState)(false);
-  const detailCopy = detail ? getTraceDisplayCopy(detail) : fallbackTrace ? getTraceDisplayCopy(fallbackTrace) : null;
+  const detailCopy = detailPath.length ? getHierarchyPathDisplayCopy(detailPath, traceById) : detail ? getTraceDisplayCopy(detail) : fallbackTrace ? getTraceDisplayCopy(fallbackTrace) : null;
   const detailStatus = detail?.status ?? fallbackTrace?.status ?? null;
   const detailDuration = detail ? formatTraceDuration(detail) : fallbackTrace ? fallbackTrace.durationMs == null ? "Running" : `${fallbackTrace.durationMs} ms` : null;
   const detailSubtitle = formatTraceProviderSummary(detail ?? fallbackTrace);
@@ -22848,6 +22919,24 @@ function renderTabContent(tab, detail, jsonMode, onApplyTagFilter, onApplyTraceF
           }
         ) : null
       ] });
+    case "otel":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        JsonCard,
+        {
+          title: "OTel span",
+          value: {
+            name: detail.name,
+            spanContext: detail.spanContext,
+            parentSpanId: detail.parentSpanId,
+            spanKind: detail.spanKind,
+            spanStatus: detail.spanStatus,
+            startTime: detail.startedAt,
+            endTime: detail.endedAt,
+            attributes: detail.attributes,
+            events: detail.events
+          }
+        }
+      );
     default:
       return null;
   }
@@ -23766,6 +23855,7 @@ function buildDetailTabs(detail) {
   if (detail.stream) {
     tabs.push({ id: "stream", label: "Stream" });
   }
+  tabs.push({ id: "otel", label: "OTel" });
   return tabs;
 }
 function getHierarchyNodeCopy(node, traceById) {
@@ -23824,8 +23914,8 @@ function getHierarchyNodeCopy(node, traceById) {
           trace.provider,
           trace.model,
           formatCostSummaryLabel(
-            trace.costUsd ?? getHierarchyNodeCostUsd(node),
-            false
+            getHierarchyNodeCostUsd(node) ?? trace.costUsd,
+            node.count > 1
           )
         ]) : formatList([
           formatCountLabel(node.count, "call"),
@@ -23848,55 +23938,24 @@ function getHierarchyNodeCopy(node, traceById) {
   }
 }
 function getTraceDisplayCopy(trace) {
-  const actor = trace.hierarchy.childActorId || trace.hierarchy.rootActorId;
-  const breadcrumbs = getTraceBreadcrumbs(trace);
-  const pathParts = breadcrumbs.map((item) => item.label);
   return {
-    breadcrumbs,
-    path: pathParts.join(" / "),
-    subtitle: formatList([actor, trace.provider, trace.model]),
+    breadcrumbs: [],
+    path: "",
     title: getTraceTitle(trace)
   };
 }
-function getTraceBreadcrumbs(trace) {
-  const sessionId = trace.hierarchy.sessionId || "unknown-session";
-  const rootActorId = trace.hierarchy.rootActorId || "unknown-actor";
-  const breadcrumbs = [
-    {
-      label: `Session ${shortId2(sessionId)}`,
-      nodeId: `session:${sessionId}`
-    },
-    {
-      label: rootActorId,
-      nodeId: `actor:${sessionId}:${rootActorId}`
-    }
-  ];
-  if (trace.kind === "guardrail") {
-    const label = `${capitalize(trace.hierarchy.guardrailPhase || "guardrail")} guardrail`;
-    breadcrumbs.push({
-      label,
-      nodeId: `guardrail:${sessionId}:${rootActorId}:${trace.hierarchy.guardrailType || label.toLowerCase()}`
-    });
-  } else if (trace.kind === "child-actor" && trace.hierarchy.childActorId) {
-    breadcrumbs.push({
-      label: `Child actor: ${trace.hierarchy.childActorId}`,
-      nodeId: `child-actor:${sessionId}:${rootActorId}:${trace.hierarchy.childActorId}`
-    });
-  } else if (trace.kind === "stage") {
-    if (trace.hierarchy.childActorId) {
-      breadcrumbs.push({
-        label: `Child actor: ${trace.hierarchy.childActorId}`,
-        nodeId: `child-actor:${sessionId}:${rootActorId}:${trace.hierarchy.childActorId}`
-      });
-    }
-    if (trace.hierarchy.stage) {
-      breadcrumbs.push({
-        label: `Stage: ${trace.hierarchy.stage}`,
-        nodeId: `stage:${sessionId}:${rootActorId}:${trace.hierarchy.childActorId || "root"}:${trace.hierarchy.stage}`
-      });
-    }
-  }
-  return breadcrumbs;
+function getHierarchyPathDisplayCopy(path, traceById) {
+  const breadcrumbs = path.map((node) => ({
+    label: getHierarchyNodeCopy(node, traceById).label,
+    nodeId: node.id
+  }));
+  const lastNode = path[path.length - 1] ?? null;
+  const lastTrace = lastNode?.type === "trace" && lastNode.meta.traceId ? traceById.get(lastNode.meta.traceId) ?? null : null;
+  return {
+    breadcrumbs,
+    path: breadcrumbs.map((item) => item.label).join(" / "),
+    title: lastTrace ? getTraceTitle(lastTrace) : breadcrumbs.at(-1)?.label || "Trace"
+  };
 }
 function formatTraceProviderSummary(trace) {
   if (!trace) {
@@ -24047,12 +24106,12 @@ function patchHierarchyNode(node, traceId, previousSummary, nextSummary, costDel
   let nextLabel = node.label;
   if (containsTrace) {
     if (node.type === "trace" && node.meta.traceId === traceId) {
-      nextMeta.costUsd = nextSummary.costUsd;
       nextMeta.model = nextSummary.model;
       nextMeta.provider = nextSummary.provider;
       nextMeta.status = nextSummary.status;
       nextLabel = nextSummary.model ? `${nextSummary.model} ${nextSummary.mode}` : traceId;
-    } else if (costDelta !== 0 || previousSummary?.costUsd !== null || nextSummary.costUsd !== null) {
+    }
+    if (costDelta !== 0 || previousSummary?.costUsd !== null || nextSummary.costUsd !== null) {
       const currentCost = typeof nextMeta.costUsd === "number" && Number.isFinite(nextMeta.costUsd) ? nextMeta.costUsd : 0;
       nextMeta.costUsd = roundCostUsd2(currentCost + costDelta);
     }

package/dist/session-nav.d.ts

@@ -41,4 +41,4 @@ export declare function findSessionNodePath(nodes: SessionNavHierarchyNode[], id
 export declare function findSessionNodeById(nodes: SessionNavHierarchyNode[], id: string): SessionNavHierarchyNode | null;
 export declare function getNewestTraceIdForNode(node: SessionNavHierarchyNode | null | undefined): string | null;
 export declare function resolveSessionTreeSelection(sessionNodes: SessionNavHierarchyNode[], selectedNodeId: string | null, selectedTraceId: string | null): SessionTreeSelection;
-export declare function getDefaultExpandedSessionTreeNodeIds(sessionNodes: SessionNavHierarchyNode[], activeSessionId: string | null, selectedNodeId: string | null): Set<string>;
+export declare function getDefaultExpandedSessionTreeNodeIds(sessionNodes: SessionNavHierarchyNode[], activeSessionId: string | null, selectedNodeId: string | null, selectedTraceId?: string | null): Set<string>;

package/dist/session-nav.js

@@ -66,7 +66,7 @@ function resolveSessionTreeSelection(sessionNodes, selectedNodeId, selectedTrace
         selectedTraceId: nextSelectedTraceId,
     };
 }
-function getDefaultExpandedSessionTreeNodeIds(sessionNodes, activeSessionId, selectedNodeId) {
+function getDefaultExpandedSessionTreeNodeIds(sessionNodes, activeSessionId, selectedNodeId, selectedTraceId = null) {
     const expanded = new Set();
     const activeSession = (activeSessionId
         ? sessionNodes.find((node) => node.id === activeSessionId) ?? null
@@ -89,6 +89,13 @@ function getDefaultExpandedSessionTreeNodeIds(sessionNodes, activeSessionId, sel
             }
         }
     }
+    if (selectedTraceId) {
+        for (const node of findSessionNodePath([activeSession], `trace:${selectedTraceId}`)) {
+            if (node.children.length) {
+                expanded.add(node.id);
+            }
+        }
+    }
     return expanded;
 }
 function deriveSessionNavItem(node, traceById) {

package/dist/store.d.ts

@@ -17,6 +17,7 @@ export declare class TraceStore extends EventEmitter {
     clear(): void;
     hierarchy(filters?: TraceFilters): HierarchyResponse;
     private recordStart;
+    private findTraceBySpanReference;
     private evictIfNeeded;
     private cloneTrace;
     private filteredTraces;

package/dist/store.js

@@ -141,51 +141,49 @@ class TraceStore extends node_events_1.EventEmitter {
             };
         }
         const roots = new Map();
+        const traceBySpanId = new Map();
+        const traceNodeByTraceId = new Map();
+        const traceSessionByTraceId = new Map();
+        const parentNodeById = new Map();
         for (const trace of traces) {
-            const sessionId = trace.hierarchy.sessionId || 'unknown-session';
+            const sessionId = getTraceSessionId(trace);
             const sessionNode = getOrCreateNode(roots, `session:${sessionId}`, 'session', `Session ${sessionId}`, {
                 sessionId,
                 chatId: trace.hierarchy.chatId,
-            });
-            const lineage = [sessionNode];
-            const rootActorId = trace.hierarchy.rootActorId || 'unknown-actor';
-            const actorNode = getOrCreateNode(sessionNode.children, `actor:${sessionId}:${rootActorId}`, 'actor', rootActorId, {
-                actorId: rootActorId,
-                rootActorId,
-                sessionId,
+                rootActorId: trace.hierarchy.rootActorId,
                 topLevelAgentId: trace.hierarchy.topLevelAgentId,
             });
-            lineage.push(actorNode);
-            let currentNode = actorNode;
-            if (trace.hierarchy.kind === 'guardrail') {
-                const label = `${trace.hierarchy.guardrailPhase || 'guardrail'} guardrail`;
-                currentNode = getOrCreateNode(currentNode.children, `guardrail:${sessionId}:${rootActorId}:${trace.context.guardrailType || label}`, 'guardrail', label, {
-                    guardrailPhase: trace.hierarchy.guardrailPhase || null,
-                    guardrailType: trace.context.guardrailType || null,
-                    systemType: trace.context.systemType || null,
-                    watchdogPhase: trace.hierarchy.watchdogPhase || null,
-                });
-                lineage.push(currentNode);
-            }
-            else if (trace.hierarchy.childActorId) {
-                currentNode = getOrCreateNode(currentNode.children, `child-actor:${sessionId}:${rootActorId}:${trace.hierarchy.childActorId}`, 'child-actor', trace.hierarchy.childActorId, {
-                    actorId: trace.hierarchy.childActorId,
-                    childActorId: trace.hierarchy.childActorId,
-                    delegatedAgentId: trace.hierarchy.delegatedAgentId,
-                });
-                lineage.push(currentNode);
+            const traceNode = createTraceNode(trace);
+            traceBySpanId.set(trace.spanContext.spanId, trace);
+            traceNodeByTraceId.set(trace.id, traceNode);
+            traceSessionByTraceId.set(trace.id, sessionId);
+        }
+        for (const trace of traces) {
+            const sessionId = traceSessionByTraceId.get(trace.id) || 'unknown-session';
+            const sessionNode = roots.get(`session:${sessionId}`);
+            const traceNode = traceNodeByTraceId.get(trace.id);
+            if (!sessionNode || !traceNode) {
+                continue;
             }
-            if (trace.hierarchy.stage) {
-                currentNode = getOrCreateNode(currentNode.children, `stage:${sessionId}:${rootActorId}:${trace.hierarchy.childActorId || 'root'}:${trace.hierarchy.stage}`, 'stage', trace.hierarchy.stage, {
-                    stage: trace.hierarchy.stage,
-                    workflowState: trace.hierarchy.workflowState,
-                });
-                lineage.push(currentNode);
+            const parentTrace = trace.parentSpanId ? traceBySpanId.get(trace.parentSpanId) : null;
+            const parentTraceNode = parentTrace &&
+                traceSessionByTraceId.get(parentTrace.id) === sessionId &&
+                parentTrace.id !== trace.id
+                ? traceNodeByTraceId.get(parentTrace.id) || null
+                : null;
+            parentNodeById.set(traceNode.id, parentTraceNode || sessionNode);
+        }
+        for (const trace of traces) {
+            const traceNode = traceNodeByTraceId.get(trace.id);
+            const parentNode = traceNode ? parentNodeById.get(traceNode.id) || null : null;
+            if (!traceNode || !parentNode) {
+                continue;
             }
-            const traceNode = createTraceNode(trace);
-            currentNode.children.set(traceNode.id, traceNode);
-            for (const node of new Set(lineage)) {
-                applyTraceRollup(node, trace);
+            parentNode.children.set(traceNode.id, traceNode);
+            let currentNode = parentNode;
+            while (currentNode) {
+                applyTraceRollup(currentNode, trace);
+                currentNode = parentNodeById.get(currentNode.id) || null;
             }
         }
         return {
@@ -195,9 +193,9 @@ class TraceStore extends node_events_1.EventEmitter {
         };
     }
     recordStart(mode, context, request, options = {}) {
-        const traceContext = (0, utils_1.normalizeTraceContext)(context, mode);
+        const traceContext = applyConversationIdToContext((0, utils_1.normalizeTraceContext)(context, mode), options.attributes);
         const traceId = randomId();
-        const parentSpan = options.parentSpanId ? this.traces.get(options.parentSpanId) : null;
+        const parentSpan = this.findTraceBySpanReference(options.parentSpanId);
         const startedAt = new Date().toISOString();
         const trace = {
             attributes: buildSpanAttributes(traceContext, mode, request, options.attributes),
@@ -253,6 +251,21 @@ class TraceStore extends node_events_1.EventEmitter {
         this.publish('span:start', traceId, { trace: this.cloneTrace(trace) });
         return traceId;
     }
+    findTraceBySpanReference(spanReference) {
+        if (!spanReference) {
+            return null;
+        }
+        const byTraceId = this.traces.get(spanReference);
+        if (byTraceId) {
+            return byTraceId;
+        }
+        for (const trace of this.traces.values()) {
+            if (trace.spanContext.spanId === spanReference) {
+                return trace;
+            }
+        }
+        return null;
+    }
     evictIfNeeded() {
         while (this.order.length > this.maxTraces) {
             const oldest = this.order.shift();
@@ -420,6 +433,35 @@ function buildGroupHierarchy(traces, groupBy) {
     }
     return [...groups.values()].map(serialiseNode);
 }
+function getTraceSessionId(trace) {
+    const conversationId = toNonEmptyString(trace.attributes?.['gen_ai.conversation.id']);
+    return conversationId || trace.hierarchy.sessionId || 'unknown-session';
+}
+function applyConversationIdToContext(context, extraAttributes) {
+    const conversationId = toNonEmptyString(extraAttributes?.['gen_ai.conversation.id']);
+    if (!conversationId || conversationId === context.sessionId) {
+        return context;
+    }
+    return {
+        ...context,
+        sessionId: conversationId,
+        chatId: conversationId,
+        rootSessionId: context.rootSessionId || conversationId,
+        rootChatId: context.rootChatId || conversationId,
+        tags: {
+            ...context.tags,
+            sessionId: conversationId,
+            chatId: conversationId,
+            rootSessionId: context.rootSessionId || conversationId,
+            rootChatId: context.rootChatId || conversationId,
+        },
+        hierarchy: {
+            ...context.hierarchy,
+            sessionId: conversationId,
+            chatId: conversationId,
+        },
+    };
+}
 function randomId() {
     return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
 }
@@ -469,6 +511,9 @@ function getDefaultSpanName(context, mode) {
     const prefix = context.provider || 'llm';
     return `${prefix}.${mode}`;
 }
+function toNonEmptyString(value) {
+    return typeof value === 'string' && value.trim() ? value : null;
+}
 function buildSpanAttributes(context, mode, request, extraAttributes) {
     const base = {
         'gen_ai.conversation.id': context.sessionId || undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mtharrison/loupe",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Lightweight local tracing dashboard for LLM calls",
   "author": "Matt Harrison",
   "license": "MIT",