@mastra/playground-ui 29.0.0-alpha.2 → 29.0.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,72 @@
 # @mastra/playground-ui
 
+## 29.0.0-alpha.3
+
+### Minor Changes
+
+- Removed `ButtonWithTooltip` from `@mastra/playground-ui`. Use `Button` with the `tooltip` prop instead. ([#16719](https://github.com/mastra-ai/mastra/pull/16719))
+
+  **Migration**
+
+  ```tsx
+  // before
+  import { ButtonWithTooltip } from '@mastra/playground-ui';
+
+  <ButtonWithTooltip tooltipContent="Search">
+    <Search />
+  </ButtonWithTooltip>;
+
+  // after
+  import { Button } from '@mastra/playground-ui';
+
+  <Button tooltip="Search">
+    <Search />
+  </Button>;
+  ```
+
+  `tooltip` supports the same values as `tooltipContent`. Icon-only buttons that pass a string `tooltip` now also get it as their `aria-label` automatically, matching how labelled controls have always behaved. Pass an explicit `aria-label` to override.
+
+### Patch Changes
+
+- The Traces list now updates live via delta polling. Previously the list was refetched every 10 seconds, replacing the whole page with no signal about what changed; now new traces appear within a few seconds of being created, with a brief highlight to draw attention. Status changes on already-visible rows (running → success / error) also propagate without intervention, and returning to the tab after being idle re-syncs from a fresh cursor. ([#16727](https://github.com/mastra-ai/mastra/pull/16727))
+
+  **New `useTraces` return fields**
+  - `isRefetching` — true while any meaningful refetch is in flight. Use it to drive a heartbeat indicator.
+  - `autoRefetch` / `setAutoRefetch` — pause / resume all automatic polling so the consumer can render an opt-out toggle.
+  - `recentlyAddedKeys` — `Set<string>` of `traceId:spanId` for rows that just arrived via delta polling. Drives the temporary highlight in `TracesListView`.
+
+  **New polling config**
+
+  Every timing in the hook is tunable per-instance via a new `polling` option:
+
+  ```ts
+  import { useTraces, type TracesPollingConfig } from '@mastra/playground-ui';
+
+  useTraces({
+    filters,
+    listMode,
+    polling: {
+      deltaPollIntervalMs: 10_000,
+      idleGuardThresholdMs: 5 * 60_000,
+    },
+  });
+  ```
+
+  Omitted fields fall through to the defaults (delta poll every 5s, idle reset after 15 min, status refresh every 60s, etc).
+
+  **TracesListView**
+
+  New optional `recentlyAddedKeys?: Set<string>` prop. Rows whose `traceId:spanId` is in the set get the `animate-row-highlight` class — a brief fade-out to transparent, added to `index.css`.
+
+  **Compatibility**
+
+  Requires `@mastra/server` and `@mastra/client-js` at the versions that ship the observability delta-polling endpoints, and a store that opts into delta polling (`@mastra/clickhouse`, `@mastra/duckdb`, and the in-memory store today). When unavailable — older server or a store without delta capability — the hook silently falls back to page-mode interval refetching. No consumer changes required.
+
+- Updated dependencies [[`5556cc1`](https://github.com/mastra-ai/mastra/commit/5556cc1befec71518d84f826b3bfe3a079a9daf7), [`5499303`](https://github.com/mastra-ai/mastra/commit/54993032c1ebc09642625b78d2014e0cf84a3cae), [`3498b49`](https://github.com/mastra-ai/mastra/commit/3498b4946be94f4313cd817733589680dcda5278), [`e47bca7`](https://github.com/mastra-ai/mastra/commit/e47bca7b72866d3abd173b9f530ac4318113a8ff), [`0031d0f`](https://github.com/mastra-ai/mastra/commit/0031d0f13831d7843ac5d498734a7d92862e2ce3), [`3498b49`](https://github.com/mastra-ai/mastra/commit/3498b4946be94f4313cd817733589680dcda5278), [`359439b`](https://github.com/mastra-ai/mastra/commit/359439bb8c635e048176306828195f8297f50021)]:
+  - @mastra/core@1.36.0-alpha.3
+  - @mastra/client-js@1.20.0-alpha.3
+  - @mastra/react@0.4.0-alpha.3
+
 ## 29.0.0-alpha.2
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -3664,12 +3664,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-surface3 border border-border1 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6",
-        primary: "bg-surface4 border border-border2 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6",
-        cta: "bg-accent1 border border-transparent hover:bg-accent1/90 hover:shadow-glow-accent1 disabled:hover:shadow-none text-surface1 font-medium",
+        default: "bg-surface3 border border-border2 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6",
+        primary: "bg-neutral6 border border-transparent hover:bg-neutral6/90 active:bg-neutral6/80 text-surface1 font-medium",
         ghost: "bg-transparent border border-transparent hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10 text-neutral4",
-        outline: "bg-transparent border border-border1 hover:bg-surface3 hover:text-neutral6 active:bg-surface4 text-neutral5",
-        link: "inline-flex justify-start rounded-none h-auto px-0 bg-transparent text-neutral3 hover:text-neutral4 gap-1 [&>svg]:mx-0 w-auto [&>svg]:opacity-70"
+        outline: "bg-transparent border border-border1 hover:bg-surface3 hover:text-neutral6 active:bg-surface4 text-neutral5"
       },
       size: {
         sm: cn(`${formElementSizes.sm} text-ui-sm px-[.9em]`, TEXT_MODE_ADORNMENTS),
@@ -3742,16 +3740,6 @@ const Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
-const ButtonWithTooltip = React.forwardRef(
-  ({ tooltipContent, ...buttonProps }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, ...buttonProps }) }),
-      tooltipContent && /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltipContent })
-    ] });
-  }
-);
-ButtonWithTooltip.displayName = "ButtonWithTooltip";
-
 function flattenSchemaToVariables(schema, maxDepth = 5) {
   if (!schema?.properties) {
     return [];
@@ -6938,7 +6926,7 @@ function HighlightedCode({ code, lang }) {
 }
 
 function DashboardCard({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border border-border1 rounded-lg p-6 bg-surface2", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border border-border1 rounded-xl px-4 py-3 bg-surface-overlay-soft", className), children });
 }
 
 const DropdownMenuRoot = DropdownMenuPrimitive__namespace.Root;
