@workflow/web-shared 5.0.0-beta.26 → 5.0.0-beta.28

package/src/components/new-trace-viewer/components/split-pane.tsx

@@ -11,20 +11,17 @@ import {
   useState,
 } from 'react';
 import { cn } from '../../../lib/cn';
-
-const GUTTER_PX = 1;
-const MIN_PX = 50;
-const DEFAULT_START_PX = 340;
-
-export function Divider() {
-  return <div aria-hidden className="h-full w-px shrink-0 bg-gray-alpha-400" />;
-}
+import {
+  DEFAULT_START_PX,
+  GUTTER_PX,
+  MIN_PX,
+  paneColTemplate,
+} from './pane-constants';
+import { useElementWidth } from './use-element-width';
 
 export interface SplitPaneProps {
   children: ReactNode;
   className?: string;
-  /** Fixed pixel width for the start (left) pane. Default 220. */
-  defaultStartWidth?: number;
   /** Fixed (non-scrolling) header rendered above the start pane. */
   startHeader?: ReactNode;
   /** Fixed (non-scrolling) header rendered above the end pane. */
@@ -35,7 +32,6 @@ export interface SplitPaneProps {
 export function SplitPane({
   children,
   className,
-  defaultStartWidth = DEFAULT_START_PX,
   startHeader,
   endHeader,
   scrollContainerRef,
@@ -46,13 +42,18 @@ export function SplitPane({
   }
   const [start, end] = parts;
 
-  const [startPx, setStartPx] = useState(defaultStartWidth);
+  // `startPx` is the user's preferred width; the rendered width is derived by
+  // clamping against the live container width (same model as the detail
+  // panel), so shrinking the container compresses the pane without destroying
+  // the preference, and re-growing restores it.
+  const [startPx, setStartPx] = useState(DEFAULT_START_PX);
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const gutterRef = useRef<HTMLDivElement>(null);
   const rafRef = useRef<number | null>(null);
-  const pendingPx = useRef(defaultStartWidth);
+  const pendingPx = useRef(DEFAULT_START_PX);
   const pointerIdRef = useRef<number | null>(null);
+  const containerWidth = useElementWidth(containerRef);
 
   useEffect(() => {
     return () => {
@@ -134,8 +135,14 @@ export function SplitPane({
     }
   };
 
-  const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
-  const hasHeaders = startHeader != null || endHeader != null;
+  // Floor applied last so the start column can never collapse below MIN_PX
+  // (which would produce an invalid negative grid track on tiny containers).
+  const effectiveStartPx =
+    containerWidth > 0
+      ? Math.max(MIN_PX, Math.min(containerWidth - MIN_PX - GUTTER_PX, startPx))
+      : startPx;
+
+  const colTemplate = paneColTemplate(effectiveStartPx);
 
   const gutter = (
     <div
@@ -151,48 +158,30 @@ export function SplitPane({
     </div>
   );
 
-  if (hasHeaders) {
-    return (
-      <div className={cn('flex flex-col h-full min-h-0', className)}>
-        <div
-          className="shrink-0 grid"
-          style={{ gridTemplateColumns: colTemplate }}
-        >
-          <div>{startHeader}</div>
-          <div className="flex justify-center">
-            <span className="h-full w-px bg-gray-alpha-400" aria-hidden />
-          </div>
-          <div>{endHeader}</div>
-        </div>
-        <div
-          ref={setContainerRef}
-          className={cn(
-            'grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto',
-            isDragging && 'select-none'
-          )}
-          style={{ gridTemplateColumns: colTemplate }}
-        >
-          {start}
-          {gutter}
-          {end}
+  return (
+    <div className={cn('flex flex-col h-full min-h-0', className)}>
+      <div
+        className="shrink-0 grid"
+        style={{ gridTemplateColumns: colTemplate }}
+      >
+        <div>{startHeader}</div>
+        <div className="flex justify-center">
+          <span className="h-full w-px bg-gray-alpha-400" aria-hidden />
         </div>
+        <div>{endHeader}</div>
+      </div>
+      <div
+        ref={setContainerRef}
+        className={cn(
+          'grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto',
+          isDragging && 'select-none'
+        )}
+        style={{ gridTemplateColumns: colTemplate }}
+      >
+        {start}
+        {gutter}
+        {end}
       </div>
-    );
-  }
-
-  return (
-    <div
-      ref={setContainerRef}
-      className={cn(
-        'grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto',
-        isDragging && 'select-none',
-        className
-      )}
-      style={{ gridTemplateColumns: colTemplate, height: '100%' }}
-    >
-      {start}
-      {gutter}
-      {end}
     </div>
   );
 }

package/src/components/new-trace-viewer/components/timeline.tsx

@@ -13,7 +13,6 @@ import {
 } from 'react';
 import { cn } from '../../../lib/cn';
 import {
-  formatDuration,
   formatDurationPrecise,
   getHighResInMs,
 } from '../../trace-viewer/util/timing';
@@ -32,6 +31,7 @@ import {
   computeSpanSegments,
   getResourceColor,
   getSpanDurationMs,
+  isSpanErrored,
 } from '../utils';
 import {
   cullCollidingMarkers,
@@ -451,9 +451,7 @@ const TimelineBar = memo(function TimelineBar({
   const hasMarkers =
     markers.length > 0 || offscreen.left !== null || offscreen.right !== null;
 
-  const workflowStatus = (span.attributes.data as Record<string, unknown>)
-    ?.status as string | undefined;
-  const isErrored = span.status.code === 2 || workflowStatus === 'failed';
+  const isErrored = isSpanErrored(span);
   const colors = getResourceColor(span.resource);
   const fallbackBg = isErrored
     ? (colors.errorBg ?? 'var(--ds-red-200)')
@@ -733,7 +731,7 @@ export function Timeline({
               key={gap.rowIndex}
               leftFrac={gap.leftFrac}
               rightFrac={gap.rightFrac}
-              label={formatDuration(gap.gapMs, true)}
+              label={formatDurationPrecise(gap.gapMs)}
               rowIndex={gap.rowIndex}
             />
           ))}

package/src/components/new-trace-viewer/components/trace-viewer-skeleton.tsx

@@ -1,6 +1,9 @@
 import { Skeleton } from '../../ui/skeleton';
+import { DEFAULT_START_PX, paneColTemplate } from './pane-constants';
 
-const COL_TEMPLATE = '340px 1px minmax(50px, 1fr)';
+// Mirrors SplitPane's initial column template so the skeleton lines up with
+// the real viewer's first paint.
+const COL_TEMPLATE = paneColTemplate(DEFAULT_START_PX);
 
 const ROWS: { id: string; name: number; off: number; bar: number }[] = [
   { id: 'r0', name: 62, off: 0, bar: 72 },
@@ -30,6 +33,23 @@ export function TraceViewerSkeleton() {
     >
       <span className="sr-only">Loading trace…</span>
 
+      {/* Minimap strip: thin density lines tracing the same shape as the bars */}
+      <div className="relative h-10 min-h-10 shrink-0 border-b border-gray-alpha-400">
+        <div className="absolute inset-x-4 top-[6px]">
+          {ROWS.map((row, index) => (
+            <Skeleton
+              key={row.id}
+              className="absolute h-[3px] rounded-full"
+              style={{
+                left: `${row.off}%`,
+                width: `${row.bar}%`,
+                top: index * 3.5,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
       {/* Header row: search header | divider | timeline header */}
       <div
         className="shrink-0 grid"

package/src/components/new-trace-viewer/components/use-element-width.ts

@@ -0,0 +1,29 @@
+'use client';
+
+import { type RefObject, useLayoutEffect, useState } from 'react';
+
+/**
+ * Observed width (px) of `ref`'s element. Measures synchronously before paint
+ * when (re-)enabled, then tracks resizes. While disabled it keeps the last
+ * measured value; re-enabling re-measures before the next paint.
+ */
+export function useElementWidth(
+  ref: RefObject<HTMLElement | null>,
+  enabled = true
+): number {
+  const [width, setWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    if (!el) return;
+    setWidth(Math.round(el.getBoundingClientRect().width));
+    const observer = new ResizeObserver(([entry]) => {
+      setWidth(Math.round(entry?.contentRect.width ?? 0));
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, enabled]);
+
+  return width;
+}

package/src/components/new-trace-viewer/context.tsx

@@ -14,6 +14,8 @@ import type { Span } from './types';
 interface ActiveSpanContextValue {
   activeSpanId: string | null;
   activeSpan: Span | null;
+  /** The full span list the selection lives in (ordered as rendered). */
+  spans: Span[];
   setActiveSpan: (spanId: string) => void;
   clearActiveSpan: () => void;
 }
@@ -67,10 +69,11 @@ export function ActiveSpanProvider({
     () => ({
       activeSpanId,
       activeSpan,
+      spans,
       setActiveSpan,
       clearActiveSpan,
     }),
-    [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]
+    [activeSpanId, activeSpan, spans, setActiveSpan, clearActiveSpan]
   );
 
   return (