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

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

@@ -1,26 +1,35 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Columns3Icon, PlusIcon, X, Columns3 } from 'lucide-react';
-import { useState } from 'react';
-import { TRACE_USAGE_COLUMNS } from '../trace-list-columns.es.js';
-import { B as Button } from '../../../Button-DS6O6fvU.js';
-import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, d as DialogDescription, e as DialogBody, g as DialogFooter } from '../../../dialog-C60a4DWO.js';
-import { D as DropdownMenu } from '../../../dropdown-menu-B3nTlFnz.js';
-import { I as Input } from '../../../input-kU7nI6V5.js';
-import { L as Label } from '../../../label-NULyP-1Q.js';
+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-cWcBEd-G.js';
+import { C as Combobox } from '../../../combobox-D7xJFZuO.js';
+import '@base-ui/react/combobox';
+import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, d as DialogDescription, e as DialogBody, g as DialogFooter } from '../../../dialog-DRpMek34.js';
+import { D as DropdownMenu } from '../../../dropdown-menu-DL0MzjEb.js';
+import { F as FieldBlock } from '../../../field-block-DWkbNcsV.js';
 
-const STANDARD_COLUMNS = ["input", "entity", "duration"];
+const METADATA_KEY_FIELD_NAME = "trace-metadata-key";
+const EMPTY_KEYS = [];
+const STANDARD_COLUMNS = ["type", "input", "duration", "endTime", "environment"];
 const COLUMN_LABELS = {
+  type: "Type",
   input: "Input",
-  entity: "Entity",
   duration: "Duration",
+  endTime: "End",
+  environment: "Environment",
   inputTokens: "Input tokens",
   outputTokens: "Output tokens",
+  totalTokens: "Total tokens",
   estimatedCost: "Estimated cost"
 };
 function TraceColumnsMenu({
   preferences,
+  availableMetadataKeys = EMPTY_KEYS,
   usageDisabledReason,
   onToggleColumn,
+  onAddCustomColumn,
+  onRemoveCustomColumn,
   onAddMetadataColumn,
   onRemoveMetadataColumn,
   onReset
@@ -28,6 +37,11 @@ function TraceColumnsMenu({
   const [isMetadataDialogOpen, setIsMetadataDialogOpen] = useState(false);
   const [metadataKey, setMetadataKey] = useState("");
   const [metadataError, setMetadataError] = useState();
+  const metadataKeyOptions = useMemo(() => {
+    const keys = availableMetadataKeys.filter((key) => !preferences.metadataKeys.includes(key));
+    if (metadataKey && !keys.includes(metadataKey)) keys.push(metadataKey);
+    return keys.map((key) => ({ label: key, value: key }));
+  }, [availableMetadataKeys, preferences.metadataKeys, metadataKey]);
   const handleDialogOpenChange = (open) => {
     setIsMetadataDialogOpen(open);
     if (!open) {
@@ -80,7 +94,21 @@ function TraceColumnsMenu({
           },
           column
         )),
-        usageDisabledReason && /* @__PURE__ */ jsx("p", { className: "text-ui-xs leading-ui-sm text-neutral2 px-2 py-1", role: "note", children: usageDisabledReason }),
+        usageDisabledReason && /* @__PURE__ */ jsx("p", { className: "text-meta text-placeholder px-2 py-1", role: "note", children: usageDisabledReason }),
+        /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+        /* @__PURE__ */ jsx(DropdownMenu.Label, { children: "Custom columns" }),
+        TRACE_CUSTOM_COLUMN_FIELDS.map((field) => {
+          const isVisible = preferences.customColumns.includes(field);
+          return /* @__PURE__ */ jsx(
+            DropdownMenu.CheckboxItem,
+            {
+              checked: isVisible,
+              onCheckedChange: () => isVisible ? onRemoveCustomColumn(field) : onAddCustomColumn(field),
+              children: TRACE_CUSTOM_COLUMN_LABELS[field]
+            },
+            field
+          );
+        }),
         /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
         /* @__PURE__ */ jsx(DropdownMenu.Label, { children: "Metadata columns" }),
         preferences.metadataKeys.map((key) => /* @__PURE__ */ jsx(
@@ -104,27 +132,29 @@ function TraceColumnsMenu({
     /* @__PURE__ */ jsx(Dialog, { open: isMetadataDialogOpen, onOpenChange: handleDialogOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs("form", { onSubmit: handleAddMetadata, children: [
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsx(DialogTitle, { children: "Add metadata column" }),
-        /* @__PURE__ */ jsx(DialogDescription, { children: "Enter a top-level trace metadata key. Only the key is saved, never its values." })
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Pick a top-level trace metadata key observed in the current time range, or type one. Only the key is saved, never its values." })
       ] }),
-      /* @__PURE__ */ jsxs(DialogBody, { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "trace-metadata-key", children: "Metadata key" }),
+      /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsxs(FieldBlock.Column, { children: [
+        /* @__PURE__ */ jsx(FieldBlock.Label, { name: METADATA_KEY_FIELD_NAME, children: "Metadata key" }),
         /* @__PURE__ */ jsx(
-          Input,
+          Combobox,
           {
-            id: "trace-metadata-key",
+            id: `input-${METADATA_KEY_FIELD_NAME}`,
+            name: METADATA_KEY_FIELD_NAME,
+            options: metadataKeyOptions,
             value: metadataKey,
-            onChange: (event) => {
-              setMetadataKey(event.target.value);
+            onValueChange: (key) => {
+              setMetadataKey(key);
               setMetadataError(void 0);
             },
-            placeholder: "tenantId",
-            autoFocus: true,
-            error: Boolean(metadataError),
-            "aria-describedby": metadataError ? "trace-metadata-key-error" : void 0
+            allowCustomValue: true,
+            placeholder: "Select a metadata key…",
+            searchPlaceholder: "Search metadata keys…",
+            emptyText: "No metadata keys observed. Type one to add it.",
+            error: metadataError
           }
-        ),
-        metadataError && /* @__PURE__ */ jsx("p", { id: "trace-metadata-key-error", className: "text-ui-xs text-error", role: "alert", children: metadataError })
-      ] }),
+        )
+      ] }) }),
       /* @__PURE__ */ jsxs(DialogFooter, { children: [
         /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(X, {}), type: "button", variant: "outline", onClick: () => handleDialogOpenChange(false), children: "Cancel" }),
         /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(Columns3, {}), type: "submit", variant: "primary", children: "Add column" })

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

@@ -1 +1 @@
-{"version":3,"file":"trace-columns-menu.es.js","sources":["../../../../src/domains/traces/components/trace-columns-menu.tsx"],"sourcesContent":["import { Columns3Icon, PlusIcon, Columns3, X } from 'lucide-react';\nimport { useState, type FormEvent } from 'react';\nimport { TRACE_USAGE_COLUMNS } from '../trace-list-columns';\nimport type { TraceColumnPreferences, TraceOptionalColumn } from '../trace-list-columns';\nimport { Button } from '@/ds/components/Button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { Input } from '@/ds/components/Input';\nimport { Label } from '@/ds/components/Label';\n\nconst STANDARD_COLUMNS: readonly TraceOptionalColumn[] = ['input', 'entity', 'duration'];\n\nconst COLUMN_LABELS: Record<TraceOptionalColumn, string> = {\n  input: 'Input',\n  entity: 'Entity',\n  duration: 'Duration',\n  inputTokens: 'Input tokens',\n  outputTokens: 'Output tokens',\n  estimatedCost: 'Estimated cost',\n};\n\ntype TraceColumnsMenuProps = {\n  preferences: TraceColumnPreferences;\n  usageDisabledReason?: string;\n  onToggleColumn: (column: TraceOptionalColumn) => void;\n  onAddMetadataColumn: (key: string) => void;\n  onRemoveMetadataColumn: (key: string) => void;\n  onReset: () => void;\n};\n\nexport function TraceColumnsMenu({\n  preferences,\n  usageDisabledReason,\n  onToggleColumn,\n  onAddMetadataColumn,\n  onRemoveMetadataColumn,\n  onReset,\n}: TraceColumnsMenuProps) {\n  const [isMetadataDialogOpen, setIsMetadataDialogOpen] = useState(false);\n  const [metadataKey, setMetadataKey] = useState('');\n  const [metadataError, setMetadataError] = useState<string | undefined>();\n\n  const handleDialogOpenChange = (open: boolean) => {\n    setIsMetadataDialogOpen(open);\n    if (!open) {\n      setMetadataKey('');\n      setMetadataError(undefined);\n    }\n  };\n\n  const handleAddMetadata = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const normalizedKey = metadataKey.trim();\n    if (!normalizedKey) {\n      setMetadataError('Enter a metadata key.');\n      return;\n    }\n    if (preferences.metadataKeys.includes(normalizedKey)) {\n      setMetadataError('That metadata column is already visible.');\n      return;\n    }\n\n    onAddMetadataColumn(normalizedKey);\n    handleDialogOpenChange(false);\n  };\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenu.Trigger\n          render={\n            <Button variant=\"ghost\" size=\"md\" icon={<Columns3Icon aria-hidden />}>\n              Columns\n            </Button>\n          }\n        />\n        <DropdownMenu.Content align=\"end\" className=\"min-w-56\">\n          <DropdownMenu.Label>Standard columns</DropdownMenu.Label>\n          {STANDARD_COLUMNS.map(column => (\n            <DropdownMenu.CheckboxItem\n              key={column}\n              checked={preferences.visibleColumns.includes(column)}\n              onCheckedChange={() => onToggleColumn(column)}\n            >\n              {COLUMN_LABELS[column]}\n            </DropdownMenu.CheckboxItem>\n          ))}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Usage columns</DropdownMenu.Label>\n          {TRACE_USAGE_COLUMNS.map(column => (\n            <DropdownMenu.CheckboxItem\n              key={column}\n              checked={preferences.visibleColumns.includes(column)}\n              disabled={Boolean(usageDisabledReason)}\n              onCheckedChange={() => onToggleColumn(column)}\n            >\n              {COLUMN_LABELS[column]}\n            </DropdownMenu.CheckboxItem>\n          ))}\n          {usageDisabledReason && (\n            <p className=\"text-ui-xs leading-ui-sm text-neutral2 px-2 py-1\" role=\"note\">\n              {usageDisabledReason}\n            </p>\n          )}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Metadata columns</DropdownMenu.Label>\n          {preferences.metadataKeys.map(key => (\n            <DropdownMenu.CheckboxItem\n              key={key}\n              checked\n              title={key}\n              onCheckedChange={() => onRemoveMetadataColumn(key)}\n            >\n              {key}\n            </DropdownMenu.CheckboxItem>\n          ))}\n          <DropdownMenu.Item onSelect={() => setIsMetadataDialogOpen(true)}>\n            <PlusIcon aria-hidden />\n            Add metadata column\n          </DropdownMenu.Item>\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item onSelect={onReset}>Reset to defaults</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      <Dialog open={isMetadataDialogOpen} onOpenChange={handleDialogOpenChange}>\n        <DialogContent>\n          <form onSubmit={handleAddMetadata}>\n            <DialogHeader>\n              <DialogTitle>Add metadata column</DialogTitle>\n              <DialogDescription>\n                Enter a top-level trace metadata key. Only the key is saved, never its values.\n              </DialogDescription>\n            </DialogHeader>\n            <DialogBody className=\"space-y-2\">\n              <Label htmlFor=\"trace-metadata-key\">Metadata key</Label>\n              <Input\n                id=\"trace-metadata-key\"\n                value={metadataKey}\n                onChange={event => {\n                  setMetadataKey(event.target.value);\n                  setMetadataError(undefined);\n                }}\n                placeholder=\"tenantId\"\n                autoFocus\n                error={Boolean(metadataError)}\n                aria-describedby={metadataError ? 'trace-metadata-key-error' : undefined}\n              />\n              {metadataError && (\n                <p id=\"trace-metadata-key-error\" className=\"text-ui-xs text-error\" role=\"alert\">\n                  {metadataError}\n                </p>\n              )}\n            </DialogBody>\n            <DialogFooter>\n              <Button icon={<X />} type=\"button\" variant=\"outline\" onClick={() => handleDialogOpenChange(false)}>\n                Cancel\n              </Button>\n              <Button icon={<Columns3 />} type=\"submit\" variant=\"primary\">\n                Add column\n              </Button>\n            </DialogFooter>\n          </form>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"trace-columns-menu.es.js","sources":["../../../../src/domains/traces/components/trace-columns-menu.tsx"],"sourcesContent":["import { Columns3Icon, PlusIcon, Columns3, X } from 'lucide-react';\nimport { useMemo, useState, type FormEvent } from 'react';\nimport { TRACE_CUSTOM_COLUMN_FIELDS, TRACE_CUSTOM_COLUMN_LABELS, TRACE_USAGE_COLUMNS } from '../trace-list-columns';\nimport type { TraceColumnPreferences, TraceCustomColumn, TraceOptionalColumn } from '../trace-list-columns';\nimport { Button } from '@/ds/components/Button';\nimport { Combobox } from '@/ds/components/Combobox';\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { FieldBlock } from '@/ds/components/FormFieldBlocks';\n\nconst METADATA_KEY_FIELD_NAME = 'trace-metadata-key';\nconst EMPTY_KEYS: readonly string[] = [];\n\nconst STANDARD_COLUMNS: readonly TraceOptionalColumn[] = ['type', 'input', 'duration', 'endTime', 'environment'];\n\nconst COLUMN_LABELS: Record<TraceOptionalColumn, string> = {\n  type: 'Type',\n  input: 'Input',\n  duration: 'Duration',\n  endTime: 'End',\n  environment: 'Environment',\n  inputTokens: 'Input tokens',\n  outputTokens: 'Output tokens',\n  totalTokens: 'Total tokens',\n  estimatedCost: 'Estimated cost',\n};\n\ntype TraceColumnsMenuProps = {\n  preferences: TraceColumnPreferences;\n  /** Top-level metadata keys observed on traces in the current time range, offered in the picker. */\n  availableMetadataKeys?: readonly string[];\n  usageDisabledReason?: string;\n  onToggleColumn: (column: TraceOptionalColumn) => void;\n  onAddCustomColumn: (field: TraceCustomColumn) => void;\n  onRemoveCustomColumn: (field: TraceCustomColumn) => void;\n  onAddMetadataColumn: (key: string) => void;\n  onRemoveMetadataColumn: (key: string) => void;\n  onReset: () => void;\n};\n\nexport function TraceColumnsMenu({\n  preferences,\n  availableMetadataKeys = EMPTY_KEYS,\n  usageDisabledReason,\n  onToggleColumn,\n  onAddCustomColumn,\n  onRemoveCustomColumn,\n  onAddMetadataColumn,\n  onRemoveMetadataColumn,\n  onReset,\n}: TraceColumnsMenuProps) {\n  const [isMetadataDialogOpen, setIsMetadataDialogOpen] = useState(false);\n  const [metadataKey, setMetadataKey] = useState('');\n  const [metadataError, setMetadataError] = useState<string | undefined>();\n\n  // Keys already shown as columns are left out; a typed key that discovery\n  // hasn't seen is kept in the list so the trigger can display it once picked.\n  const metadataKeyOptions = useMemo(() => {\n    const keys = availableMetadataKeys.filter(key => !preferences.metadataKeys.includes(key));\n    if (metadataKey && !keys.includes(metadataKey)) keys.push(metadataKey);\n    return keys.map(key => ({ label: key, value: key }));\n  }, [availableMetadataKeys, preferences.metadataKeys, metadataKey]);\n\n  const handleDialogOpenChange = (open: boolean) => {\n    setIsMetadataDialogOpen(open);\n    if (!open) {\n      setMetadataKey('');\n      setMetadataError(undefined);\n    }\n  };\n\n  const handleAddMetadata = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const normalizedKey = metadataKey.trim();\n    if (!normalizedKey) {\n      setMetadataError('Enter a metadata key.');\n      return;\n    }\n    if (preferences.metadataKeys.includes(normalizedKey)) {\n      setMetadataError('That metadata column is already visible.');\n      return;\n    }\n\n    onAddMetadataColumn(normalizedKey);\n    handleDialogOpenChange(false);\n  };\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenu.Trigger\n          render={\n            <Button variant=\"ghost\" size=\"md\" icon={<Columns3Icon aria-hidden />}>\n              Columns\n            </Button>\n          }\n        />\n        <DropdownMenu.Content align=\"end\" className=\"min-w-56\">\n          <DropdownMenu.Label>Standard columns</DropdownMenu.Label>\n          {STANDARD_COLUMNS.map(column => (\n            <DropdownMenu.CheckboxItem\n              key={column}\n              checked={preferences.visibleColumns.includes(column)}\n              onCheckedChange={() => onToggleColumn(column)}\n            >\n              {COLUMN_LABELS[column]}\n            </DropdownMenu.CheckboxItem>\n          ))}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Usage columns</DropdownMenu.Label>\n          {TRACE_USAGE_COLUMNS.map(column => (\n            <DropdownMenu.CheckboxItem\n              key={column}\n              checked={preferences.visibleColumns.includes(column)}\n              disabled={Boolean(usageDisabledReason)}\n              onCheckedChange={() => onToggleColumn(column)}\n            >\n              {COLUMN_LABELS[column]}\n            </DropdownMenu.CheckboxItem>\n          ))}\n          {usageDisabledReason && (\n            <p className=\"text-meta text-placeholder px-2 py-1\" role=\"note\">\n              {usageDisabledReason}\n            </p>\n          )}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Custom columns</DropdownMenu.Label>\n          {TRACE_CUSTOM_COLUMN_FIELDS.map(field => {\n            const isVisible = preferences.customColumns.includes(field);\n            return (\n              <DropdownMenu.CheckboxItem\n                key={field}\n                checked={isVisible}\n                onCheckedChange={() => (isVisible ? onRemoveCustomColumn(field) : onAddCustomColumn(field))}\n              >\n                {TRACE_CUSTOM_COLUMN_LABELS[field]}\n              </DropdownMenu.CheckboxItem>\n            );\n          })}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Label>Metadata columns</DropdownMenu.Label>\n          {preferences.metadataKeys.map(key => (\n            <DropdownMenu.CheckboxItem\n              key={key}\n              checked\n              title={key}\n              onCheckedChange={() => onRemoveMetadataColumn(key)}\n            >\n              {key}\n            </DropdownMenu.CheckboxItem>\n          ))}\n          <DropdownMenu.Item onSelect={() => setIsMetadataDialogOpen(true)}>\n            <PlusIcon aria-hidden />\n            Add metadata column\n          </DropdownMenu.Item>\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item onSelect={onReset}>Reset to defaults</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      <Dialog open={isMetadataDialogOpen} onOpenChange={handleDialogOpenChange}>\n        <DialogContent>\n          <form onSubmit={handleAddMetadata}>\n            <DialogHeader>\n              <DialogTitle>Add metadata column</DialogTitle>\n              <DialogDescription>\n                Pick a top-level trace metadata key observed in the current time range, or type one. Only the key is\n                saved, never its values.\n              </DialogDescription>\n            </DialogHeader>\n            <DialogBody>\n              <FieldBlock.Column>\n                <FieldBlock.Label name={METADATA_KEY_FIELD_NAME}>Metadata key</FieldBlock.Label>\n                <Combobox\n                  id={`input-${METADATA_KEY_FIELD_NAME}`}\n                  name={METADATA_KEY_FIELD_NAME}\n                  options={metadataKeyOptions}\n                  value={metadataKey}\n                  onValueChange={key => {\n                    setMetadataKey(key);\n                    setMetadataError(undefined);\n                  }}\n                  allowCustomValue\n                  placeholder=\"Select a metadata key…\"\n                  searchPlaceholder=\"Search metadata keys…\"\n                  emptyText=\"No metadata keys observed. Type one to add it.\"\n                  error={metadataError}\n                />\n              </FieldBlock.Column>\n            </DialogBody>\n            <DialogFooter>\n              <Button icon={<X />} type=\"button\" variant=\"outline\" onClick={() => handleDialogOpenChange(false)}>\n                Cancel\n              </Button>\n              <Button icon={<Columns3 />} type=\"submit\" variant=\"primary\">\n                Add column\n              </Button>\n            </DialogFooter>\n          </form>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -13,19 +13,19 @@ 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-C2dx_QZN.cjs');
-const buttonsGroup = require('../../../buttons-group-yLVV4nzz.cjs');
-const dataPanel = require('../../../data-panel-BhJ8Lp_j.cjs');
-const dropdownMenu = require('../../../dropdown-menu-DfX8T0jb.cjs');
-const searchFieldBlock = require('../../../search-field-block-jfMFV7AD.cjs');
-const Notice = require('../../../Notice-Cq7m_mxe.cjs');
-const tabsRoot = require('../../../tabs-root-DcnvZuD4.cjs');
-const tabsTab = require('../../../tabs-tab-tRgFBx85.cjs');
+const Button = require('../../../Button-CVewl8nT.cjs');
+const buttonsGroup = require('../../../buttons-group-BiLEV_Ak.cjs');
+const dataPanel = require('../../../data-panel-CWZJKBeW.cjs');
+const dropdownMenu = require('../../../dropdown-menu-DNRCA4Gj.cjs');
+const searchFieldBlock = require('../../../search-field-block-D0PUUCAE.cjs');
+const Notice = require('../../../Notice-Cjti0e0j.cjs');
+const tabsRoot = require('../../../tabs-root-C5ABfm1F.cjs');
+const tabsTab = require('../../../tabs-tab-DA466DbX.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');
 const hooks_useTextHighlight = require('../../../hooks/use-text-highlight.cjs.js');
-const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
 
 function TraceDataPanelView({
   traceId,
@@ -69,7 +69,7 @@ function TraceDataPanelView({
       views.push({
         value: "messages",
         label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareTextIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareTextIcon, {}) }),
           "Messages"
         ] })
       });
@@ -78,7 +78,7 @@ function TraceDataPanelView({
       views.push({
         value: "feedback",
         label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareReplyIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareReplyIcon, {}) }),
           "Feedback",
           feedbackTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             " (",
@@ -92,7 +92,7 @@ function TraceDataPanelView({
       views.push({
         value: "scores",
         label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(icons_ScorersIcon.ScorersIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "xs", children: /* @__PURE__ */ jsxRuntime.jsx(icons_ScorersIcon.ScorersIcon, {}) }),
           "Scores",
           scoresTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             " (",
@@ -188,7 +188,7 @@ function TraceDataPanelView({
     ] })
   ] });
   const sideColumn = traceId && sideView ? /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-trace-side-column": true, className: "flex h-full min-h-0 min-w-0 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.Tabs, { defaultTab: sideView, value: sideView, onValueChange: handleSideViewChange, children: /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: "border-border1 border-b", children: /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { variant: "pill-ghost", size: "sm", children: sideViews.map((view) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: view.value, children: view.label }, view.value)) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.Tabs, { defaultTab: sideView, value: sideView, onValueChange: handleSideViewChange, children: /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: "border-border border-b", children: /* @__PURE__ */ jsxRuntime.jsx(tabsRoot.TabList, { variant: "pill-ghost", size: "sm", children: sideViews.map((view) => /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: view.value, children: view.label }, view.value)) }) }) }),
     sideView === "messages" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { className: "p-0", children: messagesPanelSlot }),
     sideView === "feedback" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: feedbackTabSlot?.({ traceId }) }),
     sideView === "scores" && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId }) })
