@mastra/playground-ui 60.2.0 → 61.0.0-alpha.1

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

@@ -7,6 +7,7 @@ const React = require('react');
 const domains_traces_hooks_useVisibleTraceRows = require('../../hooks/use-visible-trace-rows.cjs.js');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
 const messageScroller = require('../../../../message-scroller-E05PLPmT.cjs');
+const resize_panelGroup = require('../../../../resize/panel-group.cjs.js');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceRoot({
@@ -95,21 +96,7 @@ function ThreadTraceRoot({
       autoScroll: true,
       preserveScrollOnPrepend: true,
       onReachStart: onLoadOlder,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "data-slot": "thread-trace",
-          className: utils_cn.cn(
-            // The span cell always exists and collapses to zero so opening/closing it animates
-            // via `grid-template-columns`, like the trace panel's columns.
-            "grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out",
-            selected ? "grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" : "grid-cols-[minmax(0,2fr)_minmax(0,0fr)]",
-            className
-          ),
-          ...props,
-          children
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "thread-trace", className: utils_cn.cn("flex h-full min-h-0", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(resize_panelGroup.PanelGroup, { orientation: "horizontal", className: "min-h-0 flex-1", children }) })
     }
   ) });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-root.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { MessageScrollerProvider } from '@/ds/components/MessageScroller';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the outer grid that gains a\n * side column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  onLoadOlder,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Show less\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set());\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      {/* Chat-like: opens on the latest turn, follows it while rows grow until the reader scrolls\n          up, and keeps the reading position when older turns are prepended. */}\n      <MessageScrollerProvider\n        defaultScrollPosition=\"end\"\n        autoScroll\n        preserveScrollOnPrepend\n        onReachStart={onLoadOlder}\n      >\n        <div\n          data-slot=\"thread-trace\"\n          className={cn(\n            // The span cell always exists and collapses to zero so opening/closing it animates\n            // via `grid-template-columns`, like the trace panel's columns.\n            'grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out',\n            selected ? 'grid-cols-[minmax(0,2fr)_minmax(0,1fr)]' : 'grid-cols-[minmax(0,2fr)_minmax(0,0fr)]',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </MessageScrollerProvider>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":["useRef","useVisibleTraceRows","useState","useCallback","useMemo","jsx","ThreadTraceContext","MessageScrollerProvider","cn"],"mappings":";;;;;;;;;;;AAwBO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,WAAA;AAAA,EACA,oBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,MAAM,OAAA,GAAUA,aAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,EAAE,eAAA,EAAiB,cAAA,EAAe,GAAIC,4DAAA,CAAoB,SAAS,QAAQ,CAAA;AAEjF,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAyC,IAAI,CAAA;AAC7E,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAsC,IAAI,CAAA;AAE5E,EAAA,MAAM,CAAC,kBAAkB,mBAAmB,CAAA,GAAIA,eAA8B,sBAAM,IAAI,KAAK,CAAA;AAE7F,EAAA,MAAM,gBAAA,GAAmBC,iBAAA,CAAY,CAAC,OAAA,EAAiB,QAAA,KAAsB;AAC3E,IAAA,mBAAA,CAAoB,CAAA,OAAA,KAAW;AAC7B,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,OAAO,CAAA,KAAM,UAAU,OAAO,OAAA;AAC9C,MAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,OAAO,CAAA;AAC5B,MAAA,IAAI,QAAA,EAAU,IAAA,CAAK,GAAA,CAAI,OAAO,CAAA;AAAA,WACzB,IAAA,CAAK,OAAO,OAAO,CAAA;AACxB,MAAA,OAAO,IAAA;AAAA,IACT,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAA,GAAaA,iBAAA;AAAA,IACjB,CAAC,SAAiB,MAAA,KAA+B;AAC/C,MAAA,MAAM,IAAA,GAAO,MAAA,GAAS,EAAE,OAAA,EAAS,QAAO,GAAI,IAAA;AAC5C,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,oBAAA,GAAuB,IAAI,CAAA;AAC3B,MAAA,IAAI,MAAA,EAAQ,gBAAA,CAAiB,OAAA,EAAS,IAAI,CAAA;AAE1C,MAAA,IAAI,CAAC,MAAA,EAAQ,YAAA,CAAa,IAAI,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,kBAAkB,oBAAoB;AAAA,GACzC;AAKA,EAAA,MAAM,cAAA,GAAiBA,iBAAA;AAAA,IACrB,CAAC,SAAiB,OAAA,KAAsB;AACtC,MAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AACxB,QAAA,YAAA,CAAa,IAAI,CAAA;AACjB,QAAA;AAAA,MACF;AACA,MAAA,YAAA,CAAa,EAAE,OAAA,EAAS,OAAA,EAAS,CAAA;AACjC,MAAA,gBAAA,CAAiB,SAAS,IAAI,CAAA;AAAA,IAChC,CAAA;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,aAAA,GAAgBA,iBAAA,CAAY,CAAC,OAAA,KAAoB;AACrD,IAAA,MAAM,OAAO,OAAA,CAAQ,OAAA,EAAS,gBAAA,CAA8B,iBAAiB,KAAK,EAAC;AACnF,IAAA,KAAA,MAAW,OAAO,IAAA,EAAM;AACtB,MAAA,IAAI,GAAA,CAAI,OAAA,CAAQ,OAAA,KAAY,OAAA,EAAS;AACnC,QAAA,GAAA,CAAI,eAAe,EAAE,QAAA,EAAU,QAAA,EAAU,KAAA,EAAO,SAAS,CAAA;AACzD,QAAA;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,IACnB,OAAO;AAAA,MACL,QAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,QAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACEC,cAAA,CAACC,2EAAA,CAAmB,QAAA,EAAnB,EAA4B,OAAO,YAAA,EAGlC,QAAA,kBAAAD,cAAA;AAAA,IAACE,uCAAA;AAAA,IAAA;AAAA,MACC,qBAAA,EAAsB,KAAA;AAAA,MACtB,UAAA,EAAU,IAAA;AAAA,MACV,uBAAA,EAAuB,IAAA;AAAA,MACvB,YAAA,EAAc,WAAA;AAAA,MAEd,QAAA,kBAAAF,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,WAAA,EAAU,cAAA;AAAA,UACV,SAAA,EAAWG,WAAA;AAAA;AAAA;AAAA,YAGT,iFAAA;AAAA,YACA,WAAW,yCAAA,GAA4C,yCAAA;AAAA,YACvD;AAAA,WACF;AAAA,UACC,GAAG,KAAA;AAAA,UAEH;AAAA;AAAA;AACH;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-root.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { MessageScrollerProvider } from '@/ds/components/MessageScroller';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the resizable panel group that\n * gains a span column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  onLoadOlder,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Collapse\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set());\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      {/* Chat-like: opens on the latest turn, follows it while rows grow until the reader scrolls\n          up, and keeps the reading position when older turns are prepended. */}\n      <MessageScrollerProvider\n        defaultScrollPosition=\"end\"\n        autoScroll\n        preserveScrollOnPrepend\n        onReachStart={onLoadOlder}\n      >\n        <div data-slot=\"thread-trace\" className={cn('flex h-full min-h-0', className)} {...props}>\n          <PanelGroup orientation=\"horizontal\" className=\"min-h-0 flex-1\">\n            {children}\n          </PanelGroup>\n        </div>\n      </MessageScrollerProvider>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":["useRef","useVisibleTraceRows","useState","useCallback","useMemo","jsx","ThreadTraceContext","MessageScrollerProvider","cn","PanelGroup"],"mappings":"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"}

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

