@mastra/playground-ui 55.0.0 → 56.0.0-alpha.10

package/dist/domains/traces/components/trace-time-range-chip.cjs.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const domains_traces_traceFilters = require('../trace-filters.cjs.js');
+const dateTimeRangePicker = require('../../../date-time-range-picker-eyfOf4v-.cjs');
+const filterBarChip = require('../../../filter-bar-chip-BR7Xnpeo.cjs');
+const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
+
+const TRACE_TIME_RANGE_FIELD_ID = "timeRange";
+const TRACE_TIME_RANGE_FIELD = {
+  id: TRACE_TIME_RANGE_FIELD_ID,
+  label: "Time",
+  icon: domains_traces_traceFilters.traceFilterFieldIcon(TRACE_TIME_RANGE_FIELD_ID),
+  color: domains_traces_traceFilters.traceFilterFieldColor(TRACE_TIME_RANGE_FIELD_ID),
+  type: "text",
+  operators: ["is"],
+  hidden: true
+};
+const TRACE_TIME_RANGE_ITEM = {
+  id: TRACE_TIME_RANGE_FIELD_ID,
+  fieldId: TRACE_TIME_RANGE_FIELD_ID,
+  operatorId: "is",
+  value: ""
+};
+const isSegment = (target) => target instanceof HTMLElement && target.hasAttribute("data-filter-bar-segment");
+function TraceTimeRangeChip(props) {
+  const ctx = filterBarChip.useFilterBarContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(filterBarChip.FilterBarChip, { item: TRACE_TIME_RANGE_ITEM, removable: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils_cn.cn(filterBarChip.segmentClass, "text-neutral6 last:rounded-r-none"),
+        style: filterBarChip.fieldSegmentAccentStyle(TRACE_TIME_RANGE_FIELD),
+        children: /* @__PURE__ */ jsxRuntime.jsx(filterBarChip.FilterBarFieldLabel, { field: TRACE_TIME_RANGE_FIELD })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "contents",
+        onKeyDown: (event) => {
+          if (!isSegment(event.target)) event.stopPropagation();
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          dateTimeRangePicker.DateTimeRangePicker,
+          {
+            ...props,
+            renderTrigger: ({ label, disabled }) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                ref: (el) => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, "value", el),
+                "data-filter-bar-segment": "",
+                disabled,
+                "aria-label": `Value: ${label}`,
+                title: label,
+                className: utils_cn.cn(filterBarChip.editableSegmentClass, "first:rounded-l-none"),
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+exports.TRACE_TIME_RANGE_FIELD = TRACE_TIME_RANGE_FIELD;
+exports.TRACE_TIME_RANGE_FIELD_ID = TRACE_TIME_RANGE_FIELD_ID;
+exports.TRACE_TIME_RANGE_ITEM = TRACE_TIME_RANGE_ITEM;
+exports.TraceTimeRangeChip = TraceTimeRangeChip;
+//# sourceMappingURL=trace-time-range-chip.cjs.js.map

package/dist/domains/traces/components/trace-time-range-chip.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trace-time-range-chip.cjs.js","sources":["../../../../src/domains/traces/components/trace-time-range-chip.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport type { KeyboardEvent } from 'react';\nimport { traceFilterFieldColor, traceFilterFieldIcon } from '../trace-filters';\nimport type { DateTimeRangePickerProps } from '@/ds/components/DateTimeRangePicker';\nimport { DateTimeRangePicker } from '@/ds/components/DateTimeRangePicker';\nimport {\n  FilterBarChip,\n  FilterBarFieldLabel,\n  editableSegmentClass,\n  fieldSegmentAccentStyle,\n  segmentClass,\n} from '@/ds/components/FilterBar/filter-bar-chip';\nimport { useFilterBarContext } from '@/ds/components/FilterBar/filter-bar-context';\nimport type { FilterBarField, FilterBarItem } from '@/ds/components/FilterBar/types';\nimport { cn } from '@/lib/utils';\n\nexport const TRACE_TIME_RANGE_FIELD_ID = 'timeRange';\n\n/**\n * Synthetic FilterBar field backing the always-present time-range chip. Hidden from the\n * input's field step (the chip cannot be added twice) but registered so the chip resolves\n * its label and takes part in keyboard navigation.\n */\nexport const TRACE_TIME_RANGE_FIELD: FilterBarField = {\n  id: TRACE_TIME_RANGE_FIELD_ID,\n  label: 'Time',\n  icon: traceFilterFieldIcon(TRACE_TIME_RANGE_FIELD_ID),\n  color: traceFilterFieldColor(TRACE_TIME_RANGE_FIELD_ID),\n  type: 'text',\n  operators: ['is'],\n  hidden: true,\n};\n\nexport const TRACE_TIME_RANGE_ITEM: FilterBarItem = {\n  id: TRACE_TIME_RANGE_FIELD_ID,\n  fieldId: TRACE_TIME_RANGE_FIELD_ID,\n  operatorId: 'is',\n  value: '',\n};\n\nexport type TraceTimeRangeChipProps = Pick<\n  DateTimeRangePickerProps,\n  'preset' | 'onPresetChange' | 'dateFrom' | 'dateTo' | 'onDateChange' | 'onDateRangeChange' | 'disabled' | 'presets'\n>;\n\nconst isSegment = (target: EventTarget | null) =>\n  target instanceof HTMLElement && target.hasAttribute('data-filter-bar-segment');\n\n/**\n * The trace list's date range rendered as a FilterBar chip: `Time <preset>`. Always\n * present and non-removable; the value segment opens the regular DateTimeRangePicker\n * menu/popover.\n */\nexport function TraceTimeRangeChip(props: TraceTimeRangeChipProps) {\n  const ctx = useFilterBarContext();\n  return (\n    <FilterBarChip item={TRACE_TIME_RANGE_ITEM} removable={false}>\n      <span\n        className={cn(segmentClass, 'text-neutral6 last:rounded-r-none')}\n        style={fieldSegmentAccentStyle(TRACE_TIME_RANGE_FIELD)}\n      >\n        <FilterBarFieldLabel field={TRACE_TIME_RANGE_FIELD} />\n      </span>\n      {/* The picker popup is portaled but bubbles React events through here — keep its\n          keystrokes from reaching the chip's arrow-key navigation. */}\n      <div\n        className=\"contents\"\n        onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {\n          if (!isSegment(event.target)) event.stopPropagation();\n        }}\n      >\n        <DateTimeRangePicker\n          {...props}\n          renderTrigger={({ label, disabled }) => (\n            <button\n              type=\"button\"\n              ref={el => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, 'value', el)}\n              data-filter-bar-segment=\"\"\n              disabled={disabled}\n              aria-label={`Value: ${label}`}\n              title={label}\n              className={cn(editableSegmentClass, 'first:rounded-l-none')}\n            >\n              <span className=\"truncate\">{label}</span>\n            </button>\n          )}\n        />\n      </div>\n    </FilterBarChip>\n  );\n}\n"],"names":["traceFilterFieldIcon","traceFilterFieldColor","useFilterBarContext","jsxs","FilterBarChip","jsx","cn","segmentClass","fieldSegmentAccentStyle","FilterBarFieldLabel","DateTimeRangePicker","editableSegmentClass"],"mappings":";;;;;;;;;;AAgBO,MAAM,yBAAA,GAA4B;AAOlC,MAAM,sBAAA,GAAyC;AAAA,EACpD,EAAA,EAAI,yBAAA;AAAA,EACJ,KAAA,EAAO,MAAA;AAAA,EACP,IAAA,EAAMA,iDAAqB,yBAAyB,CAAA;AAAA,EACpD,KAAA,EAAOC,kDAAsB,yBAAyB,CAAA;AAAA,EACtD,IAAA,EAAM,MAAA;AAAA,EACN,SAAA,EAAW,CAAC,IAAI,CAAA;AAAA,EAChB,MAAA,EAAQ;AACV;AAEO,MAAM,qBAAA,GAAuC;AAAA,EAClD,EAAA,EAAI,yBAAA;AAAA,EACJ,OAAA,EAAS,yBAAA;AAAA,EACT,UAAA,EAAY,IAAA;AAAA,EACZ,KAAA,EAAO;AACT;AAOA,MAAM,YAAY,CAAC,MAAA,KACjB,kBAAkB,WAAA,IAAe,MAAA,CAAO,aAAa,yBAAyB,CAAA;AAOzE,SAAS,mBAAmB,KAAA,EAAgC;AACjE,EAAA,MAAM,MAAMC,iCAAA,EAAoB;AAChC,EAAA,uBACEC,eAAA,CAACC,2BAAA,EAAA,EAAc,IAAA,EAAM,qBAAA,EAAuB,WAAW,KAAA,EACrD,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA,CAAGC,0BAAA,EAAc,mCAAmC,CAAA;AAAA,QAC/D,KAAA,EAAOC,sCAAwB,sBAAsB,CAAA;AAAA,QAErD,QAAA,kBAAAH,cAAA,CAACI,iCAAA,EAAA,EAAoB,KAAA,EAAO,sBAAA,EAAwB;AAAA;AAAA,KACtD;AAAA,oBAGAJ,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,UAAA;AAAA,QACV,SAAA,EAAW,CAAC,KAAA,KAAyC;AACnD,UAAA,IAAI,CAAC,SAAA,CAAU,KAAA,CAAM,MAAM,CAAA,QAAS,eAAA,EAAgB;AAAA,QACtD,CAAA;AAAA,QAEA,QAAA,kBAAAA,cAAA;AAAA,UAACK,uCAAA;AAAA,UAAA;AAAA,YACE,GAAG,KAAA;AAAA,YACJ,aAAA,EAAe,CAAC,EAAE,KAAA,EAAO,UAAS,qBAChCL,cAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,KAAK,CAAA,EAAA,KAAM,GAAA,CAAI,gBAAgB,qBAAA,CAAsB,EAAA,EAAI,SAAS,EAAE,CAAA;AAAA,gBACpE,yBAAA,EAAwB,EAAA;AAAA,gBACxB,QAAA;AAAA,gBACA,YAAA,EAAY,UAAU,KAAK,CAAA,CAAA;AAAA,gBAC3B,KAAA,EAAO,KAAA;AAAA,gBACP,SAAA,EAAWC,WAAA,CAAGK,kCAAA,EAAsB,sBAAsB,CAAA;AAAA,gBAE1D,QAAA,kBAAAN,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AACpC;AAAA;AAEJ;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;;;;"}

package/dist/domains/traces/components/trace-time-range-chip.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/traces/components/trace-time-range-chip'
+export {}

package/dist/domains/traces/components/trace-time-range-chip.es.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { traceFilterFieldColor, traceFilterFieldIcon } from '../trace-filters.es.js';
+import { D as DateTimeRangePicker } from '../../../date-time-range-picker-BotnQ9HS.js';
+import { u as useFilterBarContext, F as FilterBarChip, a as FilterBarFieldLabel, f as fieldSegmentAccentStyle, s as segmentClass, e as editableSegmentClass } from '../../../filter-bar-chip-DyITaBNj.js';
+import { c as cn } from '../../../cn-C6s2yXwM.js';
+
+const TRACE_TIME_RANGE_FIELD_ID = "timeRange";
+const TRACE_TIME_RANGE_FIELD = {
+  id: TRACE_TIME_RANGE_FIELD_ID,
+  label: "Time",
+  icon: traceFilterFieldIcon(TRACE_TIME_RANGE_FIELD_ID),
+  color: traceFilterFieldColor(TRACE_TIME_RANGE_FIELD_ID),
+  type: "text",
+  operators: ["is"],
+  hidden: true
+};
+const TRACE_TIME_RANGE_ITEM = {
+  id: TRACE_TIME_RANGE_FIELD_ID,
+  fieldId: TRACE_TIME_RANGE_FIELD_ID,
+  operatorId: "is",
+  value: ""
+};
+const isSegment = (target) => target instanceof HTMLElement && target.hasAttribute("data-filter-bar-segment");
+function TraceTimeRangeChip(props) {
+  const ctx = useFilterBarContext();
+  return /* @__PURE__ */ jsxs(FilterBarChip, { item: TRACE_TIME_RANGE_ITEM, removable: false, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(segmentClass, "text-neutral6 last:rounded-r-none"),
+        style: fieldSegmentAccentStyle(TRACE_TIME_RANGE_FIELD),
+        children: /* @__PURE__ */ jsx(FilterBarFieldLabel, { field: TRACE_TIME_RANGE_FIELD })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "contents",
+        onKeyDown: (event) => {
+          if (!isSegment(event.target)) event.stopPropagation();
+        },
+        children: /* @__PURE__ */ jsx(
+          DateTimeRangePicker,
+          {
+            ...props,
+            renderTrigger: ({ label, disabled }) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                ref: (el) => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, "value", el),
+                "data-filter-bar-segment": "",
+                disabled,
+                "aria-label": `Value: ${label}`,
+                title: label,
+                className: cn(editableSegmentClass, "first:rounded-l-none"),
+                children: /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { TRACE_TIME_RANGE_FIELD, TRACE_TIME_RANGE_FIELD_ID, TRACE_TIME_RANGE_ITEM, TraceTimeRangeChip };
+//# sourceMappingURL=trace-time-range-chip.es.js.map

package/dist/domains/traces/components/trace-time-range-chip.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trace-time-range-chip.es.js","sources":["../../../../src/domains/traces/components/trace-time-range-chip.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport type { KeyboardEvent } from 'react';\nimport { traceFilterFieldColor, traceFilterFieldIcon } from '../trace-filters';\nimport type { DateTimeRangePickerProps } from '@/ds/components/DateTimeRangePicker';\nimport { DateTimeRangePicker } from '@/ds/components/DateTimeRangePicker';\nimport {\n  FilterBarChip,\n  FilterBarFieldLabel,\n  editableSegmentClass,\n  fieldSegmentAccentStyle,\n  segmentClass,\n} from '@/ds/components/FilterBar/filter-bar-chip';\nimport { useFilterBarContext } from '@/ds/components/FilterBar/filter-bar-context';\nimport type { FilterBarField, FilterBarItem } from '@/ds/components/FilterBar/types';\nimport { cn } from '@/lib/utils';\n\nexport const TRACE_TIME_RANGE_FIELD_ID = 'timeRange';\n\n/**\n * Synthetic FilterBar field backing the always-present time-range chip. Hidden from the\n * input's field step (the chip cannot be added twice) but registered so the chip resolves\n * its label and takes part in keyboard navigation.\n */\nexport const TRACE_TIME_RANGE_FIELD: FilterBarField = {\n  id: TRACE_TIME_RANGE_FIELD_ID,\n  label: 'Time',\n  icon: traceFilterFieldIcon(TRACE_TIME_RANGE_FIELD_ID),\n  color: traceFilterFieldColor(TRACE_TIME_RANGE_FIELD_ID),\n  type: 'text',\n  operators: ['is'],\n  hidden: true,\n};\n\nexport const TRACE_TIME_RANGE_ITEM: FilterBarItem = {\n  id: TRACE_TIME_RANGE_FIELD_ID,\n  fieldId: TRACE_TIME_RANGE_FIELD_ID,\n  operatorId: 'is',\n  value: '',\n};\n\nexport type TraceTimeRangeChipProps = Pick<\n  DateTimeRangePickerProps,\n  'preset' | 'onPresetChange' | 'dateFrom' | 'dateTo' | 'onDateChange' | 'onDateRangeChange' | 'disabled' | 'presets'\n>;\n\nconst isSegment = (target: EventTarget | null) =>\n  target instanceof HTMLElement && target.hasAttribute('data-filter-bar-segment');\n\n/**\n * The trace list's date range rendered as a FilterBar chip: `Time <preset>`. Always\n * present and non-removable; the value segment opens the regular DateTimeRangePicker\n * menu/popover.\n */\nexport function TraceTimeRangeChip(props: TraceTimeRangeChipProps) {\n  const ctx = useFilterBarContext();\n  return (\n    <FilterBarChip item={TRACE_TIME_RANGE_ITEM} removable={false}>\n      <span\n        className={cn(segmentClass, 'text-neutral6 last:rounded-r-none')}\n        style={fieldSegmentAccentStyle(TRACE_TIME_RANGE_FIELD)}\n      >\n        <FilterBarFieldLabel field={TRACE_TIME_RANGE_FIELD} />\n      </span>\n      {/* The picker popup is portaled but bubbles React events through here — keep its\n          keystrokes from reaching the chip's arrow-key navigation. */}\n      <div\n        className=\"contents\"\n        onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {\n          if (!isSegment(event.target)) event.stopPropagation();\n        }}\n      >\n        <DateTimeRangePicker\n          {...props}\n          renderTrigger={({ label, disabled }) => (\n            <button\n              type=\"button\"\n              ref={el => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, 'value', el)}\n              data-filter-bar-segment=\"\"\n              disabled={disabled}\n              aria-label={`Value: ${label}`}\n              title={label}\n              className={cn(editableSegmentClass, 'first:rounded-l-none')}\n            >\n              <span className=\"truncate\">{label}</span>\n            </button>\n          )}\n        />\n      </div>\n    </FilterBarChip>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,yBAAA,GAA4B;AAOlC,MAAM,sBAAA,GAAyC;AAAA,EACpD,EAAA,EAAI,yBAAA;AAAA,EACJ,KAAA,EAAO,MAAA;AAAA,EACP,IAAA,EAAM,qBAAqB,yBAAyB,CAAA;AAAA,EACpD,KAAA,EAAO,sBAAsB,yBAAyB,CAAA;AAAA,EACtD,IAAA,EAAM,MAAA;AAAA,EACN,SAAA,EAAW,CAAC,IAAI,CAAA;AAAA,EAChB,MAAA,EAAQ;AACV;AAEO,MAAM,qBAAA,GAAuC;AAAA,EAClD,EAAA,EAAI,yBAAA;AAAA,EACJ,OAAA,EAAS,yBAAA;AAAA,EACT,UAAA,EAAY,IAAA;AAAA,EACZ,KAAA,EAAO;AACT;AAOA,MAAM,YAAY,CAAC,MAAA,KACjB,kBAAkB,WAAA,IAAe,MAAA,CAAO,aAAa,yBAAyB,CAAA;AAOzE,SAAS,mBAAmB,KAAA,EAAgC;AACjE,EAAA,MAAM,MAAM,mBAAA,EAAoB;AAChC,EAAA,uBACE,IAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAM,qBAAA,EAAuB,WAAW,KAAA,EACrD,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,mCAAmC,CAAA;AAAA,QAC/D,KAAA,EAAO,wBAAwB,sBAAsB,CAAA;AAAA,QAErD,QAAA,kBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,KAAA,EAAO,sBAAA,EAAwB;AAAA;AAAA,KACtD;AAAA,oBAGA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,UAAA;AAAA,QACV,SAAA,EAAW,CAAC,KAAA,KAAyC;AACnD,UAAA,IAAI,CAAC,SAAA,CAAU,KAAA,CAAM,MAAM,CAAA,QAAS,eAAA,EAAgB;AAAA,QACtD,CAAA;AAAA,QAEA,QAAA,kBAAA,GAAA;AAAA,UAAC,mBAAA;AAAA,UAAA;AAAA,YACE,GAAG,KAAA;AAAA,YACJ,aAAA,EAAe,CAAC,EAAE,KAAA,EAAO,UAAS,qBAChC,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,KAAK,CAAA,EAAA,KAAM,GAAA,CAAI,gBAAgB,qBAAA,CAAsB,EAAA,EAAI,SAAS,EAAE,CAAA;AAAA,gBACpE,yBAAA,EAAwB,EAAA;AAAA,gBACxB,QAAA;AAAA,gBACA,YAAA,EAAY,UAAU,KAAK,CAAA,CAAA;AAAA,gBAC3B,KAAA,EAAO,KAAA;AAAA,gBACP,SAAA,EAAW,EAAA,CAAG,oBAAA,EAAsB,sBAAsB,CAAA;AAAA,gBAE1D,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AACpC;AAAA;AAEJ;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const ErrorState = require('../../../ErrorState-DvsG3RMz.cjs');
-const PermissionDenied = require('../../../PermissionDenied-Dge5a7OX.cjs');
-const SessionExpired = require('../../../SessionExpired-CAOgb-6E.cjs');
+const PermissionDenied = require('../../../PermissionDenied-BCHmzPYk.cjs');
+const SessionExpired = require('../../../SessionExpired-B4qMlVNC.cjs');
 const utils_errors = require('../../../utils/errors.cjs.js');
 const utils_queryUtils = require('../../../utils/query-utils.cjs.js');
 

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { E as ErrorState } from '../../../ErrorState-t59EAa55.js';
-import { P as PermissionDenied } from '../../../PermissionDenied-BmAbJ1Xn.js';
-import { S as SessionExpired } from '../../../SessionExpired-DSPFseGA.js';
+import { P as PermissionDenied } from '../../../PermissionDenied-lLDk9Zpw.js';
+import { S as SessionExpired } from '../../../SessionExpired-OS-dhsdb.js';
 import { parseError } from '../../../utils/errors.es.js';
 import { is401UnauthorizedError, is403ForbiddenError } from '../../../utils/query-utils.es.js';
 

package/dist/domains/traces/components/traces-list-mode-toggle.cjs.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
-const Button = require('../../../Button-BJOVwaxp.cjs');
-const dropdownMenu = require('../../../dropdown-menu-Bfh5ROWe.cjs');
+const Button = require('../../../Button-C2dx_QZN.cjs');
+const dropdownMenu = require('../../../dropdown-menu-DfX8T0jb.cjs');
 
 const TRACES_LIST_MODE_LABELS = {
   traces: "Top-level traces only",

package/dist/domains/traces/components/traces-list-mode-toggle.es.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDownIcon } from 'lucide-react';
-import { B as Button } from '../../../Button-BVGwYwHT.js';
-import { D as DropdownMenu } from '../../../dropdown-menu-C853KwJJ.js';
+import { B as Button } from '../../../Button-DS6O6fvU.js';
+import { D as DropdownMenu } from '../../../dropdown-menu-B3nTlFnz.js';
 
 const TRACES_LIST_MODE_LABELS = {
   traces: "Top-level traces only",

package/dist/domains/traces/components/traces-list-view-adapter.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function toTracesListViewTraces(traces) {
+  return traces.map((trace) => ({
+    traceId: trace.traceId,
+    spanId: trace.rootSpanId,
+    parentSpanId: trace.parentSpanId,
+    name: trace.name,
+    createdAt: trace.createdAt,
+    inputPreview: trace.inputPreview,
+    metadata: trace.metadata,
+    entityId: trace.entityId,
+    entityName: trace.entityName,
+    entityType: trace.entityType,
+    status: trace.status,
+    startedAt: trace.startedAt,
+    endedAt: trace.endedAt
+  }));
+}
+
+exports.toTracesListViewTraces = toTracesListViewTraces;
+//# sourceMappingURL=traces-list-view-adapter.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"traces-list-view-adapter.cjs.js","sources":["../../../../src/domains/traces/components/traces-list-view-adapter.ts"],"sourcesContent":["import type { TraceQueryTrace } from '@mastra/core/storage';\nimport type { TracesListViewTrace } from './traces-list-view';\n\nexport function toTracesListViewTraces(traces: TraceQueryTrace[]): TracesListViewTrace[] {\n  return traces.map(trace => ({\n    traceId: trace.traceId,\n    spanId: trace.rootSpanId,\n    parentSpanId: trace.parentSpanId,\n    name: trace.name,\n    createdAt: trace.createdAt,\n    inputPreview: trace.inputPreview,\n    metadata: trace.metadata,\n    entityId: trace.entityId,\n    entityName: trace.entityName,\n    entityType: trace.entityType,\n    status: trace.status,\n    startedAt: trace.startedAt,\n    endedAt: trace.endedAt,\n  }));\n}\n"],"names":[],"mappings":";;;;AAGO,SAAS,uBAAuB,MAAA,EAAkD;AACvF,EAAA,OAAO,MAAA,CAAO,IAAI,CAAA,KAAA,MAAU;AAAA,IAC1B,SAAS,KAAA,CAAM,OAAA;AAAA,IACf,QAAQ,KAAA,CAAM,UAAA;AAAA,IACd,cAAc,KAAA,CAAM,YAAA;AAAA,IACpB,MAAM,KAAA,CAAM,IAAA;AAAA,IACZ,WAAW,KAAA,CAAM,SAAA;AAAA,IACjB,cAAc,KAAA,CAAM,YAAA;AAAA,IACpB,UAAU,KAAA,CAAM,QAAA;AAAA,IAChB,UAAU,KAAA,CAAM,QAAA;AAAA,IAChB,YAAY,KAAA,CAAM,UAAA;AAAA,IAClB,YAAY,KAAA,CAAM,UAAA;AAAA,IAClB,QAAQ,KAAA,CAAM,MAAA;AAAA,IACd,WAAW,KAAA,CAAM,SAAA;AAAA,IACjB,SAAS,KAAA,CAAM;AAAA,GACjB,CAAE,CAAA;AACJ;;;;"}

package/dist/domains/traces/components/traces-list-view-adapter.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/traces/components/traces-list-view-adapter'
+export {}

package/dist/domains/traces/components/traces-list-view-adapter.es.js

@@ -0,0 +1,20 @@
+function toTracesListViewTraces(traces) {
+  return traces.map((trace) => ({
+    traceId: trace.traceId,
+    spanId: trace.rootSpanId,
+    parentSpanId: trace.parentSpanId,
+    name: trace.name,
+    createdAt: trace.createdAt,
+    inputPreview: trace.inputPreview,
+    metadata: trace.metadata,
+    entityId: trace.entityId,
+    entityName: trace.entityName,
+    entityType: trace.entityType,
+    status: trace.status,
+    startedAt: trace.startedAt,
+    endedAt: trace.endedAt
+  }));
+}
+
+export { toTracesListViewTraces };
+//# sourceMappingURL=traces-list-view-adapter.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"traces-list-view-adapter.es.js","sources":["../../../../src/domains/traces/components/traces-list-view-adapter.ts"],"sourcesContent":["import type { TraceQueryTrace } from '@mastra/core/storage';\nimport type { TracesListViewTrace } from './traces-list-view';\n\nexport function toTracesListViewTraces(traces: TraceQueryTrace[]): TracesListViewTrace[] {\n  return traces.map(trace => ({\n    traceId: trace.traceId,\n    spanId: trace.rootSpanId,\n    parentSpanId: trace.parentSpanId,\n    name: trace.name,\n    createdAt: trace.createdAt,\n    inputPreview: trace.inputPreview,\n    metadata: trace.metadata,\n    entityId: trace.entityId,\n    entityName: trace.entityName,\n    entityType: trace.entityType,\n    status: trace.status,\n    startedAt: trace.startedAt,\n    endedAt: trace.endedAt,\n  }));\n}\n"],"names":[],"mappings":"AAGO,SAAS,uBAAuB,MAAA,EAAkD;AACvF,EAAA,OAAO,MAAA,CAAO,IAAI,CAAA,KAAA,MAAU;AAAA,IAC1B,SAAS,KAAA,CAAM,OAAA;AAAA,IACf,QAAQ,KAAA,CAAM,UAAA;AAAA,IACd,cAAc,KAAA,CAAM,YAAA;AAAA,IACpB,MAAM,KAAA,CAAM,IAAA;AAAA,IACZ,WAAW,KAAA,CAAM,SAAA;AAAA,IACjB,cAAc,KAAA,CAAM,YAAA;AAAA,IACpB,UAAU,KAAA,CAAM,QAAA;AAAA,IAChB,UAAU,KAAA,CAAM,QAAA;AAAA,IAChB,YAAY,KAAA,CAAM,UAAA;AAAA,IAClB,YAAY,KAAA,CAAM,UAAA;AAAA,IAClB,QAAQ,KAAA,CAAM,MAAA;AAAA,IACd,WAAW,KAAA,CAAM,SAAA;AAAA,IACjB,SAAS,KAAA,CAAM;AAAA,GACjB,CAAE,CAAA;AACJ;;;;"}

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

@@ -8,11 +8,11 @@ const React = require('react');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
 const domains_metrics_components_metricsUtils = require('../../metrics/components/metrics-utils.cjs.js');
-const dataList = require('../../../data-list-4_cVlINT.cjs');
-const dataListSkeleton = require('../../../data-list-skeleton-B7flrjdA.cjs');
-const tracesDataList = require('../../../traces-data-list-0WfYCKdc.cjs');
+const dataList = require('../../../data-list-B9td5YXY.cjs');
+const dataListSkeleton = require('../../../data-list-skeleton-CFaGBKDb.cjs');
+const tracesDataList = require('../../../traces-data-list-CmBQDfnG.cjs');
 const useDataListKeyboard = require('../../../use-data-list-keyboard-DF3tLe10.cjs');
-const utils_cn = require('../../../cn-DnbTIGXa.cjs');
+const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
 
 const ROW_HEIGHT = 36;
 const OVERSCAN = 8;

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

@@ -4,11 +4,11 @@ import { useRef, useEffect } from 'react';
 import { buildTraceListColumns, hasTraceColumn, DEFAULT_TRACE_COLUMN_PREFERENCES, formatTraceMetadataValue } from '../trace-list-columns.es.js';
 import { getInputPreview, formatSpanDuration } from '../utils/span-utils.es.js';
 import { formatCompact, formatCost } from '../../metrics/components/metrics-utils.es.js';
-import { D as DataList } from '../../../data-list-Bm70XKg_.js';
-import { D as DataListSkeleton } from '../../../data-list-skeleton-BJVs8rDE.js';
-import { T as TracesDataList } from '../../../traces-data-list-BOiAOwYM.js';
+import { D as DataList } from '../../../data-list-IQ0BjiGx.js';
+import { D as DataListSkeleton } from '../../../data-list-skeleton-CQQydcpj.js';
+import { T as TracesDataList } from '../../../traces-data-list-Bl1BUIiq.js';
 import { u as useDataListKeyboard } from '../../../use-data-list-keyboard-DFQr4t38.js';
-import { c as cn } from '../../../cn-ByEbywDh.js';
+import { c as cn } from '../../../cn-C6s2yXwM.js';
 
 const ROW_HEIGHT = 36;
 const OVERSCAN = 8;

package/dist/domains/traces/components/traces-page-skeleton.cjs.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
+const dataListSkeleton = require('../../../data-list-skeleton-CFaGBKDb.cjs');
+require('react');
+require('../../../keyboard/keyboard-shortcuts-context.cjs.js');
+const skeleton = require('../../../skeleton-gdUQjWPU.cjs');
+
+function TracesPageSkeleton({ columnPreferences = domains_traces_traceListColumns.DEFAULT_TRACE_COLUMN_PREFERENCES }) {
+  const columns = domains_traces_traceListColumns.buildTraceListColumns(columnPreferences);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex h-full min-h-0 flex-col gap-2",
+      role: "status",
+      "aria-label": "Loading traces",
+      "data-testid": "traces-page-skeleton",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-form-md min-w-64 flex-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-form-md w-28" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(dataListSkeleton.DataListSkeleton, { columns, fit: "container" })
+      ]
+    }
+  );
+}
+
+exports.TracesPageSkeleton = TracesPageSkeleton;
+//# sourceMappingURL=traces-page-skeleton.cjs.js.map

package/dist/domains/traces/components/traces-page-skeleton.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"traces-page-skeleton.cjs.js","sources":["../../../../src/domains/traces/components/traces-page-skeleton.tsx"],"sourcesContent":["import { buildTraceListColumns, DEFAULT_TRACE_COLUMN_PREFERENCES } from '../trace-list-columns';\nimport type { TraceColumnPreferences } from '../trace-list-columns';\nimport { DataListSkeleton } from '@/ds/components/DataList';\nimport { Skeleton } from '@/ds/components/Skeleton';\n\nexport type TracesPageSkeletonProps = {\n  columnPreferences?: TraceColumnPreferences;\n};\n\n/**\n * Page-level placeholder shown while filter-field discovery is pending: a toolbar-height\n * bar stands in for the FilterBar and the usual list skeleton for the trace rows.\n */\nexport function TracesPageSkeleton({ columnPreferences = DEFAULT_TRACE_COLUMN_PREFERENCES }: TracesPageSkeletonProps) {\n  const columns = buildTraceListColumns(columnPreferences);\n  return (\n    <div\n      className=\"flex h-full min-h-0 flex-col gap-2\"\n      role=\"status\"\n      aria-label=\"Loading traces\"\n      data-testid=\"traces-page-skeleton\"\n    >\n      <div className=\"flex items-center gap-2\">\n        <Skeleton className=\"h-form-md min-w-64 flex-1\" />\n        <Skeleton className=\"h-form-md w-28\" />\n      </div>\n      <DataListSkeleton columns={columns} fit=\"container\" />\n    </div>\n  );\n}\n"],"names":["DEFAULT_TRACE_COLUMN_PREFERENCES","buildTraceListColumns","jsxs","jsx","Skeleton","DataListSkeleton"],"mappings":";;;;;;;;;;;AAaO,SAAS,kBAAA,CAAmB,EAAE,iBAAA,GAAoBA,gEAAA,EAAiC,EAA4B;AACpH,EAAA,MAAM,OAAA,GAAUC,sDAAsB,iBAAiB,CAAA;AACvD,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,oCAAA;AAAA,MACV,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAW,gBAAA;AAAA,MACX,aAAA,EAAY,sBAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,iBAAA,EAAA,EAAS,WAAU,2BAAA,EAA4B,CAAA;AAAA,0BAChDD,cAAA,CAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,gBAAA,EAAiB;AAAA,SAAA,EACvC,CAAA;AAAA,wBACAD,cAAA,CAACE,iCAAA,EAAA,EAAiB,OAAA,EAAkB,GAAA,EAAI,WAAA,EAAY;AAAA;AAAA;AAAA,GACtD;AAEJ;;;;"}

package/dist/domains/traces/components/traces-page-skeleton.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/traces/components/traces-page-skeleton'
+export {}

package/dist/domains/traces/components/traces-page-skeleton.es.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { buildTraceListColumns, DEFAULT_TRACE_COLUMN_PREFERENCES } from '../trace-list-columns.es.js';
+import { D as DataListSkeleton } from '../../../data-list-skeleton-CQQydcpj.js';
+import 'react';
+import '../../../keyboard/keyboard-shortcuts-context.es.js';
+import { S as Skeleton } from '../../../skeleton-BpMg6F4M.js';
+
+function TracesPageSkeleton({ columnPreferences = DEFAULT_TRACE_COLUMN_PREFERENCES }) {
+  const columns = buildTraceListColumns(columnPreferences);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex h-full min-h-0 flex-col gap-2",
+      role: "status",
+      "aria-label": "Loading traces",
+      "data-testid": "traces-page-skeleton",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-form-md min-w-64 flex-1" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-form-md w-28" })
+        ] }),
+        /* @__PURE__ */ jsx(DataListSkeleton, { columns, fit: "container" })
+      ]
+    }
+  );
+}
+
+export { TracesPageSkeleton };
+//# sourceMappingURL=traces-page-skeleton.es.js.map

