@mastra/playground-ui 60.0.0 → 60.1.0-alpha.1

package/dist/domains/traces/components/trace-columns-menu.es.js

@@ -2,14 +2,14 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Columns3Icon, PlusIcon } from 'lucide-react';
 import { useState, useMemo } from 'react';
 import { TRACE_USAGE_COLUMNS, TRACE_CUSTOM_COLUMN_FIELDS, TRACE_CUSTOM_COLUMN_LABELS } from '../trace-list-columns.es.js';
-import { B as Button } from '../../../Button-C6eUqcPI.js';
-import { C as Combobox } from '../../../combobox-B_C0cNid.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
+import { C as Combobox } from '../../../combobox-B15qTrWO.js';
 import '@base-ui/react/combobox';
-import { D as Dialog, d as DialogContent, g as DialogHeader, j as DialogTitle, e as DialogDescription, a as DialogBody, f as DialogFooter, b as DialogCancel } from '../../../dialog-cKzR2TXI.js';
+import { D as Dialog, d as DialogContent, g as DialogHeader, j as DialogTitle, e as DialogDescription, a as DialogBody, f as DialogFooter, b as DialogCancel } from '../../../dialog-Dt5kASkl.js';
 import { D as DropdownMenu } from '../../../dropdown-menu-DpEn6HwK.js';
-import { F as FieldBlock } from '../../../field-block-DpejZ6U6.js';
+import { F as FieldBlock } from '../../../field-block--PeppIRb.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
-import { D as DialogAction } from '../../../dialog-action-BGmDoI5T.js';
+import { D as DialogAction } from '../../../dialog-action-CB3h9Z2J.js';
 
 const METADATA_KEY_FIELD_NAME = "trace-metadata-key";
 const EMPTY_KEYS = [];

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

