@mastra/playground-ui 38.0.1-alpha.2 → 38.1.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @mastra/playground-ui
 
+## 38.1.0-alpha.3
+
+### Minor Changes
+
+- Removed the `Searchbar` component from `@mastra/playground-ui`. Compose search inputs with `InputGroup` instead so search remains a documented use case of the existing input composition primitive. ([#18727](https://github.com/mastra-ai/mastra/pull/18727))
+
+  **Before**
+
+  ```tsx
+  import { Searchbar } from '@mastra/playground-ui/components/Searchbar';
+
+  <Searchbar label="Search tools" placeholder="Search tools..." onSearch={setSearch} />;
+  ```
+
+  **After**
+
+  ```tsx
+  import { InputGroup, InputGroupAddon, InputGroupInput } from '@mastra/playground-ui/components/InputGroup';
+  import { SearchIcon } from 'lucide-react';
+
+  <InputGroup variant="outline">
+    <InputGroupAddon align="inline-start">
+      <SearchIcon />
+    </InputGroupAddon>
+    <InputGroupInput
+      type="search"
+      aria-label="Search tools"
+      placeholder="Search tools..."
+      onChange={event => setSearch(event.target.value)}
+    />
+  </InputGroup>;
+  ```
+
+- **Signals now show live Entity-Learning data** ([#18699](https://github.com/mastra-ai/mastra/pull/18699))
+
+  The Signals page is no longer static. Select an agent reported by the platform and Signals fetches that agent's signals and their clusters live from the Entity-Learning API, replacing the previous hardcoded mock data. Each available signal loads its real clusters (topics) and traces, with a scatter-plot chart for the selected topics.
+
+  **What changed**
+  - Added an agent filter at the top of the Signals page, mirroring the traces filter, so you can inspect signals for any agent on the server.
+  - The Signals overview and details pages now render live Entity-Learning topics, examples, and points directly, with shape-matching skeletons while data loads, centered empty states, and explicit error states.
+  - Clicking a cluster card opens its topic by default, and the Signals breadcrumbs preserve the selected entity and topic query params on back-navigation.
+  - Signals detail navigation keeps selected clusters, trace examples, and chart filters in sync when moving between signals or entities.
+
+  **Gating**
+
+  Studio's served HTML exposes `MASTRA_ORGANIZATION_ID`, `MASTRA_PLATFORM_PROJECT_ID`, and `MASTRA_PLATFORM_OBSERVABILITY_ENDPOINT` to the browser so the Signals page can call the Entity-Learning API. The route is gated on the platform observability config, and the `MASTRA_SIGNALS_UI` flag guards the sidebar Signals nav link.
+
+### Patch Changes
+
+- Fixed the Signals page showing empty clusters for every signal except the most recently clustered one. Cluster queries no longer pin the entity-wide latest run id: the API resolves the latest run per signal, and the details page reuses the run resolved by the topics response for its examples and points queries. ([#18786](https://github.com/mastra-ai/mastra/pull/18786))
+
+- Updated dependencies [[`700619b`](https://github.com/mastra-ai/mastra/commit/700619b61d572e592cbaaf758121d168844ca4d2), [`0c3d4bc`](https://github.com/mastra-ai/mastra/commit/0c3d4bcae13ea3699d379403e6f350d5cf4efe9f), [`17369b2`](https://github.com/mastra-ai/mastra/commit/17369b25250561e9ed994ae509be1d15bfb33bcb), [`bcae929`](https://github.com/mastra-ai/mastra/commit/bcae929945cbf265bd9f327cc715ecafa072b5b9), [`b33822e`](https://github.com/mastra-ai/mastra/commit/b33822e8d470884954b02f7b0745407ee4ef74b1), [`d5c11e3`](https://github.com/mastra-ai/mastra/commit/d5c11e3ba5045969caa7272a7bd1fd141c93ab6c), [`ff80671`](https://github.com/mastra-ai/mastra/commit/ff8067185e208b27198b4e5b71803013175c3643), [`dab1257`](https://github.com/mastra-ai/mastra/commit/dab1257b64e4ed576dc5038bb7a3f7072338bc9f), [`705ff39`](https://github.com/mastra-ai/mastra/commit/705ff3969e57214ff2fdaf3815d751dd558886ed), [`e6fbd5b`](https://github.com/mastra-ai/mastra/commit/e6fbd5bfdc28e92c0c0433f29aa1bc152d3430f6), [`6f2026c`](https://github.com/mastra-ai/mastra/commit/6f2026cdf114ff1e21e49133ca774ec7d5085059), [`ff80671`](https://github.com/mastra-ai/mastra/commit/ff8067185e208b27198b4e5b71803013175c3643), [`f890eda`](https://github.com/mastra-ai/mastra/commit/f890eda2c8a2ae83d9b30bc6d85842f93b6c266b)]:
+  - @mastra/core@1.49.0-alpha.3
+  - @mastra/memory@1.22.1-alpha.1
+  - @mastra/client-js@1.29.1-alpha.3
+  - @mastra/react@1.2.2-alpha.3
+
 ## 38.0.1-alpha.2
 
 ### Patch Changes

package/dist/components/Columns.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const multiColumn = require('../multi-column-C7amy3AM.cjs');
+const multiColumn = require('../multi-column-DGAsiBPq.cjs');
 
 
 

package/dist/components/Columns.es.js

@@ -1,2 +1,2 @@
-export { C as Column, a as Columns, M as MultiColumn } from '../multi-column-BFzWhWNb.js';
+export { C as Column, a as Columns, M as MultiColumn } from '../multi-column-BR3a4MvZ.js';
 //# sourceMappingURL=Columns.es.js.map

package/dist/ee/signals/components/signal-details-page.cjs.js

@@ -3,33 +3,36 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
 const React = require('react');
-require('@mastra/react');
-require('@tanstack/react-query');
-const domains_traces_hooks_useTraces = require('../../../domains/traces/hooks/use-traces.cjs.js');
-require('../../../domains/traces/trace-filters.cjs.js');
+const Button = require('../../../Button-66ghjQV8.cjs');
+const dataList = require('../../../data-list-DDQRmA6L.cjs');
+const inputGroup = require('../../../input-group-CF6DB97L.cjs');
 const scatterPlotChart = require('../../../scatter-plot-chart-CFZO31md.cjs');
+const skeleton = require('../../../skeleton-D5zq7rhk.cjs');
 const tabsTab = require('../../../tabs-tab-B7Ziuuh8.cjs');
 const tabsContent = require('../../../tabs-content-ohtjaVdC.cjs');
-const utils_colors = require('../../../utils/colors.cjs.js');
 const utils_cn = require('../../../cn-vA5sWo9W.cjs');
 const ee_topics_components_topicsLayout = require('../../topics/components/topics-layout.cjs.js');
-const ee_topics_components_topicTraceSummaryList = require('../../topics/components/topic-trace-summary-list.cjs.js');
 const ee_topics_components_topicTraceDetailsPanel = require('../../topics/components/topic-trace-details-panel.cjs.js');
-const ee_signals_signalsChartData = require('../signals-chart-data.cjs.js');
+const ee_signals_hooks_useEntityLearning = require('../hooks/use-entity-learning.cjs.js');
 const ee_signals_signalsData = require('../signals-data.cjs.js');
 
-const SignalTraceSummaryList = ee_topics_components_topicTraceSummaryList.TopicTraceSummaryList;
 const SignalTraceDetailsPanel = ee_topics_components_topicTraceDetailsPanel.TopicTraceDetailsPanel;
 const SignalsLayout = ee_topics_components_topicsLayout.TopicsLayout;
-function findClusterByTraceId(signal, traceId) {
-  if (!signal || !traceId) return void 0;
-  return signal.clusters.find((cluster) => cluster.traceSummaries.some((trace) => trace.id === traceId));
+function clusterColor(topicId) {
+  let hash = 0;
+  for (let i = 0; i < topicId.length; i++) {
+    hash = topicId.charCodeAt(i) + ((hash << 5) - hash);
+    hash = hash & hash;
+  }
+  const hue = Math.abs(hash * 137.508) % 360;
+  return `hsl(${hue}, 70%, 55%)`;
 }
 function SignalClusterSidebar({
-  signal,
-  selectedClusterIds,
-  onClusterSelect,
+  topics,
+  selectedTopicIds,
+  onTopicSelect,
   multiple = false,
   ariaLabel = "Signal clusters"
 }) {
@@ -38,8 +41,8 @@ function SignalClusterSidebar({
     {
       className: "min-h-0 w-72 shrink-0 overflow-y-auto border-r border-border1/60 pr-4 py-4",
       "aria-label": ariaLabel,
-      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", role: multiple ? "group" : void 0, children: signal.clusters.map((cluster) => {
-        const selected = selectedClusterIds.includes(cluster.id);
+      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", role: multiple ? "group" : void 0, children: topics.map((topic) => {
+        const selected = selectedTopicIds.includes(topic.topicId);
         return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -48,13 +51,13 @@ function SignalClusterSidebar({
             "aria-checked": multiple ? selected : void 0,
             "aria-pressed": multiple ? void 0 : selected,
             className: "group cursor-pointer w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-surface3 aria-pressed:bg-surface3 aria-checked:bg-surface3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent1",
-            onClick: () => onClusterSelect(cluster.id),
+            onClick: () => onTopicSelect(topic.topicId),
             children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-start gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
                   className: utils_cn.cn("mt-1.5 h-2 w-2 shrink-0 rounded-full", multiple && !selected && "invisible"),
-                  style: { backgroundColor: utils_colors.stringToColor(cluster.name) }
+                  style: { backgroundColor: clusterColor(topic.topicId) }
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 space-y-1", children: [
@@ -65,7 +68,7 @@ function SignalClusterSidebar({
                       "block text-sm font-medium",
                       multiple && !selected ? "text-neutral3" : "text-neutral5"
                     ),
-                    children: cluster.name
+                    children: topic.name
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -75,44 +78,123 @@ function SignalClusterSidebar({
                       "line-clamp-2 block text-sm",
                       multiple && !selected ? "text-neutral1" : "text-neutral2"
                     ),
-                    children: cluster.description
+                    children: topic.description
                   }
                 )
               ] })
             ] })
           }
-        ) }, cluster.id);
+        ) }, topic.topicId);
       }) })
     }
   );
 }