@@ -3,6 +3,7 @@ import { useRef, useState, useCallback, useMemo } from 'react';
 import { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows.es.js';
 import { ThreadTraceContext } from './thread-trace-context.es.js';
 import { d as MessageScrollerProvider } from '../../../../message-scroller-CiFr8MwT.js';
+import { PanelGroup } from '../../../../resize/panel-group.es.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceRoot({
@@ -91,21 +92,7 @@ function ThreadTraceRoot({
       autoScroll: true,
       preserveScrollOnPrepend: true,
       onReachStart: onLoadOlder,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-slot": "thread-trace",
-          className: cn(
-            // The span cell always exists and collapses to zero so opening/closing it animates
-            // via `grid-template-columns`, like the trace panel's columns.
-            "grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out",
-            selected ? "grid-cols-[minmax(0,2fr)_minmax(0,1fr)]" : "grid-cols-[minmax(0,2fr)_minmax(0,0fr)]",
-            className
-          ),
-          ...props,
-          children
-        }
-      )
+      children: /* @__PURE__ */ jsx("div", { "data-slot": "thread-trace", className: cn("flex h-full min-h-0", className), ...props, children: /* @__PURE__ */ jsx(PanelGroup, { orientation: "horizontal", className: "min-h-0 flex-1", children }) })
     }
   ) });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-root.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { MessageScrollerProvider } from '@/ds/components/MessageScroller';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the outer grid that gains a\n * side column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  onLoadOlder,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Show less\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set());\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      {/* Chat-like: opens on the latest turn, follows it while rows grow until the reader scrolls\n          up, and keeps the reading position when older turns are prepended. */}\n      <MessageScrollerProvider\n        defaultScrollPosition=\"end\"\n        autoScroll\n        preserveScrollOnPrepend\n        onReachStart={onLoadOlder}\n      >\n        <div\n          data-slot=\"thread-trace\"\n          className={cn(\n            // The span cell always exists and collapses to zero so opening/closing it animates\n            // via `grid-template-columns`, like the trace panel's columns.\n            'grid h-full min-h-0 transition-[grid-template-columns] duration-300 ease-in-out',\n            selected ? 'grid-cols-[minmax(0,2fr)_minmax(0,1fr)]' : 'grid-cols-[minmax(0,2fr)_minmax(0,0fr)]',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </MessageScrollerProvider>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-trace-root.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-root.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useVisibleTraceRows } from '../../hooks/use-visible-trace-rows';\nimport { ThreadTraceContext } from './thread-trace-context';\nimport type { ThreadTraceContextValue, ThreadTraceHighlight, ThreadTraceSelectedSpan } from './thread-trace-context';\nimport { MessageScrollerProvider } from '@/ds/components/MessageScroller';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceRootProps extends ComponentProps<'div'> {\n  /** Trace ids in reading order (oldest first); must match the order of the rendered rows. */\n  traceIds: string[];\n  /** Fires when the reader scrolls up to the oldest loaded row; load the previous page here. */\n  onLoadOlder?: () => void;\n  /** Fires when a span detail opens or closes (`null`). */\n  onSelectedSpanChange?: (selected: ThreadTraceSelectedSpan | null) => void;\n}\n\n/**\n * Owns the interaction state of a thread rendered as its traces: the selected span, the\n * highlighted spans, which rows are expanded, and which rows are on screen. Layout parts read it\n * through `useThreadTrace()` / `useThreadTraceRow()`; the root itself is the resizable panel group that\n * gains a span column while a span is selected.\n */\nexport function ThreadTraceRoot({\n  traceIds,\n  onLoadOlder,\n  onSelectedSpanChange,\n  className,\n  children,\n  ...props\n}: ThreadTraceRootProps) {\n  const listRef = useRef<HTMLDivElement>(null);\n  const { visibleTraceIds, currentTraceId } = useVisibleTraceRows(listRef, traceIds);\n\n  const [selected, setSelected] = useState<ThreadTraceSelectedSpan | null>(null);\n  const [highlight, setHighlight] = useState<ThreadTraceHighlight | null>(null);\n  // Selecting a span expands its row and it stays expanded until the reader collapses it with \"Collapse\".\n  const [expandedTraceIds, setExpandedTraceIds] = useState<ReadonlySet<string>>(() => new Set());\n\n  const setTraceExpanded = useCallback((traceId: string, expanded: boolean) => {\n    setExpandedTraceIds(current => {\n      if (current.has(traceId) === expanded) return current;\n      const next = new Set(current);\n      if (expanded) next.add(traceId);\n      else next.delete(traceId);\n      return next;\n    });\n  }, []);\n\n  const selectSpan = useCallback(\n    (traceId: string, spanId: string | undefined) => {\n      const next = spanId ? { traceId, spanId } : null;\n      setSelected(next);\n      onSelectedSpanChange?.(next);\n      if (spanId) setTraceExpanded(traceId, true);\n      // Closing the panel also ends the highlight, like clearing the URL param on the traces page.\n      if (!spanId) setHighlight(null);\n    },\n    [setTraceExpanded, onSelectedSpanChange],\n  );\n\n  // Fades the other spans and brings the last (most specific, deepest) span into view, since it is\n  // the one most likely to sit below the fold. Opening a span's detail panel stays a separate,\n  // deliberate click so highlighting does not hijack the side panel.\n  const highlightSpans = useCallback(\n    (traceId: string, spanIds: string[]) => {\n      if (spanIds.length === 0) {\n        setHighlight(null);\n        return;\n      }\n      setHighlight({ traceId, spanIds });\n      setTraceExpanded(traceId, true);\n    },\n    [setTraceExpanded],\n  );\n\n  const scrollToTrace = useCallback((traceId: string) => {\n    const rows = listRef.current?.querySelectorAll<HTMLElement>('[data-trace-id]') ?? [];\n    for (const row of rows) {\n      if (row.dataset.traceId === traceId) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        return;\n      }\n    }\n  }, []);\n\n  const contextValue = useMemo<ThreadTraceContextValue>(\n    () => ({\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n      listRef,\n    }),\n    [\n      traceIds,\n      selected,\n      selectSpan,\n      highlight,\n      highlightSpans,\n      expandedTraceIds,\n      setTraceExpanded,\n      visibleTraceIds,\n      currentTraceId,\n      scrollToTrace,\n    ],\n  );\n\n  return (\n    <ThreadTraceContext.Provider value={contextValue}>\n      {/* Chat-like: opens on the latest turn, follows it while rows grow until the reader scrolls\n          up, and keeps the reading position when older turns are prepended. */}\n      <MessageScrollerProvider\n        defaultScrollPosition=\"end\"\n        autoScroll\n        preserveScrollOnPrepend\n        onReachStart={onLoadOlder}\n      >\n        <div data-slot=\"thread-trace\" className={cn('flex h-full min-h-0', className)} {...props}>\n          <PanelGroup orientation=\"horizontal\" className=\"min-h-0 flex-1\">\n            {children}\n          </PanelGroup>\n        </div>\n      </MessageScrollerProvider>\n    </ThreadTraceContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -6,7 +6,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
 const domains_traces_components_threadTrace_threadTraceRowContext = require('./thread-trace-row-context.cjs.js');
+const transcriptDivider = require('../../../../transcript-divider-273Bsdjs.cjs');
 const messageScroller = require('../../../../message-scroller-E05PLPmT.cjs');
+const tabsRoot = require('../../../../tabs-root-Hkt7A6oq.cjs');
 const hooks_useMeasuredAutoHeight = require('../../../../hooks/use-measured-auto-height.cjs.js');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
@@ -76,13 +78,15 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(domains_traces_components_threadTrace_threadTraceRowContext.ThreadTraceRowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(messageScroller.MessageScrollerItem, { messageId: traceId, className: "[content-visibility:visible]", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    tabsRoot.Tabs,
     {
+      defaultTab: THREAD_TRACE_MESSAGES_TAB,
+      value: tab,
+      onValueChange: setTab,
       "data-slot": "thread-trace-row",
       className: utils_cn.cn(
-        // Same fixed messages width as the trace panel; the details column takes the rest.
-        "group grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100",
-        isActive || isCurrent ? "opacity-100" : "opacity-50",
+        // `overflow-visible` overrides the tabs root scroll box so the messages column stays sticky.
+        "group flex flex-col overflow-visible pb-4",
         className
       ),
       "data-trace-id": traceId,
@@ -92,7 +96,25 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
     }
   ) }) });
 }
+function ThreadTraceRowBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "thread-trace-row-body",
+      className: utils_cn.cn("grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", className),
+      ...props
+    }
+  );
+}
+function ThreadTraceDivider({ label, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "thread-trace-divider", className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 pl-4", children: /* @__PURE__ */ jsxRuntime.jsx(transcriptDivider.TranscriptDivider, { label, hideLabel: true, children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "flex items-center pr-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" }) })
+  ] });
+}
 
 exports.THREAD_TRACE_MESSAGES_TAB = THREAD_TRACE_MESSAGES_TAB;