@@ -10842,7 +10830,7 @@ const navItemClasses = ({ isActive, isCollapsed, isFeatured } = {}) => cn(
   "hover:bg-sidebar-nav-hover hover:text-neutral6 [&:hover_svg]:text-neutral5",
   "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring",
   !isCollapsed && "w-full gap-2.5 py-1 px-3 justify-start",
-  isCollapsed && "w-9 mx-auto p-0 justify-center",
+  isCollapsed && "w-full p-0 justify-center",
   isActive && "text-neutral6 bg-sidebar-nav-active hover:bg-sidebar-nav-active hover:text-neutral6 [&_svg]:text-neutral6 [&:hover_svg]:text-neutral6",
   isCollapsed && !isActive && "[&_svg]:text-neutral3",
   isFeatured && "my-2 bg-accent1Dark hover:bg-accent1Darker text-accent1 hover:text-accent1 border border-accent1/30",
@@ -10879,11 +10867,7 @@ function MainSidebarNavLink({
     interactiveEl = /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: link.url, ...linkParams, className: itemClassName, children: [
       link.icon,
       /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavLabel, { state, children: link.name }),
-      children,
-      link.isExperimental && !isCollapsed && !needsTooltip && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { render: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlertIcon, { className: "ml-auto stroke-accent5" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", sideOffset: 16, children: "Experimental Feature" })
-      ] })
+      children
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("li", { ...props, className: cn("flex relative min-w-0", className), children: link && needsTooltip && React.isValidElement(interactiveEl) ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
@@ -11384,7 +11368,7 @@ function SectionCard({
       className: cn(
         "overflow-hidden rounded-2xl border",
         fillHeight && "flex h-full flex-col",
-        danger ? "border-accent2/25" : "border-section-card bg-section-card",
+        danger ? "border-accent2/25" : "border-border1",
         className
       ),
       children: [
@@ -11393,7 +11377,7 @@ function SectionCard({
           {
             className: cn(
               "flex flex-col gap-3 px-7 pt-7 pb-6 sm:flex-row sm:items-start sm:justify-between sm:gap-6",
-              danger ? "bg-accent2/[0.08]" : "bg-section-card-header"
+              danger ? "bg-accent2/8" : "bg-surface-overlay-soft"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(CardHeading, { title, description, tone: danger ? "danger" : "default" }) }),
@@ -11407,7 +11391,7 @@ function SectionCard({
             className: cn(
               "min-w-0 px-7 pt-6 pb-7",
               fillHeight && "flex-1",
-              danger ? "bg-accent2/[0.04]" : null,
+              danger ? "bg-accent2/4" : null,
               contentClassName
             ),
             children
@@ -14286,25 +14270,16 @@ function DataCodeSection({
         /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: codeStr || "No content", size: "sm" }),
           hasMultilineText && /* @__PURE__ */ jsxRuntime.jsx(
-            ButtonWithTooltip,
+            Button,
             {
               size: "sm",
               "aria-label": showAsMultilineText ? "Show escaped newlines" : "Show multiline text",
-              tooltipContent: showAsMultilineText ? "Show escaped newlines" : "Show multiline text",
+              tooltip: showAsMultilineText ? "Show escaped newlines" : "Show multiline text",
               onClick: () => setShowAsMultilineText((v) => !v),
               children: showAsMultilineText ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeftIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignJustifyIcon, {})
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ButtonWithTooltip,
-            {
-              size: "sm",
-              "aria-label": "Expand",
-              tooltipContent: "Expand",
-              onClick: () => setExpandedOpen(true),
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExpandIcon, {})
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", "aria-label": "Expand", tooltip: "Expand", onClick: () => setExpandedOpen(true), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExpandIcon, {}) })
         ] })
       ] })
     ] }),
@@ -14342,16 +14317,16 @@ function DataCodeSection({
           /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: codeStr || "No content", size: "sm" }),
             hasMultilineText && /* @__PURE__ */ jsxRuntime.jsx(
-              ButtonWithTooltip,
+              Button,
               {
                 size: "sm",
                 "aria-label": expandedMultiline ? "Show escaped newlines" : "Show multiline text",
-                tooltipContent: expandedMultiline ? "Show escaped newlines" : "Show multiline text",
+                tooltip: expandedMultiline ? "Show escaped newlines" : "Show multiline text",
                 onClick: () => setExpandedMultiline((v) => !v),
                 children: expandedMultiline ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeftIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignJustifyIcon, {})
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonWithTooltip, { size: "sm", "aria-label": "Close", tooltipContent: "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) }) })
+            /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", "aria-label": "Close", tooltip: "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) }) })
           ] })
         ] })
       ] }),
