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

package/dist/ee/signals/lifeline-point.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifeline-point.es.js","sources":["../../../src/ee/signals/lifeline-point.tsx"],"sourcesContent":["import { useId, useState } from 'react';\nimport type { FocusEvent, MouseEvent } from 'react';\nimport { createPortal } from 'react-dom';\n\n/** A theme-presence point with an instant portal tooltip. */\nexport function LifelinePoint({\n  title,\n  positionPercent,\n  height,\n  color,\n  onSelect,\n}: {\n  title: string;\n  positionPercent: number | undefined;\n  height: number;\n  color: string;\n  onSelect: (() => void) | undefined;\n}) {\n  const tooltipId = useId();\n  const [tooltipPosition, setTooltipPosition] = useState<{ left: number; top: number }>();\n\n  if (positionPercent === undefined) return null;\n\n  const style = { left: `${positionPercent}%`, height: `${height}px`, backgroundColor: color };\n\n  function showTooltipAt(target: HTMLElement) {\n    const bounds = target.getBoundingClientRect();\n    setTooltipPosition({ left: bounds.left + bounds.width / 2, top: bounds.top - 6 });\n  }\n\n  function hideTooltip() {\n    setTooltipPosition(undefined);\n  }\n\n  const interactionProps = {\n    'aria-describedby': tooltipPosition ? tooltipId : undefined,\n    onMouseEnter: (event: MouseEvent<HTMLElement>) => showTooltipAt(event.currentTarget),\n    onMouseLeave: hideTooltip,\n    onFocus: (event: FocusEvent<HTMLElement>) => showTooltipAt(event.currentTarget),\n    onBlur: hideTooltip,\n  };\n\n  return (\n    <>\n      {onSelect ? (\n        <button\n          aria-label={title}\n          className=\"absolute bottom-px w-1.5 -translate-x-1/2 cursor-pointer rounded-xs hover:brightness-125\"\n          onClick={onSelect}\n          style={style}\n          type=\"button\"\n          {...interactionProps}\n        />\n      ) : (\n        <span\n          aria-label={title}\n          className=\"absolute bottom-px w-1.5 -translate-x-1/2 rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2\"\n          role=\"img\"\n          style={style}\n          tabIndex={0}\n          {...interactionProps}\n        />\n      )}\n      {tooltipPosition\n        ? createPortal(\n            <div\n              className=\"border-border1 bg-surface5 text-neutral6 shadow-elevated pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full rounded-md border px-2 py-1 font-mono text-[11px] whitespace-nowrap tabular-nums\"\n              id={tooltipId}\n              role=\"tooltip\"\n              style={{ left: tooltipPosition.left, top: tooltipPosition.top }}\n            >\n              {title}\n            </div>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;AAKO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,eAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,MAAM,YAAY,KAAA,EAAM;AACxB,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA,EAAwC;AAEtF,EAAA,IAAI,eAAA,KAAoB,QAAW,OAAO,IAAA;AAE1C,EAAA,MAAM,KAAA,GAAQ,EAAE,IAAA,EAAM,CAAA,EAAG,eAAe,CAAA,CAAA,CAAA,EAAK,MAAA,EAAQ,CAAA,EAAG,MAAM,CAAA,EAAA,CAAA,EAAM,eAAA,EAAiB,KAAA,EAAM;AAE3F,EAAA,SAAS,cAAc,MAAA,EAAqB;AAC1C,IAAA,MAAM,MAAA,GAAS,OAAO,qBAAA,EAAsB;AAC5C,IAAA,kBAAA,CAAmB,EAAE,IAAA,EAAM,MAAA,CAAO,IAAA,GAAO,MAAA,CAAO,KAAA,GAAQ,CAAA,EAAG,GAAA,EAAK,MAAA,CAAO,GAAA,GAAM,CAAA,EAAG,CAAA;AAAA,EAClF;AAEA,EAAA,SAAS,WAAA,GAAc;AACrB,IAAA,kBAAA,CAAmB,MAAS,CAAA;AAAA,EAC9B;AAEA,EAAA,MAAM,gBAAA,GAAmB;AAAA,IACvB,kBAAA,EAAoB,kBAAkB,SAAA,GAAY,MAAA;AAAA,IAClD,YAAA,EAAc,CAAC,KAAA,KAAmC,aAAA,CAAc,MAAM,aAAa,CAAA;AAAA,IACnF,YAAA,EAAc,WAAA;AAAA,IACd,OAAA,EAAS,CAAC,KAAA,KAAmC,aAAA,CAAc,MAAM,aAAa,CAAA;AAAA,IAC9E,MAAA,EAAQ;AAAA,GACV;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,QAAA,mBACC,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAU,0FAAA;AAAA,QACV,OAAA,EAAS,QAAA;AAAA,QACT,KAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACJ,GAAG;AAAA;AAAA,KACN,mBAEA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAU,6GAAA;AAAA,QACV,IAAA,EAAK,KAAA;AAAA,QACL,KAAA;AAAA,QACA,QAAA,EAAU,CAAA;AAAA,QACT,GAAG;AAAA;AAAA,KACN;AAAA,IAED,eAAA,GACG,YAAA;AAAA,sBACE,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,6MAAA;AAAA,UACV,EAAA,EAAI,SAAA;AAAA,UACJ,IAAA,EAAK,SAAA;AAAA,UACL,OAAO,EAAE,IAAA,EAAM,gBAAgB,IAAA,EAAM,GAAA,EAAK,gBAAgB,GAAA,EAAI;AAAA,UAE7D,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MACA,QAAA,CAAS;AAAA,KACX,GACA;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}

package/dist/ee/signals/lifeline-row.cjs.js

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const ee_signals_lifelinePoint = require('./lifeline-point.cjs.js');
+const ee_signals_signalFormatting = require('./signal-formatting.cjs.js');
+const ee_signals_themeLifelinesData = require('./theme-lifelines-data.cjs.js');
+const sankeyColor = require('../../sankeyColor-DONd5cg9.cjs');
+
+const TRACK_HEIGHT = 28;
+const MAX_BAR_HEIGHT = 22;
+const MIN_BAR_HEIGHT = 4;
+function barHeight(share) {
+  return Math.max(MIN_BAR_HEIGHT, Math.round(share * MAX_BAR_HEIGHT));
+}
+function pointTitle(snapshot, label, traceCount, share) {
+  const cutoff = snapshot?.cutoffAt ? ee_signals_signalFormatting.formatSnapshotCutoff(snapshot.cutoffAt) : void 0;
+  return `${label}${cutoff ? ` · ${cutoff}` : ""} · ${traceCount} traces (${Math.round(share * 100)}%)`;
+}
+function lifelineArea(segment, positions) {
+  const firstPoint = segment[0];
+  const lastPoint = segment.at(-1);
+  if (!firstPoint || !lastPoint) return void 0;
+  return {
+    key: firstPoint.snapshotIndex,
+    points: [
+      `${positions[firstPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,
+      ...segment.map((point) => `${positions[point.snapshotIndex]},${TRACK_HEIGHT - 1 - barHeight(point.share)}`),
+      `${positions[lastPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`
+    ].join(" ")
+  };
+}
+function LifelineRow({
+  row,
+  signalName,
+  snapshots,
+  positions,
+  hue,
+  onThemeSelect
+}) {
+  const isPersistent = row.points.length * 2 >= snapshots.length;
+  const connectors = ee_signals_themeLifelinesData.lifelineConnectors(row.points);
+  const segments = ee_signals_themeLifelinesData.lifelineSegments(row.points);
+  const pointY = (point) => TRACK_HEIGHT - 1 - barHeight(point.share);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      "aria-label": `${row.label}: present in ${row.points.length} of ${snapshots.length} landmarks`,
+      className: `group hover:bg-surface3 flex items-center gap-3 rounded-md transition-colors ${isPersistent ? "" : "opacity-55 hover:opacity-100"}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "text-neutral4 group-hover:text-neutral6 w-52 shrink-0 truncate text-right text-xs",
+            title: row.label,
+            children: row.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1 relative mx-2 h-7 min-w-0 flex-1 border-b", children: [
+          connectors.length > 0 || segments.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute inset-0 size-full",
+              preserveAspectRatio: "none",
+              viewBox: `0 0 100 ${TRACK_HEIGHT}`,
+              children: [
+                segments.map((segment) => {
+                  const area = lifelineArea(segment, positions);
+                  if (!area) return void 0;
+                  return /* @__PURE__ */ jsxRuntime.jsx("polygon", { fill: sankeyColor.nodeColor(hue), fillOpacity: 0.14, points: area.points }, `area-${area.key}`);
+                }),
+                connectors.map(({ from, to }) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "line",
+                  {
+                    stroke: sankeyColor.nodeColor(hue),
+                    strokeOpacity: 0.45,
+                    strokeWidth: 1.2,
+                    vectorEffect: "non-scaling-stroke",
+                    x1: positions[from.snapshotIndex],
+                    y1: pointY(from),
+                    x2: positions[to.snapshotIndex],
+                    y2: pointY(to)
+                  },
+                  `${from.snapshotIndex}-${to.snapshotIndex}`
+                ))
+              ]
+            }
+          ) : null,
+          row.points.map((point) => {
+            const title = pointTitle(snapshots[point.snapshotIndex], row.label, point.traceCount, point.share);
+            const themeId = point.themeId;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              ee_signals_lifelinePoint.LifelinePoint,
+              {
+                title,
+                positionPercent: positions[point.snapshotIndex],
+                height: barHeight(point.share),
+                color: sankeyColor.nodeColor(hue),
+                onSelect: themeId === void 0 ? void 0 : () => onThemeSelect({ signalName, themeId, label: row.label }, point.snapshotIndex)
+              },
+              point.snapshotIndex
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral3 w-9 shrink-0 font-mono text-[11px] tabular-nums", children: [
+          row.points.length,
+          "/",
+          snapshots.length
+        ] })
+      ]
+    }
+  );
+}
+
+exports.LifelineRow = LifelineRow;
+//# sourceMappingURL=lifeline-row.cjs.js.map

package/dist/ee/signals/lifeline-row.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifeline-row.cjs.js","sources":["../../../src/ee/signals/lifeline-row.tsx"],"sourcesContent":["import { LifelinePoint } from './lifeline-point';\nimport { formatSnapshotCutoff } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { lifelineConnectors, lifelineSegments } from './theme-lifelines-data';\nimport type { ThemeLifeline, ThemeLifelinePoint } from './theme-lifelines-data';\nimport type { ThemeSnapshot, TraceSignalName } from './types';\nimport { nodeColor } from '@/ds/components/SankeyChart';\n\nconst TRACK_HEIGHT = 28;\nconst MAX_BAR_HEIGHT = 22;\nconst MIN_BAR_HEIGHT = 4;\n\nfunction barHeight(share: number) {\n  return Math.max(MIN_BAR_HEIGHT, Math.round(share * MAX_BAR_HEIGHT));\n}\n\nfunction pointTitle(snapshot: ThemeSnapshot | undefined, label: string, traceCount: number, share: number) {\n  const cutoff = snapshot?.cutoffAt ? formatSnapshotCutoff(snapshot.cutoffAt) : undefined;\n  return `${label}${cutoff ? ` · ${cutoff}` : ''} · ${traceCount} traces (${Math.round(share * 100)}%)`;\n}\n\nfunction lifelineArea(segment: ThemeLifelinePoint[], positions: number[]) {\n  const firstPoint = segment[0];\n  const lastPoint = segment.at(-1);\n  if (!firstPoint || !lastPoint) return undefined;\n\n  return {\n    key: firstPoint.snapshotIndex,\n    points: [\n      `${positions[firstPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n      ...segment.map(point => `${positions[point.snapshotIndex]},${TRACK_HEIGHT - 1 - barHeight(point.share)}`),\n      `${positions[lastPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n    ].join(' '),\n  };\n}\n\nexport function LifelineRow({\n  row,\n  signalName,\n  snapshots,\n  positions,\n  hue,\n  onThemeSelect,\n}: {\n  row: ThemeLifeline;\n  signalName: TraceSignalName;\n  snapshots: ThemeSnapshot[];\n  positions: number[];\n  hue: number;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\n  const isPersistent = row.points.length * 2 >= snapshots.length;\n  const connectors = lifelineConnectors(row.points);\n  const segments = lifelineSegments(row.points);\n  const pointY = (point: ThemeLifelinePoint) => TRACK_HEIGHT - 1 - barHeight(point.share);\n\n  return (\n    <li\n      aria-label={`${row.label}: present in ${row.points.length} of ${snapshots.length} landmarks`}\n      className={`group hover:bg-surface3 flex items-center gap-3 rounded-md transition-colors ${isPersistent ? '' : 'opacity-55 hover:opacity-100'}`}\n    >\n      <span\n        className=\"text-neutral4 group-hover:text-neutral6 w-52 shrink-0 truncate text-right text-xs\"\n        title={row.label}\n      >\n        {row.label}\n      </span>\n      <div className=\"border-border1 relative mx-2 h-7 min-w-0 flex-1 border-b\">\n        {connectors.length > 0 || segments.length > 0 ? (\n          <svg\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 size-full\"\n            preserveAspectRatio=\"none\"\n            viewBox={`0 0 100 ${TRACK_HEIGHT}`}\n          >\n            {segments.map(segment => {\n              const area = lifelineArea(segment, positions);\n              if (!area) return undefined;\n              return <polygon key={`area-${area.key}`} fill={nodeColor(hue)} fillOpacity={0.14} points={area.points} />;\n            })}\n            {connectors.map(({ from, to }) => (\n              <line\n                key={`${from.snapshotIndex}-${to.snapshotIndex}`}\n                stroke={nodeColor(hue)}\n                strokeOpacity={0.45}\n                strokeWidth={1.2}\n                vectorEffect=\"non-scaling-stroke\"\n                x1={positions[from.snapshotIndex]}\n                y1={pointY(from)}\n                x2={positions[to.snapshotIndex]}\n                y2={pointY(to)}\n              />\n            ))}\n          </svg>\n        ) : null}\n        {row.points.map(point => {\n          const title = pointTitle(snapshots[point.snapshotIndex], row.label, point.traceCount, point.share);\n          const themeId = point.themeId;\n          return (\n            <LifelinePoint\n              key={point.snapshotIndex}\n              title={title}\n              positionPercent={positions[point.snapshotIndex]}\n              height={barHeight(point.share)}\n              color={nodeColor(hue)}\n              onSelect={\n                themeId === undefined\n                  ? undefined\n                  : () => onThemeSelect({ signalName, themeId, label: row.label }, point.snapshotIndex)\n              }\n            />\n          );\n        })}\n      </div>\n      <span className=\"text-neutral3 w-9 shrink-0 font-mono text-[11px] tabular-nums\">\n        {row.points.length}/{snapshots.length}\n      </span>\n    </li>\n  );\n}\n"],"names":["formatSnapshotCutoff","lifelineConnectors","lifelineSegments","jsxs","jsx","nodeColor","LifelinePoint"],"mappings":"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"}

package/dist/ee/signals/lifeline-row.d.ts

@@ -0,0 +1,2 @@
+export * from '../../src/ee/signals/lifeline-row'
+export {}

package/dist/ee/signals/lifeline-row.es.js

@@ -0,0 +1,114 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { LifelinePoint } from './lifeline-point.es.js';
+import { formatSnapshotCutoff } from './signal-formatting.es.js';
+import { lifelineConnectors, lifelineSegments } from './theme-lifelines-data.es.js';
+import { n as nodeColor } from '../../sankeyColor-CQ5nkgtL.js';
+
+const TRACK_HEIGHT = 28;
+const MAX_BAR_HEIGHT = 22;
+const MIN_BAR_HEIGHT = 4;
+function barHeight(share) {
+  return Math.max(MIN_BAR_HEIGHT, Math.round(share * MAX_BAR_HEIGHT));
+}
+function pointTitle(snapshot, label, traceCount, share) {
+  const cutoff = snapshot?.cutoffAt ? formatSnapshotCutoff(snapshot.cutoffAt) : void 0;
+  return `${label}${cutoff ? ` · ${cutoff}` : ""} · ${traceCount} traces (${Math.round(share * 100)}%)`;
+}
+function lifelineArea(segment, positions) {
+  const firstPoint = segment[0];
+  const lastPoint = segment.at(-1);
+  if (!firstPoint || !lastPoint) return void 0;
+  return {
+    key: firstPoint.snapshotIndex,
+    points: [
+      `${positions[firstPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,
+      ...segment.map((point) => `${positions[point.snapshotIndex]},${TRACK_HEIGHT - 1 - barHeight(point.share)}`),
+      `${positions[lastPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`
+    ].join(" ")
+  };
+}
+function LifelineRow({
+  row,
+  signalName,
+  snapshots,
+  positions,
+  hue,
+  onThemeSelect
+}) {
+  const isPersistent = row.points.length * 2 >= snapshots.length;
+  const connectors = lifelineConnectors(row.points);
+  const segments = lifelineSegments(row.points);
+  const pointY = (point) => TRACK_HEIGHT - 1 - barHeight(point.share);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "aria-label": `${row.label}: present in ${row.points.length} of ${snapshots.length} landmarks`,
+      className: `group hover:bg-surface3 flex items-center gap-3 rounded-md transition-colors ${isPersistent ? "" : "opacity-55 hover:opacity-100"}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-neutral4 group-hover:text-neutral6 w-52 shrink-0 truncate text-right text-xs",
+            title: row.label,
+            children: row.label
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "border-border1 relative mx-2 h-7 min-w-0 flex-1 border-b", children: [
+          connectors.length > 0 || segments.length > 0 ? /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute inset-0 size-full",
+              preserveAspectRatio: "none",
+              viewBox: `0 0 100 ${TRACK_HEIGHT}`,
+              children: [
+                segments.map((segment) => {
+                  const area = lifelineArea(segment, positions);
+                  if (!area) return void 0;
+                  return /* @__PURE__ */ jsx("polygon", { fill: nodeColor(hue), fillOpacity: 0.14, points: area.points }, `area-${area.key}`);
+                }),
+                connectors.map(({ from, to }) => /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    stroke: nodeColor(hue),
+                    strokeOpacity: 0.45,
+                    strokeWidth: 1.2,
+                    vectorEffect: "non-scaling-stroke",
+                    x1: positions[from.snapshotIndex],
+                    y1: pointY(from),
+                    x2: positions[to.snapshotIndex],
+                    y2: pointY(to)
+                  },
+                  `${from.snapshotIndex}-${to.snapshotIndex}`
+                ))
+              ]
+            }
+          ) : null,
+          row.points.map((point) => {
+            const title = pointTitle(snapshots[point.snapshotIndex], row.label, point.traceCount, point.share);
+            const themeId = point.themeId;
+            return /* @__PURE__ */ jsx(
+              LifelinePoint,
+              {
+                title,
+                positionPercent: positions[point.snapshotIndex],
+                height: barHeight(point.share),
+                color: nodeColor(hue),
+                onSelect: themeId === void 0 ? void 0 : () => onThemeSelect({ signalName, themeId, label: row.label }, point.snapshotIndex)
+              },
+              point.snapshotIndex
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "text-neutral3 w-9 shrink-0 font-mono text-[11px] tabular-nums", children: [
+          row.points.length,
+          "/",
+          snapshots.length
+        ] })
+      ]
+    }
+  );
+}
+
+export { LifelineRow };
+//# sourceMappingURL=lifeline-row.es.js.map

package/dist/ee/signals/lifeline-row.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifeline-row.es.js","sources":["../../../src/ee/signals/lifeline-row.tsx"],"sourcesContent":["import { LifelinePoint } from './lifeline-point';\nimport { formatSnapshotCutoff } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { lifelineConnectors, lifelineSegments } from './theme-lifelines-data';\nimport type { ThemeLifeline, ThemeLifelinePoint } from './theme-lifelines-data';\nimport type { ThemeSnapshot, TraceSignalName } from './types';\nimport { nodeColor } from '@/ds/components/SankeyChart';\n\nconst TRACK_HEIGHT = 28;\nconst MAX_BAR_HEIGHT = 22;\nconst MIN_BAR_HEIGHT = 4;\n\nfunction barHeight(share: number) {\n  return Math.max(MIN_BAR_HEIGHT, Math.round(share * MAX_BAR_HEIGHT));\n}\n\nfunction pointTitle(snapshot: ThemeSnapshot | undefined, label: string, traceCount: number, share: number) {\n  const cutoff = snapshot?.cutoffAt ? formatSnapshotCutoff(snapshot.cutoffAt) : undefined;\n  return `${label}${cutoff ? ` · ${cutoff}` : ''} · ${traceCount} traces (${Math.round(share * 100)}%)`;\n}\n\nfunction lifelineArea(segment: ThemeLifelinePoint[], positions: number[]) {\n  const firstPoint = segment[0];\n  const lastPoint = segment.at(-1);\n  if (!firstPoint || !lastPoint) return undefined;\n\n  return {\n    key: firstPoint.snapshotIndex,\n    points: [\n      `${positions[firstPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n      ...segment.map(point => `${positions[point.snapshotIndex]},${TRACK_HEIGHT - 1 - barHeight(point.share)}`),\n      `${positions[lastPoint.snapshotIndex]},${TRACK_HEIGHT - 1}`,\n    ].join(' '),\n  };\n}\n\nexport function LifelineRow({\n  row,\n  signalName,\n  snapshots,\n  positions,\n  hue,\n  onThemeSelect,\n}: {\n  row: ThemeLifeline;\n  signalName: TraceSignalName;\n  snapshots: ThemeSnapshot[];\n  positions: number[];\n  hue: number;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\n  const isPersistent = row.points.length * 2 >= snapshots.length;\n  const connectors = lifelineConnectors(row.points);\n  const segments = lifelineSegments(row.points);\n  const pointY = (point: ThemeLifelinePoint) => TRACK_HEIGHT - 1 - barHeight(point.share);\n\n  return (\n    <li\n      aria-label={`${row.label}: present in ${row.points.length} of ${snapshots.length} landmarks`}\n      className={`group hover:bg-surface3 flex items-center gap-3 rounded-md transition-colors ${isPersistent ? '' : 'opacity-55 hover:opacity-100'}`}\n    >\n      <span\n        className=\"text-neutral4 group-hover:text-neutral6 w-52 shrink-0 truncate text-right text-xs\"\n        title={row.label}\n      >\n        {row.label}\n      </span>\n      <div className=\"border-border1 relative mx-2 h-7 min-w-0 flex-1 border-b\">\n        {connectors.length > 0 || segments.length > 0 ? (\n          <svg\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 size-full\"\n            preserveAspectRatio=\"none\"\n            viewBox={`0 0 100 ${TRACK_HEIGHT}`}\n          >\n            {segments.map(segment => {\n              const area = lifelineArea(segment, positions);\n              if (!area) return undefined;\n              return <polygon key={`area-${area.key}`} fill={nodeColor(hue)} fillOpacity={0.14} points={area.points} />;\n            })}\n            {connectors.map(({ from, to }) => (\n              <line\n                key={`${from.snapshotIndex}-${to.snapshotIndex}`}\n                stroke={nodeColor(hue)}\n                strokeOpacity={0.45}\n                strokeWidth={1.2}\n                vectorEffect=\"non-scaling-stroke\"\n                x1={positions[from.snapshotIndex]}\n                y1={pointY(from)}\n                x2={positions[to.snapshotIndex]}\n                y2={pointY(to)}\n              />\n            ))}\n          </svg>\n        ) : null}\n        {row.points.map(point => {\n          const title = pointTitle(snapshots[point.snapshotIndex], row.label, point.traceCount, point.share);\n          const themeId = point.themeId;\n          return (\n            <LifelinePoint\n              key={point.snapshotIndex}\n              title={title}\n              positionPercent={positions[point.snapshotIndex]}\n              height={barHeight(point.share)}\n              color={nodeColor(hue)}\n              onSelect={\n                themeId === undefined\n                  ? undefined\n                  : () => onThemeSelect({ signalName, themeId, label: row.label }, point.snapshotIndex)\n              }\n            />\n          );\n        })}\n      </div>\n      <span className=\"text-neutral3 w-9 shrink-0 font-mono text-[11px] tabular-nums\">\n        {row.points.length}/{snapshots.length}\n      </span>\n    </li>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,96 @@
+'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');
+const ee_signals_hooks_useNoise = require('./hooks/use-noise.cjs.js');
+const ee_signals_hooks_useNoiseExamples = require('./hooks/use-noise-examples.cjs.js');
+require('@tanstack/react-query');
+require('./trace-intelligence-context.cjs.js');
+const ee_signals_signalFormatting = require('./signal-formatting.cjs.js');
+const ee_signals_traceInsightView = require('./trace-insight-view.cjs.js');
+const drawer = require('../../drawer-CNnvBMfD.cjs');
+
+function NoiseDetailPanel({ entityId, entityType, snapshotId, signalName, onClose }) {
+  const examplesContextKey = `${snapshotId}:${signalName ?? ""}`;
+  const [examplesPage, setExamplesPage] = React.useState(() => ({ contextKey: examplesContextKey, offset: 0 }));
+  const examplesOffset = examplesPage.contextKey === examplesContextKey ? examplesPage.offset : 0;
+  const [insightTraceId, setInsightTraceId] = React.useState();
+  const noiseQuery = ee_signals_hooks_useNoise.useNoise(entityId, entityType, signalName, snapshotId);
+  const examplesQuery = ee_signals_hooks_useNoiseExamples.useNoiseExamples(
+    entityId,
+    entityType,
+    signalName,
+    snapshotId,
+    ee_signals_examplesPager.EXAMPLES_PAGE_SIZE,
+    examplesOffset
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    drawer.Drawer,
+    {
+      onOpenChange: (open) => {
+        if (!open) {
+          setExamplesPage({ contextKey: "", offset: 0 });
+          setInsightTraceId(void 0);
+          onClose();
+        }
+      },
+      open: signalName !== 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: [
+          /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerTitle, { children: "Noise" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerDescription, { className: "sr-only", children: [
+            "Noise details for the ",
+            signalName,
+            " trace signal"
+          ] })
+        ] }),
+        /* @__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: [
+            /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-labelledby": "noise-summary-heading", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "noise-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: "Noise contains trace signal summaries that did not consistently match a recurring theme in this snapshot." }),
+              noiseQuery.isPending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral3 mt-4 text-sm", children: "Loading noise details…" }),
+              noiseQuery.isError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-sm text-red-500", children: "Unable to load noise details." }),
+              noiseQuery.data && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral5 mt-4 font-mono text-sm tabular-nums", children: ee_signals_signalFormatting.shareSentence(noiseQuery.data.noise.traceCount, noiseQuery.data.noise.coverage) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-labelledby": "noise-examples-heading", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "noise-examples-heading", className: "text-neutral3 font-mono text-xs tracking-wider uppercase", children: "Example summaries" }),
+              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 noise 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)) }),
+                noiseQuery.data && /* @__PURE__ */ jsxRuntime.jsx(
+                  ee_signals_examplesPager.ExamplesPager,
+                  {
+                    traceCount: noiseQuery.data.noise.traceCount,
+                    offset: examplesOffset,
+                    onOffsetChange: (offset) => setExamplesPage({ contextKey: examplesContextKey, offset })
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+
+exports.NoiseDetailPanel = NoiseDetailPanel;
+//# sourceMappingURL=noise-detail-panel.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"noise-detail-panel.cjs.js","sources":["../../../src/ee/signals/noise-detail-panel.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager';\nimport { useNoise, useNoiseExamples } from './hooks';\nimport { shareSentence } from './signal-formatting';\nimport { TraceInsightView } from './trace-insight-view';\nimport type { TraceSignalName } from './types';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/ds/components/Drawer';\n\ninterface NoiseDetailPanelProps {\n  entityId: string;\n  entityType: string;\n  snapshotId: string;\n  signalName: TraceSignalName | undefined;\n  onClose: () => void;\n}\n\nexport function NoiseDetailPanel({ entityId, entityType, snapshotId, signalName, onClose }: NoiseDetailPanelProps) {\n  const examplesContextKey = `${snapshotId}:${signalName ?? ''}`;\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 noiseQuery = useNoise(entityId, entityType, signalName, snapshotId);\n  const examplesQuery = useNoiseExamples(\n    entityId,\n    entityType,\n    signalName,\n    snapshotId,\n    EXAMPLES_PAGE_SIZE,\n    examplesOffset,\n  );\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={signalName !== undefined}\n      overlay=\"none\"\n      side=\"right\"\n      variant=\"floating\"\n    >\n      <DrawerContent>\n        <DrawerHeader className=\"border-border1 border-b\">\n          <DrawerTitle>Noise</DrawerTitle>\n          <DrawerDescription className=\"sr-only\">Noise details for the {signalName} trace signal</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              <section aria-labelledby=\"noise-summary-heading\">\n                <h2 id=\"noise-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                  Noise contains trace signal summaries that did not consistently match a recurring theme in this\n                  snapshot.\n                </p>\n                {noiseQuery.isPending && <p className=\"text-neutral3 mt-4 text-sm\">Loading noise details…</p>}\n                {noiseQuery.isError && <p className=\"mt-4 text-sm text-red-500\">Unable to load noise details.</p>}\n                {noiseQuery.data && (\n                  <p className=\"text-neutral5 mt-4 font-mono text-sm tabular-nums\">\n                    {shareSentence(noiseQuery.data.noise.traceCount, noiseQuery.data.noise.coverage)}\n                  </p>\n                )}\n              </section>\n\n              <section aria-labelledby=\"noise-examples-heading\">\n                <h2 id=\"noise-examples-heading\" className=\"text-neutral3 font-mono text-xs tracking-wider uppercase\">\n                  Example summaries\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 noise 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                    {noiseQuery.data && (\n                      <ExamplesPager\n                        traceCount={noiseQuery.data.noise.traceCount}\n                        offset={examplesOffset}\n                        onOffsetChange={offset => setExamplesPage({ contextKey: examplesContextKey, offset })}\n                      />\n                    )}\n                  </>\n                )}\n              </section>\n            </>\n          )}\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"],"names":["useState","useNoise","useNoiseExamples","EXAMPLES_PAGE_SIZE","jsx","Drawer","DrawerContent","jsxs","DrawerHeader","DrawerTitle","DrawerDescription","DrawerBody","TraceInsightView","Fragment","shareSentence","ExamplesPager"],"mappings":";;;;;;;;;;;;;;;AAwBO,SAAS,iBAAiB,EAAE,QAAA,EAAU,YAAY,UAAA,EAAY,UAAA,EAAY,SAAQ,EAA0B;AACjH,EAAA,MAAM,kBAAA,GAAqB,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,cAAc,EAAE,CAAA,CAAA;AAC5D,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,cAAA,CAAS,OAAO,EAAE,UAAA,EAAY,kBAAA,EAAoB,MAAA,EAAQ,CAAA,EAAE,CAAE,CAAA;AACtG,EAAA,MAAM,cAAA,GAAiB,YAAA,CAAa,UAAA,KAAe,kBAAA,GAAqB,aAAa,MAAA,GAAS,CAAA;AAC9F,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,cAAA,EAAiB;AAC7D,EAAA,MAAM,UAAA,GAAaC,kCAAA,CAAS,QAAA,EAAU,UAAA,EAAY,YAAY,UAAU,CAAA;AACxE,EAAA,MAAM,aAAA,GAAgBC,kDAAA;AAAA,IACpB,QAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACAC,2CAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,cAAc,CAAA,IAAA,KAAQ;AACpB,QAAA,IAAI,CAAC,IAAA,EAAM;AACT,UAAA,eAAA,CAAgB,EAAE,UAAA,EAAY,EAAA,EAAI,MAAA,EAAQ,GAAG,CAAA;AAC7C,UAAA,iBAAA,CAAkB,MAAS,CAAA;AAC3B,UAAA,OAAA,EAAQ;AAAA,QACV;AAAA,MACF,CAAA;AAAA,MACA,MAAM,UAAA,KAAe,MAAA;AAAA,MACrB,OAAA,EAAQ,MAAA;AAAA,MACR,IAAA,EAAK,OAAA;AAAA,MACL,OAAA,EAAQ,UAAA;AAAA,MAER,0CAACC,oBAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAC,eAAA,CAACC,mBAAA,EAAA,EAAa,WAAU,yBAAA,EACtB,QAAA,EAAA;AAAA,0BAAAJ,cAAA,CAACK,sBAAY,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,0BAClBF,eAAA,CAACG,wBAAA,EAAA,EAAkB,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA;AAAA,YAAA,wBAAA;AAAA,YAAuB,UAAA;AAAA,YAAW;AAAA,WAAA,EAAa;AAAA,SAAA,EACxF,CAAA;AAAA,wBACAH,eAAA,CAACI,iBAAA,EAAA,EAAW,SAAA,EAAU,8CAAA,EACnB,QAAA,EAAA;AAAA,UAAA,cAAA,KAAmB,MAAA,mCACjBC,4CAAA,EAAA,EAAiB,OAAA,EAAS,gBAAgB,MAAA,EAAQ,MAAM,iBAAA,CAAkB,MAAS,CAAA,EAAG,CAAA;AAAA,UAExF,cAAA,KAAmB,0BAClBL,eAAA,CAAAM,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,4BAAAN,eAAA,CAAC,SAAA,EAAA,EAAQ,mBAAgB,uBAAA,EACvB,QAAA,EAAA;AAAA,8BAAAH,cAAA,CAAC,IAAA,EAAA,EAAG,EAAA,EAAG,uBAAA,EAAwB,SAAA,EAAU,4DAA2D,QAAA,EAAA,SAAA,EAEpG,CAAA;AAAA,8BACAA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4BAAA,EAA6B,QAAA,EAAA,2GAAA,EAG1C,CAAA;AAAA,cACC,WAAW,SAAA,oBAAaA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8BAA6B,QAAA,EAAA,wBAAA,EAAsB,CAAA;AAAA,cACxF,WAAW,OAAA,oBAAWA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,6BAA4B,QAAA,EAAA,+BAAA,EAA6B,CAAA;AAAA,cAC5F,UAAA,CAAW,IAAA,oBACVA,cAAA,CAAC,GAAA,EAAA,EAAE,WAAU,mDAAA,EACV,QAAA,EAAAU,yCAAA,CAAc,UAAA,CAAW,IAAA,CAAK,MAAM,UAAA,EAAY,UAAA,CAAW,IAAA,CAAK,KAAA,CAAM,QAAQ,CAAA,EACjF;AAAA,aAAA,EAEJ,CAAA;AAAA,4BAEAP,eAAA,CAAC,SAAA,EAAA,EAAQ,iBAAA,EAAgB,wBAAA,EACvB,QAAA,EAAA;AAAA,8BAAAH,cAAA,CAAC,IAAA,EAAA,EAAG,EAAA,EAAG,wBAAA,EAAyB,SAAA,EAAU,4DAA2D,QAAA,EAAA,mBAAA,EAErG,CAAA;AAAA,cACC,cAAc,SAAA,oBAAaA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8BAA6B,QAAA,EAAA,mBAAA,EAAiB,CAAA;AAAA,cACtF,cAAc,OAAA,oBAAWA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,6BAA4B,QAAA,EAAA,0BAAA,EAAwB,CAAA;AAAA,cAC1F,aAAA,CAAc,wBACbG,eAAA,CAAAM,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,gBAAA,aAAA,CAAc,IAAA,CAAK,SAAS,MAAA,KAAW,CAAA,kCACrC,GAAA,EAAA,EAAE,SAAA,EAAU,8BAA6B,QAAA,EAAA,qCAAA,EAAmC,CAAA,kCAE5E,IAAA,EAAA,EAAG,SAAA,EAAU,kBACX,QAAA,EAAA,aAAA,CAAc,IAAA,CAAK,SAAS,GAAA,CAAI,CAAA,OAAA,oCAC9B,IAAA,EAAA,EACC,QAAA,kBAAAT,cAAA;AAAA,kBAAC,QAAA;AAAA,kBAAA;AAAA,oBACC,IAAA,EAAK,QAAA;AAAA,oBACL,YAAA,EAAY,CAAA,uBAAA,EAA0B,OAAA,CAAQ,UAAU,CAAA,CAAA;AAAA,oBACxD,SAAA,EAAU,0HAAA;AAAA,oBACV,OAAA,EAAS,MAAM,iBAAA,CAAkB,OAAA,CAAQ,OAAO,CAAA;AAAA,oBAE/C,QAAA,EAAA,OAAA,CAAQ;AAAA;AAAA,iBACX,EAAA,EARO,OAAA,CAAQ,OASjB,CACD,CAAA,EACH,CAAA;AAAA,gBAED,WAAW,IAAA,oBACVA,cAAA;AAAA,kBAACW,sCAAA;AAAA,kBAAA;AAAA,oBACC,UAAA,EAAY,UAAA,CAAW,IAAA,CAAK,KAAA,CAAM,UAAA;AAAA,oBAClC,MAAA,EAAQ,cAAA;AAAA,oBACR,gBAAgB,CAAA,MAAA,KAAU,eAAA,CAAgB,EAAE,UAAA,EAAY,kBAAA,EAAoB,QAAQ;AAAA;AAAA;AACtF,eAAA,EAEJ;AAAA,aAAA,EAEJ;AAAA,WAAA,EACF;AAAA,SAAA,EAEJ;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;;;;"}

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

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

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

@@ -0,0 +1,92 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager.es.js';
+import { useNoise } from './hooks/use-noise.es.js';
+import { useNoiseExamples } from './hooks/use-noise-examples.es.js';
+import '@tanstack/react-query';
+import './trace-intelligence-context.es.js';
+import { shareSentence } from './signal-formatting.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';
+
+function NoiseDetailPanel({ entityId, entityType, snapshotId, signalName, onClose }) {
+  const examplesContextKey = `${snapshotId}:${signalName ?? ""}`;
+  const [examplesPage, setExamplesPage] = useState(() => ({ contextKey: examplesContextKey, offset: 0 }));
+  const examplesOffset = examplesPage.contextKey === examplesContextKey ? examplesPage.offset : 0;
+  const [insightTraceId, setInsightTraceId] = useState();
+  const noiseQuery = useNoise(entityId, entityType, signalName, snapshotId);
+  const examplesQuery = useNoiseExamples(
+    entityId,
+    entityType,
+    signalName,
+    snapshotId,
+    EXAMPLES_PAGE_SIZE,
+    examplesOffset
+  );
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      onOpenChange: (open) => {
+        if (!open) {
+          setExamplesPage({ contextKey: "", offset: 0 });
+          setInsightTraceId(void 0);
+          onClose();
+        }
+      },
+      open: signalName !== void 0,
+      overlay: "none",
+      side: "right",
+      variant: "floating",
+      children: /* @__PURE__ */ jsxs(DrawerContent, { children: [
+        /* @__PURE__ */ jsxs(DrawerHeader, { className: "border-border1 border-b", children: [
+          /* @__PURE__ */ jsx(DrawerTitle, { children: "Noise" }),
+          /* @__PURE__ */ jsxs(DrawerDescription, { className: "sr-only", children: [
+            "Noise details for the ",
+            signalName,
+            " trace signal"
+          ] })
+        ] }),
+        /* @__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: [
+            /* @__PURE__ */ jsxs("section", { "aria-labelledby": "noise-summary-heading", children: [
+              /* @__PURE__ */ jsx("h2", { id: "noise-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: "Noise contains trace signal summaries that did not consistently match a recurring theme in this snapshot." }),
+              noiseQuery.isPending && /* @__PURE__ */ jsx("p", { className: "text-neutral3 mt-4 text-sm", children: "Loading noise details…" }),
+              noiseQuery.isError && /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-red-500", children: "Unable to load noise details." }),
+              noiseQuery.data && /* @__PURE__ */ jsx("p", { className: "text-neutral5 mt-4 font-mono text-sm tabular-nums", children: shareSentence(noiseQuery.data.noise.traceCount, noiseQuery.data.noise.coverage) })
+            ] }),
+            /* @__PURE__ */ jsxs("section", { "aria-labelledby": "noise-examples-heading", children: [
+              /* @__PURE__ */ jsx("h2", { id: "noise-examples-heading", className: "text-neutral3 font-mono text-xs tracking-wider uppercase", children: "Example summaries" }),
+              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 noise 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)) }),
+                noiseQuery.data && /* @__PURE__ */ jsx(
+                  ExamplesPager,
+                  {
+                    traceCount: noiseQuery.data.noise.traceCount,
+                    offset: examplesOffset,
+                    onOffsetChange: (offset) => setExamplesPage({ contextKey: examplesContextKey, offset })
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { NoiseDetailPanel };
+//# sourceMappingURL=noise-detail-panel.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"noise-detail-panel.es.js","sources":["../../../src/ee/signals/noise-detail-panel.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager';\nimport { useNoise, useNoiseExamples } from './hooks';\nimport { shareSentence } from './signal-formatting';\nimport { TraceInsightView } from './trace-insight-view';\nimport type { TraceSignalName } from './types';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/ds/components/Drawer';\n\ninterface NoiseDetailPanelProps {\n  entityId: string;\n  entityType: string;\n  snapshotId: string;\n  signalName: TraceSignalName | undefined;\n  onClose: () => void;\n}\n\nexport function NoiseDetailPanel({ entityId, entityType, snapshotId, signalName, onClose }: NoiseDetailPanelProps) {\n  const examplesContextKey = `${snapshotId}:${signalName ?? ''}`;\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 noiseQuery = useNoise(entityId, entityType, signalName, snapshotId);\n  const examplesQuery = useNoiseExamples(\n    entityId,\n    entityType,\n    signalName,\n    snapshotId,\n    EXAMPLES_PAGE_SIZE,\n    examplesOffset,\n  );\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={signalName !== undefined}\n      overlay=\"none\"\n      side=\"right\"\n      variant=\"floating\"\n    >\n      <DrawerContent>\n        <DrawerHeader className=\"border-border1 border-b\">\n          <DrawerTitle>Noise</DrawerTitle>\n          <DrawerDescription className=\"sr-only\">Noise details for the {signalName} trace signal</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              <section aria-labelledby=\"noise-summary-heading\">\n                <h2 id=\"noise-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                  Noise contains trace signal summaries that did not consistently match a recurring theme in this\n                  snapshot.\n                </p>\n                {noiseQuery.isPending && <p className=\"text-neutral3 mt-4 text-sm\">Loading noise details…</p>}\n                {noiseQuery.isError && <p className=\"mt-4 text-sm text-red-500\">Unable to load noise details.</p>}\n                {noiseQuery.data && (\n                  <p className=\"text-neutral5 mt-4 font-mono text-sm tabular-nums\">\n                    {shareSentence(noiseQuery.data.noise.traceCount, noiseQuery.data.noise.coverage)}\n                  </p>\n                )}\n              </section>\n\n              <section aria-labelledby=\"noise-examples-heading\">\n                <h2 id=\"noise-examples-heading\" className=\"text-neutral3 font-mono text-xs tracking-wider uppercase\">\n                  Example summaries\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 noise 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                    {noiseQuery.data && (\n                      <ExamplesPager\n                        traceCount={noiseQuery.data.noise.traceCount}\n                        offset={examplesOffset}\n                        onOffsetChange={offset => setExamplesPage({ contextKey: examplesContextKey, offset })}\n                      />\n                    )}\n                  </>\n                )}\n              </section>\n            </>\n          )}\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"],"names":[],"mappings":"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"}