@mastra/playground-ui 36.0.0 → 36.1.0-alpha.1

package/dist/index.cjs.js

@@ -63,6 +63,7 @@ const themeProvider = require('./theme-provider-aO5-jZVp.cjs');
 const themeToggle = require('./theme-toggle-DWtjTo-a.cjs');
 const tooltip = require('./tooltip-j8gUR1Qk.cjs');
 const truncate = require('./truncate-Csk5KmAy.cjs');
+const threadList = require('./thread-list-CX4UNk2L.cjs');
 const buttonsGroup = require('./buttons-group-BvLg2kpv.cjs');
 const mainContent = require('./main-content-CnmMWNin.cjs');
 const mainHeader = require('./main-header-DJLRceP9.cjs');
@@ -105,6 +106,7 @@ const dateTimeRangePicker = require('./date-time-range-picker-DjcVeD-Z.cjs');
 const horizontalBars = require('./horizontal-bars-uPFpgihX.cjs');
 const metricsDataTable = require('./metrics-data-table-AjAA-dqH.cjs');
 const metricsLineChart = require('./metrics-line-chart-D1ZGVepo.cjs');
+const scatterPlotChart = require('./scatter-plot-chart-MLvMlaxH.cjs');
 const StatusBadge = require('./StatusBadge-DKtfODhH.cjs');
 const tokens = require('./tokens.cjs.js');
 const spacings = require('./spacings-BP8L49kn.cjs');
@@ -1553,6 +1555,12 @@ function isBranchesNotSupportedError(error) {
   if (typeof message !== "string") return false;
   return message.includes("does not support listing trace branches");
 }
