@mastra/playground-ui 37.0.1-alpha.2 → 37.1.0-alpha.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace-timeline-span.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline-span.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi } from './shared';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\nimport { TimelineTimingCol } from './timeline-timing-col';\n\ntype TraceTimelineSpanProps = {\n  span: UISpan;\n  siblings?: UISpan[];\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  isLastChild?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  fadedTypes?: string[];\n  searchPhrase?: string;\n  featuredSpanIds?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TraceTimelineSpan({\n  span,\n  siblings,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  isLastChild,\n  overallLatency,\n  overallStartTime,\n  fadedTypes,\n  searchPhrase,\n  featuredSpanIds,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  chartWidth,\n}: TraceTimelineSpanProps) {\n  const hasChildren = span.spans && span.spans.length > 0;\n  const numOfChildren = span.spans ? span.spans.length : 0;\n  const allDescendantIds = getSpanDescendantIds(span);\n  const totalDescendants = allDescendantIds.length;\n  const isRootSpan = depth === 0;\n  const spanUI = getSpanTypeUi(span?.type);\n  const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;\n  const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;\n  const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix || '') : false;\n  const isFaded = isFadedByType || isFadedBySearch;\n\n  useEffect(() => {\n    if (!featuredSpanIds || allDescendantIds.length === 0) return;\n    if (isExpanded) return;\n    const hasFeaturedDescendant = allDescendantIds.some(id => featuredSpanIds.includes(id));\n    if (hasFeaturedDescendant && setExpandedSpanIds) {\n      setExpandedSpanIds(prev => (!prev || prev.includes(span.id) ? (prev ?? [span.id]) : [...prev, span.id]));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [featuredSpanIds, allDescendantIds]);\n\n  const toggleChildren = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return isExpanded ? prev.filter(id => id !== span.id) : [...prev, span.id];\n    });\n  };\n\n  const expandAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return Array.from(new Set([...prev, span.id, ...allDescendantIds]));\n    });\n  };\n\n  const collapseAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set(allDescendantIds);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const collapseAll = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set([span.id, ...allDescendantIds]);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const allDescendantsExpanded = allDescendantIds.every(id => expandedSpanIds?.includes(id));\n\n  const siblingsWithChildren = (siblings ?? []).filter(s => s.spans && s.spans.length > 0);\n  const siblingsWithChildrenCount = siblingsWithChildren.length;\n  const siblingsAllExpanded =\n    siblingsWithChildrenCount > 0 && siblingsWithChildren.every(s => expandedSpanIds?.includes(s.id));\n\n  const toggleSiblings = () => {\n    if (!setExpandedSpanIds || siblingsWithChildrenCount === 0) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      if (siblingsAllExpanded) {\n        const idsToRemove = new Set<string>();\n        siblingsWithChildren.forEach(s => {\n          idsToRemove.add(s.id);\n          getSpanDescendantIds(s).forEach(id => idsToRemove.add(id));\n        });\n        return prev.filter(id => !idsToRemove.has(id));\n      }\n      return Array.from(new Set([...prev, ...siblingsWithChildren.map(s => s.id)]));\n    });\n  };\n\n  return (\n    <>\n      <TimelineNameCol\n        span={span}\n        spanUI={spanUI}\n        isFaded={isFaded}\n        depth={depth}\n        onSpanClick={onSpanClick}\n        selectedSpanId={selectedSpanId}\n        isLastChild={isLastChild}\n        hasChildren={hasChildren}\n        isRootSpan={isRootSpan}\n        isExpanded={isExpanded}\n      />\n\n      <TimelineExpandCol\n        isSelected={selectedSpanId === span.id}\n        isFaded={isFaded}\n        isExpanded={isExpanded}\n        isRootSpan={isRootSpan}\n        toggleChildren={toggleChildren}\n        expandAllDescendants={expandAllDescendants}\n        collapseAllDescendants={collapseAllDescendants}\n        collapseAll={collapseAll}\n        totalDescendants={totalDescendants}\n        allDescendantsExpanded={allDescendantsExpanded}\n        numOfChildren={numOfChildren}\n        toggleSiblings={toggleSiblings}\n        siblingsAllExpanded={siblingsAllExpanded}\n        siblingsWithChildrenCount={siblingsWithChildrenCount}\n      />\n\n      <TimelineTimingCol\n        span={span}\n        selectedSpanId={selectedSpanId}\n        isFaded={isFaded}\n        overallLatency={overallLatency}\n        overallStartTime={overallStartTime}\n        color={spanUI?.color}\n        chartWidth={chartWidth}\n      />\n\n      {hasChildren &&\n        isExpanded &&\n        span.spans?.map((childSpan: UISpan, idx: number, array: UISpan[]) => {\n          const isLast = idx === array.length - 1;\n\n          return (\n            <TraceTimelineSpan\n              key={childSpan.id}\n              span={childSpan}\n              siblings={array}\n              depth={depth + 1}\n              onSpanClick={onSpanClick}\n              selectedSpanId={selectedSpanId}\n              isLastChild={isLast}\n              overallLatency={overallLatency}\n              overallStartTime={overallStartTime}\n              fadedTypes={fadedTypes}\n              searchPhrase={searchPhrase}\n              expandedSpanIds={expandedSpanIds}\n              setExpandedSpanIds={setExpandedSpanIds}\n              featuredSpanIds={featuredSpanIds}\n              chartWidth={chartWidth}\n            />\n          );\n        })}\n    </>\n  );\n}\n"],"names":["getSpanDescendantIds","getSpanTypeUi","useEffect","jsxs","Fragment","jsx","TimelineNameCol","TimelineExpandCol","TimelineTimingCol"],"mappings":"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"}

package/dist/domains/traces/components/trace-timeline-span.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/traces/components/trace-timeline-span'
+export {}

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