package/dist/domains/traces/components/traces-page-skeleton.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"traces-page-skeleton.es.js","sources":["../../../../src/domains/traces/components/traces-page-skeleton.tsx"],"sourcesContent":["import { buildTraceListColumns, DEFAULT_TRACE_COLUMN_PREFERENCES } from '../trace-list-columns';\nimport type { TraceColumnPreferences } from '../trace-list-columns';\nimport { DataListSkeleton } from '@/ds/components/DataList';\nimport { Skeleton } from '@/ds/components/Skeleton';\n\nexport type TracesPageSkeletonProps = {\n  columnPreferences?: TraceColumnPreferences;\n};\n\n/**\n * Page-level placeholder shown while filter-field discovery is pending: a toolbar-height\n * bar stands in for the FilterBar and the usual list skeleton for the trace rows.\n */\nexport function TracesPageSkeleton({ columnPreferences = DEFAULT_TRACE_COLUMN_PREFERENCES }: TracesPageSkeletonProps) {\n  const columns = buildTraceListColumns(columnPreferences);\n  return (\n    <div\n      className=\"flex h-full min-h-0 flex-col gap-2\"\n      role=\"status\"\n      aria-label=\"Loading traces\"\n      data-testid=\"traces-page-skeleton\"\n    >\n      <div className=\"flex items-center gap-2\">\n        <Skeleton className=\"h-form-md min-w-64 flex-1\" />\n        <Skeleton className=\"h-form-md w-28\" />\n      </div>\n      <DataListSkeleton columns={columns} fit=\"container\" />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAaO,SAAS,kBAAA,CAAmB,EAAE,iBAAA,GAAoB,gCAAA,EAAiC,EAA4B;AACpH,EAAA,MAAM,OAAA,GAAU,sBAAsB,iBAAiB,CAAA;AACvD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,oCAAA;AAAA,MACV,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAW,gBAAA;AAAA,MACX,aAAA,EAAY,sBAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,2BAAA,EAA4B,CAAA;AAAA,0BAChD,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,gBAAA,EAAiB;AAAA,SAAA,EACvC,CAAA;AAAA,wBACA,GAAA,CAAC,gBAAA,EAAA,EAAiB,OAAA,EAAkB,GAAA,EAAI,WAAA,EAAY;AAAA;AAAA;AAAA,GACtD;AAEJ;;;;"}