+exports.ThreadTraceDivider = ThreadTraceDivider;
 exports.ThreadTraceRow = ThreadTraceRow;
+exports.ThreadTraceRowBody = ThreadTraceRowBody;
 //# sourceMappingURL=thread-trace-row.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-row.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { ThreadTraceRowContext } from './thread-trace-row-context';\nimport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nimport { MessageScrollerItem } from '@/ds/components/MessageScroller';\nimport { useMeasuredAutoHeight } from '@/hooks/use-measured-auto-height';\nimport { cn } from '@/lib/utils';\n\nexport const THREAD_TRACE_MESSAGES_TAB = 'messages';\n\nexport interface ThreadTraceRowProps extends ComponentProps<'div'> {\n  traceId: string;\n}\n\n/**\n * One agent turn: the messages column on the left and the details column on the right. The whole\n * row is dimmed unless it is the first one in view, hovered, or its span is open in the side panel,\n * so the reader keeps track of which turn they are on without hovering.\n */\nexport function ThreadTraceRow({ traceId, className, children, ...props }: ThreadTraceRowProps) {\n  const root = useThreadTrace();\n\n  const selectedSpanId = root.selected?.traceId === traceId ? root.selected.spanId : undefined;\n  const featuredSpanIds = root.highlight?.traceId === traceId ? root.highlight.spanIds : undefined;\n  const revealSpanId = featuredSpanIds?.at(-1);\n  const isActive = selectedSpanId !== undefined;\n  const isCurrent = root.currentTraceId === traceId;\n  const isExpanded = root.expandedTraceIds.has(traceId);\n\n  // A long trace is clamped to the real height of its messages column (not a nominal row height),\n  // so the timeline never dwarfs the turn it belongs to. The refs live here because the messages\n  // and the timeline are sibling parts.\n  const messages = useMeasuredAutoHeight<HTMLDivElement>();\n  const timeline = useMeasuredAutoHeight<HTMLDivElement>();\n  const detailsHeader = useMeasuredAutoHeight<HTMLDivElement>();\n\n  // Which view the messages column shows (Messages / Feedback / Scores), one per row.\n  const [tab, setTab] = useState<string>(THREAD_TRACE_MESSAGES_TAB);\n  // The clamp budget is the height of the *Messages* view: a short Feedback or Scores view\n  // must not squash the span tree next to it, so the last Messages height is kept while\n  // another view is showing.\n  const [messagesViewHeight, setMessagesViewHeight] = useState<number | null>(null);\n  if (tab === THREAD_TRACE_MESSAGES_TAB && messages.height !== messagesViewHeight) {\n    setMessagesViewHeight(messages.height);\n  }\n\n  const { highlightSpans: rootHighlightSpans, setTraceExpanded } = root;\n  const highlightSpans = useCallback(\n    (spanIds: string[]) => rootHighlightSpans(traceId, spanIds),\n    [rootHighlightSpans, traceId],\n  );\n  const setExpanded = useCallback(\n    (expanded: boolean) => setTraceExpanded(traceId, expanded),\n    [setTraceExpanded, traceId],\n  );\n\n  const contextValue = useMemo<ThreadTraceRowContextValue>(\n    () => ({\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      setTab,\n      messagesRef: messages.ref,\n      timelineRef: timeline.ref,\n      detailsHeaderRef: detailsHeader.ref,\n      messagesHeight: messagesViewHeight,\n      timelineHeight: timeline.height,\n      detailsHeaderHeight: detailsHeader.height,\n    }),\n    [\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      messages.ref,\n      timeline.ref,\n      detailsHeader.ref,\n      messagesViewHeight,\n      timeline.height,\n      detailsHeader.height,\n    ],\n  );\n\n  return (\n    <ThreadTraceRowContext.Provider value={contextValue}>\n      {/* Registers the row with the scroller so prepends of older turns keep the reading position.\n          Rows measure their own columns, so they stay rendered off screen. */}\n      <MessageScrollerItem messageId={traceId} className=\"[content-visibility:visible]\">\n        <div\n          data-slot=\"thread-trace-row\"\n          className={cn(\n            // Same fixed messages width as the trace panel; the details column takes the rest.\n            'group grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100',\n            isActive || isCurrent ? 'opacity-100' : 'opacity-50',\n            className,\n          )}\n          data-trace-id={traceId}\n          data-active={isActive || undefined}\n          {...props}\n        >\n          {children}\n        </div>\n      </MessageScrollerItem>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n"],"names":["useThreadTrace","useMeasuredAutoHeight","useState","useCallback","useMemo","jsx","ThreadTraceRowContext","MessageScrollerItem","cn"],"mappings":";;;;;;;;;;;;AAUO,MAAM,yBAAA,GAA4B;AAWlC,SAAS,eAAe,EAAE,OAAA,EAAS,WAAW,QAAA,EAAU,GAAG,OAAM,EAAwB;AAC9F,EAAA,MAAM,OAAOA,uEAAA,EAAe;AAE5B,EAAA,MAAM,iBAAiB,IAAA,CAAK,QAAA,EAAU,YAAY,OAAA,GAAU,IAAA,CAAK,SAAS,MAAA,GAAS,MAAA;AACnF,EAAA,MAAM,kBAAkB,IAAA,CAAK,SAAA,EAAW,YAAY,OAAA,GAAU,IAAA,CAAK,UAAU,OAAA,GAAU,MAAA;AACvF,EAAA,MAAM,YAAA,GAAe,eAAA,EAAiB,EAAA,CAAG,EAAE,CAAA;AAC3C,EAAA,MAAM,WAAW,cAAA,KAAmB,MAAA;AACpC,EAAA,MAAM,SAAA,GAAY,KAAK,cAAA,KAAmB,OAAA;AAC1C,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,gBAAA,CAAiB,GAAA,CAAI,OAAO,CAAA;AAKpD,EAAA,MAAM,WAAWC,iDAAA,EAAsC;AACvD,EAAA,MAAM,WAAWA,iDAAA,EAAsC;AACvD,EAAA,MAAM,gBAAgBA,iDAAA,EAAsC;AAG5D,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,CAAA,GAAIC,eAAiB,yBAAyB,CAAA;AAIhE,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAIA,eAAwB,IAAI,CAAA;AAChF,EAAA,IAAI,GAAA,KAAQ,yBAAA,IAA6B,QAAA,CAAS,MAAA,KAAW,kBAAA,EAAoB;AAC/E,IAAA,qBAAA,CAAsB,SAAS,MAAM,CAAA;AAAA,EACvC;AAEA,EAAA,MAAM,EAAE,cAAA,EAAgB,kBAAA,EAAoB,gBAAA,EAAiB,GAAI,IAAA;AACjE,EAAA,MAAM,cAAA,GAAiBC,iBAAA;AAAA,IACrB,CAAC,OAAA,KAAsB,kBAAA,CAAmB,OAAA,EAAS,OAAO,CAAA;AAAA,IAC1D,CAAC,oBAAoB,OAAO;AAAA,GAC9B;AACA,EAAA,MAAM,WAAA,GAAcA,iBAAA;AAAA,IAClB,CAAC,QAAA,KAAsB,gBAAA,CAAiB,OAAA,EAAS,QAAQ,CAAA;AAAA,IACzD,CAAC,kBAAkB,OAAO;AAAA,GAC5B;AAEA,EAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,IACnB,OAAO;AAAA,MACL,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,aAAa,QAAA,CAAS,GAAA;AAAA,MACtB,aAAa,QAAA,CAAS,GAAA;AAAA,MACtB,kBAAkB,aAAA,CAAc,GAAA;AAAA,MAChC,cAAA,EAAgB,kBAAA;AAAA,MAChB,gBAAgB,QAAA,CAAS,MAAA;AAAA,MACzB,qBAAqB,aAAA,CAAc;AAAA,KACrC,CAAA;AAAA,IACA;AAAA,MACE,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAA;AAAA,MACA,QAAA,CAAS,GAAA;AAAA,MACT,QAAA,CAAS,GAAA;AAAA,MACT,aAAA,CAAc,GAAA;AAAA,MACd,kBAAA;AAAA,MACA,QAAA,CAAS,MAAA;AAAA,MACT,aAAA,CAAc;AAAA;AAChB,GACF;AAEA,EAAA,uBACEC,cAAA,CAACC,iFAAA,CAAsB,QAAA,EAAtB,EAA+B,KAAA,EAAO,YAAA,EAGrC,QAAA,kBAAAD,cAAA,CAACE,mCAAA,EAAA,EAAoB,SAAA,EAAW,OAAA,EAAS,SAAA,EAAU,8BAAA,EACjD,QAAA,kBAAAF,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,SAAA,EAAWG,WAAA;AAAA;AAAA,QAET,gHAAA;AAAA,QACA,QAAA,IAAY,YAAY,aAAA,GAAgB,YAAA;AAAA,QACxC;AAAA,OACF;AAAA,MACA,eAAA,EAAe,OAAA;AAAA,MACf,eAAa,QAAA,IAAY,MAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"thread-trace-row.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { ThreadTraceRowContext } from './thread-trace-row-context';\nimport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nimport { TranscriptDivider } from '@/ds/components/ai/transcript-divider';\nimport { MessageScrollerItem } from '@/ds/components/MessageScroller';\nimport { Tabs } from '@/ds/components/Tabs';\nimport { useMeasuredAutoHeight } from '@/hooks/use-measured-auto-height';\nimport { cn } from '@/lib/utils';\n\nexport const THREAD_TRACE_MESSAGES_TAB = 'messages';\n\nexport interface ThreadTraceRowProps extends ComponentProps<'div'> {\n  traceId: string;\n}\n\n/**\n * One agent turn: a `ThreadTrace.Divider` (turn label + tabs) above a `ThreadTrace.RowBody` holding\n * the messages column on the left and the details card on the right. The whole\n * row is dimmed unless it is the first one in view, hovered, or its span is open in the side panel,\n * so the reader keeps track of which turn they are on without hovering.\n */\nexport function ThreadTraceRow({ traceId, className, children, ...props }: ThreadTraceRowProps) {\n  const root = useThreadTrace();\n\n  const selectedSpanId = root.selected?.traceId === traceId ? root.selected.spanId : undefined;\n  const featuredSpanIds = root.highlight?.traceId === traceId ? root.highlight.spanIds : undefined;\n  const revealSpanId = featuredSpanIds?.at(-1);\n  const isActive = selectedSpanId !== undefined;\n  const isCurrent = root.currentTraceId === traceId;\n  const isExpanded = root.expandedTraceIds.has(traceId);\n\n  // A long trace is clamped to the real height of its messages column (not a nominal row height),\n  // so the timeline never dwarfs the turn it belongs to. The refs live here because the messages\n  // and the timeline are sibling parts.\n  const messages = useMeasuredAutoHeight<HTMLDivElement>();\n  const timeline = useMeasuredAutoHeight<HTMLDivElement>();\n  const detailsHeader = useMeasuredAutoHeight<HTMLDivElement>();\n\n  // Which view the messages column shows (Messages / Feedback / Scores), one per row.\n  const [tab, setTab] = useState<string>(THREAD_TRACE_MESSAGES_TAB);\n  // The clamp budget is the height of the *Messages* view: a short Feedback or Scores view\n  // must not squash the span tree next to it, so the last Messages height is kept while\n  // another view is showing.\n  const [messagesViewHeight, setMessagesViewHeight] = useState<number | null>(null);\n  if (tab === THREAD_TRACE_MESSAGES_TAB && messages.height !== messagesViewHeight) {\n    setMessagesViewHeight(messages.height);\n  }\n\n  const { highlightSpans: rootHighlightSpans, setTraceExpanded } = root;\n  const highlightSpans = useCallback(\n    (spanIds: string[]) => rootHighlightSpans(traceId, spanIds),\n    [rootHighlightSpans, traceId],\n  );\n  const setExpanded = useCallback(\n    (expanded: boolean) => setTraceExpanded(traceId, expanded),\n    [setTraceExpanded, traceId],\n  );\n\n  const contextValue = useMemo<ThreadTraceRowContextValue>(\n    () => ({\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      setTab,\n      messagesRef: messages.ref,\n      timelineRef: timeline.ref,\n      detailsHeaderRef: detailsHeader.ref,\n      messagesHeight: messagesViewHeight,\n      timelineHeight: timeline.height,\n      detailsHeaderHeight: detailsHeader.height,\n    }),\n    [\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      messages.ref,\n      timeline.ref,\n      detailsHeader.ref,\n      messagesViewHeight,\n      timeline.height,\n      detailsHeader.height,\n    ],\n  );\n\n  return (\n    <ThreadTraceRowContext.Provider value={contextValue}>\n      {/* Registers the row with the scroller so prepends of older turns keep the reading position.\n          Rows measure their own columns, so they stay rendered off screen. */}\n      <MessageScrollerItem messageId={traceId} className=\"[content-visibility:visible]\">\n        {/* The row is the tabs root, so the tab list in the divider drives the messages column. */}\n        <Tabs<string>\n          defaultTab={THREAD_TRACE_MESSAGES_TAB}\n          value={tab}\n          onValueChange={setTab}\n          data-slot=\"thread-trace-row\"\n          className={cn(\n            // `overflow-visible` overrides the tabs root scroll box so the messages column stays sticky.\n            'group flex flex-col overflow-visible pb-4',\n            className,\n          )}\n          data-trace-id={traceId}\n          data-active={isActive || undefined}\n          {...props}\n        >\n          {children}\n        </Tabs>\n      </MessageScrollerItem>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n\nexport type ThreadTraceRowBodyProps = ComponentProps<'div'>;\n\n/** The two columns of a row: the messages on the left and the details card on the right, each padded on x. */\nexport function ThreadTraceRowBody({ className, ...props }: ThreadTraceRowBodyProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-row-body\"\n      className={cn('grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]', className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ThreadTraceDividerProps {\n  /** Names the turn, e.g. `Turn 1`. Used as the accessible name; not shown. */\n  label: string;\n  /** Typically the row's `ThreadTrace.TabList`. */\n  children?: ReactNode;\n}\n\n/**\n * The rule above a row: a full-width line, with its content (e.g. a trace link and tabs) centered over the messages\n * column only, so the line runs on uninterrupted above the details card.\n */\nexport function ThreadTraceDivider({ label, children }: ThreadTraceDividerProps) {\n  return (\n    <div data-slot=\"thread-trace-divider\" className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]\">\n      <div className=\"min-w-0 pl-4\">\n        <TranscriptDivider label={label} hideLabel>\n          {children}\n        </TranscriptDivider>\n      </div>\n      <div aria-hidden className=\"flex items-center pr-4\">\n        <span className=\"h-px flex-1 bg-border\" />\n      </div>\n    </div>\n  );\n}\n"],"names":["useThreadTrace","useMeasuredAutoHeight","useState","useCallback","useMemo","jsx","ThreadTraceRowContext","MessageScrollerItem","Tabs","cn","jsxs","TranscriptDivider"],"mappings":"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"}

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

