@mastra/playground-ui 56.0.0 → 57.0.0-alpha.1

package/dist/domains/traces/components/no-traces-info.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"no-traces-info.cjs.js","sources":["../../../../src/domains/traces/components/no-traces-info.tsx"],"sourcesContent":["import { format } from 'date-fns';\nimport { CircleSlashIcon } from 'lucide-react';\nimport type { TraceDatePreset } from '../types';\nimport { EmptyState } from '@/ds/components/EmptyState';\n\nconst PRESET_LABELS: Record<Exclude<TraceDatePreset, 'all' | 'custom'>, string> = {\n  'last-24h': 'the last 24 hours',\n  'last-3d': 'the last 3 days',\n  'last-7d': 'the last 7 days',\n  'last-14d': 'the last 14 days',\n  'last-30d': 'the last 30 days',\n};\n\nexport interface NoTracesInfoProps {\n  datePreset?: TraceDatePreset;\n  dateFrom?: Date;\n  dateTo?: Date;\n}\n\nconst DATE_FORMAT = 'MMM d, yyyy HH:mm';\n\nconst RANGE_TIP = 'Pick a wider time range — older traces may fall outside the current window.';\n\nfunction describeRange({ datePreset, dateFrom, dateTo }: NoTracesInfoProps): { title: string; description: string } {\n  if (datePreset && datePreset !== 'all' && datePreset !== 'custom') {\n    return {\n      title: `No traces for ${PRESET_LABELS[datePreset]}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom && dateTo) {\n    return {\n      title: `No traces between ${format(dateFrom, DATE_FORMAT)} and ${format(dateTo, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom) {\n    return {\n      title: `No traces since ${format(dateFrom, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  return {\n    title: 'No traces yet',\n    description: 'Traces will appear here once agents, workflows, or tools are executed.',\n  };\n}\n\nexport const NoTracesInfo = ({ datePreset, dateFrom, dateTo }: NoTracesInfoProps = {}) => {\n  const { title, description } = describeRange({ datePreset, dateFrom, dateTo });\n  return (\n    <div className=\"flex h-full items-center-safe justify-center-safe\">\n      <EmptyState iconSlot={<CircleSlashIcon />} titleSlot={title} descriptionSlot={description} />\n    </div>\n  );\n};\n"],"names":["format","jsx","EmptyState","CircleSlashIcon"],"mappings":";;;;;;;;;AAKA,MAAM,aAAA,GAA4E;AAAA,EAChF,UAAA,EAAY,mBAAA;AAAA,EACZ,SAAA,EAAW,iBAAA;AAAA,EACX,SAAA,EAAW,iBAAA;AAAA,EACX,UAAA,EAAY,kBAAA;AAAA,EACZ,UAAA,EAAY;AACd,CAAA;AAQA,MAAM,WAAA,GAAc,mBAAA;AAEpB,MAAM,SAAA,GAAY,6EAAA;AAElB,SAAS,aAAA,CAAc,EAAE,UAAA,EAAY,QAAA,EAAU,QAAO,EAA8D;AAClH,EAAA,IAAI,UAAA,IAAc,UAAA,KAAe,KAAA,IAAS,UAAA,KAAe,QAAA,EAAU;AACjE,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,cAAA,EAAiB,aAAA,CAAc,UAAU,CAAC,CAAA,CAAA;AAAA,MACjD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,kBAAA,EAAqBA,cAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,KAAA,EAAQA,cAAA,CAAO,MAAA,EAAQ,WAAW,CAAC,CAAA,CAAA;AAAA,MAC5F,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,gBAAA,EAAmBA,cAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,CAAA;AAAA,MACvD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,eAAA;AAAA,IACP,WAAA,EAAa;AAAA,GACf;AACF;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,UAAA,EAAY,UAAU,MAAA,EAAO,GAAuB,EAAC,KAAM;AACxF,EAAA,MAAM,EAAE,OAAO,WAAA,EAAY,GAAI,cAAc,EAAE,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,CAAA;AAC7E,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EACb,yCAACC,qBAAA,EAAA,EAAW,QAAA,kBAAUD,cAAA,CAACE,2BAAA,EAAA,EAAgB,CAAA,EAAI,SAAA,EAAW,KAAA,EAAO,eAAA,EAAiB,aAAa,CAAA,EAC7F,CAAA;AAEJ;;;;"}
+{"version":3,"file":"no-traces-info.cjs.js","sources":["../../../../src/domains/traces/components/no-traces-info.tsx"],"sourcesContent":["import { format } from 'date-fns';\nimport type { TraceDatePreset } from '../types';\nimport { EmptyState } from '@/ds/components/EmptyState';\n\nconst PRESET_LABELS: Record<Exclude<TraceDatePreset, 'all' | 'custom'>, string> = {\n  'last-24h': 'the last 24 hours',\n  'last-3d': 'the last 3 days',\n  'last-7d': 'the last 7 days',\n  'last-14d': 'the last 14 days',\n  'last-30d': 'the last 30 days',\n};\n\nexport interface NoTracesInfoProps {\n  datePreset?: TraceDatePreset;\n  dateFrom?: Date;\n  dateTo?: Date;\n}\n\nconst DATE_FORMAT = 'MMM d, yyyy HH:mm';\n\nconst RANGE_TIP = 'Pick a wider time range — older traces may fall outside the current window.';\n\nfunction describeRange({ datePreset, dateFrom, dateTo }: NoTracesInfoProps): { title: string; description: string } {\n  if (datePreset && datePreset !== 'all' && datePreset !== 'custom') {\n    return {\n      title: `No traces for ${PRESET_LABELS[datePreset]}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom && dateTo) {\n    return {\n      title: `No traces between ${format(dateFrom, DATE_FORMAT)} and ${format(dateTo, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom) {\n    return {\n      title: `No traces since ${format(dateFrom, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  return {\n    title: 'No traces yet',\n    description: 'Traces will appear here once agents, workflows, or tools are executed.',\n  };\n}\n\nexport const NoTracesInfo = ({ datePreset, dateFrom, dateTo }: NoTracesInfoProps = {}) => {\n  const { title, description } = describeRange({ datePreset, dateFrom, dateTo });\n  return <EmptyState titleSlot={title} descriptionSlot={description} variant=\"fill\" />;\n};\n"],"names":["format","EmptyState"],"mappings":";;;;;;;;AAIA,MAAM,aAAA,GAA4E;AAAA,EAChF,UAAA,EAAY,mBAAA;AAAA,EACZ,SAAA,EAAW,iBAAA;AAAA,EACX,SAAA,EAAW,iBAAA;AAAA,EACX,UAAA,EAAY,kBAAA;AAAA,EACZ,UAAA,EAAY;AACd,CAAA;AAQA,MAAM,WAAA,GAAc,mBAAA;AAEpB,MAAM,SAAA,GAAY,6EAAA;AAElB,SAAS,aAAA,CAAc,EAAE,UAAA,EAAY,QAAA,EAAU,QAAO,EAA8D;AAClH,EAAA,IAAI,UAAA,IAAc,UAAA,KAAe,KAAA,IAAS,UAAA,KAAe,QAAA,EAAU;AACjE,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,cAAA,EAAiB,aAAA,CAAc,UAAU,CAAC,CAAA,CAAA;AAAA,MACjD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,kBAAA,EAAqBA,cAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,KAAA,EAAQA,cAAA,CAAO,MAAA,EAAQ,WAAW,CAAC,CAAA,CAAA;AAAA,MAC5F,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,gBAAA,EAAmBA,cAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,CAAA;AAAA,MACvD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,eAAA;AAAA,IACP,WAAA,EAAa;AAAA,GACf;AACF;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,UAAA,EAAY,UAAU,MAAA,EAAO,GAAuB,EAAC,KAAM;AACxF,EAAA,MAAM,EAAE,OAAO,WAAA,EAAY,GAAI,cAAc,EAAE,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,CAAA;AAC7E,EAAA,sCAAQC,qBAAA,EAAA,EAAW,SAAA,EAAW,OAAO,eAAA,EAAiB,WAAA,EAAa,SAAQ,MAAA,EAAO,CAAA;AACpF;;;;"}

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

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { format } from 'date-fns';
-import { CircleSlashIcon } from 'lucide-react';
-import { E as EmptyState } from '../../../EmptyState-UWXhBp5U.js';
+import { E as EmptyState } from '../../../EmptyState-B6cyZw6m.js';
 
 const PRESET_LABELS = {
   "last-24h": "the last 24 hours",
@@ -38,7 +37,7 @@ function describeRange({ datePreset, dateFrom, dateTo }) {
 }
 const NoTracesInfo = ({ datePreset, dateFrom, dateTo } = {}) => {
   const { title, description } = describeRange({ datePreset, dateFrom, dateTo });
-  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center-safe justify-center-safe", children: /* @__PURE__ */ jsx(EmptyState, { iconSlot: /* @__PURE__ */ jsx(CircleSlashIcon, {}), titleSlot: title, descriptionSlot: description }) });
+  return /* @__PURE__ */ jsx(EmptyState, { titleSlot: title, descriptionSlot: description, variant: "fill" });
 };
 
 export { NoTracesInfo };

package/dist/domains/traces/components/no-traces-info.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"no-traces-info.es.js","sources":["../../../../src/domains/traces/components/no-traces-info.tsx"],"sourcesContent":["import { format } from 'date-fns';\nimport { CircleSlashIcon } from 'lucide-react';\nimport type { TraceDatePreset } from '../types';\nimport { EmptyState } from '@/ds/components/EmptyState';\n\nconst PRESET_LABELS: Record<Exclude<TraceDatePreset, 'all' | 'custom'>, string> = {\n  'last-24h': 'the last 24 hours',\n  'last-3d': 'the last 3 days',\n  'last-7d': 'the last 7 days',\n  'last-14d': 'the last 14 days',\n  'last-30d': 'the last 30 days',\n};\n\nexport interface NoTracesInfoProps {\n  datePreset?: TraceDatePreset;\n  dateFrom?: Date;\n  dateTo?: Date;\n}\n\nconst DATE_FORMAT = 'MMM d, yyyy HH:mm';\n\nconst RANGE_TIP = 'Pick a wider time range — older traces may fall outside the current window.';\n\nfunction describeRange({ datePreset, dateFrom, dateTo }: NoTracesInfoProps): { title: string; description: string } {\n  if (datePreset && datePreset !== 'all' && datePreset !== 'custom') {\n    return {\n      title: `No traces for ${PRESET_LABELS[datePreset]}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom && dateTo) {\n    return {\n      title: `No traces between ${format(dateFrom, DATE_FORMAT)} and ${format(dateTo, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom) {\n    return {\n      title: `No traces since ${format(dateFrom, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  return {\n    title: 'No traces yet',\n    description: 'Traces will appear here once agents, workflows, or tools are executed.',\n  };\n}\n\nexport const NoTracesInfo = ({ datePreset, dateFrom, dateTo }: NoTracesInfoProps = {}) => {\n  const { title, description } = describeRange({ datePreset, dateFrom, dateTo });\n  return (\n    <div className=\"flex h-full items-center-safe justify-center-safe\">\n      <EmptyState iconSlot={<CircleSlashIcon />} titleSlot={title} descriptionSlot={description} />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAKA,MAAM,aAAA,GAA4E;AAAA,EAChF,UAAA,EAAY,mBAAA;AAAA,EACZ,SAAA,EAAW,iBAAA;AAAA,EACX,SAAA,EAAW,iBAAA;AAAA,EACX,UAAA,EAAY,kBAAA;AAAA,EACZ,UAAA,EAAY;AACd,CAAA;AAQA,MAAM,WAAA,GAAc,mBAAA;AAEpB,MAAM,SAAA,GAAY,6EAAA;AAElB,SAAS,aAAA,CAAc,EAAE,UAAA,EAAY,QAAA,EAAU,QAAO,EAA8D;AAClH,EAAA,IAAI,UAAA,IAAc,UAAA,KAAe,KAAA,IAAS,UAAA,KAAe,QAAA,EAAU;AACjE,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,cAAA,EAAiB,aAAA,CAAc,UAAU,CAAC,CAAA,CAAA;AAAA,MACjD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,kBAAA,EAAqB,MAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,KAAA,EAAQ,MAAA,CAAO,MAAA,EAAQ,WAAW,CAAC,CAAA,CAAA;AAAA,MAC5F,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,gBAAA,EAAmB,MAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,CAAA;AAAA,MACvD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,eAAA;AAAA,IACP,WAAA,EAAa;AAAA,GACf;AACF;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,UAAA,EAAY,UAAU,MAAA,EAAO,GAAuB,EAAC,KAAM;AACxF,EAAA,MAAM,EAAE,OAAO,WAAA,EAAY,GAAI,cAAc,EAAE,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,CAAA;AAC7E,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EACb,8BAAC,UAAA,EAAA,EAAW,QAAA,kBAAU,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,EAAI,SAAA,EAAW,KAAA,EAAO,eAAA,EAAiB,aAAa,CAAA,EAC7F,CAAA;AAEJ;;;;"}
+{"version":3,"file":"no-traces-info.es.js","sources":["../../../../src/domains/traces/components/no-traces-info.tsx"],"sourcesContent":["import { format } from 'date-fns';\nimport type { TraceDatePreset } from '../types';\nimport { EmptyState } from '@/ds/components/EmptyState';\n\nconst PRESET_LABELS: Record<Exclude<TraceDatePreset, 'all' | 'custom'>, string> = {\n  'last-24h': 'the last 24 hours',\n  'last-3d': 'the last 3 days',\n  'last-7d': 'the last 7 days',\n  'last-14d': 'the last 14 days',\n  'last-30d': 'the last 30 days',\n};\n\nexport interface NoTracesInfoProps {\n  datePreset?: TraceDatePreset;\n  dateFrom?: Date;\n  dateTo?: Date;\n}\n\nconst DATE_FORMAT = 'MMM d, yyyy HH:mm';\n\nconst RANGE_TIP = 'Pick a wider time range — older traces may fall outside the current window.';\n\nfunction describeRange({ datePreset, dateFrom, dateTo }: NoTracesInfoProps): { title: string; description: string } {\n  if (datePreset && datePreset !== 'all' && datePreset !== 'custom') {\n    return {\n      title: `No traces for ${PRESET_LABELS[datePreset]}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom && dateTo) {\n    return {\n      title: `No traces between ${format(dateFrom, DATE_FORMAT)} and ${format(dateTo, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  if (dateFrom) {\n    return {\n      title: `No traces since ${format(dateFrom, DATE_FORMAT)}`,\n      description: RANGE_TIP,\n    };\n  }\n  return {\n    title: 'No traces yet',\n    description: 'Traces will appear here once agents, workflows, or tools are executed.',\n  };\n}\n\nexport const NoTracesInfo = ({ datePreset, dateFrom, dateTo }: NoTracesInfoProps = {}) => {\n  const { title, description } = describeRange({ datePreset, dateFrom, dateTo });\n  return <EmptyState titleSlot={title} descriptionSlot={description} variant=\"fill\" />;\n};\n"],"names":[],"mappings":";;;;AAIA,MAAM,aAAA,GAA4E;AAAA,EAChF,UAAA,EAAY,mBAAA;AAAA,EACZ,SAAA,EAAW,iBAAA;AAAA,EACX,SAAA,EAAW,iBAAA;AAAA,EACX,UAAA,EAAY,kBAAA;AAAA,EACZ,UAAA,EAAY;AACd,CAAA;AAQA,MAAM,WAAA,GAAc,mBAAA;AAEpB,MAAM,SAAA,GAAY,6EAAA;AAElB,SAAS,aAAA,CAAc,EAAE,UAAA,EAAY,QAAA,EAAU,QAAO,EAA8D;AAClH,EAAA,IAAI,UAAA,IAAc,UAAA,KAAe,KAAA,IAAS,UAAA,KAAe,QAAA,EAAU;AACjE,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,cAAA,EAAiB,aAAA,CAAc,UAAU,CAAC,CAAA,CAAA;AAAA,MACjD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,kBAAA,EAAqB,MAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,KAAA,EAAQ,MAAA,CAAO,MAAA,EAAQ,WAAW,CAAC,CAAA,CAAA;AAAA,MAC5F,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,CAAA,gBAAA,EAAmB,MAAA,CAAO,QAAA,EAAU,WAAW,CAAC,CAAA,CAAA;AAAA,MACvD,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AACA,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,eAAA;AAAA,IACP,WAAA,EAAa;AAAA,GACf;AACF;AAEO,MAAM,YAAA,GAAe,CAAC,EAAE,UAAA,EAAY,UAAU,MAAA,EAAO,GAAuB,EAAC,KAAM;AACxF,EAAA,MAAM,EAAE,OAAO,WAAA,EAAY,GAAI,cAAc,EAAE,UAAA,EAAY,QAAA,EAAU,MAAA,EAAQ,CAAA;AAC7E,EAAA,2BAAQ,UAAA,EAAA,EAAW,SAAA,EAAW,OAAO,eAAA,EAAiB,WAAA,EAAa,SAAQ,MAAA,EAAO,CAAA;AACpF;;;;"}

package/dist/domains/traces/components/span-data-panel-view.cjs.js

@@ -13,18 +13,18 @@ const domains_traces_components_spanPayload_spanPayloadSection = require('./span
 require('../../../code-DhrdtZce.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 require('react');
-require('../../../Button-CVewl8nT.cjs');
+require('../../../Button-C0DBEBcJ.cjs');
 require('../../chat/context/chat-context.cjs.js');
 const domains_traces_components_spanPayload_spanPayloadRegistry = require('./span-payload/span-payload-registry.cjs.js');
 const domains_traces_components_spanSummaryDescription = require('./span-summary-description.cjs.js');
 const domains_traces_components_spanTokenUsage = require('./span-token-usage.cjs.js');
 const domains_traces_components_traceIdButton = require('./trace-id-button.cjs.js');
-const dataKeysAndValues = require('../../../data-keys-and-values-4pYpSbqS.cjs');
-const dataPanel = require('../../../data-panel-CWZJKBeW.cjs');
-const Notice = require('../../../Notice-Cjti0e0j.cjs');
-const tabsRoot = require('../../../tabs-root-C5ABfm1F.cjs');
-const tabsTab = require('../../../tabs-tab-DA466DbX.cjs');
-const tabsContent = require('../../../tabs-content-Bz6CZuv9.cjs');
+const dataKeysAndValues = require('../../../data-keys-and-values-BduKvvC5.cjs');
+const dataPanel = require('../../../data-panel-CM3N_4M7.cjs');
+const Notice = require('../../../Notice-CoFjo8O6.cjs');
+const tabsRoot = require('../../../tabs-root-BiV8irc3.cjs');
+const tabsTab = require('../../../tabs-tab-J91Szy3Q.cjs');
+const tabsContent = require('../../../tabs-content-Cdu6HP8U.cjs');
 
 const BODY_CLASS = "min-h-0 flex-1 overflow-y-auto px-2 py-3";
 function SpanDataPanelView({

package/dist/domains/traces/components/span-data-panel-view.es.js

@@ -9,18 +9,18 @@ import { SpanPayloadSection } from './span-payload/span-payload-section.es.js';
 import '../../../code-D4Vw_fYq.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 import 'react';
-import '../../../Button-cWcBEd-G.js';
+import '../../../Button-C9cvaVFG.js';
 import '../../chat/context/chat-context.es.js';
 import { asCoreSpan } from './span-payload/span-payload-registry.es.js';
 import { SpanSummaryDescription } from './span-summary-description.es.js';
 import { SpanTokenUsage } from './span-token-usage.es.js';
 import { TraceIdButton } from './trace-id-button.es.js';
-import { D as DataKeysAndValues } from '../../../data-keys-and-values-j0NVKPOl.js';
-import { D as DataPanel } from '../../../data-panel-CWjgS1Gh.js';
-import { N as Notice } from '../../../Notice-Ah-84yi6.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-CcEQrwTM.js';
-import { T as Tab } from '../../../tabs-tab-BycF4dvx.js';
-import { T as TabContent } from '../../../tabs-content-CKC4kIpH.js';
+import { D as DataKeysAndValues } from '../../../data-keys-and-values-DhC4U4Yl.js';
+import { D as DataPanel } from '../../../data-panel-D3UfzCoE.js';
+import { N as Notice } from '../../../Notice-DUdQkUqH.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-CJ3GkDzi.js';
+import { T as Tab } from '../../../tabs-tab-CoSCf5Ku.js';
+import { T as TabContent } from '../../../tabs-content-BeFlc4E_.js';
 
 const BODY_CLASS = "min-h-0 flex-1 overflow-y-auto px-2 py-3";
 function SpanDataPanelView({

package/dist/domains/traces/components/span-details-view.cjs.js

@@ -11,7 +11,7 @@ const domains_traces_components_spanPayload_spanErrorRenderer = require('./span-
 const domains_traces_components_spanPayload_spanPayloadSection = require('./span-payload/span-payload-section.cjs.js');
 require('../../../code-DhrdtZce.cjs');
 require('react');
-require('../../../Button-CVewl8nT.cjs');
+require('../../../Button-C0DBEBcJ.cjs');
 require('../../chat/context/chat-context.cjs.js');
 const domains_traces_components_spanPayload_spanPayloadRegistry = require('./span-payload/span-payload-registry.cjs.js');
 const domains_traces_components_spanSummaryDescription = require('./span-summary-description.cjs.js');

package/dist/domains/traces/components/span-details-view.es.js

@@ -7,7 +7,7 @@ import { SpanErrorRenderer } from './span-payload/span-error-renderer.es.js';
 import { SpanPayloadSection } from './span-payload/span-payload-section.es.js';
 import '../../../code-D4Vw_fYq.js';
 import 'react';
-import '../../../Button-cWcBEd-G.js';
+import '../../../Button-C9cvaVFG.js';
 import '../../chat/context/chat-context.es.js';
 import { asCoreSpan } from './span-payload/span-payload-registry.es.js';
 import { SpanSummaryDescription } from './span-summary-description.es.js';

package/dist/domains/traces/components/span-payload/span-error-renderer.cjs.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const observability = require('@mastra/core/observability');
 const domains_traces_components_spanPayload_spanPayloadJson = require('./span-payload-json.cjs.js');
-const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-DnRsP93D.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-70wznWZl.cjs');
 const domains_traces_components_spanPayload_spanPayloadRegistry = require('./span-payload-registry.cjs.js');
-const dataKeysAndValues = require('../../../../data-keys-and-values-4pYpSbqS.cjs');
-const Notice = require('../../../../Notice-Cjti0e0j.cjs');
+const dataKeysAndValues = require('../../../../data-keys-and-values-BduKvvC5.cjs');
+const Notice = require('../../../../Notice-CoFjo8O6.cjs');
 
 function SpanErrorRenderer({ span, className }) {
   const error = observability.describeSpanError(domains_traces_components_spanPayload_spanPayloadRegistry.asCoreSpan(span));

package/dist/domains/traces/components/span-payload/span-error-renderer.es.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { describeSpanError } from '@mastra/core/observability';
 import { SpanPayloadJson } from './span-payload-json.es.js';
-import { c as SpanPayloadCollapsible } from '../../../../span-payload-primitives-sbxk4CHC.js';
+import { c as SpanPayloadCollapsible } from '../../../../span-payload-primitives-BvoMauDb.js';
 import { asCoreSpan } from './span-payload-registry.es.js';
-import { D as DataKeysAndValues } from '../../../../data-keys-and-values-j0NVKPOl.js';
-import { N as Notice } from '../../../../Notice-Ah-84yi6.js';
+import { D as DataKeysAndValues } from '../../../../data-keys-and-values-DhC4U4Yl.js';
+import { N as Notice } from '../../../../Notice-DUdQkUqH.js';
 
 function SpanErrorRenderer({ span, className }) {
   const error = describeSpanError(asCoreSpan(span));

package/dist/domains/traces/components/span-payload/span-input-renderers.cjs.js

@@ -6,10 +6,10 @@ const jsxRuntime = require('react/jsx-runtime');
 const observability = require('@mastra/core/observability');
 const domains_traces_components_spanPayload_spanPayloadJson = require('./span-payload-json.cjs.js');
 const domains_traces_components_spanPayload_spanPayloadMessages = require('./span-payload-messages.cjs.js');
-const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-DnRsP93D.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-70wznWZl.cjs');
 const domains_traces_components_spanPayload_spanPayloadRegistry = require('./span-payload-registry.cjs.js');
-const Card = require('../../../../Card-D0kFp9j9.cjs');
-const dataKeysAndValues = require('../../../../data-keys-and-values-4pYpSbqS.cjs');
+const Card = require('../../../../Card-DwGasv0K.cjs');
+const dataKeysAndValues = require('../../../../data-keys-and-values-BduKvvC5.cjs');
 
 function SpanTextRenderer({ value }) {
   return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_spanPayload_spanPayloadTool.SpanPayloadMarkdown, { children: value });

package/dist/domains/traces/components/span-payload/span-input-renderers.es.js

@@ -2,10 +2,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { describeSpanInput } from '@mastra/core/observability';
 import { SpanPayloadJson } from './span-payload-json.es.js';
 import { SpanPayloadMessages } from './span-payload-messages.es.js';
-import { S as SpanPayloadField, a as SpanPayloadMarkdown } from '../../../../span-payload-primitives-sbxk4CHC.js';
+import { S as SpanPayloadField, a as SpanPayloadMarkdown } from '../../../../span-payload-primitives-BvoMauDb.js';
 import { asCoreSpan, pickRenderer } from './span-payload-registry.es.js';
-import { C as Card, a as CardContent } from '../../../../Card-DEvGFj-Z.js';
-import { D as DataKeysAndValues } from '../../../../data-keys-and-values-j0NVKPOl.js';
+import { C as Card, a as CardContent } from '../../../../Card-B_buJ5yF.js';
+import { D as DataKeysAndValues } from '../../../../data-keys-and-values-DhC4U4Yl.js';
 
 function SpanTextRenderer({ value }) {
   return /* @__PURE__ */ jsx(SpanPayloadMarkdown, { children: value });

package/dist/domains/traces/components/span-payload/span-output-renderers.cjs.js

@@ -6,12 +6,12 @@ const jsxRuntime = require('react/jsx-runtime');
 const observability = require('@mastra/core/observability');
 const domains_traces_components_spanPayload_spanPayloadAttachment = require('./span-payload-attachment.cjs.js');
 const domains_traces_components_spanPayload_spanPayloadJson = require('./span-payload-json.cjs.js');
-const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-DnRsP93D.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-70wznWZl.cjs');
 const domains_traces_components_spanPayload_spanPayloadRegistry = require('./span-payload-registry.cjs.js');
 const domains_chat_messages_reasoning = require('../../../chat/messages/reasoning.cjs.js');
-const Card = require('../../../../Card-D0kFp9j9.cjs');
-const dataKeysAndValues = require('../../../../data-keys-and-values-4pYpSbqS.cjs');
-const Notice = require('../../../../Notice-Cjti0e0j.cjs');
+const Card = require('../../../../Card-DwGasv0K.cjs');
+const dataKeysAndValues = require('../../../../data-keys-and-values-BduKvvC5.cjs');
+const Notice = require('../../../../Notice-CoFjo8O6.cjs');
 
 const hasItems = (value) => Array.isArray(value) && value.length > 0;
 function SpanTextRenderer({ value }) {

package/dist/domains/traces/components/span-payload/span-output-renderers.es.js

@@ -2,12 +2,12 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { describeSpanOutput } from '@mastra/core/observability';
 import { SpanPayloadAttachment } from './span-payload-attachment.es.js';
 import { SpanPayloadJson } from './span-payload-json.es.js';
-import { a as SpanPayloadMarkdown, S as SpanPayloadField, b as SpanPayloadToolCalls, c as SpanPayloadCollapsible } from '../../../../span-payload-primitives-sbxk4CHC.js';
+import { a as SpanPayloadMarkdown, S as SpanPayloadField, b as SpanPayloadToolCalls, c as SpanPayloadCollapsible } from '../../../../span-payload-primitives-BvoMauDb.js';
 import { asCoreSpan, pickRenderer } from './span-payload-registry.es.js';
 import { Reasoning } from '../../../chat/messages/reasoning.es.js';
-import { C as Card, a as CardContent } from '../../../../Card-DEvGFj-Z.js';
-import { D as DataKeysAndValues } from '../../../../data-keys-and-values-j0NVKPOl.js';
-import { N as Notice } from '../../../../Notice-Ah-84yi6.js';
+import { C as Card, a as CardContent } from '../../../../Card-B_buJ5yF.js';
+import { D as DataKeysAndValues } from '../../../../data-keys-and-values-DhC4U4Yl.js';
+import { N as Notice } from '../../../../Notice-DUdQkUqH.js';
 
 const hasItems = (value) => Array.isArray(value) && value.length > 0;
 function SpanTextRenderer({ value }) {

package/dist/domains/traces/components/span-payload/span-payload-messages.cjs.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_spanPayload_spanPayloadAttachment = require('./span-payload-attachment.cjs.js');
 const domains_traces_components_spanPayload_spanPayloadJson = require('./span-payload-json.cjs.js');
-const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-DnRsP93D.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-70wznWZl.cjs');
 const domains_chat_messages_reasoning = require('../../../chat/messages/reasoning.cjs.js');
-const message = require('../../../../message-CszposMZ.cjs');
+const message = require('../../../../message-D9b33Pf_.cjs');
 
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 function MessageText({ text, plain }) {

package/dist/domains/traces/components/span-payload/span-payload-messages.es.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { SpanPayloadAttachment } from './span-payload-attachment.es.js';
 import { SpanPayloadJson } from './span-payload-json.es.js';
-import { d as SpanPayloadLabel, a as SpanPayloadMarkdown, e as SpanPayloadTool } from '../../../../span-payload-primitives-sbxk4CHC.js';
+import { d as SpanPayloadLabel, a as SpanPayloadMarkdown, e as SpanPayloadTool } from '../../../../span-payload-primitives-BvoMauDb.js';
 import { Reasoning } from '../../../chat/messages/reasoning.es.js';
-import { M as Message } from '../../../../message-BrwbcLPi.js';
+import { M as Message } from '../../../../message-Cs8NW-MR.js';
 
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 function MessageText({ text, plain }) {

package/dist/domains/traces/components/span-payload/span-payload-primitives.cjs.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('react/jsx-runtime');
 require('lucide-react');
-const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-DnRsP93D.cjs');
-require('../../../../collapsible-BvrI6XnN.cjs');
-require('../../../../markdown-renderer-D8qYAU7K.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-70wznWZl.cjs');
+require('../../../../collapsible-BFSJouuI.cjs');
+require('../../../../markdown-renderer-C74wABzc.cjs');
 
 
 

package/dist/domains/traces/components/span-payload/span-payload-primitives.es.js

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import 'lucide-react';
-export { c as SpanPayloadCollapsible, S as SpanPayloadField, d as SpanPayloadLabel, a as SpanPayloadMarkdown, b as SpanPayloadToolCalls } from '../../../../span-payload-primitives-sbxk4CHC.js';
-import '../../../../collapsible-B2uUy8w5.js';
-import '../../../../markdown-renderer-B0gTm_Ea.js';
+export { c as SpanPayloadCollapsible, S as SpanPayloadField, d as SpanPayloadLabel, a as SpanPayloadMarkdown, b as SpanPayloadToolCalls } from '../../../../span-payload-primitives-BvoMauDb.js';
+import '../../../../collapsible-DhhP5p1j.js';
+import '../../../../markdown-renderer-DZAcPOxC.js';
 //# sourceMappingURL=span-payload-primitives.es.js.map

package/dist/domains/traces/components/span-payload/span-payload-section.cjs.js

@@ -5,18 +5,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_spanPayload_spanPayloadJson = require('./span-payload-json.cjs.js');
-const Button = require('../../../../Button-CVewl8nT.cjs');
-const buttonsGroup = require('../../../../buttons-group-BiLEV_Ak.cjs');
-const copyButton = require('../../../../copy-button-BbDBpBMl.cjs');
+const Button = require('../../../../Button-C0DBEBcJ.cjs');
+const buttonsGroup = require('../../../../buttons-group-CoZP3lJt.cjs');
+const copyButton = require('../../../../copy-button-C5dMlWsW.cjs');
 const dataPanelSectionHeading = require('../../../../data-panel-section-heading-V86Awzqg.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ViewToggle({ view, onChange }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { "aria-label": "Payload view", "data-slot": "span-payload-view-toggle", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { size: "sm", "aria-label": "Payload view", "data-slot": "span-payload-view-toggle", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Button.Button,
       {
-        size: "sm",
         variant: view === "rich" ? "primary" : "default",
         "aria-pressed": view === "rich",
         onClick: () => onChange("rich"),
@@ -26,7 +25,6 @@ function ViewToggle({ view, onChange }) {
     /* @__PURE__ */ jsxRuntime.jsx(
       Button.Button,
       {
-        size: "sm",
         variant: view === "raw" ? "primary" : "default",
         "aria-pressed": view === "raw",
         onClick: () => onChange("raw"),

package/dist/domains/traces/components/span-payload/span-payload-section.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-payload-section.cjs.js","sources":["../../../../../src/domains/traces/components/span-payload/span-payload-section.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataPanelSectionHeading } from '@/ds/components/DataPanel/data-panel-section-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SpanPayloadView = 'rich' | 'raw';\n\nexport interface SpanPayloadSectionProps {\n  title: string;\n  icon?: ReactNode;\n  /** The payload as stored; shown as JSON in the Raw view. */\n  raw: unknown;\n  /** Whether a dedicated presentation exists rather than a JSON fallback. */\n  hasPreview?: boolean;\n  /**\n   * The human-readable rendering. `null` when the payload has no rich form\n   * (JSON fallback): the section then shows Raw only and hides the toggle.\n   */\n  children: ReactNode;\n  /** `panel` matches `DataPanel.CodeSection`; `details` matches `DataDetailsPanel.CodeSection`. */\n  layout?: 'panel' | 'details';\n  defaultView?: SpanPayloadView;\n  className?: string;\n}\n\nfunction ViewToggle({ view, onChange }: { view: SpanPayloadView; onChange: (view: SpanPayloadView) => void }) {\n  return (\n    <ButtonsGroup aria-label=\"Payload view\" data-slot=\"span-payload-view-toggle\">\n      <Button\n        size=\"sm\"\n        variant={view === 'rich' ? 'primary' : 'default'}\n        aria-pressed={view === 'rich'}\n        onClick={() => onChange('rich')}\n      >\n        Preview\n      </Button>\n      <Button\n        size=\"sm\"\n        variant={view === 'raw' ? 'primary' : 'default'}\n        aria-pressed={view === 'raw'}\n        onClick={() => onChange('raw')}\n      >\n        JSON\n      </Button>\n    </ButtonsGroup>\n  );\n}\n\n/**\n * A span payload section with a Preview / JSON button group. All JSON views share\n * the same syntax highlighting while preserving the stored payload.\n */\nexport function SpanPayloadSection({\n  title,\n  icon,\n  raw,\n  hasPreview = true,\n  children,\n  layout = 'panel',\n  defaultView = 'rich',\n  className,\n}: SpanPayloadSectionProps) {\n  const [view, setView] = useState<SpanPayloadView>(defaultView);\n  if (raw == null) return null;\n\n  const hasRich = hasPreview && children != null;\n  const showJson = !hasRich || view === 'raw';\n\n  return (\n    <div\n      data-slot=\"span-payload-section\"\n      data-view={showJson ? 'raw' : 'rich'}\n      className={cn('flex flex-col gap-2', className)}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <DataPanelSectionHeading icon={icon} className={layout === 'details' ? 'text-meta' : undefined}>\n          {title}\n        </DataPanelSectionHeading>\n        <div className=\"ml-auto flex items-center gap-2\">\n          <CopyButton content={JSON.stringify(raw, null, 2)} size=\"sm\" variant=\"ghost\" />\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n        </div>\n      </div>\n      <div className=\"min-w-0\">{showJson ? <SpanPayloadJson value={raw} /> : children}</div>\n    </div>\n  );\n}\n"],"names":["jsxs","ButtonsGroup","jsx","Button","useState","cn","DataPanelSectionHeading","CopyButton","SpanPayloadJson"],"mappings":";;;;;;;;;;;;;AA6BA,SAAS,UAAA,CAAW,EAAE,IAAA,EAAM,QAAA,EAAS,EAAyE;AAC5G,EAAA,uBACEA,eAAA,CAACC,yBAAA,EAAA,EAAa,YAAA,EAAW,cAAA,EAAe,aAAU,0BAAA,EAChD,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,IAAA;AAAA,QACL,OAAA,EAAS,IAAA,KAAS,MAAA,GAAS,SAAA,GAAY,SAAA;AAAA,QACvC,gBAAc,IAAA,KAAS,MAAA;AAAA,QACvB,OAAA,EAAS,MAAM,QAAA,CAAS,MAAM,CAAA;AAAA,QAC/B,QAAA,EAAA;AAAA;AAAA,KAED;AAAA,oBACAD,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,IAAA;AAAA,QACL,OAAA,EAAS,IAAA,KAAS,KAAA,GAAQ,SAAA,GAAY,SAAA;AAAA,QACtC,gBAAc,IAAA,KAAS,KAAA;AAAA,QACvB,OAAA,EAAS,MAAM,QAAA,CAAS,KAAK,CAAA;AAAA,QAC9B,QAAA,EAAA;AAAA;AAAA;AAED,GAAA,EACF,CAAA;AAEJ;AAMO,SAAS,kBAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,QAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,WAAA,GAAc,MAAA;AAAA,EACd;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAA0B,WAAW,CAAA;AAC7D,EAAA,IAAI,GAAA,IAAO,MAAM,OAAO,IAAA;AAExB,EAAA,MAAM,OAAA,GAAU,cAAc,QAAA,IAAY,IAAA;AAC1C,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,IAAW,IAAA,KAAS,KAAA;AAEtC,EAAA,uBACEJ,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,WAAA,EAAW,WAAW,KAAA,GAAQ,MAAA;AAAA,MAC9B,SAAA,EAAWK,WAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA;AAAA,MAE9C,QAAA,EAAA;AAAA,wBAAAL,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mDAAA,EACb,QAAA,EAAA;AAAA,0BAAAE,cAAA,CAACI,mDAAwB,IAAA,EAAY,SAAA,EAAW,WAAW,SAAA,GAAY,WAAA,GAAc,QAClF,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,0BACAN,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EACb,QAAA,EAAA;AAAA,4BAAAE,cAAA,CAACK,qBAAA,EAAA,EAAW,OAAA,EAAS,IAAA,CAAK,SAAA,CAAU,GAAA,EAAK,IAAA,EAAM,CAAC,CAAA,EAAG,IAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAQ,CAAA;AAAA,YAC5E,OAAA,oBAAWL,cAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,UAAU,OAAA,EAAS;AAAA,WAAA,EACzD;AAAA,SAAA,EACF,CAAA;AAAA,wBACAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,QAAA,kCAAYM,qEAAA,EAAA,EAAgB,KAAA,EAAO,GAAA,EAAK,CAAA,GAAK,QAAA,EAAS;AAAA;AAAA;AAAA,GAClF;AAEJ;;;;"}
+{"version":3,"file":"span-payload-section.cjs.js","sources":["../../../../../src/domains/traces/components/span-payload/span-payload-section.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataPanelSectionHeading } from '@/ds/components/DataPanel/data-panel-section-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SpanPayloadView = 'rich' | 'raw';\n\nexport interface SpanPayloadSectionProps {\n  title: string;\n  icon?: ReactNode;\n  /** The payload as stored; shown as JSON in the Raw view. */\n  raw: unknown;\n  /** Whether a dedicated presentation exists rather than a JSON fallback. */\n  hasPreview?: boolean;\n  /**\n   * The human-readable rendering. `null` when the payload has no rich form\n   * (JSON fallback): the section then shows Raw only and hides the toggle.\n   */\n  children: ReactNode;\n  /** `panel` matches `DataPanel.CodeSection`; `details` matches `DataDetailsPanel.CodeSection`. */\n  layout?: 'panel' | 'details';\n  defaultView?: SpanPayloadView;\n  className?: string;\n}\n\nfunction ViewToggle({ view, onChange }: { view: SpanPayloadView; onChange: (view: SpanPayloadView) => void }) {\n  return (\n    <ButtonsGroup size=\"sm\" aria-label=\"Payload view\" data-slot=\"span-payload-view-toggle\">\n      <Button\n        variant={view === 'rich' ? 'primary' : 'default'}\n        aria-pressed={view === 'rich'}\n        onClick={() => onChange('rich')}\n      >\n        Preview\n      </Button>\n      <Button\n        variant={view === 'raw' ? 'primary' : 'default'}\n        aria-pressed={view === 'raw'}\n        onClick={() => onChange('raw')}\n      >\n        JSON\n      </Button>\n    </ButtonsGroup>\n  );\n}\n\n/**\n * A span payload section with a Preview / JSON button group. All JSON views share\n * the same syntax highlighting while preserving the stored payload.\n */\nexport function SpanPayloadSection({\n  title,\n  icon,\n  raw,\n  hasPreview = true,\n  children,\n  layout = 'panel',\n  defaultView = 'rich',\n  className,\n}: SpanPayloadSectionProps) {\n  const [view, setView] = useState<SpanPayloadView>(defaultView);\n  if (raw == null) return null;\n\n  const hasRich = hasPreview && children != null;\n  const showJson = !hasRich || view === 'raw';\n\n  return (\n    <div\n      data-slot=\"span-payload-section\"\n      data-view={showJson ? 'raw' : 'rich'}\n      className={cn('flex flex-col gap-2', className)}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <DataPanelSectionHeading icon={icon} className={layout === 'details' ? 'text-meta' : undefined}>\n          {title}\n        </DataPanelSectionHeading>\n        <div className=\"ml-auto flex items-center gap-2\">\n          <CopyButton content={JSON.stringify(raw, null, 2)} size=\"sm\" variant=\"ghost\" />\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n        </div>\n      </div>\n      <div className=\"min-w-0\">{showJson ? <SpanPayloadJson value={raw} /> : children}</div>\n    </div>\n  );\n}\n"],"names":["ButtonsGroup","jsx","Button","useState","jsxs","cn","DataPanelSectionHeading","CopyButton","SpanPayloadJson"],"mappings":";;;;;;;;;;;;;AA6BA,SAAS,UAAA,CAAW,EAAE,IAAA,EAAM,QAAA,EAAS,EAAyE;AAC5G,EAAA,uCACGA,yBAAA,EAAA,EAAa,IAAA,EAAK,MAAK,YAAA,EAAW,cAAA,EAAe,aAAU,0BAAA,EAC1D,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,IAAA,KAAS,MAAA,GAAS,SAAA,GAAY,SAAA;AAAA,QACvC,gBAAc,IAAA,KAAS,MAAA;AAAA,QACvB,OAAA,EAAS,MAAM,QAAA,CAAS,MAAM,CAAA;AAAA,QAC/B,QAAA,EAAA;AAAA;AAAA,KAED;AAAA,oBACAD,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,IAAA,KAAS,KAAA,GAAQ,SAAA,GAAY,SAAA;AAAA,QACtC,gBAAc,IAAA,KAAS,KAAA;AAAA,QACvB,OAAA,EAAS,MAAM,QAAA,CAAS,KAAK,CAAA;AAAA,QAC9B,QAAA,EAAA;AAAA;AAAA;AAED,GAAA,EACF,CAAA;AAEJ;AAMO,SAAS,kBAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,QAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,WAAA,GAAc,MAAA;AAAA,EACd;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAA0B,WAAW,CAAA;AAC7D,EAAA,IAAI,GAAA,IAAO,MAAM,OAAO,IAAA;AAExB,EAAA,MAAM,OAAA,GAAU,cAAc,QAAA,IAAY,IAAA;AAC1C,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,IAAW,IAAA,KAAS,KAAA;AAEtC,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,WAAA,EAAW,WAAW,KAAA,GAAQ,MAAA;AAAA,MAC9B,SAAA,EAAWC,WAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA;AAAA,MAE9C,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mDAAA,EACb,QAAA,EAAA;AAAA,0BAAAH,cAAA,CAACK,mDAAwB,IAAA,EAAY,SAAA,EAAW,WAAW,SAAA,GAAY,WAAA,GAAc,QAClF,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,0BACAF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EACb,QAAA,EAAA;AAAA,4BAAAH,cAAA,CAACM,qBAAA,EAAA,EAAW,OAAA,EAAS,IAAA,CAAK,SAAA,CAAU,GAAA,EAAK,IAAA,EAAM,CAAC,CAAA,EAAG,IAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAQ,CAAA;AAAA,YAC5E,OAAA,oBAAWN,cAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,UAAU,OAAA,EAAS;AAAA,WAAA,EACzD;AAAA,SAAA,EACF,CAAA;AAAA,wBACAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,QAAA,kCAAYO,qEAAA,EAAA,EAAgB,KAAA,EAAO,GAAA,EAAK,CAAA,GAAK,QAAA,EAAS;AAAA;AAAA;AAAA,GAClF;AAEJ;;;;"}

package/dist/domains/traces/components/span-payload/span-payload-section.es.js

@@ -1,18 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { SpanPayloadJson } from './span-payload-json.es.js';
-import { B as Button } from '../../../../Button-cWcBEd-G.js';
-import { B as ButtonsGroup } from '../../../../buttons-group-CaA7KAWf.js';
-import { C as CopyButton } from '../../../../copy-button-2cwdZ3dW.js';
+import { B as Button } from '../../../../Button-C9cvaVFG.js';
+import { B as ButtonsGroup } from '../../../../buttons-group-DsZgrZBZ.js';
+import { C as CopyButton } from '../../../../copy-button-C6RswD_D.js';
 import { D as DataPanelSectionHeading } from '../../../../data-panel-section-heading-CXD1skJD.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ViewToggle({ view, onChange }) {
-  return /* @__PURE__ */ jsxs(ButtonsGroup, { "aria-label": "Payload view", "data-slot": "span-payload-view-toggle", children: [
+  return /* @__PURE__ */ jsxs(ButtonsGroup, { size: "sm", "aria-label": "Payload view", "data-slot": "span-payload-view-toggle", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
-        size: "sm",
         variant: view === "rich" ? "primary" : "default",
         "aria-pressed": view === "rich",
         onClick: () => onChange("rich"),
@@ -22,7 +21,6 @@ function ViewToggle({ view, onChange }) {
     /* @__PURE__ */ jsx(
       Button,
       {
-        size: "sm",
         variant: view === "raw" ? "primary" : "default",
         "aria-pressed": view === "raw",
         onClick: () => onChange("raw"),

package/dist/domains/traces/components/span-payload/span-payload-section.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-payload-section.es.js","sources":["../../../../../src/domains/traces/components/span-payload/span-payload-section.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataPanelSectionHeading } from '@/ds/components/DataPanel/data-panel-section-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SpanPayloadView = 'rich' | 'raw';\n\nexport interface SpanPayloadSectionProps {\n  title: string;\n  icon?: ReactNode;\n  /** The payload as stored; shown as JSON in the Raw view. */\n  raw: unknown;\n  /** Whether a dedicated presentation exists rather than a JSON fallback. */\n  hasPreview?: boolean;\n  /**\n   * The human-readable rendering. `null` when the payload has no rich form\n   * (JSON fallback): the section then shows Raw only and hides the toggle.\n   */\n  children: ReactNode;\n  /** `panel` matches `DataPanel.CodeSection`; `details` matches `DataDetailsPanel.CodeSection`. */\n  layout?: 'panel' | 'details';\n  defaultView?: SpanPayloadView;\n  className?: string;\n}\n\nfunction ViewToggle({ view, onChange }: { view: SpanPayloadView; onChange: (view: SpanPayloadView) => void }) {\n  return (\n    <ButtonsGroup aria-label=\"Payload view\" data-slot=\"span-payload-view-toggle\">\n      <Button\n        size=\"sm\"\n        variant={view === 'rich' ? 'primary' : 'default'}\n        aria-pressed={view === 'rich'}\n        onClick={() => onChange('rich')}\n      >\n        Preview\n      </Button>\n      <Button\n        size=\"sm\"\n        variant={view === 'raw' ? 'primary' : 'default'}\n        aria-pressed={view === 'raw'}\n        onClick={() => onChange('raw')}\n      >\n        JSON\n      </Button>\n    </ButtonsGroup>\n  );\n}\n\n/**\n * A span payload section with a Preview / JSON button group. All JSON views share\n * the same syntax highlighting while preserving the stored payload.\n */\nexport function SpanPayloadSection({\n  title,\n  icon,\n  raw,\n  hasPreview = true,\n  children,\n  layout = 'panel',\n  defaultView = 'rich',\n  className,\n}: SpanPayloadSectionProps) {\n  const [view, setView] = useState<SpanPayloadView>(defaultView);\n  if (raw == null) return null;\n\n  const hasRich = hasPreview && children != null;\n  const showJson = !hasRich || view === 'raw';\n\n  return (\n    <div\n      data-slot=\"span-payload-section\"\n      data-view={showJson ? 'raw' : 'rich'}\n      className={cn('flex flex-col gap-2', className)}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <DataPanelSectionHeading icon={icon} className={layout === 'details' ? 'text-meta' : undefined}>\n          {title}\n        </DataPanelSectionHeading>\n        <div className=\"ml-auto flex items-center gap-2\">\n          <CopyButton content={JSON.stringify(raw, null, 2)} size=\"sm\" variant=\"ghost\" />\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n        </div>\n      </div>\n      <div className=\"min-w-0\">{showJson ? <SpanPayloadJson value={raw} /> : children}</div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AA6BA,SAAS,UAAA,CAAW,EAAE,IAAA,EAAM,QAAA,EAAS,EAAyE;AAC5G,EAAA,uBACE,IAAA,CAAC,YAAA,EAAA,EAAa,YAAA,EAAW,cAAA,EAAe,aAAU,0BAAA,EAChD,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,IAAA;AAAA,QACL,OAAA,EAAS,IAAA,KAAS,MAAA,GAAS,SAAA,GAAY,SAAA;AAAA,QACvC,gBAAc,IAAA,KAAS,MAAA;AAAA,QACvB,OAAA,EAAS,MAAM,QAAA,CAAS,MAAM,CAAA;AAAA,QAC/B,QAAA,EAAA;AAAA;AAAA,KAED;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,IAAA;AAAA,QACL,OAAA,EAAS,IAAA,KAAS,KAAA,GAAQ,SAAA,GAAY,SAAA;AAAA,QACtC,gBAAc,IAAA,KAAS,KAAA;AAAA,QACvB,OAAA,EAAS,MAAM,QAAA,CAAS,KAAK,CAAA;AAAA,QAC9B,QAAA,EAAA;AAAA;AAAA;AAED,GAAA,EACF,CAAA;AAEJ;AAMO,SAAS,kBAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,QAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,WAAA,GAAc,MAAA;AAAA,EACd;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA0B,WAAW,CAAA;AAC7D,EAAA,IAAI,GAAA,IAAO,MAAM,OAAO,IAAA;AAExB,EAAA,MAAM,OAAA,GAAU,cAAc,QAAA,IAAY,IAAA;AAC1C,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,IAAW,IAAA,KAAS,KAAA;AAEtC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,WAAA,EAAW,WAAW,KAAA,GAAQ,MAAA;AAAA,MAC9B,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA;AAAA,MAE9C,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mDAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,2BAAwB,IAAA,EAAY,SAAA,EAAW,WAAW,SAAA,GAAY,WAAA,GAAc,QAClF,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAS,IAAA,CAAK,SAAA,CAAU,GAAA,EAAK,IAAA,EAAM,CAAC,CAAA,EAAG,IAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAQ,CAAA;AAAA,YAC5E,OAAA,oBAAW,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,UAAU,OAAA,EAAS;AAAA,WAAA,EACzD;AAAA,SAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,QAAA,uBAAY,eAAA,EAAA,EAAgB,KAAA,EAAO,GAAA,EAAK,CAAA,GAAK,QAAA,EAAS;AAAA;AAAA;AAAA,GAClF;AAEJ;;;;"}
+{"version":3,"file":"span-payload-section.es.js","sources":["../../../../../src/domains/traces/components/span-payload/span-payload-section.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { SpanPayloadJson } from './span-payload-json';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataPanelSectionHeading } from '@/ds/components/DataPanel/data-panel-section-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SpanPayloadView = 'rich' | 'raw';\n\nexport interface SpanPayloadSectionProps {\n  title: string;\n  icon?: ReactNode;\n  /** The payload as stored; shown as JSON in the Raw view. */\n  raw: unknown;\n  /** Whether a dedicated presentation exists rather than a JSON fallback. */\n  hasPreview?: boolean;\n  /**\n   * The human-readable rendering. `null` when the payload has no rich form\n   * (JSON fallback): the section then shows Raw only and hides the toggle.\n   */\n  children: ReactNode;\n  /** `panel` matches `DataPanel.CodeSection`; `details` matches `DataDetailsPanel.CodeSection`. */\n  layout?: 'panel' | 'details';\n  defaultView?: SpanPayloadView;\n  className?: string;\n}\n\nfunction ViewToggle({ view, onChange }: { view: SpanPayloadView; onChange: (view: SpanPayloadView) => void }) {\n  return (\n    <ButtonsGroup size=\"sm\" aria-label=\"Payload view\" data-slot=\"span-payload-view-toggle\">\n      <Button\n        variant={view === 'rich' ? 'primary' : 'default'}\n        aria-pressed={view === 'rich'}\n        onClick={() => onChange('rich')}\n      >\n        Preview\n      </Button>\n      <Button\n        variant={view === 'raw' ? 'primary' : 'default'}\n        aria-pressed={view === 'raw'}\n        onClick={() => onChange('raw')}\n      >\n        JSON\n      </Button>\n    </ButtonsGroup>\n  );\n}\n\n/**\n * A span payload section with a Preview / JSON button group. All JSON views share\n * the same syntax highlighting while preserving the stored payload.\n */\nexport function SpanPayloadSection({\n  title,\n  icon,\n  raw,\n  hasPreview = true,\n  children,\n  layout = 'panel',\n  defaultView = 'rich',\n  className,\n}: SpanPayloadSectionProps) {\n  const [view, setView] = useState<SpanPayloadView>(defaultView);\n  if (raw == null) return null;\n\n  const hasRich = hasPreview && children != null;\n  const showJson = !hasRich || view === 'raw';\n\n  return (\n    <div\n      data-slot=\"span-payload-section\"\n      data-view={showJson ? 'raw' : 'rich'}\n      className={cn('flex flex-col gap-2', className)}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <DataPanelSectionHeading icon={icon} className={layout === 'details' ? 'text-meta' : undefined}>\n          {title}\n        </DataPanelSectionHeading>\n        <div className=\"ml-auto flex items-center gap-2\">\n          <CopyButton content={JSON.stringify(raw, null, 2)} size=\"sm\" variant=\"ghost\" />\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n        </div>\n      </div>\n      <div className=\"min-w-0\">{showJson ? <SpanPayloadJson value={raw} /> : children}</div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AA6BA,SAAS,UAAA,CAAW,EAAE,IAAA,EAAM,QAAA,EAAS,EAAyE;AAC5G,EAAA,4BACG,YAAA,EAAA,EAAa,IAAA,EAAK,MAAK,YAAA,EAAW,cAAA,EAAe,aAAU,0BAAA,EAC1D,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,IAAA,KAAS,MAAA,GAAS,SAAA,GAAY,SAAA;AAAA,QACvC,gBAAc,IAAA,KAAS,MAAA;AAAA,QACvB,OAAA,EAAS,MAAM,QAAA,CAAS,MAAM,CAAA;AAAA,QAC/B,QAAA,EAAA;AAAA;AAAA,KAED;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,IAAA,KAAS,KAAA,GAAQ,SAAA,GAAY,SAAA;AAAA,QACtC,gBAAc,IAAA,KAAS,KAAA;AAAA,QACvB,OAAA,EAAS,MAAM,QAAA,CAAS,KAAK,CAAA;AAAA,QAC9B,QAAA,EAAA;AAAA;AAAA;AAED,GAAA,EACF,CAAA;AAEJ;AAMO,SAAS,kBAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,QAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,WAAA,GAAc,MAAA;AAAA,EACd;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA0B,WAAW,CAAA;AAC7D,EAAA,IAAI,GAAA,IAAO,MAAM,OAAO,IAAA;AAExB,EAAA,MAAM,OAAA,GAAU,cAAc,QAAA,IAAY,IAAA;AAC1C,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,IAAW,IAAA,KAAS,KAAA;AAEtC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,WAAA,EAAW,WAAW,KAAA,GAAQ,MAAA;AAAA,MAC9B,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA;AAAA,MAE9C,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mDAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,2BAAwB,IAAA,EAAY,SAAA,EAAW,WAAW,SAAA,GAAY,WAAA,GAAc,QAClF,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAS,IAAA,CAAK,SAAA,CAAU,GAAA,EAAK,IAAA,EAAM,CAAC,CAAA,EAAG,IAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAQ,CAAA;AAAA,YAC5E,OAAA,oBAAW,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,UAAU,OAAA,EAAS;AAAA,WAAA,EACzD;AAAA,SAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,QAAA,uBAAY,eAAA,EAAA,EAAgB,KAAA,EAAO,GAAA,EAAK,CAAA,GAAK,QAAA,EAAS;AAAA;AAAA;AAAA,GAClF;AAEJ;;;;"}

package/dist/domains/traces/components/span-payload/span-payload-tool.cjs.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('react/jsx-runtime');
 require('./span-payload-json.cjs.js');
-const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-DnRsP93D.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-70wznWZl.cjs');
 require('../../../chat/components/badge-wrapper.cjs.js');
-require('../../../../tool-call-CMRvRE-v.cjs');
+require('../../../../tool-call-CNBGnCmO.cjs');
 require('../../../../tool-presentation-BGWx2mEc.cjs');
 
 

package/dist/domains/traces/components/span-payload/span-payload-tool.es.js

@@ -1,7 +1,7 @@
 import 'react/jsx-runtime';
 import './span-payload-json.es.js';
-export { e as SpanPayloadTool } from '../../../../span-payload-primitives-sbxk4CHC.js';
+export { e as SpanPayloadTool } from '../../../../span-payload-primitives-BvoMauDb.js';
 import '../../../chat/components/badge-wrapper.es.js';
-import '../../../../tool-call-K147tCug.js';
+import '../../../../tool-call-BjAGFbH-.js';
 import '../../../../tool-presentation-D-smNbXC.js';
 //# sourceMappingURL=span-payload-tool.es.js.map

package/dist/domains/traces/components/span-summary-description.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
-const dataPanel = require('../../../data-panel-CWZJKBeW.cjs');
+const dataPanel = require('../../../data-panel-CM3N_4M7.cjs');
 const utils_truncateString = require('../../../utils/truncate-string.cjs.js');
 
 function SpanSummaryDescription({ span }) {

package/dist/domains/traces/components/span-summary-description.es.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CalendarClockIcon, TimerIcon, HashIcon } from 'lucide-react';
 import { formatSpanTimestamp, formatSpanTimestampExact, formatSpanDurationSeconds } from '../utils/span-utils.es.js';
-import { D as DataPanel } from '../../../data-panel-CWjgS1Gh.js';
+import { D as DataPanel } from '../../../data-panel-D3UfzCoE.js';
 import { truncateString } from '../../../utils/truncate-string.es.js';
 
 function SpanSummaryDescription({ span }) {

package/dist/domains/traces/components/span-timeline-row.cjs.js

@@ -8,7 +8,7 @@ const React = require('react');
 const domains_traces_utils_spanTiming = require('../utils/span-timing.cjs.js');
 const domains_traces_components_spanTimingHoverCard = require('./span-timing-hover-card.cjs.js');
 const domains_traces_components_timelineStructureSign = require('./timeline-structure-sign.cjs.js');
-const hoverCard = require('../../../hover-card-DdHnkGcs.cjs');
+const hoverCard = require('../../../hover-card-DVfZ2INZ.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function formatDuration(ms) {
@@ -48,7 +48,7 @@ function SpanTimelineRow({ ctx }) {
       className: utils_cn.cn(
         "col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle",
         {
-          "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
+          "opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60": isFaded,
           "bg-fill-hover": isSelected
         }
       ),
@@ -112,7 +112,7 @@ function SpanTimelineRow({ ctx }) {
               render: /* @__PURE__ */ jsxRuntime.jsx("div", {}),
               className: "grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-fill-subtle relative h-4 w-full rounded-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-4 w-full rounded-sm bg-fill-subtle", children: /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     "data-testid": "span-timeline-bar",
@@ -124,7 +124,7 @@ function SpanTimelineRow({ ctx }) {
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-meta text-muted-foreground w-12 text-right tabular-nums", children: formatDuration(span.latency) })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 text-right text-meta text-muted-foreground tabular-nums", children: formatDuration(span.latency) })
               ]
             }
           ),

package/dist/domains/traces/components/span-timeline-row.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"span-timeline-row.cjs.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\n\nexport type SpanTimelineRowProps = {\n  ctx: SpanRowContext;\n};\n\nfunction formatDuration(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/**\n * One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n */\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n  const {\n    span,\n    spanUI,\n    depth,\n    isRootSpan,\n    isLastChild,\n    isExpanded,\n    isSelected,\n    isFaded,\n    isRevealed,\n    overallLatency,\n    overallStartTime,\n    onSpanClick,\n    expansion,\n  } = ctx;\n  const rowRef = useRef<HTMLDivElement>(null);\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n  useEffect(() => {\n    if (!shouldScrollIntoView) return;\n    rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n  const toggleLabel = isExpanded\n    ? `Collapse children (${expansion.numOfChildren})`\n    : `Expand children (${expansion.numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn(\n        'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n        {\n          'opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60': isFaded,\n          'bg-fill-hover': isSelected,\n        },\n      )}\n    >\n      <div className=\"flex min-w-0 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n        {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n        <button\n          type=\"button\"\n          className={cn(\n            'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-caption text-foreground',\n            'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n          )}\n        >\n          {spanUI?.color && (\n            <span\n              aria-hidden\n              title={spanUI.label}\n              className=\"inline-block size-2 shrink-0 rounded-full\"\n              style={{ backgroundColor: spanUI.color }}\n            />\n          )}\n          <span\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </span>\n        </button>\n\n        {/* Slot is always present so names stay aligned whether or not the span has children. */}\n        <div className=\"flex w-7 shrink-0 items-center justify-center\">\n          {expansion.hasChildren && (\n            <button\n              type=\"button\"\n              onClick={e => {\n                e.stopPropagation();\n                expansion.toggleChildren();\n              }}\n              aria-label={toggleLabel}\n              aria-expanded={isExpanded}\n              className={cn(\n                'flex size-5 cursor-pointer items-center justify-center rounded-md',\n                'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n                'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1',\n              )}\n            >\n              {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n            </button>\n          )}\n        </div>\n      </div>\n\n      <HoverCard>\n        <HoverCardTrigger\n          render={<div />}\n          className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n        >\n          <div className=\"bg-fill-subtle relative h-4 w-full rounded-sm\">\n            <div\n              data-testid=\"span-timeline-bar\"\n              className=\"absolute inset-y-0 rounded-sm\"\n              style={{\n                left: `${leftPercent}%`,\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                backgroundColor: spanUI?.color,\n              }}\n            />\n          </div>\n          <div className=\"text-meta text-muted-foreground w-12 text-right tabular-nums\">\n            {formatDuration(span.latency)}\n          </div>\n        </HoverCardTrigger>\n        <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n      </HoverCard>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","getSpanTimingLayout","jsxs","cn","jsx","TimelineStructureSign","ChevronDownIcon","ChevronRightIcon","HoverCard","HoverCardTrigger","SpanTimingHoverCard"],"mappings":"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"}
+{"version":3,"file":"span-timeline-row.cjs.js","sources":["../../../../src/domains/traces/components/span-timeline-row.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\nimport { getSpanTimingLayout } from '../utils/span-timing';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanTimingHoverCard } from './span-timing-hover-card';\nimport { TimelineStructureSign } from './timeline-structure-sign';\nimport { HoverCard, HoverCardTrigger } from '@/ds/components/HoverCard';\nimport { cn } from '@/lib/utils';\n\nexport type SpanTimelineRowProps = {\n  ctx: SpanRowContext;\n};\n\nfunction formatDuration(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/**\n * One row of `TraceSpanTimeline`: compact single-line name cell plus a bar on the\n * shared trace time axis. The row spans both grid columns (subgrid) so hover and\n * selection cover the name and the bar together.\n */\nexport function SpanTimelineRow({ ctx }: SpanTimelineRowProps) {\n  const {\n    span,\n    spanUI,\n    depth,\n    isRootSpan,\n    isLastChild,\n    isExpanded,\n    isSelected,\n    isFaded,\n    isRevealed,\n    overallLatency,\n    overallStartTime,\n    onSpanClick,\n    expansion,\n  } = ctx;\n  const rowRef = useRef<HTMLDivElement>(null);\n  const shouldScrollIntoView = isSelected || isRevealed;\n\n  // Nested rows mount late, once expansion opens, so scroll on mount as well as on change.\n  useEffect(() => {\n    if (!shouldScrollIntoView) return;\n    rowRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n  }, [shouldScrollIntoView]);\n\n  const { startShiftMs, leftPercent, widthPercent } = getSpanTimingLayout(span, overallLatency, overallStartTime);\n  const toggleLabel = isExpanded\n    ? `Collapse children (${expansion.numOfChildren})`\n    : `Expand children (${expansion.numOfChildren})`;\n\n  return (\n    <div\n      ref={rowRef}\n      aria-label={`View details for span ${span.name}`}\n      aria-selected={isSelected}\n      // The whole row selects the span; the name button is the keyboard target and its click bubbles here.\n      onClick={() => onSpanClick?.(span.id)}\n      className={cn(\n        'col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle',\n        {\n          'opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60': isFaded,\n          'bg-fill-hover': isSelected,\n        },\n      )}\n    >\n      <div className=\"flex min-w-0 items-stretch\" style={{ paddingLeft: `${depth}rem` }}>\n        {!isRootSpan && <TimelineStructureSign isLastChild={isLastChild} />}\n\n        <button\n          type=\"button\"\n          className={cn(\n            'flex min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md px-2 text-left text-caption text-foreground',\n            'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:ring-inset',\n          )}\n        >\n          {spanUI?.color && (\n            <span\n              aria-hidden\n              title={spanUI.label}\n              className=\"inline-block size-2 shrink-0 rounded-full\"\n              style={{ backgroundColor: spanUI.color }}\n            />\n          )}\n          <span\n            data-highlight={span.matchedInPayloadOnly ? undefined : ''}\n            data-highlight-indirect={span.matchedInPayloadOnly ? '' : undefined}\n            title={span.matchedInPayloadOnly ? 'Matches your search in this span’s details' : undefined}\n            className=\"min-w-0 truncate\"\n          >\n            {span.name}\n          </span>\n        </button>\n\n        {/* Slot is always present so names stay aligned whether or not the span has children. */}\n        <div className=\"flex w-7 shrink-0 items-center justify-center\">\n          {expansion.hasChildren && (\n            <button\n              type=\"button\"\n              onClick={e => {\n                e.stopPropagation();\n                expansion.toggleChildren();\n              }}\n              aria-label={toggleLabel}\n              aria-expanded={isExpanded}\n              className={cn(\n                'flex size-5 cursor-pointer items-center justify-center rounded-md',\n                'hover:bg-fill [&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:opacity-50',\n                'focus:outline-none focus-visible:ring-1 focus-visible:ring-accent1',\n              )}\n            >\n              {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}\n            </button>\n          )}\n        </div>\n      </div>\n\n      <HoverCard>\n        <HoverCardTrigger\n          render={<div />}\n          className=\"grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2\"\n        >\n          <div className=\"relative h-4 w-full rounded-sm bg-fill-subtle\">\n            <div\n              data-testid=\"span-timeline-bar\"\n              className=\"absolute inset-y-0 rounded-sm\"\n              style={{\n                left: `${leftPercent}%`,\n                width: widthPercent ? `${widthPercent}%` : '2px',\n                backgroundColor: spanUI?.color,\n              }}\n            />\n          </div>\n          <div className=\"w-12 text-right text-meta text-muted-foreground tabular-nums\">\n            {formatDuration(span.latency)}\n          </div>\n        </HoverCardTrigger>\n        <SpanTimingHoverCard span={span} startShiftMs={startShiftMs} />\n      </HoverCard>\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","getSpanTimingLayout","jsxs","cn","jsx","TimelineStructureSign","ChevronDownIcon","ChevronRightIcon","HoverCard","HoverCardTrigger","SpanTimingHoverCard"],"mappings":"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"}

package/dist/domains/traces/components/span-timeline-row.es.js

@@ -4,7 +4,7 @@ import { useRef, useEffect } from 'react';
 import { getSpanTimingLayout } from '../utils/span-timing.es.js';
 import { SpanTimingHoverCard } from './span-timing-hover-card.es.js';
 import { TimelineStructureSign } from './timeline-structure-sign.es.js';
-import { H as HoverCard, b as HoverCardTrigger } from '../../../hover-card-Ch5smNcf.js';
+import { H as HoverCard, b as HoverCardTrigger } from '../../../hover-card-B1-n3amu.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function formatDuration(ms) {
@@ -44,7 +44,7 @@ function SpanTimelineRow({ ctx }) {
       className: cn(
         "col-span-2 grid h-7 cursor-pointer grid-cols-subgrid items-stretch rounded-md opacity-80 hover:bg-fill-subtle",
         {
-          "opacity-40 [&:hover]:opacity-70 dark:opacity-30 dark:[&:hover]:opacity-60": isFaded,
+          "opacity-40 dark:opacity-30 [&:hover]:opacity-70 dark:[&:hover]:opacity-60": isFaded,
           "bg-fill-hover": isSelected
         }
       ),
@@ -108,7 +108,7 @@ function SpanTimelineRow({ ctx }) {
               render: /* @__PURE__ */ jsx("div", {}),
               className: "grid min-w-0 cursor-help grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2",
               children: [
-                /* @__PURE__ */ jsx("div", { className: "bg-fill-subtle relative h-4 w-full rounded-sm", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: "relative h-4 w-full rounded-sm bg-fill-subtle", children: /* @__PURE__ */ jsx(
                   "div",
                   {
                     "data-testid": "span-timeline-bar",
@@ -120,7 +120,7 @@ function SpanTimelineRow({ ctx }) {
                     }
                   }
                 ) }),
-                /* @__PURE__ */ jsx("div", { className: "text-meta text-muted-foreground w-12 text-right tabular-nums", children: formatDuration(span.latency) })
+                /* @__PURE__ */ jsx("div", { className: "w-12 text-right text-meta text-muted-foreground tabular-nums", children: formatDuration(span.latency) })
               ]
             }
           ),