package/dist/domains/traces/components.cjs.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const domains_traces_components_formatHierarchicalSpans = require('./components/format-hierarchical-spans.cjs.js');
 const domains_traces_components_shared = require('./components/shared.cjs.js');
 const domains_traces_components_spanTokenUsage = require('./components/span-token-usage.cjs.js');
-const domains_traces_components_timelineExpandCol = require('./components/timeline-expand-col.cjs.js');
 const domains_traces_components_timelineNameCol = require('./components/timeline-name-col.cjs.js');
 const domains_traces_components_timelineStructureSign = require('./components/timeline-structure-sign.cjs.js');
 const domains_traces_components_timelineTimingCol = require('./components/timeline-timing-col.cjs.js');
@@ -14,23 +13,27 @@ const domains_traces_components_traceTimelineSpan = require('./components/trace-
 const domains_traces_components_traceTimeline = require('./components/trace-timeline.cjs.js');
 const domains_traces_components_spanRows = require('./components/span-rows.cjs.js');
 const domains_traces_components_spanTreeRow = require('./components/span-tree-row.cjs.js');
-const domains_traces_components_spanTimelineCol = require('./components/span-timeline-col.cjs.js');
-const domains_traces_components_spanDurationCol = require('./components/span-duration-col.cjs.js');
+const domains_traces_components_spanTimelineRow = require('./components/span-timeline-row.cjs.js');
 const domains_traces_components_spanTimingHoverCard = require('./components/span-timing-hover-card.cjs.js');
 const domains_traces_components_spanTypeLegend = require('./components/span-type-legend.cjs.js');
 const domains_traces_components_traceSpanTree = require('./components/trace-span-tree.cjs.js');
 const domains_traces_components_traceSpanTimeline = require('./components/trace-span-timeline.cjs.js');
-const domains_traces_components_tracesToolbar = require('./components/traces-toolbar.cjs.js');
 const domains_traces_components_traceDataPanelView = require('./components/trace-data-panel-view.cjs.js');
 const domains_traces_components_spanDataPanelView = require('./components/span-data-panel-view.cjs.js');
 const domains_traces_components_spanDetailsView = require('./components/span-details-view.cjs.js');
 const domains_traces_components_traceDetailsView = require('./components/trace-details-view.cjs.js');
-const domains_traces_components_tracesLayout = require('./components/traces-layout.cjs.js');
 const domains_traces_components_tracesListView = require('./components/traces-list-view.cjs.js');
+const domains_traces_components_tracesPageSkeleton = require('./components/traces-page-skeleton.cjs.js');
 const domains_traces_components_tracesListModeToggle = require('./components/traces-list-mode-toggle.cjs.js');
 const domains_traces_components_tracesErrorContent = require('./components/traces-error-content.cjs.js');
 const domains_traces_components_noTracesInfo = require('./components/no-traces-info.cjs.js');
 const domains_traces_components_threadTrace = require('./components/thread-trace.cjs.js');
+const domains_traces_components_spanPayload_spanInputRenderers = require('./components/span-payload/span-input-renderers.cjs.js');
+const domains_traces_components_spanPayload_spanOutputRenderers = require('./components/span-payload/span-output-renderers.cjs.js');
+const domains_traces_components_spanPayload_spanErrorRenderer = require('./components/span-payload/span-error-renderer.cjs.js');
+const domains_traces_components_spanPayload_spanPayloadSection = require('./components/span-payload/span-payload-section.cjs.js');
+const domains_traces_components_spanPayload_spanPayloadMessages = require('./components/span-payload/span-payload-messages.cjs.js');
+const domains_traces_components_spanPayload_spanPayloadJson = require('./components/span-payload/span-payload-json.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRow = require('./components/thread-trace/thread-trace-row.cjs.js');
 const domains_traces_components_threadTrace_threadTraceContext = require('./components/thread-trace/thread-trace-context.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./components/thread-trace/thread-trace-row-context.cjs.js');
@@ -41,7 +44,6 @@ exports.formatHierarchicalSpans = domains_traces_components_formatHierarchicalSp
 exports.getSpanTypeUi = domains_traces_components_shared.getSpanTypeUi;
 exports.spanTypePrefixes = domains_traces_components_shared.spanTypePrefixes;
 exports.SpanTokenUsage = domains_traces_components_spanTokenUsage.SpanTokenUsage;
-exports.TimelineExpandCol = domains_traces_components_timelineExpandCol.TimelineExpandCol;
 exports.TimelineNameCol = domains_traces_components_timelineNameCol.TimelineNameCol;
 exports.TimelineStructureSign = domains_traces_components_timelineStructureSign.TimelineStructureSign;
 exports.TimelineTimingCol = domains_traces_components_timelineTimingCol.TimelineTimingCol;
@@ -50,24 +52,28 @@ exports.TraceTimelineSpan = domains_traces_components_traceTimelineSpan.TraceTim
 exports.TraceTimeline = domains_traces_components_traceTimeline.TraceTimeline;
 exports.SpanRows = domains_traces_components_spanRows.SpanRows;
 exports.SpanTreeRow = domains_traces_components_spanTreeRow.SpanTreeRow;
-exports.SpanTimelineCol = domains_traces_components_spanTimelineCol.SpanTimelineCol;
-exports.SpanDurationCol = domains_traces_components_spanDurationCol.SpanDurationCol;
+exports.SpanTimelineRow = domains_traces_components_spanTimelineRow.SpanTimelineRow;
 exports.SpanTimingHoverCard = domains_traces_components_spanTimingHoverCard.SpanTimingHoverCard;
 exports.SpanTypeLegend = domains_traces_components_spanTypeLegend.SpanTypeLegend;
 exports.TraceSpanTree = domains_traces_components_traceSpanTree.TraceSpanTree;
 exports.TraceSpanTimeline = domains_traces_components_traceSpanTimeline.TraceSpanTimeline;
-exports.TracesToolbar = domains_traces_components_tracesToolbar.TracesToolbar;
 exports.TraceDataPanelView = domains_traces_components_traceDataPanelView.TraceDataPanelView;
 exports.SpanDataPanelView = domains_traces_components_spanDataPanelView.SpanDataPanelView;
 exports.SpanDetailsView = domains_traces_components_spanDetailsView.SpanDetailsView;
 exports.TraceDetailsView = domains_traces_components_traceDetailsView.TraceDetailsView;
-exports.TracesLayout = domains_traces_components_tracesLayout.TracesLayout;
 exports.TracesListView = domains_traces_components_tracesListView.TracesListView;
+exports.TracesPageSkeleton = domains_traces_components_tracesPageSkeleton.TracesPageSkeleton;
 exports.TracesListModeToggle = domains_traces_components_tracesListModeToggle.TracesListModeToggle;
 exports.TracesErrorContent = domains_traces_components_tracesErrorContent.TracesErrorContent;
 exports.NoTracesInfo = domains_traces_components_noTracesInfo.NoTracesInfo;
 exports.ThreadTrace = domains_traces_components_threadTrace.ThreadTrace;
-exports.THREAD_TRACE_SPANS_TAB = domains_traces_components_threadTrace_threadTraceRow.THREAD_TRACE_SPANS_TAB;
+exports.SpanInputRenderer = domains_traces_components_spanPayload_spanInputRenderers.SpanInputRenderer;
+exports.SpanOutputRenderer = domains_traces_components_spanPayload_spanOutputRenderers.SpanOutputRenderer;
+exports.SpanErrorRenderer = domains_traces_components_spanPayload_spanErrorRenderer.SpanErrorRenderer;
+exports.SpanPayloadSection = domains_traces_components_spanPayload_spanPayloadSection.SpanPayloadSection;
+exports.SpanPayloadMessages = domains_traces_components_spanPayload_spanPayloadMessages.SpanPayloadMessages;
+exports.SpanPayloadJson = domains_traces_components_spanPayload_spanPayloadJson.SpanPayloadJson;
+exports.THREAD_TRACE_MESSAGES_TAB = domains_traces_components_threadTrace_threadTraceRow.THREAD_TRACE_MESSAGES_TAB;
 exports.useThreadTrace = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace;
 exports.useThreadTraceRow = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow;
 //# sourceMappingURL=components.cjs.js.map

package/dist/domains/traces/components.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/domains/traces/components.es.js

@@ -1,7 +1,6 @@
 export { formatHierarchicalSpans } from './components/format-hierarchical-spans.es.js';
 export { getSpanTypeUi, spanTypePrefixes } from './components/shared.es.js';
 export { SpanTokenUsage } from './components/span-token-usage.es.js';
-export { TimelineExpandCol } from './components/timeline-expand-col.es.js';
 export { TimelineNameCol } from './components/timeline-name-col.es.js';
 export { TimelineStructureSign } from './components/timeline-structure-sign.es.js';
 export { TimelineTimingCol } from './components/timeline-timing-col.es.js';
@@ -10,24 +9,28 @@ export { TraceTimelineSpan } from './components/trace-timeline-span.es.js';
 export { TraceTimeline } from './components/trace-timeline.es.js';
 export { SpanRows } from './components/span-rows.es.js';
 export { SpanTreeRow } from './components/span-tree-row.es.js';
-export { SpanTimelineCol } from './components/span-timeline-col.es.js';
-export { SpanDurationCol } from './components/span-duration-col.es.js';
+export { SpanTimelineRow } from './components/span-timeline-row.es.js';
 export { SpanTimingHoverCard } from './components/span-timing-hover-card.es.js';
 export { SpanTypeLegend } from './components/span-type-legend.es.js';
 export { TraceSpanTree } from './components/trace-span-tree.es.js';
 export { TraceSpanTimeline } from './components/trace-span-timeline.es.js';
-export { TracesToolbar } from './components/traces-toolbar.es.js';
 export { TraceDataPanelView } from './components/trace-data-panel-view.es.js';
 export { SpanDataPanelView } from './components/span-data-panel-view.es.js';
 export { SpanDetailsView } from './components/span-details-view.es.js';
 export { TraceDetailsView } from './components/trace-details-view.es.js';
-export { TracesLayout } from './components/traces-layout.es.js';
 export { TracesListView } from './components/traces-list-view.es.js';
+export { TracesPageSkeleton } from './components/traces-page-skeleton.es.js';
 export { TracesListModeToggle } from './components/traces-list-mode-toggle.es.js';
 export { TracesErrorContent } from './components/traces-error-content.es.js';
 export { NoTracesInfo } from './components/no-traces-info.es.js';
 export { ThreadTrace } from './components/thread-trace.es.js';
-export { THREAD_TRACE_SPANS_TAB } from './components/thread-trace/thread-trace-row.es.js';
+export { SpanInputRenderer } from './components/span-payload/span-input-renderers.es.js';
+export { SpanOutputRenderer } from './components/span-payload/span-output-renderers.es.js';
+export { SpanErrorRenderer } from './components/span-payload/span-error-renderer.es.js';
+export { SpanPayloadSection } from './components/span-payload/span-payload-section.es.js';
+export { SpanPayloadMessages } from './components/span-payload/span-payload-messages.es.js';
+export { SpanPayloadJson } from './components/span-payload/span-payload-json.es.js';
+export { THREAD_TRACE_MESSAGES_TAB } from './components/thread-trace/thread-trace-row.es.js';
 export { useThreadTrace } from './components/thread-trace/thread-trace-context.es.js';
 export { useThreadTraceRow } from './components/thread-trace/thread-trace-row-context.es.js';
 //# sourceMappingURL=components.es.js.map

package/dist/domains/traces/components.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/domains/traces/hooks/use-download-trace-json.cjs.js

@@ -6,7 +6,7 @@ const react = require('@mastra/react');
 const reactQuery = require('@tanstack/react-query');
 const React = require('react');
 const domains_traces_hooks_useTraceSpans = require('./use-trace-spans.cjs.js');
-const toast = require('../../../toast-FypW736q.cjs');
+const toast = require('../../../toast-CwH7p9gV.cjs');
 const downloadJson = require('../../../downloadJson-PWUDbzkB.cjs');
 
 function useDownloadTraceJson() {

package/dist/domains/traces/hooks/use-download-trace-json.es.js

@@ -2,7 +2,7 @@ import { useMastraClient } from '@mastra/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { traceSpansQueryOptions } from './use-trace-spans.es.js';
-import { t as toast } from '../../../toast-Xv8jgrMR.js';
+import { t as toast } from '../../../toast-CTMSqE4M.js';
 import { d as downloadJson } from '../../../downloadJson-DuPoMa_6.js';
 
 function useDownloadTraceJson() {

package/dist/domains/traces/hooks/use-span-detail.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-span-detail.cjs.js","sources":["../../../../src/domains/traces/hooks/use-span-detail.ts"],"sourcesContent":["import type { LightSpanRecord } from '@mastra/core/storage';\nimport { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\nexport function useSpanDetail(\n  traceId: string | null | undefined,\n  spanId: string | null | undefined,\n): UseQueryResult<{ span: LightSpanRecord & { output?: unknown; result?: unknown } } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    queryKey: ['span-detail', traceId, spanId],\n    queryFn: async () => {\n      if (!traceId || !spanId) {\n        throw new Error('Trace ID and Span ID are required');\n      }\n      return client.getSpan(traceId, spanId);\n    },\n    enabled: !!traceId && !!spanId,\n    staleTime: query => {\n      const data = query.state.data;\n\n      if (data?.span?.endedAt) {\n        return IMMUTABLE_CACHE_TIME;\n      }\n\n      return 0;\n    },\n  });\n}\n"],"names":["useMastraClient","useQuery"],"mappings":";;;;;;;AAKA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAE5C,SAAS,aAAA,CACd,SACA,MAAA,EAC2F;AAC3F,EAAA,MAAM,SAASA,qBAAA,EAAgB;AAE/B,EAAA,OAAOC,mBAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,aAAA,EAAe,OAAA,EAAS,MAAM,CAAA;AAAA,IACzC,SAAS,YAAY;AACnB,MAAA,IAAI,CAAC,OAAA,IAAW,CAAC,MAAA,EAAQ;AACvB,QAAA,MAAM,IAAI,MAAM,mCAAmC,CAAA;AAAA,MACrD;AACA,MAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,OAAA,EAAS,MAAM,CAAA;AAAA,IACvC,CAAA;AAAA,IACA,OAAA,EAAS,CAAC,CAAC,OAAA,IAAW,CAAC,CAAC,MAAA;AAAA,IACxB,WAAW,CAAA,KAAA,KAAS;AAClB,MAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AAEzB,MAAA,IAAI,IAAA,EAAM,MAAM,OAAA,EAAS;AACvB,QAAA,OAAO,oBAAA;AAAA,MACT;AAEA,MAAA,OAAO,CAAA;AAAA,IACT;AAAA,GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"use-span-detail.cjs.js","sources":["../../../../src/domains/traces/hooks/use-span-detail.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\ntype SpanDetailResponse = Awaited<ReturnType<MastraClient['getSpan']>>;\n\nexport function useSpanDetail(\n  traceId: string | null | undefined,\n  spanId: string | null | undefined,\n): UseQueryResult<SpanDetailResponse | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    queryKey: ['span-detail', traceId, spanId],\n    queryFn: async () => {\n      if (!traceId || !spanId) {\n        throw new Error('Trace ID and Span ID are required');\n      }\n      return client.getSpan(traceId, spanId);\n    },\n    enabled: !!traceId && !!spanId,\n    staleTime: query => {\n      const data = query.state.data;\n\n      if (data?.span?.endedAt) {\n        return IMMUTABLE_CACHE_TIME;\n      }\n\n      return 0;\n    },\n  });\n}\n"],"names":["useMastraClient","useQuery"],"mappings":";;;;;;;AAKA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAI5C,SAAS,aAAA,CACd,SACA,MAAA,EAC2C;AAC3C,EAAA,MAAM,SAASA,qBAAA,EAAgB;AAE/B,EAAA,OAAOC,mBAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,aAAA,EAAe,OAAA,EAAS,MAAM,CAAA;AAAA,IACzC,SAAS,YAAY;AACnB,MAAA,IAAI,CAAC,OAAA,IAAW,CAAC,MAAA,EAAQ;AACvB,QAAA,MAAM,IAAI,MAAM,mCAAmC,CAAA;AAAA,MACrD;AACA,MAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,OAAA,EAAS,MAAM,CAAA;AAAA,IACvC,CAAA;AAAA,IACA,OAAA,EAAS,CAAC,CAAC,OAAA,IAAW,CAAC,CAAC,MAAA;AAAA,IACxB,WAAW,CAAA,KAAA,KAAS;AAClB,MAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AAEzB,MAAA,IAAI,IAAA,EAAM,MAAM,OAAA,EAAS;AACvB,QAAA,OAAO,oBAAA;AAAA,MACT;AAEA,MAAA,OAAO,CAAA;AAAA,IACT;AAAA,GACD,CAAA;AACH;;;;"}

package/dist/domains/traces/hooks/use-span-detail.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-span-detail.es.js","sources":["../../../../src/domains/traces/hooks/use-span-detail.ts"],"sourcesContent":["import type { LightSpanRecord } from '@mastra/core/storage';\nimport { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\nexport function useSpanDetail(\n  traceId: string | null | undefined,\n  spanId: string | null | undefined,\n): UseQueryResult<{ span: LightSpanRecord & { output?: unknown; result?: unknown } } | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    queryKey: ['span-detail', traceId, spanId],\n    queryFn: async () => {\n      if (!traceId || !spanId) {\n        throw new Error('Trace ID and Span ID are required');\n      }\n      return client.getSpan(traceId, spanId);\n    },\n    enabled: !!traceId && !!spanId,\n    staleTime: query => {\n      const data = query.state.data;\n\n      if (data?.span?.endedAt) {\n        return IMMUTABLE_CACHE_TIME;\n      }\n\n      return 0;\n    },\n  });\n}\n"],"names":[],"mappings":";;;AAKA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAE5C,SAAS,aAAA,CACd,SACA,MAAA,EAC2F;AAC3F,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,OAAO,QAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,aAAA,EAAe,OAAA,EAAS,MAAM,CAAA;AAAA,IACzC,SAAS,YAAY;AACnB,MAAA,IAAI,CAAC,OAAA,IAAW,CAAC,MAAA,EAAQ;AACvB,QAAA,MAAM,IAAI,MAAM,mCAAmC,CAAA;AAAA,MACrD;AACA,MAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,OAAA,EAAS,MAAM,CAAA;AAAA,IACvC,CAAA;AAAA,IACA,OAAA,EAAS,CAAC,CAAC,OAAA,IAAW,CAAC,CAAC,MAAA;AAAA,IACxB,WAAW,CAAA,KAAA,KAAS;AAClB,MAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AAEzB,MAAA,IAAI,IAAA,EAAM,MAAM,OAAA,EAAS;AACvB,QAAA,OAAO,oBAAA;AAAA,MACT;AAEA,MAAA,OAAO,CAAA;AAAA,IACT;AAAA,GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"use-span-detail.es.js","sources":["../../../../src/domains/traces/hooks/use-span-detail.ts"],"sourcesContent":["import type { MastraClient } from '@mastra/client-js';\nimport { useMastraClient } from '@mastra/react';\nimport { useQuery } from '@tanstack/react-query';\nimport type { UseQueryResult } from '@tanstack/react-query';\n\nconst IMMUTABLE_CACHE_TIME = 1000 * 60 * 60 * 24 * 30; // 30 days, massive cache, span data is immutable\n\ntype SpanDetailResponse = Awaited<ReturnType<MastraClient['getSpan']>>;\n\nexport function useSpanDetail(\n  traceId: string | null | undefined,\n  spanId: string | null | undefined,\n): UseQueryResult<SpanDetailResponse | null> {\n  const client = useMastraClient();\n\n  return useQuery({\n    queryKey: ['span-detail', traceId, spanId],\n    queryFn: async () => {\n      if (!traceId || !spanId) {\n        throw new Error('Trace ID and Span ID are required');\n      }\n      return client.getSpan(traceId, spanId);\n    },\n    enabled: !!traceId && !!spanId,\n    staleTime: query => {\n      const data = query.state.data;\n\n      if (data?.span?.endedAt) {\n        return IMMUTABLE_CACHE_TIME;\n      }\n\n      return 0;\n    },\n  });\n}\n"],"names":[],"mappings":";;;AAKA,MAAM,oBAAA,GAAuB,GAAA,GAAO,EAAA,GAAK,EAAA,GAAK,EAAA,GAAK,EAAA;AAI5C,SAAS,aAAA,CACd,SACA,MAAA,EAC2C;AAC3C,EAAA,MAAM,SAAS,eAAA,EAAgB;AAE/B,EAAA,OAAO,QAAA,CAAS;AAAA,IACd,QAAA,EAAU,CAAC,aAAA,EAAe,OAAA,EAAS,MAAM,CAAA;AAAA,IACzC,SAAS,YAAY;AACnB,MAAA,IAAI,CAAC,OAAA,IAAW,CAAC,MAAA,EAAQ;AACvB,QAAA,MAAM,IAAI,MAAM,mCAAmC,CAAA;AAAA,MACrD;AACA,MAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,OAAA,EAAS,MAAM,CAAA;AAAA,IACvC,CAAA;AAAA,IACA,OAAA,EAAS,CAAC,CAAC,OAAA,IAAW,CAAC,CAAC,MAAA;AAAA,IACxB,WAAW,CAAA,KAAA,KAAS;AAClB,MAAA,MAAM,IAAA,GAAO,MAAM,KAAA,CAAM,IAAA;AAEzB,MAAA,IAAI,IAAA,EAAM,MAAM,OAAA,EAAS;AACvB,QAAA,OAAO,oBAAA;AAAA,MACT;AAEA,MAAA,OAAO,CAAA;AAAA,IACT;AAAA,GACD,CAAA;AACH;;;;"}