@@ -1,8 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback, useMemo } from 'react';
 import { useThreadTrace } from './thread-trace-context.es.js';
 import { ThreadTraceRowContext } from './thread-trace-row-context.es.js';
+import { T as TranscriptDivider } from '../../../../transcript-divider-CPIo8NUj.js';
 import { c as MessageScrollerItem } from '../../../../message-scroller-CiFr8MwT.js';
+import { T as Tabs } from '../../../../tabs-root-BbzhUZl4.js';
 import { useMeasuredAutoHeight } from '../../../../hooks/use-measured-auto-height.es.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
@@ -72,13 +74,15 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
     ]
   );
   return /* @__PURE__ */ jsx(ThreadTraceRowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(MessageScrollerItem, { messageId: traceId, className: "[content-visibility:visible]", children: /* @__PURE__ */ jsx(
-    "div",
+    Tabs,
     {
+      defaultTab: THREAD_TRACE_MESSAGES_TAB,
+      value: tab,
+      onValueChange: setTab,
       "data-slot": "thread-trace-row",
       className: cn(
-        // Same fixed messages width as the trace panel; the details column takes the rest.
-        "group grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100",
-        isActive || isCurrent ? "opacity-100" : "opacity-50",
+        // `overflow-visible` overrides the tabs root scroll box so the messages column stays sticky.
+        "group flex flex-col overflow-visible pb-4",
         className
       ),
       "data-trace-id": traceId,
@@ -88,6 +92,22 @@ function ThreadTraceRow({ traceId, className, children, ...props }) {
     }
   ) }) });
 }