@@ -249,7 +249,7 @@ function TraceDataPanelView({
             spanPanelKey: selectedSpanId,
             children: !isLoading && !spans?.length ? /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.NoData, { children: "No spans found for this trace." }) : (() => {
               const isTimeline = spanView === "timeline";
-              const searchHeader = /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Header, { className: "border-border1 gap-2 border-b", children: [
+              const searchHeader = /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Header, { className: "border-border gap-2 border-b", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   searchFieldBlock.SearchFieldBlock,
                   {
@@ -261,11 +261,10 @@ function TraceDataPanelView({
                     onChange: (e) => setQuery(e.target.value),
                     onReset: () => setQuery(""),
                     size: "sm",
-                    variant: "outline",
                     className: "w-full"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { spacing: "close", className: "shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { className: "shrink-0", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Button.Button,
                     {
@@ -334,7 +333,7 @@ function TracePanelColumns({
         sideColumnSlot ? spanPanelSlot ? "grid-cols-[18rem_1fr_1fr] lg:grid-cols-[24rem_1fr_1fr]" : "grid-cols-[18rem_1fr_0fr] lg:grid-cols-[24rem_1fr_0fr]" : spanPanelSlot ? "grid-cols-[0px_1fr_1fr]" : "grid-cols-[0px_1fr_0fr]"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex min-h-0 min-w-0 flex-col overflow-hidden", sideColumnSlot && "border-r border-border1"), children: sideColumnSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex min-h-0 min-w-0 flex-col overflow-hidden", sideColumnSlot && "border-r border-border"), children: sideColumnSlot }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 min-w-0 flex-col overflow-hidden", children }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -343,7 +342,7 @@ function TracePanelColumns({
             "data-highlight": true,
             className: utils_cn.cn(
               "flex min-h-0 min-w-0 flex-col overflow-hidden",
-              spanPanelSlot && "animate-in border-l border-border1 duration-300 fade-in-0"
+              spanPanelSlot && "animate-in border-l border-border duration-300 fade-in-0"
             ),
             children: spanPanelSlot
           }

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

@@ -1 +1 @@
-{"version":3,"file":"trace-data-panel-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-data-panel-view.tsx"],"sourcesContent":["import {\n  ChartGanttIcon,\n  CircleGaugeIcon,\n  DownloadIcon,\n  Link2Icon,\n  ListTreeIcon,\n  Loader2Icon,\n  MessageSquareReplyIcon,\n  MessageSquareTextIcon,\n  MoreHorizontalIcon,\n  SaveIcon,\n  WrenchIcon,\n} from 'lucide-react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { useDownloadTraceJson } from '../hooks/use-download-trace-json';\nimport { useTraceSearch } from '../hooks/use-trace-search';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport type { SearchableSpan } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTimeline } from './trace-span-timeline';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { TraceSummaryDescription } from './trace-summary-description';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelProps } from '@/ds/components/DataPanel';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { SearchFieldBlock } from '@/ds/components/FormFieldBlocks';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { useScrollToFirstHighlight } from '@/hooks/use-scroll-to-first-highlight';\nimport { useTextHighlight } from '@/hooks/use-text-highlight';\nimport { cn } from '@/lib/utils';\n\nexport type TraceDataPanelPlacement = 'traces-list' | 'trace-page';\n\nexport type TraceSpanView = 'tree' | 'timeline';\n\n/** What the side column next to the span tree shows. */\nexport type TraceSideView = 'messages' | 'feedback' | 'scores';\n\nexport interface TraceDataPanelViewProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: SearchableSpan[] | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  onSpanSelect?: (spanId: string | undefined) => void;\n  onEvaluateTrace?: () => void;\n  /** When set, an \"Add full trace to dataset\" button appears; the consumer owns the dialog. */\n  onSaveAsDatasetItem?: (args: { traceId: string; rootSpanId: string | undefined }) => void;\n  /** When set, an \"Add tool mocks to item\" button appears; the consumer owns the dialog. */\n  onAddTraceMocksToItem?: (args: { traceId: string }) => void;\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  /** Drawer width; defaults to `wide` since the panel lays out several columns. */\n  size?: DataPanelProps['size'];\n  /** Elevation when opened next to other sibling panels. */\n  depth?: DataPanelProps['depth'];\n  /** Rendered inside the drawer above the trace header (e.g. inbox feedback context). */\n  headerSlot?: ReactNode;\n  /** Accessible drawer name; defaults to the trace id. */\n  title?: string;\n  placement: TraceDataPanelPlacement;\n  /** @deprecated No longer used: the panel renders the span tree with the duration as text. */\n  timelineChartWidth?: 'wide' | 'default';\n  /** When both are provided, renders an \"Open trace page\" button. */\n  LinkComponent?: LinkComponent;\n  traceHref?: string;\n  /** When provided, the entity name in the trace summary links to the entity's page. */\n  entityHref?: string;\n  /** Token and estimated-cost totals shown in the compact trace summary. */\n  usage?: TraceUsageSummary;\n  /**\n   * Span treated as the displayed root of the timeline. Required for branch\n   * subtrees from `getBranch` where the anchor has a real parent that's outside\n   * `spans`. When omitted, the span with no parent is used (trace case).\n   */\n  anchorSpanId?: string;\n  /**\n   * Whether to render the \"Evaluating traces and saving them as dataset items is\n   * available in Mastra Studio\" info notice when neither `onEvaluateTrace` nor\n   * `onSaveAsDatasetItem` is provided. Defaults to `true`. Pass `false` when this\n   * panel is rendered inside Studio in a context that intentionally omits those\n   * handlers (e.g. inline below an experiment result).\n   */\n  showUnavailableFeaturesMsg?: boolean;\n  /**\n   * When provided, a \"Scores\" tab appears; the slot renders whatever trace-level\n   * scoring UI the consumer wants.\n   */\n  scoresTabSlot?: (args: { traceId: string; rootSpanId: string | undefined }) => ReactNode;\n  /** Optional count shown in the \"Scores\" tab label. */\n  scoresTabBadge?: ReactNode;\n  /**\n   * When provided, a \"Feedback\" tab appears; the slot renders the trace-level\n   * feedback UI. Trace feedback is not scoped to a span — the span panel owns that.\n   */\n  feedbackTabSlot?: (args: { traceId: string }) => ReactNode;\n  /** Optional count rendered after the \"Feedback\" tab label, e.g. `Feedback (3)`. */\n  feedbackTabBadge?: ReactNode;\n  /** Span ids to feature in the timeline; every other span is faded. */\n  featuredSpanIds?: string[];\n  /**\n   * The \"Messages\" view of the side column next to the span tree (typically the\n   * trace as one reconstructed agent turn). Rendered without content padding.\n   */\n  messagesPanelSlot?: ReactNode;\n  /** Controlled span view (tree or timeline); falls back to local state starting on the tree. */\n  spanView?: TraceSpanView;\n  onSpanViewChange?: (view: TraceSpanView) => void;\n  /** Controlled side column view; falls back to the first available view. */\n  sideView?: TraceSideView;\n  onSideViewChange?: (view: TraceSideView) => void;\n  /**\n   * Rendered as a column to the right of the timeline inside the same card;\n   * typically the span detail.\n   */\n  spanPanelSlot?: ReactNode;\n}\n\nexport function TraceDataPanelView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  onEvaluateTrace,\n  onSaveAsDatasetItem,\n  onAddTraceMocksToItem,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  size = 'wide',\n  depth,\n  headerSlot,\n  title,\n  placement,\n  LinkComponent,\n  traceHref,\n  entityHref,\n  usage,\n  anchorSpanId,\n  showUnavailableFeaturesMsg = true,\n  scoresTabSlot,\n  scoresTabBadge,\n  feedbackTabSlot,\n  feedbackTabBadge,\n  featuredSpanIds,\n  messagesPanelSlot,\n  sideView: controlledSideView,\n  onSideViewChange,\n  spanView: controlledSpanView,\n  onSpanViewChange,\n  spanPanelSlot,\n}: TraceDataPanelViewProps) {\n  const isOnTracePage = placement === 'trace-page';\n\n  // The side column next to the span tree hosts Messages / Feedback / Scores;\n  // which one is shown is purely a local viewing choice.\n  const sideViews = useMemo(() => {\n    const views: Array<{ value: TraceSideView; label: ReactNode }> = [];\n    if (messagesPanelSlot) {\n      views.push({\n        value: 'messages',\n        label: (\n          <>\n            <Icon size=\"sm\">\n              <MessageSquareTextIcon />\n            </Icon>\n            Messages\n          </>\n        ),\n      });\n    }\n    if (feedbackTabSlot) {\n      views.push({\n        value: 'feedback',\n        label: (\n          <>\n            <Icon size=\"sm\">\n              <MessageSquareReplyIcon />\n            </Icon>\n            Feedback{feedbackTabBadge != null && <> ({feedbackTabBadge})</>}\n          </>\n        ),\n      });\n    }\n    if (scoresTabSlot) {\n      views.push({\n        value: 'scores',\n        label: (\n          <>\n            <Icon size=\"sm\">\n              <ScorersIcon />\n            </Icon>\n            Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}\n          </>\n        ),\n      });\n    }\n    return views;\n  }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);\n  const [uncontrolledSideView, setUncontrolledSideView] = useState<TraceSideView>();\n  const chosenSideView = controlledSideView ?? uncontrolledSideView;\n  const sideView = (sideViews.find(view => view.value === chosenSideView) ?? sideViews[0])?.value;\n  const handleSideViewChange = (view: TraceSideView) => {\n    setUncontrolledSideView(view);\n    onSideViewChange?.(view);\n  };\n\n  const [uncontrolledSpanView, setUncontrolledSpanView] = useState<TraceSpanView>('tree');\n  const spanView = controlledSpanView ?? uncontrolledSpanView;\n  const setSpanView = (view: TraceSpanView) => {\n    setUncontrolledSpanView(view);\n    onSpanViewChange?.(view);\n  };\n\n  const { download: downloadTraceJson, isPending: isDownloadingTrace } = useDownloadTraceJson();\n\n  const [selectedSpanId, setSelectedSpanId] = useState<string | undefined>(initialSpanId ?? undefined);\n\n  // Sync selected span when initialSpanId or trace data changes\n  useEffect(() => {\n    // No span requested: clear immediately.\n    if (!initialSpanId) {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n      return;\n    }\n    // Span requested: wait for trace data before deciding so an in-flight\n    // fetch doesn't wipe a URL-provided selection. Callers that default their\n    // spans to `[]` while loading only say so through `isLoading`.\n    if (isLoading || !spans) return;\n\n    const found = spans.find(s => s.spanId === initialSpanId);\n    if (found) {\n      setSelectedSpanId(initialSpanId);\n      onSpanSelect?.(initialSpanId);\n    } else {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpanId, spans, isLoading]);\n\n  const searchFieldName = useId();\n  const { query, setQuery, results, payloadOnlyMatchIds } = useTraceSearch(spans ?? []);\n\n  const hierarchicalSpans = useMemo(\n    () =>\n      formatHierarchicalSpans(\n        // Carried on the span rather than drilled as a prop: the tree is rebuilt here and\n        // rendered several components deeper.\n        results.map(span => ({ ...span, matchedInPayloadOnly: payloadOnlyMatchIds.has(span.spanId) })),\n        anchorSpanId,\n      ),\n    [results, payloadOnlyMatchIds, anchorSpanId],\n  );\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const rootSpan = useMemo(\n    () => (anchorSpanId ? spans?.find(s => s.spanId === anchorSpanId) : spans?.find(s => s.parentSpanId == null)),\n    [spans, anchorSpanId],\n  );\n  const handleSpanClick = (id: string) => {\n    const newId = selectedSpanId === id ? undefined : id;\n    setSelectedSpanId(newId);\n    onSpanSelect?.(newId);\n  };\n\n  const traceActionsMenu = traceId && (\n    <DropdownMenu>\n      <DropdownMenu.Trigger\n        render={\n          <Button size=\"sm\" variant=\"ghost\" tooltip=\"Open trace actions\" aria-label=\"Open trace actions\">\n            <MoreHorizontalIcon />\n          </Button>\n        }\n      />\n      <DropdownMenu.Content align=\"end\">\n        {!isOnTracePage && onSaveAsDatasetItem && (\n          <DropdownMenu.Item onSelect={() => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId })}>\n            <SaveIcon />\n            Add full trace to dataset\n          </DropdownMenu.Item>\n        )}\n        {!isOnTracePage && onAddTraceMocksToItem && (\n          <DropdownMenu.Item onSelect={() => onAddTraceMocksToItem({ traceId })}>\n            <WrenchIcon />\n            Add tool mocks to item\n          </DropdownMenu.Item>\n        )}\n        {!isOnTracePage && LinkComponent && traceHref && (\n          <DropdownMenu.Item render={<LinkComponent href={traceHref} />}>\n            <Link2Icon />\n            Open trace page\n          </DropdownMenu.Item>\n        )}\n        <DropdownMenu.Item disabled={isDownloadingTrace} onSelect={() => downloadTraceJson(traceId)}>\n          {isDownloadingTrace ? <Loader2Icon className=\"animate-spin\" /> : <DownloadIcon />}\n          Download trace JSON\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n\n  const sideColumn =\n    traceId && sideView ? (\n      <div data-trace-side-column className=\"flex h-full min-h-0 min-w-0 flex-col overflow-hidden\">\n        {/* Same chrome as the trace column's Spans/Timeline header, so the two tab rows line up. */}\n        <Tabs<TraceSideView> defaultTab={sideView} value={sideView} onValueChange={handleSideViewChange}>\n          <DataPanel.Header className=\"border-border1 border-b\">\n            <TabList variant=\"pill-ghost\" size=\"sm\">\n              {sideViews.map(view => (\n                <Tab key={view.value} value={view.value}>\n                  {view.label}\n                </Tab>\n              ))}\n            </TabList>\n          </DataPanel.Header>\n        </Tabs>\n        {/* The turn view brings its own padding; feedback and scores use the panel's. */}\n        {sideView === 'messages' && <DataPanel.Content className=\"p-0\">{messagesPanelSlot}</DataPanel.Content>}\n        {sideView === 'feedback' && <DataPanel.Content>{feedbackTabSlot?.({ traceId })}</DataPanel.Content>}\n        {sideView === 'scores' && (\n          <DataPanel.Content>{scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId })}</DataPanel.Content>\n        )}\n      </div>\n    ) : null;\n\n  return (\n    <DataPanel\n      open={!!traceId}\n      onClose={onClose}\n      title={title ?? (isOnTracePage ? 'Trace Timeline' : `Trace ${traceId ?? ''}`)}\n      size={size}\n      depth={depth}\n    >\n      {traceId && (\n        <>\n          {headerSlot}\n          <DataPanel.Header>\n            {isOnTracePage ? (\n              <>\n                <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n                <DataPanel.HeaderActions>{traceActionsMenu}</DataPanel.HeaderActions>\n              </>\n            ) : (\n              <>\n                <DataPanel.CloseButton onClick={onClose} />\n                <DataPanel.HeaderContent>\n                  <DataPanel.Heading>\n                    Trace\n                    <TraceIdButton id={traceId} />\n                  </DataPanel.Heading>\n                  {rootSpan && (\n                    <TraceSummaryDescription\n                      rootSpan={rootSpan}\n                      usage={usage}\n                      entityHref={entityHref}\n                      LinkComponent={LinkComponent}\n                    />\n                  )}\n                </DataPanel.HeaderContent>\n                <DataPanel.HeaderActions>\n                  {onEvaluateTrace && (\n                    <Button variant=\"primary\" size=\"sm\" onClick={onEvaluateTrace} disabled={!rootSpan}>\n                      <CircleGaugeIcon />\n                      Score trace\n                    </Button>\n                  )}\n                  {traceActionsMenu}\n                  {(onPrevious || onNext) && (\n                    <DataPanel.NextPrevNav\n                      onPrevious={onPrevious}\n                      onNext={onNext}\n                      previousLabel=\"Go to previous trace\"\n                      nextLabel=\"Go to next trace\"\n                    />\n                  )}\n                </DataPanel.HeaderActions>\n              </>\n            )}\n          </DataPanel.Header>\n\n          <TracePanelColumns\n            sideColumnSlot={sideColumn}\n            spanPanelSlot={spanPanelSlot}\n            highlightQuery={query}\n            spanPanelKey={selectedSpanId}\n          >\n            {!isLoading && !spans?.length ? (\n              <DataPanel.NoData>No spans found for this trace.</DataPanel.NoData>\n            ) : (\n              (() => {\n                // Shared by the Spans and Timeline tabs: both views render the same\n                // filtered `hierarchicalSpans`, so one query drives both.\n                const isTimeline = spanView === 'timeline';\n                const searchHeader = (\n                  <DataPanel.Header className=\"border-border1 gap-2 border-b\">\n                    <SearchFieldBlock\n                      name={searchFieldName}\n                      label=\"Search spans\"\n                      labelIsHidden\n                      placeholder=\"Search spans...\"\n                      value={query}\n                      onChange={e => setQuery(e.target.value)}\n                      onReset={() => setQuery('')}\n                      size=\"sm\"\n                      variant=\"outline\"\n                      className=\"w-full\"\n                    />\n                    <ButtonsGroup spacing=\"close\" className=\"shrink-0\">\n                      <Button\n                        size=\"sm\"\n                        variant={isTimeline ? 'default' : 'primary'}\n                        aria-pressed={!isTimeline}\n                        tooltip=\"Span tree\"\n                        onClick={() => setSpanView('tree')}\n                      >\n                        <ListTreeIcon />\n                      </Button>\n                      <Button\n                        size=\"sm\"\n                        variant={isTimeline ? 'primary' : 'default'}\n                        aria-pressed={isTimeline}\n                        tooltip=\"Timeline\"\n                        onClick={() => setSpanView('timeline')}\n                      >\n                        <ChartGanttIcon />\n                      </Button>\n                    </ButtonsGroup>\n                  </DataPanel.Header>\n                );\n                const noSearchResults = !isLoading && hierarchicalSpans.length === 0 && (\n                  <DataPanel.NoData>No spans match your search.</DataPanel.NoData>\n                );\n                const viewProps = {\n                  hierarchicalSpans,\n                  onSpanClick: handleSpanClick,\n                  selectedSpanId,\n                  expandedSpanIds,\n                  setExpandedSpanIds,\n                  featuredSpanIds,\n                  isLoading,\n                };\n\n                return (\n                  <>\n                    {searchHeader}\n                    <DataPanel.Content>\n                      {!isOnTracePage &&\n                        !onEvaluateTrace &&\n                        !onSaveAsDatasetItem &&\n                        !onAddTraceMocksToItem &&\n                        showUnavailableFeaturesMsg && (\n                          <Notice variant=\"info\" className=\"mb-6\">\n                            <Notice.Message>\n                              Evaluating traces and saving them as dataset items is available in Mastra Studio (local or\n                              deployed).\n                            </Notice.Message>\n                          </Notice>\n                        )}\n\n                      {/* Both views share selection + expansion state, and stay mounted with no\n                    results because they host the search field: unmounting would strand the\n                    user with a query they can no longer clear. */}\n                      {isTimeline ? <TraceSpanTimeline {...viewProps} /> : <TraceSpanTree {...viewProps} />}\n                      {noSearchResults}\n                    </DataPanel.Content>\n                  </>\n                );\n              })()\n            )}\n          </TracePanelColumns>\n        </>\n      )}\n    </DataPanel>\n  );\n}\n\n/**\n * Lays out the card body as three columns — `[side] [trace] [span]` — inside the\n * same card. The side column (messages / feedback / scores) is independent of the\n * Spans/Timeline tabs, so it sits beside them rather than inside a tab. The span\n * cell always exists and collapses to zero when hidden, so opening/closing it\n * animates via `grid-template-columns` rather than mounting/unmounting a DOM\n * column (which cannot be transitioned).\n * Search matches — span names in the timeline tree as well as values in the span\n * detail — are highlighted while a query is active.\n */\nfunction TracePanelColumns({\n  sideColumnSlot,\n  spanPanelSlot,\n  highlightQuery,\n  spanPanelKey,\n  children,\n}: {\n  /** Fixed-width column on the left; the trace and span tracks share the remaining space. */\n  sideColumnSlot?: ReactNode;\n  spanPanelSlot?: ReactNode;\n  highlightQuery: string;\n  /** Identity of the span shown in the panel; changing it re-triggers the match scroll. */\n  spanPanelKey?: string;\n  children: ReactNode;\n}) {\n  // A single hook call on the common ancestor covers both the timeline tree and\n  // the span detail, so span names and payload values highlight together.\n  const { ref: highlightRef } = useTextHighlight<HTMLDivElement>(highlightQuery);\n\n  // Scoped to the span-panel column only: a match deep in a large payload sits below\n  // the fold, so the first painted match is brought into view when the panel opens.\n  // The timeline column must never be scrolled by this.\n  const { ref: scrollToMatchRef } = useScrollToFirstHighlight<HTMLDivElement>(highlightQuery, spanPanelKey);\n\n  return (\n    <div\n      ref={highlightRef}\n      data-trace-columns\n      className={cn(\n        'grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out',\n        sideColumnSlot\n          ? spanPanelSlot\n            ? 'grid-cols-[18rem_1fr_1fr] lg:grid-cols-[24rem_1fr_1fr]'\n            : 'grid-cols-[18rem_1fr_0fr] lg:grid-cols-[24rem_1fr_0fr]'\n          : spanPanelSlot\n            ? 'grid-cols-[0px_1fr_1fr]'\n            : 'grid-cols-[0px_1fr_0fr]',\n      )}\n    >\n      <div className={cn('flex min-h-0 min-w-0 flex-col overflow-hidden', sideColumnSlot && 'border-r border-border1')}>\n        {sideColumnSlot}\n      </div>\n      <div className=\"flex min-h-0 min-w-0 flex-col overflow-hidden\">{children}</div>\n      {/* Searchable: the span detail is where a match hides inside a large payload. */}\n      <div\n        ref={scrollToMatchRef}\n        data-highlight\n        className={cn(\n          'flex min-h-0 min-w-0 flex-col overflow-hidden',\n          spanPanelSlot && 'animate-in border-l border-border1 duration-300 fade-in-0',\n        )}\n      >\n        {spanPanelSlot}\n      </div>\n    </div>\n  );\n}\n"],"names":["useMemo","jsxs","Fragment","jsx","Icon","MessageSquareTextIcon","MessageSquareReplyIcon","ScorersIcon","useState","useDownloadTraceJson","useEffect","useId","useTraceSearch","formatHierarchicalSpans","getAllSpanIds","DropdownMenu","Button","MoreHorizontalIcon","SaveIcon","WrenchIcon","Link2Icon","Loader2Icon","DownloadIcon","Tabs","DataPanel","TabList","Tab","TraceIdButton","TraceSummaryDescription","CircleGaugeIcon","SearchFieldBlock","ButtonsGroup","ListTreeIcon","ChartGanttIcon","Notice","TraceSpanTimeline","TraceSpanTree","useTextHighlight","useScrollToFirstHighlight","cn"],"mappings":"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"}
+{"version":3,"file":"trace-data-panel-view.cjs.js","sources":["../../../../src/domains/traces/components/trace-data-panel-view.tsx"],"sourcesContent":["import {\n  ChartGanttIcon,\n  CircleGaugeIcon,\n  DownloadIcon,\n  Link2Icon,\n  ListTreeIcon,\n  Loader2Icon,\n  MessageSquareReplyIcon,\n  MessageSquareTextIcon,\n  MoreHorizontalIcon,\n  SaveIcon,\n  WrenchIcon,\n} from 'lucide-react';\nimport { useEffect, useId, useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { getAllSpanIds } from '../hooks/get-all-span-ids';\nimport { useDownloadTraceJson } from '../hooks/use-download-trace-json';\nimport { useTraceSearch } from '../hooks/use-trace-search';\nimport type { TraceUsageSummary } from '../trace-list-columns';\nimport type { SearchableSpan } from '../types';\nimport { formatHierarchicalSpans } from './format-hierarchical-spans';\nimport { TraceIdButton } from './trace-id-button';\nimport { TraceSpanTimeline } from './trace-span-timeline';\nimport { TraceSpanTree } from './trace-span-tree';\nimport { TraceSummaryDescription } from './trace-summary-description';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { DataPanel } from '@/ds/components/DataPanel';\nimport type { DataPanelProps } from '@/ds/components/DataPanel';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { SearchFieldBlock } from '@/ds/components/FormFieldBlocks';\nimport { Notice } from '@/ds/components/Notice';\nimport { Tab, TabList, Tabs } from '@/ds/components/Tabs';\nimport { Icon } from '@/ds/icons/Icon';\nimport { ScorersIcon } from '@/ds/icons/ScorersIcon';\nimport type { LinkComponent } from '@/ds/types/link-component';\nimport { useScrollToFirstHighlight } from '@/hooks/use-scroll-to-first-highlight';\nimport { useTextHighlight } from '@/hooks/use-text-highlight';\nimport { cn } from '@/lib/utils';\n\nexport type TraceDataPanelPlacement = 'traces-list' | 'trace-page';\n\nexport type TraceSpanView = 'tree' | 'timeline';\n\n/** What the side column next to the span tree shows. */\nexport type TraceSideView = 'messages' | 'feedback' | 'scores';\n\nexport interface TraceDataPanelViewProps {\n  /** Keep the panel mounted and pass `undefined` to close it, so the drawer animates out. */\n  traceId?: string;\n  /** Lightweight spans for the trace. Caller fetches via useTraceLightSpans. */\n  spans: SearchableSpan[] | undefined;\n  isLoading?: boolean;\n  onClose: () => void;\n  onSpanSelect?: (spanId: string | undefined) => void;\n  onEvaluateTrace?: () => void;\n  /** When set, an \"Add full trace to dataset\" button appears; the consumer owns the dialog. */\n  onSaveAsDatasetItem?: (args: { traceId: string; rootSpanId: string | undefined }) => void;\n  /** When set, an \"Add tool mocks to item\" button appears; the consumer owns the dialog. */\n  onAddTraceMocksToItem?: (args: { traceId: string }) => void;\n  initialSpanId?: string | null;\n  onPrevious?: () => void;\n  onNext?: () => void;\n  /** Drawer width; defaults to `wide` since the panel lays out several columns. */\n  size?: DataPanelProps['size'];\n  /** Elevation when opened next to other sibling panels. */\n  depth?: DataPanelProps['depth'];\n  /** Rendered inside the drawer above the trace header (e.g. inbox feedback context). */\n  headerSlot?: ReactNode;\n  /** Accessible drawer name; defaults to the trace id. */\n  title?: string;\n  placement: TraceDataPanelPlacement;\n  /** @deprecated No longer used: the panel renders the span tree with the duration as text. */\n  timelineChartWidth?: 'wide' | 'default';\n  /** When both are provided, renders an \"Open trace page\" button. */\n  LinkComponent?: LinkComponent;\n  traceHref?: string;\n  /** When provided, the entity name in the trace summary links to the entity's page. */\n  entityHref?: string;\n  /** Token and estimated-cost totals shown in the compact trace summary. */\n  usage?: TraceUsageSummary;\n  /**\n   * Span treated as the displayed root of the timeline. Required for branch\n   * subtrees from `getBranch` where the anchor has a real parent that's outside\n   * `spans`. When omitted, the span with no parent is used (trace case).\n   */\n  anchorSpanId?: string;\n  /**\n   * Whether to render the \"Evaluating traces and saving them as dataset items is\n   * available in Mastra Studio\" info notice when neither `onEvaluateTrace` nor\n   * `onSaveAsDatasetItem` is provided. Defaults to `true`. Pass `false` when this\n   * panel is rendered inside Studio in a context that intentionally omits those\n   * handlers (e.g. inline below an experiment result).\n   */\n  showUnavailableFeaturesMsg?: boolean;\n  /**\n   * When provided, a \"Scores\" tab appears; the slot renders whatever trace-level\n   * scoring UI the consumer wants.\n   */\n  scoresTabSlot?: (args: { traceId: string; rootSpanId: string | undefined }) => ReactNode;\n  /** Optional count shown in the \"Scores\" tab label. */\n  scoresTabBadge?: ReactNode;\n  /**\n   * When provided, a \"Feedback\" tab appears; the slot renders the trace-level\n   * feedback UI. Trace feedback is not scoped to a span — the span panel owns that.\n   */\n  feedbackTabSlot?: (args: { traceId: string }) => ReactNode;\n  /** Optional count rendered after the \"Feedback\" tab label, e.g. `Feedback (3)`. */\n  feedbackTabBadge?: ReactNode;\n  /** Span ids to feature in the timeline; every other span is faded. */\n  featuredSpanIds?: string[];\n  /**\n   * The \"Messages\" view of the side column next to the span tree (typically the\n   * trace as one reconstructed agent turn). Rendered without content padding.\n   */\n  messagesPanelSlot?: ReactNode;\n  /** Controlled span view (tree or timeline); falls back to local state starting on the tree. */\n  spanView?: TraceSpanView;\n  onSpanViewChange?: (view: TraceSpanView) => void;\n  /** Controlled side column view; falls back to the first available view. */\n  sideView?: TraceSideView;\n  onSideViewChange?: (view: TraceSideView) => void;\n  /**\n   * Rendered as a column to the right of the timeline inside the same card;\n   * typically the span detail.\n   */\n  spanPanelSlot?: ReactNode;\n}\n\nexport function TraceDataPanelView({\n  traceId,\n  spans,\n  isLoading,\n  onClose,\n  onSpanSelect,\n  onEvaluateTrace,\n  onSaveAsDatasetItem,\n  onAddTraceMocksToItem,\n  initialSpanId,\n  onPrevious,\n  onNext,\n  size = 'wide',\n  depth,\n  headerSlot,\n  title,\n  placement,\n  LinkComponent,\n  traceHref,\n  entityHref,\n  usage,\n  anchorSpanId,\n  showUnavailableFeaturesMsg = true,\n  scoresTabSlot,\n  scoresTabBadge,\n  feedbackTabSlot,\n  feedbackTabBadge,\n  featuredSpanIds,\n  messagesPanelSlot,\n  sideView: controlledSideView,\n  onSideViewChange,\n  spanView: controlledSpanView,\n  onSpanViewChange,\n  spanPanelSlot,\n}: TraceDataPanelViewProps) {\n  const isOnTracePage = placement === 'trace-page';\n\n  // The side column next to the span tree hosts Messages / Feedback / Scores;\n  // which one is shown is purely a local viewing choice.\n  const sideViews = useMemo(() => {\n    const views: Array<{ value: TraceSideView; label: ReactNode }> = [];\n    if (messagesPanelSlot) {\n      views.push({\n        value: 'messages',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <MessageSquareTextIcon />\n            </Icon>\n            Messages\n          </>\n        ),\n      });\n    }\n    if (feedbackTabSlot) {\n      views.push({\n        value: 'feedback',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <MessageSquareReplyIcon />\n            </Icon>\n            Feedback{feedbackTabBadge != null && <> ({feedbackTabBadge})</>}\n          </>\n        ),\n      });\n    }\n    if (scoresTabSlot) {\n      views.push({\n        value: 'scores',\n        label: (\n          <>\n            <Icon size=\"xs\">\n              <ScorersIcon />\n            </Icon>\n            Scores{scoresTabBadge != null && <> ({scoresTabBadge})</>}\n          </>\n        ),\n      });\n    }\n    return views;\n  }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);\n  const [uncontrolledSideView, setUncontrolledSideView] = useState<TraceSideView>();\n  const chosenSideView = controlledSideView ?? uncontrolledSideView;\n  const sideView = (sideViews.find(view => view.value === chosenSideView) ?? sideViews[0])?.value;\n  const handleSideViewChange = (view: TraceSideView) => {\n    setUncontrolledSideView(view);\n    onSideViewChange?.(view);\n  };\n\n  const [uncontrolledSpanView, setUncontrolledSpanView] = useState<TraceSpanView>('tree');\n  const spanView = controlledSpanView ?? uncontrolledSpanView;\n  const setSpanView = (view: TraceSpanView) => {\n    setUncontrolledSpanView(view);\n    onSpanViewChange?.(view);\n  };\n\n  const { download: downloadTraceJson, isPending: isDownloadingTrace } = useDownloadTraceJson();\n\n  const [selectedSpanId, setSelectedSpanId] = useState<string | undefined>(initialSpanId ?? undefined);\n\n  // Sync selected span when initialSpanId or trace data changes\n  useEffect(() => {\n    // No span requested: clear immediately.\n    if (!initialSpanId) {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n      return;\n    }\n    // Span requested: wait for trace data before deciding so an in-flight\n    // fetch doesn't wipe a URL-provided selection. Callers that default their\n    // spans to `[]` while loading only say so through `isLoading`.\n    if (isLoading || !spans) return;\n\n    const found = spans.find(s => s.spanId === initialSpanId);\n    if (found) {\n      setSelectedSpanId(initialSpanId);\n      onSpanSelect?.(initialSpanId);\n    } else {\n      setSelectedSpanId(undefined);\n      onSpanSelect?.(undefined);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [initialSpanId, spans, isLoading]);\n\n  const searchFieldName = useId();\n  const { query, setQuery, results, payloadOnlyMatchIds } = useTraceSearch(spans ?? []);\n\n  const hierarchicalSpans = useMemo(\n    () =>\n      formatHierarchicalSpans(\n        // Carried on the span rather than drilled as a prop: the tree is rebuilt here and\n        // rendered several components deeper.\n        results.map(span => ({ ...span, matchedInPayloadOnly: payloadOnlyMatchIds.has(span.spanId) })),\n        anchorSpanId,\n      ),\n    [results, payloadOnlyMatchIds, anchorSpanId],\n  );\n\n  const [expandedSpanIds, setExpandedSpanIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (hierarchicalSpans.length > 0) {\n      setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));\n    }\n  }, [hierarchicalSpans]);\n\n  const rootSpan = useMemo(\n    () => (anchorSpanId ? spans?.find(s => s.spanId === anchorSpanId) : spans?.find(s => s.parentSpanId == null)),\n    [spans, anchorSpanId],\n  );\n  const handleSpanClick = (id: string) => {\n    const newId = selectedSpanId === id ? undefined : id;\n    setSelectedSpanId(newId);\n    onSpanSelect?.(newId);\n  };\n\n  const traceActionsMenu = traceId && (\n    <DropdownMenu>\n      <DropdownMenu.Trigger\n        render={\n          <Button size=\"sm\" variant=\"ghost\" tooltip=\"Open trace actions\" aria-label=\"Open trace actions\">\n            <MoreHorizontalIcon />\n          </Button>\n        }\n      />\n      <DropdownMenu.Content align=\"end\">\n        {!isOnTracePage && onSaveAsDatasetItem && (\n          <DropdownMenu.Item onSelect={() => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId })}>\n            <SaveIcon />\n            Add full trace to dataset\n          </DropdownMenu.Item>\n        )}\n        {!isOnTracePage && onAddTraceMocksToItem && (\n          <DropdownMenu.Item onSelect={() => onAddTraceMocksToItem({ traceId })}>\n            <WrenchIcon />\n            Add tool mocks to item\n          </DropdownMenu.Item>\n        )}\n        {!isOnTracePage && LinkComponent && traceHref && (\n          <DropdownMenu.Item render={<LinkComponent href={traceHref} />}>\n            <Link2Icon />\n            Open trace page\n          </DropdownMenu.Item>\n        )}\n        <DropdownMenu.Item disabled={isDownloadingTrace} onSelect={() => downloadTraceJson(traceId)}>\n          {isDownloadingTrace ? <Loader2Icon className=\"animate-spin\" /> : <DownloadIcon />}\n          Download trace JSON\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n\n  const sideColumn =\n    traceId && sideView ? (\n      <div data-trace-side-column className=\"flex h-full min-h-0 min-w-0 flex-col overflow-hidden\">\n        {/* Same chrome as the trace column's Spans/Timeline header, so the two tab rows line up. */}\n        <Tabs<TraceSideView> defaultTab={sideView} value={sideView} onValueChange={handleSideViewChange}>\n          <DataPanel.Header className=\"border-border border-b\">\n            <TabList variant=\"pill-ghost\" size=\"sm\">\n              {sideViews.map(view => (\n                <Tab key={view.value} value={view.value}>\n                  {view.label}\n                </Tab>\n              ))}\n            </TabList>\n          </DataPanel.Header>\n        </Tabs>\n        {/* The turn view brings its own padding; feedback and scores use the panel's. */}\n        {sideView === 'messages' && <DataPanel.Content className=\"p-0\">{messagesPanelSlot}</DataPanel.Content>}\n        {sideView === 'feedback' && <DataPanel.Content>{feedbackTabSlot?.({ traceId })}</DataPanel.Content>}\n        {sideView === 'scores' && (\n          <DataPanel.Content>{scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId })}</DataPanel.Content>\n        )}\n      </div>\n    ) : null;\n\n  return (\n    <DataPanel\n      open={!!traceId}\n      onClose={onClose}\n      title={title ?? (isOnTracePage ? 'Trace Timeline' : `Trace ${traceId ?? ''}`)}\n      size={size}\n      depth={depth}\n    >\n      {traceId && (\n        <>\n          {headerSlot}\n          <DataPanel.Header>\n            {isOnTracePage ? (\n              <>\n                <DataPanel.Heading>Trace Timeline</DataPanel.Heading>\n                <DataPanel.HeaderActions>{traceActionsMenu}</DataPanel.HeaderActions>\n              </>\n            ) : (\n              <>\n                <DataPanel.CloseButton onClick={onClose} />\n                <DataPanel.HeaderContent>\n                  <DataPanel.Heading>\n                    Trace\n                    <TraceIdButton id={traceId} />\n                  </DataPanel.Heading>\n                  {rootSpan && (\n                    <TraceSummaryDescription\n                      rootSpan={rootSpan}\n                      usage={usage}\n                      entityHref={entityHref}\n                      LinkComponent={LinkComponent}\n                    />\n                  )}\n                </DataPanel.HeaderContent>\n                <DataPanel.HeaderActions>\n                  {onEvaluateTrace && (\n                    <Button variant=\"primary\" size=\"sm\" onClick={onEvaluateTrace} disabled={!rootSpan}>\n                      <CircleGaugeIcon />\n                      Score trace\n                    </Button>\n                  )}\n                  {traceActionsMenu}\n                  {(onPrevious || onNext) && (\n                    <DataPanel.NextPrevNav\n                      onPrevious={onPrevious}\n                      onNext={onNext}\n                      previousLabel=\"Go to previous trace\"\n                      nextLabel=\"Go to next trace\"\n                    />\n                  )}\n                </DataPanel.HeaderActions>\n              </>\n            )}\n          </DataPanel.Header>\n\n          <TracePanelColumns\n            sideColumnSlot={sideColumn}\n            spanPanelSlot={spanPanelSlot}\n            highlightQuery={query}\n            spanPanelKey={selectedSpanId}\n          >\n            {!isLoading && !spans?.length ? (\n              <DataPanel.NoData>No spans found for this trace.</DataPanel.NoData>\n            ) : (\n              (() => {\n                // Shared by the Spans and Timeline tabs: both views render the same\n                // filtered `hierarchicalSpans`, so one query drives both.\n                const isTimeline = spanView === 'timeline';\n                const searchHeader = (\n                  <DataPanel.Header className=\"border-border gap-2 border-b\">\n                    <SearchFieldBlock\n                      name={searchFieldName}\n                      label=\"Search spans\"\n                      labelIsHidden\n                      placeholder=\"Search spans...\"\n                      value={query}\n                      onChange={e => setQuery(e.target.value)}\n                      onReset={() => setQuery('')}\n                      size=\"sm\"\n                      className=\"w-full\"\n                    />\n                    <ButtonsGroup className=\"shrink-0\">\n                      <Button\n                        size=\"sm\"\n                        variant={isTimeline ? 'default' : 'primary'}\n                        aria-pressed={!isTimeline}\n                        tooltip=\"Span tree\"\n                        onClick={() => setSpanView('tree')}\n                      >\n                        <ListTreeIcon />\n                      </Button>\n                      <Button\n                        size=\"sm\"\n                        variant={isTimeline ? 'primary' : 'default'}\n                        aria-pressed={isTimeline}\n                        tooltip=\"Timeline\"\n                        onClick={() => setSpanView('timeline')}\n                      >\n                        <ChartGanttIcon />\n                      </Button>\n                    </ButtonsGroup>\n                  </DataPanel.Header>\n                );\n                const noSearchResults = !isLoading && hierarchicalSpans.length === 0 && (\n                  <DataPanel.NoData>No spans match your search.</DataPanel.NoData>\n                );\n                const viewProps = {\n                  hierarchicalSpans,\n                  onSpanClick: handleSpanClick,\n                  selectedSpanId,\n                  expandedSpanIds,\n                  setExpandedSpanIds,\n                  featuredSpanIds,\n                  isLoading,\n                };\n\n                return (\n                  <>\n                    {searchHeader}\n                    <DataPanel.Content>\n                      {!isOnTracePage &&\n                        !onEvaluateTrace &&\n                        !onSaveAsDatasetItem &&\n                        !onAddTraceMocksToItem &&\n                        showUnavailableFeaturesMsg && (\n                          <Notice variant=\"info\" className=\"mb-6\">\n                            <Notice.Message>\n                              Evaluating traces and saving them as dataset items is available in Mastra Studio (local or\n                              deployed).\n                            </Notice.Message>\n                          </Notice>\n                        )}\n\n                      {/* Both views share selection + expansion state, and stay mounted with no\n                    results because they host the search field: unmounting would strand the\n                    user with a query they can no longer clear. */}\n                      {isTimeline ? <TraceSpanTimeline {...viewProps} /> : <TraceSpanTree {...viewProps} />}\n                      {noSearchResults}\n                    </DataPanel.Content>\n                  </>\n                );\n              })()\n            )}\n          </TracePanelColumns>\n        </>\n      )}\n    </DataPanel>\n  );\n}\n\n/**\n * Lays out the card body as three columns — `[side] [trace] [span]` — inside the\n * same card. The side column (messages / feedback / scores) is independent of the\n * Spans/Timeline tabs, so it sits beside them rather than inside a tab. The span\n * cell always exists and collapses to zero when hidden, so opening/closing it\n * animates via `grid-template-columns` rather than mounting/unmounting a DOM\n * column (which cannot be transitioned).\n * Search matches — span names in the timeline tree as well as values in the span\n * detail — are highlighted while a query is active.\n */\nfunction TracePanelColumns({\n  sideColumnSlot,\n  spanPanelSlot,\n  highlightQuery,\n  spanPanelKey,\n  children,\n}: {\n  /** Fixed-width column on the left; the trace and span tracks share the remaining space. */\n  sideColumnSlot?: ReactNode;\n  spanPanelSlot?: ReactNode;\n  highlightQuery: string;\n  /** Identity of the span shown in the panel; changing it re-triggers the match scroll. */\n  spanPanelKey?: string;\n  children: ReactNode;\n}) {\n  // A single hook call on the common ancestor covers both the timeline tree and\n  // the span detail, so span names and payload values highlight together.\n  const { ref: highlightRef } = useTextHighlight<HTMLDivElement>(highlightQuery);\n\n  // Scoped to the span-panel column only: a match deep in a large payload sits below\n  // the fold, so the first painted match is brought into view when the panel opens.\n  // The timeline column must never be scrolled by this.\n  const { ref: scrollToMatchRef } = useScrollToFirstHighlight<HTMLDivElement>(highlightQuery, spanPanelKey);\n\n  return (\n    <div\n      ref={highlightRef}\n      data-trace-columns\n      className={cn(\n        'grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out',\n        sideColumnSlot\n          ? spanPanelSlot\n            ? 'grid-cols-[18rem_1fr_1fr] lg:grid-cols-[24rem_1fr_1fr]'\n            : 'grid-cols-[18rem_1fr_0fr] lg:grid-cols-[24rem_1fr_0fr]'\n          : spanPanelSlot\n            ? 'grid-cols-[0px_1fr_1fr]'\n            : 'grid-cols-[0px_1fr_0fr]',\n      )}\n    >\n      <div className={cn('flex min-h-0 min-w-0 flex-col overflow-hidden', sideColumnSlot && 'border-r border-border')}>\n        {sideColumnSlot}\n      </div>\n      <div className=\"flex min-h-0 min-w-0 flex-col overflow-hidden\">{children}</div>\n      {/* Searchable: the span detail is where a match hides inside a large payload. */}\n      <div\n        ref={scrollToMatchRef}\n        data-highlight\n        className={cn(\n          'flex min-h-0 min-w-0 flex-col overflow-hidden',\n          spanPanelSlot && 'animate-in border-l border-border duration-300 fade-in-0',\n        )}\n      >\n        {spanPanelSlot}\n      </div>\n    </div>\n  );\n}\n"],"names":["useMemo","jsxs","Fragment","jsx","Icon","MessageSquareTextIcon","MessageSquareReplyIcon","ScorersIcon","useState","useDownloadTraceJson","useEffect","useId","useTraceSearch","formatHierarchicalSpans","getAllSpanIds","DropdownMenu","Button","MoreHorizontalIcon","SaveIcon","WrenchIcon","Link2Icon","Loader2Icon","DownloadIcon","Tabs","DataPanel","TabList","Tab","TraceIdButton","TraceSummaryDescription","CircleGaugeIcon","SearchFieldBlock","ButtonsGroup","ListTreeIcon","ChartGanttIcon","Notice","TraceSpanTimeline","TraceSpanTree","useTextHighlight","useScrollToFirstHighlight","cn"],"mappings":"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"}

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

@@ -9,19 +9,19 @@ 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-DS6O6fvU.js';
-import { B as ButtonsGroup } from '../../../buttons-group-t7AODlO9.js';
-import { D as DataPanel } from '../../../data-panel-D2JtbyKg.js';
-import { D as DropdownMenu } from '../../../dropdown-menu-B3nTlFnz.js';
-import { S as SearchFieldBlock } from '../../../search-field-block-zF_99MJ5.js';
-import { N as Notice } from '../../../Notice-DEqr19sI.js';
-import { a as Tabs, T as TabList } from '../../../tabs-root-yY2eNDS2.js';
-import { T as Tab } from '../../../tabs-tab-CgMaandp.js';
+import { B as Button } from '../../../Button-cWcBEd-G.js';
+import { B as ButtonsGroup } from '../../../buttons-group-CaA7KAWf.js';
+import { D as DataPanel } from '../../../data-panel-CWjgS1Gh.js';
+import { D as DropdownMenu } from '../../../dropdown-menu-DL0MzjEb.js';
+import { S as SearchFieldBlock } from '../../../search-field-block-B5vUVTpl.js';
+import { N as Notice } from '../../../Notice-Ah-84yi6.js';
+import { a as Tabs, T as TabList } from '../../../tabs-root-CcEQrwTM.js';
+import { T as Tab } from '../../../tabs-tab-BycF4dvx.js';
 import { Icon } from '../../../icons/Icon.es.js';
 import { ScorersIcon } from '../../../icons/ScorersIcon.es.js';
 import { useScrollToFirstHighlight } from '../../../hooks/use-scroll-to-first-highlight.es.js';
 import { useTextHighlight } from '../../../hooks/use-text-highlight.es.js';
-import { c as cn } from '../../../cn-C6s2yXwM.js';
+import { c as cn } from '../../../cn-65Adrsfj.js';
 
 function TraceDataPanelView({
   traceId,
@@ -65,7 +65,7 @@ function TraceDataPanelView({
       views.push({
         value: "messages",
         label: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(MessageSquareTextIcon, {}) }),
+          /* @__PURE__ */ jsx(Icon, { size: "xs", children: /* @__PURE__ */ jsx(MessageSquareTextIcon, {}) }),
           "Messages"
         ] })
       });
@@ -74,7 +74,7 @@ function TraceDataPanelView({
       views.push({
         value: "feedback",
         label: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(MessageSquareReplyIcon, {}) }),
+          /* @__PURE__ */ jsx(Icon, { size: "xs", children: /* @__PURE__ */ jsx(MessageSquareReplyIcon, {}) }),
           "Feedback",
           feedbackTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
             " (",
@@ -88,7 +88,7 @@ function TraceDataPanelView({
       views.push({
         value: "scores",
         label: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(ScorersIcon, {}) }),
+          /* @__PURE__ */ jsx(Icon, { size: "xs", children: /* @__PURE__ */ jsx(ScorersIcon, {}) }),
           "Scores",
           scoresTabBadge != null && /* @__PURE__ */ jsxs(Fragment, { children: [
             " (",
@@ -184,7 +184,7 @@ function TraceDataPanelView({
     ] })
   ] });
   const sideColumn = traceId && sideView ? /* @__PURE__ */ jsxs("div", { "data-trace-side-column": true, className: "flex h-full min-h-0 min-w-0 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx(Tabs, { defaultTab: sideView, value: sideView, onValueChange: handleSideViewChange, children: /* @__PURE__ */ jsx(DataPanel.Header, { className: "border-border1 border-b", children: /* @__PURE__ */ jsx(TabList, { variant: "pill-ghost", size: "sm", children: sideViews.map((view) => /* @__PURE__ */ jsx(Tab, { value: view.value, children: view.label }, view.value)) }) }) }),
+    /* @__PURE__ */ jsx(Tabs, { defaultTab: sideView, value: sideView, onValueChange: handleSideViewChange, children: /* @__PURE__ */ jsx(DataPanel.Header, { className: "border-border border-b", children: /* @__PURE__ */ jsx(TabList, { variant: "pill-ghost", size: "sm", children: sideViews.map((view) => /* @__PURE__ */ jsx(Tab, { value: view.value, children: view.label }, view.value)) }) }) }),
     sideView === "messages" && /* @__PURE__ */ jsx(DataPanel.Content, { className: "p-0", children: messagesPanelSlot }),
     sideView === "feedback" && /* @__PURE__ */ jsx(DataPanel.Content, { children: feedbackTabSlot?.({ traceId }) }),
     sideView === "scores" && /* @__PURE__ */ jsx(DataPanel.Content, { children: scoresTabSlot?.({ traceId, rootSpanId: rootSpan?.spanId }) })
@@ -245,7 +245,7 @@ function TraceDataPanelView({
             spanPanelKey: selectedSpanId,
             children: !isLoading && !spans?.length ? /* @__PURE__ */ jsx(DataPanel.NoData, { children: "No spans found for this trace." }) : (() => {
               const isTimeline = spanView === "timeline";
-              const searchHeader = /* @__PURE__ */ jsxs(DataPanel.Header, { className: "border-border1 gap-2 border-b", children: [
+              const searchHeader = /* @__PURE__ */ jsxs(DataPanel.Header, { className: "border-border gap-2 border-b", children: [
                 /* @__PURE__ */ jsx(
                   SearchFieldBlock,
                   {
@@ -257,11 +257,10 @@ function TraceDataPanelView({
                     onChange: (e) => setQuery(e.target.value),
                     onReset: () => setQuery(""),
                     size: "sm",
-                    variant: "outline",
                     className: "w-full"
                   }
                 ),
-                /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", className: "shrink-0", children: [
+                /* @__PURE__ */ jsxs(ButtonsGroup, { className: "shrink-0", children: [
                   /* @__PURE__ */ jsx(
                     Button,
                     {
@@ -330,7 +329,7 @@ function TracePanelColumns({
         sideColumnSlot ? spanPanelSlot ? "grid-cols-[18rem_1fr_1fr] lg:grid-cols-[24rem_1fr_1fr]" : "grid-cols-[18rem_1fr_0fr] lg:grid-cols-[24rem_1fr_0fr]" : spanPanelSlot ? "grid-cols-[0px_1fr_1fr]" : "grid-cols-[0px_1fr_0fr]"
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("flex min-h-0 min-w-0 flex-col overflow-hidden", sideColumnSlot && "border-r border-border1"), children: sideColumnSlot }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex min-h-0 min-w-0 flex-col overflow-hidden", sideColumnSlot && "border-r border-border"), children: sideColumnSlot }),
         /* @__PURE__ */ jsx("div", { className: "flex min-h-0 min-w-0 flex-col overflow-hidden", children }),
         /* @__PURE__ */ jsx(
           "div",
@@ -339,7 +338,7 @@ function TracePanelColumns({
             "data-highlight": true,
             className: cn(
               "flex min-h-0 min-w-0 flex-col overflow-hidden",
-              spanPanelSlot && "animate-in border-l border-border1 duration-300 fade-in-0"
+              spanPanelSlot && "animate-in border-l border-border duration-300 fade-in-0"
             ),
             children: spanPanelSlot
           }