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

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

@@ -2,11 +2,11 @@ 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-BVGwYwHT.js';
-import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, d as DialogDescription, e as DialogBody, f as DialogFooter } from '../../../dialog-Dfrt_JCJ.js';
-import { D as DropdownMenu } from '../../../dropdown-menu-C853KwJJ.js';
-import { I as Input } from '../../../input-DinpgQXj.js';
-import { L as Label } from '../../../label-BKfZzqfr.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';
 
 const STANDARD_COLUMNS = ["input", "entity", "duration"];
 const COLUMN_LABELS = {
@@ -54,7 +54,7 @@ function TraceColumnsMenu({
       /* @__PURE__ */ jsx(
         DropdownMenu.Trigger,
         {
-          render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "md", icon: /* @__PURE__ */ jsx(Columns3Icon, { "aria-hidden": true }), children: "Columns" })
+          render: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", icon: /* @__PURE__ */ jsx(Columns3Icon, { "aria-hidden": true }), children: "Columns" })
         }
       ),
       /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", className: "min-w-56", children: [

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=\"outline\" 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":";;;;;;;;;;AAkBA,MAAM,gBAAA,GAAmD,CAAC,OAAA,EAAS,QAAA,EAAU,UAAU,CAAA;AAEvF,MAAM,aAAA,GAAqD;AAAA,EACzD,KAAA,EAAO,OAAA;AAAA,EACP,MAAA,EAAQ,QAAA;AAAA,EACR,QAAA,EAAU,UAAA;AAAA,EACV,WAAA,EAAa,cAAA;AAAA,EACb,YAAA,EAAc,eAAA;AAAA,EACd,aAAA,EAAe;AACjB,CAAA;AAWO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,WAAA;AAAA,EACA,mBAAA;AAAA,EACA,cAAA;AAAA,EACA,mBAAA;AAAA,EACA,sBAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,CAAC,oBAAA,EAAsB,uBAAuB,CAAA,GAAI,SAAS,KAAK,CAAA;AACtE,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,EAAE,CAAA;AACjD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,QAAA,EAA6B;AAEvE,EAAA,MAAM,sBAAA,GAAyB,CAAC,IAAA,KAAkB;AAChD,IAAA,uBAAA,CAAwB,IAAI,CAAA;AAC5B,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA,cAAA,CAAe,EAAE,CAAA;AACjB,MAAA,gBAAA,CAAiB,MAAS,CAAA;AAAA,IAC5B;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAAsC;AAC/D,IAAA,KAAA,CAAM,cAAA,EAAe;AACrB,IAAA,MAAM,aAAA,GAAgB,YAAY,IAAA,EAAK;AACvC,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA,gBAAA,CAAiB,uBAAuB,CAAA;AACxC,MAAA;AAAA,IACF;AACA,IAAA,IAAI,WAAA,CAAY,YAAA,CAAa,QAAA,CAAS,aAAa,CAAA,EAAG;AACpD,MAAA,gBAAA,CAAiB,0CAA0C,CAAA;AAC3D,MAAA;AAAA,IACF;AAEA,IAAA,mBAAA,CAAoB,aAAa,CAAA;AACjC,IAAA,sBAAA,CAAuB,KAAK,CAAA;AAAA,EAC9B,CAAA;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,YAAA,CAAa,OAAA;AAAA,QAAb;AAAA,UACC,MAAA,kBACE,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,IAAA,EAAK,IAAA,EAAK,IAAA,kBAAM,GAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC,GAAI,QAAA,EAAA,SAAA,EAExE;AAAA;AAAA,OAEJ;AAAA,2BACC,YAAA,CAAa,OAAA,EAAb,EAAqB,KAAA,EAAM,KAAA,EAAM,WAAU,UAAA,EAC1C,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,YAAA,CAAa,KAAA,EAAb,EAAmB,QAAA,EAAA,kBAAA,EAAgB,CAAA;AAAA,QACnC,gBAAA,CAAiB,IAAI,CAAA,MAAA,qBACpB,GAAA;AAAA,UAAC,YAAA,CAAa,YAAA;AAAA,UAAb;AAAA,YAEC,OAAA,EAAS,WAAA,CAAY,cAAA,CAAe,QAAA,CAAS,MAAM,CAAA;AAAA,YACnD,eAAA,EAAiB,MAAM,cAAA,CAAe,MAAM,CAAA;AAAA,YAE3C,wBAAc,MAAM;AAAA,WAAA;AAAA,UAJhB;AAAA,SAMR,CAAA;AAAA,wBAED,GAAA,CAAC,YAAA,CAAa,SAAA,EAAb,EAAuB,CAAA;AAAA,wBACxB,GAAA,CAAC,YAAA,CAAa,KAAA,EAAb,EAAmB,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,QAChC,mBAAA,CAAoB,IAAI,CAAA,MAAA,qBACvB,GAAA;AAAA,UAAC,YAAA,CAAa,YAAA;AAAA,UAAb;AAAA,YAEC,OAAA,EAAS,WAAA,CAAY,cAAA,CAAe,QAAA,CAAS,MAAM,CAAA;AAAA,YACnD,QAAA,EAAU,QAAQ,mBAAmB,CAAA;AAAA,YACrC,eAAA,EAAiB,MAAM,cAAA,CAAe,MAAM,CAAA;AAAA,YAE3C,wBAAc,MAAM;AAAA,WAAA;AAAA,UALhB;AAAA,SAOR,CAAA;AAAA,QACA,uCACC,GAAA,CAAC,GAAA,EAAA,EAAE,WAAU,kDAAA,EAAmD,IAAA,EAAK,QAClE,QAAA,EAAA,mBAAA,EACH,CAAA;AAAA,wBAGF,GAAA,CAAC,YAAA,CAAa,SAAA,EAAb,EAAuB,CAAA;AAAA,wBACxB,GAAA,CAAC,YAAA,CAAa,KAAA,EAAb,EAAmB,QAAA,EAAA,kBAAA,EAAgB,CAAA;AAAA,QACnC,WAAA,CAAY,YAAA,CAAa,GAAA,CAAI,CAAA,GAAA,qBAC5B,GAAA;AAAA,UAAC,YAAA,CAAa,YAAA;AAAA,UAAb;AAAA,YAEC,OAAA,EAAO,IAAA;AAAA,YACP,KAAA,EAAO,GAAA;AAAA,YACP,eAAA,EAAiB,MAAM,sBAAA,CAAuB,GAAG,CAAA;AAAA,YAEhD,QAAA,EAAA;AAAA,WAAA;AAAA,UALI;AAAA,SAOR,CAAA;AAAA,wBACD,IAAA,CAAC,aAAa,IAAA,EAAb,EAAkB,UAAU,MAAM,uBAAA,CAAwB,IAAI,CAAA,EAC7D,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,eAAW,IAAA,EAAC,CAAA;AAAA,UAAE;AAAA,SAAA,EAE1B,CAAA;AAAA,wBAEA,GAAA,CAAC,YAAA,CAAa,SAAA,EAAb,EAAuB,CAAA;AAAA,4BACvB,YAAA,CAAa,IAAA,EAAb,EAAkB,QAAA,EAAU,SAAS,QAAA,EAAA,mBAAA,EAAiB;AAAA,OAAA,EACzD;AAAA,KAAA,EACF,CAAA;AAAA,oBAEA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAM,oBAAA,EAAsB,YAAA,EAAc,sBAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,QAAA,EAAU,iBAAA,EACd,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,eAAY,QAAA,EAAA,qBAAA,EAAmB,CAAA;AAAA,wBAChC,GAAA,CAAC,qBAAkB,QAAA,EAAA,gFAAA,EAEnB;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,IAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,WAAA,EACpB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,OAAA,EAAQ,oBAAA,EAAqB,QAAA,EAAA,cAAA,EAAY,CAAA;AAAA,wBAChD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,oBAAA;AAAA,YACH,KAAA,EAAO,WAAA;AAAA,YACP,UAAU,CAAA,KAAA,KAAS;AACjB,cAAA,cAAA,CAAe,KAAA,CAAM,OAAO,KAAK,CAAA;AACjC,cAAA,gBAAA,CAAiB,MAAS,CAAA;AAAA,YAC5B,CAAA;AAAA,YACA,WAAA,EAAY,UAAA;AAAA,YACZ,SAAA,EAAS,IAAA;AAAA,YACT,KAAA,EAAO,QAAQ,aAAa,CAAA;AAAA,YAC5B,kBAAA,EAAkB,gBAAgB,0BAAA,GAA6B;AAAA;AAAA,SACjE;AAAA,QACC,aAAA,wBACE,GAAA,EAAA,EAAE,EAAA,EAAG,4BAA2B,SAAA,EAAU,uBAAA,EAAwB,IAAA,EAAK,OAAA,EACrE,QAAA,EAAA,aAAA,EACH;AAAA,OAAA,EAEJ,CAAA;AAAA,2BACC,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,kBAAM,GAAA,CAAC,CAAA,EAAA,EAAE,GAAI,IAAA,EAAK,QAAA,EAAS,OAAA,EAAQ,SAAA,EAAU,OAAA,EAAS,MAAM,sBAAA,CAAuB,KAAK,GAAG,QAAA,EAAA,QAAA,EAEnG,CAAA;AAAA,wBACA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,kBAAM,GAAA,CAAC,QAAA,EAAA,EAAS,GAAI,IAAA,EAAK,QAAA,EAAS,OAAA,EAAQ,SAAA,EAAU,QAAA,EAAA,YAAA,EAE5D;AAAA,OAAA,EACF;AAAA,KAAA,EACF,GACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"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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"}

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

@@ -13,18 +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-BJOVwaxp.cjs');
-const buttonsGroup = require('../../../buttons-group-jq7kUVlX.cjs');
-const dataPanel = require('../../../data-panel-tSErqolu.cjs');
-const dropdownMenu = require('../../../dropdown-menu-Bfh5ROWe.cjs');
-const searchFieldBlock = require('../../../search-field-block-DnJYUEGi.cjs');
-const Notice = require('../../../Notice-D0Mvqvr0.cjs');
-const tabsRoot = require('../../../tabs-root-Dw7gHsnZ.cjs');
-const tabsTab = require('../../../tabs-tab-CP-kzlvB.cjs');
-const tabsContent = require('../../../tabs-content-CV7YrtD1.cjs');
+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 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-DnbTIGXa.cjs');
+const utils_cn = require('../../../cn-BuHW7Wrt.cjs');
 
 function TraceDataPanelView({
   traceId,
@@ -38,8 +39,10 @@ function TraceDataPanelView({
   initialSpanId,
   onPrevious,
   onNext,
-  collapsed: controlledCollapsed,
-  onCollapsedChange,
+  size = "wide",
+  depth,
+  headerSlot,
+  title,
   placement,
   LinkComponent,
   traceHref,
@@ -51,22 +54,68 @@ function TraceDataPanelView({
   scoresTabBadge,
   feedbackTabSlot,
   feedbackTabBadge,
-  activeTab,
-  onTabChange,
   featuredSpanIds,
   messagesPanelSlot,
-  spanPanelSlot,
-  className
+  sideView: controlledSideView,
+  onSideViewChange,
+  spanView: controlledSpanView,
+  onSpanViewChange,
+  spanPanelSlot
 }) {
   const isOnTracePage = placement === "trace-page";
-  const [internalCollapsed, setInternalCollapsed] = React.useState(false);
-  const collapsed = controlledCollapsed ?? internalCollapsed;
-  const setCollapsed = onCollapsedChange ?? setInternalCollapsed;
-  const [uncontrolledTab, setUncontrolledTab] = React.useState("details");
-  const currentTab = activeTab ?? uncontrolledTab;
-  const handleTabChange = (tab) => {
-    setUncontrolledTab(tab);
-    onTabChange?.(tab);
+  const sideViews = React.useMemo(() => {
+    const views = [];
+    if (messagesPanelSlot) {
+      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, {}) }),
+          "Messages"
+        ] })
+      });
+    }
+    if (feedbackTabSlot) {
+      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, {}) }),
+          "Feedback",
+          feedbackTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            " (",
+            feedbackTabBadge,
+            ")"
+          ] })
+        ] })
+      });
+    }
+    if (scoresTabSlot) {
+      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, {}) }),
+          "Scores",
+          scoresTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            " (",
+            scoresTabBadge,
+            ")"
+          ] })
+        ] })
+      });
+    }
+    return views;
+  }, [messagesPanelSlot, feedbackTabSlot, feedbackTabBadge, scoresTabSlot, scoresTabBadge]);
+  const [uncontrolledSideView, setUncontrolledSideView] = React.useState();
+  const chosenSideView = controlledSideView ?? uncontrolledSideView;
+  const sideView = (sideViews.find((view) => view.value === chosenSideView) ?? sideViews[0])?.value;
+  const handleSideViewChange = (view) => {
+    setUncontrolledSideView(view);
+    onSideViewChange?.(view);
+  };
+  const [uncontrolledSpanView, setUncontrolledSpanView] = React.useState("tree");
+  const spanView = controlledSpanView ?? uncontrolledSpanView;
+  const setSpanView = (view) => {
+    setUncontrolledSpanView(view);
+    onSpanViewChange?.(view);
   };
   const { download: downloadTraceJson, isPending: isDownloadingTrace } = domains_traces_hooks_useDownloadTraceJson.useDownloadTraceJson();
   const [selectedSpanId, setSelectedSpanId] = React.useState(initialSpanId ?? void 0);