+function ThreadTraceRowBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "thread-trace-row-body",
+      className: cn("grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", className),
+      ...props
+    }
+  );
+}
+function ThreadTraceDivider({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "thread-trace-divider", className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 pl-4", children: /* @__PURE__ */ jsx(TranscriptDivider, { label, hideLabel: true, children }) }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex items-center pr-4", children: /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }) })
+  ] });
+}
 
-export { THREAD_TRACE_MESSAGES_TAB, ThreadTraceRow };
+export { THREAD_TRACE_MESSAGES_TAB, ThreadTraceDivider, ThreadTraceRow, ThreadTraceRowBody };
 //# sourceMappingURL=thread-trace-row.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-row.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { ThreadTraceRowContext } from './thread-trace-row-context';\nimport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nimport { MessageScrollerItem } from '@/ds/components/MessageScroller';\nimport { useMeasuredAutoHeight } from '@/hooks/use-measured-auto-height';\nimport { cn } from '@/lib/utils';\n\nexport const THREAD_TRACE_MESSAGES_TAB = 'messages';\n\nexport interface ThreadTraceRowProps extends ComponentProps<'div'> {\n  traceId: string;\n}\n\n/**\n * One agent turn: the messages column on the left and the details column on the right. The whole\n * row is dimmed unless it is the first one in view, hovered, or its span is open in the side panel,\n * so the reader keeps track of which turn they are on without hovering.\n */\nexport function ThreadTraceRow({ traceId, className, children, ...props }: ThreadTraceRowProps) {\n  const root = useThreadTrace();\n\n  const selectedSpanId = root.selected?.traceId === traceId ? root.selected.spanId : undefined;\n  const featuredSpanIds = root.highlight?.traceId === traceId ? root.highlight.spanIds : undefined;\n  const revealSpanId = featuredSpanIds?.at(-1);\n  const isActive = selectedSpanId !== undefined;\n  const isCurrent = root.currentTraceId === traceId;\n  const isExpanded = root.expandedTraceIds.has(traceId);\n\n  // A long trace is clamped to the real height of its messages column (not a nominal row height),\n  // so the timeline never dwarfs the turn it belongs to. The refs live here because the messages\n  // and the timeline are sibling parts.\n  const messages = useMeasuredAutoHeight<HTMLDivElement>();\n  const timeline = useMeasuredAutoHeight<HTMLDivElement>();\n  const detailsHeader = useMeasuredAutoHeight<HTMLDivElement>();\n\n  // Which view the messages column shows (Messages / Feedback / Scores), one per row.\n  const [tab, setTab] = useState<string>(THREAD_TRACE_MESSAGES_TAB);\n  // The clamp budget is the height of the *Messages* view: a short Feedback or Scores view\n  // must not squash the span tree next to it, so the last Messages height is kept while\n  // another view is showing.\n  const [messagesViewHeight, setMessagesViewHeight] = useState<number | null>(null);\n  if (tab === THREAD_TRACE_MESSAGES_TAB && messages.height !== messagesViewHeight) {\n    setMessagesViewHeight(messages.height);\n  }\n\n  const { highlightSpans: rootHighlightSpans, setTraceExpanded } = root;\n  const highlightSpans = useCallback(\n    (spanIds: string[]) => rootHighlightSpans(traceId, spanIds),\n    [rootHighlightSpans, traceId],\n  );\n  const setExpanded = useCallback(\n    (expanded: boolean) => setTraceExpanded(traceId, expanded),\n    [setTraceExpanded, traceId],\n  );\n\n  const contextValue = useMemo<ThreadTraceRowContextValue>(\n    () => ({\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      setTab,\n      messagesRef: messages.ref,\n      timelineRef: timeline.ref,\n      detailsHeaderRef: detailsHeader.ref,\n      messagesHeight: messagesViewHeight,\n      timelineHeight: timeline.height,\n      detailsHeaderHeight: detailsHeader.height,\n    }),\n    [\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      messages.ref,\n      timeline.ref,\n      detailsHeader.ref,\n      messagesViewHeight,\n      timeline.height,\n      detailsHeader.height,\n    ],\n  );\n\n  return (\n    <ThreadTraceRowContext.Provider value={contextValue}>\n      {/* Registers the row with the scroller so prepends of older turns keep the reading position.\n          Rows measure their own columns, so they stay rendered off screen. */}\n      <MessageScrollerItem messageId={traceId} className=\"[content-visibility:visible]\">\n        <div\n          data-slot=\"thread-trace-row\"\n          className={cn(\n            // Same fixed messages width as the trace panel; the details column takes the rest.\n            'group grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] border-b border-border transition-opacity hover:opacity-100',\n            isActive || isCurrent ? 'opacity-100' : 'opacity-50',\n            className,\n          )}\n          data-trace-id={traceId}\n          data-active={isActive || undefined}\n          {...props}\n        >\n          {children}\n        </div>\n      </MessageScrollerItem>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"thread-trace-row.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-row.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { useThreadTrace } from './thread-trace-context';\nimport { ThreadTraceRowContext } from './thread-trace-row-context';\nimport type { ThreadTraceRowContextValue } from './thread-trace-row-context';\nimport { TranscriptDivider } from '@/ds/components/ai/transcript-divider';\nimport { MessageScrollerItem } from '@/ds/components/MessageScroller';\nimport { Tabs } from '@/ds/components/Tabs';\nimport { useMeasuredAutoHeight } from '@/hooks/use-measured-auto-height';\nimport { cn } from '@/lib/utils';\n\nexport const THREAD_TRACE_MESSAGES_TAB = 'messages';\n\nexport interface ThreadTraceRowProps extends ComponentProps<'div'> {\n  traceId: string;\n}\n\n/**\n * One agent turn: a `ThreadTrace.Divider` (turn label + tabs) above a `ThreadTrace.RowBody` holding\n * the messages column on the left and the details card on the right. The whole\n * row is dimmed unless it is the first one in view, hovered, or its span is open in the side panel,\n * so the reader keeps track of which turn they are on without hovering.\n */\nexport function ThreadTraceRow({ traceId, className, children, ...props }: ThreadTraceRowProps) {\n  const root = useThreadTrace();\n\n  const selectedSpanId = root.selected?.traceId === traceId ? root.selected.spanId : undefined;\n  const featuredSpanIds = root.highlight?.traceId === traceId ? root.highlight.spanIds : undefined;\n  const revealSpanId = featuredSpanIds?.at(-1);\n  const isActive = selectedSpanId !== undefined;\n  const isCurrent = root.currentTraceId === traceId;\n  const isExpanded = root.expandedTraceIds.has(traceId);\n\n  // A long trace is clamped to the real height of its messages column (not a nominal row height),\n  // so the timeline never dwarfs the turn it belongs to. The refs live here because the messages\n  // and the timeline are sibling parts.\n  const messages = useMeasuredAutoHeight<HTMLDivElement>();\n  const timeline = useMeasuredAutoHeight<HTMLDivElement>();\n  const detailsHeader = useMeasuredAutoHeight<HTMLDivElement>();\n\n  // Which view the messages column shows (Messages / Feedback / Scores), one per row.\n  const [tab, setTab] = useState<string>(THREAD_TRACE_MESSAGES_TAB);\n  // The clamp budget is the height of the *Messages* view: a short Feedback or Scores view\n  // must not squash the span tree next to it, so the last Messages height is kept while\n  // another view is showing.\n  const [messagesViewHeight, setMessagesViewHeight] = useState<number | null>(null);\n  if (tab === THREAD_TRACE_MESSAGES_TAB && messages.height !== messagesViewHeight) {\n    setMessagesViewHeight(messages.height);\n  }\n\n  const { highlightSpans: rootHighlightSpans, setTraceExpanded } = root;\n  const highlightSpans = useCallback(\n    (spanIds: string[]) => rootHighlightSpans(traceId, spanIds),\n    [rootHighlightSpans, traceId],\n  );\n  const setExpanded = useCallback(\n    (expanded: boolean) => setTraceExpanded(traceId, expanded),\n    [setTraceExpanded, traceId],\n  );\n\n  const contextValue = useMemo<ThreadTraceRowContextValue>(\n    () => ({\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      setTab,\n      messagesRef: messages.ref,\n      timelineRef: timeline.ref,\n      detailsHeaderRef: detailsHeader.ref,\n      messagesHeight: messagesViewHeight,\n      timelineHeight: timeline.height,\n      detailsHeaderHeight: detailsHeader.height,\n    }),\n    [\n      traceId,\n      isActive,\n      isCurrent,\n      isExpanded,\n      selectedSpanId,\n      featuredSpanIds,\n      revealSpanId,\n      highlightSpans,\n      setExpanded,\n      tab,\n      messages.ref,\n      timeline.ref,\n      detailsHeader.ref,\n      messagesViewHeight,\n      timeline.height,\n      detailsHeader.height,\n    ],\n  );\n\n  return (\n    <ThreadTraceRowContext.Provider value={contextValue}>\n      {/* Registers the row with the scroller so prepends of older turns keep the reading position.\n          Rows measure their own columns, so they stay rendered off screen. */}\n      <MessageScrollerItem messageId={traceId} className=\"[content-visibility:visible]\">\n        {/* The row is the tabs root, so the tab list in the divider drives the messages column. */}\n        <Tabs<string>\n          defaultTab={THREAD_TRACE_MESSAGES_TAB}\n          value={tab}\n          onValueChange={setTab}\n          data-slot=\"thread-trace-row\"\n          className={cn(\n            // `overflow-visible` overrides the tabs root scroll box so the messages column stays sticky.\n            'group flex flex-col overflow-visible pb-4',\n            className,\n          )}\n          data-trace-id={traceId}\n          data-active={isActive || undefined}\n          {...props}\n        >\n          {children}\n        </Tabs>\n      </MessageScrollerItem>\n    </ThreadTraceRowContext.Provider>\n  );\n}\n\nexport type ThreadTraceRowBodyProps = ComponentProps<'div'>;\n\n/** The two columns of a row: the messages on the left and the details card on the right, each padded on x. */\nexport function ThreadTraceRowBody({ className, ...props }: ThreadTraceRowBodyProps) {\n  return (\n    <div\n      data-slot=\"thread-trace-row-body\"\n      className={cn('grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]', className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ThreadTraceDividerProps {\n  /** Names the turn, e.g. `Turn 1`. Used as the accessible name; not shown. */\n  label: string;\n  /** Typically the row's `ThreadTrace.TabList`. */\n  children?: ReactNode;\n}\n\n/**\n * The rule above a row: a full-width line, with its content (e.g. a trace link and tabs) centered over the messages\n * column only, so the line runs on uninterrupted above the details card.\n */\nexport function ThreadTraceDivider({ label, children }: ThreadTraceDividerProps) {\n  return (\n    <div data-slot=\"thread-trace-divider\" className=\"grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]\">\n      <div className=\"min-w-0 pl-4\">\n        <TranscriptDivider label={label} hideLabel>\n          {children}\n        </TranscriptDivider>\n      </div>\n      <div aria-hidden className=\"flex items-center pr-4\">\n        <span className=\"h-px flex-1 bg-border\" />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -3,38 +3,42 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const reactResizablePanels = require('react-resizable-panels');
 const domains_traces_hooks_useSpanDetail = require('../../hooks/use-span-detail.cjs.js');
 const domains_traces_hooks_useTraceSpanNavigation = require('../../hooks/use-trace-span-navigation.cjs.js');
 const domains_traces_hooks_useTraceSpans = require('../../hooks/use-trace-spans.cjs.js');
 const domains_traces_components_spanDataPanelView = require('../span-data-panel-view.cjs.js');
 const domains_traces_components_threadTrace_threadTraceContext = require('./thread-trace-context.cjs.js');