+function isUnsupportedObservabilityOperationError(error, operation) {
+  if (!error || typeof error !== "object" || !("message" in error)) return false;
+  const message = error.message;
+  if (typeof message !== "string") return false;
+  return message.includes(`does not support listing ${operation}`);
+}
 function isNonRetryableError(error) {
   if (!error || typeof error !== "object") return false;
   if ("status" in error) {
@@ -7865,6 +7873,16 @@ function LogDetailsView({
 function LogsErrorContent({ error, resource, errorTitle }) {
   if (is401UnauthorizedError(error)) return /* @__PURE__ */ jsxRuntime.jsx(SessionExpired.SessionExpired, {});
   if (is403ForbiddenError(error)) return /* @__PURE__ */ jsxRuntime.jsx(PermissionDenied.PermissionDenied, { resource });
+  if (isUnsupportedObservabilityOperationError(error, "logs")) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState.EmptyState,
+      {
+        iconSlot: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleSlashIcon, {}),
+        titleSlot: "Logs are not available with your current storage",
+        descriptionSlot: "The configured observability storage provider does not support listing logs. Switch to a storage provider with logs support to view runtime logs in Studio."
+      }
+    );
+  }
   const message = error instanceof Error ? error.message : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(ErrorState.ErrorState, { title: errorTitle, message: message ?? "Unknown error" });
 }
@@ -8092,6 +8110,7 @@ const NoLogsInfo = ({ datePreset, dateFrom, dateTo } = {}) => {
 };
 
 const LOGS_PER_PAGE = 20;
+const LOGS_REFETCH_INTERVAL_MS = 1e4;
 function getNextPageParam(lastPage, _allPages, lastPageParam) {
   if (lastPage?.pagination?.hasMore) {
     return lastPageParam + 1;
@@ -8111,6 +8130,12 @@ function selectLogs(data) {
   }
   return result;
 }
+function getLogsRefetchInterval(query) {
+  if (isUnsupportedObservabilityOperationError(query.state.error, "logs")) {
+    return false;
+  }
+  return LOGS_REFETCH_INTERVAL_MS;
+}
 const useLogs = ({ filters } = {}) => {
   const client = react.useMastraClient();
   const { inView: isEndOfListInView, setRef: setEndOfListElement } = hooks_useInView.useInView();
@@ -8125,7 +8150,7 @@ const useLogs = ({ filters } = {}) => {
     getNextPageParam,
     select: selectLogs,
     retry: false,
-    refetchInterval: 1e4
+    refetchInterval: getLogsRefetchInterval
   });
   const { hasNextPage, isFetchingNextPage, fetchNextPage, data, isLoading, isError, error } = query;
   React.useEffect(() => {
@@ -8441,6 +8466,735 @@ function useLogsListNavigation(logs, featuredLogId, onFeaturedChange, featuredTr
   };
 }
 
+function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }) {
+  const hasContent = Boolean(children || tracePanel);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 bg-surface2 text-neutral4", children: [
+    sidebar ? /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "min-h-0 w-[22rem] shrink-0 border-r border-border1", children: sidebar }) : null,
+    hasContent ? /* @__PURE__ */ jsxRuntime.jsx("main", { className: contentPadding ? "min-w-0 flex-1 p-4" : "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(reactResizablePanels.Group, { className: "h-full min-h-0 w-full min-w-0", direction: "horizontal", children: [
+      children ? /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "topic-main", className: "min-w-0 pr-2", minSize: 35, children }) : null,
+      tracePanel ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        children ? /* @__PURE__ */ jsxRuntime.jsx(PanelSeparator, {}) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CollapsiblePanel,
+          {
+            direction: "right",
+            id: "topic-trace-details",
+            minSize: 300,
+            maxSize: "70%",
+            defaultSize: children ? "40%" : "100%",
+            collapsedSize: 60,
+            collapsible: true,
+            className: "min-w-0 pl-2",
+            children: tracePanel
+          }
+        )
+      ] }) : null
+    ] }) }) : null
+  ] });
+}
+
+const TOPIC_COLORS = ["#7C3AED", "#2563EB", "#0891B2", "#059669", "#CA8A04", "#EA580C", "#DC2626", "#DB2777"];
+function hashString(value) {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash << 5) - hash + value.charCodeAt(index);
+    hash |= 0;
+  }
+  return Math.abs(hash);
+}
+function getTopicColor(id) {
+  return TOPIC_COLORS[hashString(id) % TOPIC_COLORS.length];
+}
+function getTraceCount(subtopic) {
+  return subtopic.traceSummaries.length;
+}
+function getTopicTraceCount(topic) {
+  return topic.subtopics.reduce((total, subtopic) => total + getTraceCount(subtopic), 0);
+}
+function getTraceShare$1(count, total) {
+  return {
+    count,
+    total,
+    percentage: total > 0 ? Math.round(count / total * 100) : 0
+  };
+}
+function aggregateTopics(topics) {
+  const totalTraceCount = topics.reduce((total, topic) => total + getTopicTraceCount(topic), 0);
+  return topics.map((topic) => ({
+    ...topic,
+    color: topic.color ?? getTopicColor(topic.id),
+    traceCount: getTopicTraceCount(topic),
+    subtopics: topic.subtopics.map((subtopic) => {
+      const traceCount = getTraceCount(subtopic);
+      return {
+        ...subtopic,
+        color: subtopic.color ?? topic.color ?? getTopicColor(subtopic.id),
+        traceCount,
+        traceShare: getTraceShare$1(traceCount, totalTraceCount)
+      };
+    })
+  }));
+}
+function toTime(value) {
+  if (!value) return 0;
+  const time = value instanceof Date ? value.getTime() : new Date(value).getTime();
+  return Number.isNaN(time) ? 0 : time;
+}
+function filterTraceSummaries(traces, search) {
+  const normalizedSearch = search.trim().toLowerCase();
+  if (!normalizedSearch) return traces;
+  return traces.filter(
+    (trace) => [trace.id, trace.name, trace.entityName, trace.status].some(
+      (value) => value?.toLowerCase().includes(normalizedSearch)
+    )
+  );
+}
+function sortTraceSummaries(traces, sort) {
+  return traces.toSorted((left, right) => {
+    switch (sort) {
+      case "oldest":
+        return toTime(left.startedAt) - toTime(right.startedAt);
+      case "duration-desc":
+        return (right.durationMs ?? 0) - (left.durationMs ?? 0);
+      case "duration-asc":
+        return (left.durationMs ?? 0) - (right.durationMs ?? 0);
+      case "newest":
+      default:
+        return toTime(right.startedAt) - toTime(left.startedAt);
+    }
+  });
+}
+function getVisibleTraceSummaries(traces, options) {
+  const filtered = filterTraceSummaries(traces, options.search);
+  const sorted = sortTraceSummaries(filtered, options.sort);
+  const end = options.page * options.pageSize;
+  return {
+    traces: sorted.slice(0, end),
+    total: sorted.length,
+    hasMore: end < sorted.length
+  };
+}
+
+function TopicTraceSummaryList({
+  traces,
+  selectedTraceId,
+  onTraceSelect,
+  pageSize = 25
+}) {
+  const [search, setSearch] = React.useState("");
+  const [page, setPage] = React.useState(1);
+  const visible = React.useMemo(
+    () => getVisibleTraceSummaries(traces, { search, sort: "newest", page, pageSize }),
+    [page, pageSize, search, traces]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex min-h-0 flex-1 flex-col gap-4", "aria-label": "Topic trace summaries", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      searchbar.Searchbar,
+      {
+        label: "Search traces",
+        placeholder: "Search traces",
+        onSearch: (value) => {
+          setSearch(value);
+          setPage(1);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(tracesDataList.DataList, { columns: "minmax(12rem,1fr)", className: "min-h-0 flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tracesDataList.DataList.Top, { children: /* @__PURE__ */ jsxRuntime.jsx(tracesDataList.DataList.TopCells, { children: /* @__PURE__ */ jsxRuntime.jsx(tracesDataList.DataList.TopCell, { children: "Trace summary" }) }) }),
+      visible.traces.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(tracesDataList.DataList.NoMatch, { message: "No traces match this subtopic." }) : visible.traces.map((trace) => /* @__PURE__ */ jsxRuntime.jsx(
+        tracesDataList.DataList.RowButton,
+        {
+          featured: selectedTraceId === trace.id,
+          onClick: () => onTraceSelect(trace),
+          "aria-pressed": selectedTraceId === trace.id,
+          children: /* @__PURE__ */ jsxRuntime.jsx(tracesDataList.DataList.TextCell, { children: trace.name ?? trace.id })
+        },
+        trace.id
+      ))
+    ] }),
+    visible.hasMore ? /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant: "outline", size: "sm", onClick: () => setPage((currentPage) => currentPage + 1), children: [
+      "Load more traces (",
+      visible.traces.length,
+      " of ",
+      visible.total,
+      ")"
+    ] }) : null
+  ] });
+}
+
+function TopicTraceDetailsPanel({
+  traceId,
+  selectedSpanId,
+  onSpanSelect,
+  onClose
+}) {
+  const traceSpans = useTraceLightSpans(traceId);
+  const spanDetail = useSpanDetail(traceId, selectedSpanId);
+  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(
+    traceSpans.data?.spans,
+    selectedSpanId,
+    (spanId) => onSpanSelect?.(spanId)
+  );
+  if (!traceId) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "grid h-full min-h-0 overflow-auto",
+        selectedSpanId ? "grid-rows-[minmax(0,1fr)_minmax(0,1fr)] gap-4" : "grid-rows-[minmax(0,1fr)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TraceDetailsView,
+          {
+            traceId,
+            spans: traceSpans.data?.spans,
+            isLoading: traceSpans.isLoading,
+            selectedSpanId,
+            onSpanSelect,
+            onClose
+          }
+        ),
+        selectedSpanId ? /* @__PURE__ */ jsxRuntime.jsx(
+          SpanDataPanelView,
+          {
+            traceId,
+            spanId: selectedSpanId,
+            span: spanDetail.data?.span,
+            isLoading: spanDetail.isLoading,
+            onClose: () => onSpanSelect?.(void 0),
+            onPrevious: handlePreviousSpan,
+            onNext: handleNextSpan
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+const SIGNAL_CHART_CLUSTERS = [
+  { label: "Fast paths", count: 27, duration: 120, spans: 5 },
+  { label: "Standard paths", count: 27, duration: 620, spans: 14 },
+  { label: "Complex paths", count: 26, duration: 1280, spans: 28 }
+];
+function getSignalChartData(clusters) {
+  return clusters.flatMap(
+    (cluster, clusterIndex) => SIGNAL_CHART_CLUSTERS.flatMap(
+      (path) => Array.from({ length: path.count }, (_, index) => {
+        const offset = index - (path.count - 1) / 2;
+        const durationJitter = (index * 37 + clusterIndex * 19) % 90 - 45;
+        const durationScatter = Math.sin((index + 1 + clusterIndex) * 1.7) * 34 + Math.cos((index + 3) * 0.9) * 21;
+        const spanJitter = (index * 11 + clusterIndex * 3) % 7 - 3;
+        return {
+          id: `${cluster.id}-${path.label.toLowerCase().replaceAll(" ", "-")}-${index + 1}`,
+          name: `${cluster.name} · ${path.label} ${index + 1}`,
+          cluster: path.label,
+          duration: Math.max(0, Math.round(path.duration + offset * 8 + durationJitter + durationScatter)),
+          spans: Math.max(1, path.spans + spanJitter),
+          color: stringToColor(`${cluster.name}-${path.label}`)
+        };
+      })
+    )
+  );
+}
+
+const signals = [
+  {
+    id: "tasks",
+    name: "Tasks",
+    description: "Operational work patterns inferred from agent traces and user requests.",
+    clusters: [
+      {
+        id: "refunds",
+        name: "Refunds",
+        description: "Refund requests, policy checks, and payment reversals.",
+        traceSummaries: [
+          {
+            id: "trace-refund-1",
+            name: "Refund eligibility check",
+            status: "success",
+            startedAt: "2026-06-15T10:00:00.000Z",
+            durationMs: 1240,
+            entityName: "support-agent",
+            spanCount: 8
+          },
+          {
+            id: "trace-refund-2",
+            name: "Refund escalation",
+            status: "error",
+            startedAt: "2026-06-15T09:40:00.000Z",
+            durationMs: 3180,
+            entityName: "support-agent",
+            spanCount: 12
+          }
+        ]
+      },
+      {
+        id: "shipping",
+        name: "Shipping",
+        description: "Shipment lookup, carrier updates, and delivery exceptions.",
+        traceSummaries: [
+          {
+            id: "trace-shipping-1",
+            name: "Track delayed package",
+            status: "success",
+            startedAt: "2026-06-15T08:30:00.000Z",
+            durationMs: 980,
+            entityName: "support-agent",
+            spanCount: 6
+          }
+        ]
+      },
+      {
+        id: "account-updates",
+        name: "Account updates",
+        description: "Profile edits, plan changes, and account recovery requests.",
+        traceSummaries: [
+          {
+            id: "trace-account-1",
+            name: "Update billing contact",
+            status: "success",
+            startedAt: "2026-06-15T07:45:00.000Z",
+            durationMs: 1420,
+            entityName: "support-agent",
+            spanCount: 7
+          },
+          {
+            id: "trace-account-2",
+            name: "Recover locked account",
+            status: "success",
+            startedAt: "2026-06-15T07:10:00.000Z",
+            durationMs: 2640,
+            entityName: "support-agent",
+            spanCount: 11
+          }
+        ]
+      },
+      {
+        id: "subscription-changes",
+        name: "Subscription changes",
+        description: "Upgrade, downgrade, pause, and renewal intent across plans.",
+        traceSummaries: [
+          {
+            id: "trace-subscription-1",
+            name: "Downgrade plan request",
+            status: "success",
+            startedAt: "2026-06-15T06:50:00.000Z",
+            durationMs: 1880,
+            entityName: "support-agent",
+            spanCount: 9
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: "sentiment",
+    name: "Sentiment",
+    description: "Conversation tone and confidence shifts that affect user outcomes.",
+    clusters: [
+      {
+        id: "negative-feedback",
+        name: "Negative feedback",
+        description: "Escalations, frustration signals, and unresolved customer intent.",
+        traceSummaries: [
+          {
+            id: "trace-sentiment-1",
+            name: "De-escalate frustrated customer",
+            status: "success",
+            startedAt: "2026-06-15T12:30:00.000Z",
+            durationMs: 2150,
+            entityName: "support-agent",
+            spanCount: 10
+          }
+        ]
+      },
+      {
+        id: "positive-feedback",
+        name: "Positive feedback",
+        description: "Gratitude, satisfaction, and confirmation that the user outcome was met.",
+        traceSummaries: [
+          {
+            id: "trace-sentiment-2",
+            name: "Capture satisfied customer outcome",
+            status: "success",
+            startedAt: "2026-06-15T12:05:00.000Z",
+            durationMs: 1320,
+            entityName: "support-agent",
+            spanCount: 5
+          }
+        ]
+      },
+      {
+        id: "uncertain-feedback",
+        name: "Uncertain feedback",
+        description: "Ambiguous responses where sentiment or next best action needs clarification.",
+        traceSummaries: [
+          {
+            id: "trace-sentiment-3",
+            name: "Clarify ambiguous response",
+            status: "running",
+            startedAt: "2026-06-15T11:35:00.000Z",
+            durationMs: 1760,
+            entityName: "support-agent",
+            spanCount: 8
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: "issue",
+    name: "Issue",
+    description: "Recurring issue families found across support, research, and workflow traces.",
+    clusters: [
+      {
+        id: "revenue-analysis",
+        name: "Revenue analysis",
+        description: "Revenue-impacting requests, market scans, and financial summaries.",
+        traceSummaries: [
+          {
+            id: "trace-revenue-1",
+            name: "Summarize revenue movement",
+            status: "running",
+            startedAt: "2026-06-15T11:05:00.000Z",
+            durationMs: 4520,
+            entityName: "research-agent",
+            spanCount: 15
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: "severity",
+    name: "Severity",
+    description: "Risk and urgency bands inferred from trace paths and intervention needs.",
+    clusters: [
+      {
+        id: "urgent-escalations",
+        name: "Urgent escalations",
+        description: "High-priority paths that require faster handoff or deeper inspection.",
+        traceSummaries: [
+          {
+            id: "trace-severity-1",
+            name: "Escalate urgent account issue",
+            status: "error",
+            startedAt: "2026-06-15T13:10:00.000Z",
+            durationMs: 3880,
+            entityName: "support-agent",
+            spanCount: 18
+          }
+        ]
+      }
+    ]
+  }
+];
+
+const SignalTraceSummaryList = TopicTraceSummaryList;
+const SignalTraceDetailsPanel = TopicTraceDetailsPanel;
+const SignalsLayout = TopicsLayout;
+function findClusterByTraceId(signal, traceId) {
+  if (!signal || !traceId) return void 0;
+  return signal.clusters.find((cluster) => cluster.traceSummaries.some((trace) => trace.id === traceId));
+}
+function getSignalName(signalId) {
+  return signals.find((signal) => signal.id === signalId)?.name ?? signalId;
+}
+function SignalClusterSidebar({
+  signal,
+  selectedClusterIds,
+  onClusterSelect,
+  multiple = false,
+  ariaLabel = "Signal clusters"
+}) {
+  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-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);
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: multiple ? "checkbox" : void 0,
+            "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),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: utils.cn("mt-1.5 h-2 w-2 shrink-0 rounded-full", multiple && !selected && "invisible"),
+                  style: { backgroundColor: stringToColor(cluster.name) }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: utils.cn(
+                      "block text-sm font-medium",
+                      multiple && !selected ? "text-neutral3" : "text-neutral5"
+                    ),
+                    children: cluster.name
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: utils.cn(
+                      "line-clamp-2 block text-sm",
+                      multiple && !selected ? "text-neutral1" : "text-neutral2"
+                    ),
+                    children: cluster.description
+                  }
+                )
+              ] })
+            ] })
+          }
+        ) }, cluster.id);
+      }) })
+    }
+  );
+}
+function SignalTraceListTab({
+  cluster,
+  selectedTraceId,
+  onTraceSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SignalTraceSummaryList,
+    {
+      traces: cluster.traceSummaries,
+      selectedTraceId,
+      onTraceSelect
+    }
+  );
+}
+function SignalChartTab({ signal, selectedClusterIds, onClusterToggle }) {
+  const selectedClusters = React.useMemo(
+    () => signal.clusters.filter((cluster) => selectedClusterIds.includes(cluster.id)),
+    [signal.clusters, selectedClusterIds]
+  );
+  const chartData = React.useMemo(() => 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,
+        multiple: true,
+        ariaLabel: "Chart cluster filters"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 min-w-0 flex-1 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+      scatterPlotChart.ScatterPlotChart,
+      {
+        data: chartData,
+        xKey: "duration",
+        yKey: "spans",
+        nameKey: "name",
+        colorKey: "color",
+        height: "100%",
+        className: "h-full",
+        xLabel: "Duration",
+        yLabel: "Spans",
+        formatX: (value) => `${value}ms`,
+        formatY: (value) => `${value} spans`
+      }
+    ) })
+  ] });
+}
+function SignalClusterTabs({
+  signal,
+  selectedCluster,
+  selectedTraceId,
+  selectedChartClusterIds,
+  activeTab,
+  onActiveTabChange,
+  onClusterSelect,
+  onChartClusterToggle,
+  onTraceSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    tabsTab.Tabs,
+    {
+      defaultTab: "trace-list",
+      value: activeTab,
+      onValueChange: onActiveTabChange,
+      className: "flex h-full min-h-0 flex-col overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(tabsTab.TabList, { variant: "line", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "trace-list", children: "Trace list" }),
+          /* @__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("div", { className: "min-w-0 flex-1 overflow-hidden py-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            SignalTraceListTab,
+            {
+              cluster: selectedCluster,
+              selectedTraceId,
+              onTraceSelect
+            }
+          ) })
+        ] }) }),
+        /* @__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
+          }
+        ) })
+      ]
+    }
+  );
+}
+function SignalDetailsPage({ signalId, selectedTraceId, tracePanel, onTraceSelect }) {
+  const selectedSignal = React.useMemo(() => 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) ?? []
+  );
+  const [activeTab, setActiveTab] = React.useState("trace-list");
+  const selectedCluster = selectedSignal?.clusters.find((cluster) => cluster.id === selectedClusterId) ?? initialCluster;
+  const { data: tracesData } = useTraces({});
+  const resolvedTraceId = tracesData?.spans[0]?.traceId ?? null;
+  const handleTraceSelect = () => {
+    if (!selectedSignal || !resolvedTraceId) return;
+    onTraceSelect(selectedSignal.id, resolvedTraceId);
+  };
+  const handleChartClusterToggle = (clusterId) => {
+    setSelectedChartClusterIds(
+      (current) => current.includes(clusterId) ? current.filter((id) => id !== clusterId) : [...current, clusterId]
+    );
+  };
+  if (!selectedSignal || !selectedCluster) {
+    return /* @__PURE__ */ jsxRuntime.jsx(SignalsLayout, { sidebar: null, children: "Signal not found" });
+  }
+  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("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,
+        selectedTraceId,
+        selectedChartClusterIds,
+        activeTab,
+        onActiveTabChange: setActiveTab,
+        onClusterSelect: setSelectedClusterId,
+        onChartClusterToggle: handleChartClusterToggle,
+        onTraceSelect: handleTraceSelect
+      }
+    ) })
+  ] }) });
+}
+
+const getTraceShare = (traceCount, totalTraceCount) => {
+  if (totalTraceCount === 0) return 0;
+  return Math.round(traceCount / totalTraceCount * 100);
+};
+function SignalClusterCard({ cluster, totalTraceCount }) {
+  const traceCount = cluster.traceSummaries.length;
+  const traceShare = getTraceShare(traceCount, totalTraceCount);
+  const traceLabel = traceCount === 1 ? "trace" : "traces";
+  const clusterColor = stringToColor(cluster.name);
+  return /* @__PURE__ */ jsxRuntime.jsx("article", { className: "rounded-2xl border border-border1/70 bg-surface2 p-5 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-w-0 flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-2 h-2.5 w-2.5 shrink-0 rounded-full", style: { backgroundColor: clusterColor } }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-md font-semibold text-neutral6", children: cluster.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 text-sm text-neutral3", children: cluster.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 pt-4 pl-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-xs uppercase text-neutral3", children: "Trace share" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-mono text-xs text-neutral3", children: [
+          traceCount,
+          " ",
+          traceLabel
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_4rem] items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-3 overflow-hidden rounded-full bg-surface4",
+            role: "progressbar",
+            "aria-label": `${cluster.name} trace share`,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": traceShare,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full rounded-full", style: { width: `${traceShare}%`, backgroundColor: clusterColor } })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-right text-ui-md font-semibold text-neutral6", children: [
+          traceShare,
+          "%"
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function SignalSection({ signal, onSeeDetails }) {
+  const totalTraceCount = React.useMemo(
+    () => signal.clusters.reduce((total, cluster) => total + cluster.traceSummaries.length, 0),
+    [signal.clusters]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-start justify-between gap-6 px-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-ui-2xl font-semibold text-neutral6", children: signal.name }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { variant: "default", children: [
+            signal.clusters.length,
+            " ",
+            signal.clusters.length === 1 ? "cluster" : "clusters"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-lg text-neutral3", children: signal.description })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button.Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "lg",
+          className: "shrink-0 gap-2 rounded-xl px-5",
+          onClick: () => onSeeDetails(signal),
+          children: [
+            "See details",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpRight, { className: "h-4 w-4", "aria-hidden": "true" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-6 md:grid-cols-2", children: signal.clusters.map((cluster) => /* @__PURE__ */ jsxRuntime.jsx(SignalClusterCard, { cluster, totalTraceCount }, cluster.id)) })
+  ] });
+}
+function SignalsOverviewPage({ onSignalSelect }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TopicsLayout, { sidebar: null, contentPadding: false, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "h-full min-w-0 overflow-y-auto p-6", "aria-label": "Signals", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-6xl flex-col gap-12", children: signals.map((signal) => /* @__PURE__ */ jsxRuntime.jsx(SignalSection, { signal, onSeeDetails: onSignalSelect }, signal.id)) }) }) });
+}
+
 exports.Avatar = Avatar.Avatar;
 exports.Badge = Badge.Badge;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
@@ -8595,6 +9349,12 @@ exports.TooltipContent = tooltip.TooltipContent;
 exports.TooltipProvider = tooltip.TooltipProvider;
 exports.TooltipTrigger = tooltip.TooltipTrigger;
 exports.Truncate = truncate.Truncate;
+exports.ThreadList = threadList.ThreadList;
+exports.ThreadListEmpty = threadList.ThreadListEmpty;
+exports.ThreadListItem = threadList.ThreadListItem;
+exports.ThreadListItems = threadList.ThreadListItems;
+exports.ThreadListNewItem = threadList.ThreadListNewItem;
+exports.ThreadListSeparator = threadList.ThreadListSeparator;
 exports.ButtonsGroup = buttonsGroup.ButtonsGroup;
 exports.ButtonsGroupSeparator = buttonsGroup.ButtonsGroupSeparator;
 exports.ButtonsGroupText = buttonsGroup.ButtonsGroupText;
@@ -8699,6 +9459,10 @@ exports.HorizontalBars = horizontalBars.HorizontalBars;
 exports.MetricsDataTable = metricsDataTable.MetricsDataTable;
 exports.MetricsLineChart = metricsLineChart.MetricsLineChart;
 exports.MetricsLineChartTooltip = metricsLineChart.MetricsLineChartTooltip;
+exports.ScatterPlotChart = scatterPlotChart.ScatterPlotChart;
+exports.ScatterPlotChartTooltip = scatterPlotChart.ScatterPlotChartTooltip;
+exports.getScatterPlotClickedPoint = scatterPlotChart.getScatterPlotClickedPoint;
+exports.getScatterPlotPointColor = scatterPlotChart.getScatterPlotPointColor;
 exports.StatusBadge = StatusBadge.StatusBadge;
 exports.Animations = tokens.Animations;
 exports.BorderColors = spacings.BorderColors;
@@ -8832,6 +9596,15 @@ exports.RuleValueInput = RuleValueInput;
 exports.ScorersIcon = ScorersIcon;
 exports.ScoresCardView = ScoresCardView;
 exports.SettingsIcon = SettingsIcon;
+exports.SignalChartTab = SignalChartTab;
+exports.SignalClusterCard = SignalClusterCard;
+exports.SignalClusterSidebar = SignalClusterSidebar;
+exports.SignalClusterTabs = SignalClusterTabs;
+exports.SignalDetailsPage = SignalDetailsPage;
+exports.SignalSection = SignalSection;
+exports.SignalTraceDetailsPanel = SignalTraceDetailsPanel;
+exports.SignalTraceListTab = SignalTraceListTab;
+exports.SignalsOverviewPage = SignalsOverviewPage;
 exports.SkillIcon = SkillIcon;
 exports.SpanDataPanelView = SpanDataPanelView;
 exports.SpanDetailsView = SpanDetailsView;
@@ -8859,6 +9632,9 @@ exports.TimelineTimingCol = TimelineTimingCol;
 exports.TokenUsageByAgentCardView = TokenUsageByAgentCardView;
 exports.TokenUsageTimelineCardView = TokenUsageTimelineCardView;
 exports.ToolCoinIcon = ToolCoinIcon;
+exports.TopicTraceDetailsPanel = TopicTraceDetailsPanel;
+exports.TopicTraceSummaryList = TopicTraceSummaryList;
+exports.TopicsLayout = TopicsLayout;
 exports.TraceDataPanelView = TraceDataPanelView;
 exports.TraceDetailsView = TraceDetailsView;
 exports.TraceIcon = TraceIcon;
@@ -8876,6 +9652,7 @@ exports.VariablesIcon = VariablesIcon;
 exports.WorkflowCoinIcon = WorkflowCoinIcon;
 exports.WorkspacesIcon = WorkspacesIcon;
 exports.XGroqIcon = XGroqIcon;
+exports.aggregateTopics = aggregateTopics;
 exports.applyLogsPropertyFilterTokens = applyLogsPropertyFilterTokens;
 exports.applyMetricsPropertyFilterTokens = applyMetricsPropertyFilterTokens;
 exports.applyTracePropertyFilterTokens = applyTracePropertyFilterTokens;
@@ -8895,6 +9672,7 @@ exports.createMetricsPropertyFilterFields = createMetricsPropertyFilterFields;
 exports.createTracePropertyFilterFields = createTracePropertyFilterFields;
 exports.downloadJson = downloadJson;
 exports.fileToBase64 = fileToBase64;
+exports.filterTraceSummaries = filterTraceSummaries;
 exports.formatCompact = formatCompact;
 exports.formatCost = formatCost;
 exports.formatHierarchicalSpans = formatHierarchicalSpans;
@@ -8911,10 +9689,17 @@ exports.getLogsPropertyFilterTokens = getLogsPropertyFilterTokens;
 exports.getMetricsPropertyFilterTokens = getMetricsPropertyFilterTokens;
 exports.getPreservedLogsFilterParams = getPreservedLogsFilterParams;
 exports.getPreservedTraceFilterParams = getPreservedTraceFilterParams;
+exports.getSignalChartData = getSignalChartData;
+exports.getSignalName = getSignalName;
 exports.getSpanDescendantIds = getSpanDescendantIds;
 exports.getSpanTypeUi = getSpanTypeUi;
 exports.getTokenLimitMessage = getTokenLimitMessage;
+exports.getTopicColor = getTopicColor;
+exports.getTopicTraceCount = getTopicTraceCount;
+exports.getTraceCount = getTraceCount;
 exports.getTracePropertyFilterTokens = getTracePropertyFilterTokens;
+exports.getTraceShare = getTraceShare$1;
+exports.getVisibleTraceSummaries = getVisibleTraceSummaries;
 exports.hasAnyLogsFilterParams = hasAnyLogsFilterParams;
 exports.hasAnyMetricsFilterParams = hasAnyMetricsFilterParams;
 exports.hasAnyTraceFilterParams = hasAnyTraceFilterParams;
@@ -8930,6 +9715,7 @@ exports.isRemoteUrl = isRemoteUrl;
 exports.isRule = isRule;
 exports.isRuleGroup = isRuleGroup;
 exports.isTokenLimitExceeded = isTokenLimitExceeded;
+exports.isUnsupportedObservabilityOperationError = isUnsupportedObservabilityOperationError;
 exports.isValidJson = isValidJson;
 exports.isValidPreset = isValidPreset;
 exports.loadLogsFiltersFromStorage = loadLogsFiltersFromStorage;
@@ -8945,6 +9731,8 @@ exports.saveLogsFiltersToStorage = saveLogsFiltersToStorage;
 exports.saveMetricsFiltersToStorage = saveMetricsFiltersToStorage;
 exports.saveTraceFiltersToStorage = saveTraceFiltersToStorage;
 exports.shouldRetryQuery = shouldRetryQuery;
+exports.signals = signals;
+exports.sortTraceSummaries = sortTraceSummaries;
 exports.spanTypePrefixes = spanTypePrefixes;
 exports.stringToColor = stringToColor;
 exports.toSigFigs = toSigFigs;