@@ -0,0 +1,166 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { getSpanDescendantIds } from '../hooks/get-all-span-ids.es.js';
+import { getSpanTypeUi } from './shared.es.js';
+import { TimelineExpandCol } from './timeline-expand-col.es.js';
+import { TimelineNameCol } from './timeline-name-col.es.js';
+import { TimelineTimingCol } from './timeline-timing-col.es.js';
+
+function TraceTimelineSpan({
+  span,
+  siblings,
+  depth = 0,
+  onSpanClick,
+  selectedSpanId,
+  isLastChild,
+  overallLatency,
+  overallStartTime,
+  fadedTypes,
+  searchPhrase,
+  featuredSpanIds,
+  expandedSpanIds,
+  setExpandedSpanIds,
+  chartWidth
+}) {
+  const hasChildren = span.spans && span.spans.length > 0;
+  const numOfChildren = span.spans ? span.spans.length : 0;
+  const allDescendantIds = getSpanDescendantIds(span);
+  const totalDescendants = allDescendantIds.length;
+  const isRootSpan = depth === 0;
+  const spanUI = getSpanTypeUi(span?.type);
+  const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;
+  const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;
+  const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix || "") : false;
+  const isFaded = isFadedByType || isFadedBySearch;
+  useEffect(() => {
+    if (!featuredSpanIds || allDescendantIds.length === 0) return;
+    if (isExpanded) return;
+    const hasFeaturedDescendant = allDescendantIds.some((id) => featuredSpanIds.includes(id));
+    if (hasFeaturedDescendant && setExpandedSpanIds) {
+      setExpandedSpanIds((prev) => !prev || prev.includes(span.id) ? prev ?? [span.id] : [...prev, span.id]);
+    }
+  }, [featuredSpanIds, allDescendantIds]);
+  const toggleChildren = () => {
+    if (!setExpandedSpanIds) return;
+    setExpandedSpanIds((prev) => {
+      if (!prev) return prev;
+      return isExpanded ? prev.filter((id) => id !== span.id) : [...prev, span.id];
+    });
+  };
+  const expandAllDescendants = () => {
+    if (!setExpandedSpanIds) return;
+    setExpandedSpanIds((prev) => {
+      if (!prev) return prev;
+      return Array.from(/* @__PURE__ */ new Set([...prev, span.id, ...allDescendantIds]));
+    });
+  };
+  const collapseAllDescendants = () => {
+    if (!setExpandedSpanIds) return;
+    setExpandedSpanIds((prev) => {
+      if (!prev) return prev;
+      const idsToRemove = new Set(allDescendantIds);
+      return prev.filter((id) => !idsToRemove.has(id));
+    });
+  };
+  const collapseAll = () => {
+    if (!setExpandedSpanIds) return;
+    setExpandedSpanIds((prev) => {
+      if (!prev) return prev;
+      const idsToRemove = /* @__PURE__ */ new Set([span.id, ...allDescendantIds]);
+      return prev.filter((id) => !idsToRemove.has(id));
+    });
+  };
+  const allDescendantsExpanded = allDescendantIds.every((id) => expandedSpanIds?.includes(id));
+  const siblingsWithChildren = (siblings ?? []).filter((s) => s.spans && s.spans.length > 0);
+  const siblingsWithChildrenCount = siblingsWithChildren.length;
+  const siblingsAllExpanded = siblingsWithChildrenCount > 0 && siblingsWithChildren.every((s) => expandedSpanIds?.includes(s.id));
+  const toggleSiblings = () => {
+    if (!setExpandedSpanIds || siblingsWithChildrenCount === 0) return;
+    setExpandedSpanIds((prev) => {
+      if (!prev) return prev;
+      if (siblingsAllExpanded) {
+        const idsToRemove = /* @__PURE__ */ new Set();
+        siblingsWithChildren.forEach((s) => {
+          idsToRemove.add(s.id);
+          getSpanDescendantIds(s).forEach((id) => idsToRemove.add(id));
+        });
+        return prev.filter((id) => !idsToRemove.has(id));
+      }
+      return Array.from(/* @__PURE__ */ new Set([...prev, ...siblingsWithChildren.map((s) => s.id)]));
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TimelineNameCol,
+      {
+        span,
+        spanUI,
+        isFaded,
+        depth,
+        onSpanClick,
+        selectedSpanId,
+        isLastChild,
+        hasChildren,
+        isRootSpan,
+        isExpanded
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TimelineExpandCol,
+      {
+        isSelected: selectedSpanId === span.id,
+        isFaded,
+        isExpanded,
+        isRootSpan,
+        toggleChildren,
+        expandAllDescendants,
+        collapseAllDescendants,
+        collapseAll,
+        totalDescendants,
+        allDescendantsExpanded,
+        numOfChildren,
+        toggleSiblings,
+        siblingsAllExpanded,
+        siblingsWithChildrenCount
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TimelineTimingCol,
+      {
+        span,
+        selectedSpanId,
+        isFaded,
+        overallLatency,
+        overallStartTime,
+        color: spanUI?.color,
+        chartWidth
+      }
+    ),
+    hasChildren && isExpanded && span.spans?.map((childSpan, idx, array) => {
+      const isLast = idx === array.length - 1;
+      return /* @__PURE__ */ jsx(
+        TraceTimelineSpan,
+        {
+          span: childSpan,
+          siblings: array,
+          depth: depth + 1,
+          onSpanClick,
+          selectedSpanId,
+          isLastChild: isLast,
+          overallLatency,
+          overallStartTime,
+          fadedTypes,
+          searchPhrase,
+          expandedSpanIds,
+          setExpandedSpanIds,
+          featuredSpanIds,
+          chartWidth
+        },
+        childSpan.id
+      );
+    })
+  ] });
+}
+
+export { TraceTimelineSpan };
+//# sourceMappingURL=trace-timeline-span.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace-timeline-span.es.js","sources":["../../../../src/domains/traces/components/trace-timeline-span.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { getSpanDescendantIds } from '../hooks/get-all-span-ids';\nimport type { UISpan } from '../types';\nimport { getSpanTypeUi } from './shared';\nimport { TimelineExpandCol } from './timeline-expand-col';\nimport { TimelineNameCol } from './timeline-name-col';\nimport { TimelineTimingCol } from './timeline-timing-col';\n\ntype TraceTimelineSpanProps = {\n  span: UISpan;\n  siblings?: UISpan[];\n  depth?: number;\n  onSpanClick?: (id: string) => void;\n  selectedSpanId?: string;\n  isLastChild?: boolean;\n  overallLatency?: number;\n  overallStartTime?: string;\n  fadedTypes?: string[];\n  searchPhrase?: string;\n  featuredSpanIds?: string[];\n  expandedSpanIds?: string[];\n  setExpandedSpanIds?: React.Dispatch<React.SetStateAction<string[]>>;\n  chartWidth?: 'wide' | 'default';\n};\n\nexport function TraceTimelineSpan({\n  span,\n  siblings,\n  depth = 0,\n  onSpanClick,\n  selectedSpanId,\n  isLastChild,\n  overallLatency,\n  overallStartTime,\n  fadedTypes,\n  searchPhrase,\n  featuredSpanIds,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  chartWidth,\n}: TraceTimelineSpanProps) {\n  const hasChildren = span.spans && span.spans.length > 0;\n  const numOfChildren = span.spans ? span.spans.length : 0;\n  const allDescendantIds = getSpanDescendantIds(span);\n  const totalDescendants = allDescendantIds.length;\n  const isRootSpan = depth === 0;\n  const spanUI = getSpanTypeUi(span?.type);\n  const isExpanded = expandedSpanIds ? expandedSpanIds.includes(span.id) : false;\n  const isFadedBySearch = featuredSpanIds && featuredSpanIds.length > 0 ? !featuredSpanIds.includes(span.id) : false;\n  const isFadedByType = fadedTypes && fadedTypes.length > 0 ? fadedTypes.includes(spanUI?.typePrefix || '') : false;\n  const isFaded = isFadedByType || isFadedBySearch;\n\n  useEffect(() => {\n    if (!featuredSpanIds || allDescendantIds.length === 0) return;\n    if (isExpanded) return;\n    const hasFeaturedDescendant = allDescendantIds.some(id => featuredSpanIds.includes(id));\n    if (hasFeaturedDescendant && setExpandedSpanIds) {\n      setExpandedSpanIds(prev => (!prev || prev.includes(span.id) ? (prev ?? [span.id]) : [...prev, span.id]));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [featuredSpanIds, allDescendantIds]);\n\n  const toggleChildren = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return isExpanded ? prev.filter(id => id !== span.id) : [...prev, span.id];\n    });\n  };\n\n  const expandAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      return Array.from(new Set([...prev, span.id, ...allDescendantIds]));\n    });\n  };\n\n  const collapseAllDescendants = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set(allDescendantIds);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const collapseAll = () => {\n    if (!setExpandedSpanIds) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      const idsToRemove = new Set([span.id, ...allDescendantIds]);\n      return prev.filter(id => !idsToRemove.has(id));\n    });\n  };\n\n  const allDescendantsExpanded = allDescendantIds.every(id => expandedSpanIds?.includes(id));\n\n  const siblingsWithChildren = (siblings ?? []).filter(s => s.spans && s.spans.length > 0);\n  const siblingsWithChildrenCount = siblingsWithChildren.length;\n  const siblingsAllExpanded =\n    siblingsWithChildrenCount > 0 && siblingsWithChildren.every(s => expandedSpanIds?.includes(s.id));\n\n  const toggleSiblings = () => {\n    if (!setExpandedSpanIds || siblingsWithChildrenCount === 0) return;\n    setExpandedSpanIds(prev => {\n      if (!prev) return prev;\n      if (siblingsAllExpanded) {\n        const idsToRemove = new Set<string>();\n        siblingsWithChildren.forEach(s => {\n          idsToRemove.add(s.id);\n          getSpanDescendantIds(s).forEach(id => idsToRemove.add(id));\n        });\n        return prev.filter(id => !idsToRemove.has(id));\n      }\n      return Array.from(new Set([...prev, ...siblingsWithChildren.map(s => s.id)]));\n    });\n  };\n\n  return (\n    <>\n      <TimelineNameCol\n        span={span}\n        spanUI={spanUI}\n        isFaded={isFaded}\n        depth={depth}\n        onSpanClick={onSpanClick}\n        selectedSpanId={selectedSpanId}\n        isLastChild={isLastChild}\n        hasChildren={hasChildren}\n        isRootSpan={isRootSpan}\n        isExpanded={isExpanded}\n      />\n\n      <TimelineExpandCol\n        isSelected={selectedSpanId === span.id}\n        isFaded={isFaded}\n        isExpanded={isExpanded}\n        isRootSpan={isRootSpan}\n        toggleChildren={toggleChildren}\n        expandAllDescendants={expandAllDescendants}\n        collapseAllDescendants={collapseAllDescendants}\n        collapseAll={collapseAll}\n        totalDescendants={totalDescendants}\n        allDescendantsExpanded={allDescendantsExpanded}\n        numOfChildren={numOfChildren}\n        toggleSiblings={toggleSiblings}\n        siblingsAllExpanded={siblingsAllExpanded}\n        siblingsWithChildrenCount={siblingsWithChildrenCount}\n      />\n\n      <TimelineTimingCol\n        span={span}\n        selectedSpanId={selectedSpanId}\n        isFaded={isFaded}\n        overallLatency={overallLatency}\n        overallStartTime={overallStartTime}\n        color={spanUI?.color}\n        chartWidth={chartWidth}\n      />\n\n      {hasChildren &&\n        isExpanded &&\n        span.spans?.map((childSpan: UISpan, idx: number, array: UISpan[]) => {\n          const isLast = idx === array.length - 1;\n\n          return (\n            <TraceTimelineSpan\n              key={childSpan.id}\n              span={childSpan}\n              siblings={array}\n              depth={depth + 1}\n              onSpanClick={onSpanClick}\n              selectedSpanId={selectedSpanId}\n              isLastChild={isLast}\n              overallLatency={overallLatency}\n              overallStartTime={overallStartTime}\n              fadedTypes={fadedTypes}\n              searchPhrase={searchPhrase}\n              expandedSpanIds={expandedSpanIds}\n              setExpandedSpanIds={setExpandedSpanIds}\n              featuredSpanIds={featuredSpanIds}\n              chartWidth={chartWidth}\n            />\n          );\n        })}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const domains_traces_components_shared = require('./shared.cjs.js');
+const domains_traces_components_traceTimelineSpan = require('./trace-timeline-span.cjs.js');
+const spinner = require('../../../spinner-CbKwvEp3.cjs');
+const utils_cn = require('../../../cn-vA5sWo9W.cjs');
+
+function TraceTimeline({
+  hierarchicalSpans = [],
+  onSpanClick,
+  selectedSpanId,
+  isLoading,
+  fadedTypes,
+  expandedSpanIds,
+  setExpandedSpanIds,
+  featuredSpanIds,
+  chartWidth = "default"
+}) {
+  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
+  const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
+  const usedSpanTypes = React.useMemo(() => {
+    const collectTypes = (spans) => {
+      const types2 = /* @__PURE__ */ new Set();
+      for (const span of spans) {
+        const prefix = span.type?.toLowerCase().split("_")[0];
+        if (prefix) types2.add(prefix);
+        if (span.spans) {
+          for (const t of collectTypes(span.spans)) types2.add(t);
+        }
+      }
+      return types2;
+    };
+    const types = collectTypes(hierarchicalSpans);
+    const hasOther = [...types].some((t) => !domains_traces_components_shared.spanTypePrefixes.includes(t));
+    const known = domains_traces_components_shared.spanTypePrefixes.filter((p) => p !== "other" && types.has(p));
+    if (hasOther) known.push("other");
+    return known;
+  }, [hierarchicalSpans]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils_cn.cn(
+        "flex items-center text-ui-sm gap-3 bg-surface3/50 rounded-md p-3 justify-center text-neutral3",
+        "[&_svg]:w-[1.25em] [&_svg]:h-[1.25em] [&_svg]:opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, {}),
+        " Loading Trace Timeline ..."
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    usedSpanTypes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3 px-2 py-1.5 justify-end", children: usedSpanTypes.map((type) => {
+      const spanUI = domains_traces_components_shared.getSpanTypeUi(type);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-ui-sm text-neutral3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "inline-block w-1.5 h-1.5 rounded-full shrink-0",
+            style: { backgroundColor: spanUI?.color }
+          }
+        ),
+        spanUI?.label || type
+      ] }, type);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto] items-start content-start gap-y-px overflow-hidden py-1", children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsxRuntime.jsx(
+      domains_traces_components_traceTimelineSpan.TraceTimelineSpan,
+      {
+        span,
+        siblings: hierarchicalSpans,
+        onSpanClick,
+        selectedSpanId,
+        overallLatency,
+        overallStartTime,
+        fadedTypes,
+        featuredSpanIds,
+        expandedSpanIds,
+        setExpandedSpanIds,
+        chartWidth
+      },
+      span.id
+    )) })
+  ] }) });
+}
+
+exports.TraceTimeline = TraceTimeline;
+//# sourceMappingURL=trace-timeline.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace-timeline.cjs.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\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  chartWidth?: 'wide' | 'default';\n};\n\nexport function TraceTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  chartWidth = 'default',\n}: TraceTimelineProps) {\n  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;\n  const overallStartTime = hierarchicalSpans?.[0]?.startTime || '';\n\n  const usedSpanTypes = useMemo(() => {\n    const collectTypes = (spans: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of spans) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(hierarchicalSpans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [hierarchicalSpans]);\n\n  return (\n    <>\n      {isLoading ? (\n        <div\n          className={cn(\n            'flex items-center text-ui-sm gap-3 bg-surface3/50 rounded-md p-3 justify-center text-neutral3',\n            '[&_svg]:w-[1.25em] [&_svg]:h-[1.25em] [&_svg]:opacity-50',\n          )}\n        >\n          <Spinner /> Loading Trace Timeline ...\n        </div>\n      ) : (\n        <>\n          {usedSpanTypes.length > 0 && (\n            <div className=\"flex flex-wrap gap-3 px-2 py-1.5 justify-end\">\n              {usedSpanTypes.map(type => {\n                const spanUI = getSpanTypeUi(type);\n                return (\n                  <div key={type} className=\"flex items-center gap-1 text-ui-sm text-neutral3\">\n                    <span\n                      className=\"inline-block w-1.5 h-1.5 rounded-full shrink-0\"\n                      style={{ backgroundColor: spanUI?.color }}\n                    />\n                    {spanUI?.label || type}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] items-start content-start gap-y-px overflow-hidden py-1\">\n            {hierarchicalSpans?.map(span => (\n              <TraceTimelineSpan\n                key={span.id}\n                span={span}\n                siblings={hierarchicalSpans}\n                onSpanClick={onSpanClick}\n                selectedSpanId={selectedSpanId}\n                overallLatency={overallLatency}\n                overallStartTime={overallStartTime}\n                fadedTypes={fadedTypes}\n                featuredSpanIds={featuredSpanIds}\n                expandedSpanIds={expandedSpanIds}\n                setExpandedSpanIds={setExpandedSpanIds}\n                chartWidth={chartWidth}\n              />\n            ))}\n          </div>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useMemo","types","spanTypePrefixes","jsxs","cn","jsx","Spinner","Fragment","getSpanTypeUi","TraceTimelineSpan"],"mappings":"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"}