+const resize_separator = require('../../../../resize/separator.cjs.js');
 const utils_cn = require('../../../../cn-DG0X1KEP.cjs');
 
 function ThreadTraceSpanPanel({ className, panelClassName, ...props }) {
   const { selected } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "thread-trace-span-panel",
-      className: utils_cn.cn(
-        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
-        "flex min-h-0 min-w-0 flex-col overflow-hidden",
-        selected && "animate-in border-l border-border duration-300 fade-in-0",
-        className
-      ),
-      ...props,
-      children: selected && // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SelectedSpanPanel,
-        {
-          traceId: selected.traceId,
-          spanId: selected.spanId,
-          panelClassName
-        },
-        selected.traceId
-      )
-    }
-  );
+  if (!selected) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(resize_separator.PanelSeparator, { variant: "pill" }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "thread-trace-span", minSize: 320, defaultSize: "35%", maxSize: "50%", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "thread-trace-span-panel",
+        className: utils_cn.cn(
+          // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
+          "flex h-full min-h-0 min-w-0 animate-in flex-col overflow-hidden border-l border-border duration-300 fade-in-0",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SelectedSpanPanel,
+          {
+            traceId: selected.traceId,
+            spanId: selected.spanId,
+            panelClassName
+          },
+          selected.traceId
+        )
+      }
+    ) })
+  ] });
 }
 function SelectedSpanPanel({ traceId, spanId, panelClassName }) {
   const { selectSpan } = domains_traces_components_threadTrace_threadTraceContext.useThreadTrace();
@@ -51,7 +55,8 @@ function SelectedSpanPanel({ traceId, spanId, panelClassName }) {
       span: spanDetailData?.span,
       isLoading,
       onPrevious: handlePreviousSpan,
-      onNext: handleNextSpan
+      onNext: handleNextSpan,
+      onClose: () => selectSpan(traceId, void 0)
     }
   );
 }

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-span-panel.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useSpanDetail } from '../../hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { SpanDataPanelView } from '../span-data-panel-view';\nimport { useThreadTrace } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpanPanelProps extends Omit<ComponentProps<'div'>, 'children'> {\n  panelClassName?: string;\n}\n\n/**\n * The side panel with the selected span's detail. The cell stays mounted (empty) while no span\n * is selected so the root grid can animate its column open and closed.\n */\nexport function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps) {\n  const { selected } = useThreadTrace();\n  return (\n    <div\n      data-slot=\"thread-trace-span-panel\"\n      className={cn(\n        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.\n        'flex min-h-0 min-w-0 flex-col overflow-hidden',\n        selected && 'animate-in border-l border-border duration-300 fade-in-0',\n        className,\n      )}\n      {...props}\n    >\n      {selected && (\n        // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.\n        <SelectedSpanPanel\n          key={selected.traceId}\n          traceId={selected.traceId}\n          spanId={selected.spanId}\n          panelClassName={panelClassName}\n        />\n      )}\n    </div>\n  );\n}\n\ninterface SelectedSpanPanelProps {\n  traceId: string;\n  spanId: string;\n  panelClassName?: string;\n}\n\nfunction SelectedSpanPanel({ traceId, spanId, panelClassName }: SelectedSpanPanelProps) {\n  const { selectSpan } = useThreadTrace();\n  const onSpanSelect = (nextSpanId: string | undefined) => selectSpan(traceId, nextSpanId);\n  const { data: spanDetailData, isLoading } = useSpanDetail(traceId, spanId);\n  const { data: traceData } = useTraceSpans(traceId);\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);\n\n  return (\n    <SpanDataPanelView\n      className={panelClassName}\n      traceId={traceId}\n      spanId={spanId}\n      span={spanDetailData?.span}\n      isLoading={isLoading}\n      onPrevious={handlePreviousSpan}\n      onNext={handleNextSpan}\n    />\n  );\n}\n"],"names":["useThreadTrace","jsx","cn","useSpanDetail","useTraceSpans","useTraceSpanNavigation","SpanDataPanelView"],"mappings":";;;;;;;;;;;;AAiBO,SAAS,qBAAqB,EAAE,SAAA,EAAW,cAAA,EAAgB,GAAG,OAAM,EAA8B;AACvG,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIA,uEAAA,EAAe;AACpC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA;AAAA,QAET,+CAAA;AAAA,QACA,QAAA,IAAY,0DAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA;AAAA,sBAECD,cAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UAEC,SAAS,QAAA,CAAS,OAAA;AAAA,UAClB,QAAQ,QAAA,CAAS,MAAA;AAAA,UACjB;AAAA,SAAA;AAAA,QAHK,QAAA,CAAS;AAAA;AAIhB;AAAA,GAEJ;AAEJ;AAQA,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,gBAAe,EAA2B;AACtF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAID,uEAAA,EAAe;AACtC,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,KAAmC,UAAA,CAAW,SAAS,UAAU,CAAA;AACvF,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,WAAU,GAAIG,gDAAA,CAAc,SAAS,MAAM,CAAA;AACzE,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAIC,iDAAc,OAAO,CAAA;AACjD,EAAA,MAAM,EAAE,oBAAoB,cAAA,EAAe,GAAIC,mEAAuB,SAAA,EAAW,KAAA,EAAO,QAAQ,YAAY,CAAA;AAE5G,EAAA,uBACEJ,cAAA;AAAA,IAACK,6DAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA;AAAA,MACX,OAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAM,cAAA,EAAgB,IAAA;AAAA,MACtB,SAAA;AAAA,MACA,UAAA,EAAY,kBAAA;AAAA,MACZ,MAAA,EAAQ;AAAA;AAAA,GACV;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-span-panel.cjs.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Panel } from 'react-resizable-panels';\n\nimport { useSpanDetail } from '../../hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { SpanDataPanelView } from '../span-data-panel-view';\nimport { useThreadTrace } from './thread-trace-context';\nimport { PanelSeparator } from '@/lib/resize/separator';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpanPanelProps extends Omit<ComponentProps<'div'>, 'children'> {\n  panelClassName?: string;\n}\n\n/**\n * The resizable side column with the selected span's detail; rendered only while a\n * span is selected.\n */\nexport function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps) {\n  const { selected } = useThreadTrace();\n  if (!selected) return null;\n  return (\n    <>\n      <PanelSeparator variant=\"pill\" />\n      <Panel id=\"thread-trace-span\" minSize={320} defaultSize=\"35%\" maxSize=\"50%\">\n        <div\n          data-slot=\"thread-trace-span-panel\"\n          className={cn(\n            // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.\n            'flex h-full min-h-0 min-w-0 animate-in flex-col overflow-hidden border-l border-border duration-300 fade-in-0',\n            className,\n          )}\n          {...props}\n        >\n          {/* Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM. */}\n          <SelectedSpanPanel\n            key={selected.traceId}\n            traceId={selected.traceId}\n            spanId={selected.spanId}\n            panelClassName={panelClassName}\n          />\n        </div>\n      </Panel>\n    </>\n  );\n}\n\ninterface SelectedSpanPanelProps {\n  traceId: string;\n  spanId: string;\n  panelClassName?: string;\n}\n\nfunction SelectedSpanPanel({ traceId, spanId, panelClassName }: SelectedSpanPanelProps) {\n  const { selectSpan } = useThreadTrace();\n  const onSpanSelect = (nextSpanId: string | undefined) => selectSpan(traceId, nextSpanId);\n  const { data: spanDetailData, isLoading } = useSpanDetail(traceId, spanId);\n  const { data: traceData } = useTraceSpans(traceId);\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);\n\n  return (\n    <SpanDataPanelView\n      className={panelClassName}\n      traceId={traceId}\n      spanId={spanId}\n      span={spanDetailData?.span}\n      isLoading={isLoading}\n      onPrevious={handlePreviousSpan}\n      onNext={handleNextSpan}\n      onClose={() => selectSpan(traceId, undefined)}\n    />\n  );\n}\n"],"names":["useThreadTrace","jsxs","Fragment","jsx","PanelSeparator","Panel","cn","useSpanDetail","useTraceSpans","useTraceSpanNavigation","SpanDataPanelView"],"mappings":";;;;;;;;;;;;;;AAmBO,SAAS,qBAAqB,EAAE,SAAA,EAAW,cAAA,EAAgB,GAAG,OAAM,EAA8B;AACvG,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIA,uEAAA,EAAe;AACpC,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,+BAAA,EAAA,EAAe,SAAQ,MAAA,EAAO,CAAA;AAAA,oBAC/BD,cAAA,CAACE,8BAAM,EAAA,EAAG,mBAAA,EAAoB,SAAS,GAAA,EAAK,WAAA,EAAY,KAAA,EAAM,OAAA,EAAQ,KAAA,EACpE,QAAA,kBAAAF,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAWG,WAAA;AAAA;AAAA,UAET,+GAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAGJ,QAAA,kBAAAH,cAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YAEC,SAAS,QAAA,CAAS,OAAA;AAAA,YAClB,QAAQ,QAAA,CAAS,MAAA;AAAA,YACjB;AAAA,WAAA;AAAA,UAHK,QAAA,CAAS;AAAA;AAIhB;AAAA,KACF,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;AAQA,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,gBAAe,EAA2B;AACtF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIH,uEAAA,EAAe;AACtC,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,KAAmC,UAAA,CAAW,SAAS,UAAU,CAAA;AACvF,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,WAAU,GAAIO,gDAAA,CAAc,SAAS,MAAM,CAAA;AACzE,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAIC,iDAAc,OAAO,CAAA;AACjD,EAAA,MAAM,EAAE,oBAAoB,cAAA,EAAe,GAAIC,mEAAuB,SAAA,EAAW,KAAA,EAAO,QAAQ,YAAY,CAAA;AAE5G,EAAA,uBACEN,cAAA;AAAA,IAACO,6DAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA;AAAA,MACX,OAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAM,cAAA,EAAgB,IAAA;AAAA,MACtB,SAAA;AAAA,MACA,UAAA,EAAY,kBAAA;AAAA,MACZ,MAAA,EAAQ,cAAA;AAAA,MACR,OAAA,EAAS,MAAM,UAAA,CAAW,OAAA,EAAS,MAAS;AAAA;AAAA,GAC9C;AAEJ;;;;"}

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

