@mtharrison/loupe 1.3.0 → 1.5.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
       }
     ) })
@@ -21934,9 +21949,6 @@ function getSessionNavBadge(item) {
   if (item.status === "pending") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { variant: "warning", children: "Running" });
   }
-  if (item.hasHighlights) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { variant: "secondary", semantic: "guardrail", children: "Insight" });
-  }
   return null;
 }
 function BackgroundGlow() {
@@ -21956,7 +21968,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 +21984,7 @@ function HierarchyTree({
       selectedNodeId,
       selectedPathIds,
       selectedTraceId,
-      sessionNavById,
+      sessionNavById: sessionNavById2,
       traceById
     },
     node.id
@@ -21989,7 +22001,7 @@ function HierarchyTreeNode({
   selectedNodeId,
   selectedPathIds,
   selectedTraceId,
-  sessionNavById,
+  sessionNavById: sessionNavById2,
   traceById
 }) {
   const isExpandable = node.children.length > 0;
@@ -21999,20 +22011,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 +22053,7 @@ function HierarchyTreeNode({
         selectedNodeId,
         selectedPathIds,
         selectedTraceId,
-        sessionNavById,
+        sessionNavById: sessionNavById2,
         traceById
       }
     );
@@ -22108,7 +22128,7 @@ function HierarchyTreeNode({
             selectedNodeId,
             selectedPathIds,
             selectedTraceId,
-            sessionNavById,
+            sessionNavById: sessionNavById2,
             traceById
           },
           child.id
@@ -22131,7 +22151,7 @@ function SessionHierarchyBranch({
   selectedNodeId,
   selectedPathIds,
   selectedTraceId,
-  sessionNavById,
+  sessionNavById: sessionNavById2,
   traceById
 }) {
   const detailLabel = formatList([
@@ -22146,8 +22166,27 @@ function SessionHierarchyBranch({
     sessionSelectedPath,
     selectedTraceId
   );
+  const [showGuardrails, setShowGuardrails] = (0, import_react3.useState)(true);
   const sessionTimelineRow = sessionTimelineModel?.rows[0] ?? null;
-  const showEmbeddedTimeline = isExpanded && Boolean(sessionTimelineModel?.rows.length);
+  const embeddedTimelineRows = (0, import_react3.useMemo)(() => {
+    if (!sessionTimelineModel) {
+      return [];
+    }
+    const visibleRows = sessionTimelineModel.rows.slice(1);
+    const baseDepth = visibleRows[0]?.depth ?? 0;
+    if (baseDepth <= 0) {
+      return visibleRows;
+    }
+    return visibleRows.map((row) => ({
+      ...row,
+      depth: Math.max(0, row.depth - baseDepth),
+      ancestorContinuations: row.ancestorContinuations.slice(baseDepth)
+    }));
+  }, [sessionTimelineModel]);
+  const guardrailRowCount = embeddedTimelineRows.filter(
+    (row) => isGuardrailTimelineRow(row)
+  ).length;
+  const showEmbeddedTimeline = isExpanded && embeddedTimelineRows.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -22215,28 +22254,49 @@ function SessionHierarchyBranch({
             ]
           }
         ),
-        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,
+        showEmbeddedTimeline && sessionTimelineModel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-tree-timeline-shell", children: [
+          guardrailRowCount ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "session-tree-timeline-toolbar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "session-tree-timeline-toolbar-copy", children: [
+              formatCountLabel(guardrailRowCount, "guardrail check"),
+              " ",
+              showGuardrails ? "compact" : "hidden"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              BadgeButton,
               {
-                className: "is-embedded",
-                model: sessionTimelineModel,
-                onSelectRow: (nodeId) => {
-                  const selectedTimelineNode = findSessionNodeById([node], nodeId);
-                  if (selectedTimelineNode) {
-                    onSelect(selectedTimelineNode);
-                  }
-                },
-                rows: sessionTimelineModel.rows.slice(1)
+                variant: "outline",
+                semantic: "guardrail",
+                onClick: () => (0, import_react3.startTransition)(
+                  () => setShowGuardrails((current) => !current)
+                ),
+                children: showGuardrails ? "Hide guardrails" : "Show guardrails"
               }
             )
-          }
-        ) }) : isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tree-node-children", children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ] }) : null,
+          /* @__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",
+                  guardrailVisibility: showGuardrails ? "compact" : "hidden",
+                  model: sessionTimelineModel,
+                  onSelectRow: (nodeId) => {
+                    const selectedTimelineNode = findSessionNodeById([node], nodeId);
+                    if (selectedTimelineNode) {
+                      onSelect(selectedTimelineNode);
+                    }
+                  },
+                  rows: embeddedTimelineRows
+                }
+              )
+            }
+          )
+        ] }) : 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,
@@ -22249,7 +22309,7 @@ function SessionHierarchyBranch({
             selectedNodeId,
             selectedPathIds,
             selectedTraceId,
-            sessionNavById,
+            sessionNavById: sessionNavById2,
             traceById
           },
           child.id
@@ -22258,59 +22318,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
+      ]
     }
   );
 }
@@ -22383,24 +22489,45 @@ function SessionTreeTimelineBar({
 }
 function HierarchyTimelineRows({
   className,
+  guardrailVisibility = "compact",
   model,
   onSelectRow,
   rows
 }) {
-  return rows.map((row) => {
-    const isTraceRow = row.type === "trace";
+  const [expandedGuardrailGroups, setExpandedGuardrailGroups] = (0, import_react3.useState)({});
+  const displayItems = (0, import_react3.useMemo)(
+    () => buildHierarchyTimelineDisplayItems(
+      rows,
+      guardrailVisibility,
+      expandedGuardrailGroups
+    ),
+    [expandedGuardrailGroups, guardrailVisibility, rows]
+  );
+  if (!displayItems.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-empty-state", children: "No visible rows. Show guardrails to inspect them." });
+  }
+  return displayItems.map((item) => {
+    const row = item.row;
+    const isEmbeddedRow = className?.includes("is-embedded") ?? false;
+    const hasSemanticIndent = isEmbeddedRow && row.type === "trace" && row.traceKind === "child-actor";
+    const isTraceRow = item.kind === "row" && row.type === "trace";
     const rowClassName = cn(
       "hierarchy-timeline-row",
       className,
-      isTraceRow ? "is-clickable" : "is-structure",
+      (isTraceRow || item.kind === "guardrail-group") && "is-clickable",
+      !isTraceRow && item.kind !== "guardrail-group" && "is-structure",
       row.depth === 0 && "is-root",
       row.isActive && "is-active",
       row.isDetailTrace && "is-detail-trace",
       row.isInPath && "is-in-path",
+      hasSemanticIndent && "has-semantic-indent is-child-actor-trace",
+      row.traceKind === "guardrail" && "is-guardrail-trace",
+      item.kind === "guardrail-group" && "is-structure is-guardrail-group",
+      item.kind === "row" && item.compact && "is-guardrail-compact",
       `is-${row.type.replace(/[^a-z0-9-]/gi, "-")}`
     );
     const rowStyle = {
-      "--timeline-depth": String(row.depth),
+      "--timeline-depth": String(row.depth + (hasSemanticIndent ? 1 : 0)),
       "--timeline-offset": String(
         model.durationMs > 0 ? row.offsetMs / model.durationMs : 0
       ),
@@ -22456,26 +22583,11 @@ function HierarchyTimelineRows({
               {
                 variant: "secondary",
                 className: "hierarchy-timeline-pill",
-                semantic: row.badge,
-                children: row.badge
+                semantic: item.kind === "guardrail-group" || row.traceKind === "guardrail" ? "guardrail" : row.badge,
+                children: item.kind === "guardrail-group" ? "Guardrail" : 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
+            item.kind === "guardrail-group" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hierarchy-timeline-row-toggle-label", children: item.isExpanded ? "Hide" : `Show ${item.itemCount}` }) : null
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-row-meta", children: row.meta })
         ] })
@@ -22485,6 +22597,35 @@ function HierarchyTimelineRows({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hierarchy-timeline-row-duration", children: formatElapsedLabel(row.durationMs) })
       ] })
     ] });
+    if (item.kind === "guardrail-group") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          role: "listitem",
+          title: buildHierarchyTimelineRowTooltip(row),
+          "data-hierarchy-row-id": row.id,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: rowClassName,
+              style: rowStyle,
+              onClick: () => (0, import_react3.startTransition)(
+                () => setExpandedGuardrailGroups(
+                  (current) => current[item.id] ? Object.fromEntries(
+                    Object.entries(current).filter(
+                      ([key]) => key !== item.id
+                    )
+                  ) : { ...current, [item.id]: true }
+                )
+              ),
+              children: rowContent
+            }
+          )
+        },
+        item.id
+      );
+    }
     if (isTraceRow) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
@@ -22525,6 +22666,7 @@ function HierarchyTimelineRows({
 function TraceDetailPanel({
   activeTab,
   detail,
+  detailPath,
   detailTabs,
   fallbackTrace,
   jsonMode,
@@ -22533,11 +22675,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);
@@ -22736,10 +22879,8 @@ function renderTabContent(tab, detail, jsonMode, onApplyTagFilter, onApplyTraceF
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           MessagesCard,
           {
-            insights: detail.insights,
             title: "Request messages",
-            messages: requestMessages,
-            sourcePrefix: "request"
+            messages: requestMessages
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JsonCard, { title: "Request options", value: detail.request.options }),
@@ -22768,10 +22909,8 @@ function renderTabContent(tab, detail, jsonMode, onApplyTagFilter, onApplyTraceF
         responseMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           MessagesCard,
           {
-            insights: detail.insights,
             title: "Assistant message",
-            messages: [responseMessage],
-            sourcePrefix: "response"
+            messages: [responseMessage]
           }
         ) : null,
         toolCalls.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolCallsCard, { title: "Tool calls", toolCalls }) : null,
@@ -22834,10 +22973,8 @@ function renderTabContent(tab, detail, jsonMode, onApplyTagFilter, onApplyTraceF
         detail.stream.reconstructed?.message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           MessagesCard,
           {
-            insights: detail.insights,
             title: "Reconstructed output",
-            messages: [detail.stream.reconstructed.message],
-            sourcePrefix: "stream"
+            messages: [detail.stream.reconstructed.message]
           }
         ) : null,
         detail.stream.reconstructed?.tool_calls?.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -22848,6 +22985,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;
   }
@@ -22863,7 +23018,6 @@ function ConversationView({
   );
   const costUsd = getUsageCostUsd(detail.usage);
   const costLabel = formatUsdCost(costUsd);
-  const traceInsights = detail.insights ?? EMPTY_TRACE_INSIGHTS;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "conversation-layout", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "conversation-meta", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "conversation-meta-primary", children: [
@@ -22922,26 +23076,21 @@ function ConversationView({
         ) : null
       ] })
     ] }),
-    traceInsights.highlights.length || traceInsights.structuredInputs.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TraceInsightsSummary, { detail, insights: traceInsights }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "conversation-thread", children: [
       requestMessages.length ? requestMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         ConversationMessage,
         {
-          insights: traceInsights,
-          message,
-          source: `request:${index}`
+          message
         },
         `${message.role}-${index}`
       )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "muted-copy", children: "No request messages recorded." }),
       hasRenderableContent(responseMessage?.content) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         ConversationMessage,
         {
-          insights: traceInsights,
           message: {
             role: responseMessage?.role || "assistant",
             content: responseMessage?.content
-          },
-          source: "response:0"
+          }
         }
       ) : null,
       responseToolCalls.map((toolCall, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -22956,59 +23105,8 @@ function ConversationView({
     ] })
   ] });
 }
-function TraceInsightsSummary({
-  detail,
-  insights
-}) {
-  const title = detail.kind === "guardrail" ? "Why this guardrail ran" : "Trace insights";
-  const highlights = insights.highlights.filter(
-    (item) => item.kind !== "structured-input" || !insights.structuredInputs.length
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { className: "detail-section trace-insights-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Deterministic signals extracted from the trace payload." })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, { className: "trace-insights-content", children: [
-      highlights.map((highlight, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          className: "trace-insight-item",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "trace-insight-item-header", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { semantic: "guardrail", variant: "secondary", children: highlight.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "trace-insight-item-source", children: formatInsightSource(highlight.source) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-insight-item-copy", children: highlight.description })
-          ]
-        },
-        `${highlight.kind}-${highlight.source}-${index}`
-      )),
-      insights.structuredInputs.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "div",
-        {
-          className: "trace-insight-item is-structured",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "trace-insight-item-header", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, { semantic: "guardrail", variant: "secondary", children: [
-                "Structured ",
-                item.role,
-                " input"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-insight-item-tags", children: item.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { variant: "outline", children: tag }, tag)) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "trace-insight-item-copy", children: item.snippet })
-          ]
-        },
-        `${item.role}-${item.snippet}-${index}`
-      ))
-    ] })
-  ] });
-}
 function ConversationMessage({
-  insights = EMPTY_TRACE_INSIGHTS,
-  message,
-  source
+  message
 }) {
   const toolCalls = getMessageToolCalls(message);
   if (message.role === "tool") {
@@ -23022,21 +23120,8 @@ function ConversationMessage({
     );
   }
   if (toolCalls.length) {
-    const messageInsights2 = getMessageInsightMatches(
-      insights,
-      source,
-      message.role,
-      message.content
-    );
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react3.Fragment, { children: [
-      hasRenderableContent(message.content) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        ConversationBubble,
-        {
-          role: message.role,
-          content: message.content,
-          insights: messageInsights2
-        }
-      ) : null,
+      hasRenderableContent(message.content) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConversationBubble, { role: message.role, content: message.content }) : null,
       toolCalls.map((toolCall, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         ToolCallBubble,
         {
@@ -23050,33 +23135,16 @@ function ConversationMessage({
   if (!hasRenderableContent(message.content)) {
     return null;
   }
-  const messageInsights = getMessageInsightMatches(
-    insights,
-    source,
-    message.role,
-    message.content
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    ConversationBubble,
-    {
-      content: message.content,
-      insights: messageInsights,
-      role: message.role
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConversationBubble, { content: message.content, role: message.role });
 }
 function ConversationBubble({
   content,
-  insights,
   role
 }) {
   const tone = role === "user" ? "is-user" : role === "assistant" ? "is-assistant" : "is-system";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("conversation-row", tone), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "conversation-role", children: role }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "conversation-bubble", children: [
-      insights.structuredInputs.length || insights.highlights.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageInsightBanner, { insights }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RichMessageContent, { content, role })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "conversation-bubble", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RichMessageContent, { content, role }) })
   ] });
 }
 function ToolResultBubble({
@@ -23110,54 +23178,6 @@ function ToolCallBubble({ index, toolCall }) {
     ] })
   ] });
 }
-function MessageInsightBanner({
-  insights
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "message-insight-banner", children: [
-    insights.structuredInputs.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        className: "message-insight-card",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "message-insight-card-header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { semantic: "guardrail", variant: "secondary", children: "Structured input" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "message-insight-card-tags", children: item.tags.slice(0, 3).map((tag) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { variant: "outline", children: tag }, tag)) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "message-insight-card-copy", children: [
-            "XML-like markup detected in this ",
-            item.role,
-            " message."
-          ] })
-        ]
-      },
-      `${item.role}-${item.snippet}-${index}`
-    )),
-    insights.highlights.map((highlight, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        className: "message-insight-card is-highlight",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "message-insight-card-header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { semantic: "guardrail", variant: "secondary", children: highlight.title }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "message-insight-card-copy", children: highlight.description })
-        ]
-      },
-      `${highlight.kind}-${highlight.source}-${index}`
-    ))
-  ] });
-}
-function getMessageInsightMatches(insights, source, role, content) {
-  const text = extractPlainMessageText(content);
-  const normalizedText = text ? text.replace(/\s+/g, " ") : null;
-  const structuredInputs = insights.structuredInputs.filter(
-    (item) => item.role === role && normalizedText !== null && normalizedText.includes(item.snippet.replace(/\.\.\.$/, ""))
-  );
-  return {
-    highlights: insights.highlights.filter(
-      (highlight) => !(highlight.kind === "structured-input" && structuredInputs.length) && (highlight.source === source || normalizedText !== null && highlight.snippet.length > 0 && normalizedText.includes(highlight.snippet.replace(/\.\.\.$/, "")))
-    ),
-    structuredInputs
-  };
-}
 function RichMessageContent({
   content,
   role
@@ -23542,9 +23562,7 @@ function MetadataActionButton({
   );
 }
 function MessagesCard({
-  insights = EMPTY_TRACE_INSIGHTS,
   messages,
-  sourcePrefix,
   title
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { className: "detail-section", children: [
@@ -23552,9 +23570,7 @@ function MessagesCard({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, { className: "message-stack", children: messages.length ? messages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       StructuredMessageCard,
       {
-        insights,
-        message,
-        source: `${sourcePrefix}:${index}`
+        message
       },
       `${message.role}-${index}`
     )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "muted-copy", children: "No messages recorded." }) })
@@ -23570,20 +23586,12 @@ function ToolCallsCard({
   ] });
 }
 function StructuredMessageCard({
-  insights = EMPTY_TRACE_INSIGHTS,
-  message,
-  source
+  message
 }) {
   const toolCalls = getMessageToolCalls(message);
   const hasContent = hasRenderableContent(message.content);
   const isToolCallTurn = toolCalls.length > 0;
   const isToolResult = message.role === "tool";
-  const messageInsights = getMessageInsightMatches(
-    insights,
-    source,
-    message.role,
-    message.content
-  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("message-card", `role-${message.role}`), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "message-card-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, { semantic: message.role, variant: "secondary", children: message.role }),
@@ -23594,7 +23602,6 @@ function StructuredMessageCard({
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "message-card-body", children: [
-      messageInsights.structuredInputs.length || messageInsights.highlights.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageInsightBanner, { insights: messageInsights }) : null,
       hasContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RichMessageContent, { content: message.content, role: message.role }) : isToolCallTurn ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "message-card-hint", children: "Tool call emitted." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "message-card-hint", children: "No content recorded." }),
       isToolCallTurn ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolCallStack, { toolCalls, compact: true }) : null
     ] })
@@ -23766,6 +23773,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 +23832,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 +23856,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) {
@@ -23924,7 +23901,7 @@ function getTraceTitle(trace) {
     return trace.hierarchy.stage ? `Stage run: ${trace.hierarchy.stage}` : "Stage run";
   }
   if (trace.kind === "child-actor") {
-    return `Child actor ${trace.mode}`;
+    return trace.hierarchy.childActorId ? `Child actor ${trace.mode}: ${trace.hierarchy.childActorId}` : `Child actor ${trace.mode}`;
   }
   if (trace.kind === "actor") {
     return trace.mode === "stream" ? "Actor response stream" : "Actor response invoke";
@@ -24047,12 +24024,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);
     }
@@ -24110,6 +24087,7 @@ function buildHierarchyTimelineModel(rootNode, traceById, selectedNodeId, select
       costUsd: getHierarchyNodeCostUsd(node),
       depth,
       durationMs: timing.durationMs,
+      guardrailPhase: trace?.hierarchy.guardrailPhase ?? null,
       hasHighlights: Boolean(trace?.flags?.hasHighlights),
       hasStructuredInput: Boolean(trace?.flags?.hasStructuredInput),
       hasVisibleChildren: children.length > 0,
@@ -24120,8 +24098,12 @@ function buildHierarchyTimelineModel(rootNode, traceById, selectedNodeId, select
       isLastSibling,
       label: copy.label,
       meta: copy.meta,
+      model: trace?.model ?? null,
       offsetMs: Math.max(0, timing.startMs - rootTiming.startMs),
+      provider: trace?.provider ?? null,
       startedAt: timing.startedAt,
+      traceId: node.meta?.traceId ?? null,
+      traceKind: trace?.kind ?? null,
       type: node.type
     });
     for (const [index, child] of children.entries()) {
@@ -24142,6 +24124,128 @@ function buildHierarchyTimelineModel(rootNode, traceById, selectedNodeId, select
     startedAt: rootTiming.startedAt
   };
 }
+function isGuardrailTimelineRow(row) {
+  return row.type === "trace" && row.traceKind === "guardrail";
+}
+function buildHierarchyTimelineDisplayItems(rows, guardrailVisibility, expandedGuardrailGroups) {
+  const items = [];
+  for (let index = 0; index < rows.length; index += 1) {
+    const row = rows[index];
+    if (!isGuardrailTimelineRow(row)) {
+      items.push({ compact: false, id: row.id, kind: "row", row });
+      continue;
+    }
+    let groupEnd = index + 1;
+    while (groupEnd < rows.length && isGuardrailTimelineRow(rows[groupEnd]) && rows[groupEnd].depth === row.depth) {
+      groupEnd += 1;
+    }
+    const groupRows = rows.slice(index, groupEnd);
+    index = groupEnd - 1;
+    if (guardrailVisibility === "hidden") {
+      continue;
+    }
+    if (groupRows.length === 1) {
+      items.push({
+        compact: true,
+        id: row.id,
+        kind: "row",
+        row
+      });
+      continue;
+    }
+    const groupId = getGuardrailGroupId(groupRows);
+    const forceExpanded = groupRows.some(
+      (item) => item.isActive || item.isDetailTrace || item.hasVisibleChildren
+    );
+    const isExpanded = forceExpanded || Boolean(expandedGuardrailGroups[groupId]);
+    if (!isExpanded) {
+      items.push({
+        id: groupId,
+        isExpanded: false,
+        itemCount: groupRows.length,
+        kind: "guardrail-group",
+        row: buildGuardrailGroupRow(groupRows)
+      });
+      continue;
+    }
+    if (expandedGuardrailGroups[groupId]) {
+      items.push({
+        id: groupId,
+        isExpanded: true,
+        itemCount: groupRows.length,
+        kind: "guardrail-group",
+        row: buildGuardrailGroupRow(groupRows)
+      });
+    }
+    items.push(
+      ...groupRows.map((item) => ({
+        compact: false,
+        id: item.id,
+        kind: "row",
+        row: item
+      }))
+    );
+  }
+  return items;
+}
+function getGuardrailGroupId(rows) {
+  return `guardrail-group:${rows[0]?.id || "unknown"}:${rows.at(-1)?.id || "unknown"}`;
+}
+function buildGuardrailGroupRow(rows) {
+  const firstRow = rows[0];
+  const maxEndMs = rows.reduce(
+    (maxValue, row) => Math.max(maxValue, row.offsetMs + row.durationMs),
+    firstRow.offsetMs + firstRow.durationMs
+  );
+  const guardrailPhase = getSharedTimelineRowValue(rows, "guardrailPhase");
+  const provider = getSharedTimelineRowValue(rows, "provider");
+  const model = getSharedTimelineRowValue(rows, "model");
+  return {
+    ...firstRow,
+    badge: "Guardrail",
+    costUsd: sumTimelineRowCosts(rows),
+    durationMs: Math.max(1, maxEndMs - firstRow.offsetMs),
+    guardrailPhase,
+    hasHighlights: rows.some((row) => row.hasHighlights),
+    hasStructuredInput: rows.some((row) => row.hasStructuredInput),
+    hasVisibleChildren: rows.at(-1)?.hasVisibleChildren ?? false,
+    id: getGuardrailGroupId(rows),
+    isActive: false,
+    isDetailTrace: false,
+    isInPath: rows.some((row) => row.isInPath),
+    isLastSibling: rows.at(-1)?.isLastSibling ?? firstRow.isLastSibling,
+    label: getGuardrailGroupLabel(rows, guardrailPhase),
+    meta: formatList([
+      formatList([provider, model]),
+      formatCostSummaryLabel(sumTimelineRowCosts(rows), rows.length > 1)
+    ]) || formatCountLabel(rows.length, "guardrail check"),
+    model,
+    provider,
+    traceId: null,
+    traceKind: "guardrail",
+    type: "guardrail"
+  };
+}
+function getGuardrailGroupLabel(rows, guardrailPhase) {
+  if (rows.length === 1) {
+    return rows[0].label;
+  }
+  if (guardrailPhase) {
+    return formatCountLabel(rows.length, `${guardrailPhase} guardrail check`);
+  }
+  return formatCountLabel(rows.length, "guardrail check");
+}
+function getSharedTimelineRowValue(rows, key) {
+  const firstValue = rows[0]?.[key] ?? null;
+  return rows.every((row) => (row[key] ?? null) === firstValue) ? firstValue : null;
+}
+function sumTimelineRowCosts(rows) {
+  const costRows = rows.map((row) => row.costUsd).filter((cost) => typeof cost === "number");
+  if (!costRows.length) {
+    return null;
+  }
+  return roundCostUsd2(costRows.reduce((sum, cost) => sum + cost, 0));
+}
 function compareHierarchyNodesForTimeline(left, right, getTiming) {
   const leftTiming = getTiming(left);
   const rightTiming = getTiming(right);
@@ -24220,32 +24324,12 @@ function getTimelineTypeLabel(type) {
       return startCase(type);
   }
 }
-function formatInsightSource(source) {
-  if (source.startsWith("request:")) {
-    return `Request ${Number(source.split(":")[1] || 0) + 1}`;
-  }
-  if (source.startsWith("response:")) {
-    return "Response";
-  }
-  if (source.startsWith("stream:")) {
-    return "Stream";
-  }
-  if (source === "trace:guardrail") {
-    return "Guardrail context";
-  }
-  return source;
-}
 function buildHierarchyTimelineRowTooltip(row) {
   const parts = [
     `${row.label} (${getTimelineTypeLabel(row.type)})`,
     `Started ${formatTimelineTimestamp(row.startedAt)}`,
     `Duration ${formatElapsedLabel(row.durationMs)}`
   ];
-  if (row.hasStructuredInput) {
-    parts.push("Structured input detected");
-  } else if (row.hasHighlights) {
-    parts.push("Trace insights available");
-  }
   if (row.costUsd !== null) {
     parts.push(`Cost ${formatUsdCost(row.costUsd)}`);
   }
@@ -24709,16 +24793,6 @@ function toMarkdownText(content) {
   }
   return null;
 }
-function extractPlainMessageText(content) {
-  const markdown = toMarkdownText(content);
-  if (markdown !== null) {
-    return markdown;
-  }
-  if (typeof content === "string") {
-    return content;
-  }
-  return null;
-}
 function detectStructuredMarkup(text) {
   const tagRegex = /<\/?([A-Za-z][\w:-]*)\b[^>]*>/g;
   const tagNames = [...text.matchAll(tagRegex)].map(
@@ -25052,9 +25126,6 @@ function CardHeader({ children }) {
 function CardTitle({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "ui-card-title", children });
 }
-function CardDescription({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ui-card-description", children });
-}
 function CardContent({
   children,
   className
@@ -25152,7 +25223,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, 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, MarkdownBlock, STATUS_OPTIONS, KIND_OPTIONS, INITIAL_FILTERS;
 var init_app = __esm({
   "client/src/app.tsx"() {
     init_lucide_react();
@@ -25170,10 +25241,6 @@ var init_app = __esm({
     MESSAGE_COLLAPSE_LINE_LIMIT_SYSTEM = 5;
     MESSAGE_COLLAPSE_HEIGHT_PROSE_SYSTEM = "9rem";
     MESSAGE_COLLAPSE_HEIGHT_STRUCTURED_SYSTEM = "9rem";
-    EMPTY_TRACE_INSIGHTS = {
-      highlights: [],
-      structuredInputs: []
-    };
     MarkdownBlock = (0, import_react3.lazy)(
       () => import("./markdown-block-DMQHS3E5.js").then((module) => ({
         default: module.MarkdownBlock