@mastra/playground-ui 48.0.0-alpha.8 → 48.0.0

package/dist/ee/signals/theme-compare.es.js

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { useThemeFlows } from './hooks/use-theme-flows.es.js';
+import { snapshotSummaryLabel } from './sankey-signals-data.es.js';
+import { SignalDeltaColumn } from './signal-delta-column.es.js';
+import { SignalsFrameLoadingSkeleton } from './signals-loading-skeleton.es.js';
+import { TimelineTrack } from './snapshot-timeline.es.js';
+import { timelineTickPositions } from './snapshot-timeline-data.es.js';
+
+function ThemeCompare({
+  entityId,
+  entityType,
+  signalNames,
+  snapshots,
+  totalSnapshots,
+  onThemeSelect
+}) {
+  const [pointIndexes, setPointIndexes] = useState();
+  const [grabbedPoint, setGrabbedPoint] = useState();
+  const lastIndex = snapshots.length - 1;
+  const points = [
+    Math.min(pointIndexes?.[0] ?? 0, lastIndex),
+    Math.min(pointIndexes?.[1] ?? lastIndex, lastIndex)
+  ];
+  const fromIndex = Math.min(points[0], points[1]);
+  const toIndex = Math.max(points[0], points[1]);
+  const flowQueries = useThemeFlows(
+    entityId,
+    entityType,
+    signalNames,
+    snapshots.map((snapshot) => snapshot.snapshotId)
+  );
+  const flows = flowQueries.map((query) => query.data);
+  const fromFlow = flows[fromIndex];
+  const toFlow = flows[toIndex];
+  const positions = timelineTickPositions(snapshots);
+  const fromSnapshot = snapshots[fromIndex];
+  const toSnapshot = snapshots[toIndex];
+  if (!fromSnapshot || !toSnapshot) return null;
+  const handleTickSelect = (index) => {
+    if (grabbedPoint !== void 0) {
+      setPointIndexes(grabbedPoint === 0 ? [index, points[1]] : [points[0], index]);
+      setGrabbedPoint(void 0);
+      return;
+    }
+    const pointAtIndex = points[0] === index ? 0 : points[1] === index ? 1 : void 0;
+    if (pointAtIndex !== void 0) {
+      setGrabbedPoint(pointAtIndex);
+      return;
+    }
+    const selectedPosition = positions[index];
+    const firstPointPosition = positions[points[0]];
+    const secondPointPosition = positions[points[1]];
+    if (selectedPosition === void 0 || firstPointPosition === void 0 || secondPointPosition === void 0) return;
+    const distanceToFirst = Math.abs(selectedPosition - firstPointPosition);
+    const distanceToSecond = Math.abs(selectedPosition - secondPointPosition);
+    setPointIndexes(distanceToFirst <= distanceToSecond ? [index, points[1]] : [points[0], index]);
+  };
+  const markers = /* @__PURE__ */ new Map([
+    [points[0], "compare-point"],
+    [points[1], "compare-point"]
+  ]);
+  const grabbedIndex = grabbedPoint === void 0 ? void 0 : points[grabbedPoint];
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Snapshot comparison", className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-3 px-3 py-2.5 sm:px-4", children: /* @__PURE__ */ jsx(
+      TimelineTrack,
+      {
+        snapshots,
+        totalCount: totalSnapshots,
+        markers,
+        grabbedIndex,
+        onTickSelect: handleTickSelect
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "border-border1 text-neutral4 rounded-md border px-2 py-1 font-mono text-xs tabular-nums", children: snapshotSummaryLabel(fromSnapshot, flows[fromIndex]) }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-neutral3 text-xs", children: "→" }),
+      /* @__PURE__ */ jsx("p", { className: "border-border1 text-neutral4 rounded-md border px-2 py-1 font-mono text-xs tabular-nums", children: snapshotSummaryLabel(toSnapshot, flows[toIndex]) }),
+      /* @__PURE__ */ jsx("p", { className: "text-neutral3 text-xs", children: grabbedPoint === void 0 ? "Click a landmark to move the nearest point · click a point to grab it." : "Point grabbed — click a landmark to place it." })
+    ] }),
+    fromIndex === toIndex ? /* @__PURE__ */ jsx("p", { className: "border-border1 bg-surface2 text-neutral3 rounded-lg border p-6 text-sm", children: "Pick two different landmarks on the timeline to compare them." }) : !fromFlow || !toFlow ? /* @__PURE__ */ jsx(SignalsFrameLoadingSkeleton, {}) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4", children: signalNames.map((signalName) => /* @__PURE__ */ jsx(
+      SignalDeltaColumn,
+      {
+        signalName,
+        fromFlow,
+        toFlow,
+        flows,
+        positions,
+        fromIndex,
+        toIndex,
+        onThemeSelect
+      },
+      signalName
+    )) })
+  ] });
+}
+
+export { ThemeCompare };
+//# sourceMappingURL=theme-compare.es.js.map