@@ -1,36 +1,40 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Panel } from 'react-resizable-panels';
 import { useSpanDetail } from '../../hooks/use-span-detail.es.js';
 import { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation.es.js';
 import { useTraceSpans } from '../../hooks/use-trace-spans.es.js';
 import { SpanDataPanelView } from '../span-data-panel-view.es.js';
 import { useThreadTrace } from './thread-trace-context.es.js';
+import { PanelSeparator } from '../../../../resize/separator.es.js';
 import { c as cn } from '../../../../cn-65Adrsfj.js';
 
 function ThreadTraceSpanPanel({ className, panelClassName, ...props }) {
   const { selected } = useThreadTrace();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "thread-trace-span-panel",
-      className: cn(
-        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
-        "flex min-h-0 min-w-0 flex-col overflow-hidden",
-        selected && "animate-in border-l border-border duration-300 fade-in-0",
-        className
-      ),
-      ...props,
-      children: selected && // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.
-      /* @__PURE__ */ jsx(
-        SelectedSpanPanel,
-        {
-          traceId: selected.traceId,
-          spanId: selected.spanId,
-          panelClassName
-        },
-        selected.traceId
-      )
-    }
-  );
+  if (!selected) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PanelSeparator, { variant: "pill" }),
+    /* @__PURE__ */ jsx(Panel, { id: "thread-trace-span", minSize: 320, defaultSize: "35%", maxSize: "50%", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "thread-trace-span-panel",
+        className: cn(
+          // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.
+          "flex h-full min-h-0 min-w-0 animate-in flex-col overflow-hidden border-l border-border duration-300 fade-in-0",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          SelectedSpanPanel,
+          {
+            traceId: selected.traceId,
+            spanId: selected.spanId,
+            panelClassName
+          },
+          selected.traceId
+        )
+      }
+    ) })
+  ] });
 }
 function SelectedSpanPanel({ traceId, spanId, panelClassName }) {
   const { selectSpan } = useThreadTrace();
@@ -47,7 +51,8 @@ function SelectedSpanPanel({ traceId, spanId, panelClassName }) {
       span: spanDetailData?.span,
       isLoading,
       onPrevious: handlePreviousSpan,
-      onNext: handleNextSpan
+      onNext: handleNextSpan,
+      onClose: () => selectSpan(traceId, void 0)
     }
   );
 }

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

