@mastra/playground-ui 61.0.0-alpha.6 → 61.0.0

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

@@ -13,7 +13,7 @@ import { ThemeTrendChart } from './theme-trend-chart.es.js';
 import { TraceInsightView } from './trace-insight-view.es.js';
 import { D as Drawer, d as DrawerContent, g as DrawerHeader, o as DrawerTitle, e as DrawerDescription, b as DrawerBody } from '../../drawer-BI3B_krl.js';
 import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../tooltip-DsQPiynb.js';
-import { T as Txt } from '../../Txt-C3cYJgKU.js';
+import { T as Txt } from '../../Txt-CuuPO9Ho.js';
 import { raisedSurfaceStyle } from '../../primitives/raised-surface.es.js';
 import { c as cn } from '../../cn-65Adrsfj.js';
 
@@ -83,8 +83,6 @@ function ThemeDetailPanel({
             {
               as: "span",
               variant: "column",
-              font: "mono",
-              className: "tracking-widest",
               style: { color: getSignalColor(signalName) },
               children: signalDisplayDescription ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { "aria-label": signalDisplayLabel, className: "cursor-default uppercase", children: signalDisplayLabel }),
@@ -111,37 +109,15 @@ function ThemeDetailPanel({
             ] }),
             detailQuery.data?.theme && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("section", { "aria-labelledby": "theme-summary-heading", children: [
-                /* @__PURE__ */ jsx(
-                  Txt,
-                  {
-                    as: "h2",
-                    variant: "caption",
-                    tone: "muted",
-                    font: "mono",
-                    id: "theme-summary-heading",
-                    className: "tracking-wider uppercase",
-                    children: "Summary"
-                  }
-                ),
+                /* @__PURE__ */ jsx(Txt, { as: "h2", variant: "eyebrow", tone: "muted", id: "theme-summary-heading", children: "Summary" }),
                 /* @__PURE__ */ jsx(Txt, { tone: "ink", className: "mt-3", children: detailQuery.data.theme.description ?? "No description available." }),
-                /* @__PURE__ */ jsx(Txt, { tone: "ink", font: "mono", className: "mt-3 tabular-nums", children: shareSentence(
+                /* @__PURE__ */ jsx(Txt, { tone: "ink", className: "mt-3 tabular-nums", children: shareSentence(
                   filteredStats?.traceCount ?? detailQuery.data.theme.traceCount,
                   filteredStats?.stageShare ?? detailQuery.data.theme.coverage
                 ) })
               ] }),
               /* @__PURE__ */ jsxs("section", { "aria-labelledby": "theme-examples-heading", children: [
-                /* @__PURE__ */ jsx(
-                  Txt,
-                  {
-                    as: "h2",
-                    variant: "caption",
-                    tone: "muted",
-                    font: "mono",
-                    id: "theme-examples-heading",
-                    className: "tracking-wider uppercase",
-                    children: "Examples"
-                  }
-                ),
+                /* @__PURE__ */ jsx(Txt, { as: "h2", variant: "eyebrow", tone: "muted", id: "theme-examples-heading", children: "Examples" }),
                 examplesQuery.isPending && /* @__PURE__ */ jsx(Txt, { tone: "muted", className: "mt-3", children: "Loading examples…" }),
                 examplesQuery.isError && /* @__PURE__ */ jsx(Txt, { className: "mt-3 text-destructive-foreground", children: "Unable to load examples." }),
                 examplesQuery.data && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -150,12 +126,13 @@ function ThemeDetailPanel({
                     {
                       type: "button",
                       "aria-label": `View trace insight for ${example.signalText}`,
+                      onClick: () => setInsightTraceId(example.traceId),
                       className: cn(
+                        "text-foreground",
                         raisedSurfaceStyle,
-                        "state-layer w-full cursor-pointer rounded-md p-3 text-left text-body text-foreground"
+                        "state-layer w-full cursor-pointer rounded-md p-3 text-left"
                       ),
-                      onClick: () => setInsightTraceId(example.traceId),
-                      children: example.signalText
+                      children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body", className: "block", children: example.signalText })
                     }
                   ) }, example.traceId)) }),
                   /* @__PURE__ */ jsx(
@@ -169,18 +146,7 @@ function ThemeDetailPanel({
                 ] })
               ] }),
               snapshotTotal > 1 && /* @__PURE__ */ jsxs("section", { "aria-labelledby": "theme-trend-heading", children: [
-                /* @__PURE__ */ jsx(
-                  Txt,
-                  {
-                    as: "h2",
-                    variant: "caption",
-                    tone: "muted",
-                    font: "mono",
-                    id: "theme-trend-heading",
-                    className: "tracking-wider uppercase",
-                    children: "Trend"
-                  }
-                ),
+                /* @__PURE__ */ jsx(Txt, { as: "h2", variant: "eyebrow", tone: "muted", id: "theme-trend-heading", children: "Trend" }),
                 historyQuery.isPending && /* @__PURE__ */ jsx(Txt, { tone: "muted", className: "mt-3", children: "Loading trend…" }),
                 historyQuery.isError && /* @__PURE__ */ jsx(Txt, { className: "mt-3 text-destructive-foreground", children: "Unable to load the trend." }),
                 oldestHistoryPoint !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -1 +1 @@
-{"version":3,"file":"theme-detail-panel.es.js","sources":["../../../src/ee/signals/theme-detail-panel.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager';\nimport { useThemeDetail, useThemeExamples, useThemeHistory } from './hooks';\nimport { 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              font=\"mono\"\n              className=\"tracking-widest\"\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\n                      as=\"h2\"\n                      variant=\"caption\"\n                      tone=\"muted\"\n                      font=\"mono\"\n                      id=\"theme-summary-heading\"\n                      className=\"tracking-wider uppercase\"\n                    >\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\" font=\"mono\" 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\n                      as=\"h2\"\n                      variant=\"caption\"\n                      tone=\"muted\"\n                      font=\"mono\"\n                      id=\"theme-examples-heading\"\n                      className=\"tracking-wider uppercase\"\n                    >\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                                  className={cn(\n                                    raisedSurfaceStyle,\n                                    'state-layer w-full cursor-pointer rounded-md p-3 text-left text-body text-foreground',\n                                  )}\n                                  onClick={() => setInsightTraceId(example.traceId)}\n                                >\n                                  {example.signalText}\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\n                        as=\"h2\"\n                        variant=\"caption\"\n                        tone=\"muted\"\n                        font=\"mono\"\n                        id=\"theme-trend-heading\"\n                        className=\"tracking-wider uppercase\"\n                      >\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"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme-detail-panel.es.js","sources":["../../../src/ee/signals/theme-detail-panel.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { EXAMPLES_PAGE_SIZE, ExamplesPager } from './examples-pager';\nimport { useThemeDetail, useThemeExamples, useThemeHistory } from './hooks';\nimport { 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"],"names":[],"mappings":"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"}

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

@@ -8,7 +8,7 @@ const ee_signals_signalColors = require('./signal-colors.cjs.js');
 const ee_signals_signalFormatting = require('./signal-formatting.cjs.js');
 const ee_signals_useTraceIntelligence = require('./use-trace-intelligence.cjs.js');
 const Button = require('../../Button-CXhSUBxN.cjs');
-const Txt = require('../../Txt-DNnvlrBo.cjs');
+const Txt = require('../../Txt-DFPibRb3.cjs');
 
 function selectionLabel(catalog, selection) {
   return `${ee_signals_signalFormatting.signalLabel(catalog, selection.signalName)} · ${selection.kind === "theme" ? selection.label : "Noise"}`;
@@ -59,12 +59,12 @@ function ThemeFilterBanner({
             "button",
             {
               "aria-label": selections.length === 1 ? `Clear ${selection.kind} filter` : `Clear filter ${selectionLabel(signalCatalog, selection)}`,
-              className: "state-layer flex items-center gap-1.5 rounded-full border border-border bg-background py-1 pr-2 pl-2.5 text-column text-foreground",
               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",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "rounded-0.5 size-2", style: { backgroundColor: color } }),
-                selectionLabel(signalCatalog, selection),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { backgroundColor: color }, className: "rounded-0.5 size-2" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "column", className: "block", children: selectionLabel(signalCatalog, selection) }),
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true", className: "size-3.5" })
               ]
             },

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

@@ -1 +1 @@
-{"version":3,"file":"theme-filter-banner.cjs.js","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            className=\"state-layer flex items-center gap-1.5 rounded-full border border-border bg-background py-1 pr-2 pl-2.5 text-column text-foreground\"\n            onClick={() => onRemove(selection.signalName)}\n            type=\"button\"\n          >\n            <span aria-hidden=\"true\" className=\"rounded-0.5 size-2\" style={{ backgroundColor: color }} />\n            {selectionLabel(signalCatalog, selection)}\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"],"names":["signalLabel","useTraceIntelligence","getSignalColor","jsxs","jsx","X","Txt","Button","Eye"],"mappings":";;;;;;;;;;;;AASA,SAAS,cAAA,CAAe,SAAwC,SAAA,EAA2B;AACzF,EAAA,OAAO,CAAA,EAAGA,uCAAA,CAAY,OAAA,EAAS,SAAA,CAAU,UAAU,CAAC,CAAA,GAAA,EAAM,SAAA,CAAU,IAAA,KAAS,OAAA,GAAU,SAAA,CAAU,KAAA,GAAQ,OAAO,CAAA,CAAA;AAClH;AAEA,SAAS,aAAA,CAAc;AAAA,EACrB,UAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,IAAI,eAAe,OAAO,uCAAA;AAC1B,EAAA,IAAI,kBAAA,KAAuB,QAAW,OAAO,0BAAA;AAC7C,EAAA,MAAM,gBAAgB,UAAA,CAAW,MAAA,KAAW,CAAA,GAAI,UAAA,CAAW,CAAC,CAAA,GAAI,MAAA;AAChE,EAAA,IAAI,aAAA,EAAe,SAAS,OAAA,EAAS;AACnC,IAAA,OAAO,CAAA,YAAA,EAAe,kBAAkB,CAAA,IAAA,EAAO,eAAe,CAAA,yBAAA,CAAA;AAAA,EAChE;AACA,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,OAAO,CAAA,YAAA,EAAe,kBAAkB,CAAA,IAAA,EAAO,eAAe,CAAA,oCAAA,CAAA;AAAA,EAChE;AACA,EAAA,OAAO,CAAA,YAAA,EAAe,kBAAkB,CAAA,IAAA,EAAO,eAAe,CAAA,gCAAA,CAAA;AAChE;AAEO,SAAS,iBAAA,CAAkB;AAAA,EAChC,UAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAQG;AACD,EAAA,MAAM,EAAE,aAAA,EAAc,GAAIC,oDAAA,EAAqB;AAC/C,EAAA,MAAM,SAAS,UAAA,CAAW,GAAA,CAAI,eAAaC,sCAAA,CAAe,SAAA,CAAU,UAAU,CAAC,CAAA;AAC/E,EAAA,MAAM,eAAA,GAAkB,UAAA,CAAW,EAAA,CAAG,EAAE,CAAA;AACxC,EAAA,MAAM,iBAAiB,CAAA,uBAAA,EAA0B,MAAA,CAAO,MAAA,GAAS,CAAA,GAAI,OAAO,IAAA,CAAK,IAAI,CAAA,GAAI,CAAA,EAAG,OAAO,CAAC,CAAC,KAAK,MAAA,CAAO,CAAC,CAAC,CAAA,CAAE,CAAA,CAAA,CAAA;AAErH,EAAA,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAW,uBAAA;AAAA,MACX,SAAA,EAAU,qGAAA;AAAA,MACV,KAAA,EAAO;AAAA,QACL,eAAA,EAAiB,8CAA8C,cAAc,CAAA,CAAA;AAAA,QAC7E,cAAA,EAAgB;AAAA,OAClB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,GAAA,CAAI,CAAC,SAAA,EAAW,KAAA,KAAU;AACpC,UAAA,MAAM,KAAA,GAAQ,OAAO,KAAK,CAAA;AAC1B,UAAA,uBACEA,eAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cAEC,YAAA,EACE,UAAA,CAAW,MAAA,KAAW,CAAA,GAClB,CAAA,MAAA,EAAS,SAAA,CAAU,IAAI,CAAA,OAAA,CAAA,GACvB,CAAA,aAAA,EAAgB,cAAA,CAAe,aAAA,EAAe,SAAS,CAAC,CAAA,CAAA;AAAA,cAE9D,SAAA,EAAU,oIAAA;AAAA,cACV,OAAA,EAAS,MAAM,QAAA,CAAS,SAAA,CAAU,UAAU,CAAA;AAAA,cAC5C,IAAA,EAAK,QAAA;AAAA,cAEL,QAAA,EAAA;AAAA,gCAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,eAAY,MAAA,EAAO,SAAA,EAAU,sBAAqB,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,EAAM,EAAG,CAAA;AAAA,gBAC1F,cAAA,CAAe,eAAe,SAAS,CAAA;AAAA,gCACxCA,cAAA,CAACC,aAAA,EAAA,EAAE,aAAA,EAAY,MAAA,EAAO,WAAU,UAAA,EAAW;AAAA;AAAA,aAAA;AAAA,YAZtC,SAAA,CAAU;AAAA,WAajB;AAAA,QAEJ,CAAC,CAAA;AAAA,wBACDD,cAAA,CAACE,OAAA,EAAA,EAAI,EAAA,EAAG,MAAA,EAAO,SAAQ,SAAA,EAAU,IAAA,EAAK,OAAA,EACnC,QAAA,EAAA,aAAA,CAAc,EAAE,UAAA,EAAY,kBAAA,EAAoB,eAAA,EAAiB,aAAA,EAAe,CAAA,EACnF,CAAA;AAAA,QACC,CAAC,aAAA,IAAiB,kBAAA,KAAuB,MAAA,IAAa,eAAA,mBACrDF,cAAA;AAAA,UAACG,aAAA;AAAA,UAAA;AAAA,YACC,IAAA,iCAAOC,eAAA,EAAA,EAAI,CAAA;AAAA,YACX,YAAA,EACE,eAAA,CAAgB,IAAA,KAAS,OAAA,GACrB,CAAA,uBAAA,EAA0B,eAAA,CAAgB,KAAK,CAAA,CAAA,GAC/C,CAAA,uBAAA,EAA0BR,uCAAA,CAAY,aAAA,EAAe,eAAA,CAAgB,UAAU,CAAC,CAAA,CAAA;AAAA,YAEtF,OAAA,EAAS,MAAM,aAAA,CAAc,eAAe,CAAA;AAAA,YAC5C,IAAA,EAAK,IAAA;AAAA,YACL,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAQ,OAAA;AAAA,YACT,QAAA,EAAA;AAAA;AAAA,SAED,GACE,IAAA;AAAA,QACH,WAAW,MAAA,GAAS,CAAA,kCAClBO,aAAA,EAAA,EAAO,IAAA,iCAAOF,aAAA,EAAA,EAAE,CAAA,EAAI,OAAA,EAAS,OAAA,EAAS,MAAK,IAAA,EAAK,IAAA,EAAK,UAAS,OAAA,EAAQ,OAAA,EAAQ,uBAE/E,CAAA,GACE;AAAA;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"theme-filter-banner.cjs.js","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"],"names":["signalLabel","useTraceIntelligence","getSignalColor","jsxs","jsx","Txt","X","Button","Eye"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import { getSignalColor } from './signal-colors.es.js';
 import { signalLabel } from './signal-formatting.es.js';
 import { useTraceIntelligence } from './use-trace-intelligence.es.js';
 import { B as Button } from '../../Button-D43ghVKt.js';
-import { T as Txt } from '../../Txt-C3cYJgKU.js';
+import { T as Txt } from '../../Txt-CuuPO9Ho.js';
 
 function selectionLabel(catalog, selection) {
   return `${signalLabel(catalog, selection.signalName)} · ${selection.kind === "theme" ? selection.label : "Noise"}`;
@@ -55,12 +55,12 @@ function ThemeFilterBanner({
             "button",
             {
               "aria-label": selections.length === 1 ? `Clear ${selection.kind} filter` : `Clear filter ${selectionLabel(signalCatalog, selection)}`,
-              className: "state-layer flex items-center gap-1.5 rounded-full border border-border bg-background py-1 pr-2 pl-2.5 text-column text-foreground",
               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",
               children: [
-                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "rounded-0.5 size-2", style: { backgroundColor: color } }),
-                selectionLabel(signalCatalog, selection),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { backgroundColor: color }, className: "rounded-0.5 size-2" }),
+                /* @__PURE__ */ jsx(Txt, { as: "span", variant: "column", className: "block", children: selectionLabel(signalCatalog, selection) }),
                 /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" })
               ]
             },

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

@@ -1 +1 @@
-{"version":3,"file":"theme-filter-banner.es.js","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            className=\"state-layer flex items-center gap-1.5 rounded-full border border-border bg-background py-1 pr-2 pl-2.5 text-column text-foreground\"\n            onClick={() => onRemove(selection.signalName)}\n            type=\"button\"\n          >\n            <span aria-hidden=\"true\" className=\"rounded-0.5 size-2\" style={{ backgroundColor: color }} />\n            {selectionLabel(signalCatalog, selection)}\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"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme-filter-banner.es.js","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"],"names":[],"mappings":"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"}

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

@@ -10,7 +10,7 @@ const ee_signals_signalsErrorState = require('./signals-error-state.cjs.js');
 const ee_signals_signalsLoadingSkeleton = require('./signals-loading-skeleton.cjs.js');
 const ee_signals_snapshotTimeline = require('./snapshot-timeline.cjs.js');
 const ee_signals_snapshotTimelineData = require('./snapshot-timeline-data.cjs.js');
-const Txt = require('../../Txt-DNnvlrBo.cjs');
+const Txt = require('../../Txt-DFPibRb3.cjs');
 
 function ThemeLifelines({
   entityId,
@@ -57,7 +57,7 @@ function ThemeLifelines({
       ),
       /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "w-9 shrink-0" })
     ] }),
-    snapshots[selectedIndex] ? /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", tone: "muted", font: "mono", "data-testid": "snapshot-summary", children: ee_signals_sankeySignalsData.snapshotSummaryLabel(snapshots[selectedIndex], flows[selectedIndex]) }) : null,
+    snapshots[selectedIndex] ? /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", tone: "muted", "data-testid": "snapshot-summary", children: ee_signals_sankeySignalsData.snapshotSummaryLabel(snapshots[selectedIndex], flows[selectedIndex]) }) : null,
     signalNames.map((signalName) => /* @__PURE__ */ jsxRuntime.jsx(
       ee_signals_signalLifelines.SignalLifelines,
       {

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

@@ -1 +1 @@
-{"version":3,"file":"theme-lifelines.cjs.js","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\" font=\"mono\" 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"],"names":["useThemeFlows","timelineTickPositions","jsx","SignalsErrorState","SignalsFrameLoadingSkeleton","jsxs","TimelineTrack","Txt","SignalLifelines"],"mappings":";;;;;;;;;;;;;;AAiBO,SAAS,cAAA,CAAe;AAAA,EAC7B,QAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EASG;AACD,EAAA,MAAM,WAAA,GAAcA,4CAAA;AAAA,IAClB,QAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA,CAAU,GAAA,CAAI,CAAA,QAAA,KAAY,QAAA,CAAS,UAAU;AAAA,GAC/C;AACA,EAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,GAAA,CAAI,CAAA,KAAA,KAAS,MAAM,IAAI,CAAA;AACjD,EAAA,MAAM,iBAAA,GAAoB,WAAA,CAAY,MAAA,CAAO,CAAA,KAAA,KAAS,MAAM,OAAO,CAAA;AACnE,EAAA,MAAM,SAAA,GAAYC,sDAAsB,SAAS,CAAA;AAEjD,EAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,IAAA,uBACEC,cAAA;AAAA,MAACC,8CAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,iCAAA;AAAA,QACR,OAAA,EAAS,MAAM,KAAK,OAAA,CAAQ,GAAA,CAAI,iBAAA,CAAkB,GAAA,CAAI,CAAA,KAAA,KAAS,KAAA,CAAM,OAAA,EAAS,CAAC;AAAA;AAAA,KACjF;AAAA,EAEJ;AAEA,EAAA,IAAI,CAAC,KAAA,CAAM,IAAA,CAAK,CAAA,IAAA,KAAQ,IAAA,KAAS,MAAS,CAAA,EAAG;AAC3C,IAAA,sCACG,SAAA,EAAA,EAAQ,YAAA,EAAW,iBAAA,EAClB,QAAA,kBAAAD,cAAA,CAACE,iEAA4B,CAAA,EAC/B,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEC,eAAA,CAAC,SAAA,EAAA,EAAQ,YAAA,EAAW,iBAAA,EAAkB,WAAU,WAAA,EAE9C,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,sBAAAH,cAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,SAAA,EAAU,eAAA,EAAgB,CAAA;AAAA,sBACnDA,cAAA;AAAA,QAACI,yCAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,UAAA,EAAY,cAAA;AAAA,UACZ,OAAA,sBAAa,GAAA,CAAgC,CAAC,CAAC,aAAA,EAAe,UAAU,CAAC,CAAC,CAAA;AAAA,UAC1E,YAAA,EAAc;AAAA;AAAA,OAChB;AAAA,sBACAJ,cAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAU,cAAA,EAAe;AAAA,KAAA,EACpD,CAAA;AAAA,IACC,SAAA,CAAU,aAAa,CAAA,mBACtBA,cAAA,CAACK,WAAI,OAAA,EAAQ,SAAA,EAAU,MAAK,OAAA,EAAQ,IAAA,EAAK,QAAO,aAAA,EAAY,kBAAA,EACzD,4DAAqB,SAAA,CAAU,aAAa,GAAG,KAAA,CAAM,aAAa,CAAC,CAAA,EACtE,CAAA,GACE,IAAA;AAAA,IACH,WAAA,CAAY,IAAI,CAAA,UAAA,qBACfL,cAAA;AAAA,MAACM,0CAAA;AAAA,MAAA;AAAA,QAEC,UAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OAAA;AAAA,MALK;AAAA,KAOR;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"theme-lifelines.cjs.js","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"],"names":["useThemeFlows","timelineTickPositions","jsx","SignalsErrorState","SignalsFrameLoadingSkeleton","jsxs","TimelineTrack","Txt","snapshotSummaryLabel","SignalLifelines"],"mappings":";;;;;;;;;;;;;;AAiBO,SAAS,cAAA,CAAe;AAAA,EAC7B,QAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EASG;AACD,EAAA,MAAM,WAAA,GAAcA,4CAAA;AAAA,IAClB,QAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA,CAAU,GAAA,CAAI,CAAA,QAAA,KAAY,QAAA,CAAS,UAAU;AAAA,GAC/C;AACA,EAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,GAAA,CAAI,CAAA,KAAA,KAAS,MAAM,IAAI,CAAA;AACjD,EAAA,MAAM,iBAAA,GAAoB,WAAA,CAAY,MAAA,CAAO,CAAA,KAAA,KAAS,MAAM,OAAO,CAAA;AACnE,EAAA,MAAM,SAAA,GAAYC,sDAAsB,SAAS,CAAA;AAEjD,EAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,IAAA,uBACEC,cAAA;AAAA,MAACC,8CAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,iCAAA;AAAA,QACR,OAAA,EAAS,MAAM,KAAK,OAAA,CAAQ,GAAA,CAAI,iBAAA,CAAkB,GAAA,CAAI,CAAA,KAAA,KAAS,KAAA,CAAM,OAAA,EAAS,CAAC;AAAA;AAAA,KACjF;AAAA,EAEJ;AAEA,EAAA,IAAI,CAAC,KAAA,CAAM,IAAA,CAAK,CAAA,IAAA,KAAQ,IAAA,KAAS,MAAS,CAAA,EAAG;AAC3C,IAAA,sCACG,SAAA,EAAA,EAAQ,YAAA,EAAW,iBAAA,EAClB,QAAA,kBAAAD,cAAA,CAACE,iEAA4B,CAAA,EAC/B,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEC,eAAA,CAAC,SAAA,EAAA,EAAQ,YAAA,EAAW,iBAAA,EAAkB,WAAU,WAAA,EAE9C,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,sBAAAH,cAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,SAAA,EAAU,eAAA,EAAgB,CAAA;AAAA,sBACnDA,cAAA;AAAA,QAACI,yCAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,UAAA,EAAY,cAAA;AAAA,UACZ,OAAA,sBAAa,GAAA,CAAgC,CAAC,CAAC,aAAA,EAAe,UAAU,CAAC,CAAC,CAAA;AAAA,UAC1E,YAAA,EAAc;AAAA;AAAA,OAChB;AAAA,sBACAJ,cAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAU,cAAA,EAAe;AAAA,KAAA,EACpD,CAAA;AAAA,IACC,UAAU,aAAa,CAAA,kCACrBK,OAAA,EAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,eAAY,kBAAA,EAC7C,QAAA,EAAAC,iDAAA,CAAqB,UAAU,aAAa,CAAA,EAAG,MAAM,aAAa,CAAC,GACtE,CAAA,GACE,IAAA;AAAA,IACH,WAAA,CAAY,IAAI,CAAA,UAAA,qBACfN,cAAA;AAAA,MAACO,0CAAA;AAAA,MAAA;AAAA,QAEC,UAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OAAA;AAAA,MALK;AAAA,KAOR;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -6,7 +6,7 @@ import { SignalsErrorState } from './signals-error-state.es.js';
 import { SignalsFrameLoadingSkeleton } from './signals-loading-skeleton.es.js';
 import { TimelineTrack } from './snapshot-timeline.es.js';
 import { timelineTickPositions } from './snapshot-timeline-data.es.js';
-import { T as Txt } from '../../Txt-C3cYJgKU.js';
+import { T as Txt } from '../../Txt-CuuPO9Ho.js';
 
 function ThemeLifelines({
   entityId,
@@ -53,7 +53,7 @@ function ThemeLifelines({
       ),
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "w-9 shrink-0" })
     ] }),
-    snapshots[selectedIndex] ? /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "muted", font: "mono", "data-testid": "snapshot-summary", children: snapshotSummaryLabel(snapshots[selectedIndex], flows[selectedIndex]) }) : null,
+    snapshots[selectedIndex] ? /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "muted", "data-testid": "snapshot-summary", children: snapshotSummaryLabel(snapshots[selectedIndex], flows[selectedIndex]) }) : null,
     signalNames.map((signalName) => /* @__PURE__ */ jsx(
       SignalLifelines,
       {

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

@@ -1 +1 @@
-{"version":3,"file":"theme-lifelines.es.js","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\" font=\"mono\" 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"],"names":[],"mappings":";;;;;;;;;;AAiBO,SAAS,cAAA,CAAe;AAAA,EAC7B,QAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EASG;AACD,EAAA,MAAM,WAAA,GAAc,aAAA;AAAA,IAClB,QAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA,CAAU,GAAA,CAAI,CAAA,QAAA,KAAY,QAAA,CAAS,UAAU;AAAA,GAC/C;AACA,EAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,GAAA,CAAI,CAAA,KAAA,KAAS,MAAM,IAAI,CAAA;AACjD,EAAA,MAAM,iBAAA,GAAoB,WAAA,CAAY,MAAA,CAAO,CAAA,KAAA,KAAS,MAAM,OAAO,CAAA;AACnE,EAAA,MAAM,SAAA,GAAY,sBAAsB,SAAS,CAAA;AAEjD,EAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,IAAA,uBACE,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,iCAAA;AAAA,QACR,OAAA,EAAS,MAAM,KAAK,OAAA,CAAQ,GAAA,CAAI,iBAAA,CAAkB,GAAA,CAAI,CAAA,KAAA,KAAS,KAAA,CAAM,OAAA,EAAS,CAAC;AAAA;AAAA,KACjF;AAAA,EAEJ;AAEA,EAAA,IAAI,CAAC,KAAA,CAAM,IAAA,CAAK,CAAA,IAAA,KAAQ,IAAA,KAAS,MAAS,CAAA,EAAG;AAC3C,IAAA,2BACG,SAAA,EAAA,EAAQ,YAAA,EAAW,iBAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,+BAA4B,CAAA,EAC/B,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAQ,YAAA,EAAW,iBAAA,EAAkB,WAAU,WAAA,EAE9C,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,SAAA,EAAU,eAAA,EAAgB,CAAA;AAAA,sBACnD,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,UAAA,EAAY,cAAA;AAAA,UACZ,OAAA,sBAAa,GAAA,CAAgC,CAAC,CAAC,aAAA,EAAe,UAAU,CAAC,CAAC,CAAA;AAAA,UAC1E,YAAA,EAAc;AAAA;AAAA,OAChB;AAAA,sBACA,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAU,cAAA,EAAe;AAAA,KAAA,EACpD,CAAA;AAAA,IACC,SAAA,CAAU,aAAa,CAAA,mBACtB,GAAA,CAAC,OAAI,OAAA,EAAQ,SAAA,EAAU,MAAK,OAAA,EAAQ,IAAA,EAAK,QAAO,aAAA,EAAY,kBAAA,EACzD,+BAAqB,SAAA,CAAU,aAAa,GAAG,KAAA,CAAM,aAAa,CAAC,CAAA,EACtE,CAAA,GACE,IAAA;AAAA,IACH,WAAA,CAAY,IAAI,CAAA,UAAA,qBACf,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QAEC,UAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OAAA;AAAA,MALK;AAAA,KAOR;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"theme-lifelines.es.js","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"],"names":[],"mappings":";;;;;;;;;;AAiBO,SAAS,cAAA,CAAe;AAAA,EAC7B,QAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EASG;AACD,EAAA,MAAM,WAAA,GAAc,aAAA;AAAA,IAClB,QAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA,CAAU,GAAA,CAAI,CAAA,QAAA,KAAY,QAAA,CAAS,UAAU;AAAA,GAC/C;AACA,EAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,GAAA,CAAI,CAAA,KAAA,KAAS,MAAM,IAAI,CAAA;AACjD,EAAA,MAAM,iBAAA,GAAoB,WAAA,CAAY,MAAA,CAAO,CAAA,KAAA,KAAS,MAAM,OAAO,CAAA;AACnE,EAAA,MAAM,SAAA,GAAY,sBAAsB,SAAS,CAAA;AAEjD,EAAA,IAAI,iBAAA,CAAkB,SAAS,CAAA,EAAG;AAChC,IAAA,uBACE,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,iCAAA;AAAA,QACR,OAAA,EAAS,MAAM,KAAK,OAAA,CAAQ,GAAA,CAAI,iBAAA,CAAkB,GAAA,CAAI,CAAA,KAAA,KAAS,KAAA,CAAM,OAAA,EAAS,CAAC;AAAA;AAAA,KACjF;AAAA,EAEJ;AAEA,EAAA,IAAI,CAAC,KAAA,CAAM,IAAA,CAAK,CAAA,IAAA,KAAQ,IAAA,KAAS,MAAS,CAAA,EAAG;AAC3C,IAAA,2BACG,SAAA,EAAA,EAAQ,YAAA,EAAW,iBAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,+BAA4B,CAAA,EAC/B,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAQ,YAAA,EAAW,iBAAA,EAAkB,WAAU,WAAA,EAE9C,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,SAAA,EAAU,eAAA,EAAgB,CAAA;AAAA,sBACnD,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,UAAA,EAAY,cAAA;AAAA,UACZ,OAAA,sBAAa,GAAA,CAAgC,CAAC,CAAC,aAAA,EAAe,UAAU,CAAC,CAAC,CAAA;AAAA,UAC1E,YAAA,EAAc;AAAA;AAAA,OAChB;AAAA,sBACA,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,WAAU,cAAA,EAAe;AAAA,KAAA,EACpD,CAAA;AAAA,IACC,UAAU,aAAa,CAAA,uBACrB,GAAA,EAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,eAAY,kBAAA,EAC7C,QAAA,EAAA,oBAAA,CAAqB,UAAU,aAAa,CAAA,EAAG,MAAM,aAAa,CAAC,GACtE,CAAA,GACE,IAAA;AAAA,IACH,WAAA,CAAY,IAAI,CAAA,UAAA,qBACf,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QAEC,UAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OAAA;AAAA,MALK;AAAA,KAOR;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -6,6 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const ee_signals_signalColors = require('./signal-colors.cjs.js');
 const ee_signals_signalFormatting = require('./signal-formatting.cjs.js');
 const tooltip = require('../../tooltip-DIZ5oqjV.cjs');
+const Txt = require('../../Txt-DFPibRb3.cjs');
 
 const TREND_CHART_HEIGHT = 32;
 function trendPointLabel(point) {
@@ -72,9 +73,9 @@ function ThemeTrendChart({ points, signalName }) {
         ] }, point.snapshotId);
       })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex justify-between font-mono text-caption text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: ee_signals_signalFormatting.formatSnapshotDate(firstPoint.startedAt) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: ee_signals_signalFormatting.formatSnapshotDate(lastPoint.startedAt) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { tone: "muted", as: "span", variant: "caption", children: ee_signals_signalFormatting.formatSnapshotDate(firstPoint.startedAt) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { tone: "muted", as: "span", variant: "caption", children: ee_signals_signalFormatting.formatSnapshotDate(lastPoint.startedAt) })
     ] })
   ] });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"theme-trend-chart.cjs.js","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';\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 font-mono text-caption text-muted-foreground\">\n        <span>{formatSnapshotDate(firstPoint.startedAt)}</span>\n        <span>{formatSnapshotDate(lastPoint.startedAt)}</span>\n      </div>\n    </div>\n  );\n}\n"],"names":["formatSnapshotDate","traceLabel","getSignalColor","jsxs","jsx","getSignalAreaClass","Tooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}
+{"version":3,"file":"theme-trend-chart.cjs.js","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"],"names":["formatSnapshotDate","traceLabel","getSignalColor","jsxs","jsx","getSignalAreaClass","Tooltip","TooltipTrigger","TooltipContent","Txt"],"mappings":"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"}

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

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { getSignalColor, getSignalAreaClass } from './signal-colors.es.js';
 import { formatSnapshotDate, traceLabel } from './signal-formatting.es.js';
 import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../tooltip-DsQPiynb.js';
+import { T as Txt } from '../../Txt-CuuPO9Ho.js';
 
 const TREND_CHART_HEIGHT = 32;
 function trendPointLabel(point) {
@@ -68,9 +69,9 @@ function ThemeTrendChart({ points, signalName }) {
         ] }, point.snapshotId);
       })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex justify-between font-mono text-caption text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { children: formatSnapshotDate(firstPoint.startedAt) }),
-      /* @__PURE__ */ jsx("span", { children: formatSnapshotDate(lastPoint.startedAt) })
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex justify-between", children: [
+      /* @__PURE__ */ jsx(Txt, { tone: "muted", as: "span", variant: "caption", children: formatSnapshotDate(firstPoint.startedAt) }),
+      /* @__PURE__ */ jsx(Txt, { tone: "muted", as: "span", variant: "caption", children: formatSnapshotDate(lastPoint.startedAt) })
     ] })
   ] });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"theme-trend-chart.es.js","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';\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 font-mono text-caption text-muted-foreground\">\n        <span>{formatSnapshotDate(firstPoint.startedAt)}</span>\n        <span>{formatSnapshotDate(lastPoint.startedAt)}</span>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme-trend-chart.es.js","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"],"names":[],"mappings":"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"}