@@ -14398,17 +14373,7 @@ function DataDetailsPanelCloseButton({
   tooltip = "Close panel",
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ButtonWithTooltip,
-    {
-      size: "md",
-      onClick,
-      "aria-label": "Close Panel",
-      tooltipContent: tooltip,
-      className,
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "md", onClick, "aria-label": "Close Panel", tooltip, className, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) });
 }
 
 function buildDarkTheme() {
@@ -14711,17 +14676,7 @@ const DataKeysAndValues = Object.assign(DataKeysAndValuesRoot, {
 });
 
 function DataPanelCloseButton({ onClick, tooltip = "Close panel", className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ButtonWithTooltip,
-    {
-      size: "md",
-      onClick,
-      "aria-label": "Close Panel",
-      tooltipContent: tooltip,
-      className,
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "md", onClick, "aria-label": "Close Panel", tooltip, className, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) });
 }
 
 function DataPanelContent({ children, ref }) {
@@ -14757,8 +14712,8 @@ function DataPanelNextPrevNav({
   nextLabel = "Next"
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { spacing: "close", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ButtonWithTooltip, { size: "md", tooltipContent: previousLabel, onClick: onPrevious, disabled: !onPrevious, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ButtonWithTooltip, { size: "md", tooltipContent: nextLabel, onClick: onNext, disabled: !onNext, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}) })
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "md", tooltip: previousLabel, onClick: onPrevious, disabled: !onPrevious, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "md", tooltip: nextLabel, onClick: onNext, disabled: !onNext, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}) })
   ] });
 }
 