@@ -1 +1 @@
-{"version":3,"file":"thread-trace-span-panel.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useSpanDetail } from '../../hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { SpanDataPanelView } from '../span-data-panel-view';\nimport { useThreadTrace } from './thread-trace-context';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpanPanelProps extends Omit<ComponentProps<'div'>, 'children'> {\n  panelClassName?: string;\n}\n\n/**\n * The side panel with the selected span's detail. The cell stays mounted (empty) while no span\n * is selected so the root grid can animate its column open and closed.\n */\nexport function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps) {\n  const { selected } = useThreadTrace();\n  return (\n    <div\n      data-slot=\"thread-trace-span-panel\"\n      className={cn(\n        // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.\n        'flex min-h-0 min-w-0 flex-col overflow-hidden',\n        selected && 'animate-in border-l border-border duration-300 fade-in-0',\n        className,\n      )}\n      {...props}\n    >\n      {selected && (\n        // Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM.\n        <SelectedSpanPanel\n          key={selected.traceId}\n          traceId={selected.traceId}\n          spanId={selected.spanId}\n          panelClassName={panelClassName}\n        />\n      )}\n    </div>\n  );\n}\n\ninterface SelectedSpanPanelProps {\n  traceId: string;\n  spanId: string;\n  panelClassName?: string;\n}\n\nfunction SelectedSpanPanel({ traceId, spanId, panelClassName }: SelectedSpanPanelProps) {\n  const { selectSpan } = useThreadTrace();\n  const onSpanSelect = (nextSpanId: string | undefined) => selectSpan(traceId, nextSpanId);\n  const { data: spanDetailData, isLoading } = useSpanDetail(traceId, spanId);\n  const { data: traceData } = useTraceSpans(traceId);\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);\n\n  return (\n    <SpanDataPanelView\n      className={panelClassName}\n      traceId={traceId}\n      spanId={spanId}\n      span={spanDetailData?.span}\n      isLoading={isLoading}\n      onPrevious={handlePreviousSpan}\n      onNext={handleNextSpan}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAiBO,SAAS,qBAAqB,EAAE,SAAA,EAAW,cAAA,EAAgB,GAAG,OAAM,EAA8B;AACvG,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,cAAA,EAAe;AACpC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,yBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA;AAAA,QAET,+CAAA;AAAA,QACA,QAAA,IAAY,0DAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA;AAAA,sBAEC,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UAEC,SAAS,QAAA,CAAS,OAAA;AAAA,UAClB,QAAQ,QAAA,CAAS,MAAA;AAAA,UACjB;AAAA,SAAA;AAAA,QAHK,QAAA,CAAS;AAAA;AAIhB;AAAA,GAEJ;AAEJ;AAQA,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,gBAAe,EAA2B;AACtF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,cAAA,EAAe;AACtC,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,KAAmC,UAAA,CAAW,SAAS,UAAU,CAAA;AACvF,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,WAAU,GAAI,aAAA,CAAc,SAAS,MAAM,CAAA;AACzE,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAI,cAAc,OAAO,CAAA;AACjD,EAAA,MAAM,EAAE,oBAAoB,cAAA,EAAe,GAAI,uBAAuB,SAAA,EAAW,KAAA,EAAO,QAAQ,YAAY,CAAA;AAE5G,EAAA,uBACE,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA;AAAA,MACX,OAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAM,cAAA,EAAgB,IAAA;AAAA,MACtB,SAAA;AAAA,MACA,UAAA,EAAY,kBAAA;AAAA,MACZ,MAAA,EAAQ;AAAA;AAAA,GACV;AAEJ;;;;"}
+{"version":3,"file":"thread-trace-span-panel.es.js","sources":["../../../../../src/domains/traces/components/thread-trace/thread-trace-span-panel.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Panel } from 'react-resizable-panels';\n\nimport { useSpanDetail } from '../../hooks/use-span-detail';\nimport { useTraceSpanNavigation } from '../../hooks/use-trace-span-navigation';\nimport { useTraceSpans } from '../../hooks/use-trace-spans';\nimport { SpanDataPanelView } from '../span-data-panel-view';\nimport { useThreadTrace } from './thread-trace-context';\nimport { PanelSeparator } from '@/lib/resize/separator';\nimport { cn } from '@/lib/utils';\n\nexport interface ThreadTraceSpanPanelProps extends Omit<ComponentProps<'div'>, 'children'> {\n  panelClassName?: string;\n}\n\n/**\n * The resizable side column with the selected span's detail; rendered only while a\n * span is selected.\n */\nexport function ThreadTraceSpanPanel({ className, panelClassName, ...props }: ThreadTraceSpanPanelProps) {\n  const { selected } = useThreadTrace();\n  if (!selected) return null;\n  return (\n    <>\n      <PanelSeparator variant=\"pill\" />\n      <Panel id=\"thread-trace-span\" minSize={320} defaultSize=\"35%\" maxSize=\"50%\">\n        <div\n          data-slot=\"thread-trace-span-panel\"\n          className={cn(\n            // Same chrome as the span column of the trace panel: flush to the edge, divided by a left border.\n            'flex h-full min-h-0 min-w-0 animate-in flex-col overflow-hidden border-l border-border duration-300 fade-in-0',\n            className,\n          )}\n          {...props}\n        >\n          {/* Keyed by trace only: the panel's queries already follow `spanId`, so prev/next keep the DOM. */}\n          <SelectedSpanPanel\n            key={selected.traceId}\n            traceId={selected.traceId}\n            spanId={selected.spanId}\n            panelClassName={panelClassName}\n          />\n        </div>\n      </Panel>\n    </>\n  );\n}\n\ninterface SelectedSpanPanelProps {\n  traceId: string;\n  spanId: string;\n  panelClassName?: string;\n}\n\nfunction SelectedSpanPanel({ traceId, spanId, panelClassName }: SelectedSpanPanelProps) {\n  const { selectSpan } = useThreadTrace();\n  const onSpanSelect = (nextSpanId: string | undefined) => selectSpan(traceId, nextSpanId);\n  const { data: spanDetailData, isLoading } = useSpanDetail(traceId, spanId);\n  const { data: traceData } = useTraceSpans(traceId);\n  const { handlePreviousSpan, handleNextSpan } = useTraceSpanNavigation(traceData?.spans, spanId, onSpanSelect);\n\n  return (\n    <SpanDataPanelView\n      className={panelClassName}\n      traceId={traceId}\n      spanId={spanId}\n      span={spanDetailData?.span}\n      isLoading={isLoading}\n      onPrevious={handlePreviousSpan}\n      onNext={handleNextSpan}\n      onClose={() => selectSpan(traceId, undefined)}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAmBO,SAAS,qBAAqB,EAAE,SAAA,EAAW,cAAA,EAAgB,GAAG,OAAM,EAA8B;AACvG,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,cAAA,EAAe;AACpC,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,SAAQ,MAAA,EAAO,CAAA;AAAA,oBAC/B,GAAA,CAAC,SAAM,EAAA,EAAG,mBAAA,EAAoB,SAAS,GAAA,EAAK,WAAA,EAAY,KAAA,EAAM,OAAA,EAAQ,KAAA,EACpE,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,yBAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA;AAAA,UAET,+GAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAGJ,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YAEC,SAAS,QAAA,CAAS,OAAA;AAAA,YAClB,QAAQ,QAAA,CAAS,MAAA;AAAA,YACjB;AAAA,WAAA;AAAA,UAHK,QAAA,CAAS;AAAA;AAIhB;AAAA,KACF,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;AAQA,SAAS,iBAAA,CAAkB,EAAE,OAAA,EAAS,MAAA,EAAQ,gBAAe,EAA2B;AACtF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,cAAA,EAAe;AACtC,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,KAAmC,UAAA,CAAW,SAAS,UAAU,CAAA;AACvF,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,WAAU,GAAI,aAAA,CAAc,SAAS,MAAM,CAAA;AACzE,EAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAI,cAAc,OAAO,CAAA;AACjD,EAAA,MAAM,EAAE,oBAAoB,cAAA,EAAe,GAAI,uBAAuB,SAAA,EAAW,KAAA,EAAO,QAAQ,YAAY,CAAA;AAE5G,EAAA,uBACE,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,cAAA;AAAA,MACX,OAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAM,cAAA,EAAgB,IAAA;AAAA,MACtB,SAAA;AAAA,MACA,UAAA,EAAY,kBAAA;AAAA,MACZ,MAAA,EAAQ,cAAA;AAAA,MACR,OAAA,EAAS,MAAM,UAAA,CAAW,OAAA,EAAS,MAAS;AAAA;AAAA,GAC9C;AAEJ;;;;"}