@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/dist/domains/logs/components/logs-error-content.cjs.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
-const EmptyState = require('../../../EmptyState-_TZefNk_.cjs');
-const ErrorState = require('../../../ErrorState-DvsG3RMz.cjs');
-const PermissionDenied = require('../../../PermissionDenied-BCHmzPYk.cjs');
-const SessionExpired = require('../../../SessionExpired-B4qMlVNC.cjs');
+const EmptyState = require('../../../EmptyState-CdRjFB06.cjs');
+const ErrorState = require('../../../ErrorState-B3uTRAEd.cjs');
+const PermissionDenied = require('../../../PermissionDenied-Dz5qXpQj.cjs');
+const SessionExpired = require('../../../SessionExpired-CF0BGNo_.cjs');
 const utils_queryUtils = require('../../../utils/query-utils.cjs.js');
 
 function LogsErrorContent({ error, resource, errorTitle }) {

package/dist/domains/logs/components/logs-error-content.es.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { CircleSlashIcon } from 'lucide-react';
-import { E as EmptyState } from '../../../EmptyState-CDM5htkF.js';
-import { E as ErrorState } from '../../../ErrorState-t59EAa55.js';
-import { P as PermissionDenied } from '../../../PermissionDenied-lLDk9Zpw.js';
-import { S as SessionExpired } from '../../../SessionExpired-OS-dhsdb.js';
+import { E as EmptyState } from '../../../EmptyState-UWXhBp5U.js';
+import { E as ErrorState } from '../../../ErrorState-DqRx8Dw_.js';
+import { P as PermissionDenied } from '../../../PermissionDenied-B6TSGolC.js';
+import { S as SessionExpired } from '../../../SessionExpired-Bq5LcsDu.js';
 import { is401UnauthorizedError, is403ForbiddenError, isObservabilityUnavailableError, isUnsupportedObservabilityOperationError } from '../../../utils/query-utils.es.js';
 
 function LogsErrorContent({ error, resource, errorTitle }) {

package/dist/domains/logs/components/logs-layout.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function LogsLayout({ listSlot, logPanelSlot, tracePanelSlot, spanPanelSlot, logCollapsed }) {
   const hasSidePanel = !!logPanelSlot;

package/dist/domains/logs/components/logs-layout.es.js

@@ -1,5 +1,5 @@
 import { jsxs } from 'react/jsx-runtime';
-import { c as cn } from '../../../cn-C6s2yXwM.js';
+import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function LogsLayout({ listSlot, logPanelSlot, tracePanelSlot, spanPanelSlot, logCollapsed }) {
   const hasSidePanel = !!logPanelSlot;

package/dist/domains/logs/components/logs-list-view.cjs.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const reactVirtual = require('@tanstack/react-virtual');
 const React = require('react');
-const dataListSkeleton = require('../../../data-list-skeleton-CFaGBKDb.cjs');
+const dataListSkeleton = require('../../../data-list-skeleton-ADXw-opu.cjs');
 const useDataListKeyboard = require('../../../use-data-list-keyboard-DF3tLe10.cjs');
-const logsDataList = require('../../../logs-data-list-B1FY1A2A.cjs');
+const logsDataList = require('../../../logs-data-list-BSHJPGi6.cjs');
 
 const COLUMNS = "6rem 9rem 5rem 10rem minmax(8rem,1fr) minmax(8rem,1fr)";
 const ROW_HEIGHT = 36;
@@ -20,7 +20,9 @@ function LogsListView({
   setEndOfListElement,
   logIdMap,
   featuredLogId,
-  onLogClick
+  onLogClick,
+  timestampSort,
+  onSortChange
 }) {
   const scrollRef = React.useRef(null);
   const virtualizer = reactVirtual.useVirtualizer({
@@ -51,7 +53,7 @@ function LogsListView({
   const paddingBottom = virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(logsDataList.LogsDataList, { columns: COLUMNS, scrollRef, className: "min-w-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(logsDataList.LogsDataList.Top, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(logsDataList.LogsDataList.TopCell, { children: "Date" }),
+      onSortChange ? /* @__PURE__ */ jsxRuntime.jsx(logsDataList.LogsDataList.SortableTopCell, { sortKey: "timestamp", sort: timestampSort, onSortChange, children: "Date" }) : /* @__PURE__ */ jsxRuntime.jsx(logsDataList.LogsDataList.TopCell, { children: "Date" }),
       /* @__PURE__ */ jsxRuntime.jsx(logsDataList.LogsDataList.TopCell, { children: "Time" }),
       /* @__PURE__ */ jsxRuntime.jsx(logsDataList.LogsDataList.TopCell, { children: "Level" }),
       /* @__PURE__ */ jsxRuntime.jsx(logsDataList.LogsDataList.TopCell, { children: "Entity" }),

package/dist/domains/logs/components/logs-list-view.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"logs-list-view.cjs.js","sources":["../../../../src/domains/logs/components/logs-list-view.tsx"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual';\nimport { useEffect, useRef } from 'react';\nimport type { LogRecord } from '../types';\nimport { useDataListKeyboard } from '@/ds/components/DataList';\nimport { LogsDataList, LogsDataListSkeleton } from '@/ds/components/LogsDataList';\n\n// Fixed widths on non-flex columns prevent track shifts as the virtualizer swaps rows in/out.\nconst COLUMNS = '6rem 9rem 5rem 10rem minmax(8rem,1fr) minmax(8rem,1fr)';\n\nconst ROW_HEIGHT = 36;\nconst OVERSCAN = 8;\n\nexport interface LogsListViewProps {\n  logs: LogRecord[];\n  isLoading?: boolean;\n  isFetchingNextPage?: boolean;\n  hasNextPage?: boolean;\n  setEndOfListElement?: (element: HTMLDivElement | null) => void;\n  /** Stable per-render id for each log — used for React keys and for matching against `featuredLogId`.\n   *  Build with `useLogsListNavigation`. */\n  logIdMap: Map<LogRecord, string>;\n  /** Currently featured/selected log — its row gets the highlighted background. */\n  featuredLogId?: string | null;\n  /** Called when a row is clicked. The current toggle + trace-sync logic is the consumer's call. */\n  onLogClick: (log: LogRecord) => void;\n}\n\n/**\n * Virtualized presentational list. Renders only the visible window of logs via\n * TanStack Virtual, sandwiched between top/bottom Spacers that preserve total\n * scroll height. Owns no state and fetches no data.\n */\nexport function LogsListView({\n  logs,\n  isLoading,\n  isFetchingNextPage,\n  hasNextPage,\n  setEndOfListElement,\n  logIdMap,\n  featuredLogId,\n  onLogClick,\n}: LogsListViewProps) {\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n\n  const virtualizer = useVirtualizer({\n    count: logs.length,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => ROW_HEIGHT,\n    overscan: OVERSCAN,\n  });\n\n  const { getRowProps } = useDataListKeyboard({\n    count: logs.length,\n    containerRef: scrollRef,\n    onNavigate: index => virtualizer.scrollToIndex(index),\n    global: true,\n  });\n\n  // Reset scroll to top whenever a fresh query resolves (filter / date range change).\n  // `isLoading` only flips on initial fetches — `fetchNextPage` keeps it `false`, so this\n  // effect doesn't fire during pagination.\n  //\n  // Why the manual scroll event: when the skeleton-vs-list branch swaps in the new scroll\n  // container, it mounts at `scrollTop = 0`. The virtualizer rebinds its listener but\n  // doesn't re-read `scrollTop`, so it keeps the stale `scrollOffset` from the previous\n  // element. `scrollToOffset(0)` no-ops because the new element is already at 0 (no scroll\n  // event fires). Dispatching a synthetic `scroll` forces the virtualizer's handler to\n  // read the fresh `scrollTop` and recompute `virtualItems` with `paddingTop = 0`.\n  const wasLoadingRef = useRef(isLoading);\n  useEffect(() => {\n    if (wasLoadingRef.current && !isLoading) {\n      scrollRef.current?.dispatchEvent(new Event('scroll'));\n    }\n    wasLoadingRef.current = isLoading;\n  }, [isLoading]);\n\n  if (isLoading) {\n    return <LogsDataListSkeleton columns={COLUMNS} />;\n  }\n\n  const virtualItems = virtualizer.getVirtualItems();\n  const totalSize = virtualizer.getTotalSize();\n  const paddingTop = virtualItems[0]?.start ?? 0;\n  const paddingBottom =\n    virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;\n\n  return (\n    <LogsDataList columns={COLUMNS} scrollRef={scrollRef} className=\"min-w-0\">\n      <LogsDataList.Top>\n        <LogsDataList.TopCell>Date</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Time</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Level</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Entity</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Message</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Data</LogsDataList.TopCell>\n      </LogsDataList.Top>\n\n      {logs.length === 0 ? (\n        <LogsDataList.NoMatch message=\"No logs match your search\" />\n      ) : (\n        <>\n          <LogsDataList.Spacer height={paddingTop} />\n          {virtualItems.map(vi => {\n            const log = logs[vi.index];\n            if (!log) return null;\n            const id = logIdMap.get(log);\n            // Defensive: consumer is expected to build `logIdMap` from the same `logs` list\n            // (via `useLogsListNavigation`), but if they drift we'd rather drop the row than\n            // ship a missing-key warning and broken selection highlighting.\n            if (!id) return null;\n            const isFeatured = id === featuredLogId;\n\n            return (\n              <LogsDataList.RowButton\n                key={id}\n                ref={virtualizer.measureElement}\n                data-index={vi.index}\n                {...getRowProps(vi.index)}\n                onClick={() => onLogClick(log)}\n                featured={isFeatured}\n                variant={log.level === 'error' || log.level === 'fatal' ? 'error' : 'default'}\n              >\n                <LogsDataList.DateCell timestamp={log.timestamp} />\n                <LogsDataList.TimeCell timestamp={log.timestamp} />\n                <LogsDataList.LevelCell level={log.level} />\n                <LogsDataList.EntityCell entityType={log.entityType} entityName={log.entityName} />\n                <LogsDataList.MessageCell message={log.message} />\n                <LogsDataList.DataCell data={log.data} />\n              </LogsDataList.RowButton>\n            );\n          })}\n          <LogsDataList.Spacer height={paddingBottom} />\n        </>\n      )}\n      <LogsDataList.NextPageLoading\n        isLoading={isFetchingNextPage}\n        hasMore={hasNextPage}\n        setEndOfListElement={setEndOfListElement}\n      />\n    </LogsDataList>\n  );\n}\n"],"names":["useRef","useVirtualizer","useDataListKeyboard","useEffect","jsx","LogsDataListSkeleton","LogsDataList","jsxs","Fragment"],"mappings":";;;;;;;;;;;AAOA,MAAM,OAAA,GAAU,wDAAA;AAEhB,MAAM,UAAA,GAAa,EAAA;AACnB,MAAM,QAAA,GAAW,CAAA;AAsBV,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA,SAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,EAAsB;AACpB,EAAA,MAAM,SAAA,GAAYA,aAA8B,IAAI,CAAA;AAEpD,EAAA,MAAM,cAAcC,2BAAA,CAAe;AAAA,IACjC,OAAO,IAAA,CAAK,MAAA;AAAA,IACZ,gBAAA,EAAkB,MAAM,SAAA,CAAU,OAAA;AAAA,IAClC,cAAc,MAAM,UAAA;AAAA,IACpB,QAAA,EAAU;AAAA,GACX,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAY,GAAIC,uCAAA,CAAoB;AAAA,IAC1C,OAAO,IAAA,CAAK,MAAA;AAAA,IACZ,YAAA,EAAc,SAAA;AAAA,IACd,UAAA,EAAY,CAAA,KAAA,KAAS,WAAA,CAAY,aAAA,CAAc,KAAK,CAAA;AAAA,IACpD,MAAA,EAAQ;AAAA,GACT,CAAA;AAYD,EAAA,MAAM,aAAA,GAAgBF,aAAO,SAAS,CAAA;AACtC,EAAAG,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,aAAA,CAAc,OAAA,IAAW,CAAC,SAAA,EAAW;AACvC,MAAA,SAAA,CAAU,OAAA,EAAS,aAAA,CAAc,IAAI,KAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,IACtD;AACA,IAAA,aAAA,CAAc,OAAA,GAAU,SAAA;AAAA,EAC1B,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBAAOC,cAAA,CAACC,iCAAA,EAAA,EAAqB,OAAA,EAAS,OAAA,EAAS,CAAA;AAAA,EACjD;AAEA,EAAA,MAAM,YAAA,GAAe,YAAY,eAAA,EAAgB;AACjD,EAAA,MAAM,SAAA,GAAY,YAAY,YAAA,EAAa;AAC3C,EAAA,MAAM,UAAA,GAAa,YAAA,CAAa,CAAC,CAAA,EAAG,KAAA,IAAS,CAAA;AAC7C,EAAA,MAAM,aAAA,GACJ,YAAA,CAAa,MAAA,GAAS,CAAA,GAAI,KAAK,GAAA,CAAI,CAAA,EAAG,SAAA,IAAa,YAAA,CAAa,aAAa,MAAA,GAAS,CAAC,CAAA,EAAG,GAAA,IAAO,EAAE,CAAA,GAAI,CAAA;AAEzG,EAAA,uCACGC,yBAAA,EAAA,EAAa,OAAA,EAAS,OAAA,EAAS,SAAA,EAAsB,WAAU,SAAA,EAC9D,QAAA,EAAA;AAAA,oBAAAC,eAAA,CAACD,yBAAA,CAAa,KAAb,EACC,QAAA,EAAA;AAAA,sBAAAF,cAAA,CAACE,yBAAA,CAAa,OAAA,EAAb,EAAqB,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,sBAC1BF,cAAA,CAACE,yBAAA,CAAa,OAAA,EAAb,EAAqB,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,sBAC1BF,cAAA,CAACE,yBAAA,CAAa,OAAA,EAAb,EAAqB,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,sBAC3BF,cAAA,CAACE,yBAAA,CAAa,OAAA,EAAb,EAAqB,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,sBAC5BF,cAAA,CAACE,yBAAA,CAAa,OAAA,EAAb,EAAqB,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,sBAC7BF,cAAA,CAACE,yBAAA,CAAa,OAAA,EAAb,EAAqB,QAAA,EAAA,MAAA,EAAI;AAAA,KAAA,EAC5B,CAAA;AAAA,IAEC,IAAA,CAAK,MAAA,KAAW,CAAA,mBACfF,cAAA,CAACE,yBAAA,CAAa,SAAb,EAAqB,OAAA,EAAQ,2BAAA,EAA4B,CAAA,mBAE1DC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAAJ,cAAA,CAACE,yBAAA,CAAa,MAAA,EAAb,EAAoB,MAAA,EAAQ,UAAA,EAAY,CAAA;AAAA,MACxC,YAAA,CAAa,IAAI,CAAA,EAAA,KAAM;AACtB,QAAA,MAAM,GAAA,GAAM,IAAA,CAAK,EAAA,CAAG,KAAK,CAAA;AACzB,QAAA,IAAI,CAAC,KAAK,OAAO,IAAA;AACjB,QAAA,MAAM,EAAA,GAAK,QAAA,CAAS,GAAA,CAAI,GAAG,CAAA;AAI3B,QAAA,IAAI,CAAC,IAAI,OAAO,IAAA;AAChB,QAAA,MAAM,aAAa,EAAA,KAAO,aAAA;AAE1B,QAAA,uBACEC,eAAA;AAAA,UAACD,yBAAA,CAAa,SAAA;AAAA,UAAb;AAAA,YAEC,KAAK,WAAA,CAAY,cAAA;AAAA,YACjB,cAAY,EAAA,CAAG,KAAA;AAAA,YACd,GAAG,WAAA,CAAY,EAAA,CAAG,KAAK,CAAA;AAAA,YACxB,OAAA,EAAS,MAAM,UAAA,CAAW,GAAG,CAAA;AAAA,YAC7B,QAAA,EAAU,UAAA;AAAA,YACV,SAAS,GAAA,CAAI,KAAA,KAAU,WAAW,GAAA,CAAI,KAAA,KAAU,UAAU,OAAA,GAAU,SAAA;AAAA,YAEpE,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAACE,yBAAA,CAAa,QAAA,EAAb,EAAsB,SAAA,EAAW,IAAI,SAAA,EAAW,CAAA;AAAA,6CAChDA,yBAAA,CAAa,QAAA,EAAb,EAAsB,SAAA,EAAW,IAAI,SAAA,EAAW,CAAA;AAAA,6CAChDA,yBAAA,CAAa,SAAA,EAAb,EAAuB,KAAA,EAAO,IAAI,KAAA,EAAO,CAAA;AAAA,8BAC1CF,cAAA,CAACE,0BAAa,UAAA,EAAb,EAAwB,YAAY,GAAA,CAAI,UAAA,EAAY,UAAA,EAAY,GAAA,CAAI,UAAA,EAAY,CAAA;AAAA,6CAChFA,yBAAA,CAAa,WAAA,EAAb,EAAyB,OAAA,EAAS,IAAI,OAAA,EAAS,CAAA;AAAA,6CAC/CA,yBAAA,CAAa,QAAA,EAAb,EAAsB,IAAA,EAAM,IAAI,IAAA,EAAM;AAAA;AAAA,WAAA;AAAA,UAblC;AAAA,SAcP;AAAA,MAEJ,CAAC,CAAA;AAAA,sBACDF,cAAA,CAACE,yBAAA,CAAa,MAAA,EAAb,EAAoB,QAAQ,aAAA,EAAe;AAAA,KAAA,EAC9C,CAAA;AAAA,oBAEFF,cAAA;AAAA,MAACE,yBAAA,CAAa,eAAA;AAAA,MAAb;AAAA,QACC,SAAA,EAAW,kBAAA;AAAA,QACX,OAAA,EAAS,WAAA;AAAA,QACT;AAAA;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"logs-list-view.cjs.js","sources":["../../../../src/domains/logs/components/logs-list-view.tsx"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual';\nimport { useEffect, useRef } from 'react';\nimport type { LogRecord } from '../types';\nimport { useDataListKeyboard } from '@/ds/components/DataList';\nimport type { DataListSort } from '@/ds/components/DataList';\nimport { LogsDataList, LogsDataListSkeleton } from '@/ds/components/LogsDataList';\n\n// Fixed widths on non-flex columns prevent track shifts as the virtualizer swaps rows in/out.\nconst COLUMNS = '6rem 9rem 5rem 10rem minmax(8rem,1fr) minmax(8rem,1fr)';\n\nconst ROW_HEIGHT = 36;\nconst OVERSCAN = 8;\n\nexport interface LogsListViewProps {\n  logs: LogRecord[];\n  isLoading?: boolean;\n  isFetchingNextPage?: boolean;\n  hasNextPage?: boolean;\n  setEndOfListElement?: (element: HTMLDivElement | null) => void;\n  /** Stable per-render id for each log — used for React keys and for matching against `featuredLogId`.\n   *  Build with `useLogsListNavigation`. */\n  logIdMap: Map<LogRecord, string>;\n  /** Currently featured/selected log — its row gets the highlighted background. */\n  featuredLogId?: string | null;\n  /** Called when a row is clicked. The current toggle + trace-sync logic is the consumer's call. */\n  onLogClick: (log: LogRecord) => void;\n  /** Current timestamp sort direction. When `onSortChange` is provided the Date/Time headers become sortable. */\n  timestampSort?: DataListSort;\n  onSortChange?: (direction: DataListSort, key: 'timestamp') => void;\n}\n\n/**\n * Virtualized presentational list. Renders only the visible window of logs via\n * TanStack Virtual, sandwiched between top/bottom Spacers that preserve total\n * scroll height. Owns no state and fetches no data.\n */\nexport function LogsListView({\n  logs,\n  isLoading,\n  isFetchingNextPage,\n  hasNextPage,\n  setEndOfListElement,\n  logIdMap,\n  featuredLogId,\n  onLogClick,\n  timestampSort,\n  onSortChange,\n}: LogsListViewProps) {\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n\n  const virtualizer = useVirtualizer({\n    count: logs.length,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => ROW_HEIGHT,\n    overscan: OVERSCAN,\n  });\n\n  const { getRowProps } = useDataListKeyboard({\n    count: logs.length,\n    containerRef: scrollRef,\n    onNavigate: index => virtualizer.scrollToIndex(index),\n    global: true,\n  });\n\n  // Reset scroll to top whenever a fresh query resolves (filter / date range change).\n  // `isLoading` only flips on initial fetches — `fetchNextPage` keeps it `false`, so this\n  // effect doesn't fire during pagination.\n  //\n  // Why the manual scroll event: when the skeleton-vs-list branch swaps in the new scroll\n  // container, it mounts at `scrollTop = 0`. The virtualizer rebinds its listener but\n  // doesn't re-read `scrollTop`, so it keeps the stale `scrollOffset` from the previous\n  // element. `scrollToOffset(0)` no-ops because the new element is already at 0 (no scroll\n  // event fires). Dispatching a synthetic `scroll` forces the virtualizer's handler to\n  // read the fresh `scrollTop` and recompute `virtualItems` with `paddingTop = 0`.\n  const wasLoadingRef = useRef(isLoading);\n  useEffect(() => {\n    if (wasLoadingRef.current && !isLoading) {\n      scrollRef.current?.dispatchEvent(new Event('scroll'));\n    }\n    wasLoadingRef.current = isLoading;\n  }, [isLoading]);\n\n  if (isLoading) {\n    return <LogsDataListSkeleton columns={COLUMNS} />;\n  }\n\n  const virtualItems = virtualizer.getVirtualItems();\n  const totalSize = virtualizer.getTotalSize();\n  const paddingTop = virtualItems[0]?.start ?? 0;\n  const paddingBottom =\n    virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;\n\n  return (\n    <LogsDataList columns={COLUMNS} scrollRef={scrollRef} className=\"min-w-0\">\n      <LogsDataList.Top>\n        {onSortChange ? (\n          <LogsDataList.SortableTopCell sortKey=\"timestamp\" sort={timestampSort} onSortChange={onSortChange}>\n            Date\n          </LogsDataList.SortableTopCell>\n        ) : (\n          <LogsDataList.TopCell>Date</LogsDataList.TopCell>\n        )}\n        <LogsDataList.TopCell>Time</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Level</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Entity</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Message</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Data</LogsDataList.TopCell>\n      </LogsDataList.Top>\n\n      {logs.length === 0 ? (\n        <LogsDataList.NoMatch message=\"No logs match your search\" />\n      ) : (\n        <>\n          <LogsDataList.Spacer height={paddingTop} />\n          {virtualItems.map(vi => {\n            const log = logs[vi.index];\n            if (!log) return null;\n            const id = logIdMap.get(log);\n            // Defensive: consumer is expected to build `logIdMap` from the same `logs` list\n            // (via `useLogsListNavigation`), but if they drift we'd rather drop the row than\n            // ship a missing-key warning and broken selection highlighting.\n            if (!id) return null;\n            const isFeatured = id === featuredLogId;\n\n            return (\n              <LogsDataList.RowButton\n                key={id}\n                ref={virtualizer.measureElement}\n                data-index={vi.index}\n                {...getRowProps(vi.index)}\n                onClick={() => onLogClick(log)}\n                featured={isFeatured}\n                variant={log.level === 'error' || log.level === 'fatal' ? 'error' : 'default'}\n              >\n                <LogsDataList.DateCell timestamp={log.timestamp} />\n                <LogsDataList.TimeCell timestamp={log.timestamp} />\n                <LogsDataList.LevelCell level={log.level} />\n                <LogsDataList.EntityCell entityType={log.entityType} entityName={log.entityName} />\n                <LogsDataList.MessageCell message={log.message} />\n                <LogsDataList.DataCell data={log.data} />\n              </LogsDataList.RowButton>\n            );\n          })}\n          <LogsDataList.Spacer height={paddingBottom} />\n        </>\n      )}\n      <LogsDataList.NextPageLoading\n        isLoading={isFetchingNextPage}\n        hasMore={hasNextPage}\n        setEndOfListElement={setEndOfListElement}\n      />\n    </LogsDataList>\n  );\n}\n"],"names":["useRef","useVirtualizer","useDataListKeyboard","useEffect","jsx","LogsDataListSkeleton","LogsDataList","jsxs","Fragment"],"mappings":"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"}

package/dist/domains/logs/components/logs-list-view.es.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useRef, useEffect } from 'react';
-import { D as DataListSkeleton } from '../../../data-list-skeleton-CQQydcpj.js';
+import { D as DataListSkeleton } from '../../../data-list-skeleton-D7-glFuk.js';
 import { u as useDataListKeyboard } from '../../../use-data-list-keyboard-DFQr4t38.js';
-import { L as LogsDataList } from '../../../logs-data-list-DZz_YVd2.js';
+import { L as LogsDataList } from '../../../logs-data-list-CG-UgC_x.js';
 
 const COLUMNS = "6rem 9rem 5rem 10rem minmax(8rem,1fr) minmax(8rem,1fr)";
 const ROW_HEIGHT = 36;
@@ -16,7 +16,9 @@ function LogsListView({
   setEndOfListElement,
   logIdMap,
   featuredLogId,
-  onLogClick
+  onLogClick,
+  timestampSort,
+  onSortChange
 }) {
   const scrollRef = useRef(null);
   const virtualizer = useVirtualizer({
@@ -47,7 +49,7 @@ function LogsListView({
   const paddingBottom = virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;
   return /* @__PURE__ */ jsxs(LogsDataList, { columns: COLUMNS, scrollRef, className: "min-w-0", children: [
     /* @__PURE__ */ jsxs(LogsDataList.Top, { children: [
-      /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Date" }),
+      onSortChange ? /* @__PURE__ */ jsx(LogsDataList.SortableTopCell, { sortKey: "timestamp", sort: timestampSort, onSortChange, children: "Date" }) : /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Date" }),
       /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Time" }),
       /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Level" }),
       /* @__PURE__ */ jsx(LogsDataList.TopCell, { children: "Entity" }),

package/dist/domains/logs/components/logs-list-view.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"logs-list-view.es.js","sources":["../../../../src/domains/logs/components/logs-list-view.tsx"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual';\nimport { useEffect, useRef } from 'react';\nimport type { LogRecord } from '../types';\nimport { useDataListKeyboard } from '@/ds/components/DataList';\nimport { LogsDataList, LogsDataListSkeleton } from '@/ds/components/LogsDataList';\n\n// Fixed widths on non-flex columns prevent track shifts as the virtualizer swaps rows in/out.\nconst COLUMNS = '6rem 9rem 5rem 10rem minmax(8rem,1fr) minmax(8rem,1fr)';\n\nconst ROW_HEIGHT = 36;\nconst OVERSCAN = 8;\n\nexport interface LogsListViewProps {\n  logs: LogRecord[];\n  isLoading?: boolean;\n  isFetchingNextPage?: boolean;\n  hasNextPage?: boolean;\n  setEndOfListElement?: (element: HTMLDivElement | null) => void;\n  /** Stable per-render id for each log — used for React keys and for matching against `featuredLogId`.\n   *  Build with `useLogsListNavigation`. */\n  logIdMap: Map<LogRecord, string>;\n  /** Currently featured/selected log — its row gets the highlighted background. */\n  featuredLogId?: string | null;\n  /** Called when a row is clicked. The current toggle + trace-sync logic is the consumer's call. */\n  onLogClick: (log: LogRecord) => void;\n}\n\n/**\n * Virtualized presentational list. Renders only the visible window of logs via\n * TanStack Virtual, sandwiched between top/bottom Spacers that preserve total\n * scroll height. Owns no state and fetches no data.\n */\nexport function LogsListView({\n  logs,\n  isLoading,\n  isFetchingNextPage,\n  hasNextPage,\n  setEndOfListElement,\n  logIdMap,\n  featuredLogId,\n  onLogClick,\n}: LogsListViewProps) {\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n\n  const virtualizer = useVirtualizer({\n    count: logs.length,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => ROW_HEIGHT,\n    overscan: OVERSCAN,\n  });\n\n  const { getRowProps } = useDataListKeyboard({\n    count: logs.length,\n    containerRef: scrollRef,\n    onNavigate: index => virtualizer.scrollToIndex(index),\n    global: true,\n  });\n\n  // Reset scroll to top whenever a fresh query resolves (filter / date range change).\n  // `isLoading` only flips on initial fetches — `fetchNextPage` keeps it `false`, so this\n  // effect doesn't fire during pagination.\n  //\n  // Why the manual scroll event: when the skeleton-vs-list branch swaps in the new scroll\n  // container, it mounts at `scrollTop = 0`. The virtualizer rebinds its listener but\n  // doesn't re-read `scrollTop`, so it keeps the stale `scrollOffset` from the previous\n  // element. `scrollToOffset(0)` no-ops because the new element is already at 0 (no scroll\n  // event fires). Dispatching a synthetic `scroll` forces the virtualizer's handler to\n  // read the fresh `scrollTop` and recompute `virtualItems` with `paddingTop = 0`.\n  const wasLoadingRef = useRef(isLoading);\n  useEffect(() => {\n    if (wasLoadingRef.current && !isLoading) {\n      scrollRef.current?.dispatchEvent(new Event('scroll'));\n    }\n    wasLoadingRef.current = isLoading;\n  }, [isLoading]);\n\n  if (isLoading) {\n    return <LogsDataListSkeleton columns={COLUMNS} />;\n  }\n\n  const virtualItems = virtualizer.getVirtualItems();\n  const totalSize = virtualizer.getTotalSize();\n  const paddingTop = virtualItems[0]?.start ?? 0;\n  const paddingBottom =\n    virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;\n\n  return (\n    <LogsDataList columns={COLUMNS} scrollRef={scrollRef} className=\"min-w-0\">\n      <LogsDataList.Top>\n        <LogsDataList.TopCell>Date</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Time</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Level</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Entity</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Message</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Data</LogsDataList.TopCell>\n      </LogsDataList.Top>\n\n      {logs.length === 0 ? (\n        <LogsDataList.NoMatch message=\"No logs match your search\" />\n      ) : (\n        <>\n          <LogsDataList.Spacer height={paddingTop} />\n          {virtualItems.map(vi => {\n            const log = logs[vi.index];\n            if (!log) return null;\n            const id = logIdMap.get(log);\n            // Defensive: consumer is expected to build `logIdMap` from the same `logs` list\n            // (via `useLogsListNavigation`), but if they drift we'd rather drop the row than\n            // ship a missing-key warning and broken selection highlighting.\n            if (!id) return null;\n            const isFeatured = id === featuredLogId;\n\n            return (\n              <LogsDataList.RowButton\n                key={id}\n                ref={virtualizer.measureElement}\n                data-index={vi.index}\n                {...getRowProps(vi.index)}\n                onClick={() => onLogClick(log)}\n                featured={isFeatured}\n                variant={log.level === 'error' || log.level === 'fatal' ? 'error' : 'default'}\n              >\n                <LogsDataList.DateCell timestamp={log.timestamp} />\n                <LogsDataList.TimeCell timestamp={log.timestamp} />\n                <LogsDataList.LevelCell level={log.level} />\n                <LogsDataList.EntityCell entityType={log.entityType} entityName={log.entityName} />\n                <LogsDataList.MessageCell message={log.message} />\n                <LogsDataList.DataCell data={log.data} />\n              </LogsDataList.RowButton>\n            );\n          })}\n          <LogsDataList.Spacer height={paddingBottom} />\n        </>\n      )}\n      <LogsDataList.NextPageLoading\n        isLoading={isFetchingNextPage}\n        hasMore={hasNextPage}\n        setEndOfListElement={setEndOfListElement}\n      />\n    </LogsDataList>\n  );\n}\n"],"names":["LogsDataListSkeleton"],"mappings":"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"}
+{"version":3,"file":"logs-list-view.es.js","sources":["../../../../src/domains/logs/components/logs-list-view.tsx"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual';\nimport { useEffect, useRef } from 'react';\nimport type { LogRecord } from '../types';\nimport { useDataListKeyboard } from '@/ds/components/DataList';\nimport type { DataListSort } from '@/ds/components/DataList';\nimport { LogsDataList, LogsDataListSkeleton } from '@/ds/components/LogsDataList';\n\n// Fixed widths on non-flex columns prevent track shifts as the virtualizer swaps rows in/out.\nconst COLUMNS = '6rem 9rem 5rem 10rem minmax(8rem,1fr) minmax(8rem,1fr)';\n\nconst ROW_HEIGHT = 36;\nconst OVERSCAN = 8;\n\nexport interface LogsListViewProps {\n  logs: LogRecord[];\n  isLoading?: boolean;\n  isFetchingNextPage?: boolean;\n  hasNextPage?: boolean;\n  setEndOfListElement?: (element: HTMLDivElement | null) => void;\n  /** Stable per-render id for each log — used for React keys and for matching against `featuredLogId`.\n   *  Build with `useLogsListNavigation`. */\n  logIdMap: Map<LogRecord, string>;\n  /** Currently featured/selected log — its row gets the highlighted background. */\n  featuredLogId?: string | null;\n  /** Called when a row is clicked. The current toggle + trace-sync logic is the consumer's call. */\n  onLogClick: (log: LogRecord) => void;\n  /** Current timestamp sort direction. When `onSortChange` is provided the Date/Time headers become sortable. */\n  timestampSort?: DataListSort;\n  onSortChange?: (direction: DataListSort, key: 'timestamp') => void;\n}\n\n/**\n * Virtualized presentational list. Renders only the visible window of logs via\n * TanStack Virtual, sandwiched between top/bottom Spacers that preserve total\n * scroll height. Owns no state and fetches no data.\n */\nexport function LogsListView({\n  logs,\n  isLoading,\n  isFetchingNextPage,\n  hasNextPage,\n  setEndOfListElement,\n  logIdMap,\n  featuredLogId,\n  onLogClick,\n  timestampSort,\n  onSortChange,\n}: LogsListViewProps) {\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n\n  const virtualizer = useVirtualizer({\n    count: logs.length,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => ROW_HEIGHT,\n    overscan: OVERSCAN,\n  });\n\n  const { getRowProps } = useDataListKeyboard({\n    count: logs.length,\n    containerRef: scrollRef,\n    onNavigate: index => virtualizer.scrollToIndex(index),\n    global: true,\n  });\n\n  // Reset scroll to top whenever a fresh query resolves (filter / date range change).\n  // `isLoading` only flips on initial fetches — `fetchNextPage` keeps it `false`, so this\n  // effect doesn't fire during pagination.\n  //\n  // Why the manual scroll event: when the skeleton-vs-list branch swaps in the new scroll\n  // container, it mounts at `scrollTop = 0`. The virtualizer rebinds its listener but\n  // doesn't re-read `scrollTop`, so it keeps the stale `scrollOffset` from the previous\n  // element. `scrollToOffset(0)` no-ops because the new element is already at 0 (no scroll\n  // event fires). Dispatching a synthetic `scroll` forces the virtualizer's handler to\n  // read the fresh `scrollTop` and recompute `virtualItems` with `paddingTop = 0`.\n  const wasLoadingRef = useRef(isLoading);\n  useEffect(() => {\n    if (wasLoadingRef.current && !isLoading) {\n      scrollRef.current?.dispatchEvent(new Event('scroll'));\n    }\n    wasLoadingRef.current = isLoading;\n  }, [isLoading]);\n\n  if (isLoading) {\n    return <LogsDataListSkeleton columns={COLUMNS} />;\n  }\n\n  const virtualItems = virtualizer.getVirtualItems();\n  const totalSize = virtualizer.getTotalSize();\n  const paddingTop = virtualItems[0]?.start ?? 0;\n  const paddingBottom =\n    virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0;\n\n  return (\n    <LogsDataList columns={COLUMNS} scrollRef={scrollRef} className=\"min-w-0\">\n      <LogsDataList.Top>\n        {onSortChange ? (\n          <LogsDataList.SortableTopCell sortKey=\"timestamp\" sort={timestampSort} onSortChange={onSortChange}>\n            Date\n          </LogsDataList.SortableTopCell>\n        ) : (\n          <LogsDataList.TopCell>Date</LogsDataList.TopCell>\n        )}\n        <LogsDataList.TopCell>Time</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Level</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Entity</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Message</LogsDataList.TopCell>\n        <LogsDataList.TopCell>Data</LogsDataList.TopCell>\n      </LogsDataList.Top>\n\n      {logs.length === 0 ? (\n        <LogsDataList.NoMatch message=\"No logs match your search\" />\n      ) : (\n        <>\n          <LogsDataList.Spacer height={paddingTop} />\n          {virtualItems.map(vi => {\n            const log = logs[vi.index];\n            if (!log) return null;\n            const id = logIdMap.get(log);\n            // Defensive: consumer is expected to build `logIdMap` from the same `logs` list\n            // (via `useLogsListNavigation`), but if they drift we'd rather drop the row than\n            // ship a missing-key warning and broken selection highlighting.\n            if (!id) return null;\n            const isFeatured = id === featuredLogId;\n\n            return (\n              <LogsDataList.RowButton\n                key={id}\n                ref={virtualizer.measureElement}\n                data-index={vi.index}\n                {...getRowProps(vi.index)}\n                onClick={() => onLogClick(log)}\n                featured={isFeatured}\n                variant={log.level === 'error' || log.level === 'fatal' ? 'error' : 'default'}\n              >\n                <LogsDataList.DateCell timestamp={log.timestamp} />\n                <LogsDataList.TimeCell timestamp={log.timestamp} />\n                <LogsDataList.LevelCell level={log.level} />\n                <LogsDataList.EntityCell entityType={log.entityType} entityName={log.entityName} />\n                <LogsDataList.MessageCell message={log.message} />\n                <LogsDataList.DataCell data={log.data} />\n              </LogsDataList.RowButton>\n            );\n          })}\n          <LogsDataList.Spacer height={paddingBottom} />\n        </>\n      )}\n      <LogsDataList.NextPageLoading\n        isLoading={isFetchingNextPage}\n        hasMore={hasNextPage}\n        setEndOfListElement={setEndOfListElement}\n      />\n    </LogsDataList>\n  );\n}\n"],"names":["LogsDataListSkeleton"],"mappings":"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"}

package/dist/domains/logs/components/logs-toolbar.cjs.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const propertyFilterApplied = require('../../../property-filter-applied-DZz8aSoU.cjs');
-const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
+const propertyFilterApplied = require('../../../property-filter-applied-BmxCPe2d.cjs');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function LogsToolbar({
   onClear,

package/dist/domains/logs/components/logs-toolbar.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { P as PropertyFilterApplied, a as PropertyFilterActions } from '../../../property-filter-applied-CZu-Jwsx.js';
-import { c as cn } from '../../../cn-C6s2yXwM.js';
+import { P as PropertyFilterApplied, a as PropertyFilterActions } from '../../../property-filter-applied-BBiUbtr0.js';
+import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function LogsToolbar({
   onClear,

package/dist/domains/logs/components/no-logs-info.cjs.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const dateFns = require('date-fns');
 const lucideReact = require('lucide-react');
-const Button = require('../../../Button-C2dx_QZN.cjs');
-const EmptyState = require('../../../EmptyState-_TZefNk_.cjs');
+const Button = require('../../../Button-CVewl8nT.cjs');
+const EmptyState = require('../../../EmptyState-CdRjFB06.cjs');
 
 const PRESET_LABELS = {
   "last-24h": "the last 24 hours",

package/dist/domains/logs/components/no-logs-info.es.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { format } from 'date-fns';
 import { ExternalLinkIcon, CircleSlashIcon } from 'lucide-react';
-import { B as Button } from '../../../Button-DS6O6fvU.js';
-import { E as EmptyState } from '../../../EmptyState-CDM5htkF.js';
+import { B as Button } from '../../../Button-cWcBEd-G.js';
+import { E as EmptyState } from '../../../EmptyState-UWXhBp5U.js';
 
 const PRESET_LABELS = {
   "last-24h": "the last 24 hours",

package/dist/domains/logs/hooks/use-logs-filter-persistence.cjs.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const React = require('react');
 const domains_logs_logFilters = require('../log-filters.cjs.js');
-const toast = require('../../../toast-CwH7p9gV.cjs');
+const toast = require('../../../toast-nm-fM7BR.cjs');
 
 const DEFAULT_SAVED_MESSAGE = "Filters setting for Logs saved";
 const DEFAULT_CLEARED_MESSAGE = "Filters setting for Logs cleared up";

package/dist/domains/logs/hooks/use-logs-filter-persistence.es.js

@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { loadLogsFiltersFromStorage, saveLogsFiltersToStorage, clearSavedLogsFilters, hasAnyLogsFilterParams } from '../log-filters.es.js';
-import { t as toast } from '../../../toast-CTMSqE4M.js';
+import { t as toast } from '../../../toast-c5kCpyWt.js';
 
 const DEFAULT_SAVED_MESSAGE = "Filters setting for Logs saved";
 const DEFAULT_CLEARED_MESSAGE = "Filters setting for Logs cleared up";

package/dist/domains/logs/hooks/use-logs.cjs.js

@@ -10,6 +10,7 @@ const utils_queryUtils = require('../../../utils/query-utils.cjs.js');
 
 const LOGS_PER_PAGE = 20;
 const LOGS_REFETCH_INTERVAL_MS = 1e4;
+const DEFAULT_LOGS_ORDER_BY = { field: "timestamp", direction: "DESC" };
 function getNextPageParam(lastPage, _allPages, lastPageParam) {
   if (lastPage?.pagination?.hasMore) {
     return lastPageParam + 1;
@@ -35,15 +36,18 @@ function getLogsRefetchInterval(query) {
   }
   return LOGS_REFETCH_INTERVAL_MS;
 }
-const useLogs = ({ filters } = {}) => {
+const useLogs = ({
+  filters,
+  orderBy = DEFAULT_LOGS_ORDER_BY
+} = {}) => {
   const client = react.useMastraClient();
   const { inView: isEndOfListInView, setRef: setEndOfListElement } = hooks_useInView.useInView();
   const query = reactQuery.useInfiniteQuery({
-    queryKey: ["logs", filters],
+    queryKey: ["logs", filters, orderBy],
     queryFn: ({ pageParam }) => client.listLogsVNext({
       pagination: { page: pageParam, perPage: LOGS_PER_PAGE },
       filters,
-      orderBy: { field: "timestamp", direction: "DESC" }
+      orderBy
     }),
     initialPageParam: 0,
     getNextPageParam,

package/dist/domains/logs/hooks/use-logs.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-logs.cjs.js","sources":["../../../../src/domains/logs/hooks/use-logs.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { useInfiniteQuery } from '@tanstack/react-query';\nimport { useEffect } from 'react';\n\nimport type { LogRecord } from '../types';\nimport { useInView } from '@/hooks/use-in-view';\n\ntype ListLogsArgs = NonNullable<Parameters<MastraClient['listLogsVNext']>[0]>;\ntype ListLogsResponse = Awaited<ReturnType<MastraClient['listLogsVNext']>>;\nimport { isObservabilityUnavailableError, isUnsupportedObservabilityOperationError } from '@/lib/query-utils';\n\ninterface UseLogsReturn {\n  data: LogRecord[] | undefined;\n  hasNextPage: boolean;\n  isFetchingNextPage: boolean;\n  fetchNextPage: () => void;\n  isLoading: boolean;\n  isError: boolean;\n  error: Error | null;\n  setEndOfListElement: (node: HTMLDivElement | null) => void;\n}\n\nconst LOGS_PER_PAGE = 20;\nconst LOGS_REFETCH_INTERVAL_MS = 10000;\n\nexport interface LogsFilters {\n  filters?: ListLogsArgs['filters'];\n}\n\nfunction getNextPageParam(lastPage: ListLogsResponse | undefined, _allPages: unknown, lastPageParam: number) {\n  if (lastPage?.pagination?.hasMore) {\n    return lastPageParam + 1;\n  }\n  return undefined;\n}\n\n/** Deduplicates logs across loaded pages. Offset-based pagination duplicates rows at the page\n *  boundary whenever new logs are inserted between sequential `fetchNextPage` calls — without\n *  this filter the duplicates produce duplicate React keys and chaotic virtualizer offsets.\n *  Falls back to the full serialized record when `logId` is absent so logs that happen to\n *  share `(timestamp, message, data)` but differ in other fields aren't collapsed. */\nfunction selectLogs(data: { pages: ListLogsResponse[] }) {\n  const seen = new Set<string>();\n  const result = [];\n  for (const page of data.pages) {\n    for (const log of page.logs ?? []) {\n      const key = log.logId ?? JSON.stringify(log);\n      if (seen.has(key)) continue;\n      seen.add(key);\n      result.push(log);\n    }\n  }\n  return result;\n}\n\nexport function getLogsRefetchInterval(query: { state: { error: unknown } }) {\n  if (\n    isUnsupportedObservabilityOperationError(query.state.error, 'logs') ||\n    isObservabilityUnavailableError(query.state.error)\n  ) {\n    return false;\n  }\n  return LOGS_REFETCH_INTERVAL_MS;\n}\n\nexport const useLogs: (props?: LogsFilters) => UseLogsReturn = ({ filters }: LogsFilters = {}) => {\n  const client = useMastraClient();\n  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();\n\n  const query = useInfiniteQuery<ListLogsResponse, Error, ReturnType<typeof selectLogs>, readonly unknown[], number>({\n    queryKey: ['logs', filters],\n    queryFn: ({ pageParam }) =>\n      client.listLogsVNext({\n        pagination: { page: pageParam, perPage: LOGS_PER_PAGE },\n        filters,\n        orderBy: { field: 'timestamp', direction: 'DESC' },\n      }),\n    initialPageParam: 0,\n    getNextPageParam,\n    select: selectLogs,\n    retry: false,\n    refetchInterval: getLogsRefetchInterval,\n  });\n\n  const { hasNextPage, isFetchingNextPage, fetchNextPage, data, isLoading, isError, error } = query;\n\n  useEffect(() => {\n    if (isEndOfListInView && hasNextPage && !isFetchingNextPage) {\n      void fetchNextPage();\n    }\n  }, [isEndOfListInView, hasNextPage, isFetchingNextPage, fetchNextPage]);\n\n  return { data, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading, isError, error, setEndOfListElement };\n};\n"],"names":["isUnsupportedObservabilityOperationError","isObservabilityUnavailableError","useMastraClient","useInView","useInfiniteQuery","useEffect"],"mappings":";;;;;;;;;;AAuBA,MAAM,aAAA,GAAgB,EAAA;AACtB,MAAM,wBAAA,GAA2B,GAAA;AAMjC,SAAS,gBAAA,CAAiB,QAAA,EAAwC,SAAA,EAAoB,aAAA,EAAuB;AAC3G,EAAA,IAAI,QAAA,EAAU,YAAY,OAAA,EAAS;AACjC,IAAA,OAAO,aAAA,GAAgB,CAAA;AAAA,EACzB;AACA,EAAA,OAAO,MAAA;AACT;AAOA,SAAS,WAAW,IAAA,EAAqC;AACvD,EAAA,MAAM,IAAA,uBAAW,GAAA,EAAY;AAC7B,EAAA,MAAM,SAAS,EAAC;AAChB,EAAA,KAAA,MAAW,IAAA,IAAQ,KAAK,KAAA,EAAO;AAC7B,IAAA,KAAA,MAAW,GAAA,IAAO,IAAA,CAAK,IAAA,IAAQ,EAAC,EAAG;AACjC,MAAA,MAAM,GAAA,GAAM,GAAA,CAAI,KAAA,IAAS,IAAA,CAAK,UAAU,GAAG,CAAA;AAC3C,MAAA,IAAI,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA,EAAG;AACnB,MAAA,IAAA,CAAK,IAAI,GAAG,CAAA;AACZ,MAAA,MAAA,CAAO,KAAK,GAAG,CAAA;AAAA,IACjB;AAAA,EACF;AACA,EAAA,OAAO,MAAA;AACT;AAEO,SAAS,uBAAuB,KAAA,EAAsC;AAC3E,EAAA,IACEA,yDAAA,CAAyC,KAAA,CAAM,KAAA,CAAM,KAAA,EAAO,MAAM,KAClEC,gDAAA,CAAgC,KAAA,CAAM,KAAA,CAAM,KAAK,CAAA,EACjD;AACA,IAAA,OAAO,KAAA;AAAA,EACT;AACA,EAAA,OAAO,wBAAA;AACT;AAEO,MAAM,UAAkD,CAAC,EAAE,OAAA,EAAQ,GAAiB,EAAC,KAAM;AAChG,EAAA,MAAM,SAASC,qBAAA,EAAgB;AAC/B,EAAA,MAAM,EAAE,MAAA,EAAQ,iBAAA,EAAmB,MAAA,EAAQ,mBAAA,KAAwBC,yBAAA,EAAU;AAE7E,EAAA,MAAM,QAAQC,2BAAA,CAAqG;AAAA,IACjH,QAAA,EAAU,CAAC,MAAA,EAAQ,OAAO,CAAA;AAAA,IAC1B,SAAS,CAAC,EAAE,SAAA,EAAU,KACpB,OAAO,aAAA,CAAc;AAAA,MACnB,UAAA,EAAY,EAAE,IAAA,EAAM,SAAA,EAAW,SAAS,aAAA,EAAc;AAAA,MACtD,OAAA;AAAA,MACA,OAAA,EAAS,EAAE,KAAA,EAAO,WAAA,EAAa,WAAW,MAAA;AAAO,KAClD,CAAA;AAAA,IACH,gBAAA,EAAkB,CAAA;AAAA,IAClB,gBAAA;AAAA,IACA,MAAA,EAAQ,UAAA;AAAA,IACR,KAAA,EAAO,KAAA;AAAA,IACP,eAAA,EAAiB;AAAA,GAClB,CAAA;AAED,EAAA,MAAM,EAAE,aAAa,kBAAA,EAAoB,aAAA,EAAe,MAAM,SAAA,EAAW,OAAA,EAAS,OAAM,GAAI,KAAA;AAE5F,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,IAAqB,WAAA,IAAe,CAAC,kBAAA,EAAoB;AAC3D,MAAA,KAAK,aAAA,EAAc;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,iBAAA,EAAmB,WAAA,EAAa,kBAAA,EAAoB,aAAa,CAAC,CAAA;AAEtE,EAAA,OAAO,EAAE,MAAM,WAAA,EAAa,kBAAA,EAAoB,eAAe,SAAA,EAAW,OAAA,EAAS,OAAO,mBAAA,EAAoB;AAChH;;;;;"}
+{"version":3,"file":"use-logs.cjs.js","sources":["../../../../src/domains/logs/hooks/use-logs.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { useInfiniteQuery } from '@tanstack/react-query';\nimport { useEffect } from 'react';\n\nimport type { LogRecord } from '../types';\nimport { useInView } from '@/hooks/use-in-view';\n\ntype ListLogsArgs = NonNullable<Parameters<MastraClient['listLogsVNext']>[0]>;\ntype ListLogsResponse = Awaited<ReturnType<MastraClient['listLogsVNext']>>;\nimport { isObservabilityUnavailableError, isUnsupportedObservabilityOperationError } from '@/lib/query-utils';\n\ninterface UseLogsReturn {\n  data: LogRecord[] | undefined;\n  hasNextPage: boolean;\n  isFetchingNextPage: boolean;\n  fetchNextPage: () => void;\n  isLoading: boolean;\n  isError: boolean;\n  error: Error | null;\n  setEndOfListElement: (node: HTMLDivElement | null) => void;\n}\n\nconst LOGS_PER_PAGE = 20;\nconst LOGS_REFETCH_INTERVAL_MS = 10000;\n\nexport type LogsOrderBy = NonNullable<ListLogsArgs['orderBy']>;\n\nconst DEFAULT_LOGS_ORDER_BY: LogsOrderBy = { field: 'timestamp', direction: 'DESC' };\n\nexport interface LogsFilters {\n  filters?: ListLogsArgs['filters'];\n  orderBy?: LogsOrderBy;\n}\n\nfunction getNextPageParam(lastPage: ListLogsResponse | undefined, _allPages: unknown, lastPageParam: number) {\n  if (lastPage?.pagination?.hasMore) {\n    return lastPageParam + 1;\n  }\n  return undefined;\n}\n\n/** Deduplicates logs across loaded pages. Offset-based pagination duplicates rows at the page\n *  boundary whenever new logs are inserted between sequential `fetchNextPage` calls — without\n *  this filter the duplicates produce duplicate React keys and chaotic virtualizer offsets.\n *  Falls back to the full serialized record when `logId` is absent so logs that happen to\n *  share `(timestamp, message, data)` but differ in other fields aren't collapsed. */\nfunction selectLogs(data: { pages: ListLogsResponse[] }) {\n  const seen = new Set<string>();\n  const result = [];\n  for (const page of data.pages) {\n    for (const log of page.logs ?? []) {\n      const key = log.logId ?? JSON.stringify(log);\n      if (seen.has(key)) continue;\n      seen.add(key);\n      result.push(log);\n    }\n  }\n  return result;\n}\n\nexport function getLogsRefetchInterval(query: { state: { error: unknown } }) {\n  if (\n    isUnsupportedObservabilityOperationError(query.state.error, 'logs') ||\n    isObservabilityUnavailableError(query.state.error)\n  ) {\n    return false;\n  }\n  return LOGS_REFETCH_INTERVAL_MS;\n}\n\nexport const useLogs: (props?: LogsFilters) => UseLogsReturn = ({\n  filters,\n  orderBy = DEFAULT_LOGS_ORDER_BY,\n}: LogsFilters = {}) => {\n  const client = useMastraClient();\n  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();\n\n  const query = useInfiniteQuery<ListLogsResponse, Error, ReturnType<typeof selectLogs>, readonly unknown[], number>({\n    queryKey: ['logs', filters, orderBy],\n    queryFn: ({ pageParam }) =>\n      client.listLogsVNext({\n        pagination: { page: pageParam, perPage: LOGS_PER_PAGE },\n        filters,\n        orderBy,\n      }),\n    initialPageParam: 0,\n    getNextPageParam,\n    select: selectLogs,\n    retry: false,\n    refetchInterval: getLogsRefetchInterval,\n  });\n\n  const { hasNextPage, isFetchingNextPage, fetchNextPage, data, isLoading, isError, error } = query;\n\n  useEffect(() => {\n    if (isEndOfListInView && hasNextPage && !isFetchingNextPage) {\n      void fetchNextPage();\n    }\n  }, [isEndOfListInView, hasNextPage, isFetchingNextPage, fetchNextPage]);\n\n  return { data, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading, isError, error, setEndOfListElement };\n};\n"],"names":["isUnsupportedObservabilityOperationError","isObservabilityUnavailableError","useMastraClient","useInView","useInfiniteQuery","useEffect"],"mappings":";;;;;;;;;;AAuBA,MAAM,aAAA,GAAgB,EAAA;AACtB,MAAM,wBAAA,GAA2B,GAAA;AAIjC,MAAM,qBAAA,GAAqC,EAAE,KAAA,EAAO,WAAA,EAAa,WAAW,MAAA,EAAO;AAOnF,SAAS,gBAAA,CAAiB,QAAA,EAAwC,SAAA,EAAoB,aAAA,EAAuB;AAC3G,EAAA,IAAI,QAAA,EAAU,YAAY,OAAA,EAAS;AACjC,IAAA,OAAO,aAAA,GAAgB,CAAA;AAAA,EACzB;AACA,EAAA,OAAO,MAAA;AACT;AAOA,SAAS,WAAW,IAAA,EAAqC;AACvD,EAAA,MAAM,IAAA,uBAAW,GAAA,EAAY;AAC7B,EAAA,MAAM,SAAS,EAAC;AAChB,EAAA,KAAA,MAAW,IAAA,IAAQ,KAAK,KAAA,EAAO;AAC7B,IAAA,KAAA,MAAW,GAAA,IAAO,IAAA,CAAK,IAAA,IAAQ,EAAC,EAAG;AACjC,MAAA,MAAM,GAAA,GAAM,GAAA,CAAI,KAAA,IAAS,IAAA,CAAK,UAAU,GAAG,CAAA;AAC3C,MAAA,IAAI,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA,EAAG;AACnB,MAAA,IAAA,CAAK,IAAI,GAAG,CAAA;AACZ,MAAA,MAAA,CAAO,KAAK,GAAG,CAAA;AAAA,IACjB;AAAA,EACF;AACA,EAAA,OAAO,MAAA;AACT;AAEO,SAAS,uBAAuB,KAAA,EAAsC;AAC3E,EAAA,IACEA,yDAAA,CAAyC,KAAA,CAAM,KAAA,CAAM,KAAA,EAAO,MAAM,KAClEC,gDAAA,CAAgC,KAAA,CAAM,KAAA,CAAM,KAAK,CAAA,EACjD;AACA,IAAA,OAAO,KAAA;AAAA,EACT;AACA,EAAA,OAAO,wBAAA;AACT;AAEO,MAAM,UAAkD,CAAC;AAAA,EAC9D,OAAA;AAAA,EACA,OAAA,GAAU;AACZ,CAAA,GAAiB,EAAC,KAAM;AACtB,EAAA,MAAM,SAASC,qBAAA,EAAgB;AAC/B,EAAA,MAAM,EAAE,MAAA,EAAQ,iBAAA,EAAmB,MAAA,EAAQ,mBAAA,KAAwBC,yBAAA,EAAU;AAE7E,EAAA,MAAM,QAAQC,2BAAA,CAAqG;AAAA,IACjH,QAAA,EAAU,CAAC,MAAA,EAAQ,OAAA,EAAS,OAAO,CAAA;AAAA,IACnC,SAAS,CAAC,EAAE,SAAA,EAAU,KACpB,OAAO,aAAA,CAAc;AAAA,MACnB,UAAA,EAAY,EAAE,IAAA,EAAM,SAAA,EAAW,SAAS,aAAA,EAAc;AAAA,MACtD,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,IACH,gBAAA,EAAkB,CAAA;AAAA,IAClB,gBAAA;AAAA,IACA,MAAA,EAAQ,UAAA;AAAA,IACR,KAAA,EAAO,KAAA;AAAA,IACP,eAAA,EAAiB;AAAA,GAClB,CAAA;AAED,EAAA,MAAM,EAAE,aAAa,kBAAA,EAAoB,aAAA,EAAe,MAAM,SAAA,EAAW,OAAA,EAAS,OAAM,GAAI,KAAA;AAE5F,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,IAAqB,WAAA,IAAe,CAAC,kBAAA,EAAoB;AAC3D,MAAA,KAAK,aAAA,EAAc;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,iBAAA,EAAmB,WAAA,EAAa,kBAAA,EAAoB,aAAa,CAAC,CAAA;AAEtE,EAAA,OAAO,EAAE,MAAM,WAAA,EAAa,kBAAA,EAAoB,eAAe,SAAA,EAAW,OAAA,EAAS,OAAO,mBAAA,EAAoB;AAChH;;;;;"}

package/dist/domains/logs/hooks/use-logs.es.js

@@ -6,6 +6,7 @@ import { isUnsupportedObservabilityOperationError, isObservabilityUnavailableErr
 
 const LOGS_PER_PAGE = 20;
 const LOGS_REFETCH_INTERVAL_MS = 1e4;
+const DEFAULT_LOGS_ORDER_BY = { field: "timestamp", direction: "DESC" };
 function getNextPageParam(lastPage, _allPages, lastPageParam) {
   if (lastPage?.pagination?.hasMore) {
     return lastPageParam + 1;
@@ -31,15 +32,18 @@ function getLogsRefetchInterval(query) {
   }
   return LOGS_REFETCH_INTERVAL_MS;
 }
-const useLogs = ({ filters } = {}) => {
+const useLogs = ({
+  filters,
+  orderBy = DEFAULT_LOGS_ORDER_BY
+} = {}) => {
   const client = useMastraClient();
   const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
   const query = useInfiniteQuery({
-    queryKey: ["logs", filters],
+    queryKey: ["logs", filters, orderBy],
     queryFn: ({ pageParam }) => client.listLogsVNext({
       pagination: { page: pageParam, perPage: LOGS_PER_PAGE },
       filters,
-      orderBy: { field: "timestamp", direction: "DESC" }
+      orderBy
     }),
     initialPageParam: 0,
     getNextPageParam,

package/dist/domains/logs/hooks/use-logs.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-logs.es.js","sources":["../../../../src/domains/logs/hooks/use-logs.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { useInfiniteQuery } from '@tanstack/react-query';\nimport { useEffect } from 'react';\n\nimport type { LogRecord } from '../types';\nimport { useInView } from '@/hooks/use-in-view';\n\ntype ListLogsArgs = NonNullable<Parameters<MastraClient['listLogsVNext']>[0]>;\ntype ListLogsResponse = Awaited<ReturnType<MastraClient['listLogsVNext']>>;\nimport { isObservabilityUnavailableError, isUnsupportedObservabilityOperationError } from '@/lib/query-utils';\n\ninterface UseLogsReturn {\n  data: LogRecord[] | undefined;\n  hasNextPage: boolean;\n  isFetchingNextPage: boolean;\n  fetchNextPage: () => void;\n  isLoading: boolean;\n  isError: boolean;\n  error: Error | null;\n  setEndOfListElement: (node: HTMLDivElement | null) => void;\n}\n\nconst LOGS_PER_PAGE = 20;\nconst LOGS_REFETCH_INTERVAL_MS = 10000;\n\nexport interface LogsFilters {\n  filters?: ListLogsArgs['filters'];\n}\n\nfunction getNextPageParam(lastPage: ListLogsResponse | undefined, _allPages: unknown, lastPageParam: number) {\n  if (lastPage?.pagination?.hasMore) {\n    return lastPageParam + 1;\n  }\n  return undefined;\n}\n\n/** Deduplicates logs across loaded pages. Offset-based pagination duplicates rows at the page\n *  boundary whenever new logs are inserted between sequential `fetchNextPage` calls — without\n *  this filter the duplicates produce duplicate React keys and chaotic virtualizer offsets.\n *  Falls back to the full serialized record when `logId` is absent so logs that happen to\n *  share `(timestamp, message, data)` but differ in other fields aren't collapsed. */\nfunction selectLogs(data: { pages: ListLogsResponse[] }) {\n  const seen = new Set<string>();\n  const result = [];\n  for (const page of data.pages) {\n    for (const log of page.logs ?? []) {\n      const key = log.logId ?? JSON.stringify(log);\n      if (seen.has(key)) continue;\n      seen.add(key);\n      result.push(log);\n    }\n  }\n  return result;\n}\n\nexport function getLogsRefetchInterval(query: { state: { error: unknown } }) {\n  if (\n    isUnsupportedObservabilityOperationError(query.state.error, 'logs') ||\n    isObservabilityUnavailableError(query.state.error)\n  ) {\n    return false;\n  }\n  return LOGS_REFETCH_INTERVAL_MS;\n}\n\nexport const useLogs: (props?: LogsFilters) => UseLogsReturn = ({ filters }: LogsFilters = {}) => {\n  const client = useMastraClient();\n  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();\n\n  const query = useInfiniteQuery<ListLogsResponse, Error, ReturnType<typeof selectLogs>, readonly unknown[], number>({\n    queryKey: ['logs', filters],\n    queryFn: ({ pageParam }) =>\n      client.listLogsVNext({\n        pagination: { page: pageParam, perPage: LOGS_PER_PAGE },\n        filters,\n        orderBy: { field: 'timestamp', direction: 'DESC' },\n      }),\n    initialPageParam: 0,\n    getNextPageParam,\n    select: selectLogs,\n    retry: false,\n    refetchInterval: getLogsRefetchInterval,\n  });\n\n  const { hasNextPage, isFetchingNextPage, fetchNextPage, data, isLoading, isError, error } = query;\n\n  useEffect(() => {\n    if (isEndOfListInView && hasNextPage && !isFetchingNextPage) {\n      void fetchNextPage();\n    }\n  }, [isEndOfListInView, hasNextPage, isFetchingNextPage, fetchNextPage]);\n\n  return { data, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading, isError, error, setEndOfListElement };\n};\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,aAAA,GAAgB,EAAA;AACtB,MAAM,wBAAA,GAA2B,GAAA;AAMjC,SAAS,gBAAA,CAAiB,QAAA,EAAwC,SAAA,EAAoB,aAAA,EAAuB;AAC3G,EAAA,IAAI,QAAA,EAAU,YAAY,OAAA,EAAS;AACjC,IAAA,OAAO,aAAA,GAAgB,CAAA;AAAA,EACzB;AACA,EAAA,OAAO,MAAA;AACT;AAOA,SAAS,WAAW,IAAA,EAAqC;AACvD,EAAA,MAAM,IAAA,uBAAW,GAAA,EAAY;AAC7B,EAAA,MAAM,SAAS,EAAC;AAChB,EAAA,KAAA,MAAW,IAAA,IAAQ,KAAK,KAAA,EAAO;AAC7B,IAAA,KAAA,MAAW,GAAA,IAAO,IAAA,CAAK,IAAA,IAAQ,EAAC,EAAG;AACjC,MAAA,MAAM,GAAA,GAAM,GAAA,CAAI,KAAA,IAAS,IAAA,CAAK,UAAU,GAAG,CAAA;AAC3C,MAAA,IAAI,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA,EAAG;AACnB,MAAA,IAAA,CAAK,IAAI,GAAG,CAAA;AACZ,MAAA,MAAA,CAAO,KAAK,GAAG,CAAA;AAAA,IACjB;AAAA,EACF;AACA,EAAA,OAAO,MAAA;AACT;AAEO,SAAS,uBAAuB,KAAA,EAAsC;AAC3E,EAAA,IACE,wCAAA,CAAyC,KAAA,CAAM,KAAA,CAAM,KAAA,EAAO,MAAM,KAClE,+BAAA,CAAgC,KAAA,CAAM,KAAA,CAAM,KAAK,CAAA,EACjD;AACA,IAAA,OAAO,KAAA;AAAA,EACT;AACA,EAAA,OAAO,wBAAA;AACT;AAEO,MAAM,UAAkD,CAAC,EAAE,OAAA,EAAQ,GAAiB,EAAC,KAAM;AAChG,EAAA,MAAM,SAAS,eAAA,EAAgB;AAC/B,EAAA,MAAM,EAAE,MAAA,EAAQ,iBAAA,EAAmB,MAAA,EAAQ,mBAAA,KAAwB,SAAA,EAAU;AAE7E,EAAA,MAAM,QAAQ,gBAAA,CAAqG;AAAA,IACjH,QAAA,EAAU,CAAC,MAAA,EAAQ,OAAO,CAAA;AAAA,IAC1B,SAAS,CAAC,EAAE,SAAA,EAAU,KACpB,OAAO,aAAA,CAAc;AAAA,MACnB,UAAA,EAAY,EAAE,IAAA,EAAM,SAAA,EAAW,SAAS,aAAA,EAAc;AAAA,MACtD,OAAA;AAAA,MACA,OAAA,EAAS,EAAE,KAAA,EAAO,WAAA,EAAa,WAAW,MAAA;AAAO,KAClD,CAAA;AAAA,IACH,gBAAA,EAAkB,CAAA;AAAA,IAClB,gBAAA;AAAA,IACA,MAAA,EAAQ,UAAA;AAAA,IACR,KAAA,EAAO,KAAA;AAAA,IACP,eAAA,EAAiB;AAAA,GAClB,CAAA;AAED,EAAA,MAAM,EAAE,aAAa,kBAAA,EAAoB,aAAA,EAAe,MAAM,SAAA,EAAW,OAAA,EAAS,OAAM,GAAI,KAAA;AAE5F,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,IAAqB,WAAA,IAAe,CAAC,kBAAA,EAAoB;AAC3D,MAAA,KAAK,aAAA,EAAc;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,iBAAA,EAAmB,WAAA,EAAa,kBAAA,EAAoB,aAAa,CAAC,CAAA;AAEtE,EAAA,OAAO,EAAE,MAAM,WAAA,EAAa,kBAAA,EAAoB,eAAe,SAAA,EAAW,OAAA,EAAS,OAAO,mBAAA,EAAoB;AAChH;;;;"}
+{"version":3,"file":"use-logs.es.js","sources":["../../../../src/domains/logs/hooks/use-logs.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { useInfiniteQuery } from '@tanstack/react-query';\nimport { useEffect } from 'react';\n\nimport type { LogRecord } from '../types';\nimport { useInView } from '@/hooks/use-in-view';\n\ntype ListLogsArgs = NonNullable<Parameters<MastraClient['listLogsVNext']>[0]>;\ntype ListLogsResponse = Awaited<ReturnType<MastraClient['listLogsVNext']>>;\nimport { isObservabilityUnavailableError, isUnsupportedObservabilityOperationError } from '@/lib/query-utils';\n\ninterface UseLogsReturn {\n  data: LogRecord[] | undefined;\n  hasNextPage: boolean;\n  isFetchingNextPage: boolean;\n  fetchNextPage: () => void;\n  isLoading: boolean;\n  isError: boolean;\n  error: Error | null;\n  setEndOfListElement: (node: HTMLDivElement | null) => void;\n}\n\nconst LOGS_PER_PAGE = 20;\nconst LOGS_REFETCH_INTERVAL_MS = 10000;\n\nexport type LogsOrderBy = NonNullable<ListLogsArgs['orderBy']>;\n\nconst DEFAULT_LOGS_ORDER_BY: LogsOrderBy = { field: 'timestamp', direction: 'DESC' };\n\nexport interface LogsFilters {\n  filters?: ListLogsArgs['filters'];\n  orderBy?: LogsOrderBy;\n}\n\nfunction getNextPageParam(lastPage: ListLogsResponse | undefined, _allPages: unknown, lastPageParam: number) {\n  if (lastPage?.pagination?.hasMore) {\n    return lastPageParam + 1;\n  }\n  return undefined;\n}\n\n/** Deduplicates logs across loaded pages. Offset-based pagination duplicates rows at the page\n *  boundary whenever new logs are inserted between sequential `fetchNextPage` calls — without\n *  this filter the duplicates produce duplicate React keys and chaotic virtualizer offsets.\n *  Falls back to the full serialized record when `logId` is absent so logs that happen to\n *  share `(timestamp, message, data)` but differ in other fields aren't collapsed. */\nfunction selectLogs(data: { pages: ListLogsResponse[] }) {\n  const seen = new Set<string>();\n  const result = [];\n  for (const page of data.pages) {\n    for (const log of page.logs ?? []) {\n      const key = log.logId ?? JSON.stringify(log);\n      if (seen.has(key)) continue;\n      seen.add(key);\n      result.push(log);\n    }\n  }\n  return result;\n}\n\nexport function getLogsRefetchInterval(query: { state: { error: unknown } }) {\n  if (\n    isUnsupportedObservabilityOperationError(query.state.error, 'logs') ||\n    isObservabilityUnavailableError(query.state.error)\n  ) {\n    return false;\n  }\n  return LOGS_REFETCH_INTERVAL_MS;\n}\n\nexport const useLogs: (props?: LogsFilters) => UseLogsReturn = ({\n  filters,\n  orderBy = DEFAULT_LOGS_ORDER_BY,\n}: LogsFilters = {}) => {\n  const client = useMastraClient();\n  const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();\n\n  const query = useInfiniteQuery<ListLogsResponse, Error, ReturnType<typeof selectLogs>, readonly unknown[], number>({\n    queryKey: ['logs', filters, orderBy],\n    queryFn: ({ pageParam }) =>\n      client.listLogsVNext({\n        pagination: { page: pageParam, perPage: LOGS_PER_PAGE },\n        filters,\n        orderBy,\n      }),\n    initialPageParam: 0,\n    getNextPageParam,\n    select: selectLogs,\n    retry: false,\n    refetchInterval: getLogsRefetchInterval,\n  });\n\n  const { hasNextPage, isFetchingNextPage, fetchNextPage, data, isLoading, isError, error } = query;\n\n  useEffect(() => {\n    if (isEndOfListInView && hasNextPage && !isFetchingNextPage) {\n      void fetchNextPage();\n    }\n  }, [isEndOfListInView, hasNextPage, isFetchingNextPage, fetchNextPage]);\n\n  return { data, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading, isError, error, setEndOfListElement };\n};\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,aAAA,GAAgB,EAAA;AACtB,MAAM,wBAAA,GAA2B,GAAA;AAIjC,MAAM,qBAAA,GAAqC,EAAE,KAAA,EAAO,WAAA,EAAa,WAAW,MAAA,EAAO;AAOnF,SAAS,gBAAA,CAAiB,QAAA,EAAwC,SAAA,EAAoB,aAAA,EAAuB;AAC3G,EAAA,IAAI,QAAA,EAAU,YAAY,OAAA,EAAS;AACjC,IAAA,OAAO,aAAA,GAAgB,CAAA;AAAA,EACzB;AACA,EAAA,OAAO,MAAA;AACT;AAOA,SAAS,WAAW,IAAA,EAAqC;AACvD,EAAA,MAAM,IAAA,uBAAW,GAAA,EAAY;AAC7B,EAAA,MAAM,SAAS,EAAC;AAChB,EAAA,KAAA,MAAW,IAAA,IAAQ,KAAK,KAAA,EAAO;AAC7B,IAAA,KAAA,MAAW,GAAA,IAAO,IAAA,CAAK,IAAA,IAAQ,EAAC,EAAG;AACjC,MAAA,MAAM,GAAA,GAAM,GAAA,CAAI,KAAA,IAAS,IAAA,CAAK,UAAU,GAAG,CAAA;AAC3C,MAAA,IAAI,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA,EAAG;AACnB,MAAA,IAAA,CAAK,IAAI,GAAG,CAAA;AACZ,MAAA,MAAA,CAAO,KAAK,GAAG,CAAA;AAAA,IACjB;AAAA,EACF;AACA,EAAA,OAAO,MAAA;AACT;AAEO,SAAS,uBAAuB,KAAA,EAAsC;AAC3E,EAAA,IACE,wCAAA,CAAyC,KAAA,CAAM,KAAA,CAAM,KAAA,EAAO,MAAM,KAClE,+BAAA,CAAgC,KAAA,CAAM,KAAA,CAAM,KAAK,CAAA,EACjD;AACA,IAAA,OAAO,KAAA;AAAA,EACT;AACA,EAAA,OAAO,wBAAA;AACT;AAEO,MAAM,UAAkD,CAAC;AAAA,EAC9D,OAAA;AAAA,EACA,OAAA,GAAU;AACZ,CAAA,GAAiB,EAAC,KAAM;AACtB,EAAA,MAAM,SAAS,eAAA,EAAgB;AAC/B,EAAA,MAAM,EAAE,MAAA,EAAQ,iBAAA,EAAmB,MAAA,EAAQ,mBAAA,KAAwB,SAAA,EAAU;AAE7E,EAAA,MAAM,QAAQ,gBAAA,CAAqG;AAAA,IACjH,QAAA,EAAU,CAAC,MAAA,EAAQ,OAAA,EAAS,OAAO,CAAA;AAAA,IACnC,SAAS,CAAC,EAAE,SAAA,EAAU,KACpB,OAAO,aAAA,CAAc;AAAA,MACnB,UAAA,EAAY,EAAE,IAAA,EAAM,SAAA,EAAW,SAAS,aAAA,EAAc;AAAA,MACtD,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,IACH,gBAAA,EAAkB,CAAA;AAAA,IAClB,gBAAA;AAAA,IACA,MAAA,EAAQ,UAAA;AAAA,IACR,KAAA,EAAO,KAAA;AAAA,IACP,eAAA,EAAiB;AAAA,GAClB,CAAA;AAED,EAAA,MAAM,EAAE,aAAa,kBAAA,EAAoB,aAAA,EAAe,MAAM,SAAA,EAAW,OAAA,EAAS,OAAM,GAAI,KAAA;AAE5F,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,iBAAA,IAAqB,WAAA,IAAe,CAAC,kBAAA,EAAoB;AAC3D,MAAA,KAAK,aAAA,EAAc;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,iBAAA,EAAmB,WAAA,EAAa,kBAAA,EAAoB,aAAa,CAAC,CAAA;AAEtE,EAAA,OAAO,EAAE,MAAM,WAAA,EAAa,kBAAA,EAAoB,eAAe,SAAA,EAAW,OAAA,EAAS,OAAO,mBAAA,EAAoB;AAChH;;;;"}

package/dist/domains/memory/components/flame-graph.cjs.js

@@ -6,7 +6,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
 const recharts = require('recharts');
-const Button = require('../../../Button-C2dx_QZN.cjs');
+const Button = require('../../../Button-CVewl8nT.cjs');
+const primitives_raisedSurface = require('../../../primitives/raised-surface.cjs.js');
 const domains_memory_lib_replaySelection = require('../lib/replay-selection.cjs.js');
 const domains_memory_lib_timeline = require('../lib/timeline.cjs.js');
 const domains_memory_components_flameGraphData = require('./flame-graph-data.cjs.js');
@@ -17,8 +18,8 @@ const REFLECT_COLOR = "#ec4899";
 function TimeAxis({ domain }) {
   const ticks = [0, 0.25, 0.5, 0.75, 1];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[6rem_1fr] items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 border-border1/50 text-ui-xs flex items-center self-stretch border-r pl-3 font-medium", children: "Time" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon3 text-ui-xs flex justify-between px-1 py-1.5 font-mono", children: ticks.map((t) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: domains_memory_lib_timeline.formatTimeDisplay(domains_memory_lib_timeline.tToTimestamp(t, domain)) }, t)) })
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground border-border/50 text-meta flex items-center self-stretch border-r pl-3", children: "Time" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground text-meta flex justify-between px-1 py-1.5 font-mono", children: ticks.map((t) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: domains_memory_lib_timeline.formatTimeDisplay(domains_memory_lib_timeline.tToTimestamp(t, domain)) }, t)) })
   ] });
 }
 function FlameTooltip({
@@ -32,23 +33,23 @@ function FlameTooltip({
   const time = domain != null && t != null ? domains_memory_lib_timeline.formatTimeDisplay(domains_memory_lib_timeline.tToTimestamp(t, domain)) : null;
   const visibleEntries = payload.filter((entry) => entry.name !== "t" && entry.name !== "time" && entry.value != null);
   if (showValue) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1 bg-surface3 text-ui-xs flex flex-col gap-0.5 rounded border px-2 py-1.5 font-mono shadow", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${primitives_raisedSurface.overlaySurfaceStyle} text-meta flex flex-col gap-0.5 rounded px-2 py-1.5 font-mono`, children: [
       time && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: "time" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral6", children: time })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "time" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: time })
       ] }),
       visibleEntries.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: entry.name }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral6", children: typeof entry.value === "number" ? Math.round(entry.value).toLocaleString() : String(entry.value) })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: entry.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: typeof entry.value === "number" ? Math.round(entry.value).toLocaleString() : String(entry.value) })
       ] }, entry.name))
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border1 bg-surface3 text-ui-xs rounded border px-2 py-1 font-mono shadow", children: time && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral6", children: time }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${primitives_raisedSurface.overlaySurfaceStyle} text-meta rounded px-2 py-1 font-mono`, children: time && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: time }) });
 }
 function AreaRow({ label, data, dataKey, color, gradientId, domain, zoomDomain, threshold }) {
   const yMax = domains_memory_components_flameGraphData.getAreaRowYMax(data, dataKey, threshold);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1/50 relative grid grid-cols-[6rem_1fr] items-center border-b hover:z-10", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 border-border1/50 text-ui-xs flex items-center self-stretch border-r pl-3 font-medium", children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border/50 relative grid grid-cols-[6rem_1fr] items-center border-b hover:z-10", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground border-border/50 text-meta flex items-center self-stretch border-r pl-3", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 32, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data, margin: { top: 0, right: 0, bottom: 0, left: 0 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
         /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.35 }),
@@ -80,8 +81,8 @@ function AreaRow({ label, data, dataKey, color, gradientId, domain, zoomDomain,
   ] });
 }
 function EventRow({ label, data, color, height = 32, domain, zoomDomain }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1/50 relative grid grid-cols-[6rem_1fr] items-center border-b hover:z-10", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 border-border1/50 text-ui-xs flex items-center self-stretch border-r pl-3 font-medium", children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border/50 relative grid grid-cols-[6rem_1fr] items-center border-b hover:z-10", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground border-border/50 text-meta flex items-center self-stretch border-r pl-3", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { margin: { top: 0, right: 0, bottom: 0, left: 0 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "t", type: "number", domain: zoomDomain, allowDataOverflow: true, hide: true }),
       /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { dataKey: "event", type: "number", domain: [0, 2], hide: true }),
@@ -118,8 +119,8 @@ function CombinedRow({
   onSelectT
 }) {
   const combinedData = domains_memory_components_flameGraphData.toCombinedRowData(areaData, areaDataKey, eventData);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1/50 relative grid grid-cols-[6rem_1fr] items-center border-b hover:z-10", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 border-border1/50 text-ui-xs flex items-center self-stretch border-r pl-3 font-medium", children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border/50 relative grid grid-cols-[6rem_1fr] items-center border-b hover:z-10", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground border-border/50 text-meta flex items-center self-stretch border-r pl-3", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(
       recharts.ComposedChart,
       {
@@ -203,9 +204,9 @@ function ZoomTrack({
       window.removeEventListener("mouseup", onMouseUp);
     };
   }, [toTimestamp, zoomLeft, zoomRight, onZoomLeftChange, onZoomRightChange]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1/50 grid grid-cols-[6rem_1fr] items-center border-b", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1/50 flex items-center gap-1 self-stretch border-r pl-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 text-ui-xs font-medium", children: "Zoom" }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border/50 grid grid-cols-[6rem_1fr] items-center border-b", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border/50 flex items-center gap-1 self-stretch border-r pl-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-meta", children: "Zoom" }),
       /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "ghost", size: "icon-sm", "aria-label": "Reset zoom", onClick: onReset, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "size-3" }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -233,7 +234,7 @@ function ZoomTrack({
             "div",
             {
               "data-zoom-part": "before",
-              className: "bg-surface2/60 absolute inset-y-0 left-0",
+              className: "bg-background/60 absolute inset-y-0 left-0",
               style: { width: `${leftPercent}%` }
             }
           ),
@@ -241,7 +242,7 @@ function ZoomTrack({
             "div",
             {
               "data-zoom-part": "band",
-              className: "border-border1/30 bg-neutral6/5 absolute inset-y-0 border-y",
+              className: "border-border/30 bg-fill-subtle absolute inset-y-0 border-y",
               style: { left: `${leftPercent}%`, right: `${100 - rightPercent}%` }
             }
           ),
@@ -249,7 +250,7 @@ function ZoomTrack({
             "div",
             {
               "data-zoom-part": "after",
-              className: "bg-surface2/60 absolute inset-y-0 right-0",
+              className: "bg-background/60 absolute inset-y-0 right-0",
               style: { width: `${100 - rightPercent}%` }
             }
           ),
@@ -257,7 +258,7 @@ function ZoomTrack({
             "div",
             {
               "data-zoom-handle": "left",
-              className: "bg-neutral6/50 hover:bg-neutral6 absolute inset-y-0 w-1 cursor-col-resize",
+              className: "bg-foreground/50 hover:bg-foreground absolute inset-y-0 w-1 cursor-col-resize",
               style: { left: `${leftPercent}%`, transform: "translateX(-50%)" },
               onMouseDown: (e) => {
                 e.preventDefault();
@@ -270,7 +271,7 @@ function ZoomTrack({
             "div",
             {
               "data-zoom-handle": "right",
-              className: "bg-neutral6/50 hover:bg-neutral6 absolute inset-y-0 w-1 cursor-col-resize",
+              className: "bg-foreground/50 hover:bg-foreground absolute inset-y-0 w-1 cursor-col-resize",
               style: { left: `${rightPercent}%`, transform: "translateX(-50%)" },
               onMouseDown: (e) => {
                 e.preventDefault();