package/dist/domains/traces/components/trace-timeline.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/traces/components/trace-timeline'
+export {}

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

@@ -0,0 +1,86 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { spanTypePrefixes, getSpanTypeUi } from './shared.es.js';
+import { TraceTimelineSpan } from './trace-timeline-span.es.js';
+import { S as Spinner } from '../../../spinner-CzdgR9lk.js';
+import { c as cn } from '../../../cn-BakJzhuv.js';
+
+function TraceTimeline({
+  hierarchicalSpans = [],
+  onSpanClick,
+  selectedSpanId,
+  isLoading,
+  fadedTypes,
+  expandedSpanIds,
+  setExpandedSpanIds,
+  featuredSpanIds,
+  chartWidth = "default"
+}) {
+  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
+  const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
+  const usedSpanTypes = useMemo(() => {
+    const collectTypes = (spans) => {
+      const types2 = /* @__PURE__ */ new Set();
+      for (const span of spans) {
+        const prefix = span.type?.toLowerCase().split("_")[0];
+        if (prefix) types2.add(prefix);
+        if (span.spans) {
+          for (const t of collectTypes(span.spans)) types2.add(t);
+        }
+      }
+      return types2;
+    };
+    const types = collectTypes(hierarchicalSpans);
+    const hasOther = [...types].some((t) => !spanTypePrefixes.includes(t));
+    const known = spanTypePrefixes.filter((p) => p !== "other" && types.has(p));
+    if (hasOther) known.push("other");
+    return known;
+  }, [hierarchicalSpans]);
+  return /* @__PURE__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center text-ui-sm gap-3 bg-surface3/50 rounded-md p-3 justify-center text-neutral3",
+        "[&_svg]:w-[1.25em] [&_svg]:h-[1.25em] [&_svg]:opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Spinner, {}),
+        " Loading Trace Timeline ..."
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    usedSpanTypes.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 px-2 py-1.5 justify-end", children: usedSpanTypes.map((type) => {
+      const spanUI = getSpanTypeUi(type);
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-ui-sm text-neutral3", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-block w-1.5 h-1.5 rounded-full shrink-0",
+            style: { backgroundColor: spanUI?.color }
+          }
+        ),
+        spanUI?.label || type
+      ] }, type);
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto] items-start content-start gap-y-px overflow-hidden py-1", children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsx(
+      TraceTimelineSpan,
+      {
+        span,
+        siblings: hierarchicalSpans,
+        onSpanClick,
+        selectedSpanId,
+        overallLatency,
+        overallStartTime,
+        fadedTypes,
+        featuredSpanIds,
+        expandedSpanIds,
+        setExpandedSpanIds,
+        chartWidth
+      },
+      span.id
+    )) })
+  ] }) });
+}
+
+export { TraceTimeline };
+//# sourceMappingURL=trace-timeline.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trace-timeline.es.js","sources":["../../../../src/domains/traces/components/trace-timeline.tsx"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react';\nimport { useMemo } from 'react';\nimport type { UISpan } from '../types';\nimport { spanTypePrefixes, getSpanTypeUi } from './shared';\nimport { TraceTimelineSpan } from './trace-timeline-span';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { cn } from '@/lib/utils';\n\ntype TraceTimelineProps = {\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  chartWidth?: 'wide' | 'default';\n};\n\nexport function TraceTimeline({\n  hierarchicalSpans = [],\n  onSpanClick,\n  selectedSpanId,\n  isLoading,\n  fadedTypes,\n  expandedSpanIds,\n  setExpandedSpanIds,\n  featuredSpanIds,\n  chartWidth = 'default',\n}: TraceTimelineProps) {\n  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;\n  const overallStartTime = hierarchicalSpans?.[0]?.startTime || '';\n\n  const usedSpanTypes = useMemo(() => {\n    const collectTypes = (spans: UISpan[]): Set<string> => {\n      const types = new Set<string>();\n      for (const span of spans) {\n        const prefix = span.type?.toLowerCase().split('_')[0];\n        if (prefix) types.add(prefix);\n        if (span.spans) {\n          for (const t of collectTypes(span.spans)) types.add(t);\n        }\n      }\n      return types;\n    };\n    const types = collectTypes(hierarchicalSpans);\n    const hasOther = [...types].some(t => !spanTypePrefixes.includes(t));\n    const known = spanTypePrefixes.filter(p => p !== 'other' && types.has(p));\n    if (hasOther) known.push('other');\n    return known;\n  }, [hierarchicalSpans]);\n\n  return (\n    <>\n      {isLoading ? (\n        <div\n          className={cn(\n            'flex items-center text-ui-sm gap-3 bg-surface3/50 rounded-md p-3 justify-center text-neutral3',\n            '[&_svg]:w-[1.25em] [&_svg]:h-[1.25em] [&_svg]:opacity-50',\n          )}\n        >\n          <Spinner /> Loading Trace Timeline ...\n        </div>\n      ) : (\n        <>\n          {usedSpanTypes.length > 0 && (\n            <div className=\"flex flex-wrap gap-3 px-2 py-1.5 justify-end\">\n              {usedSpanTypes.map(type => {\n                const spanUI = getSpanTypeUi(type);\n                return (\n                  <div key={type} className=\"flex items-center gap-1 text-ui-sm text-neutral3\">\n                    <span\n                      className=\"inline-block w-1.5 h-1.5 rounded-full shrink-0\"\n                      style={{ backgroundColor: spanUI?.color }}\n                    />\n                    {spanUI?.label || type}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n          <div className=\"grid grid-cols-[minmax(0,1fr)_auto_auto] items-start content-start gap-y-px overflow-hidden py-1\">\n            {hierarchicalSpans?.map(span => (\n              <TraceTimelineSpan\n                key={span.id}\n                span={span}\n                siblings={hierarchicalSpans}\n                onSpanClick={onSpanClick}\n                selectedSpanId={selectedSpanId}\n                overallLatency={overallLatency}\n                overallStartTime={overallStartTime}\n                fadedTypes={fadedTypes}\n                featuredSpanIds={featuredSpanIds}\n                expandedSpanIds={expandedSpanIds}\n                setExpandedSpanIds={setExpandedSpanIds}\n                chartWidth={chartWidth}\n              />\n            ))}\n          </div>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["types"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const ErrorState = require('../../../ErrorState-Dq9BVWmR.cjs');
+const PermissionDenied = require('../../../PermissionDenied-BmfZuVPC.cjs');
+const SessionExpired = require('../../../SessionExpired-PEHQGxqm.cjs');
+const utils_errors = require('../../../utils/errors.cjs.js');
+const utils_queryUtils = require('../../../utils/query-utils.cjs.js');
+
+function TracesErrorContent({ error, resource, errorTitle }) {
+  if (utils_queryUtils.is401UnauthorizedError(error)) return /* @__PURE__ */ jsxRuntime.jsx(SessionExpired.SessionExpired, {});
+  if (utils_queryUtils.is403ForbiddenError(error)) return /* @__PURE__ */ jsxRuntime.jsx(PermissionDenied.PermissionDenied, { resource });
+  const parsed = error instanceof Error ? utils_errors.parseError(error) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(ErrorState.ErrorState, { title: errorTitle, message: parsed?.error ?? "Unknown error" });
+}
+
+exports.TracesErrorContent = TracesErrorContent;
+//# sourceMappingURL=traces-error-content.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"traces-error-content.cjs.js","sources":["../../../../src/domains/traces/components/traces-error-content.tsx"],"sourcesContent":["import { ErrorState } from '@/ds/components/ErrorState';\nimport { PermissionDenied } from '@/ds/components/PermissionDenied';\nimport { SessionExpired } from '@/ds/components/SessionExpired';\nimport { parseError } from '@/lib/errors';\nimport { is401UnauthorizedError, is403ForbiddenError } from '@/lib/query-utils';\n\nexport interface TracesErrorContentProps {\n  /** The error from a useTraces / useTraceLightSpans / etc. query. */\n  error: unknown;\n  /** Passed to PermissionDenied (e.g. 'traces' / 'trace'). */\n  resource: string;\n  /** Title shown on the generic ErrorState fallback. */\n  errorTitle: string;\n}\n\n/**\n * Renders the appropriate fallback content for a traces-related query error:\n * `<SessionExpired />` for 401, `<PermissionDenied />` for 403, otherwise `<ErrorState />`.\n *\n * The consumer wraps it in whatever layout they want (NoDataPageLayout for the list page,\n * PageLayout.MainArea for the detail page, etc.) — this component only owns the 3-branch decision.\n */\nexport function TracesErrorContent({ error, resource, errorTitle }: TracesErrorContentProps) {\n  if (is401UnauthorizedError(error)) return <SessionExpired />;\n  if (is403ForbiddenError(error)) return <PermissionDenied resource={resource} />;\n  const parsed = error instanceof Error ? parseError(error) : undefined;\n  return <ErrorState title={errorTitle} message={parsed?.error ?? 'Unknown error'} />;\n}\n"],"names":["is401UnauthorizedError","SessionExpired","is403ForbiddenError","jsx","PermissionDenied","parseError","ErrorState"],"mappings":";;;;;;;;;;;AAsBO,SAAS,kBAAA,CAAmB,EAAE,KAAA,EAAO,QAAA,EAAU,YAAW,EAA4B;AAC3F,EAAA,IAAIA,uCAAA,CAAuB,KAAK,CAAA,EAAG,sCAAQC,6BAAA,EAAA,EAAe,CAAA;AAC1D,EAAA,IAAIC,qCAAoB,KAAK,CAAA,EAAG,uBAAOC,cAAA,CAACC,qCAAiB,QAAA,EAAoB,CAAA;AAC7E,EAAA,MAAM,MAAA,GAAS,KAAA,YAAiB,KAAA,GAAQC,uBAAA,CAAW,KAAK,CAAA,GAAI,MAAA;AAC5D,EAAA,sCAAQC,qBAAA,EAAA,EAAW,KAAA,EAAO,YAAY,OAAA,EAAS,MAAA,EAAQ,SAAS,eAAA,EAAiB,CAAA;AACnF;;;;"}