+function SignalTraceListSkeleton({ rows = 8 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 px-2 py-1", "aria-label": "Loading traces", "aria-busy": "true", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-full rounded-lg" }, index)) });
+}
+function SignalClusterSidebarSkeleton({ rows = 5 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "min-h-0 w-72 shrink-0 overflow-y-auto border-r border-border1/60 pr-4 py-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 px-3 py-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "mt-1.5 h-2 w-2 shrink-0 rounded-full" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-1/2" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-full" })
+    ] })
+  ] }, index)) }) });
+}
+function SignalDetailsSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex h-full min-w-0 flex-col gap-4", "aria-label": "Loading signal", "aria-busy": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-7 w-48" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-64" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 border-b border-border1/60", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "mb-2 h-5 w-20" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "mb-2 h-5 w-16" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 gap-6 overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SignalClusterSidebarSkeleton, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-4 py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-full rounded-lg" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SignalTraceListSkeleton, {})
+      ] })
+    ] })
+  ] });
+}
 function SignalTraceListTab({
-  cluster,
+  examples,
   selectedTraceId,
-  onTraceSelect
+  onTraceSelect,
+  loading = false,
+  pageSize = 25
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SignalTraceSummaryList,
-    {
-      traces: cluster.traceSummaries,
-      selectedTraceId,
-      onTraceSelect
-    }
-  );
+  const [search, setSearch] = React.useState("");
+  const [page, setPage] = React.useState(1);
+  const filtered = React.useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return examples;
+    return examples.filter((example) => example.signalText.toLowerCase().includes(query));
+  }, [examples, search]);
+  const visible = React.useMemo(() => filtered.slice(0, page * pageSize), [filtered, page, pageSize]);
+  const hasMore = visible.length < filtered.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex min-h-0 flex-1 flex-col gap-4", "aria-label": "Topic trace summaries", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(inputGroup.InputGroup, { variant: "outline", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(inputGroup.InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        inputGroup.InputGroupInput,
+        {
+          type: "search",
+          "aria-label": "Search traces",
+          placeholder: "Search traces",
+          onChange: (event) => {
+            setSearch(event.target.value);
+            setPage(1);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      dataList.DataList,
+      {
+        columns: "minmax(12rem,1fr)",
+        className: "min-h-0 flex-1 overflow-hidden rounded-lg border border-border1/60",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.Top, { children: /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.TopCells, { children: /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.TopCell, { children: "Trace summary" }) }) }),
+          loading ? /* @__PURE__ */ jsxRuntime.jsx(SignalTraceListSkeleton, {}) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.NoMatch, { message: "No traces match this subtopic." }) : visible.map((example) => /* @__PURE__ */ jsxRuntime.jsx(
+            dataList.DataList.RowButton,
+            {
+              featured: selectedTraceId === example.traceId,
+              onClick: () => onTraceSelect(example.traceId),
+              "aria-pressed": selectedTraceId === example.traceId,
+              children: /* @__PURE__ */ jsxRuntime.jsx(dataList.DataList.TextCell, { children: example.signalText })
+            },
+            example.exampleId
+          ))
+        ]
+      }
+    ),
+    hasMore && !loading ? /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant: "outline", size: "sm", onClick: () => setPage((currentPage) => currentPage + 1), children: [
+      "Load more traces (",
+      visible.length,
+      " of ",
+      filtered.length,
+      ")"
+    ] }) : null
+  ] });
 }