@@ -13,14 +13,14 @@ const domains_traces_components_traceIdButton = require('./trace-id-button.cjs.j
 const domains_traces_components_traceSpanTimeline = require('./trace-span-timeline.cjs.js');
 const domains_traces_components_traceSpanTree = require('./trace-span-tree.cjs.js');
 const domains_traces_components_traceSummaryDescription = require('./trace-summary-description.cjs.js');
-const Button = require('../../../Button-BnmR2HRc.cjs');
+const Button = require('../../../Button-CXhSUBxN.cjs');
 const buttonsGroup = require('../../../buttons-group-CoZP3lJt.cjs');
-const dataPanel = require('../../../data-panel-CjvoI_lx.cjs');
+const dataPanel = require('../../../data-panel-D7Qk4iwZ.cjs');
 const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
-const searchFieldBlock = require('../../../search-field-block-B1eqMV8x.cjs');
-const Notice = require('../../../Notice-CEBwitdf.cjs');
-const tabsRoot = require('../../../tabs-root-BqC8X_h6.cjs');
-const tabsTab = require('../../../tabs-tab-lm4xyjtD.cjs');
+const searchFieldBlock = require('../../../search-field-block-DRa-ZNQj.cjs');
+const Notice = require('../../../Notice-C4Tgmtgb.cjs');
+const tabsRoot = require('../../../tabs-root-C-ePF1y9.cjs');
+const tabsTab = require('../../../tabs-tab-BmIBFifi.cjs');
 const icons_Icon = require('../../../icons/Icon.cjs.js');
 const icons_ScorersIcon = require('../../../icons/ScorersIcon.cjs.js');
 const hooks_useScrollToFirstHighlight = require('../../../hooks/use-scroll-to-first-highlight.cjs.js');

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

@@ -9,14 +9,14 @@ import { TraceIdButton } from './trace-id-button.es.js';
 import { TraceSpanTimeline } from './trace-span-timeline.es.js';
 import { TraceSpanTree } from './trace-span-tree.es.js';
 import { TraceSummaryDescription } from './trace-summary-description.es.js';
-import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
 import { B as ButtonsGroup } from '../../../buttons-group-DsZgrZBZ.js';
-import { D as DataPanel } from '../../../data-panel-42fdcagQ.js';
+import { D as DataPanel } from '../../../data-panel-DuLf5j8S.js';
 import { D as DropdownMenu } from '../../../dropdown-menu-DpEn6HwK.js';
-import { S as SearchFieldBlock } from '../../../search-field-block-Cj9lJsYi.js';
-import { N as Notice } from '../../../Notice-Ce3r5x-7.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-4vL8SHCO.js';
-import { T as Tab } from '../../../tabs-tab-7e2as-AV.js';
+import { S as SearchFieldBlock } from '../../../search-field-block-BPJh5yuW.js';
+import { N as Notice } from '../../../Notice-B8RIClJD.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-lrZZ3KwH.js';
+import { T as Tab } from '../../../tabs-tab-DoPSW-1s.js';
 import { Icon } from '../../../icons/Icon.es.js';
 import { ScorersIcon } from '../../../icons/ScorersIcon.es.js';
 import { useScrollToFirstHighlight } from '../../../hooks/use-scroll-to-first-highlight.es.js';

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

@@ -8,12 +8,14 @@ const domains_scores_components_spanScoring = require('../../scores/components/s
 require('lucide-react');
 require('@mastra/react');
 require('@tanstack/react-query');
-require('../../../Button-BnmR2HRc.cjs');
+require('../../../Button-CXhSUBxN.cjs');
+require('../../../keyboard/keyboard-shortcuts-context.cjs.js');
 require('../../../lib/framework.cjs.js');
 require('@mastra/core/utils/safe-stringify');
+require('../../../toast-nm-fM7BR.cjs');
 const domains_scores_hooks_useScorers = require('../../scores/hooks/use-scorers.cjs.js');
 const domains_traces_components_traceDataPanelView = require('./trace-data-panel-view.cjs.js');
-const dialog = require('../../../dialog-DYpOpj9s.cjs');
+const dialog = require('../../../dialog-d_AK1NQD.cjs');
 
 function TraceDataPanel(props) {
   const [sideView, setSideView] = React.useState();

package/dist/domains/traces/components/trace-data-panel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-data-panel.cjs.js","sources":["../../../../src/domains/traces/components/trace-data-panel.tsx"],"sourcesContent":["import { useState, type ComponentProps } from 'react';\nimport { SpanScoring } from '@/domains/scores';\nimport { useScorers } from '@/domains/scores/hooks/use-scorers';\nimport { TraceDataPanelView, type TraceSideView } from '@/domains/traces/components/trace-data-panel-view';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/ds/components/Dialog';\n\ntype TraceDataPanelProps = Omit<\n  ComponentProps<typeof TraceDataPanelView>,\n  'sideView' | 'onSideViewChange' | 'onEvaluateTrace'\n>;\n\n/**\n * Owns the trace panel's side column view so scoring can land on \"Scores\". Mount it with a\n * `key` on the trace (and anchor span) so a view picked on a previous trace never leaks into the next one.\n */\nexport function TraceDataPanel(props: TraceDataPanelProps) {\n  const [sideView, setSideView] = useState<TraceSideView>();\n  const [isScoringOpen, setIsScoringOpen] = useState(false);\n  const { data: scorers, isLoading: isLoadingScorers } = useScorers();\n  const rootSpan = props.anchorSpanId\n    ? props.spans?.find(span => span.spanId === props.anchorSpanId)\n    : props.spans?.find(span => span.parentSpanId == null);\n\n  return (\n    <>\n      <TraceDataPanelView\n        {...props}\n        onEvaluateTrace={() => setIsScoringOpen(true)}\n        sideView={sideView}\n        onSideViewChange={setSideView}\n      />\n      <Dialog open={isScoringOpen} onOpenChange={setIsScoringOpen}>\n        <DialogContent size=\"lg\">\n          <DialogHeader>\n            <DialogTitle>Score trace</DialogTitle>\n          </DialogHeader>\n\n          {isScoringOpen && rootSpan && (\n            <SpanScoring\n              traceId={props.traceId}\n              spanId={rootSpan.spanId}\n              entityType={rootSpan.entityType === 'agent' ? 'Agent' : 'Workflow'}\n              isTopLevelSpan={!rootSpan.parentSpanId}\n              scorers={scorers}\n              isLoadingScorers={isLoadingScorers}\n              onSuccess={() => {\n                setIsScoringOpen(false);\n                setSideView('scores');\n              }}\n            />\n          )}\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"names":["useState","useScorers","jsxs","Fragment","jsx","TraceDataPanelView","Dialog","DialogContent","DialogHeader","DialogTitle","SpanScoring"],"mappings":";;;;;;;;;;;;;;;;;AAeO,SAAS,eAAe,KAAA,EAA4B;AACzD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,cAAA,EAAwB;AACxD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,eAAS,KAAK,CAAA;AACxD,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,SAAA,EAAW,gBAAA,KAAqBC,0CAAA,EAAW;AAClE,EAAA,MAAM,WAAW,KAAA,CAAM,YAAA,GACnB,MAAM,KAAA,EAAO,IAAA,CAAK,UAAQ,IAAA,CAAK,MAAA,KAAW,KAAA,CAAM,YAAY,IAC5D,KAAA,CAAM,KAAA,EAAO,KAAK,CAAA,IAAA,KAAQ,IAAA,CAAK,gBAAgB,IAAI,CAAA;AAEvD,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,+DAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,eAAA,EAAiB,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAAA,QAC5C,QAAA;AAAA,QACA,gBAAA,EAAkB;AAAA;AAAA,KACpB;AAAA,oBACAD,cAAA,CAACE,iBAAO,IAAA,EAAM,aAAA,EAAe,cAAc,gBAAA,EACzC,QAAA,kBAAAJ,eAAA,CAACK,oBAAA,EAAA,EAAc,IAAA,EAAK,IAAA,EAClB,QAAA,EAAA;AAAA,sBAAAH,cAAA,CAACI,mBAAA,EAAA,EACC,QAAA,kBAAAJ,cAAA,CAACK,kBAAA,EAAA,EAAY,QAAA,EAAA,aAAA,EAAW,CAAA,EAC1B,CAAA;AAAA,MAEC,iBAAiB,QAAA,oBAChBL,cAAA;AAAA,QAACM,iDAAA;AAAA,QAAA;AAAA,UACC,SAAS,KAAA,CAAM,OAAA;AAAA,UACf,QAAQ,QAAA,CAAS,MAAA;AAAA,UACjB,UAAA,EAAY,QAAA,CAAS,UAAA,KAAe,OAAA,GAAU,OAAA,GAAU,UAAA;AAAA,UACxD,cAAA,EAAgB,CAAC,QAAA,CAAS,YAAA;AAAA,UAC1B,OAAA;AAAA,UACA,gBAAA;AAAA,UACA,WAAW,MAAM;AACf,YAAA,gBAAA,CAAiB,KAAK,CAAA;AACtB,YAAA,WAAA,CAAY,QAAQ,CAAA;AAAA,UACtB;AAAA;AAAA;AACF,KAAA,EAEJ,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-data-panel.cjs.js","sources":["../../../../src/domains/traces/components/trace-data-panel.tsx"],"sourcesContent":["import { useState, type ComponentProps } from 'react';\nimport { SpanScoring } from '@/domains/scores';\nimport { useScorers } from '@/domains/scores/hooks/use-scorers';\nimport { TraceDataPanelView, type TraceSideView } from '@/domains/traces/components/trace-data-panel-view';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/ds/components/Dialog';\n\ntype TraceDataPanelProps = Omit<\n  ComponentProps<typeof TraceDataPanelView>,\n  'sideView' | 'onSideViewChange' | 'onEvaluateTrace'\n>;\n\n/**\n * Owns the trace panel's side column view so scoring can land on \"Scores\". Mount it with a\n * `key` on the trace (and anchor span) so a view picked on a previous trace never leaks into the next one.\n */\nexport function TraceDataPanel(props: TraceDataPanelProps) {\n  const [sideView, setSideView] = useState<TraceSideView>();\n  const [isScoringOpen, setIsScoringOpen] = useState(false);\n  const { data: scorers, isLoading: isLoadingScorers } = useScorers();\n  const rootSpan = props.anchorSpanId\n    ? props.spans?.find(span => span.spanId === props.anchorSpanId)\n    : props.spans?.find(span => span.parentSpanId == null);\n\n  return (\n    <>\n      <TraceDataPanelView\n        {...props}\n        onEvaluateTrace={() => setIsScoringOpen(true)}\n        sideView={sideView}\n        onSideViewChange={setSideView}\n      />\n      <Dialog open={isScoringOpen} onOpenChange={setIsScoringOpen}>\n        <DialogContent size=\"lg\">\n          <DialogHeader>\n            <DialogTitle>Score trace</DialogTitle>\n          </DialogHeader>\n\n          {isScoringOpen && rootSpan && (\n            <SpanScoring\n              traceId={props.traceId}\n              spanId={rootSpan.spanId}\n              entityType={rootSpan.entityType === 'agent' ? 'Agent' : 'Workflow'}\n              isTopLevelSpan={!rootSpan.parentSpanId}\n              scorers={scorers}\n              isLoadingScorers={isLoadingScorers}\n              onSuccess={() => {\n                setIsScoringOpen(false);\n                setSideView('scores');\n              }}\n            />\n          )}\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"names":["useState","useScorers","jsxs","Fragment","jsx","TraceDataPanelView","Dialog","DialogContent","DialogHeader","DialogTitle","SpanScoring"],"mappings":";;;;;;;;;;;;;;;;;;;AAeO,SAAS,eAAe,KAAA,EAA4B;AACzD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,cAAA,EAAwB;AACxD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,eAAS,KAAK,CAAA;AACxD,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,SAAA,EAAW,gBAAA,KAAqBC,0CAAA,EAAW;AAClE,EAAA,MAAM,WAAW,KAAA,CAAM,YAAA,GACnB,MAAM,KAAA,EAAO,IAAA,CAAK,UAAQ,IAAA,CAAK,MAAA,KAAW,KAAA,CAAM,YAAY,IAC5D,KAAA,CAAM,KAAA,EAAO,KAAK,CAAA,IAAA,KAAQ,IAAA,CAAK,gBAAgB,IAAI,CAAA;AAEvD,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,+DAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,eAAA,EAAiB,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAAA,QAC5C,QAAA;AAAA,QACA,gBAAA,EAAkB;AAAA;AAAA,KACpB;AAAA,oBACAD,cAAA,CAACE,iBAAO,IAAA,EAAM,aAAA,EAAe,cAAc,gBAAA,EACzC,QAAA,kBAAAJ,eAAA,CAACK,oBAAA,EAAA,EAAc,IAAA,EAAK,IAAA,EAClB,QAAA,EAAA;AAAA,sBAAAH,cAAA,CAACI,mBAAA,EAAA,EACC,QAAA,kBAAAJ,cAAA,CAACK,kBAAA,EAAA,EAAY,QAAA,EAAA,aAAA,EAAW,CAAA,EAC1B,CAAA;AAAA,MAEC,iBAAiB,QAAA,oBAChBL,cAAA;AAAA,QAACM,iDAAA;AAAA,QAAA;AAAA,UACC,SAAS,KAAA,CAAM,OAAA;AAAA,UACf,QAAQ,QAAA,CAAS,MAAA;AAAA,UACjB,UAAA,EAAY,QAAA,CAAS,UAAA,KAAe,OAAA,GAAU,OAAA,GAAU,UAAA;AAAA,UACxD,cAAA,EAAgB,CAAC,QAAA,CAAS,YAAA;AAAA,UAC1B,OAAA;AAAA,UACA,gBAAA;AAAA,UACA,WAAW,MAAM;AACf,YAAA,gBAAA,CAAiB,KAAK,CAAA;AACtB,YAAA,WAAA,CAAY,QAAQ,CAAA;AAAA,UACtB;AAAA;AAAA;AACF,KAAA,EAEJ,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -4,12 +4,14 @@ import { SpanScoring } from '../../scores/components/span-scoring.es.js';
 import 'lucide-react';
 import '@mastra/react';
 import '@tanstack/react-query';
-import '../../../Button-C6eUqcPI.js';
+import '../../../Button-D43ghVKt.js';
+import '../../../keyboard/keyboard-shortcuts-context.es.js';
 import '../../../lib/framework.es.js';
 import '@mastra/core/utils/safe-stringify';
+import '../../../toast-c5kCpyWt.js';
 import { useScorers } from '../../scores/hooks/use-scorers.es.js';
 import { TraceDataPanelView } from './trace-data-panel-view.es.js';
-import { D as Dialog, d as DialogContent, g as DialogHeader, j as DialogTitle } from '../../../dialog-cKzR2TXI.js';
+import { D as Dialog, d as DialogContent, g as DialogHeader, j as DialogTitle } from '../../../dialog-Dt5kASkl.js';
 
 function TraceDataPanel(props) {
   const [sideView, setSideView] = useState();

package/dist/domains/traces/components/trace-data-panel.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-data-panel.es.js","sources":["../../../../src/domains/traces/components/trace-data-panel.tsx"],"sourcesContent":["import { useState, type ComponentProps } from 'react';\nimport { SpanScoring } from '@/domains/scores';\nimport { useScorers } from '@/domains/scores/hooks/use-scorers';\nimport { TraceDataPanelView, type TraceSideView } from '@/domains/traces/components/trace-data-panel-view';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/ds/components/Dialog';\n\ntype TraceDataPanelProps = Omit<\n  ComponentProps<typeof TraceDataPanelView>,\n  'sideView' | 'onSideViewChange' | 'onEvaluateTrace'\n>;\n\n/**\n * Owns the trace panel's side column view so scoring can land on \"Scores\". Mount it with a\n * `key` on the trace (and anchor span) so a view picked on a previous trace never leaks into the next one.\n */\nexport function TraceDataPanel(props: TraceDataPanelProps) {\n  const [sideView, setSideView] = useState<TraceSideView>();\n  const [isScoringOpen, setIsScoringOpen] = useState(false);\n  const { data: scorers, isLoading: isLoadingScorers } = useScorers();\n  const rootSpan = props.anchorSpanId\n    ? props.spans?.find(span => span.spanId === props.anchorSpanId)\n    : props.spans?.find(span => span.parentSpanId == null);\n\n  return (\n    <>\n      <TraceDataPanelView\n        {...props}\n        onEvaluateTrace={() => setIsScoringOpen(true)}\n        sideView={sideView}\n        onSideViewChange={setSideView}\n      />\n      <Dialog open={isScoringOpen} onOpenChange={setIsScoringOpen}>\n        <DialogContent size=\"lg\">\n          <DialogHeader>\n            <DialogTitle>Score trace</DialogTitle>\n          </DialogHeader>\n\n          {isScoringOpen && rootSpan && (\n            <SpanScoring\n              traceId={props.traceId}\n              spanId={rootSpan.spanId}\n              entityType={rootSpan.entityType === 'agent' ? 'Agent' : 'Workflow'}\n              isTopLevelSpan={!rootSpan.parentSpanId}\n              scorers={scorers}\n              isLoadingScorers={isLoadingScorers}\n              onSuccess={() => {\n                setIsScoringOpen(false);\n                setSideView('scores');\n              }}\n            />\n          )}\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAeO,SAAS,eAAe,KAAA,EAA4B;AACzD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAA,EAAwB;AACxD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,SAAA,EAAW,gBAAA,KAAqB,UAAA,EAAW;AAClE,EAAA,MAAM,WAAW,KAAA,CAAM,YAAA,GACnB,MAAM,KAAA,EAAO,IAAA,CAAK,UAAQ,IAAA,CAAK,MAAA,KAAW,KAAA,CAAM,YAAY,IAC5D,KAAA,CAAM,KAAA,EAAO,KAAK,CAAA,IAAA,KAAQ,IAAA,CAAK,gBAAgB,IAAI,CAAA;AAEvD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,eAAA,EAAiB,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAAA,QAC5C,QAAA;AAAA,QACA,gBAAA,EAAkB;AAAA;AAAA,KACpB;AAAA,oBACA,GAAA,CAAC,UAAO,IAAA,EAAM,aAAA,EAAe,cAAc,gBAAA,EACzC,QAAA,kBAAA,IAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAK,IAAA,EAClB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,QAAA,EAAA,aAAA,EAAW,CAAA,EAC1B,CAAA;AAAA,MAEC,iBAAiB,QAAA,oBAChB,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,SAAS,KAAA,CAAM,OAAA;AAAA,UACf,QAAQ,QAAA,CAAS,MAAA;AAAA,UACjB,UAAA,EAAY,QAAA,CAAS,UAAA,KAAe,OAAA,GAAU,OAAA,GAAU,UAAA;AAAA,UACxD,cAAA,EAAgB,CAAC,QAAA,CAAS,YAAA;AAAA,UAC1B,OAAA;AAAA,UACA,gBAAA;AAAA,UACA,WAAW,MAAM;AACf,YAAA,gBAAA,CAAiB,KAAK,CAAA;AACtB,YAAA,WAAA,CAAY,QAAQ,CAAA;AAAA,UACtB;AAAA;AAAA;AACF,KAAA,EAEJ,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-data-panel.es.js","sources":["../../../../src/domains/traces/components/trace-data-panel.tsx"],"sourcesContent":["import { useState, type ComponentProps } from 'react';\nimport { SpanScoring } from '@/domains/scores';\nimport { useScorers } from '@/domains/scores/hooks/use-scorers';\nimport { TraceDataPanelView, type TraceSideView } from '@/domains/traces/components/trace-data-panel-view';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/ds/components/Dialog';\n\ntype TraceDataPanelProps = Omit<\n  ComponentProps<typeof TraceDataPanelView>,\n  'sideView' | 'onSideViewChange' | 'onEvaluateTrace'\n>;\n\n/**\n * Owns the trace panel's side column view so scoring can land on \"Scores\". Mount it with a\n * `key` on the trace (and anchor span) so a view picked on a previous trace never leaks into the next one.\n */\nexport function TraceDataPanel(props: TraceDataPanelProps) {\n  const [sideView, setSideView] = useState<TraceSideView>();\n  const [isScoringOpen, setIsScoringOpen] = useState(false);\n  const { data: scorers, isLoading: isLoadingScorers } = useScorers();\n  const rootSpan = props.anchorSpanId\n    ? props.spans?.find(span => span.spanId === props.anchorSpanId)\n    : props.spans?.find(span => span.parentSpanId == null);\n\n  return (\n    <>\n      <TraceDataPanelView\n        {...props}\n        onEvaluateTrace={() => setIsScoringOpen(true)}\n        sideView={sideView}\n        onSideViewChange={setSideView}\n      />\n      <Dialog open={isScoringOpen} onOpenChange={setIsScoringOpen}>\n        <DialogContent size=\"lg\">\n          <DialogHeader>\n            <DialogTitle>Score trace</DialogTitle>\n          </DialogHeader>\n\n          {isScoringOpen && rootSpan && (\n            <SpanScoring\n              traceId={props.traceId}\n              spanId={rootSpan.spanId}\n              entityType={rootSpan.entityType === 'agent' ? 'Agent' : 'Workflow'}\n              isTopLevelSpan={!rootSpan.parentSpanId}\n              scorers={scorers}\n              isLoadingScorers={isLoadingScorers}\n              onSuccess={() => {\n                setIsScoringOpen(false);\n                setSideView('scores');\n              }}\n            />\n          )}\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAeO,SAAS,eAAe,KAAA,EAA4B;AACzD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAA,EAAwB;AACxD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,SAAA,EAAW,gBAAA,KAAqB,UAAA,EAAW;AAClE,EAAA,MAAM,WAAW,KAAA,CAAM,YAAA,GACnB,MAAM,KAAA,EAAO,IAAA,CAAK,UAAQ,IAAA,CAAK,MAAA,KAAW,KAAA,CAAM,YAAY,IAC5D,KAAA,CAAM,KAAA,EAAO,KAAK,CAAA,IAAA,KAAQ,IAAA,CAAK,gBAAgB,IAAI,CAAA;AAEvD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,eAAA,EAAiB,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAAA,QAC5C,QAAA;AAAA,QACA,gBAAA,EAAkB;AAAA;AAAA,KACpB;AAAA,oBACA,GAAA,CAAC,UAAO,IAAA,EAAM,aAAA,EAAe,cAAc,gBAAA,EACzC,QAAA,kBAAA,IAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAK,IAAA,EAClB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,QAAA,EAAA,aAAA,EAAW,CAAA,EAC1B,CAAA;AAAA,MAEC,iBAAiB,QAAA,oBAChB,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,SAAS,KAAA,CAAM,OAAA;AAAA,UACf,QAAQ,QAAA,CAAS,MAAA;AAAA,UACjB,UAAA,EAAY,QAAA,CAAS,UAAA,KAAe,OAAA,GAAU,OAAA,GAAU,UAAA;AAAA,UACxD,cAAA,EAAgB,CAAC,QAAA,CAAS,YAAA;AAAA,UAC1B,OAAA;AAAA,UACA,gBAAA;AAAA,UACA,WAAW,MAAM;AACf,YAAA,gBAAA,CAAiB,KAAK,CAAA;AACtB,YAAA,WAAA,CAAY,QAAQ,CAAA;AAAA,UACtB;AAAA;AAAA;AACF,KAAA,EAEJ,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-id-button.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const dataPanel = require('../../../data-panel-CjvoI_lx.cjs');
+const dataPanel = require('../../../data-panel-D7Qk4iwZ.cjs');
 
 function TraceIdButton({ id }) {
   return /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.CopyId, { id });

package/dist/domains/traces/components/trace-id-button.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { D as DataPanel } from '../../../data-panel-42fdcagQ.js';
+import { D as DataPanel } from '../../../data-panel-DuLf5j8S.js';
 
 function TraceIdButton({ id }) {
   return /* @__PURE__ */ jsx(DataPanel.CopyId, { id });

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

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_components_traceThreadItemView = require('./trace-thread-item-view.cjs.js');
 const domains_traces_hooks_useThreadHasOtherTraces = require('../hooks/use-thread-has-other-traces.cjs.js');
-const Button = require('../../../Button-BnmR2HRc.cjs');
+const Button = require('../../../Button-CXhSUBxN.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function TraceMessagesPanel({

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { MessagesSquareIcon } from 'lucide-react';
 import { TraceThreadItemView } from './trace-thread-item-view.es.js';
 import { useThreadHasOtherTraces } from '../hooks/use-thread-has-other-traces.es.js';
-import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function TraceMessagesPanel({

package/dist/domains/traces/components/trace-status-value.cjs.js

@@ -12,7 +12,7 @@ const STATUS_LABELS = {
 };
 const STATUS_STYLES = {
   success: "text-success-indicator",
-  error: "text-destructive-indicator",
+  error: "text-destructive-foreground",
   running: "text-muted-foreground"
 };
 function TraceStatusValue({ status }) {

package/dist/domains/traces/components/trace-status-value.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-status-value.cjs.js","sources":["../../../../src/domains/traces/components/trace-status-value.tsx"],"sourcesContent":["import { Shimmer } from '@/ds/components/Shimmer';\n\nexport type TraceStatusValueStatus = 'success' | 'error' | 'running';\n\nconst STATUS_LABELS: Record<TraceStatusValueStatus, string> = {\n  success: 'Success',\n  error: 'Error',\n  running: 'Running',\n};\n\nconst STATUS_STYLES: Record<TraceStatusValueStatus, string> = {\n  success: 'text-success-indicator',\n  error: 'text-destructive-indicator',\n  running: 'text-muted-foreground',\n};\n\nexport interface TraceStatusValueProps {\n  status: TraceStatusValueStatus;\n}\n\nexport function TraceStatusValue({ status }: TraceStatusValueProps) {\n  const label = STATUS_LABELS[status];\n  const className = STATUS_STYLES[status];\n\n  return (\n    <Shimmer active={status === 'running'} className={className}>\n      {label}\n    </Shimmer>\n  );\n}\n"],"names":["Shimmer"],"mappings":";;;;;;;AAIA,MAAM,aAAA,GAAwD;AAAA,EAC5D,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO,OAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA;AAEA,MAAM,aAAA,GAAwD;AAAA,EAC5D,OAAA,EAAS,wBAAA;AAAA,EACT,KAAA,EAAO,4BAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA;AAMO,SAAS,gBAAA,CAAiB,EAAE,MAAA,EAAO,EAA0B;AAClE,EAAA,MAAM,KAAA,GAAQ,cAAc,MAAM,CAAA;AAClC,EAAA,MAAM,SAAA,GAAY,cAAc,MAAM,CAAA;AAEtC,EAAA,sCACGA,eAAA,EAAA,EAAQ,MAAA,EAAQ,MAAA,KAAW,SAAA,EAAW,WACpC,QAAA,EAAA,KAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-status-value.cjs.js","sources":["../../../../src/domains/traces/components/trace-status-value.tsx"],"sourcesContent":["import { Shimmer } from '@/ds/components/Shimmer';\n\nexport type TraceStatusValueStatus = 'success' | 'error' | 'running';\n\nconst STATUS_LABELS: Record<TraceStatusValueStatus, string> = {\n  success: 'Success',\n  error: 'Error',\n  running: 'Running',\n};\n\nconst STATUS_STYLES: Record<TraceStatusValueStatus, string> = {\n  success: 'text-success-indicator',\n  error: 'text-destructive-foreground',\n  running: 'text-muted-foreground',\n};\n\nexport interface TraceStatusValueProps {\n  status: TraceStatusValueStatus;\n}\n\nexport function TraceStatusValue({ status }: TraceStatusValueProps) {\n  const label = STATUS_LABELS[status];\n  const className = STATUS_STYLES[status];\n\n  return (\n    <Shimmer active={status === 'running'} className={className}>\n      {label}\n    </Shimmer>\n  );\n}\n"],"names":["Shimmer"],"mappings":";;;;;;;AAIA,MAAM,aAAA,GAAwD;AAAA,EAC5D,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO,OAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA;AAEA,MAAM,aAAA,GAAwD;AAAA,EAC5D,OAAA,EAAS,wBAAA;AAAA,EACT,KAAA,EAAO,6BAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA;AAMO,SAAS,gBAAA,CAAiB,EAAE,MAAA,EAAO,EAA0B;AAClE,EAAA,MAAM,KAAA,GAAQ,cAAc,MAAM,CAAA;AAClC,EAAA,MAAM,SAAA,GAAY,cAAc,MAAM,CAAA;AAEtC,EAAA,sCACGA,eAAA,EAAA,EAAQ,MAAA,EAAQ,MAAA,KAAW,SAAA,EAAW,WACpC,QAAA,EAAA,KAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-status-value.es.js

@@ -8,7 +8,7 @@ const STATUS_LABELS = {
 };
 const STATUS_STYLES = {
   success: "text-success-indicator",
-  error: "text-destructive-indicator",
+  error: "text-destructive-foreground",
   running: "text-muted-foreground"
 };
 function TraceStatusValue({ status }) {

package/dist/domains/traces/components/trace-status-value.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-status-value.es.js","sources":["../../../../src/domains/traces/components/trace-status-value.tsx"],"sourcesContent":["import { Shimmer } from '@/ds/components/Shimmer';\n\nexport type TraceStatusValueStatus = 'success' | 'error' | 'running';\n\nconst STATUS_LABELS: Record<TraceStatusValueStatus, string> = {\n  success: 'Success',\n  error: 'Error',\n  running: 'Running',\n};\n\nconst STATUS_STYLES: Record<TraceStatusValueStatus, string> = {\n  success: 'text-success-indicator',\n  error: 'text-destructive-indicator',\n  running: 'text-muted-foreground',\n};\n\nexport interface TraceStatusValueProps {\n  status: TraceStatusValueStatus;\n}\n\nexport function TraceStatusValue({ status }: TraceStatusValueProps) {\n  const label = STATUS_LABELS[status];\n  const className = STATUS_STYLES[status];\n\n  return (\n    <Shimmer active={status === 'running'} className={className}>\n      {label}\n    </Shimmer>\n  );\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,aAAA,GAAwD;AAAA,EAC5D,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO,OAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA;AAEA,MAAM,aAAA,GAAwD;AAAA,EAC5D,OAAA,EAAS,wBAAA;AAAA,EACT,KAAA,EAAO,4BAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA;AAMO,SAAS,gBAAA,CAAiB,EAAE,MAAA,EAAO,EAA0B;AAClE,EAAA,MAAM,KAAA,GAAQ,cAAc,MAAM,CAAA;AAClC,EAAA,MAAM,SAAA,GAAY,cAAc,MAAM,CAAA;AAEtC,EAAA,2BACG,OAAA,EAAA,EAAQ,MAAA,EAAQ,MAAA,KAAW,SAAA,EAAW,WACpC,QAAA,EAAA,KAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-status-value.es.js","sources":["../../../../src/domains/traces/components/trace-status-value.tsx"],"sourcesContent":["import { Shimmer } from '@/ds/components/Shimmer';\n\nexport type TraceStatusValueStatus = 'success' | 'error' | 'running';\n\nconst STATUS_LABELS: Record<TraceStatusValueStatus, string> = {\n  success: 'Success',\n  error: 'Error',\n  running: 'Running',\n};\n\nconst STATUS_STYLES: Record<TraceStatusValueStatus, string> = {\n  success: 'text-success-indicator',\n  error: 'text-destructive-foreground',\n  running: 'text-muted-foreground',\n};\n\nexport interface TraceStatusValueProps {\n  status: TraceStatusValueStatus;\n}\n\nexport function TraceStatusValue({ status }: TraceStatusValueProps) {\n  const label = STATUS_LABELS[status];\n  const className = STATUS_STYLES[status];\n\n  return (\n    <Shimmer active={status === 'running'} className={className}>\n      {label}\n    </Shimmer>\n  );\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,aAAA,GAAwD;AAAA,EAC5D,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO,OAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA;AAEA,MAAM,aAAA,GAAwD;AAAA,EAC5D,OAAA,EAAS,wBAAA;AAAA,EACT,KAAA,EAAO,6BAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA;AAMO,SAAS,gBAAA,CAAiB,EAAE,MAAA,EAAO,EAA0B;AAClE,EAAA,MAAM,KAAA,GAAQ,cAAc,MAAM,CAAA;AAClC,EAAA,MAAM,SAAA,GAAY,cAAc,MAAM,CAAA;AAEtC,EAAA,2BACG,OAAA,EAAA,EAAQ,MAAA,EAAQ,MAAA,KAAW,SAAA,EAAW,WACpC,QAAA,EAAA,KAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
 const domains_traces_components_traceStatusValue = require('./trace-status-value.cjs.js');
-const dataPanel = require('../../../data-panel-CjvoI_lx.cjs');
+const dataPanel = require('../../../data-panel-D7Qk4iwZ.cjs');
 const Txt = require('../../../Txt-DPmEpNbp.cjs');
 const icons_AgentIcon = require('../../../icons/AgentIcon.cjs.js');
 const icons_WorkflowIcon = require('../../../icons/WorkflowIcon.cjs.js');

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { CalendarClockIcon, TimerIcon, ArrowDownToLineIcon, ArrowUpFromLineIcon, CircleDollarSignIcon } from 'lucide-react';
 import { getSpanDurationMs } from '../utils/span-utils.es.js';
 import { TraceStatusValue } from './trace-status-value.es.js';
-import { D as DataPanel } from '../../../data-panel-42fdcagQ.js';
+import { D as DataPanel } from '../../../data-panel-DuLf5j8S.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 import { AgentIcon } from '../../../icons/AgentIcon.es.js';
 import { WorkflowIcon } from '../../../icons/WorkflowIcon.es.js';

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

@@ -10,7 +10,7 @@ const domains_chat_context_toolCallContext = require('../../chat/context/tool-ca
 const domains_chat_messages_messageRow = require('../../chat/messages/message-row.cjs.js');
 const domains_traces_components_tracesErrorContent = require('./traces-error-content.cjs.js');
 const domains_traces_hooks_useTraceSpans = require('../hooks/use-trace-spans.cjs.js');
-const Button = require('../../../Button-BnmR2HRc.cjs');
+const Button = require('../../../Button-CXhSUBxN.cjs');
 const Txt = require('../../../Txt-DPmEpNbp.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
@@ -26,7 +26,7 @@ function TraceThreadItemView({ traceId, onHighlightSpans, className }) {
   if (messages.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "body", tone: "muted", children: "No agent turn found for this trace." }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("animate-in p-4 duration-300 fade-in-0", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("min-w-0 animate-in p-4 duration-300 fade-in-0", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0", children: /* @__PURE__ */ jsxRuntime.jsx(
     domains_chat_context_toolCallContext.ToolCallProvider,
     {
       approveToolcall: noop,
@@ -50,6 +50,13 @@ function TraceThreadItemView({ traceId, onHighlightSpans, className }) {
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, {})
           }
         ) : void 0;
+        const isToolCall = message.content.parts.every((part) => part.type === "tool-invocation");
+        if (isToolCall && action) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/tool mb-3 flex items-start gap-1 last:mb-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(domains_chat_messages_messageRow.MessageRow, { message, readOnly: true, className: "flex-1" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 group-focus-within/tool:opacity-100 group-hover/tool:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0", children: action })
+          ] }, message.id);
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(domains_chat_messages_messageRow.MessageRow, { message, readOnly: true, footer: action }, message.id);
       })
     }

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

@@ -1 +1 @@
-{"version":3,"file":"trace-thread-item-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-thread-item-view.tsx"],"sourcesContent":["import { ListTreeIcon } from 'lucide-react';\nimport { formatTraceThreadMessages } from './format-trace-thread-messages';\nimport { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { ToolCallProvider } from '@/domains/chat/context/tool-call-context';\nimport { MessageRow } from '@/domains/chat/messages/message-row';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/utils/cn';\n\nexport interface TraceThreadItemViewProps {\n  traceId: string;\n  /** Called with the ids of the spans behind a message (text or tool call) when its \"Highlight spans\" action is clicked. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  className?: string;\n}\n\nconst noop = () => {};\n\nexport function TraceThreadItemView({ traceId, onHighlightSpans, className }: TraceThreadItemViewProps) {\n  const { data, isLoading, error } = useTraceSpans(traceId, { passive: true });\n\n  if (isLoading) return <TraceMessagesSkeleton className={className} />;\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"trace\" errorTitle=\"Failed to load partial thread\" />\n      </div>\n    );\n  }\n\n  const messages = data ? formatTraceThreadMessages(data.spans) : [];\n\n  if (messages.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No agent turn found for this trace.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('animate-in p-4 duration-300 fade-in-0', className)}>\n      {/* Messages carry their own vertical margins; strip them at the edges so `p-4` is the only outer spacing. */}\n      <div className=\"mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0\">\n        <ToolCallProvider\n          approveToolcall={noop}\n          declineToolcall={noop}\n          approveToolcallGenerate={noop}\n          declineToolcallGenerate={noop}\n          approveNetworkToolcall={noop}\n          declineNetworkToolcall={noop}\n          isRunning={false}\n          toolCallApprovals={{}}\n          networkToolCallApprovals={{}}\n        >\n          {messages.map(message => {\n            const action =\n              onHighlightSpans && message.traceSpanIds.length > 0 ? (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  tooltip=\"Highlight spans\"\n                  aria-label=\"Highlight spans\"\n                  onClick={() => onHighlightSpans(message.traceSpanIds)}\n                >\n                  <ListTreeIcon />\n                </Button>\n              ) : undefined;\n\n            return <MessageRow key={message.id} message={message} readOnly footer={action} />;\n          })}\n        </ToolCallProvider>\n      </div>\n    </div>\n  );\n}\n"],"names":["useTraceSpans","jsx","TraceMessagesSkeleton","TracesErrorContent","formatTraceThreadMessages","Txt","cn","ToolCallProvider","Button","ListTreeIcon","MessageRow"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,OAAO,MAAM;AAAC,CAAA;AAEb,SAAS,mBAAA,CAAoB,EAAE,OAAA,EAAS,gBAAA,EAAkB,WAAU,EAA6B;AACtG,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,KAAA,EAAM,GAAIA,iDAAc,OAAA,EAAS,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AAE3E,EAAA,IAAI,SAAA,EAAW,uBAAOC,cAAA,CAACC,qEAAA,EAAA,EAAsB,SAAA,EAAsB,CAAA;AAEnE,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,uBACED,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6CAAA,EACb,QAAA,kBAAAA,cAAA,CAACE,+DAAA,EAAA,EAAmB,KAAA,EAAc,QAAA,EAAS,OAAA,EAAQ,UAAA,EAAW,+BAAA,EAAgC,CAAA,EAChG,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,WAAW,IAAA,GAAOC,6EAAA,CAA0B,IAAA,CAAK,KAAK,IAAI,EAAC;AAEjE,EAAA,IAAI,QAAA,CAAS,WAAW,CAAA,EAAG;AACzB,IAAA,uBACEH,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6CAAA,EACb,QAAA,kBAAAA,cAAA,CAACI,OAAA,EAAA,EAAI,OAAA,EAAQ,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,QAAA,EAAA,qCAAA,EAEjC,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEJ,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWK,WAAA,CAAG,uCAAA,EAAyC,SAAS,CAAA,EAEnE,QAAA,kBAAAL,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yHAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,IAACM,qDAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAiB,IAAA;AAAA,MACjB,eAAA,EAAiB,IAAA;AAAA,MACjB,uBAAA,EAAyB,IAAA;AAAA,MACzB,uBAAA,EAAyB,IAAA;AAAA,MACzB,sBAAA,EAAwB,IAAA;AAAA,MACxB,sBAAA,EAAwB,IAAA;AAAA,MACxB,SAAA,EAAW,KAAA;AAAA,MACX,mBAAmB,EAAC;AAAA,MACpB,0BAA0B,EAAC;AAAA,MAE1B,QAAA,EAAA,QAAA,CAAS,IAAI,CAAA,OAAA,KAAW;AACvB,QAAA,MAAM,MAAA,GACJ,gBAAA,IAAoB,OAAA,CAAQ,YAAA,CAAa,SAAS,CAAA,mBAChDN,cAAA;AAAA,UAACO,aAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,OAAA;AAAA,YACR,IAAA,EAAK,SAAA;AAAA,YACL,OAAA,EAAQ,iBAAA;AAAA,YACR,YAAA,EAAW,iBAAA;AAAA,YACX,OAAA,EAAS,MAAM,gBAAA,CAAiB,OAAA,CAAQ,YAAY,CAAA;AAAA,YAEpD,yCAACC,wBAAA,EAAA,EAAa;AAAA;AAAA,SAChB,GACE,MAAA;AAEN,QAAA,uBAAOR,cAAA,CAACS,+CAA4B,OAAA,EAAkB,QAAA,EAAQ,MAAC,MAAA,EAAQ,MAAA,EAAA,EAA/C,QAAQ,EAA+C,CAAA;AAAA,MACjF,CAAC;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-thread-item-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-thread-item-view.tsx"],"sourcesContent":["import { ListTreeIcon } from 'lucide-react';\nimport { formatTraceThreadMessages } from './format-trace-thread-messages';\nimport { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { ToolCallProvider } from '@/domains/chat/context/tool-call-context';\nimport { MessageRow } from '@/domains/chat/messages/message-row';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/utils/cn';\n\nexport interface TraceThreadItemViewProps {\n  traceId: string;\n  /** Called with the ids of the spans behind a message (text or tool call) when its \"Highlight spans\" action is clicked. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  className?: string;\n}\n\nconst noop = () => {};\n\nexport function TraceThreadItemView({ traceId, onHighlightSpans, className }: TraceThreadItemViewProps) {\n  const { data, isLoading, error } = useTraceSpans(traceId, { passive: true });\n\n  if (isLoading) return <TraceMessagesSkeleton className={className} />;\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"trace\" errorTitle=\"Failed to load partial thread\" />\n      </div>\n    );\n  }\n\n  const messages = data ? formatTraceThreadMessages(data.spans) : [];\n\n  if (messages.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No agent turn found for this trace.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('min-w-0 animate-in p-4 duration-300 fade-in-0', className)}>\n      {/* Messages carry their own vertical margins; strip them at the edges so `p-4` is the only outer spacing. */}\n      <div className=\"mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0\">\n        <ToolCallProvider\n          approveToolcall={noop}\n          declineToolcall={noop}\n          approveToolcallGenerate={noop}\n          declineToolcallGenerate={noop}\n          approveNetworkToolcall={noop}\n          declineNetworkToolcall={noop}\n          isRunning={false}\n          toolCallApprovals={{}}\n          networkToolCallApprovals={{}}\n        >\n          {messages.map(message => {\n            const action =\n              onHighlightSpans && message.traceSpanIds.length > 0 ? (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  tooltip=\"Highlight spans\"\n                  aria-label=\"Highlight spans\"\n                  onClick={() => onHighlightSpans(message.traceSpanIds)}\n                >\n                  <ListTreeIcon />\n                </Button>\n              ) : undefined;\n\n            const isToolCall = message.content.parts.every(part => part.type === 'tool-invocation');\n            if (isToolCall && action) {\n              // Tool calls sit on one line, so the action goes beside the tool card instead of below it.\n              return (\n                <div key={message.id} className=\"group/tool mb-3 flex items-start gap-1 last:mb-0\">\n                  <MessageRow message={message} readOnly className=\"flex-1\" />\n                  <div className=\"shrink-0 group-focus-within/tool:opacity-100 group-hover/tool:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0\">\n                    {action}\n                  </div>\n                </div>\n              );\n            }\n\n            return <MessageRow key={message.id} message={message} readOnly footer={action} />;\n          })}\n        </ToolCallProvider>\n      </div>\n    </div>\n  );\n}\n"],"names":["useTraceSpans","jsx","TraceMessagesSkeleton","TracesErrorContent","formatTraceThreadMessages","Txt","cn","ToolCallProvider","Button","ListTreeIcon","jsxs","MessageRow"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { ListTreeIcon } from 'lucide-react';
 import { formatTraceThreadMessages } from './format-trace-thread-messages.es.js';
 import { TraceMessagesSkeleton } from './trace-messages-skeleton.es.js';
@@ -6,7 +6,7 @@ import { ToolCallProvider } from '../../chat/context/tool-call-context.es.js';
 import { MessageRow } from '../../chat/messages/message-row.es.js';
 import { TracesErrorContent } from './traces-error-content.es.js';
 import { useTraceSpans } from '../hooks/use-trace-spans.es.js';
-import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
@@ -22,7 +22,7 @@ function TraceThreadItemView({ traceId, onHighlightSpans, className }) {
   if (messages.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsx(Txt, { variant: "body", tone: "muted", children: "No agent turn found for this trace." }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("animate-in p-4 duration-300 fade-in-0", className), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: cn("min-w-0 animate-in p-4 duration-300 fade-in-0", className), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0", children: /* @__PURE__ */ jsx(
     ToolCallProvider,
     {
       approveToolcall: noop,
@@ -46,6 +46,13 @@ function TraceThreadItemView({ traceId, onHighlightSpans, className }) {
             children: /* @__PURE__ */ jsx(ListTreeIcon, {})
           }
         ) : void 0;
+        const isToolCall = message.content.parts.every((part) => part.type === "tool-invocation");
+        if (isToolCall && action) {
+          return /* @__PURE__ */ jsxs("div", { className: "group/tool mb-3 flex items-start gap-1 last:mb-0", children: [
+            /* @__PURE__ */ jsx(MessageRow, { message, readOnly: true, className: "flex-1" }),
+            /* @__PURE__ */ jsx("div", { className: "shrink-0 group-focus-within/tool:opacity-100 group-hover/tool:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0", children: action })
+          ] }, message.id);
+        }
         return /* @__PURE__ */ jsx(MessageRow, { message, readOnly: true, footer: action }, message.id);
       })
     }

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

@@ -1 +1 @@
-{"version":3,"file":"trace-thread-item-view.es.js","sources":["../../../../src/domains/traces/components/trace-thread-item-view.tsx"],"sourcesContent":["import { ListTreeIcon } from 'lucide-react';\nimport { formatTraceThreadMessages } from './format-trace-thread-messages';\nimport { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { ToolCallProvider } from '@/domains/chat/context/tool-call-context';\nimport { MessageRow } from '@/domains/chat/messages/message-row';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/utils/cn';\n\nexport interface TraceThreadItemViewProps {\n  traceId: string;\n  /** Called with the ids of the spans behind a message (text or tool call) when its \"Highlight spans\" action is clicked. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  className?: string;\n}\n\nconst noop = () => {};\n\nexport function TraceThreadItemView({ traceId, onHighlightSpans, className }: TraceThreadItemViewProps) {\n  const { data, isLoading, error } = useTraceSpans(traceId, { passive: true });\n\n  if (isLoading) return <TraceMessagesSkeleton className={className} />;\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"trace\" errorTitle=\"Failed to load partial thread\" />\n      </div>\n    );\n  }\n\n  const messages = data ? formatTraceThreadMessages(data.spans) : [];\n\n  if (messages.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No agent turn found for this trace.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('animate-in p-4 duration-300 fade-in-0', className)}>\n      {/* Messages carry their own vertical margins; strip them at the edges so `p-4` is the only outer spacing. */}\n      <div className=\"mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0\">\n        <ToolCallProvider\n          approveToolcall={noop}\n          declineToolcall={noop}\n          approveToolcallGenerate={noop}\n          declineToolcallGenerate={noop}\n          approveNetworkToolcall={noop}\n          declineNetworkToolcall={noop}\n          isRunning={false}\n          toolCallApprovals={{}}\n          networkToolCallApprovals={{}}\n        >\n          {messages.map(message => {\n            const action =\n              onHighlightSpans && message.traceSpanIds.length > 0 ? (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  tooltip=\"Highlight spans\"\n                  aria-label=\"Highlight spans\"\n                  onClick={() => onHighlightSpans(message.traceSpanIds)}\n                >\n                  <ListTreeIcon />\n                </Button>\n              ) : undefined;\n\n            return <MessageRow key={message.id} message={message} readOnly footer={action} />;\n          })}\n        </ToolCallProvider>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAkBA,MAAM,OAAO,MAAM;AAAC,CAAA;AAEb,SAAS,mBAAA,CAAoB,EAAE,OAAA,EAAS,gBAAA,EAAkB,WAAU,EAA6B;AACtG,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAW,KAAA,EAAM,GAAI,cAAc,OAAA,EAAS,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AAE3E,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,qBAAA,EAAA,EAAsB,SAAA,EAAsB,CAAA;AAEnE,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6CAAA,EACb,QAAA,kBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,KAAA,EAAc,QAAA,EAAS,OAAA,EAAQ,UAAA,EAAW,+BAAA,EAAgC,CAAA,EAChG,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,WAAW,IAAA,GAAO,yBAAA,CAA0B,IAAA,CAAK,KAAK,IAAI,EAAC;AAEjE,EAAA,IAAI,QAAA,CAAS,WAAW,CAAA,EAAG;AACzB,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6CAAA,EACb,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,OAAA,EAAQ,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,QAAA,EAAA,qCAAA,EAEjC,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,uCAAA,EAAyC,SAAS,CAAA,EAEnE,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yHAAA,EACb,QAAA,kBAAA,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAiB,IAAA;AAAA,MACjB,eAAA,EAAiB,IAAA;AAAA,MACjB,uBAAA,EAAyB,IAAA;AAAA,MACzB,uBAAA,EAAyB,IAAA;AAAA,MACzB,sBAAA,EAAwB,IAAA;AAAA,MACxB,sBAAA,EAAwB,IAAA;AAAA,MACxB,SAAA,EAAW,KAAA;AAAA,MACX,mBAAmB,EAAC;AAAA,MACpB,0BAA0B,EAAC;AAAA,MAE1B,QAAA,EAAA,QAAA,CAAS,IAAI,CAAA,OAAA,KAAW;AACvB,QAAA,MAAM,MAAA,GACJ,gBAAA,IAAoB,OAAA,CAAQ,YAAA,CAAa,SAAS,CAAA,mBAChD,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,OAAA;AAAA,YACR,IAAA,EAAK,SAAA;AAAA,YACL,OAAA,EAAQ,iBAAA;AAAA,YACR,YAAA,EAAW,iBAAA;AAAA,YACX,OAAA,EAAS,MAAM,gBAAA,CAAiB,OAAA,CAAQ,YAAY,CAAA;AAAA,YAEpD,8BAAC,YAAA,EAAA,EAAa;AAAA;AAAA,SAChB,GACE,MAAA;AAEN,QAAA,uBAAO,GAAA,CAAC,cAA4B,OAAA,EAAkB,QAAA,EAAQ,MAAC,MAAA,EAAQ,MAAA,EAAA,EAA/C,QAAQ,EAA+C,CAAA;AAAA,MACjF,CAAC;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-thread-item-view.es.js","sources":["../../../../src/domains/traces/components/trace-thread-item-view.tsx"],"sourcesContent":["import { ListTreeIcon } from 'lucide-react';\nimport { formatTraceThreadMessages } from './format-trace-thread-messages';\nimport { TraceMessagesSkeleton } from './trace-messages-skeleton';\nimport { ToolCallProvider } from '@/domains/chat/context/tool-call-context';\nimport { MessageRow } from '@/domains/chat/messages/message-row';\nimport { TracesErrorContent } from '@/domains/traces/components/traces-error-content';\nimport { useTraceSpans } from '@/domains/traces/hooks/use-trace-spans';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/utils/cn';\n\nexport interface TraceThreadItemViewProps {\n  traceId: string;\n  /** Called with the ids of the spans behind a message (text or tool call) when its \"Highlight spans\" action is clicked. */\n  onHighlightSpans?: (spanIds: string[]) => void;\n  className?: string;\n}\n\nconst noop = () => {};\n\nexport function TraceThreadItemView({ traceId, onHighlightSpans, className }: TraceThreadItemViewProps) {\n  const { data, isLoading, error } = useTraceSpans(traceId, { passive: true });\n\n  if (isLoading) return <TraceMessagesSkeleton className={className} />;\n\n  if (error) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <TracesErrorContent error={error} resource=\"trace\" errorTitle=\"Failed to load partial thread\" />\n      </div>\n    );\n  }\n\n  const messages = data ? formatTraceThreadMessages(data.spans) : [];\n\n  if (messages.length === 0) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-4\">\n        <Txt variant=\"body\" tone=\"muted\">\n          No agent turn found for this trace.\n        </Txt>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('min-w-0 animate-in p-4 duration-300 fade-in-0', className)}>\n      {/* Messages carry their own vertical margins; strip them at the edges so `p-4` is the only outer spacing. */}\n      <div className=\"mx-auto flex w-full max-w-3xl flex-col [&>[data-slot=message]:first-child]:mt-0 [&>[data-slot=message]:last-child]:mb-0\">\n        <ToolCallProvider\n          approveToolcall={noop}\n          declineToolcall={noop}\n          approveToolcallGenerate={noop}\n          declineToolcallGenerate={noop}\n          approveNetworkToolcall={noop}\n          declineNetworkToolcall={noop}\n          isRunning={false}\n          toolCallApprovals={{}}\n          networkToolCallApprovals={{}}\n        >\n          {messages.map(message => {\n            const action =\n              onHighlightSpans && message.traceSpanIds.length > 0 ? (\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  tooltip=\"Highlight spans\"\n                  aria-label=\"Highlight spans\"\n                  onClick={() => onHighlightSpans(message.traceSpanIds)}\n                >\n                  <ListTreeIcon />\n                </Button>\n              ) : undefined;\n\n            const isToolCall = message.content.parts.every(part => part.type === 'tool-invocation');\n            if (isToolCall && action) {\n              // Tool calls sit on one line, so the action goes beside the tool card instead of below it.\n              return (\n                <div key={message.id} className=\"group/tool mb-3 flex items-start gap-1 last:mb-0\">\n                  <MessageRow message={message} readOnly className=\"flex-1\" />\n                  <div className=\"shrink-0 group-focus-within/tool:opacity-100 group-hover/tool:opacity-100 motion-safe:transition-opacity pointer-fine:opacity-0\">\n                    {action}\n                  </div>\n                </div>\n              );\n            }\n\n            return <MessageRow key={message.id} message={message} readOnly footer={action} />;\n          })}\n        </ToolCallProvider>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/traces/components/trace-thread-panel.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_threadViewByTrace = require('./thread-view-by-trace.cjs.js');
-const dataPanel = require('../../../data-panel-CjvoI_lx.cjs');
+const dataPanel = require('../../../data-panel-D7Qk4iwZ.cjs');
 
 function TraceThreadPanel({
   threadId,

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { ThreadViewByTrace } from './thread-view-by-trace.es.js';
-import { D as DataPanel } from '../../../data-panel-42fdcagQ.js';
+import { D as DataPanel } from '../../../data-panel-DuLf5j8S.js';
 
 function TraceThreadPanel({
   threadId,

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_traceFilters = require('../trace-filters.cjs.js');
-const dateTimeRangePicker = require('../../../date-time-range-picker-BORAuIJM.cjs');
-const filterBarChip = require('../../../filter-bar-chip-D4CSm9KP.cjs');
+const dateTimeRangePicker = require('../../../date-time-range-picker-UheN070q.cjs');
+const filterBarChip = require('../../../filter-bar-chip-CBlHsz4A.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 const TRACE_TIME_RANGE_FIELD_ID = "timeRange";

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { traceFilterFieldColor, traceFilterFieldIcon } from '../trace-filters.es.js';
-import { D as DateTimeRangePicker } from '../../../date-time-range-picker-C-pSI1u1.js';
-import { u as useFilterBarContext, F as FilterBarChip, a as FilterBarFieldLabel, f as fieldSegmentAccentStyle, s as segmentClass, e as editableSegmentClass } from '../../../filter-bar-chip-BNPOrSrD.js';
+import { D as DateTimeRangePicker } from '../../../date-time-range-picker-BDylIIzt.js';
+import { u as useFilterBarContext, F as FilterBarChip, a as FilterBarFieldLabel, f as fieldSegmentAccentStyle, s as segmentClass, e as editableSegmentClass } from '../../../filter-bar-chip-DFOtEvpW.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
 
 const TRACE_TIME_RANGE_FIELD_ID = "timeRange";

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const domains_auth_components_permissionDenied = require('../../auth/components/permission-denied.cjs.js');
 const domains_auth_components_sessionExpired = require('../../auth/components/session-expired.cjs.js');
-const EmptyState = require('../../../EmptyState-CJ5KC4Db.cjs');
+const EmptyState = require('../../../EmptyState-CuoMGNP0.cjs');
 const utils_errors = require('../../../utils/errors.cjs.js');
 const utils_queryUtils = require('../../../utils/query-utils.cjs.js');
 

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { PermissionDenied } from '../../auth/components/permission-denied.es.js';
 import { SessionExpired } from '../../auth/components/session-expired.es.js';
-import { E as EmptyState } from '../../../EmptyState-CynkaZd1.js';
+import { E as EmptyState } from '../../../EmptyState-DyyUFpzY.js';
 import { parseError } from '../../../utils/errors.es.js';
 import { is401UnauthorizedError, is403ForbiddenError } from '../../../utils/query-utils.es.js';
 

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
-const Button = require('../../../Button-BnmR2HRc.cjs');
+const Button = require('../../../Button-CXhSUBxN.cjs');
 const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
 
 const TRACES_LIST_MODE_LABELS = {

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDownIcon } from 'lucide-react';
-import { B as Button } from '../../../Button-C6eUqcPI.js';
+import { B as Button } from '../../../Button-D43ghVKt.js';
 import { D as DropdownMenu } from '../../../dropdown-menu-DpEn6HwK.js';
 
 const TRACES_LIST_MODE_LABELS = {

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

@@ -8,9 +8,9 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
-const dataList = require('../../../data-list-D8bACyyK.cjs');
+const dataList = require('../../../data-list-Y42KyuI1.cjs');
 const dataListSkeleton = require('../../../data-list-skeleton-BXPfL0s7.cjs');
-const tracesDataList = require('../../../traces-data-list-CU93pUfj.cjs');
+const tracesDataList = require('../../../traces-data-list-BsAYYJ9t.cjs');
 const useDataListKeyboard = require('../../../use-data-list-keyboard-DF3tLe10.cjs');
 const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
 const Txt = require('../../../Txt-DPmEpNbp.cjs');

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

@@ -4,9 +4,9 @@ import { ListFilterIcon } from 'lucide-react';
 import { useRef, useEffect } from 'react';
 import { buildTraceListColumns, hasTraceColumn, DEFAULT_TRACE_COLUMN_PREFERENCES, TRACE_CUSTOM_COLUMN_LABELS, formatTraceMetadataValue } from '../trace-list-columns.es.js';
 import { getInputPreview, getSpanDurationMs } from '../utils/span-utils.es.js';
-import { D as DataList } from '../../../data-list-DL_oFE4j.js';
+import { D as DataList } from '../../../data-list-CyeD_u-6.js';
 import { D as DataListSkeleton } from '../../../data-list-skeleton-Bk9LI0J0.js';
-import { T as TracesDataList } from '../../../traces-data-list-DaedGcID.js';
+import { T as TracesDataList } from '../../../traces-data-list-CnNpGVRN.js';
 import { u as useDataListKeyboard } from '../../../use-data-list-keyboard-DFQr4t38.js';
 import { D as DropdownMenu } from '../../../dropdown-menu-DpEn6HwK.js';
 import { T as Txt } from '../../../Txt-BP1SRHmL.js';

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
 const dataListSkeleton = require('../../../data-list-skeleton-BXPfL0s7.cjs');
+require('react');
+require('../../../keyboard/keyboard-shortcuts-context.cjs.js');
 const skeleton = require('../../../skeleton-cXUjPrq9.cjs');
 
 function TracesPageSkeleton({ columnPreferences = domains_traces_traceListColumns.DEFAULT_TRACE_COLUMN_PREFERENCES }) {

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

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

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

@@ -1,6 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { buildTraceListColumns, DEFAULT_TRACE_COLUMN_PREFERENCES } from '../trace-list-columns.es.js';
 import { D as DataListSkeleton } from '../../../data-list-skeleton-Bk9LI0J0.js';
+import 'react';
+import '../../../keyboard/keyboard-shortcuts-context.es.js';
 import { S as Skeleton } from '../../../skeleton-BsRAXyh5.js';
 
 function TracesPageSkeleton({ columnPreferences = DEFAULT_TRACE_COLUMN_PREFERENCES }) {

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

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

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

@@ -33,8 +33,8 @@ function lightSpanToTraceQueryTrace(span) {
     createdAt: toIsoString(span.createdAt),
     metadata: span.metadata ?? null,
     inputPreview: span.inputPreview ?? null,
-    threadId: null,
-    resourceId: null,
+    threadId: span.threadId ?? null,
+    resourceId: span.resourceId ?? null,
     startedAt: toIsoString(span.startedAt),
     endedAt: span.endedAt == null ? span.endedAt : toIsoString(span.endedAt),
     entityName: span.entityName ?? null,