@mastra/playground-ui 60.2.0 → 61.0.0-alpha.1

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 { Maximize2, Minimize2 } from 'lucide-react';\nimport { 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 { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\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  const box = useCollapsibleBox();\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          {(box.isClipped || box.isExpanded) && (\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              icon={box.isExpanded ? <Minimize2 /> : <Maximize2 />}\n              onClick={box.toggleExpanded}\n            >\n              {box.isExpanded ? 'Collapse' : 'Expand'}\n            </Button>\n          )}\n          <CopyButton content={JSON.stringify(raw, null, 2)} size=\"sm\" variant=\"ghost\" />\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n        </div>\n      </div>\n      <CollapsibleBox state={box}>{showJson ? <SpanPayloadJson value={raw} /> : children}</CollapsibleBox>\n    </div>\n  );\n}\n"],"names":["ButtonsGroup","jsx","Button","useState","useCollapsibleBox","jsxs","cn","DataPanelSectionHeading","Minimize2","Maximize2","CopyButton","CollapsibleBox","SpanPayloadJson"],"mappings":"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"}
+{"version":3,"file":"span-payload-section.cjs.js","sources":["../../../../../src/domains/traces/components/span-payload/span-payload-section.tsx"],"sourcesContent":["import { Maximize2, Minimize2 } from 'lucide-react';\nimport { 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 { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\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  const box = useCollapsibleBox();\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          {(box.isClipped || box.isExpanded) && (\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              icon={box.isExpanded ? <Minimize2 /> : <Maximize2 />}\n              onClick={box.toggleExpanded}\n            >\n              {box.isExpanded ? 'Collapse' : 'Expand'}\n            </Button>\n          )}\n          <CopyButton content={JSON.stringify(raw, null, 2)} size=\"sm\" variant=\"ghost\" />\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n        </div>\n      </div>\n      <CollapsibleBox state={box}>{showJson ? <SpanPayloadJson value={raw} /> : children}</CollapsibleBox>\n    </div>\n  );\n}\n"],"names":["ButtonsGroup","jsx","Button","useState","useCollapsibleBox","jsxs","cn","DataPanelSectionHeading","Minimize2","Maximize2","CopyButton","CollapsibleBox","SpanPayloadJson"],"mappings":"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"}

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

@@ -4,7 +4,8 @@ import { useState } from 'react';
 import { SpanPayloadJson } from './span-payload-json.es.js';
 import { B as Button } from '../../../../Button-D43ghVKt.js';
 import { B as ButtonsGroup } from '../../../../buttons-group-DsZgrZBZ.js';
