@mtharrison/loupe 1.4.0 → 1.5.0

package/dist/client/app.js

@@ -21949,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() {
@@ -22169,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",
     {
@@ -22238,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,
@@ -22452,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
       ),
@@ -22525,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 })
         ] })
@@ -22554,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",
@@ -22807,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 }),
@@ -22839,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,
@@ -22905,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)(
@@ -22952,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: [
@@ -23011,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)(
@@ -23045,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") {
@@ -23111,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,
         {
@@ -23139,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({
@@ -23199,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
@@ -23631,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: [
@@ -23641,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." }) })
@@ -23659,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 }),
@@ -23683,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
     ] })
@@ -23983,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";
@@ -24169,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,
@@ -24179,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()) {
@@ -24201,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);
@@ -24279,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)}`);
   }
@@ -24768,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(
@@ -25111,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
@@ -25211,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();
@@ -25229,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