@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

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

@@ -1,18 +1,19 @@
-import { t as cn } from "../../utils-DQx8TpNT.js";
-import "../../primitives/raised-surface.es.js";
-import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../tooltip-HzcLyGtV.js";
-import { t as Txt } from "../../Txt-BM6TVV_c.js";
-import { Drawer, DrawerBody, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from "../../components/Drawer.es.js";
-import { getSignalColor } from "./signal-colors.es.js";
-import { formatSnapshotDate, shareSentence, signalDescription, signalLabel } from "./signal-formatting.es.js";
-import { useTraceIntelligence } from "./use-trace-intelligence.es.js";
+import { ExamplesPager } from "./examples-pager.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 { ExamplesPager } from "./examples-pager.es.js";
-import { TraceInsightView } from "./trace-insight-view.es.js";
+import { getSignalColor } from "./signal-colors.es.js";
+import { formatSnapshotDate, shareSentence, signalDescription, signalLabel } 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 { useTraceIntelligence } from "./use-trace-intelligence.es.js";
+import { Drawer, DrawerBody, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from "../../components/Drawer.es.js";
+import { t as Metadata } from "../../Metadata-DlVgmRTA.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../tooltip-DJcze2VZ.js";
+import { t as Txt } from "../../Txt-5efBsb2p.js";
+import "../../primitives/raised-surface.es.js";
+import { t as cn } from "../../utils-DQx8TpNT.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/ee/signals/theme-detail-panel.tsx
@@ -190,15 +191,10 @@ function ThemeDetailPanel({ entityId, entityType, snapshotId, snapshotTotal, sel
 								className: "mt-3 text-destructive-foreground",
 								children: "Unable to load the trend."
 							}),
-							oldestHistoryPoint !== void 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Txt, {
+							oldestHistoryPoint !== void 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Txt, {
 								tone: "ink",
 								className: "mt-3",
-								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)
-								]
+								children: /* @__PURE__ */ jsxs(Metadata, { children: [historyQuery.data?.nextCursor ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Metadata.Item, { children: `Active since at least ${formatSnapshotDate(oldestHistoryPoint.startedAt)}` }), /* @__PURE__ */ jsx(Metadata.Item, { children: `in ${historyPoints.length}+ snapshots` })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Metadata.Item, { children: `First seen ${formatSnapshotDate(oldestHistoryPoint.startedAt)}` }), /* @__PURE__ */ jsx(Metadata.Item, { children: `in ${historyPoints.length} ${historyPoints.length === 1 ? "snapshot" : "snapshots"}` })] }), /* @__PURE__ */ jsx(Metadata.Item, { children: themeTrendDirection(historyPoints) })] })
 							}), historyPoints.length >= 2 && /* @__PURE__ */ jsx(ThemeTrendChart, {
 								points: historyPoints,
 								signalName: signalName ?? "goal"

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

@@ -1 +1 @@
-{"version":3,"file":"theme-detail-panel.es.js","names":["_Fragment"],"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 { getSignalColor } from './signal-colors';\nimport { formatSnapshotDate, shareSentence, signalDescription, signalLabel } from './signal-formatting';\nimport type { SelectedTheme, ThemeSelection, ThemeSelectionStats } from './theme-drilldown-data';\nimport { chronologicalHistoryPoints, themeTrendDirection } from './theme-trend';\nimport { ThemeTrendChart } from './theme-trend-chart';\nimport { TraceInsightView } from './trace-insight-view';\nimport { useTraceIntelligence } from './use-trace-intelligence';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/ds/components/Drawer';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\ninterface ThemeDetailPanelProps {\n  entityId: string;\n  entityType: string;\n  snapshotId: string;\n  snapshotTotal: number;\n  selection: SelectedTheme | undefined;\n  filters?: ThemeSelection[];\n  filteredStats?: ThemeSelectionStats;\n  onClose: () => void;\n}\n\nexport function ThemeDetailPanel({\n  entityId,\n  entityType,\n  snapshotId,\n  snapshotTotal,\n  selection,\n  filters = [],\n  filteredStats,\n  onClose,\n}: ThemeDetailPanelProps) {\n  const { signalCatalog } = useTraceIntelligence();\n  const filterKey = filters\n    .map(filter => `${filter.signalName}:${filter.kind === 'theme' ? filter.themeId : 'noise'}`)\n    .join(',');\n  const examplesContextKey = `${snapshotId}:${selection?.signalName ?? ''}:${selection?.themeId ?? ''}:${filterKey}`;\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    filters,\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 signalDisplayLabel = signalName ? signalLabel(signalCatalog, signalName) : undefined;\n  const signalDisplayDescription = signalName ? signalDescription(signalCatalog, signalName) : undefined;\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-b border-border\">\n          {signalName !== undefined && (\n            <Txt\n              as=\"span\"\n              variant=\"column\"\n\n              style={{ color: getSignalColor(signalName) }}\n            >\n              {signalDisplayDescription ? (\n                <Tooltip>\n                  <TooltipTrigger aria-label={signalDisplayLabel} className=\"cursor-default uppercase\">\n                    {signalDisplayLabel}\n                  </TooltipTrigger>\n                  <TooltipContent>{signalDisplayDescription}</TooltipContent>\n                </Tooltip>\n              ) : (\n                <span className=\"uppercase\">{signalDisplayLabel}</span>\n              )}\n            </Txt>\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 && <Txt tone=\"muted\">Loading theme details…</Txt>}\n              {detailQuery.isError && <Txt className=\"text-destructive-foreground\">Unable to load theme details.</Txt>}\n              {detailQuery.data && !detailQuery.data.theme && (\n                <section>\n                  <Txt as=\"h2\" variant=\"subheading\" tone=\"ink\">\n                    Not present in this snapshot\n                  </Txt>\n                  <Txt tone=\"muted\" className=\"mt-2\">\n                    This theme has no data in the selected snapshot.\n                  </Txt>\n                </section>\n              )}\n              {detailQuery.data?.theme && (\n                <>\n                  <section aria-labelledby=\"theme-summary-heading\">\n                    <Txt as=\"h2\" variant=\"eyebrow\" tone=\"muted\" id=\"theme-summary-heading\">\n                      Summary\n                    </Txt>\n                    <Txt tone=\"ink\" className=\"mt-3\">\n                      {detailQuery.data.theme.description ?? 'No description available.'}\n                    </Txt>\n                    <Txt tone=\"ink\" className=\"mt-3 tabular-nums\">\n                      {shareSentence(\n                        filteredStats?.traceCount ?? detailQuery.data.theme.traceCount,\n                        filteredStats?.stageShare ?? detailQuery.data.theme.coverage,\n                      )}\n                    </Txt>\n                  </section>\n\n                  <section aria-labelledby=\"theme-examples-heading\">\n                    <Txt as=\"h2\" variant=\"eyebrow\" tone=\"muted\" id=\"theme-examples-heading\">\n                      Examples\n                    </Txt>\n                    {examplesQuery.isPending && (\n                      <Txt tone=\"muted\" className=\"mt-3\">\n                        Loading examples…\n                      </Txt>\n                    )}\n                    {examplesQuery.isError && (\n                      <Txt className=\"mt-3 text-destructive-foreground\">Unable to load examples.</Txt>\n                    )}\n                    {examplesQuery.data && (\n                      <>\n                        {examplesQuery.data.examples.length === 0 ? (\n                          <Txt tone=\"muted\" className=\"mt-3\">\n                            No examples in this snapshot.\n                          </Txt>\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                                  onClick={() => setInsightTraceId(example.traceId)}\n                                  className={cn(\n                                    'text-foreground',\n                                    raisedSurfaceStyle,\n                                    'state-layer w-full cursor-pointer rounded-md p-3 text-left',\n                                  )}\n                                >\n                                  <Txt as=\"span\" variant=\"body\" className=\"block\">\n                                    {example.signalText}\n                                  </Txt>\n                                </button>\n                              </li>\n                            ))}\n                          </ul>\n                        )}\n                        <ExamplesPager\n                          traceCount={filteredStats?.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                      <Txt as=\"h2\" variant=\"eyebrow\" tone=\"muted\" id=\"theme-trend-heading\">\n                        Trend\n                      </Txt>\n                      {historyQuery.isPending && (\n                        <Txt tone=\"muted\" className=\"mt-3\">\n                          Loading trend…\n                        </Txt>\n                      )}\n                      {historyQuery.isError && (\n                        <Txt className=\"mt-3 text-destructive-foreground\">Unable to load the trend.</Txt>\n                      )}\n                      {oldestHistoryPoint !== undefined && (\n                        <>\n                          <Txt tone=\"ink\" className=\"mt-3\">\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                          </Txt>\n                          {historyPoints.length >= 2 && (\n                            <ThemeTrendChart points={historyPoints} signalName={signalName ?? 'goal'} />\n                          )}\n                        </>\n                      )}\n                    </section>\n                  )}\n                </>\n              )}\n            </>\n          )}\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-detail-panel.es.js","names":["_Fragment"],"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 { getSignalColor } from './signal-colors';\nimport { formatSnapshotDate, shareSentence, signalDescription, signalLabel } from './signal-formatting';\nimport type { SelectedTheme, ThemeSelection, ThemeSelectionStats } from './theme-drilldown-data';\nimport { chronologicalHistoryPoints, themeTrendDirection } from './theme-trend';\nimport { ThemeTrendChart } from './theme-trend-chart';\nimport { TraceInsightView } from './trace-insight-view';\nimport { useTraceIntelligence } from './use-trace-intelligence';\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n} from '@/ds/components/Drawer';\nimport { Metadata } from '@/ds/components/Metadata';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\ninterface ThemeDetailPanelProps {\n  entityId: string;\n  entityType: string;\n  snapshotId: string;\n  snapshotTotal: number;\n  selection: SelectedTheme | undefined;\n  filters?: ThemeSelection[];\n  filteredStats?: ThemeSelectionStats;\n  onClose: () => void;\n}\n\nexport function ThemeDetailPanel({\n  entityId,\n  entityType,\n  snapshotId,\n  snapshotTotal,\n  selection,\n  filters = [],\n  filteredStats,\n  onClose,\n}: ThemeDetailPanelProps) {\n  const { signalCatalog } = useTraceIntelligence();\n  const filterKey = filters\n    .map(filter => `${filter.signalName}:${filter.kind === 'theme' ? filter.themeId : 'noise'}`)\n    .join(',');\n  const examplesContextKey = `${snapshotId}:${selection?.signalName ?? ''}:${selection?.themeId ?? ''}:${filterKey}`;\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    filters,\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 signalDisplayLabel = signalName ? signalLabel(signalCatalog, signalName) : undefined;\n  const signalDisplayDescription = signalName ? signalDescription(signalCatalog, signalName) : undefined;\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-b border-border\">\n          {signalName !== undefined && (\n            <Txt\n              as=\"span\"\n              variant=\"column\"\n\n              style={{ color: getSignalColor(signalName) }}\n            >\n              {signalDisplayDescription ? (\n                <Tooltip>\n                  <TooltipTrigger aria-label={signalDisplayLabel} className=\"cursor-default uppercase\">\n                    {signalDisplayLabel}\n                  </TooltipTrigger>\n                  <TooltipContent>{signalDisplayDescription}</TooltipContent>\n                </Tooltip>\n              ) : (\n                <span className=\"uppercase\">{signalDisplayLabel}</span>\n              )}\n            </Txt>\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 && <Txt tone=\"muted\">Loading theme details…</Txt>}\n              {detailQuery.isError && <Txt className=\"text-destructive-foreground\">Unable to load theme details.</Txt>}\n              {detailQuery.data && !detailQuery.data.theme && (\n                <section>\n                  <Txt as=\"h2\" variant=\"subheading\" tone=\"ink\">\n                    Not present in this snapshot\n                  </Txt>\n                  <Txt tone=\"muted\" className=\"mt-2\">\n                    This theme has no data in the selected snapshot.\n                  </Txt>\n                </section>\n              )}\n              {detailQuery.data?.theme && (\n                <>\n                  <section aria-labelledby=\"theme-summary-heading\">\n                    <Txt as=\"h2\" variant=\"eyebrow\" tone=\"muted\" id=\"theme-summary-heading\">\n                      Summary\n                    </Txt>\n                    <Txt tone=\"ink\" className=\"mt-3\">\n                      {detailQuery.data.theme.description ?? 'No description available.'}\n                    </Txt>\n                    <Txt tone=\"ink\" className=\"mt-3 tabular-nums\">\n                      {shareSentence(\n                        filteredStats?.traceCount ?? detailQuery.data.theme.traceCount,\n                        filteredStats?.stageShare ?? detailQuery.data.theme.coverage,\n                      )}\n                    </Txt>\n                  </section>\n\n                  <section aria-labelledby=\"theme-examples-heading\">\n                    <Txt as=\"h2\" variant=\"eyebrow\" tone=\"muted\" id=\"theme-examples-heading\">\n                      Examples\n                    </Txt>\n                    {examplesQuery.isPending && (\n                      <Txt tone=\"muted\" className=\"mt-3\">\n                        Loading examples…\n                      </Txt>\n                    )}\n                    {examplesQuery.isError && (\n                      <Txt className=\"mt-3 text-destructive-foreground\">Unable to load examples.</Txt>\n                    )}\n                    {examplesQuery.data && (\n                      <>\n                        {examplesQuery.data.examples.length === 0 ? (\n                          <Txt tone=\"muted\" className=\"mt-3\">\n                            No examples in this snapshot.\n                          </Txt>\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                                  onClick={() => setInsightTraceId(example.traceId)}\n                                  className={cn(\n                                    'text-foreground',\n                                    raisedSurfaceStyle,\n                                    'state-layer w-full cursor-pointer rounded-md p-3 text-left',\n                                  )}\n                                >\n                                  <Txt as=\"span\" variant=\"body\" className=\"block\">\n                                    {example.signalText}\n                                  </Txt>\n                                </button>\n                              </li>\n                            ))}\n                          </ul>\n                        )}\n                        <ExamplesPager\n                          traceCount={filteredStats?.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                      <Txt as=\"h2\" variant=\"eyebrow\" tone=\"muted\" id=\"theme-trend-heading\">\n                        Trend\n                      </Txt>\n                      {historyQuery.isPending && (\n                        <Txt tone=\"muted\" className=\"mt-3\">\n                          Loading trend…\n                        </Txt>\n                      )}\n                      {historyQuery.isError && (\n                        <Txt className=\"mt-3 text-destructive-foreground\">Unable to load the trend.</Txt>\n                      )}\n                      {oldestHistoryPoint !== undefined && (\n                        <>\n                          <Txt tone=\"ink\" className=\"mt-3\">\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                            <Metadata>\n                              {historyQuery.data?.nextCursor ? (\n                                <>\n                                  <Metadata.Item>\n                                    {`Active since at least ${formatSnapshotDate(oldestHistoryPoint.startedAt)}`}\n                                  </Metadata.Item>\n                                  <Metadata.Item>{`in ${historyPoints.length}+ snapshots`}</Metadata.Item>\n                                </>\n                              ) : (\n                                <>\n                                  <Metadata.Item>{`First seen ${formatSnapshotDate(oldestHistoryPoint.startedAt)}`}</Metadata.Item>\n                                  <Metadata.Item>\n                                    {`in ${historyPoints.length} ${historyPoints.length === 1 ? 'snapshot' : 'snapshots'}`}\n                                  </Metadata.Item>\n                                </>\n                              )}\n                              <Metadata.Item>{themeTrendDirection(historyPoints)}</Metadata.Item>\n                            </Metadata>\n                          </Txt>\n                          {historyPoints.length >= 2 && (\n                            <ThemeTrendChart points={historyPoints} signalName={signalName ?? 'goal'} />\n                          )}\n                        </>\n                      )}\n                    </section>\n                  )}\n                </>\n              )}\n            </>\n          )}\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"],"mappings":"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"}

package/dist/ee/signals/theme-filter-banner.cjs.js

@@ -1,15 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Button = require("../../Button-DLcMcuUL.cjs");
-const require_Txt = require("../../Txt-BnoSqxKE.cjs");
 const require_ee_signals_signal_colors = require("./signal-colors.cjs.js");
 const require_ee_signals_signal_formatting = require("./signal-formatting.cjs.js");
 const require_ee_signals_use_trace_intelligence = require("./use-trace-intelligence.cjs.js");
+const require_Button = require("../../Button-BfICfyxD.cjs");
+const require_Metadata = require("../../Metadata-5GJlO4GU.cjs");
+const require_Txt = require("../../Txt-_00wWxTd.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/ee/signals/theme-filter-banner.tsx
-function selectionLabel(catalog, selection) {
-	return `${require_ee_signals_signal_formatting.signalLabel(catalog, selection.signalName)} · ${selection.kind === "theme" ? selection.label : "Noise"}`;
-}
 function filterSummary({ selections, filteredTraceCount, totalTraceCount, isUnavailable }) {
 	if (isUnavailable) return "Filters unavailable for this snapshot";
 	if (filteredTraceCount === void 0) return "Loading matching traces…";
@@ -33,8 +31,10 @@ function ThemeFilterBanner({ selections, filteredTraceCount, totalTraceCount, is
 		children: [
 			selections.map((selection, index) => {
 				const color = colors[index];
+				const signalTitle = require_ee_signals_signal_formatting.signalLabel(signalCatalog, selection.signalName);
+				const selectionName = selection.kind === "theme" ? selection.label : "Noise";
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-					"aria-label": selections.length === 1 ? `Clear ${selection.kind} filter` : `Clear filter ${selectionLabel(signalCatalog, selection)}`,
+					"aria-label": selections.length === 1 ? `Clear ${selection.kind} filter` : `Clear filter ${signalTitle}: ${selectionName}`,
 					onClick: () => onRemove(selection.signalName),
 					type: "button",
 					className: "state-layer flex items-center gap-1.5 rounded-full border border-border bg-background py-1 pr-2 pl-2.5 text-foreground",
@@ -48,7 +48,7 @@ function ThemeFilterBanner({ selections, filteredTraceCount, totalTraceCount, is
 							as: "span",
 							variant: "column",
 							className: "block",
-							children: selectionLabel(signalCatalog, selection)
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, { children: signalTitle }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, { children: selectionName })] })
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
 							"aria-hidden": "true",

package/dist/ee/signals/theme-filter-banner.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-filter-banner.cjs.js","names":["signalLabel","useTraceIntelligence","getSignalColor","Txt","X","Button","Eye"],"sources":["../../../src/ee/signals/theme-filter-banner.tsx"],"sourcesContent":["import type { SignalCatalogEntry } from '@mastra/client-js';\nimport { X, Eye } from 'lucide-react';\nimport { getSignalColor } from './signal-colors';\nimport { signalLabel } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { useTraceIntelligence } from './use-trace-intelligence';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\n\nfunction selectionLabel(catalog: readonly SignalCatalogEntry[], selection: ThemeSelection) {\n  return `${signalLabel(catalog, selection.signalName)} · ${selection.kind === 'theme' ? selection.label : 'Noise'}`;\n}\n\nfunction filterSummary({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n}) {\n  if (isUnavailable) return 'Filters unavailable for this snapshot';\n  if (filteredTraceCount === undefined) return 'Loading matching traces…';\n  const onlySelection = selections.length === 1 ? selections[0] : undefined;\n  if (onlySelection?.kind === 'noise') {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces assigned to Noise`;\n  }\n  if (onlySelection) {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that flow through this theme`;\n  }\n  return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that match these filters`;\n}\n\nexport function ThemeFilterBanner({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n  onViewDetails,\n  onRemove,\n  onClear,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n  onViewDetails: (selection: ThemeSelection) => void;\n  onRemove: (signalName: ThemeSelection['signalName']) => void;\n  onClear: () => void;\n}) {\n  const { signalCatalog } = useTraceIntelligence();\n  const colors = selections.map(selection => getSignalColor(selection.signalName));\n  const latestSelection = selections.at(-1);\n  const borderGradient = `linear-gradient(90deg, ${colors.length > 1 ? colors.join(', ') : `${colors[0]}, ${colors[0]}`})`;\n\n  return (\n    <section\n      aria-label=\"Active theme drill-in\"\n      className=\"relative flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-transparent px-3 py-2\"\n      style={{\n        backgroundImage: `linear-gradient(var(--card), var(--card)), ${borderGradient}`,\n        backgroundClip: 'padding-box, border-box',\n      }}\n    >\n      {selections.map((selection, index) => {\n        const color = colors[index];\n        return (\n          <button\n            key={selection.signalName}\n            aria-label={\n              selections.length === 1\n                ? `Clear ${selection.kind} filter`\n                : `Clear filter ${selectionLabel(signalCatalog, selection)}`\n            }\n            onClick={() => onRemove(selection.signalName)}\n            type=\"button\"\n            className=\"state-layer flex items-center gap-1.5 rounded-full border border-border bg-background py-1 pr-2 pl-2.5 text-foreground\"\n          >\n            <span aria-hidden=\"true\" style={{ backgroundColor: color }} className=\"rounded-0.5 size-2\" />\n            <Txt as=\"span\" variant=\"column\" className=\"block\">\n              {selectionLabel(signalCatalog, selection)}\n            </Txt>\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n          </button>\n        );\n      })}\n      <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n        {filterSummary({ selections, filteredTraceCount, totalTraceCount, isUnavailable })}\n      </Txt>\n      {!isUnavailable && filteredTraceCount !== undefined && latestSelection ? (\n        <Button\n          icon={<Eye />}\n          aria-label={\n            latestSelection.kind === 'theme'\n              ? `View theme details for ${latestSelection.label}`\n              : `View noise details for ${signalLabel(signalCatalog, latestSelection.signalName)}`\n          }\n          onClick={() => onViewDetails(latestSelection)}\n          size=\"sm\"\n          type=\"button\"\n          variant=\"ghost\"\n        >\n          Details →\n        </Button>\n      ) : null}\n      {selections.length > 1 ? (\n        <Button icon={<X />} onClick={onClear} size=\"sm\" type=\"button\" variant=\"ghost\">\n          Clear all\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,SAAS,eAAe,SAAwC,WAA2B;CACzF,OAAO,GAAGA,qCAAAA,YAAY,SAAS,UAAU,UAAU,EAAE,KAAK,UAAU,SAAS,UAAU,UAAU,QAAQ;AAC3G;AAEA,SAAS,cAAc,EACrB,YACA,oBACA,iBACA,iBAMC;CACD,IAAI,eAAe,OAAO;CAC1B,IAAI,uBAAuB,KAAA,GAAW,OAAO;CAC7C,MAAM,gBAAgB,WAAW,WAAW,IAAI,WAAW,KAAK,KAAA;CAChE,IAAI,eAAe,SAAS,SAC1B,OAAO,eAAe,mBAAmB,MAAM,gBAAgB;CAEjE,IAAI,eACF,OAAO,eAAe,mBAAmB,MAAM,gBAAgB;CAEjE,OAAO,eAAe,mBAAmB,MAAM,gBAAgB;AACjE;AAEA,SAAgB,kBAAkB,EAChC,YACA,oBACA,iBACA,eACA,eACA,UACA,WASC;CACD,MAAM,EAAE,kBAAkBC,0CAAAA,qBAAqB;CAC/C,MAAM,SAAS,WAAW,KAAI,cAAaC,iCAAAA,eAAe,UAAU,UAAU,CAAC;CAC/E,MAAM,kBAAkB,WAAW,GAAG,EAAE;CACxC,MAAM,iBAAiB,0BAA0B,OAAO,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,GAAG,OAAO,GAAG,IAAI,OAAO,KAAK;CAEtH,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EACE,cAAW;EACX,WAAU;EACV,OAAO;GACL,iBAAiB,8CAA8C;GAC/D,gBAAgB;EAClB;EANF,UAAA;GAQG,WAAW,KAAK,WAAW,UAAU;IACpC,MAAM,QAAQ,OAAO;IACrB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;KAEE,cACE,WAAW,WAAW,IAClB,SAAS,UAAU,KAAK,WACxB,gBAAgB,eAAe,eAAe,SAAS;KAE7D,eAAe,SAAS,UAAU,UAAU;KAC5C,MAAK;KACL,WAAU;KATZ,UAAA;MAWE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;OAAM,eAAY;OAAO,OAAO,EAAE,iBAAiB,MAAM;OAAG,WAAU;MAAsB,CAAA;MAC5F,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;OAAK,IAAG;OAAO,SAAQ;OAAS,WAAU;OACvC,UAAA,eAAe,eAAe,SAAS;MACrC,CAAA;MACL,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,GAAD;OAAG,eAAY;OAAO,WAAU;MAAY,CAAA;KACtC;IAfD,GAAA,UAAU,UAeT;GAEZ,CAAC;GACD,iBAAA,GAAA,kBAAA,IAAA,CAACD,YAAAA,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAU,MAAK;IACnC,UAAA,cAAc;KAAE;KAAY;KAAoB;KAAiB;IAAc,CAAC;GAC9E,CAAA;GACJ,CAAC,iBAAiB,uBAAuB,KAAA,KAAa,kBACrD,iBAAA,GAAA,kBAAA,IAAA,CAACE,eAAAA,QAAD;IACE,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,KAAD,CAAM,CAAA;IACZ,cACE,gBAAgB,SAAS,UACrB,0BAA0B,gBAAgB,UAC1C,0BAA0BN,qCAAAA,YAAY,eAAe,gBAAgB,UAAU;IAErF,eAAe,cAAc,eAAe;IAC5C,MAAK;IACL,MAAK;IACL,SAAQ;IACT,UAAA;GAEO,CAAA,IACN;GACH,WAAW,SAAS,IACnB,iBAAA,GAAA,kBAAA,IAAA,CAACK,eAAAA,QAAD;IAAQ,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACD,aAAAA,GAAD,CAAI,CAAA;IAAG,SAAS;IAAS,MAAK;IAAK,MAAK;IAAS,SAAQ;IAAQ,UAAA;GAEvE,CAAA,IACN;EACG;;AAEb"}
+{"version":3,"file":"theme-filter-banner.cjs.js","names":["useTraceIntelligence","getSignalColor","signalLabel","Txt","Metadata","X","Button","Eye"],"sources":["../../../src/ee/signals/theme-filter-banner.tsx"],"sourcesContent":["import { X, Eye } from 'lucide-react';\nimport { getSignalColor } from './signal-colors';\nimport { signalLabel } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { useTraceIntelligence } from './use-trace-intelligence';\nimport { Button } from '@/ds/components/Button';\nimport { Metadata } from '@/ds/components/Metadata';\nimport { Txt } from '@/ds/components/Txt';\n\nfunction filterSummary({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n}) {\n  if (isUnavailable) return 'Filters unavailable for this snapshot';\n  if (filteredTraceCount === undefined) return 'Loading matching traces…';\n  const onlySelection = selections.length === 1 ? selections[0] : undefined;\n  if (onlySelection?.kind === 'noise') {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces assigned to Noise`;\n  }\n  if (onlySelection) {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that flow through this theme`;\n  }\n  return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that match these filters`;\n}\n\nexport function ThemeFilterBanner({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n  onViewDetails,\n  onRemove,\n  onClear,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n  onViewDetails: (selection: ThemeSelection) => void;\n  onRemove: (signalName: ThemeSelection['signalName']) => void;\n  onClear: () => void;\n}) {\n  const { signalCatalog } = useTraceIntelligence();\n  const colors = selections.map(selection => getSignalColor(selection.signalName));\n  const latestSelection = selections.at(-1);\n  const borderGradient = `linear-gradient(90deg, ${colors.length > 1 ? colors.join(', ') : `${colors[0]}, ${colors[0]}`})`;\n\n  return (\n    <section\n      aria-label=\"Active theme drill-in\"\n      className=\"relative flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-transparent px-3 py-2\"\n      style={{\n        backgroundImage: `linear-gradient(var(--card), var(--card)), ${borderGradient}`,\n        backgroundClip: 'padding-box, border-box',\n      }}\n    >\n      {selections.map((selection, index) => {\n        const color = colors[index];\n        const signalTitle = signalLabel(signalCatalog, selection.signalName);\n        const selectionName = selection.kind === 'theme' ? selection.label : 'Noise';\n        return (\n          <button\n            key={selection.signalName}\n            aria-label={\n              selections.length === 1\n                ? `Clear ${selection.kind} filter`\n                : `Clear filter ${signalTitle}: ${selectionName}`\n            }\n            onClick={() => onRemove(selection.signalName)}\n            type=\"button\"\n            className=\"state-layer flex items-center gap-1.5 rounded-full border border-border bg-background py-1 pr-2 pl-2.5 text-foreground\"\n          >\n            <span aria-hidden=\"true\" style={{ backgroundColor: color }} className=\"rounded-0.5 size-2\" />\n            <Txt as=\"span\" variant=\"column\" className=\"block\">\n              <Metadata>\n                <Metadata.Item>{signalTitle}</Metadata.Item>\n                <Metadata.Item>{selectionName}</Metadata.Item>\n              </Metadata>\n            </Txt>\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n          </button>\n        );\n      })}\n      <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n        {filterSummary({ selections, filteredTraceCount, totalTraceCount, isUnavailable })}\n      </Txt>\n      {!isUnavailable && filteredTraceCount !== undefined && latestSelection ? (\n        <Button\n          icon={<Eye />}\n          aria-label={\n            latestSelection.kind === 'theme'\n              ? `View theme details for ${latestSelection.label}`\n              : `View noise details for ${signalLabel(signalCatalog, latestSelection.signalName)}`\n          }\n          onClick={() => onViewDetails(latestSelection)}\n          size=\"sm\"\n          type=\"button\"\n          variant=\"ghost\"\n        >\n          Details →\n        </Button>\n      ) : null}\n      {selections.length > 1 ? (\n        <Button icon={<X />} onClick={onClear} size=\"sm\" type=\"button\" variant=\"ghost\">\n          Clear all\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/ee/signals/theme-filter-banner.es.js

@@ -1,14 +1,12 @@
-import { t as Button } from "../../Button-CLXTbAY8.js";
-import { t as Txt } from "../../Txt-BM6TVV_c.js";
 import { getSignalColor } from "./signal-colors.es.js";
 import { signalLabel } from "./signal-formatting.es.js";
 import { useTraceIntelligence } from "./use-trace-intelligence.es.js";
+import { t as Button } from "../../Button-Bi7aXd_G.js";
+import { t as Metadata } from "../../Metadata-DlVgmRTA.js";
+import { t as Txt } from "../../Txt-5efBsb2p.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Eye, X } from "lucide-react";
 // src/ee/signals/theme-filter-banner.tsx
-function selectionLabel(catalog, selection) {
-	return `${signalLabel(catalog, selection.signalName)} · ${selection.kind === "theme" ? selection.label : "Noise"}`;
-}
 function filterSummary({ selections, filteredTraceCount, totalTraceCount, isUnavailable }) {
 	if (isUnavailable) return "Filters unavailable for this snapshot";
 	if (filteredTraceCount === void 0) return "Loading matching traces…";
@@ -32,8 +30,10 @@ function ThemeFilterBanner({ selections, filteredTraceCount, totalTraceCount, is
 		children: [
 			selections.map((selection, index) => {
 				const color = colors[index];
+				const signalTitle = signalLabel(signalCatalog, selection.signalName);
+				const selectionName = selection.kind === "theme" ? selection.label : "Noise";
 				return /* @__PURE__ */ jsxs("button", {
-					"aria-label": selections.length === 1 ? `Clear ${selection.kind} filter` : `Clear filter ${selectionLabel(signalCatalog, selection)}`,
+					"aria-label": selections.length === 1 ? `Clear ${selection.kind} filter` : `Clear filter ${signalTitle}: ${selectionName}`,
 					onClick: () => onRemove(selection.signalName),
 					type: "button",
 					className: "state-layer flex items-center gap-1.5 rounded-full border border-border bg-background py-1 pr-2 pl-2.5 text-foreground",
@@ -47,7 +47,7 @@ function ThemeFilterBanner({ selections, filteredTraceCount, totalTraceCount, is
 							as: "span",
 							variant: "column",
 							className: "block",
-							children: selectionLabel(signalCatalog, selection)
+							children: /* @__PURE__ */ jsxs(Metadata, { children: [/* @__PURE__ */ jsx(Metadata.Item, { children: signalTitle }), /* @__PURE__ */ jsx(Metadata.Item, { children: selectionName })] })
 						}),
 						/* @__PURE__ */ jsx(X, {
 							"aria-hidden": "true",

package/dist/ee/signals/theme-filter-banner.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-filter-banner.es.js","names":[],"sources":["../../../src/ee/signals/theme-filter-banner.tsx"],"sourcesContent":["import type { SignalCatalogEntry } from '@mastra/client-js';\nimport { X, Eye } from 'lucide-react';\nimport { getSignalColor } from './signal-colors';\nimport { signalLabel } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { useTraceIntelligence } from './use-trace-intelligence';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\n\nfunction selectionLabel(catalog: readonly SignalCatalogEntry[], selection: ThemeSelection) {\n  return `${signalLabel(catalog, selection.signalName)} · ${selection.kind === 'theme' ? selection.label : 'Noise'}`;\n}\n\nfunction filterSummary({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n}) {\n  if (isUnavailable) return 'Filters unavailable for this snapshot';\n  if (filteredTraceCount === undefined) return 'Loading matching traces…';\n  const onlySelection = selections.length === 1 ? selections[0] : undefined;\n  if (onlySelection?.kind === 'noise') {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces assigned to Noise`;\n  }\n  if (onlySelection) {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that flow through this theme`;\n  }\n  return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that match these filters`;\n}\n\nexport function ThemeFilterBanner({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n  onViewDetails,\n  onRemove,\n  onClear,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n  onViewDetails: (selection: ThemeSelection) => void;\n  onRemove: (signalName: ThemeSelection['signalName']) => void;\n  onClear: () => void;\n}) {\n  const { signalCatalog } = useTraceIntelligence();\n  const colors = selections.map(selection => getSignalColor(selection.signalName));\n  const latestSelection = selections.at(-1);\n  const borderGradient = `linear-gradient(90deg, ${colors.length > 1 ? colors.join(', ') : `${colors[0]}, ${colors[0]}`})`;\n\n  return (\n    <section\n      aria-label=\"Active theme drill-in\"\n      className=\"relative flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-transparent px-3 py-2\"\n      style={{\n        backgroundImage: `linear-gradient(var(--card), var(--card)), ${borderGradient}`,\n        backgroundClip: 'padding-box, border-box',\n      }}\n    >\n      {selections.map((selection, index) => {\n        const color = colors[index];\n        return (\n          <button\n            key={selection.signalName}\n            aria-label={\n              selections.length === 1\n                ? `Clear ${selection.kind} filter`\n                : `Clear filter ${selectionLabel(signalCatalog, selection)}`\n            }\n            onClick={() => onRemove(selection.signalName)}\n            type=\"button\"\n            className=\"state-layer flex items-center gap-1.5 rounded-full border border-border bg-background py-1 pr-2 pl-2.5 text-foreground\"\n          >\n            <span aria-hidden=\"true\" style={{ backgroundColor: color }} className=\"rounded-0.5 size-2\" />\n            <Txt as=\"span\" variant=\"column\" className=\"block\">\n              {selectionLabel(signalCatalog, selection)}\n            </Txt>\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n          </button>\n        );\n      })}\n      <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n        {filterSummary({ selections, filteredTraceCount, totalTraceCount, isUnavailable })}\n      </Txt>\n      {!isUnavailable && filteredTraceCount !== undefined && latestSelection ? (\n        <Button\n          icon={<Eye />}\n          aria-label={\n            latestSelection.kind === 'theme'\n              ? `View theme details for ${latestSelection.label}`\n              : `View noise details for ${signalLabel(signalCatalog, latestSelection.signalName)}`\n          }\n          onClick={() => onViewDetails(latestSelection)}\n          size=\"sm\"\n          type=\"button\"\n          variant=\"ghost\"\n        >\n          Details →\n        </Button>\n      ) : null}\n      {selections.length > 1 ? (\n        <Button icon={<X />} onClick={onClear} size=\"sm\" type=\"button\" variant=\"ghost\">\n          Clear all\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;AASA,SAAS,eAAe,SAAwC,WAA2B;CACzF,OAAO,GAAG,YAAY,SAAS,UAAU,UAAU,EAAE,KAAK,UAAU,SAAS,UAAU,UAAU,QAAQ;AAC3G;AAEA,SAAS,cAAc,EACrB,YACA,oBACA,iBACA,iBAMC;CACD,IAAI,eAAe,OAAO;CAC1B,IAAI,uBAAuB,KAAA,GAAW,OAAO;CAC7C,MAAM,gBAAgB,WAAW,WAAW,IAAI,WAAW,KAAK,KAAA;CAChE,IAAI,eAAe,SAAS,SAC1B,OAAO,eAAe,mBAAmB,MAAM,gBAAgB;CAEjE,IAAI,eACF,OAAO,eAAe,mBAAmB,MAAM,gBAAgB;CAEjE,OAAO,eAAe,mBAAmB,MAAM,gBAAgB;AACjE;AAEA,SAAgB,kBAAkB,EAChC,YACA,oBACA,iBACA,eACA,eACA,UACA,WASC;CACD,MAAM,EAAE,kBAAkB,qBAAqB;CAC/C,MAAM,SAAS,WAAW,KAAI,cAAa,eAAe,UAAU,UAAU,CAAC;CAC/E,MAAM,kBAAkB,WAAW,GAAG,EAAE;CACxC,MAAM,iBAAiB,0BAA0B,OAAO,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,GAAG,OAAO,GAAG,IAAI,OAAO,KAAK;CAEtH,OACE,qBAAC,WAAD;EACE,cAAW;EACX,WAAU;EACV,OAAO;GACL,iBAAiB,8CAA8C;GAC/D,gBAAgB;EAClB;EANF,UAAA;GAQG,WAAW,KAAK,WAAW,UAAU;IACpC,MAAM,QAAQ,OAAO;IACrB,OACE,qBAAC,UAAD;KAEE,cACE,WAAW,WAAW,IAClB,SAAS,UAAU,KAAK,WACxB,gBAAgB,eAAe,eAAe,SAAS;KAE7D,eAAe,SAAS,UAAU,UAAU;KAC5C,MAAK;KACL,WAAU;KATZ,UAAA;MAWE,oBAAC,QAAD;OAAM,eAAY;OAAO,OAAO,EAAE,iBAAiB,MAAM;OAAG,WAAU;MAAsB,CAAA;MAC5F,oBAAC,KAAD;OAAK,IAAG;OAAO,SAAQ;OAAS,WAAU;OACvC,UAAA,eAAe,eAAe,SAAS;MACrC,CAAA;MACL,oBAAC,GAAD;OAAG,eAAY;OAAO,WAAU;MAAY,CAAA;KACtC;IAfD,GAAA,UAAU,UAeT;GAEZ,CAAC;GACD,oBAAC,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAU,MAAK;IACnC,UAAA,cAAc;KAAE;KAAY;KAAoB;KAAiB;IAAc,CAAC;GAC9E,CAAA;GACJ,CAAC,iBAAiB,uBAAuB,KAAA,KAAa,kBACrD,oBAAC,QAAD;IACE,MAAM,oBAAC,KAAD,CAAM,CAAA;IACZ,cACE,gBAAgB,SAAS,UACrB,0BAA0B,gBAAgB,UAC1C,0BAA0B,YAAY,eAAe,gBAAgB,UAAU;IAErF,eAAe,cAAc,eAAe;IAC5C,MAAK;IACL,MAAK;IACL,SAAQ;IACT,UAAA;GAEO,CAAA,IACN;GACH,WAAW,SAAS,IACnB,oBAAC,QAAD;IAAQ,MAAM,oBAAC,GAAD,CAAI,CAAA;IAAG,SAAS;IAAS,MAAK;IAAK,MAAK;IAAS,SAAQ;IAAQ,UAAA;GAEvE,CAAA,IACN;EACG;;AAEb"}
+{"version":3,"file":"theme-filter-banner.es.js","names":[],"sources":["../../../src/ee/signals/theme-filter-banner.tsx"],"sourcesContent":["import { X, Eye } from 'lucide-react';\nimport { getSignalColor } from './signal-colors';\nimport { signalLabel } from './signal-formatting';\nimport type { ThemeSelection } from './theme-drilldown-data';\nimport { useTraceIntelligence } from './use-trace-intelligence';\nimport { Button } from '@/ds/components/Button';\nimport { Metadata } from '@/ds/components/Metadata';\nimport { Txt } from '@/ds/components/Txt';\n\nfunction filterSummary({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n}) {\n  if (isUnavailable) return 'Filters unavailable for this snapshot';\n  if (filteredTraceCount === undefined) return 'Loading matching traces…';\n  const onlySelection = selections.length === 1 ? selections[0] : undefined;\n  if (onlySelection?.kind === 'noise') {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces assigned to Noise`;\n  }\n  if (onlySelection) {\n    return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that flow through this theme`;\n  }\n  return `Showing the ${filteredTraceCount} of ${totalTraceCount} traces that match these filters`;\n}\n\nexport function ThemeFilterBanner({\n  selections,\n  filteredTraceCount,\n  totalTraceCount,\n  isUnavailable,\n  onViewDetails,\n  onRemove,\n  onClear,\n}: {\n  selections: ThemeSelection[];\n  filteredTraceCount?: number;\n  totalTraceCount: number;\n  isUnavailable?: boolean;\n  onViewDetails: (selection: ThemeSelection) => void;\n  onRemove: (signalName: ThemeSelection['signalName']) => void;\n  onClear: () => void;\n}) {\n  const { signalCatalog } = useTraceIntelligence();\n  const colors = selections.map(selection => getSignalColor(selection.signalName));\n  const latestSelection = selections.at(-1);\n  const borderGradient = `linear-gradient(90deg, ${colors.length > 1 ? colors.join(', ') : `${colors[0]}, ${colors[0]}`})`;\n\n  return (\n    <section\n      aria-label=\"Active theme drill-in\"\n      className=\"relative flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-transparent px-3 py-2\"\n      style={{\n        backgroundImage: `linear-gradient(var(--card), var(--card)), ${borderGradient}`,\n        backgroundClip: 'padding-box, border-box',\n      }}\n    >\n      {selections.map((selection, index) => {\n        const color = colors[index];\n        const signalTitle = signalLabel(signalCatalog, selection.signalName);\n        const selectionName = selection.kind === 'theme' ? selection.label : 'Noise';\n        return (\n          <button\n            key={selection.signalName}\n            aria-label={\n              selections.length === 1\n                ? `Clear ${selection.kind} filter`\n                : `Clear filter ${signalTitle}: ${selectionName}`\n            }\n            onClick={() => onRemove(selection.signalName)}\n            type=\"button\"\n            className=\"state-layer flex items-center gap-1.5 rounded-full border border-border bg-background py-1 pr-2 pl-2.5 text-foreground\"\n          >\n            <span aria-hidden=\"true\" style={{ backgroundColor: color }} className=\"rounded-0.5 size-2\" />\n            <Txt as=\"span\" variant=\"column\" className=\"block\">\n              <Metadata>\n                <Metadata.Item>{signalTitle}</Metadata.Item>\n                <Metadata.Item>{selectionName}</Metadata.Item>\n              </Metadata>\n            </Txt>\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n          </button>\n        );\n      })}\n      <Txt as=\"span\" variant=\"caption\" tone=\"muted\">\n        {filterSummary({ selections, filteredTraceCount, totalTraceCount, isUnavailable })}\n      </Txt>\n      {!isUnavailable && filteredTraceCount !== undefined && latestSelection ? (\n        <Button\n          icon={<Eye />}\n          aria-label={\n            latestSelection.kind === 'theme'\n              ? `View theme details for ${latestSelection.label}`\n              : `View noise details for ${signalLabel(signalCatalog, latestSelection.signalName)}`\n          }\n          onClick={() => onViewDetails(latestSelection)}\n          size=\"sm\"\n          type=\"button\"\n          variant=\"ghost\"\n        >\n          Details →\n        </Button>\n      ) : null}\n      {selections.length > 1 ? (\n        <Button icon={<X />} onClick={onClear} size=\"sm\" type=\"button\" variant=\"ghost\">\n          Clear all\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,SAAS,cAAc,EACrB,YACA,oBACA,iBACA,iBAMC;CACD,IAAI,eAAe,OAAO;CAC1B,IAAI,uBAAuB,KAAA,GAAW,OAAO;CAC7C,MAAM,gBAAgB,WAAW,WAAW,IAAI,WAAW,KAAK,KAAA;CAChE,IAAI,eAAe,SAAS,SAC1B,OAAO,eAAe,mBAAmB,MAAM,gBAAgB;CAEjE,IAAI,eACF,OAAO,eAAe,mBAAmB,MAAM,gBAAgB;CAEjE,OAAO,eAAe,mBAAmB,MAAM,gBAAgB;AACjE;AAEA,SAAgB,kBAAkB,EAChC,YACA,oBACA,iBACA,eACA,eACA,UACA,WASC;CACD,MAAM,EAAE,kBAAkB,qBAAqB;CAC/C,MAAM,SAAS,WAAW,KAAI,cAAa,eAAe,UAAU,UAAU,CAAC;CAC/E,MAAM,kBAAkB,WAAW,GAAG,EAAE;CACxC,MAAM,iBAAiB,0BAA0B,OAAO,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,GAAG,OAAO,GAAG,IAAI,OAAO,KAAK;CAEtH,OACE,qBAAC,WAAD;EACE,cAAW;EACX,WAAU;EACV,OAAO;GACL,iBAAiB,8CAA8C;GAC/D,gBAAgB;EAClB;EANF,UAAA;GAQG,WAAW,KAAK,WAAW,UAAU;IACpC,MAAM,QAAQ,OAAO;IACrB,MAAM,cAAc,YAAY,eAAe,UAAU,UAAU;IACnE,MAAM,gBAAgB,UAAU,SAAS,UAAU,UAAU,QAAQ;IACrE,OACE,qBAAC,UAAD;KAEE,cACE,WAAW,WAAW,IAClB,SAAS,UAAU,KAAK,WACxB,gBAAgB,YAAY,IAAI;KAEtC,eAAe,SAAS,UAAU,UAAU;KAC5C,MAAK;KACL,WAAU;KATZ,UAAA;MAWE,oBAAC,QAAD;OAAM,eAAY;OAAO,OAAO,EAAE,iBAAiB,MAAM;OAAG,WAAU;MAAsB,CAAA;MAC5F,oBAAC,KAAD;OAAK,IAAG;OAAO,SAAQ;OAAS,WAAU;OACxC,UAAA,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,SAAS,MAAV,EAAA,UAAgB,YAA2B,CAAA,GAC3C,oBAAC,SAAS,MAAV,EAAA,UAAgB,cAA6B,CAAA,CACrC,EAAA,CAAA;MACP,CAAA;MACL,oBAAC,GAAD;OAAG,eAAY;OAAO,WAAU;MAAY,CAAA;KACtC;IAlBD,GAAA,UAAU,UAkBT;GAEZ,CAAC;GACD,oBAAC,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAU,MAAK;IACnC,UAAA,cAAc;KAAE;KAAY;KAAoB;KAAiB;IAAc,CAAC;GAC9E,CAAA;GACJ,CAAC,iBAAiB,uBAAuB,KAAA,KAAa,kBACrD,oBAAC,QAAD;IACE,MAAM,oBAAC,KAAD,CAAM,CAAA;IACZ,cACE,gBAAgB,SAAS,UACrB,0BAA0B,gBAAgB,UAC1C,0BAA0B,YAAY,eAAe,gBAAgB,UAAU;IAErF,eAAe,cAAc,eAAe;IAC5C,MAAK;IACL,MAAK;IACL,SAAQ;IACT,UAAA;GAEO,CAAA,IACN;GACH,WAAW,SAAS,IACnB,oBAAC,QAAD;IAAQ,MAAM,oBAAC,GAAD,CAAI,CAAA;IAAG,SAAS;IAAS,MAAK;IAAK,MAAK;IAAS,SAAQ;IAAQ,UAAA;GAEvE,CAAA,IACN;EACG;;AAEb"}

package/dist/ee/signals/theme-lifelines.cjs.js

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Txt = require("../../Txt-BnoSqxKE.cjs");
-const require_ee_signals_sankey_signals_data = require("./sankey-signals-data.cjs.js");
 const require_ee_signals_hooks_use_theme_flows = require("./hooks/use-theme-flows.cjs.js");
+const require_ee_signals_signal_lifelines = require("./signal-lifelines.cjs.js");
 const require_ee_signals_signals_error_state = require("./signals-error-state.cjs.js");
 const require_ee_signals_signals_loading_skeleton = require("./signals-loading-skeleton.cjs.js");
-const require_ee_signals_snapshot_timeline_data = require("./snapshot-timeline-data.cjs.js");
+const require_ee_signals_snapshot_summary = require("./snapshot-summary.cjs.js");
 const require_ee_signals_snapshot_timeline = require("./snapshot-timeline.cjs.js");
-const require_ee_signals_signal_lifelines = require("./signal-lifelines.cjs.js");
+const require_ee_signals_snapshot_timeline_data = require("./snapshot-timeline-data.cjs.js");
+const require_Txt = require("../../Txt-_00wWxTd.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ee/signals/theme-lifelines.tsx
 /**
@@ -54,7 +54,10 @@ function ThemeLifelines({ entityId, entityType, signalNames, snapshots, totalSna
 				variant: "caption",
 				tone: "muted",
 				"data-testid": "snapshot-summary",
-				children: require_ee_signals_sankey_signals_data.snapshotSummaryLabel(snapshots[selectedIndex], flows[selectedIndex])
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ee_signals_snapshot_summary.SnapshotSummary, {
+					snapshot: snapshots[selectedIndex],
+					flow: flows[selectedIndex]
+				})
 			}) : null,
 			signalNames.map((signalName) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ee_signals_signal_lifelines.SignalLifelines, {
 				signalName,

package/dist/ee/signals/theme-lifelines.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-lifelines.cjs.js","names":["useThemeFlows","timelineTickPositions","SignalsErrorState","SignalsFrameLoadingSkeleton","TimelineTrack","Txt","snapshotSummaryLabel","SignalLifelines"],"sources":["../../../src/ee/signals/theme-lifelines.tsx"],"sourcesContent":["import { useThemeFlows } from './hooks/use-theme-flows';\nimport { snapshotSummaryLabel } from './sankey-signals-data';\nimport { SignalLifelines } from './signal-lifelines';\nimport { SignalsErrorState } from './signals-error-state';\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';\nimport { Txt } from '@/ds/components/Txt';\n\n/**\n * Lifelines mode: every theme holds a fixed row while landmarks run left to\n * right on the shared time axis, so persistent themes read as spines and\n * transient ones as short-lived segments — change over time without replay.\n */\nexport function ThemeLifelines({\n  entityId,\n  entityType,\n  signalNames,\n  snapshots,\n  totalSnapshots,\n  selectedIndex,\n  onSnapshotSelect,\n  onThemeSelect,\n}: {\n  entityId: string;\n  entityType: string;\n  signalNames: TraceSignalName[];\n  snapshots: ThemeSnapshot[];\n  totalSnapshots: number;\n  selectedIndex: number;\n  onSnapshotSelect: (index: number) => void;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\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 failedFlowQueries = flowQueries.filter(query => query.isError);\n  const positions = timelineTickPositions(snapshots);\n\n  if (failedFlowQueries.length > 0) {\n    return (\n      <SignalsErrorState\n        message=\"Unable to load theme lifelines.\"\n        onRetry={() => void Promise.all(failedFlowQueries.map(query => query.refetch()))}\n      />\n    );\n  }\n\n  if (!flows.some(flow => flow !== undefined)) {\n    return (\n      <section aria-label=\"Theme lifelines\">\n        <SignalsFrameLoadingSkeleton />\n      </section>\n    );\n  }\n\n  return (\n    <section aria-label=\"Theme lifelines\" className=\"space-y-5\">\n      {/* Spacers mirror each row's label and count columns so the shared track aligns with the rows. */}\n      <div className=\"flex items-center gap-3\">\n        <span aria-hidden=\"true\" className=\"w-52 shrink-0\" />\n        <TimelineTrack\n          snapshots={snapshots}\n          totalCount={totalSnapshots}\n          markers={new Map<number, TimelineMarkerKind>([[selectedIndex, 'selected']])}\n          onTickSelect={onSnapshotSelect}\n        />\n        <span aria-hidden=\"true\" className=\"w-9 shrink-0\" />\n      </div>\n      {snapshots[selectedIndex] ? (\n        <Txt variant=\"caption\" tone=\"muted\" data-testid=\"snapshot-summary\">\n          {snapshotSummaryLabel(snapshots[selectedIndex], flows[selectedIndex])}\n        </Txt>\n      ) : null}\n      {signalNames.map(signalName => (\n        <SignalLifelines\n          key={signalName}\n          signalName={signalName}\n          flows={flows}\n          snapshots={snapshots}\n          positions={positions}\n          onThemeSelect={onThemeSelect}\n        />\n      ))}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,SAAgB,eAAe,EAC7B,UACA,YACA,aACA,WACA,gBACA,eACA,kBACA,iBAUC;CACD,MAAM,cAAcA,yCAAAA,cAClB,UACA,YACA,aACA,UAAU,KAAI,aAAY,SAAS,UAAU,CAC/C;CACA,MAAM,QAAQ,YAAY,KAAI,UAAS,MAAM,IAAI;CACjD,MAAM,oBAAoB,YAAY,QAAO,UAAS,MAAM,OAAO;CACnE,MAAM,YAAYC,0CAAAA,sBAAsB,SAAS;CAEjD,IAAI,kBAAkB,SAAS,GAC7B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,uCAAAA,mBAAD;EACE,SAAQ;EACR,eAAe,KAAK,QAAQ,IAAI,kBAAkB,KAAI,UAAS,MAAM,QAAQ,CAAC,CAAC;CAChF,CAAA;CAIL,IAAI,CAAC,MAAM,MAAK,SAAQ,SAAS,KAAA,CAAS,GACxC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAS,cAAW;EAClB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,4CAAAA,6BAAD,CAA8B,CAAA;CACvB,CAAA;CAIb,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EAAS,cAAW;EAAkB,WAAU;EAAhD,UAAA;GAEE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,eAAY;MAAO,WAAU;KAAiB,CAAA;KACpD,iBAAA,GAAA,kBAAA,IAAA,CAACC,qCAAAA,eAAD;MACa;MACX,YAAY;MACZ,yBAAS,IAAI,IAAgC,CAAC,CAAC,eAAe,UAAU,CAAC,CAAC;MAC1E,cAAc;KACf,CAAA;KACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,eAAY;MAAO,WAAU;KAAgB,CAAA;IAChD;;GACJ,UAAU,iBACT,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,eAAY;IAC7C,UAAAC,uCAAAA,qBAAqB,UAAU,gBAAgB,MAAM,cAAc;GACjE,CAAA,IACH;GACH,YAAY,KAAI,eACf,iBAAA,GAAA,kBAAA,IAAA,CAACC,oCAAAA,iBAAD;IAEc;IACL;IACI;IACA;IACI;GAChB,GANM,UAMN,CACF;EACM;;AAEb"}
+{"version":3,"file":"theme-lifelines.cjs.js","names":["useThemeFlows","timelineTickPositions","SignalsErrorState","SignalsFrameLoadingSkeleton","TimelineTrack","Txt","SnapshotSummary","SignalLifelines"],"sources":["../../../src/ee/signals/theme-lifelines.tsx"],"sourcesContent":["import { useThemeFlows } from './hooks/use-theme-flows';\nimport { SignalLifelines } from './signal-lifelines';\nimport { SignalsErrorState } from './signals-error-state';\nimport { SignalsFrameLoadingSkeleton } from './signals-loading-skeleton';\nimport { SnapshotSummary } from './snapshot-summary';\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';\nimport { Txt } from '@/ds/components/Txt';\n\n/**\n * Lifelines mode: every theme holds a fixed row while landmarks run left to\n * right on the shared time axis, so persistent themes read as spines and\n * transient ones as short-lived segments — change over time without replay.\n */\nexport function ThemeLifelines({\n  entityId,\n  entityType,\n  signalNames,\n  snapshots,\n  totalSnapshots,\n  selectedIndex,\n  onSnapshotSelect,\n  onThemeSelect,\n}: {\n  entityId: string;\n  entityType: string;\n  signalNames: TraceSignalName[];\n  snapshots: ThemeSnapshot[];\n  totalSnapshots: number;\n  selectedIndex: number;\n  onSnapshotSelect: (index: number) => void;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\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 failedFlowQueries = flowQueries.filter(query => query.isError);\n  const positions = timelineTickPositions(snapshots);\n\n  if (failedFlowQueries.length > 0) {\n    return (\n      <SignalsErrorState\n        message=\"Unable to load theme lifelines.\"\n        onRetry={() => void Promise.all(failedFlowQueries.map(query => query.refetch()))}\n      />\n    );\n  }\n\n  if (!flows.some(flow => flow !== undefined)) {\n    return (\n      <section aria-label=\"Theme lifelines\">\n        <SignalsFrameLoadingSkeleton />\n      </section>\n    );\n  }\n\n  return (\n    <section aria-label=\"Theme lifelines\" className=\"space-y-5\">\n      {/* Spacers mirror each row's label and count columns so the shared track aligns with the rows. */}\n      <div className=\"flex items-center gap-3\">\n        <span aria-hidden=\"true\" className=\"w-52 shrink-0\" />\n        <TimelineTrack\n          snapshots={snapshots}\n          totalCount={totalSnapshots}\n          markers={new Map<number, TimelineMarkerKind>([[selectedIndex, 'selected']])}\n          onTickSelect={onSnapshotSelect}\n        />\n        <span aria-hidden=\"true\" className=\"w-9 shrink-0\" />\n      </div>\n      {snapshots[selectedIndex] ? (\n        <Txt variant=\"caption\" tone=\"muted\" data-testid=\"snapshot-summary\">\n          <SnapshotSummary snapshot={snapshots[selectedIndex]} flow={flows[selectedIndex]} />\n        </Txt>\n      ) : null}\n      {signalNames.map(signalName => (\n        <SignalLifelines\n          key={signalName}\n          signalName={signalName}\n          flows={flows}\n          snapshots={snapshots}\n          positions={positions}\n          onThemeSelect={onThemeSelect}\n        />\n      ))}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,SAAgB,eAAe,EAC7B,UACA,YACA,aACA,WACA,gBACA,eACA,kBACA,iBAUC;CACD,MAAM,cAAcA,yCAAAA,cAClB,UACA,YACA,aACA,UAAU,KAAI,aAAY,SAAS,UAAU,CAC/C;CACA,MAAM,QAAQ,YAAY,KAAI,UAAS,MAAM,IAAI;CACjD,MAAM,oBAAoB,YAAY,QAAO,UAAS,MAAM,OAAO;CACnE,MAAM,YAAYC,0CAAAA,sBAAsB,SAAS;CAEjD,IAAI,kBAAkB,SAAS,GAC7B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,uCAAAA,mBAAD;EACE,SAAQ;EACR,eAAe,KAAK,QAAQ,IAAI,kBAAkB,KAAI,UAAS,MAAM,QAAQ,CAAC,CAAC;CAChF,CAAA;CAIL,IAAI,CAAC,MAAM,MAAK,SAAQ,SAAS,KAAA,CAAS,GACxC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAS,cAAW;EAClB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,4CAAAA,6BAAD,CAA8B,CAAA;CACvB,CAAA;CAIb,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EAAS,cAAW;EAAkB,WAAU;EAAhD,UAAA;GAEE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,eAAY;MAAO,WAAU;KAAiB,CAAA;KACpD,iBAAA,GAAA,kBAAA,IAAA,CAACC,qCAAAA,eAAD;MACa;MACX,YAAY;MACZ,yBAAS,IAAI,IAAgC,CAAC,CAAC,eAAe,UAAU,CAAC,CAAC;MAC1E,cAAc;KACf,CAAA;KACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,eAAY;MAAO,WAAU;KAAgB,CAAA;IAChD;;GACJ,UAAU,iBACT,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,eAAY;IAC9C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oCAAAA,iBAAD;KAAiB,UAAU,UAAU;KAAgB,MAAM,MAAM;IAAiB,CAAA;GAC/E,CAAA,IACH;GACH,YAAY,KAAI,eACf,iBAAA,GAAA,kBAAA,IAAA,CAACC,oCAAAA,iBAAD;IAEc;IACL;IACI;IACA;IACI;GAChB,GANM,UAMN,CACF;EACM;;AAEb"}

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

@@ -1,11 +1,11 @@
-import { t as Txt } from "../../Txt-BM6TVV_c.js";
-import { snapshotSummaryLabel } from "./sankey-signals-data.es.js";
 import { useThemeFlows } from "./hooks/use-theme-flows.es.js";
+import { SignalLifelines } from "./signal-lifelines.es.js";
 import { SignalsErrorState } from "./signals-error-state.es.js";
 import { SignalsFrameLoadingSkeleton } from "./signals-loading-skeleton.es.js";
-import { timelineTickPositions } from "./snapshot-timeline-data.es.js";
+import { SnapshotSummary } from "./snapshot-summary.es.js";
 import { TimelineTrack } from "./snapshot-timeline.es.js";
-import { SignalLifelines } from "./signal-lifelines.es.js";
+import { timelineTickPositions } from "./snapshot-timeline-data.es.js";
+import { t as Txt } from "../../Txt-5efBsb2p.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/ee/signals/theme-lifelines.tsx
 /**
@@ -53,7 +53,10 @@ function ThemeLifelines({ entityId, entityType, signalNames, snapshots, totalSna
 				variant: "caption",
 				tone: "muted",
 				"data-testid": "snapshot-summary",
-				children: snapshotSummaryLabel(snapshots[selectedIndex], flows[selectedIndex])
+				children: /* @__PURE__ */ jsx(SnapshotSummary, {
+					snapshot: snapshots[selectedIndex],
+					flow: flows[selectedIndex]
+				})
 			}) : null,
 			signalNames.map((signalName) => /* @__PURE__ */ jsx(SignalLifelines, {
 				signalName,

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

@@ -1 +1 @@
-{"version":3,"file":"theme-lifelines.es.js","names":[],"sources":["../../../src/ee/signals/theme-lifelines.tsx"],"sourcesContent":["import { useThemeFlows } from './hooks/use-theme-flows';\nimport { snapshotSummaryLabel } from './sankey-signals-data';\nimport { SignalLifelines } from './signal-lifelines';\nimport { SignalsErrorState } from './signals-error-state';\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';\nimport { Txt } from '@/ds/components/Txt';\n\n/**\n * Lifelines mode: every theme holds a fixed row while landmarks run left to\n * right on the shared time axis, so persistent themes read as spines and\n * transient ones as short-lived segments — change over time without replay.\n */\nexport function ThemeLifelines({\n  entityId,\n  entityType,\n  signalNames,\n  snapshots,\n  totalSnapshots,\n  selectedIndex,\n  onSnapshotSelect,\n  onThemeSelect,\n}: {\n  entityId: string;\n  entityType: string;\n  signalNames: TraceSignalName[];\n  snapshots: ThemeSnapshot[];\n  totalSnapshots: number;\n  selectedIndex: number;\n  onSnapshotSelect: (index: number) => void;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\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 failedFlowQueries = flowQueries.filter(query => query.isError);\n  const positions = timelineTickPositions(snapshots);\n\n  if (failedFlowQueries.length > 0) {\n    return (\n      <SignalsErrorState\n        message=\"Unable to load theme lifelines.\"\n        onRetry={() => void Promise.all(failedFlowQueries.map(query => query.refetch()))}\n      />\n    );\n  }\n\n  if (!flows.some(flow => flow !== undefined)) {\n    return (\n      <section aria-label=\"Theme lifelines\">\n        <SignalsFrameLoadingSkeleton />\n      </section>\n    );\n  }\n\n  return (\n    <section aria-label=\"Theme lifelines\" className=\"space-y-5\">\n      {/* Spacers mirror each row's label and count columns so the shared track aligns with the rows. */}\n      <div className=\"flex items-center gap-3\">\n        <span aria-hidden=\"true\" className=\"w-52 shrink-0\" />\n        <TimelineTrack\n          snapshots={snapshots}\n          totalCount={totalSnapshots}\n          markers={new Map<number, TimelineMarkerKind>([[selectedIndex, 'selected']])}\n          onTickSelect={onSnapshotSelect}\n        />\n        <span aria-hidden=\"true\" className=\"w-9 shrink-0\" />\n      </div>\n      {snapshots[selectedIndex] ? (\n        <Txt variant=\"caption\" tone=\"muted\" data-testid=\"snapshot-summary\">\n          {snapshotSummaryLabel(snapshots[selectedIndex], flows[selectedIndex])}\n        </Txt>\n      ) : null}\n      {signalNames.map(signalName => (\n        <SignalLifelines\n          key={signalName}\n          signalName={signalName}\n          flows={flows}\n          snapshots={snapshots}\n          positions={positions}\n          onThemeSelect={onThemeSelect}\n        />\n      ))}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,SAAgB,eAAe,EAC7B,UACA,YACA,aACA,WACA,gBACA,eACA,kBACA,iBAUC;CACD,MAAM,cAAc,cAClB,UACA,YACA,aACA,UAAU,KAAI,aAAY,SAAS,UAAU,CAC/C;CACA,MAAM,QAAQ,YAAY,KAAI,UAAS,MAAM,IAAI;CACjD,MAAM,oBAAoB,YAAY,QAAO,UAAS,MAAM,OAAO;CACnE,MAAM,YAAY,sBAAsB,SAAS;CAEjD,IAAI,kBAAkB,SAAS,GAC7B,OACE,oBAAC,mBAAD;EACE,SAAQ;EACR,eAAe,KAAK,QAAQ,IAAI,kBAAkB,KAAI,UAAS,MAAM,QAAQ,CAAC,CAAC;CAChF,CAAA;CAIL,IAAI,CAAC,MAAM,MAAK,SAAQ,SAAS,KAAA,CAAS,GACxC,OACE,oBAAC,WAAD;EAAS,cAAW;EAClB,UAAA,oBAAC,6BAAD,CAA8B,CAAA;CACvB,CAAA;CAIb,OACE,qBAAC,WAAD;EAAS,cAAW;EAAkB,WAAU;EAAhD,UAAA;GAEE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;KAAiB,CAAA;KACpD,oBAAC,eAAD;MACa;MACX,YAAY;MACZ,yBAAS,IAAI,IAAgC,CAAC,CAAC,eAAe,UAAU,CAAC,CAAC;MAC1E,cAAc;KACf,CAAA;KACD,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;KAAgB,CAAA;IAChD;;GACJ,UAAU,iBACT,oBAAC,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,eAAY;IAC7C,UAAA,qBAAqB,UAAU,gBAAgB,MAAM,cAAc;GACjE,CAAA,IACH;GACH,YAAY,KAAI,eACf,oBAAC,iBAAD;IAEc;IACL;IACI;IACA;IACI;GAChB,GANM,UAMN,CACF;EACM;;AAEb"}
+{"version":3,"file":"theme-lifelines.es.js","names":[],"sources":["../../../src/ee/signals/theme-lifelines.tsx"],"sourcesContent":["import { useThemeFlows } from './hooks/use-theme-flows';\nimport { SignalLifelines } from './signal-lifelines';\nimport { SignalsErrorState } from './signals-error-state';\nimport { SignalsFrameLoadingSkeleton } from './signals-loading-skeleton';\nimport { SnapshotSummary } from './snapshot-summary';\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';\nimport { Txt } from '@/ds/components/Txt';\n\n/**\n * Lifelines mode: every theme holds a fixed row while landmarks run left to\n * right on the shared time axis, so persistent themes read as spines and\n * transient ones as short-lived segments — change over time without replay.\n */\nexport function ThemeLifelines({\n  entityId,\n  entityType,\n  signalNames,\n  snapshots,\n  totalSnapshots,\n  selectedIndex,\n  onSnapshotSelect,\n  onThemeSelect,\n}: {\n  entityId: string;\n  entityType: string;\n  signalNames: TraceSignalName[];\n  snapshots: ThemeSnapshot[];\n  totalSnapshots: number;\n  selectedIndex: number;\n  onSnapshotSelect: (index: number) => void;\n  onThemeSelect: (selection: ThemeSelection, snapshotIndex: number) => void;\n}) {\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 failedFlowQueries = flowQueries.filter(query => query.isError);\n  const positions = timelineTickPositions(snapshots);\n\n  if (failedFlowQueries.length > 0) {\n    return (\n      <SignalsErrorState\n        message=\"Unable to load theme lifelines.\"\n        onRetry={() => void Promise.all(failedFlowQueries.map(query => query.refetch()))}\n      />\n    );\n  }\n\n  if (!flows.some(flow => flow !== undefined)) {\n    return (\n      <section aria-label=\"Theme lifelines\">\n        <SignalsFrameLoadingSkeleton />\n      </section>\n    );\n  }\n\n  return (\n    <section aria-label=\"Theme lifelines\" className=\"space-y-5\">\n      {/* Spacers mirror each row's label and count columns so the shared track aligns with the rows. */}\n      <div className=\"flex items-center gap-3\">\n        <span aria-hidden=\"true\" className=\"w-52 shrink-0\" />\n        <TimelineTrack\n          snapshots={snapshots}\n          totalCount={totalSnapshots}\n          markers={new Map<number, TimelineMarkerKind>([[selectedIndex, 'selected']])}\n          onTickSelect={onSnapshotSelect}\n        />\n        <span aria-hidden=\"true\" className=\"w-9 shrink-0\" />\n      </div>\n      {snapshots[selectedIndex] ? (\n        <Txt variant=\"caption\" tone=\"muted\" data-testid=\"snapshot-summary\">\n          <SnapshotSummary snapshot={snapshots[selectedIndex]} flow={flows[selectedIndex]} />\n        </Txt>\n      ) : null}\n      {signalNames.map(signalName => (\n        <SignalLifelines\n          key={signalName}\n          signalName={signalName}\n          flows={flows}\n          snapshots={snapshots}\n          positions={positions}\n          onThemeSelect={onThemeSelect}\n        />\n      ))}\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,SAAgB,eAAe,EAC7B,UACA,YACA,aACA,WACA,gBACA,eACA,kBACA,iBAUC;CACD,MAAM,cAAc,cAClB,UACA,YACA,aACA,UAAU,KAAI,aAAY,SAAS,UAAU,CAC/C;CACA,MAAM,QAAQ,YAAY,KAAI,UAAS,MAAM,IAAI;CACjD,MAAM,oBAAoB,YAAY,QAAO,UAAS,MAAM,OAAO;CACnE,MAAM,YAAY,sBAAsB,SAAS;CAEjD,IAAI,kBAAkB,SAAS,GAC7B,OACE,oBAAC,mBAAD;EACE,SAAQ;EACR,eAAe,KAAK,QAAQ,IAAI,kBAAkB,KAAI,UAAS,MAAM,QAAQ,CAAC,CAAC;CAChF,CAAA;CAIL,IAAI,CAAC,MAAM,MAAK,SAAQ,SAAS,KAAA,CAAS,GACxC,OACE,oBAAC,WAAD;EAAS,cAAW;EAClB,UAAA,oBAAC,6BAAD,CAA8B,CAAA;CACvB,CAAA;CAIb,OACE,qBAAC,WAAD;EAAS,cAAW;EAAkB,WAAU;EAAhD,UAAA;GAEE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;KAAiB,CAAA;KACpD,oBAAC,eAAD;MACa;MACX,YAAY;MACZ,yBAAS,IAAI,IAAgC,CAAC,CAAC,eAAe,UAAU,CAAC,CAAC;MAC1E,cAAc;KACf,CAAA;KACD,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;KAAgB,CAAA;IAChD;;GACJ,UAAU,iBACT,oBAAC,KAAD;IAAK,SAAQ;IAAU,MAAK;IAAQ,eAAY;IAC9C,UAAA,oBAAC,iBAAD;KAAiB,UAAU,UAAU;KAAgB,MAAM,MAAM;IAAiB,CAAA;GAC/E,CAAA,IACH;GACH,YAAY,KAAI,eACf,oBAAC,iBAAD;IAEc;IACL;IACI;IACA;IACI;GAChB,GANM,UAMN,CACF;EACM;;AAEb"}

package/dist/ee/signals/theme-trend-chart.cjs.js

@@ -1,13 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_tooltip = require("../../tooltip-BiRLT3Th.cjs");
-const require_Txt = require("../../Txt-BnoSqxKE.cjs");
 const require_ee_signals_signal_colors = require("./signal-colors.cjs.js");
 const require_ee_signals_signal_formatting = require("./signal-formatting.cjs.js");
+const require_tooltip = require("../../tooltip-BsExuMO8.cjs");
+const require_Txt = require("../../Txt-_00wWxTd.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ee/signals/theme-trend-chart.tsx
 var TREND_CHART_HEIGHT = 32;
 function trendPointLabel(point) {
-	return `${require_ee_signals_signal_formatting.formatSnapshotDate(point.startedAt)} · ${require_ee_signals_signal_formatting.traceLabel(point.traceCount)} (${Math.round(point.coverage * 100)}%)`;
+	return `${require_ee_signals_signal_formatting.formatSnapshotDate(point.startedAt)}: ${require_ee_signals_signal_formatting.traceLabel(point.traceCount)} (${Math.round(point.coverage * 100)}%)`;
 }
 /** Trace count over time for one theme, with absent stretches dropping to the baseline. */
 function ThemeTrendChart({ points, signalName }) {

package/dist/ee/signals/theme-trend-chart.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-trend-chart.cjs.js","names":["formatSnapshotDate","traceLabel","getSignalColor","getSignalAreaClass","Tooltip","TooltipTrigger","TooltipContent","Txt"],"sources":["../../../src/ee/signals/theme-trend-chart.tsx"],"sourcesContent":["import { getSignalAreaClass, getSignalColor } from './signal-colors';\nimport { formatSnapshotDate, traceLabel } from './signal-formatting';\nimport type { ThemeHistoryPoint } from './theme-trend';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\n\nconst TREND_CHART_HEIGHT = 32;\n\nfunction trendPointLabel(point: ThemeHistoryPoint) {\n  return `${formatSnapshotDate(point.startedAt)} · ${traceLabel(point.traceCount)} (${Math.round(point.coverage * 100)}%)`;\n}\n\n/** Trace count over time for one theme, with absent stretches dropping to the baseline. */\nexport function ThemeTrendChart({ points, signalName }: { points: ThemeHistoryPoint[]; signalName: string }) {\n  const color = getSignalColor(signalName);\n  const firstPoint = points[0];\n  const lastPoint = points.at(-1);\n  if (!firstPoint || !lastPoint) return null;\n\n  const firstTime = new Date(firstPoint.startedAt).getTime();\n  const lastTime = new Date(lastPoint.startedAt).getTime();\n  const timeSpan = lastTime - firstTime;\n  const maxCount = Math.max(1, ...points.map(point => point.traceCount));\n  const x = (point: ThemeHistoryPoint) =>\n    timeSpan === 0 ? 50 : ((new Date(point.startedAt).getTime() - firstTime) / timeSpan) * 100;\n  const y = (point: ThemeHistoryPoint) => (1 - point.traceCount / maxCount) * (TREND_CHART_HEIGHT - 4) + 2;\n  const coordinates = points.map(point => `${x(point)},${y(point)}`);\n\n  return (\n    <div className=\"mt-3\">\n      <div className=\"relative h-8\" data-testid=\"trend-chart\">\n        <svg\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 size-full\"\n          preserveAspectRatio=\"none\"\n          viewBox={`0 0 100 ${TREND_CHART_HEIGHT}`}\n        >\n          <polygon\n            className={getSignalAreaClass(signalName)}\n            points={[`0,${TREND_CHART_HEIGHT}`, ...coordinates, `100,${TREND_CHART_HEIGHT}`].join(' ')}\n          />\n          <polyline\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={1.2}\n            vectorEffect=\"non-scaling-stroke\"\n            points={coordinates.join(' ')}\n          />\n        </svg>\n        {points.map(point => {\n          const label = trendPointLabel(point);\n          return (\n            <Tooltip key={point.snapshotId}>\n              <TooltipTrigger\n                aria-label={label}\n                className=\"absolute size-2 -translate-1/2 cursor-default rounded-full transition-transform hover:scale-150\"\n                style={{\n                  left: `${x(point)}%`,\n                  top: `${(y(point) / TREND_CHART_HEIGHT) * 100}%`,\n                  backgroundColor: color,\n                }}\n              />\n              <TooltipContent>{label}</TooltipContent>\n            </Tooltip>\n          );\n        })}\n      </div>\n      <div className=\"mt-1 flex justify-between\">\n        <Txt tone=\"muted\" as=\"span\" variant=\"caption\">\n          {formatSnapshotDate(firstPoint.startedAt)}\n        </Txt>\n        <Txt tone=\"muted\" as=\"span\" variant=\"caption\">\n          {formatSnapshotDate(lastPoint.startedAt)}\n        </Txt>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAMA,IAAM,qBAAqB;AAE3B,SAAS,gBAAgB,OAA0B;CACjD,OAAO,GAAGA,qCAAAA,mBAAmB,MAAM,SAAS,EAAE,KAAKC,qCAAAA,WAAW,MAAM,UAAU,EAAE,IAAI,KAAK,MAAM,MAAM,WAAW,GAAG,EAAE;AACvH;;AAGA,SAAgB,gBAAgB,EAAE,QAAQ,cAAmE;CAC3G,MAAM,QAAQC,iCAAAA,eAAe,UAAU;CACvC,MAAM,aAAa,OAAO;CAC1B,MAAM,YAAY,OAAO,GAAG,EAAE;CAC9B,IAAI,CAAC,cAAc,CAAC,WAAW,OAAO;CAEtC,MAAM,YAAY,IAAI,KAAK,WAAW,SAAS,CAAC,CAAC,QAAQ;CAEzD,MAAM,WADW,IAAI,KAAK,UAAU,SAAS,CAAC,CAAC,QAC9B,IAAW;CAC5B,MAAM,WAAW,KAAK,IAAI,GAAG,GAAG,OAAO,KAAI,UAAS,MAAM,UAAU,CAAC;CACrE,MAAM,KAAK,UACT,aAAa,IAAI,MAAO,IAAI,KAAK,MAAM,SAAS,CAAC,CAAC,QAAQ,IAAI,aAAa,WAAY;CACzF,MAAM,KAAK,WAA8B,IAAI,MAAM,aAAa,YAAa,KAA0B;CACvG,MAAM,cAAc,OAAO,KAAI,UAAS,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,GAAG;CAEjE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAe,eAAY;GAA1C,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,qBAAoB;IACpB,SAAS,WAAW;IAJtB,UAAA,CAME,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;KACE,WAAWC,iCAAAA,mBAAmB,UAAU;KACxC,QAAQ;MAAC,KAAK;MAAsB,GAAG;MAAa,OAAO;KAAoB,CAAC,CAAC,KAAK,GAAG;IAC1F,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;KACE,MAAK;KACL,QAAQ;KACR,aAAa;KACb,cAAa;KACb,QAAQ,YAAY,KAAK,GAAG;IAC7B,CAAA,CACE;GACJ,CAAA,GAAA,OAAO,KAAI,UAAS;IACnB,MAAM,QAAQ,gBAAgB,KAAK;IACnC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,gBAAD;KACE,cAAY;KACZ,WAAU;KACV,OAAO;MACL,MAAM,GAAG,EAAE,KAAK,EAAE;MAClB,KAAK,GAAI,EAAE,KAAK,IAAI,qBAAsB,IAAI;MAC9C,iBAAiB;KACnB;IACD,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,gBAAD,EAAA,UAAiB,MAAsB,CAAA,CAChC,EAAA,GAXK,MAAM,UAWX;GAEb,CAAC,CACE;EACL,CAAA,GAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,MAAK;IAAQ,IAAG;IAAO,SAAQ;IACjC,UAAAP,qCAAAA,mBAAmB,WAAW,SAAS;GACrC,CAAA,GACL,iBAAA,GAAA,kBAAA,IAAA,CAACO,YAAAA,KAAD;IAAK,MAAK;IAAQ,IAAG;IAAO,SAAQ;IACjC,UAAAP,qCAAAA,mBAAmB,UAAU,SAAS;GACpC,CAAA,CACF;EACF,CAAA,CAAA;;AAET"}
+{"version":3,"file":"theme-trend-chart.cjs.js","names":["formatSnapshotDate","traceLabel","getSignalColor","getSignalAreaClass","Tooltip","TooltipTrigger","TooltipContent","Txt"],"sources":["../../../src/ee/signals/theme-trend-chart.tsx"],"sourcesContent":["import { getSignalAreaClass, getSignalColor } from './signal-colors';\nimport { formatSnapshotDate, traceLabel } from './signal-formatting';\nimport type { ThemeHistoryPoint } from './theme-trend';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\n\nconst TREND_CHART_HEIGHT = 32;\n\nfunction trendPointLabel(point: ThemeHistoryPoint) {\n  return `${formatSnapshotDate(point.startedAt)}: ${traceLabel(point.traceCount)} (${Math.round(point.coverage * 100)}%)`;\n}\n\n/** Trace count over time for one theme, with absent stretches dropping to the baseline. */\nexport function ThemeTrendChart({ points, signalName }: { points: ThemeHistoryPoint[]; signalName: string }) {\n  const color = getSignalColor(signalName);\n  const firstPoint = points[0];\n  const lastPoint = points.at(-1);\n  if (!firstPoint || !lastPoint) return null;\n\n  const firstTime = new Date(firstPoint.startedAt).getTime();\n  const lastTime = new Date(lastPoint.startedAt).getTime();\n  const timeSpan = lastTime - firstTime;\n  const maxCount = Math.max(1, ...points.map(point => point.traceCount));\n  const x = (point: ThemeHistoryPoint) =>\n    timeSpan === 0 ? 50 : ((new Date(point.startedAt).getTime() - firstTime) / timeSpan) * 100;\n  const y = (point: ThemeHistoryPoint) => (1 - point.traceCount / maxCount) * (TREND_CHART_HEIGHT - 4) + 2;\n  const coordinates = points.map(point => `${x(point)},${y(point)}`);\n\n  return (\n    <div className=\"mt-3\">\n      <div className=\"relative h-8\" data-testid=\"trend-chart\">\n        <svg\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 size-full\"\n          preserveAspectRatio=\"none\"\n          viewBox={`0 0 100 ${TREND_CHART_HEIGHT}`}\n        >\n          <polygon\n            className={getSignalAreaClass(signalName)}\n            points={[`0,${TREND_CHART_HEIGHT}`, ...coordinates, `100,${TREND_CHART_HEIGHT}`].join(' ')}\n          />\n          <polyline\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={1.2}\n            vectorEffect=\"non-scaling-stroke\"\n            points={coordinates.join(' ')}\n          />\n        </svg>\n        {points.map(point => {\n          const label = trendPointLabel(point);\n          return (\n            <Tooltip key={point.snapshotId}>\n              <TooltipTrigger\n                aria-label={label}\n                className=\"absolute size-2 -translate-1/2 cursor-default rounded-full transition-transform hover:scale-150\"\n                style={{\n                  left: `${x(point)}%`,\n                  top: `${(y(point) / TREND_CHART_HEIGHT) * 100}%`,\n                  backgroundColor: color,\n                }}\n              />\n              <TooltipContent>{label}</TooltipContent>\n            </Tooltip>\n          );\n        })}\n      </div>\n      <div className=\"mt-1 flex justify-between\">\n        <Txt tone=\"muted\" as=\"span\" variant=\"caption\">\n          {formatSnapshotDate(firstPoint.startedAt)}\n        </Txt>\n        <Txt tone=\"muted\" as=\"span\" variant=\"caption\">\n          {formatSnapshotDate(lastPoint.startedAt)}\n        </Txt>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAMA,IAAM,qBAAqB;AAE3B,SAAS,gBAAgB,OAA0B;CACjD,OAAO,GAAGA,qCAAAA,mBAAmB,MAAM,SAAS,EAAE,IAAIC,qCAAAA,WAAW,MAAM,UAAU,EAAE,IAAI,KAAK,MAAM,MAAM,WAAW,GAAG,EAAE;AACtH;;AAGA,SAAgB,gBAAgB,EAAE,QAAQ,cAAmE;CAC3G,MAAM,QAAQC,iCAAAA,eAAe,UAAU;CACvC,MAAM,aAAa,OAAO;CAC1B,MAAM,YAAY,OAAO,GAAG,EAAE;CAC9B,IAAI,CAAC,cAAc,CAAC,WAAW,OAAO;CAEtC,MAAM,YAAY,IAAI,KAAK,WAAW,SAAS,CAAC,CAAC,QAAQ;CAEzD,MAAM,WADW,IAAI,KAAK,UAAU,SAAS,CAAC,CAAC,QAC9B,IAAW;CAC5B,MAAM,WAAW,KAAK,IAAI,GAAG,GAAG,OAAO,KAAI,UAAS,MAAM,UAAU,CAAC;CACrE,MAAM,KAAK,UACT,aAAa,IAAI,MAAO,IAAI,KAAK,MAAM,SAAS,CAAC,CAAC,QAAQ,IAAI,aAAa,WAAY;CACzF,MAAM,KAAK,WAA8B,IAAI,MAAM,aAAa,YAAa,KAA0B;CACvG,MAAM,cAAc,OAAO,KAAI,UAAS,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,GAAG;CAEjE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAe,eAAY;GAA1C,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,qBAAoB;IACpB,SAAS,WAAW;IAJtB,UAAA,CAME,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;KACE,WAAWC,iCAAAA,mBAAmB,UAAU;KACxC,QAAQ;MAAC,KAAK;MAAsB,GAAG;MAAa,OAAO;KAAoB,CAAC,CAAC,KAAK,GAAG;IAC1F,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;KACE,MAAK;KACL,QAAQ;KACR,aAAa;KACb,cAAa;KACb,QAAQ,YAAY,KAAK,GAAG;IAC7B,CAAA,CACE;GACJ,CAAA,GAAA,OAAO,KAAI,UAAS;IACnB,MAAM,QAAQ,gBAAgB,KAAK;IACnC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,gBAAD;KACE,cAAY;KACZ,WAAU;KACV,OAAO;MACL,MAAM,GAAG,EAAE,KAAK,EAAE;MAClB,KAAK,GAAI,EAAE,KAAK,IAAI,qBAAsB,IAAI;MAC9C,iBAAiB;KACnB;IACD,CAAA,GACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,gBAAD,EAAA,UAAiB,MAAsB,CAAA,CAChC,EAAA,GAXK,MAAM,UAWX;GAEb,CAAC,CACE;EACL,CAAA,GAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,MAAK;IAAQ,IAAG;IAAO,SAAQ;IACjC,UAAAP,qCAAAA,mBAAmB,WAAW,SAAS;GACrC,CAAA,GACL,iBAAA,GAAA,kBAAA,IAAA,CAACO,YAAAA,KAAD;IAAK,MAAK;IAAQ,IAAG;IAAO,SAAQ;IACjC,UAAAP,qCAAAA,mBAAmB,UAAU,SAAS;GACpC,CAAA,CACF;EACF,CAAA,CAAA;;AAET"}

package/dist/ee/signals/theme-trend-chart.es.js

@@ -1,12 +1,12 @@
-import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../tooltip-HzcLyGtV.js";
-import { t as Txt } from "../../Txt-BM6TVV_c.js";
 import { getSignalAreaClass, getSignalColor } from "./signal-colors.es.js";
 import { formatSnapshotDate, traceLabel } from "./signal-formatting.es.js";
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../tooltip-DJcze2VZ.js";
+import { t as Txt } from "../../Txt-5efBsb2p.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/ee/signals/theme-trend-chart.tsx
 var TREND_CHART_HEIGHT = 32;
 function trendPointLabel(point) {
-	return `${formatSnapshotDate(point.startedAt)} · ${traceLabel(point.traceCount)} (${Math.round(point.coverage * 100)}%)`;
+	return `${formatSnapshotDate(point.startedAt)}: ${traceLabel(point.traceCount)} (${Math.round(point.coverage * 100)}%)`;
 }
 /** Trace count over time for one theme, with absent stretches dropping to the baseline. */
 function ThemeTrendChart({ points, signalName }) {

package/dist/ee/signals/theme-trend-chart.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-trend-chart.es.js","names":[],"sources":["../../../src/ee/signals/theme-trend-chart.tsx"],"sourcesContent":["import { getSignalAreaClass, getSignalColor } from './signal-colors';\nimport { formatSnapshotDate, traceLabel } from './signal-formatting';\nimport type { ThemeHistoryPoint } from './theme-trend';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\n\nconst TREND_CHART_HEIGHT = 32;\n\nfunction trendPointLabel(point: ThemeHistoryPoint) {\n  return `${formatSnapshotDate(point.startedAt)} · ${traceLabel(point.traceCount)} (${Math.round(point.coverage * 100)}%)`;\n}\n\n/** Trace count over time for one theme, with absent stretches dropping to the baseline. */\nexport function ThemeTrendChart({ points, signalName }: { points: ThemeHistoryPoint[]; signalName: string }) {\n  const color = getSignalColor(signalName);\n  const firstPoint = points[0];\n  const lastPoint = points.at(-1);\n  if (!firstPoint || !lastPoint) return null;\n\n  const firstTime = new Date(firstPoint.startedAt).getTime();\n  const lastTime = new Date(lastPoint.startedAt).getTime();\n  const timeSpan = lastTime - firstTime;\n  const maxCount = Math.max(1, ...points.map(point => point.traceCount));\n  const x = (point: ThemeHistoryPoint) =>\n    timeSpan === 0 ? 50 : ((new Date(point.startedAt).getTime() - firstTime) / timeSpan) * 100;\n  const y = (point: ThemeHistoryPoint) => (1 - point.traceCount / maxCount) * (TREND_CHART_HEIGHT - 4) + 2;\n  const coordinates = points.map(point => `${x(point)},${y(point)}`);\n\n  return (\n    <div className=\"mt-3\">\n      <div className=\"relative h-8\" data-testid=\"trend-chart\">\n        <svg\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 size-full\"\n          preserveAspectRatio=\"none\"\n          viewBox={`0 0 100 ${TREND_CHART_HEIGHT}`}\n        >\n          <polygon\n            className={getSignalAreaClass(signalName)}\n            points={[`0,${TREND_CHART_HEIGHT}`, ...coordinates, `100,${TREND_CHART_HEIGHT}`].join(' ')}\n          />\n          <polyline\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={1.2}\n            vectorEffect=\"non-scaling-stroke\"\n            points={coordinates.join(' ')}\n          />\n        </svg>\n        {points.map(point => {\n          const label = trendPointLabel(point);\n          return (\n            <Tooltip key={point.snapshotId}>\n              <TooltipTrigger\n                aria-label={label}\n                className=\"absolute size-2 -translate-1/2 cursor-default rounded-full transition-transform hover:scale-150\"\n                style={{\n                  left: `${x(point)}%`,\n                  top: `${(y(point) / TREND_CHART_HEIGHT) * 100}%`,\n                  backgroundColor: color,\n                }}\n              />\n              <TooltipContent>{label}</TooltipContent>\n            </Tooltip>\n          );\n        })}\n      </div>\n      <div className=\"mt-1 flex justify-between\">\n        <Txt tone=\"muted\" as=\"span\" variant=\"caption\">\n          {formatSnapshotDate(firstPoint.startedAt)}\n        </Txt>\n        <Txt tone=\"muted\" as=\"span\" variant=\"caption\">\n          {formatSnapshotDate(lastPoint.startedAt)}\n        </Txt>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,IAAM,qBAAqB;AAE3B,SAAS,gBAAgB,OAA0B;CACjD,OAAO,GAAG,mBAAmB,MAAM,SAAS,EAAE,KAAK,WAAW,MAAM,UAAU,EAAE,IAAI,KAAK,MAAM,MAAM,WAAW,GAAG,EAAE;AACvH;;AAGA,SAAgB,gBAAgB,EAAE,QAAQ,cAAmE;CAC3G,MAAM,QAAQ,eAAe,UAAU;CACvC,MAAM,aAAa,OAAO;CAC1B,MAAM,YAAY,OAAO,GAAG,EAAE;CAC9B,IAAI,CAAC,cAAc,CAAC,WAAW,OAAO;CAEtC,MAAM,YAAY,IAAI,KAAK,WAAW,SAAS,CAAC,CAAC,QAAQ;CAEzD,MAAM,WADW,IAAI,KAAK,UAAU,SAAS,CAAC,CAAC,QAC9B,IAAW;CAC5B,MAAM,WAAW,KAAK,IAAI,GAAG,GAAG,OAAO,KAAI,UAAS,MAAM,UAAU,CAAC;CACrE,MAAM,KAAK,UACT,aAAa,IAAI,MAAO,IAAI,KAAK,MAAM,SAAS,CAAC,CAAC,QAAQ,IAAI,aAAa,WAAY;CACzF,MAAM,KAAK,WAA8B,IAAI,MAAM,aAAa,YAAa,KAA0B;CACvG,MAAM,cAAc,OAAO,KAAI,UAAS,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,GAAG;CAEjE,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAe,eAAY;GAA1C,UAAA,CACE,qBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,qBAAoB;IACpB,SAAS,WAAW;IAJtB,UAAA,CAME,oBAAC,WAAD;KACE,WAAW,mBAAmB,UAAU;KACxC,QAAQ;MAAC,KAAK;MAAsB,GAAG;MAAa,OAAO;KAAoB,CAAC,CAAC,KAAK,GAAG;IAC1F,CAAA,GACD,oBAAC,YAAD;KACE,MAAK;KACL,QAAQ;KACR,aAAa;KACb,cAAa;KACb,QAAQ,YAAY,KAAK,GAAG;IAC7B,CAAA,CACE;GACJ,CAAA,GAAA,OAAO,KAAI,UAAS;IACnB,MAAM,QAAQ,gBAAgB,KAAK;IACnC,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;KACE,cAAY;KACZ,WAAU;KACV,OAAO;MACL,MAAM,GAAG,EAAE,KAAK,EAAE;MAClB,KAAK,GAAI,EAAE,KAAK,IAAI,qBAAsB,IAAI;MAC9C,iBAAiB;KACnB;IACD,CAAA,GACD,oBAAC,gBAAD,EAAA,UAAiB,MAAsB,CAAA,CAChC,EAAA,GAXK,MAAM,UAWX;GAEb,CAAC,CACE;EACL,CAAA,GAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,KAAD;IAAK,MAAK;IAAQ,IAAG;IAAO,SAAQ;IACjC,UAAA,mBAAmB,WAAW,SAAS;GACrC,CAAA,GACL,oBAAC,KAAD;IAAK,MAAK;IAAQ,IAAG;IAAO,SAAQ;IACjC,UAAA,mBAAmB,UAAU,SAAS;GACpC,CAAA,CACF;EACF,CAAA,CAAA;;AAET"}
+{"version":3,"file":"theme-trend-chart.es.js","names":[],"sources":["../../../src/ee/signals/theme-trend-chart.tsx"],"sourcesContent":["import { getSignalAreaClass, getSignalColor } from './signal-colors';\nimport { formatSnapshotDate, traceLabel } from './signal-formatting';\nimport type { ThemeHistoryPoint } from './theme-trend';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Txt } from '@/ds/components/Txt';\n\nconst TREND_CHART_HEIGHT = 32;\n\nfunction trendPointLabel(point: ThemeHistoryPoint) {\n  return `${formatSnapshotDate(point.startedAt)}: ${traceLabel(point.traceCount)} (${Math.round(point.coverage * 100)}%)`;\n}\n\n/** Trace count over time for one theme, with absent stretches dropping to the baseline. */\nexport function ThemeTrendChart({ points, signalName }: { points: ThemeHistoryPoint[]; signalName: string }) {\n  const color = getSignalColor(signalName);\n  const firstPoint = points[0];\n  const lastPoint = points.at(-1);\n  if (!firstPoint || !lastPoint) return null;\n\n  const firstTime = new Date(firstPoint.startedAt).getTime();\n  const lastTime = new Date(lastPoint.startedAt).getTime();\n  const timeSpan = lastTime - firstTime;\n  const maxCount = Math.max(1, ...points.map(point => point.traceCount));\n  const x = (point: ThemeHistoryPoint) =>\n    timeSpan === 0 ? 50 : ((new Date(point.startedAt).getTime() - firstTime) / timeSpan) * 100;\n  const y = (point: ThemeHistoryPoint) => (1 - point.traceCount / maxCount) * (TREND_CHART_HEIGHT - 4) + 2;\n  const coordinates = points.map(point => `${x(point)},${y(point)}`);\n\n  return (\n    <div className=\"mt-3\">\n      <div className=\"relative h-8\" data-testid=\"trend-chart\">\n        <svg\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 size-full\"\n          preserveAspectRatio=\"none\"\n          viewBox={`0 0 100 ${TREND_CHART_HEIGHT}`}\n        >\n          <polygon\n            className={getSignalAreaClass(signalName)}\n            points={[`0,${TREND_CHART_HEIGHT}`, ...coordinates, `100,${TREND_CHART_HEIGHT}`].join(' ')}\n          />\n          <polyline\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={1.2}\n            vectorEffect=\"non-scaling-stroke\"\n            points={coordinates.join(' ')}\n          />\n        </svg>\n        {points.map(point => {\n          const label = trendPointLabel(point);\n          return (\n            <Tooltip key={point.snapshotId}>\n              <TooltipTrigger\n                aria-label={label}\n                className=\"absolute size-2 -translate-1/2 cursor-default rounded-full transition-transform hover:scale-150\"\n                style={{\n                  left: `${x(point)}%`,\n                  top: `${(y(point) / TREND_CHART_HEIGHT) * 100}%`,\n                  backgroundColor: color,\n                }}\n              />\n              <TooltipContent>{label}</TooltipContent>\n            </Tooltip>\n          );\n        })}\n      </div>\n      <div className=\"mt-1 flex justify-between\">\n        <Txt tone=\"muted\" as=\"span\" variant=\"caption\">\n          {formatSnapshotDate(firstPoint.startedAt)}\n        </Txt>\n        <Txt tone=\"muted\" as=\"span\" variant=\"caption\">\n          {formatSnapshotDate(lastPoint.startedAt)}\n        </Txt>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,IAAM,qBAAqB;AAE3B,SAAS,gBAAgB,OAA0B;CACjD,OAAO,GAAG,mBAAmB,MAAM,SAAS,EAAE,IAAI,WAAW,MAAM,UAAU,EAAE,IAAI,KAAK,MAAM,MAAM,WAAW,GAAG,EAAE;AACtH;;AAGA,SAAgB,gBAAgB,EAAE,QAAQ,cAAmE;CAC3G,MAAM,QAAQ,eAAe,UAAU;CACvC,MAAM,aAAa,OAAO;CAC1B,MAAM,YAAY,OAAO,GAAG,EAAE;CAC9B,IAAI,CAAC,cAAc,CAAC,WAAW,OAAO;CAEtC,MAAM,YAAY,IAAI,KAAK,WAAW,SAAS,CAAC,CAAC,QAAQ;CAEzD,MAAM,WADW,IAAI,KAAK,UAAU,SAAS,CAAC,CAAC,QAC9B,IAAW;CAC5B,MAAM,WAAW,KAAK,IAAI,GAAG,GAAG,OAAO,KAAI,UAAS,MAAM,UAAU,CAAC;CACrE,MAAM,KAAK,UACT,aAAa,IAAI,MAAO,IAAI,KAAK,MAAM,SAAS,CAAC,CAAC,QAAQ,IAAI,aAAa,WAAY;CACzF,MAAM,KAAK,WAA8B,IAAI,MAAM,aAAa,YAAa,KAA0B;CACvG,MAAM,cAAc,OAAO,KAAI,UAAS,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,GAAG;CAEjE,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAe,eAAY;GAA1C,UAAA,CACE,qBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,qBAAoB;IACpB,SAAS,WAAW;IAJtB,UAAA,CAME,oBAAC,WAAD;KACE,WAAW,mBAAmB,UAAU;KACxC,QAAQ;MAAC,KAAK;MAAsB,GAAG;MAAa,OAAO;KAAoB,CAAC,CAAC,KAAK,GAAG;IAC1F,CAAA,GACD,oBAAC,YAAD;KACE,MAAK;KACL,QAAQ;KACR,aAAa;KACb,cAAa;KACb,QAAQ,YAAY,KAAK,GAAG;IAC7B,CAAA,CACE;GACJ,CAAA,GAAA,OAAO,KAAI,UAAS;IACnB,MAAM,QAAQ,gBAAgB,KAAK;IACnC,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;KACE,cAAY;KACZ,WAAU;KACV,OAAO;MACL,MAAM,GAAG,EAAE,KAAK,EAAE;MAClB,KAAK,GAAI,EAAE,KAAK,IAAI,qBAAsB,IAAI;MAC9C,iBAAiB;KACnB;IACD,CAAA,GACD,oBAAC,gBAAD,EAAA,UAAiB,MAAsB,CAAA,CAChC,EAAA,GAXK,MAAM,UAWX;GAEb,CAAC,CACE;EACL,CAAA,GAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,KAAD;IAAK,MAAK;IAAQ,IAAG;IAAO,SAAQ;IACjC,UAAA,mBAAmB,WAAW,SAAS;GACrC,CAAA,GACL,oBAAC,KAAD;IAAK,MAAK;IAAQ,IAAG;IAAO,SAAQ;IACjC,UAAA,mBAAmB,UAAU,SAAS;GACpC,CAAA,CACF;EACF,CAAA,CAAA;;AAET"}

package/dist/ee/signals/trace-insight-view.cjs.js

@@ -1,13 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../../utils-uDc1ofX1.cjs");
-const require_primitives_raised_surface = require("../../primitives/raised-surface.cjs.js");
-const require_Button = require("../../Button-DLcMcuUL.cjs");
-const require_primitives_text = require("../../primitives/text.cjs.js");
-const require_Txt = require("../../Txt-BnoSqxKE.cjs");
-const require_icons_TraceIcon = require("../../icons/TraceIcon.cjs.js");
+const require_ee_signals_hooks_use_trace_insight = require("./hooks/use-trace-insight.cjs.js");
 const require_ee_signals_signal_formatting = require("./signal-formatting.cjs.js");
 const require_ee_signals_use_trace_intelligence = require("./use-trace-intelligence.cjs.js");
-const require_ee_signals_hooks_use_trace_insight = require("./hooks/use-trace-insight.cjs.js");
+const require_Button = require("../../Button-BfICfyxD.cjs");
+const require_Metadata = require("../../Metadata-5GJlO4GU.cjs");
+const require_Txt = require("../../Txt-_00wWxTd.cjs");
+const require_icons_TraceIcon = require("../../icons/TraceIcon.cjs.js");
+const require_primitives_raised_surface = require("../../primitives/raised-surface.cjs.js");
+const require_primitives_text = require("../../primitives/text.cjs.js");
+const require_utils = require("../../utils-uDc1ofX1.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/ee/signals/trace-insight-view.tsx
@@ -72,17 +73,14 @@ function ObservationItem({ observation }) {
 	const { severity, kind, text } = parseTraceObservation(observation);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 		className: `rounded-md p-3 ${OBSERVATION_SEVERITY_CARD[severity ?? "info"]}`,
-		children: [kind !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+		children: [kind !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
 			variant: "meta",
 			tone: "muted",
 			className: "uppercase",
-			children: [severity === "problem" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Metadata.Metadata, { children: [severity === "problem" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, {
 				className: "text-destructive-foreground",
 				children: "problem"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				"aria-hidden": "true",
-				children: " · "
-			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: kind })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Metadata.Metadata.Item, { children: kind })] })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
 			as: "p",
 			variant: "body",