-import { u as useCollapsibleBox, C as CollapsibleBox } from '../../../../use-collapsible-box-CCvsF_a9.js';
+import { C as CollapsibleBox } from '../../../../collapsible-box-DW-y0Oi1.js';
+import { u as useCollapsibleBox } from '../../../../use-collapsible-box-B0t2_SvP.js';
 import { C as CopyButton } from '../../../../copy-button-DH8xtrWz.js';
 import { D as DataPanelSectionHeading } from '../../../../data-panel-section-heading-CXD1skJD.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';

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 { Maximize2, Minimize2 } from 'lucide-react';\nimport { 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 { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\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  const box = useCollapsibleBox();\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          {(box.isClipped || box.isExpanded) && (\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              icon={box.isExpanded ? <Minimize2 /> : <Maximize2 />}\n              onClick={box.toggleExpanded}\n            >\n              {box.isExpanded ? 'Collapse' : 'Expand'}\n            </Button>\n          )}\n          <CopyButton content={JSON.stringify(raw, null, 2)} size=\"sm\" variant=\"ghost\" />\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n        </div>\n      </div>\n      <CollapsibleBox state={box}>{showJson ? <SpanPayloadJson value={raw} /> : children}</CollapsibleBox>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"span-payload-section.es.js","sources":["../../../../../src/domains/traces/components/span-payload/span-payload-section.tsx"],"sourcesContent":["import { Maximize2, Minimize2 } from 'lucide-react';\nimport { 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 { CollapsibleBox, useCollapsibleBox } from '@/ds/components/CollapsibleBox';\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  const box = useCollapsibleBox();\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          {(box.isClipped || box.isExpanded) && (\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              icon={box.isExpanded ? <Minimize2 /> : <Maximize2 />}\n              onClick={box.toggleExpanded}\n            >\n              {box.isExpanded ? 'Collapse' : 'Expand'}\n            </Button>\n          )}\n          <CopyButton content={JSON.stringify(raw, null, 2)} size=\"sm\" variant=\"ghost\" />\n          {hasRich && <ViewToggle view={view} onChange={setView} />}\n        </div>\n      </div>\n      <CollapsibleBox state={box}>{showJson ? <SpanPayloadJson value={raw} /> : children}</CollapsibleBox>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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-SkL3U9hR.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-DrKJXIc3.cjs');
 require('../../../chat/components/badge-wrapper.cjs.js');
-require('../../../../activity-CbQG59Oc.cjs');
+require('../../../../activity-ClKZR5_o.cjs');
 require('../../../../tool-presentation-WLS6d1ws.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-CGamdu2t.js';
+export { e as SpanPayloadTool } from '../../../../span-payload-primitives-188dDV5s.js';
 import '../../../chat/components/badge-wrapper.es.js';
-import '../../../../activity-BoXbE4Kz.js';
+import '../../../../activity-D0SefV4r.js';
 import '../../../../tool-presentation-BXAo24Ir.js';
 //# sourceMappingURL=span-payload-tool.es.js.map

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

@@ -6,12 +6,12 @@ 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-SkL3U9hR.cjs');
+const domains_traces_components_spanPayload_spanPayloadTool = require('../../../../span-payload-primitives-DrKJXIc3.cjs');
 const domains_traces_components_spanPayload_spanPayloadRegistry = require('./span-payload-registry.cjs.js');
 const Card = require('../../../../Card-BQsKHkyB.cjs');
 const dataKeysAndValues = require('../../../../data-keys-and-values-DnpdW8zx.cjs');
-const Notice = require('../../../../Notice-C4Tgmtgb.cjs');
-const Txt = require('../../../../Txt-DPmEpNbp.cjs');
+const Notice = require('../../../../Notice-D4zc_oTj.cjs');
+const Txt = require('../../../../Txt-DNnvlrBo.cjs');
 const utils_duration = require('../../../../utils/duration.cjs.js');
 
 const MUTATION_LABELS = {

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

@@ -2,12 +2,12 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { describeProcessorPipeline } from '@mastra/core/observability';
 import { SpanPayloadJson } from './span-payload-json.es.js';
 import { SpanPayloadMessages } from './span-payload-messages.es.js';
-import { c as SpanPayloadCollapsible, S as SpanPayloadField } from '../../../../span-payload-primitives-CGamdu2t.js';
+import { c as SpanPayloadCollapsible, S as SpanPayloadField } from '../../../../span-payload-primitives-188dDV5s.js';
 import { asCoreSpan } from './span-payload-registry.es.js';
 import { C as Card, a as CardContent } from '../../../../Card-DVy0QS4m.js';
 import { D as DataKeysAndValues } from '../../../../data-keys-and-values-DiRlIt-N.js';
-import { N as Notice } from '../../../../Notice-B8RIClJD.js';
-import { T as Txt } from '../../../../Txt-BP1SRHmL.js';
+import { N as Notice } from '../../../../Notice-D4gMAkVI.js';
+import { T as Txt } from '../../../../Txt-C3cYJgKU.js';
 import { formatDuration } from '../../../../utils/duration.es.js';
 
 const MUTATION_LABELS = {

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-o-QLWuFV.cjs');
+const dataPanel = require('../../../data-panel-YCvno_Di.cjs');
 const utils_truncateString = require('../../../utils/truncate-string.cjs.js');
 const utils_dateFormat = require('../../../utils/date-format.cjs.js');
 const utils_duration = require('../../../utils/duration.cjs.js');

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 { getSpanDurationMs } from '../utils/span-utils.es.js';
-import { D as DataPanel } from '../../../data-panel-CbomKGJt.js';
+import { D as DataPanel } from '../../../data-panel-CKvpHRUM.js';
 import { truncateString } from '../../../utils/truncate-string.es.js';
 import { formatDate, formatTimestampPrecise } from '../../../utils/date-format.es.js';
 import { formatDurationPrecise } from '../../../utils/duration.es.js';

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

@@ -9,7 +9,7 @@ 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-DVfZ2INZ.cjs');
-const Txt = require('../../../Txt-DPmEpNbp.cjs');
+const Txt = require('../../../Txt-DNnvlrBo.cjs');
 const primitives_transitions = require('../../../primitives/transitions.cjs.js');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 const utils_duration = require('../../../utils/duration.cjs.js');

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

@@ -5,7 +5,7 @@ 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-B1-n3amu.js';
-import { T as Txt } from '../../../Txt-BP1SRHmL.js';
+import { T as Txt } from '../../../Txt-C3cYJgKU.js';
 import { focusRingInset, focusRing } from '../../../primitives/transitions.es.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 import { formatDurationPrecise } from '../../../utils/duration.es.js';

package/dist/domains/traces/components/span-token-usage.cjs.js

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_spanTokenUsage_utils = require('./span-token-usage.utils.cjs.js');
 const dataKeysAndValues = require('../../../data-keys-and-values-DnpdW8zx.cjs');
-const Txt = require('../../../Txt-DPmEpNbp.cjs');
+const Txt = require('../../../Txt-DNnvlrBo.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 const detailRows = [

package/dist/domains/traces/components/span-token-usage.es.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Fragment } from 'react';
 import { getTokenUsageView } from './span-token-usage.utils.es.js';
 import { D as DataKeysAndValues } from '../../../data-keys-and-values-DiRlIt-N.js';
-import { T as Txt } from '../../../Txt-BP1SRHmL.js';
+import { T as Txt } from '../../../Txt-C3cYJgKU.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
 const detailRows = [

package/dist/domains/traces/components/span-type-legend.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_shared = require('./shared.cjs.js');
-const Badge = require('../../../Badge-D3EctKQo.cjs');
+const Badge = require('../../../Badge-DB59RxT5.cjs');
 
 function useUsedSpanTypes(spans) {
   return React.useMemo(() => {

package/dist/domains/traces/components/span-type-legend.es.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { getSpanTypeUi, spanTypePrefixes } from './shared.es.js';
-import { B as Badge } from '../../../Badge-DmOqFpXW.js';
+import { B as Badge } from '../../../Badge-DId-8rYY.js';
 
 function useUsedSpanTypes(spans) {
   return useMemo(() => {

package/dist/domains/traces/components/thread-trace/thread-trace-details.cjs.js

@@ -4,17 +4,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
-const dataPanel = require('../../../../data-panel-o-QLWuFV.cjs');
+const Card = require('../../../../Card-BQsKHkyB.cjs');
+const dataPanel = require('../../../../data-panel-YCvno_Di.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceDetails({ className, children, ...props }) {
   const { isExpanded } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    Card.Card,
     {
+      elevation: "raised",
       "data-slot": "thread-trace-details",
       className: utils_cn.cn(
-        "min-w-0 overflow-hidden",
+        "mx-4 min-w-0 overflow-hidden",
         // While collapsed the messages column alone sets the row height: `h-0` keeps this
         // cell out of the grid's row sizing (so measurement rounding can't nudge the row by
         // a pixel) and `min-h-full` stretches it back to the row afterwards.

package/dist/domains/traces/components/thread-trace/thread-trace-details.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-details.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. The row draws the borders. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <div\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-b border-border\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["useThreadTraceRow","jsx","cn","DataPanel"],"mappings":";;;;;;;;;AASO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIA,6EAAA,EAAkB;AACzC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,yBAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAIF,6EAAA,EAAkB;AAC/C,EAAA,sCACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAAC,cAAA,CAACE,oBAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,wBAAA,EAA0B,UAAS,CAAA,EACjE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACEF,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;;;"}
+{"version":3,"file":"thread-trace-details.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Card } from '@/ds/components/Card';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a raised card with a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <Card\n      elevation=\"raised\"\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'mx-4 min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Card>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-b border-border\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":["useThreadTraceRow","jsx","Card","cn","DataPanel"],"mappings":";;;;;;;;;;AAUO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIA,6EAAA,EAAkB;AACzC,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,QAAA;AAAA,MACV,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,8BAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAIH,6EAAA,EAAkB;AAC/C,EAAA,sCACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAAC,cAAA,CAACG,oBAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,wBAAA,EAA0B,UAAS,CAAA,EACjE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACEH,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAWE,WAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;;;"}

package/dist/domains/traces/components/thread-trace/thread-trace-details.es.js

@@ -1,16 +1,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
-import { D as DataPanel } from '../../../../data-panel-CbomKGJt.js';
+import { C as Card } from '../../../../Card-DVy0QS4m.js';
+import { D as DataPanel } from '../../../../data-panel-CKvpHRUM.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceDetails({ className, children, ...props }) {
   const { isExpanded } = useThreadTraceRow();
   return /* @__PURE__ */ jsx(
-    "div",
+    Card,
     {
+      elevation: "raised",
       "data-slot": "thread-trace-details",
       className: cn(
-        "min-w-0 overflow-hidden",
+        "mx-4 min-w-0 overflow-hidden",
         // While collapsed the messages column alone sets the row height: `h-0` keeps this
         // cell out of the grid's row sizing (so measurement rounding can't nudge the row by
         // a pixel) and `min-h-full` stretches it back to the row afterwards.

package/dist/domains/traces/components/thread-trace/thread-trace-details.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-details.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. The row draws the borders. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <div\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-b border-border\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AASO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,iBAAA,EAAkB;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,yBAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAI,iBAAA,EAAkB;AAC/C,EAAA,2BACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAA,GAAA,CAAC,UAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,wBAAA,EAA0B,UAAS,CAAA,EACjE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-details.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-details.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Card } from '@/ds/components/Card';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport { cn } from '@/lib/utils';\n\nexport type ThreadTraceDetailsProps = ComponentProps<'div'>;\n\n/** The details column of a row: a raised card with a `ThreadTrace.DetailsHeader` above `ThreadTrace.Spans`. */\nexport function ThreadTraceDetails({ className, children, ...props }: ThreadTraceDetailsProps) {\n  const { isExpanded } = useThreadTraceRow();\n  return (\n    <Card\n      elevation=\"raised\"\n      data-slot=\"thread-trace-details\"\n      className={cn(\n        'mx-4 min-w-0 overflow-hidden',\n        // While collapsed the messages column alone sets the row height: `h-0` keeps this\n        // cell out of the grid's row sizing (so measurement rounding can't nudge the row by\n        // a pixel) and `min-h-full` stretches it back to the row afterwards.\n        !isExpanded && 'h-0 min-h-full',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Card>\n  );\n}\n\nexport type ThreadTraceDetailsHeaderProps = ComponentProps<'div'>;\n\n/**\n * The header row above the span tree; children are typically a `ThreadTrace.DetailsActions`.\n * Measured: its height is taken out of the span tree budget so the details cell never\n * overshoots the messages column.\n */\nexport function ThreadTraceDetailsHeader({ className, children, ...props }: ThreadTraceDetailsHeaderProps) {\n  const { detailsHeaderRef } = useThreadTraceRow();\n  return (\n    <div ref={detailsHeaderRef} data-slot=\"thread-trace-details-header\" className={className} {...props}>\n      {/* Sole child of the measured wrapper, so the header's own `not-last:border-b` never applies. */}\n      <DataPanel.Header className=\"border-b border-border\">{children}</DataPanel.Header>\n    </div>\n  );\n}\n\nexport type ThreadTraceDetailsActionsProps = ComponentProps<'div'>;\n\n/** Trailing controls of the header (e.g. a \"Go to trace\" link), pushed to the right. */\nexport function ThreadTraceDetailsActions({ className, ...props }: ThreadTraceDetailsActionsProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-details-actions\"\n      className={cn('ml-auto flex shrink-0 items-center', className)}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;AAUO,SAAS,mBAAmB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAA4B;AAC7F,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,iBAAA,EAAkB;AACzC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAU,QAAA;AAAA,MACV,WAAA,EAAU,sBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,8BAAA;AAAA;AAAA;AAAA;AAAA,QAIA,CAAC,UAAA,IAAc,gBAAA;AAAA,QACf;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,yBAAyB,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAkC;AACzG,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAI,iBAAA,EAAkB;AAC/C,EAAA,2BACG,KAAA,EAAA,EAAI,GAAA,EAAK,gBAAA,EAAkB,WAAA,EAAU,+BAA8B,SAAA,EAAuB,GAAG,KAAA,EAE5F,QAAA,kBAAA,GAAA,CAAC,UAAU,MAAA,EAAV,EAAiB,SAAA,EAAU,wBAAA,EAA0B,UAAS,CAAA,EACjE,CAAA;AAEJ;AAKO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,8BAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC5D,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/domains/traces/components/thread-trace/thread-trace-list.cjs.js

@@ -3,20 +3,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const reactResizablePanels = require('react-resizable-panels');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
 const messageScroller = require('../../../../message-scroller-E05PLPmT.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceList({ className, innerClassName, children, ...props }) {
   const { listRef } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
-  return /* @__PURE__ */ jsxRuntime.jsx(messageScroller.MessageScroller, { "data-slot": "thread-trace-list", className: utils_cn.cn("min-h-0", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(messageScroller.MessageScrollerViewport, { ref: listRef, className: "overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "thread-trace-main", minSize: 320, className: "flex min-h-0 min-w-0 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(messageScroller.MessageScroller, { "data-slot": "thread-trace-list", className: utils_cn.cn("min-h-0 flex-1", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(messageScroller.MessageScrollerViewport, { ref: listRef, className: "overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
     messageScroller.MessageScrollerContent,
     {
       "data-slot": "thread-trace-list-inner",
       className: utils_cn.cn("relative min-h-full gap-0", innerClassName),
       children
     }
-  ) }) });
+  ) }) }) });
 }
 
 exports.ThreadTraceList = ThreadTraceList;

package/dist/domains/traces/components/thread-trace/thread-trace-list.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-list.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-list.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { MessageScroller, MessageScrollerContent, MessageScrollerViewport } from '@/ds/components/MessageScroller';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceListProps extends ComponentProps<'div'> {\n  /** Class name of the inner wrapper that establishes the positioning context for the rail. */\n  innerClassName?: string;\n}\n\n/** The scroll container holding the rows; visible-row tracking observes `[data-trace-id]` inside it. */\nexport function ThreadTraceList({ className, innerClassName, children, ...props }: ThreadTraceListProps) {\n  const { listRef } = useThreadTrace();\n  return (\n    <MessageScroller data-slot=\"thread-trace-list\" className={cn('min-h-0', className)} {...props}>\n      <MessageScrollerViewport ref={listRef} className=\"overflow-x-hidden\">\n        <MessageScrollerContent\n          data-slot=\"thread-trace-list-inner\"\n          className={cn('relative min-h-full gap-0', innerClassName)}\n        >\n          {children}\n        </MessageScrollerContent>\n      </MessageScrollerViewport>\n    </MessageScroller>\n  );\n}\n"],"names":["useThreadTrace","MessageScroller","cn","jsx","MessageScrollerViewport","MessageScrollerContent"],"mappings":";;;;;;;;;AAYO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAIA,uEAAA,EAAe;AACnC,EAAA,sCACGC,+BAAA,EAAA,EAAgB,WAAA,EAAU,mBAAA,EAAoB,SAAA,EAAWC,YAAG,SAAA,EAAW,SAAS,CAAA,EAAI,GAAG,OACtF,QAAA,kBAAAC,cAAA,CAACC,uCAAA,EAAA,EAAwB,GAAA,EAAK,OAAA,EAAS,WAAU,mBAAA,EAC/C,QAAA,kBAAAD,cAAA;AAAA,IAACE,sCAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAWH,WAAA,CAAG,2BAAA,EAA6B,cAAc,CAAA;AAAA,MAExD;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-list.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-list.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Panel } from 'react-resizable-panels';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { MessageScroller, MessageScrollerContent, MessageScrollerViewport } from '@/ds/components/MessageScroller';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceListProps extends ComponentProps<'div'> {\n  /** Class name of the inner wrapper that establishes the positioning context for the rail. */\n  innerClassName?: string;\n}\n\n/** The scroll container holding the rows; visible-row tracking observes `[data-trace-id]` inside it. */\nexport function ThreadTraceList({ className, innerClassName, children, ...props }: ThreadTraceListProps) {\n  const { listRef } = useThreadTrace();\n  return (\n    <Panel id=\"thread-trace-main\" minSize={320} className=\"flex min-h-0 min-w-0 flex-col\">\n      <MessageScroller data-slot=\"thread-trace-list\" className={cn('min-h-0 flex-1', className)} {...props}>\n        <MessageScrollerViewport ref={listRef} className=\"overflow-x-hidden\">\n          <MessageScrollerContent\n            data-slot=\"thread-trace-list-inner\"\n            className={cn('relative min-h-full gap-0', innerClassName)}\n          >\n            {children}\n          </MessageScrollerContent>\n        </MessageScrollerViewport>\n      </MessageScroller>\n    </Panel>\n  );\n}\n"],"names":["useThreadTrace","jsx","Panel","MessageScroller","cn","MessageScrollerViewport","MessageScrollerContent"],"mappings":";;;;;;;;;;AAaO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAIA,uEAAA,EAAe;AACnC,EAAA,uBACEC,cAAA,CAACC,0BAAA,EAAA,EAAM,EAAA,EAAG,mBAAA,EAAoB,OAAA,EAAS,KAAK,SAAA,EAAU,+BAAA,EACpD,QAAA,kBAAAD,cAAA,CAACE,+BAAA,EAAA,EAAgB,WAAA,EAAU,mBAAA,EAAoB,WAAWC,WAAA,CAAG,gBAAA,EAAkB,SAAS,CAAA,EAAI,GAAG,KAAA,EAC7F,yCAACC,uCAAA,EAAA,EAAwB,GAAA,EAAK,OAAA,EAAS,SAAA,EAAU,mBAAA,EAC/C,QAAA,kBAAAJ,cAAA;AAAA,IAACK,sCAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAWF,WAAA,CAAG,2BAAA,EAA6B,cAAc,CAAA;AAAA,MAExD;AAAA;AAAA,GACH,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/thread-trace/thread-trace-list.es.js

@@ -1,18 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
+import { Panel } from 'react-resizable-panels';
 import { useThreadTrace } from './thread-trace-context.es.js';
 import { M as MessageScroller, e as MessageScrollerViewport, b as MessageScrollerContent } from '../../../../message-scroller-CiFr8MwT.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceList({ className, innerClassName, children, ...props }) {
   const { listRef } = useThreadTrace();
-  return /* @__PURE__ */ jsx(MessageScroller, { "data-slot": "thread-trace-list", className: cn("min-h-0", className), ...props, children: /* @__PURE__ */ jsx(MessageScrollerViewport, { ref: listRef, className: "overflow-x-hidden", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Panel, { id: "thread-trace-main", minSize: 320, className: "flex min-h-0 min-w-0 flex-col", children: /* @__PURE__ */ jsx(MessageScroller, { "data-slot": "thread-trace-list", className: cn("min-h-0 flex-1", className), ...props, children: /* @__PURE__ */ jsx(MessageScrollerViewport, { ref: listRef, className: "overflow-x-hidden", children: /* @__PURE__ */ jsx(
     MessageScrollerContent,
     {
       "data-slot": "thread-trace-list-inner",
       className: cn("relative min-h-full gap-0", innerClassName),
       children
     }
-  ) }) });
+  ) }) }) });
 }
 
 export { ThreadTraceList };

package/dist/domains/traces/components/thread-trace/thread-trace-list.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-list.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-list.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { MessageScroller, MessageScrollerContent, MessageScrollerViewport } from '@/ds/components/MessageScroller';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceListProps extends ComponentProps<'div'> {\n  /** Class name of the inner wrapper that establishes the positioning context for the rail. */\n  innerClassName?: string;\n}\n\n/** The scroll container holding the rows; visible-row tracking observes `[data-trace-id]` inside it. */\nexport function ThreadTraceList({ className, innerClassName, children, ...props }: ThreadTraceListProps) {\n  const { listRef } = useThreadTrace();\n  return (\n    <MessageScroller data-slot=\"thread-trace-list\" className={cn('min-h-0', className)} {...props}>\n      <MessageScrollerViewport ref={listRef} className=\"overflow-x-hidden\">\n        <MessageScrollerContent\n          data-slot=\"thread-trace-list-inner\"\n          className={cn('relative min-h-full gap-0', innerClassName)}\n        >\n          {children}\n        </MessageScrollerContent>\n      </MessageScrollerViewport>\n    </MessageScroller>\n  );\n}\n"],"names":[],"mappings":";;;;;AAYO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,cAAA,EAAe;AACnC,EAAA,2BACG,eAAA,EAAA,EAAgB,WAAA,EAAU,mBAAA,EAAoB,SAAA,EAAW,GAAG,SAAA,EAAW,SAAS,CAAA,EAAI,GAAG,OACtF,QAAA,kBAAA,GAAA,CAAC,uBAAA,EAAA,EAAwB,GAAA,EAAK,OAAA,EAAS,WAAU,mBAAA,EAC/C,QAAA,kBAAA,GAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,cAAc,CAAA;AAAA,MAExD;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-list.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-list.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Panel } from 'react-resizable-panels';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { MessageScroller, MessageScrollerContent, MessageScrollerViewport } from '@/ds/components/MessageScroller';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceListProps extends ComponentProps<'div'> {\n  /** Class name of the inner wrapper that establishes the positioning context for the rail. */\n  innerClassName?: string;\n}\n\n/** The scroll container holding the rows; visible-row tracking observes `[data-trace-id]` inside it. */\nexport function ThreadTraceList({ className, innerClassName, children, ...props }: ThreadTraceListProps) {\n  const { listRef } = useThreadTrace();\n  return (\n    <Panel id=\"thread-trace-main\" minSize={320} className=\"flex min-h-0 min-w-0 flex-col\">\n      <MessageScroller data-slot=\"thread-trace-list\" className={cn('min-h-0 flex-1', className)} {...props}>\n        <MessageScrollerViewport ref={listRef} className=\"overflow-x-hidden\">\n          <MessageScrollerContent\n            data-slot=\"thread-trace-list-inner\"\n            className={cn('relative min-h-full gap-0', innerClassName)}\n          >\n            {children}\n          </MessageScrollerContent>\n        </MessageScrollerViewport>\n      </MessageScroller>\n    </Panel>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAaO,SAAS,gBAAgB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAAyB;AACvG,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,cAAA,EAAe;AACnC,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAM,EAAA,EAAG,mBAAA,EAAoB,OAAA,EAAS,KAAK,SAAA,EAAU,+BAAA,EACpD,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,WAAA,EAAU,mBAAA,EAAoB,WAAW,EAAA,CAAG,gBAAA,EAAkB,SAAS,CAAA,EAAI,GAAG,KAAA,EAC7F,8BAAC,uBAAA,EAAA,EAAwB,GAAA,EAAK,OAAA,EAAS,SAAA,EAAU,mBAAA,EAC/C,QAAA,kBAAA,GAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,cAAc,CAAA;AAAA,MAExD;AAAA;AAAA,GACH,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/thread-trace/thread-trace-messages.cjs.js

@@ -5,29 +5,25 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_components_threadTrace_threadTraceRow = require('./thread-trace-row.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
-const dataPanel = require('../../../../data-panel-o-QLWuFV.cjs');
-const tabsRoot = require('../../../../tabs-root-C-ePF1y9.cjs');
-const tabsTab = require('../../../../tabs-tab-BmIBFifi.cjs');
-const tabsContent = require('../../../../tabs-content-DnscxcLI.cjs');
+const tabsList = require('../../../../tabs-list-Tqj36HIL.cjs');
+const tabsTab = require('../../../../tabs-tab-C-C2vX-D.cjs');
+const tabsContent = require('../../../../tabs-content-DfH1hhpU.cjs');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceMessages({ className, innerClassName, children, ...props }) {
-  const { messagesRef, messagesHeight, tab, setTab } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
+  const { messagesRef, messagesHeight, tab } = domains_traces_components_threadTrace_threadTraceRowContext.useThreadTraceRow();
   const minHeight = tab === domains_traces_components_threadTrace_threadTraceRow.THREAD_TRACE_MESSAGES_TAB ? void 0 : messagesHeight ?? void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-slot": "thread-trace-messages",
-      className: utils_cn.cn("relative min-w-0 overflow-x-clip border-r border-border", className),
+      className: utils_cn.cn("relative min-w-0 overflow-x-clip px-4", className),
       ...props,
       style: { minHeight, ...props.style },
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        tabsRoot.Tabs,
+        "div",
         {
           ref: messagesRef,
-          defaultTab: domains_traces_components_threadTrace_threadTraceRow.THREAD_TRACE_MESSAGES_TAB,
-          value: tab,
-          onValueChange: setTab,
           "data-slot": "thread-trace-messages-inner",
           className: utils_cn.cn("sticky top-0", innerClassName),
           "data-testid": "trace-row-messages",
@@ -37,19 +33,15 @@ function ThreadTraceMessages({ className, innerClassName, children, ...props })
     }
   );
 }
-function ThreadTraceMessagesHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: utils_cn.cn("border-b border-border", className), ...props });
-}
 function ThreadTraceTabList({ variant = "pill-ghost", size = "sm", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { variant, size, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(tabsList.TabList, { variant, size, ...props });
 }
 const ThreadTraceTab = tabsTab.Tab;
 function ThreadTraceTabContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { className: utils_cn.cn("overflow-x-hidden px-4", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { className: utils_cn.cn("overflow-x-hidden", className), ...props });
 }
 
 exports.ThreadTraceMessages = ThreadTraceMessages;
-exports.ThreadTraceMessagesHeader = ThreadTraceMessagesHeader;
 exports.ThreadTraceTab = ThreadTraceTab;
 exports.ThreadTraceTabContent = ThreadTraceTabContent;
 exports.ThreadTraceTabList = ThreadTraceTabList;

package/dist/domains/traces/components/thread-trace/thread-trace-messages.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-messages.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-messages.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelHeaderProps } from '@/ds/components/DataPanel';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { TabContentProps, TabListProps, TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceMessagesProps extends ComponentProps<'div'> {\n  /** Class name of the sticky, measured wrapper around the children. */\n  innerClassName?: string;\n}\n\n/**\n * The left column of a row: the same Messages / Feedback / Scores tabs as the trace panel's side\n * column, one set per turn. Children are a `ThreadTrace.MessagesHeader` (holding the\n * `ThreadTrace.TabList`) followed by one `ThreadTrace.TabContent` per view. Like the trace\n * panel's side column it is framed by a left border (closing the rail gutter) and a right border,\n * which every row continues so they read as one line down the thread. Its measured height is the\n * clamp budget of the span tree.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef, messagesHeight, tab, setTab } = useThreadTraceRow();\n  // A short Feedback / Scores view keeps the row as tall as the Messages view, so the span tree\n  // next to it is not clipped.\n  const minHeight = tab === THREAD_TRACE_MESSAGES_TAB ? undefined : (messagesHeight ?? undefined);\n  return (\n    <div\n      data-slot=\"thread-trace-messages\"\n      className={cn('relative min-w-0 overflow-x-clip border-r border-border', className)}\n      {...props}\n      style={{ minHeight, ...props.style }}\n    >\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <Tabs<string>\n        ref={messagesRef}\n        defaultTab={THREAD_TRACE_MESSAGES_TAB}\n        value={tab}\n        onValueChange={setTab}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </Tabs>\n    </div>\n  );\n}\n\nexport type ThreadTraceMessagesHeaderProps = DataPanelHeaderProps;\n\n/**\n * The bordered tab row at the top of the messages column, same chrome as the trace panel's side\n * column; its border spans the column and continues into the details header's border as one line.\n */\nexport function ThreadTraceMessagesHeader({ className, ...props }: ThreadTraceMessagesHeaderProps) {\n  return <DataPanel.Header className={cn('border-b border-border', className)} {...props} />;\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant' | 'size'> & {\n  variant?: TabListProps['variant'];\n  size?: TabListProps['size'];\n};\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', size = 'sm', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} size={size} {...props} />;\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\n\n/** One view of the messages column; keeps a gutter before the column's right border. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('overflow-x-hidden px-4', className)} {...props} />;\n}\n"],"names":["useThreadTraceRow","THREAD_TRACE_MESSAGES_TAB","jsx","cn","Tabs","DataPanel","TabList","Tab","TabContent"],"mappings":";;;;;;;;;;;;;AAuBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,EAAK,MAAA,KAAWA,6EAAA,EAAkB;AAGvE,EAAA,MAAM,SAAA,GAAY,GAAA,KAAQC,8EAAA,GAA4B,MAAA,GAAa,cAAA,IAAkB,MAAA;AACrF,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,yDAAA,EAA2D,SAAS,CAAA;AAAA,MACjF,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,MAAM,KAAA,EAAM;AAAA,MAGnC,QAAA,kBAAAD,cAAA;AAAA,QAACE,aAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,UAAA,EAAYH,8EAAA;AAAA,UACZ,KAAA,EAAO,GAAA;AAAA,UACP,aAAA,EAAe,MAAA;AAAA,UACf,WAAA,EAAU,6BAAA;AAAA,UACV,SAAA,EAAWE,WAAA,CAAG,cAAA,EAAgB,cAAc,CAAA;AAAA,UAC5C,aAAA,EAAY,oBAAA;AAAA,UAEX;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAQO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBAAOD,cAAA,CAACG,mBAAA,CAAU,MAAA,EAAV,EAAiB,SAAA,EAAWF,YAAG,wBAAA,EAA0B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC1F;AAOO,SAAS,kBAAA,CAAmB,EAAE,OAAA,GAAU,YAAA,EAAc,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AAC7G,EAAA,uBAAOD,cAAA,CAACI,gBAAA,EAAA,EAAQ,OAAA,EAAkB,IAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AAC3D;AAGO,MAAM,cAAA,GAAiBC;AAKvB,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzF,EAAA,uBAAOL,cAAA,CAACM,0BAAW,SAAA,EAAWL,WAAA,CAAG,0BAA0B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACpF;;;;;;;;"}
+{"version":3,"file":"thread-trace-messages.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-messages.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Tab, TabContent, TabList } from '@/ds/components/Tabs';\nimport type { TabContentProps, TabListProps, TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceMessagesProps extends ComponentProps<'div'> {\n  /** Class name of the sticky, measured wrapper around the children. */\n  innerClassName?: string;\n}\n\n/**\n * The left column of a row: one `ThreadTrace.TabContent` per view (Messages / Feedback / Scores),\n * switched by the `ThreadTrace.TabList` in the row's divider. Its measured height is the clamp\n * budget of the span tree.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef, messagesHeight, tab } = useThreadTraceRow();\n  // A short Feedback / Scores view keeps the row as tall as the Messages view, so the span tree\n  // next to it is not clipped.\n  const minHeight = tab === THREAD_TRACE_MESSAGES_TAB ? undefined : (messagesHeight ?? undefined);\n  return (\n    <div\n      data-slot=\"thread-trace-messages\"\n      className={cn('relative min-w-0 overflow-x-clip px-4', className)}\n      {...props}\n      style={{ minHeight, ...props.style }}\n    >\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <div\n        ref={messagesRef}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant' | 'size'> & {\n  variant?: TabListProps['variant'];\n  size?: TabListProps['size'];\n};\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', size = 'sm', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} size={size} {...props} />;\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\n\n/** One view of the messages column. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('overflow-x-hidden', className)} {...props} />;\n}\n"],"names":["useThreadTraceRow","THREAD_TRACE_MESSAGES_TAB","jsx","cn","TabList","Tab","TabContent"],"mappings":";;;;;;;;;;;;AAkBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,KAAQA,6EAAA,EAAkB;AAG/D,EAAA,MAAM,SAAA,GAAY,GAAA,KAAQC,8EAAA,GAA4B,MAAA,GAAa,cAAA,IAAkB,MAAA;AACrF,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAWC,WAAA,CAAG,uCAAA,EAAyC,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,MAAM,KAAA,EAAM;AAAA,MAGnC,QAAA,kBAAAD,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,WAAA,EAAU,6BAAA;AAAA,UACV,SAAA,EAAWC,WAAA,CAAG,cAAA,EAAgB,cAAc,CAAA;AAAA,UAC5C,aAAA,EAAY,oBAAA;AAAA,UAEX;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAOO,SAAS,kBAAA,CAAmB,EAAE,OAAA,GAAU,YAAA,EAAc,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AAC7G,EAAA,uBAAOD,cAAA,CAACE,gBAAA,EAAA,EAAQ,OAAA,EAAkB,IAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AAC3D;AAGO,MAAM,cAAA,GAAiBC;AAKvB,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzF,EAAA,uBAAOH,cAAA,CAACI,0BAAW,SAAA,EAAWH,WAAA,CAAG,qBAAqB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC/E;;;;;;;"}

package/dist/domains/traces/components/thread-trace/thread-trace-messages.es.js

@@ -1,29 +1,25 @@
 import { jsx } from 'react/jsx-runtime';
 import { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row.es.js';
 import { useThreadTraceRow } from './thread-trace-row-context.es.js';
-import { D as DataPanel } from '../../../../data-panel-CbomKGJt.js';
-import { T as TabList, a as Tabs } from '../../../../tabs-root-lrZZ3KwH.js';
-import { T as Tab } from '../../../../tabs-tab-DoPSW-1s.js';
-import { T as TabContent } from '../../../../tabs-content-CwbkTutf.js';
+import { T as TabList } from '../../../../tabs-list-tLx5fgP0.js';
+import { T as Tab } from '../../../../tabs-tab-ClLIOGiC.js';
+import { T as TabContent } from '../../../../tabs-content-OWF8un_n.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceMessages({ className, innerClassName, children, ...props }) {
-  const { messagesRef, messagesHeight, tab, setTab } = useThreadTraceRow();
+  const { messagesRef, messagesHeight, tab } = useThreadTraceRow();
   const minHeight = tab === THREAD_TRACE_MESSAGES_TAB ? void 0 : messagesHeight ?? void 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "thread-trace-messages",
-      className: cn("relative min-w-0 overflow-x-clip border-r border-border", className),
+      className: cn("relative min-w-0 overflow-x-clip px-4", className),
       ...props,
       style: { minHeight, ...props.style },
       children: /* @__PURE__ */ jsx(
-        Tabs,
+        "div",
         {
           ref: messagesRef,
-          defaultTab: THREAD_TRACE_MESSAGES_TAB,
-          value: tab,
-          onValueChange: setTab,
           "data-slot": "thread-trace-messages-inner",
           className: cn("sticky top-0", innerClassName),
           "data-testid": "trace-row-messages",
@@ -33,16 +29,13 @@ function ThreadTraceMessages({ className, innerClassName, children, ...props })
     }
   );
 }
-function ThreadTraceMessagesHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(DataPanel.Header, { className: cn("border-b border-border", className), ...props });
-}
 function ThreadTraceTabList({ variant = "pill-ghost", size = "sm", ...props }) {
   return /* @__PURE__ */ jsx(TabList, { variant, size, ...props });
 }
 const ThreadTraceTab = Tab;
 function ThreadTraceTabContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(TabContent, { className: cn("overflow-x-hidden px-4", className), ...props });
+  return /* @__PURE__ */ jsx(TabContent, { className: cn("overflow-x-hidden", className), ...props });
 }
 
-export { ThreadTraceMessages, ThreadTraceMessagesHeader, ThreadTraceTab, ThreadTraceTabContent, ThreadTraceTabList };
+export { ThreadTraceMessages, ThreadTraceTab, ThreadTraceTabContent, ThreadTraceTabList };
 //# sourceMappingURL=thread-trace-messages.es.js.map

package/dist/domains/traces/components/thread-trace/thread-trace-messages.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-messages.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-messages.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelHeaderProps } from '@/ds/components/DataPanel';\nimport { Tab, TabContent, TabList, Tabs } from '@/ds/components/Tabs';\nimport type { TabContentProps, TabListProps, TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceMessagesProps extends ComponentProps<'div'> {\n  /** Class name of the sticky, measured wrapper around the children. */\n  innerClassName?: string;\n}\n\n/**\n * The left column of a row: the same Messages / Feedback / Scores tabs as the trace panel's side\n * column, one set per turn. Children are a `ThreadTrace.MessagesHeader` (holding the\n * `ThreadTrace.TabList`) followed by one `ThreadTrace.TabContent` per view. Like the trace\n * panel's side column it is framed by a left border (closing the rail gutter) and a right border,\n * which every row continues so they read as one line down the thread. Its measured height is the\n * clamp budget of the span tree.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef, messagesHeight, tab, setTab } = useThreadTraceRow();\n  // A short Feedback / Scores view keeps the row as tall as the Messages view, so the span tree\n  // next to it is not clipped.\n  const minHeight = tab === THREAD_TRACE_MESSAGES_TAB ? undefined : (messagesHeight ?? undefined);\n  return (\n    <div\n      data-slot=\"thread-trace-messages\"\n      className={cn('relative min-w-0 overflow-x-clip border-r border-border', className)}\n      {...props}\n      style={{ minHeight, ...props.style }}\n    >\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <Tabs<string>\n        ref={messagesRef}\n        defaultTab={THREAD_TRACE_MESSAGES_TAB}\n        value={tab}\n        onValueChange={setTab}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </Tabs>\n    </div>\n  );\n}\n\nexport type ThreadTraceMessagesHeaderProps = DataPanelHeaderProps;\n\n/**\n * The bordered tab row at the top of the messages column, same chrome as the trace panel's side\n * column; its border spans the column and continues into the details header's border as one line.\n */\nexport function ThreadTraceMessagesHeader({ className, ...props }: ThreadTraceMessagesHeaderProps) {\n  return <DataPanel.Header className={cn('border-b border-border', className)} {...props} />;\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant' | 'size'> & {\n  variant?: TabListProps['variant'];\n  size?: TabListProps['size'];\n};\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', size = 'sm', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} size={size} {...props} />;\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\n\n/** One view of the messages column; keeps a gutter before the column's right border. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('overflow-x-hidden px-4', className)} {...props} />;\n}\n"],"names":[],"mappings":";;;;;;;;;AAuBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,EAAK,MAAA,KAAW,iBAAA,EAAkB;AAGvE,EAAA,MAAM,SAAA,GAAY,GAAA,KAAQ,yBAAA,GAA4B,MAAA,GAAa,cAAA,IAAkB,MAAA;AACrF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,yDAAA,EAA2D,SAAS,CAAA;AAAA,MACjF,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,MAAM,KAAA,EAAM;AAAA,MAGnC,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,UAAA,EAAY,yBAAA;AAAA,UACZ,KAAA,EAAO,GAAA;AAAA,UACP,aAAA,EAAe,MAAA;AAAA,UACf,WAAA,EAAU,6BAAA;AAAA,UACV,SAAA,EAAW,EAAA,CAAG,cAAA,EAAgB,cAAc,CAAA;AAAA,UAC5C,aAAA,EAAY,oBAAA;AAAA,UAEX;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAQO,SAAS,yBAAA,CAA0B,EAAE,SAAA,EAAW,GAAG,OAAM,EAAmC;AACjG,EAAA,uBAAO,GAAA,CAAC,SAAA,CAAU,MAAA,EAAV,EAAiB,SAAA,EAAW,GAAG,wBAAA,EAA0B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC1F;AAOO,SAAS,kBAAA,CAAmB,EAAE,OAAA,GAAU,YAAA,EAAc,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AAC7G,EAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAA,EAAkB,IAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AAC3D;AAGO,MAAM,cAAA,GAAiB;AAKvB,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzF,EAAA,uBAAO,GAAA,CAAC,cAAW,SAAA,EAAW,EAAA,CAAG,0BAA0B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACpF;;;;"}
+{"version":3,"file":"thread-trace-messages.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-messages.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { THREAD_TRACE_MESSAGES_TAB } from './thread-trace-row';\nimport { useThreadTraceRow } from './thread-trace-row-context';\nimport { Tab, TabContent, TabList } from '@/ds/components/Tabs';\nimport type { TabContentProps, TabListProps, TabProps } from '@/ds/components/Tabs';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceMessagesProps extends ComponentProps<'div'> {\n  /** Class name of the sticky, measured wrapper around the children. */\n  innerClassName?: string;\n}\n\n/**\n * The left column of a row: one `ThreadTrace.TabContent` per view (Messages / Feedback / Scores),\n * switched by the `ThreadTrace.TabList` in the row's divider. Its measured height is the clamp\n * budget of the span tree.\n */\nexport function ThreadTraceMessages({ className, innerClassName, children, ...props }: ThreadTraceMessagesProps) {\n  const { messagesRef, messagesHeight, tab } = useThreadTraceRow();\n  // A short Feedback / Scores view keeps the row as tall as the Messages view, so the span tree\n  // next to it is not clipped.\n  const minHeight = tab === THREAD_TRACE_MESSAGES_TAB ? undefined : (messagesHeight ?? undefined);\n  return (\n    <div\n      data-slot=\"thread-trace-messages\"\n      className={cn('relative min-w-0 overflow-x-clip px-4', className)}\n      {...props}\n      style={{ minHeight, ...props.style }}\n    >\n      {/* Sticky within the row, so a long trace on the right never scrolls its messages away. */}\n      <div\n        ref={messagesRef}\n        data-slot=\"thread-trace-messages-inner\"\n        className={cn('sticky top-0', innerClassName)}\n        data-testid=\"trace-row-messages\"\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport type ThreadTraceTabListProps = Omit<TabListProps, 'variant' | 'size'> & {\n  variant?: TabListProps['variant'];\n  size?: TabListProps['size'];\n};\n\nexport function ThreadTraceTabList({ variant = 'pill-ghost', size = 'sm', ...props }: ThreadTraceTabListProps) {\n  return <TabList variant={variant} size={size} {...props} />;\n}\n\nexport type ThreadTraceTabProps = TabProps;\nexport const ThreadTraceTab = Tab;\n\nexport type ThreadTraceTabContentProps = TabContentProps;\n\n/** One view of the messages column. */\nexport function ThreadTraceTabContent({ className, ...props }: ThreadTraceTabContentProps) {\n  return <TabContent className={cn('overflow-x-hidden', className)} {...props} />;\n}\n"],"names":[],"mappings":";;;;;;;;AAkBO,SAAS,oBAAoB,EAAE,SAAA,EAAW,gBAAgB,QAAA,EAAU,GAAG,OAAM,EAA6B;AAC/G,EAAA,MAAM,EAAE,WAAA,EAAa,cAAA,EAAgB,GAAA,KAAQ,iBAAA,EAAkB;AAG/D,EAAA,MAAM,SAAA,GAAY,GAAA,KAAQ,yBAAA,GAA4B,MAAA,GAAa,cAAA,IAAkB,MAAA;AACrF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,uCAAA,EAAyC,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO,EAAE,SAAA,EAAW,GAAG,MAAM,KAAA,EAAM;AAAA,MAGnC,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,WAAA,EAAU,6BAAA;AAAA,UACV,SAAA,EAAW,EAAA,CAAG,cAAA,EAAgB,cAAc,CAAA;AAAA,UAC5C,aAAA,EAAY,oBAAA;AAAA,UAEX;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAOO,SAAS,kBAAA,CAAmB,EAAE,OAAA,GAAU,YAAA,EAAc,OAAO,IAAA,EAAM,GAAG,OAAM,EAA4B;AAC7G,EAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAA,EAAkB,IAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AAC3D;AAGO,MAAM,cAAA,GAAiB;AAKvB,SAAS,qBAAA,CAAsB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AACzF,EAAA,uBAAO,GAAA,CAAC,cAAW,SAAA,EAAW,EAAA,CAAG,qBAAqB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC/E;;;;"}