@@ -112,22 +161,14 @@ function TraceDataPanelView({
     setSelectedSpanId(newId);
     onSpanSelect?.(newId);
   };
-  const traceActionsMenu = /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+  const traceActionsMenu = traceId && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       dropdownMenu.DropdownMenu.Trigger,
       {
-        render: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size: "md", tooltip: "Trace actions", "aria-label": "Trace actions", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontalIcon, {}) })
+        render: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size: "sm", variant: "ghost", tooltip: "Open trace actions", "aria-label": "Open trace actions", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontalIcon, {}) })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Content, { align: "end", children: [
-      !isOnTracePage && onCollapsedChange && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => setCollapsed(!collapsed), children: [
-        collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUpIcon, {}),
-        collapsed ? "Expand panel" : "Collapse panel"
-      ] }),
-      !isOnTracePage && onEvaluateTrace && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: onEvaluateTrace, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleGaugeIcon, {}),
-        "Evaluate trace"
-      ] }),
       !isOnTracePage && onSaveAsDatasetItem && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => onSaveAsDatasetItem({ traceId, rootSpanId: rootSpan?.spanId }), children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SaveIcon, {}),
         "Add full trace to dataset"
@@ -146,133 +187,136 @@ function TraceDataPanelView({
       ] })
     ] })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel, { collapsed, className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { children: isOnTracePage ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Heading, { children: "Trace Timeline" }),
-      /* @__PURE__ */ jsxRuntime.jsx(buttonsGroup.ButtonsGroup, { className: "ml-auto shrink-0", children: traceActionsMenu })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Heading, { className: "items-center", children: [
-          "Trace",
-          /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceIdButton.TraceIdButton, { id: traceId })
-        ] }),
-        !collapsed && rootSpan && /* @__PURE__ */ jsxRuntime.jsx(
-          domains_traces_components_traceSummaryDescription.TraceSummaryDescription,
-          {
-            rootSpan,
-            usage,
-            entityHref,
-            LinkComponent
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { className: "ml-auto shrink-0 self-start", children: [
-        traceActionsMenu,
-        (onPrevious || onNext) && /* @__PURE__ */ jsxRuntime.jsx(
-          dataPanel.DataPanel.NextPrevNav,
+  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)) }) }) }),
+    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 }) })
+  ] }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    dataPanel.DataPanel,
+    {
+      open: !!traceId,
+      onClose,
+      title: title ?? (isOnTracePage ? "Trace Timeline" : `Trace ${traceId ?? ""}`),
+      size,
+      depth,
+      children: traceId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        headerSlot,
+        /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { children: isOnTracePage ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Heading, { children: "Trace Timeline" }),
+          /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.HeaderActions, { children: traceActionsMenu })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.CloseButton, { onClick: onClose }),
+          /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.HeaderContent, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Heading, { children: [
+              "Trace",
+              /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceIdButton.TraceIdButton, { id: traceId })
+            ] }),
+            rootSpan && /* @__PURE__ */ jsxRuntime.jsx(
+              domains_traces_components_traceSummaryDescription.TraceSummaryDescription,
+              {
+                rootSpan,
+                usage,
+                entityHref,
+                LinkComponent
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.HeaderActions, { children: [
+            onEvaluateTrace && /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant: "primary", size: "sm", onClick: onEvaluateTrace, disabled: !rootSpan, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleGaugeIcon, {}),
+              "Score trace"
+            ] }),
+            traceActionsMenu,
+            (onPrevious || onNext) && /* @__PURE__ */ jsxRuntime.jsx(
+              dataPanel.DataPanel.NextPrevNav,
+              {
+                onPrevious,
+                onNext,
+                previousLabel: "Go to previous trace",
+                nextLabel: "Go to next trace"
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TracePanelColumns,
           {
-            onPrevious,
-            onNext,
-            previousLabel: "Previous trace",
-            nextLabel: "Next trace"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.CloseButton, { onClick: onClose })
-      ] })
-    ] }) }),
-    !collapsed && /* @__PURE__ */ jsxRuntime.jsx(
-      TracePanelColumns,
-      {
-        messagesPanelSlot,
-        messagesCollapsed: currentTab === "timeline",
-        spanPanelSlot,
-        highlightQuery: query,
-        spanPanelKey: selectedSpanId,
-        children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.LoadingData, { children: "Loading trace..." }) : !spans?.length ? /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.NoData, { children: "No spans found for this trace." }) : (() => {
-          const searchField = /* @__PURE__ */ jsxRuntime.jsx(
-            searchFieldBlock.SearchFieldBlock,
-            {
-              name: searchFieldName,
-              label: "Search spans",
-              labelIsHidden: true,
-              placeholder: "Search spans...",
-              value: query,
-              onChange: (e) => setQuery(e.target.value),
-              onReset: () => setQuery(""),
-              size: "sm",
-              variant: "outline",
-              className: "w-full"
-            }
-          );
-          const noSearchResults = hierarchicalSpans.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.NoData, { children: "No spans match your search." });
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            tabsRoot.Tabs,
-            {
-              defaultTab: "details",
-              value: activeTab,
-              onValueChange: handleTabChange,
-              className: "grid h-full min-h-0 grid-rows-[auto_1fr]",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Header, { className: "min-h-0 px-2 py-1", children: /* @__PURE__ */ jsxRuntime.jsxs(tabsRoot.TabList, { variant: "pill-ghost", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "details", children: "Spans" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(tabsTab.Tab, { value: "timeline", children: "Timeline" }),
-                  feedbackTabSlot && /* @__PURE__ */ jsxRuntime.jsxs(tabsTab.Tab, { value: "feedback", children: [
-                    "Feedback",
-                    feedbackTabBadge
-                  ] }),
-                  scoresTabSlot && /* @__PURE__ */ jsxRuntime.jsxs(tabsTab.Tab, { value: "scores", children: [
-                    "Scores",
-                    scoresTabBadge != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      " (",
-                      scoresTabBadge,
-                      ")"
-                    ] })
-                  ] })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "details", className: "min-h-0 py-0", children: /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Content, { children: [
-                  !isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && !onAddTraceMocksToItem && showUnavailableFeaturesMsg && /* @__PURE__ */ jsxRuntime.jsx(Notice.Notice, { variant: "info", className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(Notice.Notice.Message, { children: "Evaluating traces and saving them as dataset items is available in Mastra Studio (local or deployed)." }) }),
+            sideColumnSlot: sideColumn,
+            spanPanelSlot,
+            highlightQuery: query,
+            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: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  searchFieldBlock.SearchFieldBlock,
+                  {
+                    name: searchFieldName,
+                    label: "Search spans",
+                    labelIsHidden: true,
+                    placeholder: "Search spans...",
+                    value: query,
+                    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.jsx(
-                    domains_traces_components_traceSpanTree.TraceSpanTree,
+                    Button.Button,
                     {
-                      hierarchicalSpans,
-                      onSpanClick: handleSpanClick,
-                      selectedSpanId,
-                      expandedSpanIds,
-                      setExpandedSpanIds,
-                      featuredSpanIds,
-                      leadingSlot: searchField
+                      size: "sm",
+                      variant: isTimeline ? "default" : "primary",
+                      "aria-pressed": !isTimeline,
+                      tooltip: "Span tree",
+                      onClick: () => setSpanView("tree"),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, {})
                     }
                   ),
-                  noSearchResults
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "timeline", className: "min-h-0 py-0", children: /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Content, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    domains_traces_components_traceSpanTimeline.TraceSpanTimeline,
+                    Button.Button,
                     {
-                      hierarchicalSpans,
-                      onSpanClick: handleSpanClick,
-                      selectedSpanId,
-                      expandedSpanIds,
-                      setExpandedSpanIds,
-                      featuredSpanIds,
-                      leadingSlot: searchField
+                      size: "sm",
+                      variant: isTimeline ? "primary" : "default",
+                      "aria-pressed": isTimeline,
+                      tooltip: "Timeline",
+                      onClick: () => setSpanView("timeline"),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChartGanttIcon, {})
                     }
-                  ),
+                  )
+                ] })
+              ] });
+              const noSearchResults = !isLoading && hierarchicalSpans.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.NoData, { children: "No spans match your search." });
+              const viewProps = {
+                hierarchicalSpans,
+                onSpanClick: handleSpanClick,
+                selectedSpanId,
+                expandedSpanIds,
+                setExpandedSpanIds,
+                featuredSpanIds,
+                isLoading
+              };
+              return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                searchHeader,
+                /* @__PURE__ */ jsxRuntime.jsxs(dataPanel.DataPanel.Content, { children: [
+                  !isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && !onAddTraceMocksToItem && showUnavailableFeaturesMsg && /* @__PURE__ */ jsxRuntime.jsx(Notice.Notice, { variant: "info", className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(Notice.Notice.Message, { children: "Evaluating traces and saving them as dataset items is available in Mastra Studio (local or deployed)." }) }),
+                  isTimeline ? /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceSpanTimeline.TraceSpanTimeline, { ...viewProps }) : /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceSpanTree.TraceSpanTree, { ...viewProps }),
                   noSearchResults
-                ] }) }),
-                feedbackTabSlot && /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "feedback", className: "h-full min-h-0 py-0", children: /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: feedbackTabSlot({ traceId }) }) }),
-                scoresTabSlot && /* @__PURE__ */ jsxRuntime.jsx(tabsContent.TabContent, { value: "scores", className: "h-full min-h-0 py-0", children: /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Content, { children: scoresTabSlot({ traceId, rootSpanId: rootSpan?.spanId }) }) })
-              ]
-            }
-          );
-        })()
-      }
-    )
-  ] });
+                ] })
+              ] });
+            })()
+          }
+        )
+      ] })
+    }
+  );
 }
 function TracePanelColumns({
-  messagesPanelSlot,
-  messagesCollapsed,
+  sideColumnSlot,
   spanPanelSlot,
   highlightQuery,
   spanPanelKey,
@@ -280,25 +324,17 @@ function TracePanelColumns({
 }) {
   const { ref: highlightRef } = hooks_useTextHighlight.useTextHighlight(highlightQuery);
   const { ref: scrollToMatchRef } = hooks_useScrollToFirstHighlight.useScrollToFirstHighlight(highlightQuery, spanPanelKey);
-  const showMessages = !!messagesPanelSlot && !messagesCollapsed;
-  const columns = showMessages && spanPanelSlot ? "grid-cols-[1fr_1fr_1fr]" : showMessages ? "grid-cols-[1fr_1fr_0fr]" : spanPanelSlot ? "grid-cols-[0fr_1fr_1fr]" : "grid-cols-[0fr_1fr_0fr]";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: highlightRef,
       "data-trace-columns": true,
-      className: utils_cn.cn("grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out", columns),
+      className: utils_cn.cn(
+        "grid min-h-0 flex-1 transition-[grid-template-columns] duration-300 ease-in-out",
+        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",
-              showMessages && "animate-in border-r border-border1 duration-300 fade-in-0"
-            ),
-            children: messagesPanelSlot
-          }
-        ),
+        /* @__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: "flex min-h-0 min-w-0 flex-col overflow-hidden", children }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",