package/dist/ee/signals/theme-compare.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-compare.es.js","sources":["../../../src/ee/signals/theme-compare.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { useThemeFlows } from './hooks/use-theme-flows';\nimport { snapshotSummaryLabel } from './sankey-signals-data';\nimport { SignalDeltaColumn } from './signal-delta-column';\nimport { SignalsFrameLoadingSkeleton } from './signals-loading-skeleton';\nimport { TimelineTrack } from './snapshot-timeline';\nimport type { TimelineMarkerKind } from './snapshot-timeline';\nimport { timelineTickPositions } from './snapshot-timeline-data';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport type { ThemeSnapshot, TraceSignalName } from './types';\n\n/**\n * Compare mode: two interchangeable points on the shared time axis show how\n * each signal's theme mix moved between them (always read earlier → later),\n * with per-theme sparklines across every landmark in range. Clicking an\n * unmarked landmark moves the nearest point; clicking a marked landmark grabs\n * that point so the next click moves it specifically.\n */\nexport function ThemeCompare({\n  entityId,\n  entityType,\n  signalNames,\n  snapshots,\n  totalSnapshots,\n  onThemeSelect,\n}: {\n  entityId: string;\n  entityType: string;\n  signalNames: TraceSignalName[];\n  snapshots: ThemeSnapshot[];\n  totalSnapshots: number;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\n  const [pointIndexes, setPointIndexes] = useState<[number, number]>();\n  const [grabbedPoint, setGrabbedPoint] = useState<0 | 1>();\n  const lastIndex = snapshots.length - 1;\n  const points: [number, number] = [\n    Math.min(pointIndexes?.[0] ?? 0, lastIndex),\n    Math.min(pointIndexes?.[1] ?? lastIndex, lastIndex),\n  ];\n  // Compare always reads earlier → later regardless of which point moved last.\n  const fromIndex = Math.min(points[0], points[1]);\n  const toIndex = Math.max(points[0], points[1]);\n  const flowQueries = useThemeFlows(\n    entityId,\n    entityType,\n    signalNames,\n    snapshots.map(snapshot => snapshot.snapshotId),\n  );\n  const flows = flowQueries.map(query => query.data);\n  const fromFlow = flows[fromIndex];\n  const toFlow = flows[toIndex];\n  const positions = timelineTickPositions(snapshots);\n  const fromSnapshot = snapshots[fromIndex];\n  const toSnapshot = snapshots[toIndex];\n\n  if (!fromSnapshot || !toSnapshot) return null;\n\n  // The two points are interchangeable: an unmarked tick moves whichever\n  // point is nearest on the track; a marked tick grabs that point so the next\n  // click moves it specifically (covers moving a point past the other).\n  const handleTickSelect = (index: number) => {\n    if (grabbedPoint !== undefined) {\n      setPointIndexes(grabbedPoint === 0 ? [index, points[1]] : [points[0], index]);\n      setGrabbedPoint(undefined);\n      return;\n    }\n    const pointAtIndex = points[0] === index ? 0 : points[1] === index ? 1 : undefined;\n    if (pointAtIndex !== undefined) {\n      setGrabbedPoint(pointAtIndex);\n      return;\n    }\n    const selectedPosition = positions[index];\n    const firstPointPosition = positions[points[0]];\n    const secondPointPosition = positions[points[1]];\n    if (selectedPosition === undefined || firstPointPosition === undefined || secondPointPosition === undefined) return;\n\n    const distanceToFirst = Math.abs(selectedPosition - firstPointPosition);\n    const distanceToSecond = Math.abs(selectedPosition - secondPointPosition);\n    setPointIndexes(distanceToFirst <= distanceToSecond ? [index, points[1]] : [points[0], index]);\n  };\n\n  const markers = new Map<number, TimelineMarkerKind>([\n    [points[0], 'compare-point'],\n    [points[1], 'compare-point'],\n  ]);\n  const grabbedIndex = grabbedPoint === undefined ? undefined : points[grabbedPoint];\n\n  return (\n    <section aria-label=\"Snapshot comparison\" className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-center gap-3 px-3 py-2.5 sm:px-4\">\n        <TimelineTrack\n          snapshots={snapshots}\n          totalCount={totalSnapshots}\n          markers={markers}\n          grabbedIndex={grabbedIndex}\n          onTickSelect={handleTickSelect}\n        />\n      </div>\n      <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1.5\">\n        <p className=\"border-border1 text-neutral4 rounded-md border px-2 py-1 font-mono text-xs tabular-nums\">\n          {snapshotSummaryLabel(fromSnapshot, flows[fromIndex])}\n        </p>\n        <span aria-hidden=\"true\" className=\"text-neutral3 text-xs\">\n          →\n        </span>\n        <p className=\"border-border1 text-neutral4 rounded-md border px-2 py-1 font-mono text-xs tabular-nums\">\n          {snapshotSummaryLabel(toSnapshot, flows[toIndex])}\n        </p>\n        <p className=\"text-neutral3 text-xs\">\n          {grabbedPoint === undefined\n            ? 'Click a landmark to move the nearest point · click a point to grab it.'\n            : 'Point grabbed — click a landmark to place it.'}\n        </p>\n      </div>\n      {fromIndex === toIndex ? (\n        <p className=\"border-border1 bg-surface2 text-neutral3 rounded-lg border p-6 text-sm\">\n          Pick two different landmarks on the timeline to compare them.\n        </p>\n      ) : !fromFlow || !toFlow ? (\n        <SignalsFrameLoadingSkeleton />\n      ) : (\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4\">\n          {signalNames.map(signalName => (\n            <SignalDeltaColumn\n              key={signalName}\n              signalName={signalName}\n              fromFlow={fromFlow}\n              toFlow={toFlow}\n              flows={flows}\n              positions={positions}\n              fromIndex={fromIndex}\n              toIndex={toIndex}\n              onThemeSelect={onThemeSelect}\n            />\n          ))}\n        </div>\n      )}\n    </section>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/ee/signals/theme-detail-panel.cjs.js

@@ -0,0 +1,171 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const ee_signals_examplesPager = require('./examples-pager.cjs.js');
+require('@tanstack/react-query');
+require('./trace-intelligence-context.cjs.js');
+const ee_signals_hooks_useThemeDetail = require('./hooks/use-theme-detail.cjs.js');
+const ee_signals_hooks_useThemeExamples = require('./hooks/use-theme-examples.cjs.js');
+const ee_signals_hooks_useThemeHistory = require('./hooks/use-theme-history.cjs.js');
+const ee_signals_signalColors = require('./signal-colors.cjs.js');
+const ee_signals_signalFormatting = require('./signal-formatting.cjs.js');
+const ee_signals_themeTrend = require('./theme-trend.cjs.js');
+const ee_signals_themeTrendChart = require('./theme-trend-chart.cjs.js');
+const ee_signals_traceInsightView = require('./trace-insight-view.cjs.js');
+const drawer = require('../../drawer-CNnvBMfD.cjs');
+const sankeyColor = require('../../sankeyColor-DONd5cg9.cjs');
+const tooltip = require('../../tooltip-CLz5PtEE.cjs');
+
+function ThemeDetailPanel({
+  entityId,
+  entityType,
+  snapshotId,
+  snapshotTotal,
+  selection,
+  onClose
+}) {
+  const examplesContextKey = `${snapshotId}:${selection?.signalName ?? ""}:${selection?.themeId ?? ""}`;
+  const [examplesPage, setExamplesPage] = React.useState(() => ({ contextKey: examplesContextKey, offset: 0 }));
+  const examplesOffset = examplesPage.contextKey === examplesContextKey ? examplesPage.offset : 0;
+  const [insightTraceId, setInsightTraceId] = React.useState();
+  const detailQuery = ee_signals_hooks_useThemeDetail.useThemeDetail(
+    entityId,
+    entityType,
+    selection?.signalName ?? "goal",
+    snapshotId,
+    selection?.themeId
+  );
+  const examplesQuery = ee_signals_hooks_useThemeExamples.useThemeExamples(
+    entityId,
+    entityType,
+    selection?.signalName ?? "goal",
+    snapshotId,
+    selection?.themeId,
+    ee_signals_examplesPager.EXAMPLES_PAGE_SIZE,
+    examplesOffset
+  );
+  const historyQuery = ee_signals_hooks_useThemeHistory.useThemeHistory(
+    entityId,
+    entityType,
+    selection?.signalName ?? "goal",
+    snapshotTotal > 1 ? selection?.themeId : void 0
+  );
+  const title = detailQuery.data?.theme?.label ?? selection?.label ?? "Theme details";
+  const signalName = selection?.signalName;
+  const historyPoints = historyQuery.data ? ee_signals_themeTrend.chronologicalHistoryPoints(historyQuery.data.points) : [];
+  const oldestHistoryPoint = historyPoints[0];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    drawer.Drawer,
+    {
+      onOpenChange: (open) => {
+        if (!open) {
+          setExamplesPage({ contextKey: "", offset: 0 });
+          setInsightTraceId(void 0);
+          onClose();
+        }
+      },
+      open: selection !== void 0,
+      overlay: "none",
+      side: "right",
+      variant: "floating",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerHeader, { className: "border-border1 border-b", children: [
+          signalName !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "font-mono text-xs font-semibold tracking-widest",
+              style: { color: sankeyColor.nodeColor(ee_signals_signalColors.getSignalHue(signalName)) },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { className: "cursor-default uppercase", children: signalName }),
+                /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: ee_signals_signalFormatting.SIGNAL_DESCRIPTIONS[signalName] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerTitle, { children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerDescription, { className: "sr-only", children: [
+            "Details for the ",
+            signalName ?? "selected",
+            " theme ",
+            title
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerBody, { className: "grid content-start gap-6 overflow-y-auto p-6", children: [
+          insightTraceId !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(ee_signals_traceInsightView.TraceInsightView, { traceId: insightTraceId, onBack: () => setInsightTraceId(void 0) }),
+          insightTraceId === void 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            detailQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 text-sm", children: "Loading theme details…" }),
+            detailQuery.isError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-500", children: "Unable to load theme details." }),
+            detailQuery.data && !detailQuery.data.theme && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-neutral6 text-sm font-semibold", children: "Not present in this snapshot" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 mt-2 text-sm", children: "This theme has no data in the selected snapshot." })
+            ] }),
+            detailQuery.data?.theme && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-labelledby": "theme-summary-heading", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "theme-summary-heading", className: "text-neutral3 font-mono text-xs tracking-wider uppercase", children: "Summary" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral5 mt-3 text-sm", children: detailQuery.data.theme.description ?? "No description available." }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral5 mt-3 font-mono text-sm tabular-nums", children: ee_signals_signalFormatting.shareSentence(detailQuery.data.theme.traceCount, detailQuery.data.theme.coverage) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-labelledby": "theme-examples-heading", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    id: "theme-examples-heading",
+                    className: "text-neutral3 font-mono text-xs tracking-wider uppercase",
+                    children: "Examples"
+                  }
+                ),
+                examplesQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 mt-3 text-sm", children: "Loading examples…" }),
+                examplesQuery.isError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm text-red-500", children: "Unable to load examples." }),
+                examplesQuery.data && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  examplesQuery.data.examples.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 mt-3 text-sm", children: "No examples in this snapshot." }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-3 space-y-3", children: examplesQuery.data.examples.map((example) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `View trace insight for ${example.signalText}`,
+                      className: "border-border1 bg-surface3 text-neutral5 hover:bg-surface5 w-full cursor-pointer rounded-md border p-3 text-left text-sm",
+                      onClick: () => setInsightTraceId(example.traceId),
+                      children: example.signalText
+                    }
+                  ) }, example.traceId)) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ee_signals_examplesPager.ExamplesPager,
+                    {
+                      traceCount: detailQuery.data.theme.traceCount,
+                      offset: examplesOffset,
+                      onOffsetChange: (offset) => setExamplesPage({ contextKey: examplesContextKey, offset })
+                    }
+                  )
+                ] })
+              ] }),
+              snapshotTotal > 1 && /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-labelledby": "theme-trend-heading", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "theme-trend-heading", className: "text-neutral3 font-mono text-xs tracking-wider uppercase", children: "Trend" }),
+                historyQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 mt-3 text-sm", children: "Loading trend…" }),
+                historyQuery.isError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm text-red-500", children: "Unable to load the trend." }),
+                oldestHistoryPoint !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-neutral5 mt-3 text-sm", children: [
+                    historyQuery.data?.nextCursor ? `Active since at least ${ee_signals_signalFormatting.formatSnapshotDate(oldestHistoryPoint.startedAt)} · in ${historyPoints.length}+ snapshots` : `First seen ${ee_signals_signalFormatting.formatSnapshotDate(oldestHistoryPoint.startedAt)} · in ${historyPoints.length} ${historyPoints.length === 1 ? "snapshot" : "snapshots"}`,
+                    " ",
+                    "· ",
+                    ee_signals_themeTrend.themeTrendDirection(historyPoints)
+                  ] }),
+                  historyPoints.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx(
+                    ee_signals_themeTrendChart.ThemeTrendChart,
+                    {
+                      points: historyPoints,
+                      color: sankeyColor.nodeColor(ee_signals_signalColors.getSignalHue(signalName ?? "goal"))
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+
+exports.ThemeDetailPanel = ThemeDetailPanel;
+//# sourceMappingURL=theme-detail-panel.cjs.js.map

package/dist/ee/signals/theme-detail-panel.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-detail-panel.cjs.js","sources":["../../../src/ee/signals/theme-detail-panel.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager';\nimport { useThemeDetail, useThemeExamples, useThemeHistory } from './hooks';\nimport { getSignalHue } from './signal-colors';\nimport { formatSnapshotDate, shareSentence, SIGNAL_DESCRIPTIONS } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { chronologicalHistoryPoints, themeTrendDirection } from './theme-trend';\nimport { ThemeTrendChart } from './theme-trend-chart';\nimport { TraceInsightView } from './trace-insight-view';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/ds/components/Drawer';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\ninterface ThemeDetailPanelProps {\n  entityId: string;\n  entityType: string;\n  snapshotId: string;\n  snapshotTotal: number;\n  selection: ThemeSelection | undefined;\n  onClose: () => void;\n}\n\nexport function ThemeDetailPanel({\n  entityId,\n  entityType,\n  snapshotId,\n  snapshotTotal,\n  selection,\n  onClose,\n}: ThemeDetailPanelProps) {\n  const examplesContextKey = `${snapshotId}:${selection?.signalName ?? ''}:${selection?.themeId ?? ''}`;\n  const [examplesPage, setExamplesPage] = useState(() => ({ contextKey: examplesContextKey, offset: 0 }));\n  const examplesOffset = examplesPage.contextKey === examplesContextKey ? examplesPage.offset : 0;\n  const [insightTraceId, setInsightTraceId] = useState<string>();\n  const detailQuery = useThemeDetail(\n    entityId,\n    entityType,\n    selection?.signalName ?? 'goal',\n    snapshotId,\n    selection?.themeId,\n  );\n  const examplesQuery = useThemeExamples(\n    entityId,\n    entityType,\n    selection?.signalName ?? 'goal',\n    snapshotId,\n    selection?.themeId,\n    EXAMPLES_PAGE_SIZE,\n    examplesOffset,\n  );\n  const historyQuery = useThemeHistory(\n    entityId,\n    entityType,\n    selection?.signalName ?? 'goal',\n    snapshotTotal > 1 ? selection?.themeId : undefined,\n  );\n  const title = detailQuery.data?.theme?.label ?? selection?.label ?? 'Theme details';\n  const signalName = selection?.signalName;\n  const historyPoints = historyQuery.data ? chronologicalHistoryPoints(historyQuery.data.points) : [];\n  const oldestHistoryPoint = historyPoints[0];\n\n  return (\n    <Drawer\n      onOpenChange={open => {\n        if (!open) {\n          setExamplesPage({ contextKey: '', offset: 0 });\n          setInsightTraceId(undefined);\n          onClose();\n        }\n      }}\n      open={selection !== undefined}\n      overlay=\"none\"\n      side=\"right\"\n      variant=\"floating\"\n    >\n      <DrawerContent>\n        <DrawerHeader className=\"border-border1 border-b\">\n          {signalName !== undefined && (\n            <span\n              className=\"font-mono text-xs font-semibold tracking-widest\"\n              style={{ color: nodeColor(getSignalHue(signalName)) }}\n            >\n              <Tooltip>\n                <TooltipTrigger className=\"cursor-default uppercase\">{signalName}</TooltipTrigger>\n                <TooltipContent>{SIGNAL_DESCRIPTIONS[signalName]}</TooltipContent>\n              </Tooltip>\n            </span>\n          )}\n          <DrawerTitle>{title}</DrawerTitle>\n          <DrawerDescription className=\"sr-only\">\n            Details for the {signalName ?? 'selected'} theme {title}\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerBody className=\"grid content-start gap-6 overflow-y-auto p-6\">\n          {insightTraceId !== undefined && (\n            <TraceInsightView traceId={insightTraceId} onBack={() => setInsightTraceId(undefined)} />\n          )}\n          {insightTraceId === undefined && (\n            <>\n              {detailQuery.isPending && <p className=\"text-neutral3 text-sm\">Loading theme details…</p>}\n              {detailQuery.isError && <p className=\"text-sm text-red-500\">Unable to load theme details.</p>}\n              {detailQuery.data && !detailQuery.data.theme && (\n                <section>\n                  <h2 className=\"text-neutral6 text-sm font-semibold\">Not present in this snapshot</h2>\n                  <p className=\"text-neutral3 mt-2 text-sm\">This theme has no data in the selected snapshot.</p>\n                </section>\n              )}\n              {detailQuery.data?.theme && (\n                <>\n                  <section aria-labelledby=\"theme-summary-heading\">\n                    <h2 id=\"theme-summary-heading\" className=\"text-neutral3 font-mono text-xs tracking-wider uppercase\">\n                      Summary\n                    </h2>\n                    <p className=\"text-neutral5 mt-3 text-sm\">\n                      {detailQuery.data.theme.description ?? 'No description available.'}\n                    </p>\n                    <p className=\"text-neutral5 mt-3 font-mono text-sm tabular-nums\">\n                      {shareSentence(detailQuery.data.theme.traceCount, detailQuery.data.theme.coverage)}\n                    </p>\n                  </section>\n\n                  <section aria-labelledby=\"theme-examples-heading\">\n                    <h2\n                      id=\"theme-examples-heading\"\n                      className=\"text-neutral3 font-mono text-xs tracking-wider uppercase\"\n                    >\n                      Examples\n                    </h2>\n                    {examplesQuery.isPending && <p className=\"text-neutral3 mt-3 text-sm\">Loading examples…</p>}\n                    {examplesQuery.isError && <p className=\"mt-3 text-sm text-red-500\">Unable to load examples.</p>}\n                    {examplesQuery.data && (\n                      <>\n                        {examplesQuery.data.examples.length === 0 ? (\n                          <p className=\"text-neutral3 mt-3 text-sm\">No examples in this snapshot.</p>\n                        ) : (\n                          <ul className=\"mt-3 space-y-3\">\n                            {examplesQuery.data.examples.map(example => (\n                              <li key={example.traceId}>\n                                <button\n                                  type=\"button\"\n                                  aria-label={`View trace insight for ${example.signalText}`}\n                                  className=\"border-border1 bg-surface3 text-neutral5 hover:bg-surface5 w-full cursor-pointer rounded-md border p-3 text-left text-sm\"\n                                  onClick={() => setInsightTraceId(example.traceId)}\n                                >\n                                  {example.signalText}\n                                </button>\n                              </li>\n                            ))}\n                          </ul>\n                        )}\n                        <ExamplesPager\n                          traceCount={detailQuery.data.theme.traceCount}\n                          offset={examplesOffset}\n                          onOffsetChange={offset => setExamplesPage({ contextKey: examplesContextKey, offset })}\n                        />\n                      </>\n                    )}\n                  </section>\n\n                  {snapshotTotal > 1 && (\n                    <section aria-labelledby=\"theme-trend-heading\">\n                      <h2 id=\"theme-trend-heading\" className=\"text-neutral3 font-mono text-xs tracking-wider uppercase\">\n                        Trend\n                      </h2>\n                      {historyQuery.isPending && <p className=\"text-neutral3 mt-3 text-sm\">Loading trend…</p>}\n                      {historyQuery.isError && <p className=\"mt-3 text-sm text-red-500\">Unable to load the trend.</p>}\n                      {oldestHistoryPoint !== undefined && (\n                        <>\n                          <p className=\"text-neutral5 mt-3 text-sm\">\n                            {/* A nextCursor means older points exist beyond the fetched window,\n                                so the oldest loaded point is a lower bound, not the true origin. */}\n                            {historyQuery.data?.nextCursor\n                              ? `Active since at least ${formatSnapshotDate(oldestHistoryPoint.startedAt)} · in ${historyPoints.length}+ snapshots`\n                              : `First seen ${formatSnapshotDate(oldestHistoryPoint.startedAt)} · in ${historyPoints.length} ${historyPoints.length === 1 ? 'snapshot' : 'snapshots'}`}{' '}\n                            · {themeTrendDirection(historyPoints)}\n                          </p>\n                          {historyPoints.length >= 2 && (\n                            <ThemeTrendChart\n                              points={historyPoints}\n                              color={nodeColor(getSignalHue(signalName ?? 'goal'))}\n                            />\n                          )}\n                        </>\n                      )}\n                    </section>\n                  )}\n                </>\n              )}\n            </>\n          )}\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"],"names":["useState","useThemeDetail","useThemeExamples","EXAMPLES_PAGE_SIZE","useThemeHistory","chronologicalHistoryPoints","jsx","Drawer","DrawerContent","jsxs","DrawerHeader","nodeColor","getSignalHue","Tooltip","TooltipTrigger","TooltipContent","SIGNAL_DESCRIPTIONS","DrawerTitle","DrawerDescription","DrawerBody","TraceInsightView","Fragment","shareSentence","ExamplesPager","formatSnapshotDate","themeTrendDirection","ThemeTrendChart"],"mappings":"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"}

package/dist/ee/signals/theme-detail-panel.d.ts

@@ -0,0 +1,2 @@
+export * from '../../src/ee/signals/theme-detail-panel'
+export {}

package/dist/ee/signals/theme-detail-panel.es.js

@@ -0,0 +1,167 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager.es.js';
+import '@tanstack/react-query';
+import './trace-intelligence-context.es.js';
+import { useThemeDetail } from './hooks/use-theme-detail.es.js';
+import { useThemeExamples } from './hooks/use-theme-examples.es.js';
+import { useThemeHistory } from './hooks/use-theme-history.es.js';
+import { getSignalHue } from './signal-colors.es.js';
+import { SIGNAL_DESCRIPTIONS, shareSentence, formatSnapshotDate } from './signal-formatting.es.js';
+import { chronologicalHistoryPoints, themeTrendDirection } from './theme-trend.es.js';
+import { ThemeTrendChart } from './theme-trend-chart.es.js';
+import { TraceInsightView } from './trace-insight-view.es.js';
+import { D as Drawer, d as DrawerContent, g as DrawerHeader, o as DrawerTitle, e as DrawerDescription, b as DrawerBody } from '../../drawer-C8jNXutE.js';
+import { n as nodeColor } from '../../sankeyColor-CQ5nkgtL.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../tooltip-BFbYhBj1.js';
+
+function ThemeDetailPanel({
+  entityId,
+  entityType,
+  snapshotId,
+  snapshotTotal,
+  selection,
+  onClose
+}) {
+  const examplesContextKey = `${snapshotId}:${selection?.signalName ?? ""}:${selection?.themeId ?? ""}`;
+  const [examplesPage, setExamplesPage] = useState(() => ({ contextKey: examplesContextKey, offset: 0 }));
+  const examplesOffset = examplesPage.contextKey === examplesContextKey ? examplesPage.offset : 0;
+  const [insightTraceId, setInsightTraceId] = useState();
+  const detailQuery = useThemeDetail(
+    entityId,
+    entityType,
+    selection?.signalName ?? "goal",
+    snapshotId,
+    selection?.themeId
+  );
+  const examplesQuery = useThemeExamples(
+    entityId,
+    entityType,
+    selection?.signalName ?? "goal",
+    snapshotId,
+    selection?.themeId,
+    EXAMPLES_PAGE_SIZE,
+    examplesOffset
+  );
+  const historyQuery = useThemeHistory(
+    entityId,
+    entityType,
+    selection?.signalName ?? "goal",
+    snapshotTotal > 1 ? selection?.themeId : void 0
+  );
+  const title = detailQuery.data?.theme?.label ?? selection?.label ?? "Theme details";
+  const signalName = selection?.signalName;
+  const historyPoints = historyQuery.data ? chronologicalHistoryPoints(historyQuery.data.points) : [];
+  const oldestHistoryPoint = historyPoints[0];
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      onOpenChange: (open) => {
+        if (!open) {
+          setExamplesPage({ contextKey: "", offset: 0 });
+          setInsightTraceId(void 0);
+          onClose();
+        }
+      },
+      open: selection !== void 0,
+      overlay: "none",
+      side: "right",
+      variant: "floating",
+      children: /* @__PURE__ */ jsxs(DrawerContent, { children: [
+        /* @__PURE__ */ jsxs(DrawerHeader, { className: "border-border1 border-b", children: [
+          signalName !== void 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "font-mono text-xs font-semibold tracking-widest",
+              style: { color: nodeColor(getSignalHue(signalName)) },
+              children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { className: "cursor-default uppercase", children: signalName }),
+                /* @__PURE__ */ jsx(TooltipContent, { children: SIGNAL_DESCRIPTIONS[signalName] })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(DrawerTitle, { children: title }),
+          /* @__PURE__ */ jsxs(DrawerDescription, { className: "sr-only", children: [
+            "Details for the ",
+            signalName ?? "selected",
+            " theme ",
+            title
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(DrawerBody, { className: "grid content-start gap-6 overflow-y-auto p-6", children: [
+          insightTraceId !== void 0 && /* @__PURE__ */ jsx(TraceInsightView, { traceId: insightTraceId, onBack: () => setInsightTraceId(void 0) }),
+          insightTraceId === void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            detailQuery.isPending && /* @__PURE__ */ jsx("p", { className: "text-neutral3 text-sm", children: "Loading theme details…" }),
+            detailQuery.isError && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500", children: "Unable to load theme details." }),
+            detailQuery.data && !detailQuery.data.theme && /* @__PURE__ */ jsxs("section", { children: [
+              /* @__PURE__ */ jsx("h2", { className: "text-neutral6 text-sm font-semibold", children: "Not present in this snapshot" }),
+              /* @__PURE__ */ jsx("p", { className: "text-neutral3 mt-2 text-sm", children: "This theme has no data in the selected snapshot." })
+            ] }),
+            detailQuery.data?.theme && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("section", { "aria-labelledby": "theme-summary-heading", children: [
+                /* @__PURE__ */ jsx("h2", { id: "theme-summary-heading", className: "text-neutral3 font-mono text-xs tracking-wider uppercase", children: "Summary" }),
+                /* @__PURE__ */ jsx("p", { className: "text-neutral5 mt-3 text-sm", children: detailQuery.data.theme.description ?? "No description available." }),
+                /* @__PURE__ */ jsx("p", { className: "text-neutral5 mt-3 font-mono text-sm tabular-nums", children: shareSentence(detailQuery.data.theme.traceCount, detailQuery.data.theme.coverage) })
+              ] }),
+              /* @__PURE__ */ jsxs("section", { "aria-labelledby": "theme-examples-heading", children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    id: "theme-examples-heading",
+                    className: "text-neutral3 font-mono text-xs tracking-wider uppercase",
+                    children: "Examples"
+                  }
+                ),
+                examplesQuery.isPending && /* @__PURE__ */ jsx("p", { className: "text-neutral3 mt-3 text-sm", children: "Loading examples…" }),
+                examplesQuery.isError && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-red-500", children: "Unable to load examples." }),
+                examplesQuery.data && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  examplesQuery.data.examples.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-neutral3 mt-3 text-sm", children: "No examples in this snapshot." }) : /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-3", children: examplesQuery.data.examples.map((example) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `View trace insight for ${example.signalText}`,
+                      className: "border-border1 bg-surface3 text-neutral5 hover:bg-surface5 w-full cursor-pointer rounded-md border p-3 text-left text-sm",
+                      onClick: () => setInsightTraceId(example.traceId),
+                      children: example.signalText
+                    }
+                  ) }, example.traceId)) }),
+                  /* @__PURE__ */ jsx(
+                    ExamplesPager,
+                    {
+                      traceCount: detailQuery.data.theme.traceCount,
+                      offset: examplesOffset,
+                      onOffsetChange: (offset) => setExamplesPage({ contextKey: examplesContextKey, offset })
+                    }
+                  )
+                ] })
+              ] }),
+              snapshotTotal > 1 && /* @__PURE__ */ jsxs("section", { "aria-labelledby": "theme-trend-heading", children: [
+                /* @__PURE__ */ jsx("h2", { id: "theme-trend-heading", className: "text-neutral3 font-mono text-xs tracking-wider uppercase", children: "Trend" }),
+                historyQuery.isPending && /* @__PURE__ */ jsx("p", { className: "text-neutral3 mt-3 text-sm", children: "Loading trend…" }),
+                historyQuery.isError && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-red-500", children: "Unable to load the trend." }),
+                oldestHistoryPoint !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("p", { className: "text-neutral5 mt-3 text-sm", children: [
+                    historyQuery.data?.nextCursor ? `Active since at least ${formatSnapshotDate(oldestHistoryPoint.startedAt)} · in ${historyPoints.length}+ snapshots` : `First seen ${formatSnapshotDate(oldestHistoryPoint.startedAt)} · in ${historyPoints.length} ${historyPoints.length === 1 ? "snapshot" : "snapshots"}`,
+                    " ",
+                    "· ",
+                    themeTrendDirection(historyPoints)
+                  ] }),
+                  historyPoints.length >= 2 && /* @__PURE__ */ jsx(
+                    ThemeTrendChart,
+                    {
+                      points: historyPoints,
+                      color: nodeColor(getSignalHue(signalName ?? "goal"))
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { ThemeDetailPanel };
+//# sourceMappingURL=theme-detail-panel.es.js.map

package/dist/ee/signals/theme-detail-panel.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-detail-panel.es.js","sources":["../../../src/ee/signals/theme-detail-panel.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager';\nimport { useThemeDetail, useThemeExamples, useThemeHistory } from './hooks';\nimport { getSignalHue } from './signal-colors';\nimport { formatSnapshotDate, shareSentence, SIGNAL_DESCRIPTIONS } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { chronologicalHistoryPoints, themeTrendDirection } from './theme-trend';\nimport { ThemeTrendChart } from './theme-trend-chart';\nimport { TraceInsightView } from './trace-insight-view';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/ds/components/Drawer';\nimport { nodeColor } from '@/ds/components/SankeyChart';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\n\ninterface ThemeDetailPanelProps {\n  entityId: string;\n  entityType: string;\n  snapshotId: string;\n  snapshotTotal: number;\n  selection: ThemeSelection | undefined;\n  onClose: () => void;\n}\n\nexport function ThemeDetailPanel({\n  entityId,\n  entityType,\n  snapshotId,\n  snapshotTotal,\n  selection,\n  onClose,\n}: ThemeDetailPanelProps) {\n  const examplesContextKey = `${snapshotId}:${selection?.signalName ?? ''}:${selection?.themeId ?? ''}`;\n  const [examplesPage, setExamplesPage] = useState(() => ({ contextKey: examplesContextKey, offset: 0 }));\n  const examplesOffset = examplesPage.contextKey === examplesContextKey ? examplesPage.offset : 0;\n  const [insightTraceId, setInsightTraceId] = useState<string>();\n  const detailQuery = useThemeDetail(\n    entityId,\n    entityType,\n    selection?.signalName ?? 'goal',\n    snapshotId,\n    selection?.themeId,\n  );\n  const examplesQuery = useThemeExamples(\n    entityId,\n    entityType,\n    selection?.signalName ?? 'goal',\n    snapshotId,\n    selection?.themeId,\n    EXAMPLES_PAGE_SIZE,\n    examplesOffset,\n  );\n  const historyQuery = useThemeHistory(\n    entityId,\n    entityType,\n    selection?.signalName ?? 'goal',\n    snapshotTotal > 1 ? selection?.themeId : undefined,\n  );\n  const title = detailQuery.data?.theme?.label ?? selection?.label ?? 'Theme details';\n  const signalName = selection?.signalName;\n  const historyPoints = historyQuery.data ? chronologicalHistoryPoints(historyQuery.data.points) : [];\n  const oldestHistoryPoint = historyPoints[0];\n\n  return (\n    <Drawer\n      onOpenChange={open => {\n        if (!open) {\n          setExamplesPage({ contextKey: '', offset: 0 });\n          setInsightTraceId(undefined);\n          onClose();\n        }\n      }}\n      open={selection !== undefined}\n      overlay=\"none\"\n      side=\"right\"\n      variant=\"floating\"\n    >\n      <DrawerContent>\n        <DrawerHeader className=\"border-border1 border-b\">\n          {signalName !== undefined && (\n            <span\n              className=\"font-mono text-xs font-semibold tracking-widest\"\n              style={{ color: nodeColor(getSignalHue(signalName)) }}\n            >\n              <Tooltip>\n                <TooltipTrigger className=\"cursor-default uppercase\">{signalName}</TooltipTrigger>\n                <TooltipContent>{SIGNAL_DESCRIPTIONS[signalName]}</TooltipContent>\n              </Tooltip>\n            </span>\n          )}\n          <DrawerTitle>{title}</DrawerTitle>\n          <DrawerDescription className=\"sr-only\">\n            Details for the {signalName ?? 'selected'} theme {title}\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerBody className=\"grid content-start gap-6 overflow-y-auto p-6\">\n          {insightTraceId !== undefined && (\n            <TraceInsightView traceId={insightTraceId} onBack={() => setInsightTraceId(undefined)} />\n          )}\n          {insightTraceId === undefined && (\n            <>\n              {detailQuery.isPending && <p className=\"text-neutral3 text-sm\">Loading theme details…</p>}\n              {detailQuery.isError && <p className=\"text-sm text-red-500\">Unable to load theme details.</p>}\n              {detailQuery.data && !detailQuery.data.theme && (\n                <section>\n                  <h2 className=\"text-neutral6 text-sm font-semibold\">Not present in this snapshot</h2>\n                  <p className=\"text-neutral3 mt-2 text-sm\">This theme has no data in the selected snapshot.</p>\n                </section>\n              )}\n              {detailQuery.data?.theme && (\n                <>\n                  <section aria-labelledby=\"theme-summary-heading\">\n                    <h2 id=\"theme-summary-heading\" className=\"text-neutral3 font-mono text-xs tracking-wider uppercase\">\n                      Summary\n                    </h2>\n                    <p className=\"text-neutral5 mt-3 text-sm\">\n                      {detailQuery.data.theme.description ?? 'No description available.'}\n                    </p>\n                    <p className=\"text-neutral5 mt-3 font-mono text-sm tabular-nums\">\n                      {shareSentence(detailQuery.data.theme.traceCount, detailQuery.data.theme.coverage)}\n                    </p>\n                  </section>\n\n                  <section aria-labelledby=\"theme-examples-heading\">\n                    <h2\n                      id=\"theme-examples-heading\"\n                      className=\"text-neutral3 font-mono text-xs tracking-wider uppercase\"\n                    >\n                      Examples\n                    </h2>\n                    {examplesQuery.isPending && <p className=\"text-neutral3 mt-3 text-sm\">Loading examples…</p>}\n                    {examplesQuery.isError && <p className=\"mt-3 text-sm text-red-500\">Unable to load examples.</p>}\n                    {examplesQuery.data && (\n                      <>\n                        {examplesQuery.data.examples.length === 0 ? (\n                          <p className=\"text-neutral3 mt-3 text-sm\">No examples in this snapshot.</p>\n                        ) : (\n                          <ul className=\"mt-3 space-y-3\">\n                            {examplesQuery.data.examples.map(example => (\n                              <li key={example.traceId}>\n                                <button\n                                  type=\"button\"\n                                  aria-label={`View trace insight for ${example.signalText}`}\n                                  className=\"border-border1 bg-surface3 text-neutral5 hover:bg-surface5 w-full cursor-pointer rounded-md border p-3 text-left text-sm\"\n                                  onClick={() => setInsightTraceId(example.traceId)}\n                                >\n                                  {example.signalText}\n                                </button>\n                              </li>\n                            ))}\n                          </ul>\n                        )}\n                        <ExamplesPager\n                          traceCount={detailQuery.data.theme.traceCount}\n                          offset={examplesOffset}\n                          onOffsetChange={offset => setExamplesPage({ contextKey: examplesContextKey, offset })}\n                        />\n                      </>\n                    )}\n                  </section>\n\n                  {snapshotTotal > 1 && (\n                    <section aria-labelledby=\"theme-trend-heading\">\n                      <h2 id=\"theme-trend-heading\" className=\"text-neutral3 font-mono text-xs tracking-wider uppercase\">\n                        Trend\n                      </h2>\n                      {historyQuery.isPending && <p className=\"text-neutral3 mt-3 text-sm\">Loading trend…</p>}\n                      {historyQuery.isError && <p className=\"mt-3 text-sm text-red-500\">Unable to load the trend.</p>}\n                      {oldestHistoryPoint !== undefined && (\n                        <>\n                          <p className=\"text-neutral5 mt-3 text-sm\">\n                            {/* A nextCursor means older points exist beyond the fetched window,\n                                so the oldest loaded point is a lower bound, not the true origin. */}\n                            {historyQuery.data?.nextCursor\n                              ? `Active since at least ${formatSnapshotDate(oldestHistoryPoint.startedAt)} · in ${historyPoints.length}+ snapshots`\n                              : `First seen ${formatSnapshotDate(oldestHistoryPoint.startedAt)} · in ${historyPoints.length} ${historyPoints.length === 1 ? 'snapshot' : 'snapshots'}`}{' '}\n                            · {themeTrendDirection(historyPoints)}\n                          </p>\n                          {historyPoints.length >= 2 && (\n                            <ThemeTrendChart\n                              points={historyPoints}\n                              color={nodeColor(getSignalHue(signalName ?? 'goal'))}\n                            />\n                          )}\n                        </>\n                      )}\n                    </section>\n                  )}\n                </>\n              )}\n            </>\n          )}\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"],"names":[],"mappings":"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"}