package/dist/domains/traces/components/traces-error-content.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/traces/components/traces-error-content'
+export {}

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

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { E as ErrorState } from '../../../ErrorState-DH5KsoFs.js';
+import { P as PermissionDenied } from '../../../PermissionDenied-DgS-ANHj.js';
+import { S as SessionExpired } from '../../../SessionExpired-Di89Q6es.js';
+import { parseError } from '../../../utils/errors.es.js';
+import { is401UnauthorizedError, is403ForbiddenError } from '../../../utils/query-utils.es.js';
+
+function TracesErrorContent({ error, resource, errorTitle }) {
+  if (is401UnauthorizedError(error)) return /* @__PURE__ */ jsx(SessionExpired, {});
+  if (is403ForbiddenError(error)) return /* @__PURE__ */ jsx(PermissionDenied, { resource });
+  const parsed = error instanceof Error ? parseError(error) : void 0;
+  return /* @__PURE__ */ jsx(ErrorState, { title: errorTitle, message: parsed?.error ?? "Unknown error" });
+}
+
+export { TracesErrorContent };
+//# sourceMappingURL=traces-error-content.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"traces-error-content.es.js","sources":["../../../../src/domains/traces/components/traces-error-content.tsx"],"sourcesContent":["import { ErrorState } from '@/ds/components/ErrorState';\nimport { PermissionDenied } from '@/ds/components/PermissionDenied';\nimport { SessionExpired } from '@/ds/components/SessionExpired';\nimport { parseError } from '@/lib/errors';\nimport { is401UnauthorizedError, is403ForbiddenError } from '@/lib/query-utils';\n\nexport interface TracesErrorContentProps {\n  /** The error from a useTraces / useTraceLightSpans / etc. query. */\n  error: unknown;\n  /** Passed to PermissionDenied (e.g. 'traces' / 'trace'). */\n  resource: string;\n  /** Title shown on the generic ErrorState fallback. */\n  errorTitle: string;\n}\n\n/**\n * Renders the appropriate fallback content for a traces-related query error:\n * `<SessionExpired />` for 401, `<PermissionDenied />` for 403, otherwise `<ErrorState />`.\n *\n * The consumer wraps it in whatever layout they want (NoDataPageLayout for the list page,\n * PageLayout.MainArea for the detail page, etc.) — this component only owns the 3-branch decision.\n */\nexport function TracesErrorContent({ error, resource, errorTitle }: TracesErrorContentProps) {\n  if (is401UnauthorizedError(error)) return <SessionExpired />;\n  if (is403ForbiddenError(error)) return <PermissionDenied resource={resource} />;\n  const parsed = error instanceof Error ? parseError(error) : undefined;\n  return <ErrorState title={errorTitle} message={parsed?.error ?? 'Unknown error'} />;\n}\n"],"names":[],"mappings":";;;;;;;AAsBO,SAAS,kBAAA,CAAmB,EAAE,KAAA,EAAO,QAAA,EAAU,YAAW,EAA4B;AAC3F,EAAA,IAAI,sBAAA,CAAuB,KAAK,CAAA,EAAG,2BAAQ,cAAA,EAAA,EAAe,CAAA;AAC1D,EAAA,IAAI,oBAAoB,KAAK,CAAA,EAAG,uBAAO,GAAA,CAAC,oBAAiB,QAAA,EAAoB,CAAA;AAC7E,EAAA,MAAM,MAAA,GAAS,KAAA,YAAiB,KAAA,GAAQ,UAAA,CAAW,KAAK,CAAA,GAAI,MAAA;AAC5D,EAAA,2BAAQ,UAAA,EAAA,EAAW,KAAA,EAAO,YAAY,OAAA,EAAS,MAAA,EAAQ,SAAS,eAAA,EAAiB,CAAA;AACnF;;;;"}

