@mastra/playground-ui 58.0.0 → 59.0.0-alpha.1

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

@@ -7,11 +7,11 @@ const lucideReact = require('lucide-react');
 const React = require('react');
 const domains_traces_traceListColumns = require('../trace-list-columns.cjs.js');
 const Button = require('../../../Button-BAMnPqos.cjs');
-const combobox = require('../../../combobox-BoSB-muq.cjs');
+const combobox = require('../../../combobox-B19HJqE-.cjs');
 require('@base-ui/react/combobox');
 const dialog = require('../../../dialog-Vvcjm0rZ.cjs');
 const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
-const fieldErrorId = require('../../../field-error-id-6EfqmQ4C.cjs');
+const fieldErrorId = require('../../../field-error-id-V_WejsRL.cjs');
 
 const METADATA_KEY_FIELD_NAME = "trace-metadata-key";
 const EMPTY_KEYS = [];
@@ -31,6 +31,7 @@ function TraceColumnsMenu({
   preferences,
   availableMetadataKeys = EMPTY_KEYS,
   usageDisabledReason,
+  withQueryTrace = true,
   onToggleColumn,
   onAddCustomColumn,
   onRemoveCustomColumn,
@@ -113,27 +114,29 @@ function TraceColumnsMenu({
             field
           );
         }),
-        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Label, { children: "Metadata columns" }),
-        preferences.metadataKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
-          dropdownMenu.DropdownMenu.CheckboxItem,
-          {
-            checked: true,
-            title: key,
-            onCheckedChange: () => onRemoveMetadataColumn(key),
-            children: key
-          },
-          key
-        )),
-        /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => setIsMetadataDialogOpen(true), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { "aria-hidden": true }),
-          "Add metadata column"
+        (withQueryTrace || preferences.metadataKeys.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Label, { children: "Metadata columns" }),
+          preferences.metadataKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
+            dropdownMenu.DropdownMenu.CheckboxItem,
+            {
+              checked: true,
+              title: key,
+              onCheckedChange: () => onRemoveMetadataColumn(key),
+              children: key
+            },
+            key
+          )),
+          withQueryTrace && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.Item, { onSelect: () => setIsMetadataDialogOpen(true), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { "aria-hidden": true }),
+            "Add metadata column"
+          ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Separator, {}),
         /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Item, { onSelect: onReset, children: "Reset to defaults" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isMetadataDialogOpen, onOpenChange: handleDialogOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleAddMetadata, children: [
+    withQueryTrace && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isMetadataDialogOpen, onOpenChange: handleDialogOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleAddMetadata, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Add metadata column" }),
         /* @__PURE__ */ jsxRuntime.jsx(dialog.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." })

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

@@ -1 +1 @@
-{"version":3,"file":"trace-columns-menu.cjs.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=\"px-2 py-1 text-meta text-placeholder\" 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\" 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":["useState","useMemo","jsxs","Fragment","DropdownMenu","jsx","Button","Columns3Icon","TRACE_USAGE_COLUMNS","TRACE_CUSTOM_COLUMN_FIELDS","PlusIcon","Dialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogBody","FieldBlock","Combobox","DialogFooter","X","Columns3"],"mappings":"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"}
+{"version":3,"file":"trace-columns-menu.cjs.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  /** When false (server without the trace-query API), metadata columns can't be added. Defaults to true. */\n  withQueryTrace?: boolean;\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  withQueryTrace = true,\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=\"px-2 py-1 text-meta text-placeholder\" 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          {(withQueryTrace || preferences.metadataKeys.length > 0) && (\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              {withQueryTrace && (\n                <DropdownMenu.Item onSelect={() => setIsMetadataDialogOpen(true)}>\n                  <PlusIcon aria-hidden />\n                  Add metadata column\n                </DropdownMenu.Item>\n              )}\n            </>\n          )}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item onSelect={onReset}>Reset to defaults</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      {withQueryTrace && (\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\" 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}\n"],"names":["useState","useMemo","jsxs","Fragment","DropdownMenu","jsx","Button","Columns3Icon","TRACE_USAGE_COLUMNS","TRACE_CUSTOM_COLUMN_FIELDS","PlusIcon","Dialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogBody","FieldBlock","Combobox","DialogFooter","X","Columns3"],"mappings":"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"}

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

@@ -3,11 +3,11 @@ import { Columns3Icon, PlusIcon, X, Columns3 } from 'lucide-react';
 import { useState, useMemo } from 'react';
 import { TRACE_USAGE_COLUMNS, TRACE_CUSTOM_COLUMN_FIELDS, TRACE_CUSTOM_COLUMN_LABELS } from '../trace-list-columns.es.js';
 import { B as Button } from '../../../Button-B8nF87ai.js';
-import { C as Combobox } from '../../../combobox-Cd0JPUQW.js';
+import { C as Combobox } from '../../../combobox-D_kmwSKS.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-Dtfe1ylw.js';
 import { D as DropdownMenu } from '../../../dropdown-menu-DpEn6HwK.js';
-import { F as FieldBlock } from '../../../field-error-id-DyWx33Fu.js';
+import { F as FieldBlock } from '../../../field-error-id-DD7OARLU.js';
 
 const METADATA_KEY_FIELD_NAME = "trace-metadata-key";
 const EMPTY_KEYS = [];
@@ -27,6 +27,7 @@ function TraceColumnsMenu({
   preferences,
   availableMetadataKeys = EMPTY_KEYS,
   usageDisabledReason,
+  withQueryTrace = true,
   onToggleColumn,
   onAddCustomColumn,
   onRemoveCustomColumn,
@@ -109,27 +110,29 @@ function TraceColumnsMenu({
             field
           );
         }),
-        /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
-        /* @__PURE__ */ jsx(DropdownMenu.Label, { children: "Metadata columns" }),
-        preferences.metadataKeys.map((key) => /* @__PURE__ */ jsx(
-          DropdownMenu.CheckboxItem,
-          {
-            checked: true,
-            title: key,
-            onCheckedChange: () => onRemoveMetadataColumn(key),
-            children: key
-          },
-          key
-        )),
-        /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: () => setIsMetadataDialogOpen(true), children: [
-          /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": true }),
-          "Add metadata column"
+        (withQueryTrace || preferences.metadataKeys.length > 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+          /* @__PURE__ */ jsx(DropdownMenu.Label, { children: "Metadata columns" }),
+          preferences.metadataKeys.map((key) => /* @__PURE__ */ jsx(
+            DropdownMenu.CheckboxItem,
+            {
+              checked: true,
+              title: key,
+              onCheckedChange: () => onRemoveMetadataColumn(key),
+              children: key
+            },
+            key
+          )),
+          withQueryTrace && /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: () => setIsMetadataDialogOpen(true), children: [
+            /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": true }),
+            "Add metadata column"
+          ] })
         ] }),
         /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
         /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: onReset, children: "Reset to defaults" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(Dialog, { open: isMetadataDialogOpen, onOpenChange: handleDialogOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs("form", { onSubmit: handleAddMetadata, children: [
+    withQueryTrace && /* @__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: "Pick a top-level trace metadata key observed in the current time range, or type one. Only the key is saved, never its values." })

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 { 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=\"px-2 py-1 text-meta text-placeholder\" 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\" 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  /** When false (server without the trace-query API), metadata columns can't be added. Defaults to true. */\n  withQueryTrace?: boolean;\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  withQueryTrace = true,\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=\"px-2 py-1 text-meta text-placeholder\" 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          {(withQueryTrace || preferences.metadataKeys.length > 0) && (\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              {withQueryTrace && (\n                <DropdownMenu.Item onSelect={() => setIsMetadataDialogOpen(true)}>\n                  <PlusIcon aria-hidden />\n                  Add metadata column\n                </DropdownMenu.Item>\n              )}\n            </>\n          )}\n\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item onSelect={onReset}>Reset to defaults</DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      {withQueryTrace && (\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\" 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}\n"],"names":[],"mappings":"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"}

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

@@ -15,9 +15,9 @@ const domains_traces_components_traceSpanTree = require('./trace-span-tree.cjs.j
 const domains_traces_components_traceSummaryDescription = require('./trace-summary-description.cjs.js');
 const Button = require('../../../Button-BAMnPqos.cjs');
 const buttonsGroup = require('../../../buttons-group-CoZP3lJt.cjs');
-const dataPanel = require('../../../data-panel-XPXrhYJI.cjs');
+const dataPanel = require('../../../data-panel-C_BqhzeL.cjs');
 const dropdownMenu = require('../../../dropdown-menu-j2y37TL5.cjs');
-const searchFieldBlock = require('../../../search-field-block-7-ufp4uG.cjs');
+const searchFieldBlock = require('../../../search-field-block-K_e_S9WY.cjs');
 const Notice = require('../../../Notice-AUNd8fqT.cjs');
 const tabsRoot = require('../../../tabs-root-COCL6jcx.cjs');
 const tabsTab = require('../../../tabs-tab-DFmRMdi3.cjs');

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

@@ -11,9 +11,9 @@ import { TraceSpanTree } from './trace-span-tree.es.js';
 import { TraceSummaryDescription } from './trace-summary-description.es.js';
 import { B as Button } from '../../../Button-B8nF87ai.js';
 import { B as ButtonsGroup } from '../../../buttons-group-DsZgrZBZ.js';
-import { D as DataPanel } from '../../../data-panel-BQVTKo86.js';
+import { D as DataPanel } from '../../../data-panel-BWgExbHs.js';
 import { D as DropdownMenu } from '../../../dropdown-menu-DpEn6HwK.js';
-import { S as SearchFieldBlock } from '../../../search-field-block-fU3tStmB.js';
+import { S as SearchFieldBlock } from '../../../search-field-block-Dj2KJyjQ.js';
 import { N as Notice } from '../../../Notice-WT8G4OA6.js';
 import { a as Tabs, T as TabList } from '../../../tabs-root-UNPxoGhW.js';
 import { T as Tab } from '../../../tabs-tab-DluwCnDF.js';

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

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

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

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

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

@@ -7,11 +7,10 @@ const domains_traces_components_spanRows = require('./span-rows.cjs.js');
 const domains_traces_components_spanTimelineRow = require('./span-timeline-row.cjs.js');
 const domains_traces_components_spanTypeLegend = require('./span-type-legend.cjs.js');
 const domains_traces_components_traceSpanTree = require('./trace-span-tree.cjs.js');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
+const utils_duration = require('../../../utils/duration.cjs.js');
 
 const TICKS = [0, 0.25, 0.5, 0.75, 1];
-function formatTick(ms) {
-  return ms < 1e3 ? `${Math.round(ms)} ms` : `${(ms / 1e3).toFixed(2)} s`;
-}
 function TraceSpanTimeline({
   hierarchicalSpans = [],
   onSpanClick,
@@ -32,7 +31,14 @@ function TraceSpanTimeline({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {}),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-label": "Trace time axis", className: "grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between text-meta text-muted-foreground tabular-nums", children: TICKS.map((tick) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTick(overallLatency * tick) }, tick)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between text-meta text-muted-foreground tabular-nums", children: TICKS.map((tick, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: utils_cn.cn("whitespace-nowrap", index > 0 && index < TICKS.length - 1 && "hidden sm:inline"),
+            children: utils_duration.formatDurationPrecise(overallLatency * tick)
+          },
+          tick
+        )) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"trace-span-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport { SpanRows } from './span-rows';\nimport { SpanTimelineRow } from './span-timeline-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\n\nexport type TraceSpanTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\nfunction formatTick(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/**\n * Gantt-style view of a trace: the same hierarchy and expansion state as `TraceSpanTree`,\n * but each row is a compact name cell plus a bar on a shared time axis. Rendered with its\n * own row component (`SpanTimelineRow`), independent from the tree's rows.\n */\nexport function TraceSpanTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n}: TraceSpanTimelineProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  const overallLatency = hierarchicalSpans[0]?.latency || 0;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div className=\"grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1\">\n        {/* Header row: empty name cell, then the axis aligned with the bars (same horizontal padding, minus the duration label). */}\n        <div />\n        <div aria-label=\"Trace time axis\" className=\"grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1\">\n          <div className=\"flex justify-between text-meta text-muted-foreground tabular-nums\">\n            {TICKS.map(tick => (\n              <span key={tick}>{formatTick(overallLatency * tick)}</span>\n            ))}\n          </div>\n          <div className=\"w-12\" />\n        </div>\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTimelineRow ctx={ctx} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":["jsx","TraceSpanTreeLoading","jsxs","Fragment","SpanTypeLegend","SpanRows","SpanTimelineRow"],"mappings":";;;;;;;;;;AAsBA,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAEpC,SAAS,WAAW,EAAA,EAAY;AAC9B,EAAA,OAAO,EAAA,GAAK,GAAA,GAAO,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,GAAA,CAAA,GAAQ,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AACvE;AAOO,SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,uBAAOA,cAAA,CAACC,4DAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACDH,cAAA,CAACI,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EAEb,QAAA,EAAA;AAAA,sBAAAF,cAAA,CAAC,KAAA,EAAA,EAAI,CAAA;AAAA,sBACLE,eAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAW,iBAAA,EAAkB,WAAU,qDAAA,EAC1C,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mEAAA,EACZ,QAAA,EAAA,KAAA,CAAM,IAAI,CAAA,IAAA,qBACTA,cAAA,CAAC,MAAA,EAAA,EAAiB,QAAA,EAAA,UAAA,CAAW,cAAA,GAAiB,IAAI,CAAA,EAAA,EAAvC,IAAyC,CACrD,CAAA,EACH,CAAA;AAAA,wBACAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAO;AAAA,OAAA,EACxB,CAAA;AAAA,sBACAA,cAAA;AAAA,QAACK,2CAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA,EAAW,CAAA,GAAA,qBAAOL,cAAA,CAACM,yDAAA,EAAA,EAAgB,GAAA,EAAU;AAAA;AAAA;AAC/C,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-span-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport { SpanRows } from './span-rows';\nimport { SpanTimelineRow } from './span-timeline-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type TraceSpanTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\n/**\n * Gantt-style view of a trace: the same hierarchy and expansion state as `TraceSpanTree`,\n * but each row is a compact name cell plus a bar on a shared time axis. Rendered with its\n * own row component (`SpanTimelineRow`), independent from the tree's rows.\n */\nexport function TraceSpanTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n}: TraceSpanTimelineProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  const overallLatency = hierarchicalSpans[0]?.latency || 0;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div className=\"grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1\">\n        {/* Header row: empty name cell, then the axis aligned with the bars (same horizontal padding, minus the duration label). */}\n        <div />\n        <div aria-label=\"Trace time axis\" className=\"grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1\">\n          <div className=\"flex justify-between text-meta text-muted-foreground tabular-nums\">\n            {TICKS.map((tick, index) => (\n              <span\n                key={tick}\n                className={cn('whitespace-nowrap', index > 0 && index < TICKS.length - 1 && 'hidden sm:inline')}\n              >\n                {formatDurationPrecise(overallLatency * tick)}\n              </span>\n            ))}\n          </div>\n          <div className=\"w-12\" />\n        </div>\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTimelineRow ctx={ctx} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":["jsx","TraceSpanTreeLoading","jsxs","Fragment","SpanTypeLegend","cn","formatDurationPrecise","SpanRows","SpanTimelineRow"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAO7B,SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,uBAAOA,cAAA,CAACC,4DAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACDH,cAAA,CAACI,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EAEb,QAAA,EAAA;AAAA,sBAAAF,cAAA,CAAC,KAAA,EAAA,EAAI,CAAA;AAAA,sBACLE,eAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAW,iBAAA,EAAkB,WAAU,qDAAA,EAC1C,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,SAAI,SAAA,EAAU,mEAAA,EACZ,gBAAM,GAAA,CAAI,CAAC,MAAM,KAAA,qBAChBA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAWK,YAAG,mBAAA,EAAqB,KAAA,GAAQ,KAAK,KAAA,GAAQ,KAAA,CAAM,MAAA,GAAS,CAAA,IAAK,kBAAkB,CAAA;AAAA,YAE7F,QAAA,EAAAC,oCAAA,CAAsB,iBAAiB,IAAI;AAAA,WAAA;AAAA,UAHvC;AAAA,SAKR,CAAA,EACH,CAAA;AAAA,wBACAN,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAO;AAAA,OAAA,EACxB,CAAA;AAAA,sBACAA,cAAA;AAAA,QAACO,2CAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA,EAAW,CAAA,GAAA,qBAAOP,cAAA,CAACQ,yDAAA,EAAA,EAAgB,GAAA,EAAU;AAAA;AAAA;AAC/C,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -3,11 +3,10 @@ import { SpanRows } from './span-rows.es.js';
 import { SpanTimelineRow } from './span-timeline-row.es.js';
 import { SpanTypeLegend } from './span-type-legend.es.js';
 import { TraceSpanTreeLoading } from './trace-span-tree.es.js';
+import { c as cn } from '../../../cn-65Adrsfj.js';
+import { formatDurationPrecise } from '../../../utils/duration.es.js';
 
 const TICKS = [0, 0.25, 0.5, 0.75, 1];
-function formatTick(ms) {
-  return ms < 1e3 ? `${Math.round(ms)} ms` : `${(ms / 1e3).toFixed(2)} s`;
-}
 function TraceSpanTimeline({
   hierarchicalSpans = [],
   onSpanClick,
@@ -28,7 +27,14 @@ function TraceSpanTimeline({
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1", children: [
       /* @__PURE__ */ jsx("div", {}),
       /* @__PURE__ */ jsxs("div", { "aria-label": "Trace time axis", className: "grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex justify-between text-meta text-muted-foreground tabular-nums", children: TICKS.map((tick) => /* @__PURE__ */ jsx("span", { children: formatTick(overallLatency * tick) }, tick)) }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-between text-meta text-muted-foreground tabular-nums", children: TICKS.map((tick, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("whitespace-nowrap", index > 0 && index < TICKS.length - 1 && "hidden sm:inline"),
+            children: formatDurationPrecise(overallLatency * tick)
+          },
+          tick
+        )) }),
         /* @__PURE__ */ jsx("div", { className: "w-12" })
       ] }),
       /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"trace-span-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport { SpanRows } from './span-rows';\nimport { SpanTimelineRow } from './span-timeline-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\n\nexport type TraceSpanTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\nfunction formatTick(ms: number) {\n  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;\n}\n\n/**\n * Gantt-style view of a trace: the same hierarchy and expansion state as `TraceSpanTree`,\n * but each row is a compact name cell plus a bar on a shared time axis. Rendered with its\n * own row component (`SpanTimelineRow`), independent from the tree's rows.\n */\nexport function TraceSpanTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n}: TraceSpanTimelineProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  const overallLatency = hierarchicalSpans[0]?.latency || 0;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div className=\"grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1\">\n        {/* Header row: empty name cell, then the axis aligned with the bars (same horizontal padding, minus the duration label). */}\n        <div />\n        <div aria-label=\"Trace time axis\" className=\"grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1\">\n          <div className=\"flex justify-between text-meta text-muted-foreground tabular-nums\">\n            {TICKS.map(tick => (\n              <span key={tick}>{formatTick(overallLatency * tick)}</span>\n            ))}\n          </div>\n          <div className=\"w-12\" />\n        </div>\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTimelineRow ctx={ctx} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAEpC,SAAS,WAAW,EAAA,EAAY;AAC9B,EAAA,OAAO,EAAA,GAAK,GAAA,GAAO,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,EAAE,CAAC,CAAA,GAAA,CAAA,GAAQ,CAAA,EAAA,CAAI,EAAA,GAAK,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AACvE;AAOO,SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACD,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EAEb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,CAAA;AAAA,sBACL,IAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAW,iBAAA,EAAkB,WAAU,qDAAA,EAC1C,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mEAAA,EACZ,QAAA,EAAA,KAAA,CAAM,IAAI,CAAA,IAAA,qBACT,GAAA,CAAC,MAAA,EAAA,EAAiB,QAAA,EAAA,UAAA,CAAW,cAAA,GAAiB,IAAI,CAAA,EAAA,EAAvC,IAAyC,CACrD,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAO;AAAA,OAAA,EACxB,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA,EAAW,CAAA,GAAA,qBAAO,GAAA,CAAC,eAAA,EAAA,EAAgB,GAAA,EAAU;AAAA;AAAA;AAC/C,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-span-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-span-timeline.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport { SpanRows } from './span-rows';\nimport { SpanTimelineRow } from './span-timeline-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeLoading } from './trace-span-tree';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type TraceSpanTimelineProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n};\n\nconst TICKS = [0, 0.25, 0.5, 0.75, 1];\n\n/**\n * Gantt-style view of a trace: the same hierarchy and expansion state as `TraceSpanTree`,\n * but each row is a compact name cell plus a bar on a shared time axis. Rendered with its\n * own row component (`SpanTimelineRow`), independent from the tree's rows.\n */\nexport function TraceSpanTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n}: TraceSpanTimelineProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  const overallLatency = hierarchicalSpans[0]?.latency || 0;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div className=\"grid grid-cols-[minmax(10rem,2fr)_minmax(12rem,3fr)] content-start gap-y-px overflow-hidden py-1\">\n        {/* Header row: empty name cell, then the axis aligned with the bars (same horizontal padding, minus the duration label). */}\n        <div />\n        <div aria-label=\"Trace time axis\" className=\"grid grid-cols-[minmax(0,1fr)_auto] gap-2 px-2 pb-1\">\n          <div className=\"flex justify-between text-meta text-muted-foreground tabular-nums\">\n            {TICKS.map((tick, index) => (\n              <span\n                key={tick}\n                className={cn('whitespace-nowrap', index > 0 && index < TICKS.length - 1 && 'hidden sm:inline')}\n              >\n                {formatDurationPrecise(overallLatency * tick)}\n              </span>\n            ))}\n          </div>\n          <div className=\"w-12\" />\n        </div>\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTimelineRow ctx={ctx} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAwBA,MAAM,QAAQ,CAAC,CAAA,EAAG,IAAA,EAAM,GAAA,EAAK,MAAM,CAAC,CAAA;AAO7B,SAAS,iBAAA,CAAkB;AAAA,EAChC,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,iBAAA,CAAkB,CAAC,CAAA,EAAG,OAAA,IAAW,CAAA;AAExD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACD,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kGAAA,EAEb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,CAAA;AAAA,sBACL,IAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAW,iBAAA,EAAkB,WAAU,qDAAA,EAC1C,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,mEAAA,EACZ,gBAAM,GAAA,CAAI,CAAC,MAAM,KAAA,qBAChB,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAW,GAAG,mBAAA,EAAqB,KAAA,GAAQ,KAAK,KAAA,GAAQ,KAAA,CAAM,MAAA,GAAS,CAAA,IAAK,kBAAkB,CAAA;AAAA,YAE7F,QAAA,EAAA,qBAAA,CAAsB,iBAAiB,IAAI;AAAA,WAAA;AAAA,UAHvC;AAAA,SAKR,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAO;AAAA,OAAA,EACxB,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,iBAAA;AAAA,UACP,WAAA;AAAA,UACA,cAAA;AAAA,UACA,YAAA;AAAA,UACA,UAAA;AAAA,UACA,eAAA;AAAA,UACA,eAAA;AAAA,UACA,kBAAA;AAAA,UACA,SAAA,EAAW,CAAA,GAAA,qBAAO,GAAA,CAAC,eAAA,EAAA,EAAgB,GAAA,EAAU;AAAA;AAAA;AAC/C,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/traces/components/trace-span-tree.cjs.js

@@ -7,15 +7,14 @@ const domains_traces_components_spanRows = require('./span-rows.cjs.js');
 const domains_traces_components_spanTreeRow = require('./span-tree-row.cjs.js');
 const domains_traces_components_spanTypeLegend = require('./span-type-legend.cjs.js');
 const domains_traces_components_traceSpanTreeSkeleton = require('./trace-span-tree-skeleton.cjs.js');
+const Txt = require('../../../Txt-DPmEpNbp.cjs');
 const utils_cn = require('../../../cn-DG0X1KEP.cjs');
+const utils_duration = require('../../../utils/duration.cjs.js');
 
 function TraceSpanTreeLoading() {
   return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceSpanTreeSkeleton.TraceSpanTreeSkeleton, {});
 }
-const durationMeta = (ctx) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  (ctx.span.latency / 1e3).toFixed(3),
-  " s"
-] });
+const durationMeta = (ctx) => /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "meta", font: "mono", children: utils_duration.formatDurationPrecise(ctx.span.latency) });
 function TraceSpanTree({
   hierarchicalSpans = [],
   onSpanClick,

package/dist/domains/traces/components/trace-span-tree.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-span-tree.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton';\nimport { cn } from '@/lib/utils';\n\nexport type TraceSpanTreeProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** Optional end-of-row cell. By default rows have no trailing cell; the duration is shown under the span name. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return <TraceSpanTreeSkeleton />;\n}\n\nconst durationMeta = (ctx: SpanRowContext) => <>{(ctx.span.latency / 1000).toFixed(3)}&nbsp;s</>;\n\n/** Hierarchical span tree: expand toggle, name and duration per row, plus an optional trailing cell. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div\n        className={cn('grid content-start items-start gap-y-px overflow-hidden pb-1', {\n          'grid-cols-[minmax(0,1fr)]': !renderTrailing,\n          'grid-cols-[minmax(0,1fr)_auto]': !!renderTrailing,\n        })}\n      >\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} meta={durationMeta} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":["TraceSpanTreeSkeleton","jsxs","Fragment","jsx","SpanTypeLegend","cn","SpanRows","SpanTreeRow"],"mappings":";;;;;;;;;;;AA0BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,sCAAQA,qEAAA,EAAA,EAAsB,CAAA;AAChC;AAEA,MAAM,YAAA,GAAe,CAAC,GAAA,qBAAwBC,eAAA,CAAAC,mBAAA,EAAA,EAAI,QAAA,EAAA;AAAA,EAAA,CAAA,GAAA,CAAI,IAAA,CAAK,OAAA,GAAU,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EAAE;AAAA,CAAA,EAAO,CAAA;AAGtF,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAOC,cAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACEF,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACDC,cAAA,CAACC,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWE,YAAG,8DAAA,EAAgE;AAAA,UAC5E,6BAA6B,CAAC,cAAA;AAAA,UAC9B,gCAAA,EAAkC,CAAC,CAAC;AAAA,SACrC,CAAA;AAAA,QAED,QAAA,kBAAAF,cAAA;AAAA,UAACG,2CAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,iBAAA;AAAA,YACP,WAAA;AAAA,YACA,cAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YACA,kBAAA;AAAA,YACA,SAAA,EAAW,yBAAOH,cAAA,CAACI,iDAAA,EAAA,EAAY,KAAU,IAAA,EAAM,YAAA,EAAc,UAAU,cAAA,EAAgB;AAAA;AAAA;AACzF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"trace-span-tree.cjs.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type TraceSpanTreeProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** Optional end-of-row cell. By default rows have no trailing cell; the duration is shown under the span name. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return <TraceSpanTreeSkeleton />;\n}\n\nconst durationMeta = (ctx: SpanRowContext) => (\n  <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n    {formatDurationPrecise(ctx.span.latency)}\n  </Txt>\n);\n\n/** Hierarchical span tree: expand toggle, name and duration per row, plus an optional trailing cell. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div\n        className={cn('grid content-start items-start gap-y-px overflow-hidden pb-1', {\n          'grid-cols-[minmax(0,1fr)]': !renderTrailing,\n          'grid-cols-[minmax(0,1fr)_auto]': !!renderTrailing,\n        })}\n      >\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} meta={durationMeta} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":["TraceSpanTreeSkeleton","jsx","Txt","formatDurationPrecise","jsxs","Fragment","SpanTypeLegend","cn","SpanRows","SpanTreeRow"],"mappings":";;;;;;;;;;;;;AA4BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,sCAAQA,qEAAA,EAAA,EAAsB,CAAA;AAChC;AAEA,MAAM,YAAA,GAAe,CAAC,GAAA,qBACpBC,cAAA,CAACC,WAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,MAAA,EAAO,MAAK,MAAA,EAChC,QAAA,EAAAC,oCAAA,CAAsB,GAAA,CAAI,IAAA,CAAK,OAAO,CAAA,EACzC,CAAA;AAIK,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAOF,cAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACEG,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACDJ,cAAA,CAACK,uDAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1CL,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWM,YAAG,8DAAA,EAAgE;AAAA,UAC5E,6BAA6B,CAAC,cAAA;AAAA,UAC9B,gCAAA,EAAkC,CAAC,CAAC;AAAA,SACrC,CAAA;AAAA,QAED,QAAA,kBAAAN,cAAA;AAAA,UAACO,2CAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,iBAAA;AAAA,YACP,WAAA;AAAA,YACA,cAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YACA,kBAAA;AAAA,YACA,SAAA,EAAW,yBAAOP,cAAA,CAACQ,iDAAA,EAAA,EAAY,KAAU,IAAA,EAAM,YAAA,EAAc,UAAU,cAAA,EAAgB;AAAA;AAAA;AACzF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;;"}

package/dist/domains/traces/components/trace-span-tree.es.js

@@ -3,15 +3,14 @@ import { SpanRows } from './span-rows.es.js';
 import { SpanTreeRow } from './span-tree-row.es.js';
 import { SpanTypeLegend } from './span-type-legend.es.js';
 import { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton.es.js';
+import { T as Txt } from '../../../Txt-BP1SRHmL.js';
 import { c as cn } from '../../../cn-65Adrsfj.js';
+import { formatDurationPrecise } from '../../../utils/duration.es.js';
 
 function TraceSpanTreeLoading() {
   return /* @__PURE__ */ jsx(TraceSpanTreeSkeleton, {});
 }
-const durationMeta = (ctx) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  (ctx.span.latency / 1e3).toFixed(3),
-  " s"
-] });
+const durationMeta = (ctx) => /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", font: "mono", children: formatDurationPrecise(ctx.span.latency) });
 function TraceSpanTree({
   hierarchicalSpans = [],
   onSpanClick,

package/dist/domains/traces/components/trace-span-tree.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"trace-span-tree.es.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton';\nimport { cn } from '@/lib/utils';\n\nexport type TraceSpanTreeProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** Optional end-of-row cell. By default rows have no trailing cell; the duration is shown under the span name. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return <TraceSpanTreeSkeleton />;\n}\n\nconst durationMeta = (ctx: SpanRowContext) => <>{(ctx.span.latency / 1000).toFixed(3)}&nbsp;s</>;\n\n/** Hierarchical span tree: expand toggle, name and duration per row, plus an optional trailing cell. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div\n        className={cn('grid content-start items-start gap-y-px overflow-hidden pb-1', {\n          'grid-cols-[minmax(0,1fr)]': !renderTrailing,\n          'grid-cols-[minmax(0,1fr)_auto]': !!renderTrailing,\n        })}\n      >\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} meta={durationMeta} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA0BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,2BAAQ,qBAAA,EAAA,EAAsB,CAAA;AAChC;AAEA,MAAM,YAAA,GAAe,CAAC,GAAA,qBAAwB,IAAA,CAAA,QAAA,EAAA,EAAI,QAAA,EAAA;AAAA,EAAA,CAAA,GAAA,CAAI,IAAA,CAAK,OAAA,GAAU,GAAA,EAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,EAAE;AAAA,CAAA,EAAO,CAAA;AAGtF,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACD,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,UAC5E,6BAA6B,CAAC,cAAA;AAAA,UAC9B,gCAAA,EAAkC,CAAC,CAAC;AAAA,SACrC,CAAA;AAAA,QAED,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,iBAAA;AAAA,YACP,WAAA;AAAA,YACA,cAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YACA,kBAAA;AAAA,YACA,SAAA,EAAW,yBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,KAAU,IAAA,EAAM,YAAA,EAAc,UAAU,cAAA,EAAgB;AAAA;AAAA;AACzF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"trace-span-tree.es.js","sources":["../../../../src/domains/traces/components/trace-span-tree.tsx"],"sourcesContent":["import type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport type { UISpan } from '../types';\nimport type { SpanRowContext } from './span-rows';\nimport { SpanRows } from './span-rows';\nimport { SpanTreeRow } from './span-tree-row';\nimport { SpanTypeLegend } from './span-type-legend';\nimport { TraceSpanTreeSkeleton } from './trace-span-tree-skeleton';\nimport { Txt } from '@/ds/components/Txt/Txt';\nimport { cn } from '@/lib/utils';\nimport { formatDurationPrecise } from '@/utils/duration';\n\nexport type TraceSpanTreeProps = {\n  hierarchicalSpans: UISpan[];\n  onSpanClick: (id: string) => void;\n  selectedSpanId?: string;\n  isLoading?: boolean;\n  fadedTypes?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: Dispatch<SetStateAction<string[]>>;\n  featuredSpanIds?: string[];\n  /** Row scrolled into view once it is mounted (ancestors auto-expand when the span is featured). */\n  revealSpanId?: string;\n  /** Rendered full-width above the span type legend row. */\n  leadingSlot?: ReactNode;\n  /** Optional end-of-row cell. By default rows have no trailing cell; the duration is shown under the span name. */\n  renderTrailing?: (ctx: SpanRowContext) => ReactNode;\n};\n\nexport function TraceSpanTreeLoading() {\n  return <TraceSpanTreeSkeleton />;\n}\n\nconst durationMeta = (ctx: SpanRowContext) => (\n  <Txt as=\"span\" variant=\"meta\" font=\"mono\">\n    {formatDurationPrecise(ctx.span.latency)}\n  </Txt>\n);\n\n/** Hierarchical span tree: expand toggle, name and duration per row, plus an optional trailing cell. */\nexport function TraceSpanTree({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  revealSpanId,\n  leadingSlot,\n  renderTrailing,\n}: TraceSpanTreeProps) {\n  if (isLoading) return <TraceSpanTreeLoading />;\n\n  return (\n    <>\n      {leadingSlot}\n      <SpanTypeLegend spans={hierarchicalSpans} />\n      <div\n        className={cn('grid content-start items-start gap-y-px overflow-hidden pb-1', {\n          'grid-cols-[minmax(0,1fr)]': !renderTrailing,\n          'grid-cols-[minmax(0,1fr)_auto]': !!renderTrailing,\n        })}\n      >\n        <SpanRows\n          spans={hierarchicalSpans}\n          onSpanClick={onSpanClick}\n          selectedSpanId={selectedSpanId}\n          revealSpanId={revealSpanId}\n          fadedTypes={fadedTypes}\n          featuredSpanIds={featuredSpanIds}\n          expandedSpanIds={expandedSpanIds}\n          setExpandedSpanIds={setExpandedSpanIds}\n          renderRow={ctx => <SpanTreeRow ctx={ctx} meta={durationMeta} trailing={renderTrailing} />}\n        />\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AA4BO,SAAS,oBAAA,GAAuB;AACrC,EAAA,2BAAQ,qBAAA,EAAA,EAAsB,CAAA;AAChC;AAEA,MAAM,YAAA,GAAe,CAAC,GAAA,qBACpB,GAAA,CAAC,OAAI,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,MAAA,EAAO,MAAK,MAAA,EAChC,QAAA,EAAA,qBAAA,CAAsB,GAAA,CAAI,IAAA,CAAK,OAAO,CAAA,EACzC,CAAA;AAIK,SAAS,aAAA,CAAc;AAAA,EAC5B,oBAAoB,EAAC;AAAA,EACrB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,IAAI,SAAA,EAAW,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAqB,CAAA;AAE5C,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,WAAA;AAAA,oBACD,GAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,iBAAA,EAAmB,CAAA;AAAA,oBAC1C,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,8DAAA,EAAgE;AAAA,UAC5E,6BAA6B,CAAC,cAAA;AAAA,UAC9B,gCAAA,EAAkC,CAAC,CAAC;AAAA,SACrC,CAAA;AAAA,QAED,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,iBAAA;AAAA,YACP,WAAA;AAAA,YACA,cAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YACA,kBAAA;AAAA,YACA,SAAA,EAAW,yBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,KAAU,IAAA,EAAM,YAAA,EAAc,UAAU,cAAA,EAAgB;AAAA;AAAA;AACzF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -6,10 +6,13 @@ const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const domains_traces_utils_spanUtils = require('../utils/span-utils.cjs.js');
 const domains_traces_components_traceStatusValue = require('./trace-status-value.cjs.js');
-const domains_metrics_components_metricsUtils = require('../../metrics/components/metrics-utils.cjs.js');
-const dataPanel = require('../../../data-panel-XPXrhYJI.cjs');
+const dataPanel = require('../../../data-panel-C_BqhzeL.cjs');
+const Txt = require('../../../Txt-DPmEpNbp.cjs');
 const icons_AgentIcon = require('../../../icons/AgentIcon.cjs.js');
 const icons_WorkflowIcon = require('../../../icons/WorkflowIcon.cjs.js');
+const utils_cost = require('../../../utils/cost.cjs.js');
+const utils_dateFormat = require('../../../utils/date-format.cjs.js');
+const utils_duration = require('../../../utils/duration.cjs.js');
 
 function formatEntityType(entityType) {
   return entityType.split("_").map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`).join(" ");
@@ -22,10 +25,10 @@ function computeTraceStatus(span) {
 function TraceSummaryDescription({ rootSpan, usage, entityHref, LinkComponent }) {
   const startedAt = rootSpan.startedAt ? new Date(rootSpan.startedAt) : null;
   const endedAt = rootSpan.endedAt ? new Date(rootSpan.endedAt) : null;
-  const duration = domains_traces_utils_spanUtils.formatSpanDuration(startedAt, endedAt);
-  const exactDuration = domains_traces_utils_spanUtils.formatSpanDurationExact(startedAt, endedAt);
-  const startedAtTimestamp = domains_traces_utils_spanUtils.formatSpanTimestamp(startedAt);
-  const exactStartedAtTimestamp = domains_traces_utils_spanUtils.formatSpanTimestampExact(startedAt);
+  const duration = utils_duration.formatDuration(domains_traces_utils_spanUtils.getSpanDurationMs(startedAt, endedAt));
+  const exactDuration = utils_duration.formatDurationPrecise(domains_traces_utils_spanUtils.getSpanDurationMs(startedAt, endedAt));
+  const startedAtTimestamp = utils_dateFormat.formatDate(startedAt, "time");
+  const exactStartedAtTimestamp = utils_dateFormat.formatTimestampPrecise(startedAt);
   const entityName = rootSpan.entityName || rootSpan.entityId;
   const entityType = rootSpan.entityType;
   const formattedEntityType = entityType ? formatEntityType(entityType) : "Entity";
@@ -43,11 +46,11 @@ function TraceSummaryDescription({ rootSpan, usage, entityHref, LinkComponent })
     ) : /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(EntityIcon, {}), tooltip: formattedEntityType, children: entityName })),
     /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { tooltip: "Trace status", children: /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_traceStatusValue.TraceStatusValue, { status: computeTraceStatus(rootSpan) }) }),
     startedAtTimestamp && exactStartedAtTimestamp && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarClockIcon, {}), tooltip: `Started at ${exactStartedAtTimestamp}`, children: startedAtTimestamp }),
-    duration && exactDuration && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TimerIcon, {}), tooltip: `Duration ${exactDuration}`, children: duration }),
+    duration && exactDuration && /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TimerIcon, {}), tooltip: `Duration ${exactDuration}`, children: /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "label", font: "mono", children: duration }) }),
     usage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownToLineIcon, {}), tooltip: "Input tokens", children: usage.inputTokens === void 0 ? "—" : domains_metrics_components_metricsUtils.formatCompact(usage.inputTokens) }),
-      /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpFromLineIcon, {}), tooltip: "Output tokens", children: usage.outputTokens === void 0 ? "—" : domains_metrics_components_metricsUtils.formatCompact(usage.outputTokens) }),
-      /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDollarSignIcon, {}), tooltip: "Estimated cost", children: usage.estimatedCost === void 0 ? "—" : domains_metrics_components_metricsUtils.formatCost(usage.estimatedCost, usage.costUnit) })
+      /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownToLineIcon, {}), tooltip: "Input tokens", children: usage.inputTokens === void 0 ? "—" : utils_cost.formatCompactNumber(usage.inputTokens) }),
+      /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpFromLineIcon, {}), tooltip: "Output tokens", children: usage.outputTokens === void 0 ? "—" : utils_cost.formatCompactNumber(usage.outputTokens) }),
+      /* @__PURE__ */ jsxRuntime.jsx(dataPanel.DataPanel.Meta, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleDollarSignIcon, {}), tooltip: "Estimated cost", children: usage.estimatedCost === void 0 ? "—" : utils_cost.formatCost(usage.estimatedCost, usage.costUnit) })
     ] })
   ] });
 }