@@ -16808,13 +16763,13 @@ function StackedRunsBars({ data }) {
 
 function OpenInTracesButton({ href, LinkComponent = "a" }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ButtonWithTooltip,
+    Button,
     {
       as: LinkComponent,
       href,
       variant: "ghost",
       size: "icon-md",
-      tooltipContent: "View in Traces",
+      tooltip: "View in Traces",
       "aria-label": "View in Traces",
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {})
     }
@@ -16822,13 +16777,13 @@ function OpenInTracesButton({ href, LinkComponent = "a" }) {
 }
 function OpenErrorsInLogsButton({ href, LinkComponent = "a" }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ButtonWithTooltip,
+    Button,
     {
       as: LinkComponent,
       href,
       variant: "ghost",
       size: "icon-md",
-      tooltipContent: "View errors in Logs",
+      tooltip: "View errors in Logs",
       "aria-label": "View errors in Logs",
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogsIcon, {})
     }
@@ -19592,10 +19547,10 @@ function TraceDataPanelView({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { className: "ml-auto shrink-0", children: [
         onCollapsedChange && /* @__PURE__ */ jsxRuntime.jsx(
-          ButtonWithTooltip,
+          Button,
           {
             size: "md",
-            tooltipContent: collapsed ? "Expand panel" : "Collapse panel",
+            tooltip: collapsed ? "Expand panel" : "Collapse panel",
             onClick: () => setCollapsed(!collapsed),
             children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUpIcon, {})
           }
@@ -19610,12 +19565,12 @@ function TraceDataPanelView({
           }
         ),
         showOpenTracePageLink && /* @__PURE__ */ jsxRuntime.jsx(
-          ButtonWithTooltip,
+          Button,
           {
             as: LinkComponent,
             href: traceHref,
             size: "md",
-            tooltipContent: "Open trace page",
+            tooltip: "Open trace page",
             "aria-label": "Open trace page",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2Icon, {})
           }
@@ -20126,6 +20081,7 @@ function TracesListView({
   featuredTraceId,
   featuredSpanId,
   isBranchesMode,
+  recentlyAddedKeys,
   onTraceClick
 }) {
   const scrollRef = React.useRef(null);
@@ -20169,6 +20125,8 @@ function TracesListView({
         const trace = traces[vi.index];
         if (!trace) return null;
         const isFeatured = trace.traceId === featuredTraceId && (featuredSpanId == null || trace.spanId === featuredSpanId);
+        const rowKey = `${trace.traceId}:${trace.spanId ?? ""}`;
+        const isRecentlyAdded = recentlyAddedKeys?.has(rowKey) ?? false;
         const displayDate = trace.startedAt ?? trace.createdAt;
         const entityName = trace.entityName || trace.entityId || trace.attributes?.agentId || trace.attributes?.workflowId;
         return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -20177,7 +20135,7 @@ function TracesListView({
             ref: virtualizer.measureElement,
             "data-index": vi.index,
             onClick: () => onTraceClick(trace),
-            className: cn(isFeatured && "bg-surface4"),
+            className: cn(isFeatured && "bg-surface4", isRecentlyAdded && "animate-row-highlight"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.DateCell, { timestamp: displayDate }),
               /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.TimeCell, { timestamp: displayDate }),
@@ -20194,7 +20152,7 @@ function TracesListView({
               /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.StatusCell, { status: trace.attributes?.status })
             ]
           },
-          `${trace.traceId}:${trace.spanId ?? ""}`
+          rowKey
         );
       }),
       /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Spacer, { height: paddingBottom }),
@@ -20405,20 +20363,35 @@ function useTraceSpans(traceId) {
   });
 }
 
+const deltaSupportByClient = /* @__PURE__ */ new WeakMap();
+const DEFAULT_POLLING_CONFIG = {
+  deltaPollIntervalMs: 5e3,
+  deltaChaseIntervalMs: 100,
+  deltaLimit: 100,
+  pageModeRefetchIntervalMs: 1e4,
+  page0StatusRefreshIntervalMs: 6e4,
+  idleGuardThresholdMs: 15 * 6e4,
+  minRefetchSpinMs: 400,
+  deltaHighlightMs: 1e3
+};
+function shouldResetAfterIdle(lastSuccessAt, now, thresholdMs) {
+  if (lastSuccessAt === 0) return false;
+  return now - lastSuccessAt > thresholdMs;
+}
+function isHttp501(error) {
+  return error?.status === 501;
+}
 const fetchTracesFn = async ({
   client,
+  mode,
   page,
   perPage,
+  after,
+  limit,
   filters,
   listMode = "traces"
 }) => {
-  const params = {
-    pagination: {
-      page,
-      perPage
-    },
-    filters
-  };
+  const params = mode === "delta" ? { mode: "delta", after, limit, filters } : { pagination: { page, perPage }, filters };
   if (listMode === "branches") {
     return client.listBranches(params);
   }
@@ -20443,13 +20416,90 @@ function selectUniqueTraces(data) {
     seen.add(key);
     return true;
   });
-  return { spans };
+  return { spans, deltaCursor: data.pages[0]?.deltaCursor };
+}
+function refreshPage0Rows(old, refreshed, listMode) {
+  if (!old || old.pages.length === 0) return old;
+  const [firstPage, ...rest] = old.pages;
+  const refreshedRows = listMode === "branches" && "branches" in refreshed ? refreshed.branches ?? [] : "spans" in refreshed ? refreshed.spans ?? [] : [];
+  if (refreshedRows.length === 0) return old;
+  const refreshedByKey = /* @__PURE__ */ new Map();
+  for (const row of refreshedRows) {
+    refreshedByKey.set(`${row.traceId}:${row.spanId}`, row);
+  }
+  let updatedFirst;
+  if (listMode === "branches" && "branches" in firstPage) {
+    const updated = (firstPage.branches ?? []).map((existing) => {
+      const fresh = refreshedByKey.get(`${existing.traceId}:${existing.spanId}`);
+      return fresh ?? existing;
+    });
+    updatedFirst = { ...firstPage, branches: updated };
+  } else if ("spans" in firstPage) {
+    const updated = (firstPage.spans ?? []).map((existing) => {
+      const fresh = refreshedByKey.get(`${existing.traceId}:${existing.spanId}`);
+      return fresh ?? existing;
+    });
+    updatedFirst = { ...firstPage, spans: updated };
+  } else {
+    return old;
+  }
+  return { ...old, pages: [updatedFirst, ...rest] };
+}
+function sortRowsByStartedAtDesc(rows) {
+  return [...rows].sort((a, b) => {
+    const aTime = a.startedAt ? new Date(a.startedAt).getTime() : 0;
+    const bTime = b.startedAt ? new Date(b.startedAt).getTime() : 0;
+    return bTime - aTime;
+  });
+}
+function mergeDeltaIntoPage0(old, delta, listMode) {
+  if (!old || old.pages.length === 0) return old;
+  const [firstPage, ...rest] = old.pages;
+  const nextCursor = delta.deltaCursor ?? firstPage.deltaCursor;
+  let updatedFirst;
+  if (listMode === "branches" && "branches" in firstPage) {
+    const newRows = delta.branches ?? [];
+    updatedFirst = {
+      ...firstPage,
+      branches: sortRowsByStartedAtDesc([...newRows, ...firstPage.branches ?? []]),
+      deltaCursor: nextCursor
+    };
+  } else if ("spans" in firstPage) {
+    const newRows = delta.spans ?? [];
+    updatedFirst = {
+      ...firstPage,
+      spans: sortRowsByStartedAtDesc([...newRows, ...firstPage.spans ?? []]),
+      deltaCursor: nextCursor
+    };
+  } else {
+    return old;
+  }
+  return { ...old, pages: [updatedFirst, ...rest] };
 }
-const useTraces = ({ filters, listMode = "traces" }) => {
+const useTraces = ({ filters, listMode = "traces", polling = {} }) => {
+  const {
+    deltaPollIntervalMs = DEFAULT_POLLING_CONFIG.deltaPollIntervalMs,
+    deltaChaseIntervalMs = DEFAULT_POLLING_CONFIG.deltaChaseIntervalMs,
+    deltaLimit = DEFAULT_POLLING_CONFIG.deltaLimit,
+    pageModeRefetchIntervalMs = DEFAULT_POLLING_CONFIG.pageModeRefetchIntervalMs,
+    page0StatusRefreshIntervalMs = DEFAULT_POLLING_CONFIG.page0StatusRefreshIntervalMs,
+    idleGuardThresholdMs = DEFAULT_POLLING_CONFIG.idleGuardThresholdMs,
+    minRefetchSpinMs = DEFAULT_POLLING_CONFIG.minRefetchSpinMs,
+    deltaHighlightMs = DEFAULT_POLLING_CONFIG.deltaHighlightMs
+  } = polling;
   const client = react.useMastraClient();
+  const queryClient = reactQuery.useQueryClient();
   const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
+  const [deltaSupport, setDeltaSupport] = React.useState(() => deltaSupportByClient.get(client) ?? "unknown");
+  const deltaUnsupported = deltaSupport === "unsupported";
+  const [autoRefetch, setAutoRefetch] = React.useState(true);
+  const [recentlyAddedKeys, setRecentlyAddedKeys] = React.useState(() => /* @__PURE__ */ new Set());
+  React.useEffect(() => {
+    setRecentlyAddedKeys(/* @__PURE__ */ new Set());
+  }, [listMode, filters]);
+  const tracesQueryKey = ["traces", listMode, filters];
   const query = reactQuery.useInfiniteQuery({
-    queryKey: ["traces", listMode, filters],
+    queryKey: tracesQueryKey,
     queryFn: ({ pageParam }) => fetchTracesFn({
       client,
       page: pageParam,
@@ -20461,16 +20511,150 @@ const useTraces = ({ filters, listMode = "traces" }) => {
     getNextPageParam: getTracesNextPageParam,
     select: selectUniqueTraces,
     retry: false,
-    // Disable polling on 403 to prevent flickering
-    refetchInterval: (query2) => is403ForbiddenError(query2.state.error) ? false : 1e4
+    // Disable polling on 403 to prevent flickering.
+    // Fall back to page-mode polling only when delta isn't running.
+    refetchInterval: (q) => {
+      if (is403ForbiddenError(q.state.error)) return false;
+      if (!autoRefetch) return false;
+      return deltaUnsupported ? pageModeRefetchIntervalMs : false;
+    }
   });
+  const cursor = query.data?.deltaCursor;
+  React.useEffect(() => {
+    if (query.isSuccess && cursor === void 0 && deltaSupport === "unknown") {
+      deltaSupportByClient.set(client, "unsupported");
+      setDeltaSupport("unsupported");
+    }
+  }, [query.isSuccess, cursor, deltaSupport, client]);
+  const deltaQuery = reactQuery.useQuery({
+    queryKey: ["traces-delta", listMode, filters],
+    queryFn: () => {
+      const current = queryClient.getQueryData(tracesQueryKey)?.pages[0]?.deltaCursor;
+      if (!current) return null;
+      return fetchTracesFn({
+        client,
+        mode: "delta",
+        after: current,
+        limit: deltaLimit,
+        filters,
+        listMode
+      });
+    },
+    enabled: !!cursor && !deltaUnsupported && autoRefetch,
+    retry: false,
+    refetchInterval: (q) => {
+      if (q.state.error) return false;
+      const data = q.state.data;
+      if (data?.delta?.hasMore) return deltaChaseIntervalMs;
+      return deltaPollIntervalMs;
+    }
+  });
+  React.useEffect(() => {
+    const result = deltaQuery.data;
+    if (!result) return;
+    queryClient.setQueryData(
+      tracesQueryKey,
+      (old) => mergeDeltaIntoPage0(old, result, listMode)
+    );
+    const newRows = listMode === "branches" && "branches" in result ? result.branches ?? [] : "spans" in result ? result.spans ?? [] : [];
+    if (newRows.length === 0) return;
+    const keys = newRows.map((r) => `${r.traceId}:${r.spanId ?? ""}`);
+    setRecentlyAddedKeys((prev) => {
+      const next = new Set(prev);
+      for (const k of keys) next.add(k);
+      return next;
+    });
+    setTimeout(() => {
+      setRecentlyAddedKeys((prev) => {
+        const next = new Set(prev);
+        for (const k of keys) next.delete(k);
+        return next;
+      });
+    }, deltaHighlightMs);
+  }, [deltaQuery.data, queryClient, listMode, filters, deltaHighlightMs]);
+  React.useEffect(() => {
+    if (isHttp501(deltaQuery.error)) {
+      deltaSupportByClient.set(client, "unsupported");
+      setDeltaSupport("unsupported");
+    }
+  }, [deltaQuery.error, client]);
+  const statusRefreshQuery = reactQuery.useQuery({
+    queryKey: ["traces-status-refresh", listMode, filters],
+    queryFn: () => fetchTracesFn({
+      client,
+      page: 0,
+      perPage: TRACES_PER_PAGE,
+      filters,
+      listMode
+    }),
+    enabled: !!cursor && !deltaUnsupported && autoRefetch,
+    refetchInterval: page0StatusRefreshIntervalMs,
+    refetchOnMount: false,
+    retry: false
+  });
+  React.useEffect(() => {
+    const result = statusRefreshQuery.data;
+    if (!result) return;
+    queryClient.setQueryData(
+      tracesQueryKey,
+      (old) => refreshPage0Rows(old, result, listMode)
+    );
+  }, [statusRefreshQuery.data, queryClient, listMode, filters]);
+  const lastSuccessAtRef = React.useRef(0);
+  React.useEffect(() => {
+    const ts = Math.max(query.dataUpdatedAt, deltaQuery.dataUpdatedAt, statusRefreshQuery.dataUpdatedAt);
+    if (ts > lastSuccessAtRef.current) {
+      lastSuccessAtRef.current = ts;
+    }
+  }, [query.dataUpdatedAt, deltaQuery.dataUpdatedAt, statusRefreshQuery.dataUpdatedAt]);
+  const autoRefetchRef = React.useRef(autoRefetch);
+  React.useEffect(() => {
+    autoRefetchRef.current = autoRefetch;
+  }, [autoRefetch]);
+  React.useEffect(() => {
+    const handler = () => {
+      if (document.visibilityState !== "visible") return;
+      if (!autoRefetchRef.current) return;
+      if (!shouldResetAfterIdle(lastSuccessAtRef.current, Date.now(), idleGuardThresholdMs)) return;
+      void queryClient.resetQueries({ queryKey: ["traces", listMode, filters] });
+    };
+    document.addEventListener("visibilitychange", handler);
+    return () => document.removeEventListener("visibilitychange", handler);
+  }, [queryClient, listMode, filters, idleGuardThresholdMs]);
   const { hasNextPage, isFetchingNextPage, fetchNextPage } = query;
   React.useEffect(() => {
     if (isEndOfListInView && hasNextPage && !isFetchingNextPage) {
       void fetchNextPage();
     }
   }, [isEndOfListInView, hasNextPage, isFetchingNextPage, fetchNextPage]);
-  return { ...query, setEndOfListElement };
+  const isFetchingAny = query.isFetching || statusRefreshQuery.isFetching || deltaQuery.isFetching;
+  const lastActivityAt = Math.max(
+    query.dataUpdatedAt,
+    query.errorUpdatedAt,
+    deltaQuery.dataUpdatedAt,
+    deltaQuery.errorUpdatedAt,
+    statusRefreshQuery.dataUpdatedAt,
+    statusRefreshQuery.errorUpdatedAt
+  );
+  const [pulse, setPulse] = React.useState(false);
+  const prevActivityAtRef = React.useRef(lastActivityAt);
+  React.useEffect(() => {
+    if (lastActivityAt > prevActivityAtRef.current) {
+      prevActivityAtRef.current = lastActivityAt;
+      setPulse(true);
+      const t = setTimeout(() => setPulse(false), minRefetchSpinMs);
+      return () => clearTimeout(t);
+    }
+  }, [lastActivityAt, minRefetchSpinMs]);
+  const isRefetching = isFetchingAny || pulse;
+  return {
+    ...query,
+    setEndOfListElement,
+    isRefetching,
+    autoRefetch,
+    setAutoRefetch,
+    recentlyAddedKeys
+  };
 };
 
 const useTags = () => {
@@ -20939,17 +21123,17 @@ function LogDetailsView({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { className: "ml-auto shrink-0", children: [
         onCollapsedChange && /* @__PURE__ */ jsxRuntime.jsx(
-          ButtonWithTooltip,
+          Button,
           {
             size: "md",
-            tooltipContent: collapsed ? "Expand panel" : "Collapse panel",
+            tooltip: collapsed ? "Expand panel" : "Collapse panel",
             onClick: () => setCollapsed(!collapsed),
             children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUpIcon, {})
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { spacing: "close", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ButtonWithTooltip, { size: "md", tooltipContent: "Previous log", onClick: onPrevious, disabled: !onPrevious, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ButtonWithTooltip, { size: "md", tooltipContent: "Next log", onClick: onNext, disabled: !onNext, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}) })
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "md", tooltip: "Previous log", onClick: onPrevious, disabled: !onPrevious, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "md", tooltip: "Next log", onClick: onNext, disabled: !onNext, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(DataDetailsPanel.CloseButton, { onClick: onClose })
       ] })
@@ -21638,7 +21822,6 @@ exports.BranchIcon = BranchIcon;
 exports.BrandLoader = BrandLoader;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
-exports.ButtonWithTooltip = ButtonWithTooltip;
 exports.ButtonsGroup = ButtonsGroup;
 exports.ButtonsGroupSeparator = ButtonsGroupSeparator;
 exports.ButtonsGroupText = ButtonsGroupText;