package/dist/domains/traces/components/traces-layout.cjs.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('../../../cn-vA5sWo9W.cjs');
+
+function TracesLayout({
+  listSlot,
+  tracePanelSlot,
+  spanPanelSlot,
+  scorePanelSlot,
+  traceCollapsed
+}) {
+  const hasSidePanel = !!tracePanelSlot;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils_cn.cn(
+        "grid max-h-full min-h-0 gap-4 items-start ",
+        hasSidePanel ? "grid-cols-[1fr_1fr]" : "grid-cols-[1fr]"
+      ),
+      children: [
+        listSlot,
+        hasSidePanel && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils_cn.cn(
+              "grid gap-4 max-h-full overflow-auto",
+              scorePanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr_3fr]" : "grid-rows-[2fr_3fr_3fr]" : spanPanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr]" : "grid-rows-[2fr_3fr]" : traceCollapsed ? "grid-rows-[auto]" : "grid-rows-[1fr]"
+            ),
+            children: [
+              tracePanelSlot,
+              spanPanelSlot,
+              scorePanelSlot
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.TracesLayout = TracesLayout;
+//# sourceMappingURL=traces-layout.cjs.js.map

package/dist/domains/traces/components/traces-layout.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"traces-layout.cjs.js","sources":["../../../../src/domains/traces/components/traces-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TracesLayoutProps {\n  /** The trace list (left column). */\n  listSlot: ReactNode;\n  /** The trace data panel (right column, top). When null/undefined, the whole right column collapses. */\n  tracePanelSlot?: ReactNode;\n  /** The span data panel (right column, middle). Only rendered when truthy. */\n  spanPanelSlot?: ReactNode;\n  /** The score data panel (right column, bottom). Only rendered when truthy. */\n  scorePanelSlot?: ReactNode;\n  /** When the trace panel is collapsed, the right column's grid-rows squash the trace row to `auto`. */\n  traceCollapsed?: boolean;\n}\n\n/**\n * Pure 2-column layout shell for the traces page. Owns no state and fetches no data — pass slots in.\n * Right-column row template adapts based on which panels are present.\n */\nexport function TracesLayout({\n  listSlot,\n  tracePanelSlot,\n  spanPanelSlot,\n  scorePanelSlot,\n  traceCollapsed,\n}: TracesLayoutProps) {\n  const hasSidePanel = !!tracePanelSlot;\n\n  return (\n    <div\n      className={cn(\n        'grid max-h-full min-h-0 gap-4 items-start ',\n        hasSidePanel ? 'grid-cols-[1fr_1fr]' : 'grid-cols-[1fr]',\n      )}\n    >\n      {listSlot}\n\n      {hasSidePanel && (\n        <div\n          className={cn(\n            'grid gap-4 max-h-full overflow-auto',\n            scorePanelSlot\n              ? traceCollapsed\n                ? 'grid-rows-[auto_3fr_3fr]'\n                : 'grid-rows-[2fr_3fr_3fr]'\n              : spanPanelSlot\n                ? traceCollapsed\n                  ? 'grid-rows-[auto_3fr]'\n                  : 'grid-rows-[2fr_3fr]'\n                : traceCollapsed\n                  ? 'grid-rows-[auto]'\n                  : 'grid-rows-[1fr]',\n          )}\n        >\n          {tracePanelSlot}\n          {spanPanelSlot}\n          {scorePanelSlot}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["jsxs","cn"],"mappings":";;;;;;;AAoBO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAAsB;AACpB,EAAA,MAAM,YAAA,GAAe,CAAC,CAAC,cAAA;AAEvB,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,4CAAA;AAAA,QACA,eAAe,qBAAA,GAAwB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QAEA,YAAA,oBACCD,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWC,WAAA;AAAA,cACT,qCAAA;AAAA,cACA,cAAA,GACI,iBACE,0BAAA,GACA,yBAAA,GACF,gBACE,cAAA,GACE,sBAAA,GACA,qBAAA,GACF,cAAA,GACE,kBAAA,GACA;AAAA,aACV;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,cAAA;AAAA,cACA,aAAA;AAAA,cACA;AAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/domains/traces/components/traces-layout.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/traces/components/traces-layout'
+export {}

package/dist/domains/traces/components/traces-layout.es.js

@@ -0,0 +1,41 @@
+import { jsxs } from 'react/jsx-runtime';
+import { c as cn } from '../../../cn-BakJzhuv.js';
+
+function TracesLayout({
+  listSlot,
+  tracePanelSlot,
+  spanPanelSlot,
+  scorePanelSlot,
+  traceCollapsed
+}) {
+  const hasSidePanel = !!tracePanelSlot;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid max-h-full min-h-0 gap-4 items-start ",
+        hasSidePanel ? "grid-cols-[1fr_1fr]" : "grid-cols-[1fr]"
+      ),
+      children: [
+        listSlot,
+        hasSidePanel && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-4 max-h-full overflow-auto",
+              scorePanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr_3fr]" : "grid-rows-[2fr_3fr_3fr]" : spanPanelSlot ? traceCollapsed ? "grid-rows-[auto_3fr]" : "grid-rows-[2fr_3fr]" : traceCollapsed ? "grid-rows-[auto]" : "grid-rows-[1fr]"
+            ),
+            children: [
+              tracePanelSlot,
+              spanPanelSlot,
+              scorePanelSlot
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { TracesLayout };
+//# sourceMappingURL=traces-layout.es.js.map

package/dist/domains/traces/components/traces-layout.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"traces-layout.es.js","sources":["../../../../src/domains/traces/components/traces-layout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface TracesLayoutProps {\n  /** The trace list (left column). */\n  listSlot: ReactNode;\n  /** The trace data panel (right column, top). When null/undefined, the whole right column collapses. */\n  tracePanelSlot?: ReactNode;\n  /** The span data panel (right column, middle). Only rendered when truthy. */\n  spanPanelSlot?: ReactNode;\n  /** The score data panel (right column, bottom). Only rendered when truthy. */\n  scorePanelSlot?: ReactNode;\n  /** When the trace panel is collapsed, the right column's grid-rows squash the trace row to `auto`. */\n  traceCollapsed?: boolean;\n}\n\n/**\n * Pure 2-column layout shell for the traces page. Owns no state and fetches no data — pass slots in.\n * Right-column row template adapts based on which panels are present.\n */\nexport function TracesLayout({\n  listSlot,\n  tracePanelSlot,\n  spanPanelSlot,\n  scorePanelSlot,\n  traceCollapsed,\n}: TracesLayoutProps) {\n  const hasSidePanel = !!tracePanelSlot;\n\n  return (\n    <div\n      className={cn(\n        'grid max-h-full min-h-0 gap-4 items-start ',\n        hasSidePanel ? 'grid-cols-[1fr_1fr]' : 'grid-cols-[1fr]',\n      )}\n    >\n      {listSlot}\n\n      {hasSidePanel && (\n        <div\n          className={cn(\n            'grid gap-4 max-h-full overflow-auto',\n            scorePanelSlot\n              ? traceCollapsed\n                ? 'grid-rows-[auto_3fr_3fr]'\n                : 'grid-rows-[2fr_3fr_3fr]'\n              : spanPanelSlot\n                ? traceCollapsed\n                  ? 'grid-rows-[auto_3fr]'\n                  : 'grid-rows-[2fr_3fr]'\n                : traceCollapsed\n                  ? 'grid-rows-[auto]'\n                  : 'grid-rows-[1fr]',\n          )}\n        >\n          {tracePanelSlot}\n          {spanPanelSlot}\n          {scorePanelSlot}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAoBO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAAsB;AACpB,EAAA,MAAM,YAAA,GAAe,CAAC,CAAC,cAAA;AAEvB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,4CAAA;AAAA,QACA,eAAe,qBAAA,GAAwB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QAEA,YAAA,oBACC,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,qCAAA;AAAA,cACA,cAAA,GACI,iBACE,0BAAA,GACA,yBAAA,GACF,gBACE,cAAA,GACE,sBAAA,GACA,qBAAA,GACF,cAAA,GACE,kBAAA,GACA;AAAA,aACV;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,cAAA;AAAA,cACA,aAAA;AAAA,cACA;AAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ;;;;"}

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const Button = require('../../../Button-66ghjQV8.cjs');
+const dropdownMenu = require('../../../dropdown-menu-pHJH-29Y.cjs');
+
+const TRACES_LIST_MODE_LABELS = {
+  traces: "Top-level traces only",
+  branches: "All traces, nested too"
+};
+function TracesListModeToggle({ value, onChange, disabled }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "md", variant: "default", disabled, children: [
+      TRACES_LIST_MODE_LABELS[value],
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu.RadioGroup, { value, onValueChange: (v) => onChange(v), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.RadioItem, { value: "traces", children: TRACES_LIST_MODE_LABELS.traces }),
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.RadioItem, { value: "branches", children: TRACES_LIST_MODE_LABELS.branches })
+    ] }) })
+  ] });
+}
+
+exports.TracesListModeToggle = TracesListModeToggle;
+//# sourceMappingURL=traces-list-mode-toggle.cjs.js.map