-function SignalChartTab({ signal, selectedClusterIds, onClusterToggle }) {
-  const selectedClusters = React.useMemo(
-    () => signal.clusters.filter((cluster) => selectedClusterIds.includes(cluster.id)),
-    [signal.clusters, selectedClusterIds]
+function SignalChartTab({ topics, points, selectedTopicIds, onTopicToggle }) {
+  const chartData = React.useMemo(
+    () => points.filter(
+      (point) => point.topicId !== void 0 && selectedTopicIds.includes(point.topicId)
+    ).map((point) => ({ ...point, color: clusterColor(point.topicId) })),
+    [points, selectedTopicIds]
   );
-  const chartData = React.useMemo(() => ee_signals_signalsChartData.getSignalChartData(selectedClusters), [selectedClusters]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-w-0 gap-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       SignalClusterSidebar,
       {
-        signal,
-        selectedClusterIds,
-        onClusterSelect: onClusterToggle,
+        topics,
+        selectedTopicIds,
+        onTopicSelect: onTopicToggle,
         multiple: true,
         ariaLabel: "Chart cluster filters"
       }
@@ -121,29 +203,30 @@ function SignalChartTab({ signal, selectedClusterIds, onClusterToggle }) {
       scatterPlotChart.ScatterPlotChart,
       {
         data: chartData,
-        xKey: "duration",
-        yKey: "spans",
-        nameKey: "name",
+        xKey: "x",
+        yKey: "y",
+        nameKey: "topicId",
         colorKey: "color",
         height: "100%",
         className: "h-full",
-        xLabel: "Duration",
-        yLabel: "Spans",
-        formatX: (value) => `${value}ms`,
-        formatY: (value) => `${value} spans`
+        xLabel: "X",
+        yLabel: "Y"
       }
     ) })
   ] });
 }
 function SignalClusterTabs({
-  signal,
-  selectedCluster,
+  topics,
+  examples,
+  examplesLoading,
+  points,
+  selectedTopicId,
   selectedTraceId,
-  selectedChartClusterIds,
+  selectedChartTopicIds,
   activeTab,
   onActiveTabChange,
-  onClusterSelect,
-  onChartClusterToggle,
+  onTopicSelect,
+  onChartTopicToggle,
   onTraceSelect
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -159,18 +242,12 @@ function SignalClusterTabs({
           /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "chart", children: "Chart" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "trace-list", className: "min-h-0 flex-1 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-w-0 gap-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SignalClusterSidebar,
-            {
-              signal,
-              selectedClusterIds: [selectedCluster.id],
-              onClusterSelect
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SignalClusterSidebar, { topics, selectedTopicIds: [selectedTopicId], onTopicSelect }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 overflow-hidden py-4", children: /* @__PURE__ */ jsxRuntime.jsx(
             SignalTraceListTab,
             {
-              cluster: selectedCluster,
+              examples,
+              loading: examplesLoading,
               selectedTraceId,
               onTraceSelect
             }
@@ -179,54 +256,114 @@ function SignalClusterTabs({
         /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "chart", className: "min-h-0 flex-1 overflow-hidden py-0", children: /* @__PURE__ */ jsxRuntime.jsx(
           SignalChartTab,
           {
-            signal,
-            selectedClusterIds: selectedChartClusterIds,
-            onClusterToggle: onChartClusterToggle
+            topics,
+            points,
+            selectedTopicIds: selectedChartTopicIds,
+            onTopicToggle: onChartTopicToggle
           }
         ) })
       ]
     }
   );
 }
-function SignalDetailsPage({ signalId, selectedTraceId, tracePanel, onTraceSelect }) {
-  const selectedSignal = React.useMemo(() => ee_signals_signalsData.signals.find((signal) => signal.id === signalId), [signalId]);
-  const initialCluster = findClusterByTraceId(selectedSignal, selectedTraceId ?? void 0) ?? selectedSignal?.clusters[0];
-  const [selectedClusterId, setSelectedClusterId] = React.useState(() => initialCluster?.id ?? null);
-  const [selectedChartClusterIds, setSelectedChartClusterIds] = React.useState(
-    () => selectedSignal?.clusters.map((cluster) => cluster.id) ?? []
-  );
+function SignalDetailsPage({
+  signalId,
+  entity,
+  selectedTraceId,
+  initialTopicId,
+  tracePanel,
+  onTraceSelect
+}) {
+  const { data: entities = [], isLoading: entitiesLoading, isError: entitiesError } = ee_signals_hooks_useEntityLearning.useEntities();
+  const resolvedEntity = entities.find((item) => item.entityId === entity?.entityId);
+  const {
+    data: topicsData,
+    isLoading: topicsLoading,
+    isError: topicsError
+  } = ee_signals_hooks_useEntityLearning.useEntityTopics(resolvedEntity?.entityId, signalId);
+  const topics = React.useMemo(() => topicsData?.topics ?? [], [topicsData?.topics]);
+  const runId = topicsData?.run?.runId;
+  const topicSelectionScope = `${signalId ?? ""}:${entity?.entityId ?? ""}:${runId ?? ""}:${initialTopicId ?? ""}`;
+  const chartSelectionScope = `${signalId ?? ""}:${entity?.entityId ?? ""}:${runId ?? ""}`;
+  const topicIds = React.useMemo(() => topics.map((topic) => topic.topicId), [topics]);
+  const topicIdSet = React.useMemo(() => new Set(topicIds), [topicIds]);
+  const [selectedTopic, setSelectedTopic] = React.useState(() => ({
+    scope: topicSelectionScope,
+    topicId: initialTopicId ?? null
+  }));
+  const [selectedChartTopics, setSelectedChartTopics] = React.useState(() => ({
+    scope: chartSelectionScope,
+    topicIds: null
+  }));
   const [activeTab, setActiveTab] = React.useState("trace-list");
-  const selectedCluster = selectedSignal?.clusters.find((cluster) => cluster.id === selectedClusterId) ?? initialCluster;
-  const { data: tracesData } = domains_traces_hooks_useTraces.useTraces({});
-  const resolvedTraceId = tracesData?.spans[0]?.traceId ?? null;
-  const handleTraceSelect = () => {
-    if (!selectedSignal || !resolvedTraceId) return;
-    onTraceSelect(selectedSignal.id, resolvedTraceId);
+  const requestedTopicId = selectedTopic.scope === topicSelectionScope ? selectedTopic.topicId : initialTopicId ?? null;
+  const resolvedTopicId = requestedTopicId && topicIdSet.has(requestedTopicId) ? requestedTopicId : topics[0]?.topicId;
+  const selectedTopicData = topics.find((topic) => topic.topicId === resolvedTopicId);
+  const examplesEnabled = Boolean(resolvedEntity?.entityId && signalId && runId && selectedTopicData);
+  const pointsEnabled = Boolean(resolvedEntity?.entityId && signalId && runId);
+  const chartTopicIds = selectedChartTopics.scope === chartSelectionScope && selectedChartTopics.topicIds ? selectedChartTopics.topicIds.filter((topicId) => topicIdSet.has(topicId)) : topicIds;
+  const {
+    data: examplesData,
+    isLoading: examplesLoading,
+    isFetching: examplesFetching,
+    isError: examplesError
+  } = ee_signals_hooks_useEntityLearning.useEntityTopicExamples(
+    resolvedEntity?.entityId,
+    selectedTopicData?.topicId,
+    examplesEnabled && runId && signalId ? { signalName: signalId, runId } : void 0
+  );
+  const examples = examplesData?.examples ?? [];
+  const examplesPending = examplesLoading || examplesFetching && examplesData === void 0;
+  const { data: pointsData, isError: pointsError } = ee_signals_hooks_useEntityLearning.useEntityPoints(
+    resolvedEntity?.entityId,
+    pointsEnabled && runId && signalId ? { signalName: signalId, runId, includeOutliers: true } : void 0
+  );
+  const points = pointsData?.points ?? [];
+  const handleTraceSelect = (traceId) => {
+    if (!signalId) return;
+    onTraceSelect(signalId, traceId);
   };
-  const handleChartClusterToggle = (clusterId) => {
-    setSelectedChartClusterIds(
-      (current) => current.includes(clusterId) ? current.filter((id) => id !== clusterId) : [...current, clusterId]
-    );
+  const handleTopicSelect = (topicId) => {
+    setSelectedTopic({ scope: topicSelectionScope, topicId });
   };
-  if (!selectedSignal || !selectedCluster) {
+  const handleChartTopicToggle = (topicId) => {
+    setSelectedChartTopics((current) => {
+      const base = current.scope === chartSelectionScope && current.topicIds ? current.topicIds : topicIds;
+      return {
+        scope: chartSelectionScope,
+        topicIds: base.includes(topicId) ? base.filter((id) => id !== topicId) : [...base, topicId]
+      };
+    });
+  };
+  if (entitiesLoading || topicsLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(SignalsLayout, { sidebar: null, children: /* @__PURE__ */ jsxRuntime.jsx(SignalDetailsSkeleton, {}) });
+  }
+  if (entitiesError || topicsError || examplesEnabled && examplesError || pointsEnabled && pointsError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(SignalsLayout, { sidebar: null, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md text-accent2", children: "Failed to load this signal from the observability endpoint." }) });
+  }
+  if (!resolvedEntity || !selectedTopicData) {
     return /* @__PURE__ */ jsxRuntime.jsx(SignalsLayout, { sidebar: null, children: "Signal not found" });
   }
+  const signalName = ee_signals_signalsData.getSignalCatalogEntry(signalId ?? "").name;
   return /* @__PURE__ */ jsxRuntime.jsx(SignalsLayout, { sidebar: null, tracePanel: activeTab === "trace-list" ? tracePanel : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex h-full min-w-0 flex-col gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-icon-xl font-semibold text-neutral6", children: selectedSignal.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-icon-xl font-semibold text-neutral6", children: signalName }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-sm text-neutral3", children: "Explore trace patterns by cluster." })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
       SignalClusterTabs,
       {
-        signal: selectedSignal,
-        selectedCluster,
+        topics,
+        examples,
+        examplesLoading: examplesPending,
+        points,
+        selectedTopicId: selectedTopicData.topicId,
         selectedTraceId,
-        selectedChartClusterIds,
+        selectedChartTopicIds: chartTopicIds,
         activeTab,
         onActiveTabChange: setActiveTab,
-        onClusterSelect: setSelectedClusterId,
-        onChartClusterToggle: handleChartClusterToggle,
+        onTopicSelect: handleTopicSelect,
+        onChartTopicToggle: handleChartTopicToggle,
         onTraceSelect: handleTraceSelect
       }
     ) })