@workflow/web-shared 5.0.0-beta.25 → 5.0.0-beta.27

package/src/components/new-trace-viewer/components/detail-panel.tsx

@@ -0,0 +1,272 @@
+'use client';
+
+import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
+import { ChevronDown, ChevronUp, X } from 'lucide-react';
+import {
+  type ReactNode,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { filterSpanRawEvents } from '../../../lib/trace-builder';
+import { ErrorBoundary } from '../../error-boundary';
+import {
+  EntityDetailPanel,
+  type SelectedSpanInfo,
+} from '../../sidebar/entity-detail-panel';
+import { useSidebarData } from '../../sidebar/sidebar-data-context';
+import { IconButton } from '../../ui/icon-button';
+import { Kbd } from '../../ui/kbd';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
+import { useActiveSpan } from '../context';
+import {
+  clampPanelWidth,
+  computeMaxPanelWidth,
+  PANEL_DEFAULT_WIDTH,
+  PANEL_MIN_WIDTH,
+  readStoredPanelWidth,
+  writeStoredPanelWidth,
+} from './detail-panel-width';
+import { DraggableBorder } from './draggable-border';
+import { useElementWidth } from './use-element-width';
+
+const DETAIL_PANEL_ID = 'trace-detail-panel';
+
+/** Bridge ActiveSpanContext + SidebarDataContext → SelectedSpanInfo. */
+function useSelectedSpanInfo(): SelectedSpanInfo | null {
+  const { activeSpan } = useActiveSpan();
+  const sidebar = useSidebarData();
+
+  return useMemo(() => {
+    if (!activeSpan) return null;
+
+    const resource = activeSpan.attributes?.resource as string | undefined;
+    const rawEvents = filterSpanRawEvents(
+      sidebar.events,
+      resource,
+      activeSpan.spanId
+    );
+
+    return {
+      data: activeSpan.attributes?.data,
+      resource,
+      spanId: activeSpan.spanId,
+      rawEvents,
+    };
+  }, [activeSpan, sidebar]);
+}
+
+/**
+ * The span detail aside: content, prev/next/close header, J/K navigation, and
+ * the resizable left border with its width model (see detail-panel-width.ts).
+ *
+ * Always mounted — it renders null without a selection — so the panel width
+ * survives closing and reopening within a session.
+ */
+export function TraceDetailPanel({
+  containerRef,
+  onNavigateToSpan,
+  onClose,
+}: {
+  containerRef: RefObject<HTMLDivElement | null>;
+  onNavigateToSpan: (spanId: string) => void;
+  onClose: () => void;
+}): ReactNode {
+  const { activeSpan, activeSpanId, spans } = useActiveSpan();
+  const sidebar = useSidebarData();
+  const selectedSpan = useSelectedSpanInfo();
+  const isOpen = Boolean(activeSpan);
+
+  const [storedWidth, setStoredWidth] = useState<number>(() =>
+    readStoredPanelWidth()
+  );
+  const containerWidth = useElementWidth(containerRef, isOpen);
+  const asideRef = useRef<HTMLDivElement | null>(null);
+
+  const handleResize = useCallback(
+    (next: number) => {
+      const clamped = clampPanelWidth(next, containerWidth);
+      setStoredWidth(clamped);
+      writeStoredPanelWidth(clamped);
+    },
+    [containerWidth]
+  );
+
+  const panelWidth = clampPanelWidth(storedWidth, containerWidth);
+  const panelMaxWidth = Math.max(
+    PANEL_MIN_WIDTH,
+    computeMaxPanelWidth(containerWidth)
+  );
+
+  const { prevSpanId, nextSpanId } = useMemo(() => {
+    if (!activeSpanId) return { prevSpanId: null, nextSpanId: null };
+    const i = spans.findIndex((s) => s.spanId === activeSpanId);
+    if (i === -1) return { prevSpanId: null, nextSpanId: null };
+    return {
+      prevSpanId: spans[i - 1]?.spanId ?? null,
+      nextSpanId: spans[i + 1]?.spanId ?? null,
+    };
+  }, [activeSpanId, spans]);
+
+  const handleSelectPrev = useCallback(() => {
+    if (prevSpanId) onNavigateToSpan(prevSpanId);
+  }, [prevSpanId, onNavigateToSpan]);
+
+  const handleSelectNext = useCallback(() => {
+    if (nextSpanId) onNavigateToSpan(nextSpanId);
+  }, [nextSpanId, onNavigateToSpan]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (
+        e.key !== 'j' &&
+        e.key !== 'k' &&
+        e.key !== 'ArrowDown' &&
+        e.key !== 'ArrowUp'
+      ) {
+        return;
+      }
+      const target = e.target as HTMLElement | null;
+      if (
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target?.isContentEditable
+      ) {
+        return;
+      }
+      const targetId =
+        e.key === 'k' || e.key === 'ArrowUp' ? prevSpanId : nextSpanId;
+      if (targetId) {
+        e.preventDefault();
+        onNavigateToSpan(targetId);
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [isOpen, prevSpanId, nextSpanId, onNavigateToSpan]);
+
+  // Derive the selected span name for the panel header
+  const selectedSpanName = useMemo(() => {
+    if (!selectedSpan?.data) return 'Details';
+    const data = selectedSpan.data as Record<string, unknown>;
+    if (selectedSpan.resource === 'hook') {
+      return (data.token as string | undefined) ?? (data.hookId as string);
+    }
+
+    const stepName = data.stepName as string | undefined;
+    const workflowName = data.workflowName as string | undefined;
+    return (
+      (stepName ? parseStepName(stepName)?.shortName : undefined) ??
+      (workflowName ? parseWorkflowName(workflowName)?.shortName : undefined) ??
+      stepName ??
+      workflowName ??
+      (data.hookId as string) ??
+      'Details'
+    );
+  }, [selectedSpan?.data, selectedSpan?.resource]);
+
+  if (!activeSpan) return null;
+
+  return (
+    <aside
+      ref={asideRef}
+      id={DETAIL_PANEL_ID}
+      className="relative flex flex-col h-full max-h-full shrink-0 bg-background-100 border-l border-gray-alpha-400"
+      style={{ width: panelWidth }}
+    >
+      <DraggableBorder
+        element={asideRef}
+        position="left"
+        onWidthChange={handleResize}
+        onReset={() => handleResize(PANEL_DEFAULT_WIDTH)}
+        aria-label="Resize span details panel"
+        aria-controls={DETAIL_PANEL_ID}
+        aria-valuemin={PANEL_MIN_WIDTH}
+        aria-valuemax={panelMaxWidth}
+        aria-valuenow={Math.min(
+          Math.max(Math.round(panelWidth), PANEL_MIN_WIDTH),
+          panelMaxWidth
+        )}
+      />
+      {/* Panel header */}
+      <div className="flex items-center justify-between gap-2 shrink-0 px-4 py-[7.5px]">
+        <span className="text-label-14 font-medium text-gray-1000 truncate block">
+          {selectedSpanName}
+        </span>
+        <div className="flex items-center gap-0.5 shrink-0">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <IconButton
+                aria-label="Navigate up"
+                aria-keyshortcuts="K"
+                onClick={handleSelectPrev}
+                disabled={!prevSpanId}
+              >
+                <ChevronUp className="w-4 h-4" />
+              </IconButton>
+            </TooltipTrigger>
+            {prevSpanId ? (
+              <TooltipContent>
+                Navigate up
+                <Kbd>K</Kbd>
+              </TooltipContent>
+            ) : null}
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <IconButton
+                aria-label="Navigate down"
+                aria-keyshortcuts="J"
+                onClick={handleSelectNext}
+                disabled={!nextSpanId}
+              >
+                <ChevronDown className="w-4 h-4" />
+              </IconButton>
+            </TooltipTrigger>
+            {nextSpanId ? (
+              <TooltipContent>
+                Navigate down
+                <Kbd>J</Kbd>
+              </TooltipContent>
+            ) : null}
+          </Tooltip>
+          <div aria-hidden className="w-px h-4 bg-gray-alpha-400 mx-1" />
+          <IconButton
+            aria-label="Close span details"
+            aria-keyshortcuts="Escape"
+            onClick={onClose}
+          >
+            <X className="w-4 h-4" />
+          </IconButton>
+        </div>
+      </div>
+      {/* Panel body */}
+      <div className="flex-1 overflow-y-auto">
+        <ErrorBoundary>
+          <EntityDetailPanel
+            run={sidebar.run}
+            onStreamClick={sidebar.onStreamClick}
+            onRunClick={sidebar.onRunClick}
+            fetchSpanDetail={sidebar.fetchSpanDetail}
+            onWakeUpSleep={sidebar.onWakeUpSleep}
+            onLoadEventData={sidebar.onLoadEventData}
+            onResolveHook={sidebar.onResolveHook}
+            encryptionKey={sidebar.encryptionKey}
+            onDecrypt={sidebar.onDecrypt}
+            isDecrypting={sidebar.isDecrypting}
+            selectedSpan={selectedSpan}
+            showSeparateEventOccurrenceTimestamps={
+              sidebar.showSeparateEventOccurrenceTimestamps
+            }
+          />
+        </ErrorBoundary>
+      </div>
+    </aside>
+  );
+}

package/src/components/new-trace-viewer/components/draggable-border.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import {
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '../../../lib/cn';
+
+interface DraggableBorderProps {
+  /** The panel whose width this border adjusts (measured on interaction). */
+  element: RefObject<HTMLElement | null>;
+  /** Which edge of the panel the border sits on. */
+  position: 'left' | 'right';
+  /**
+   * Called with the next width (px) while dragging or keyboard-resizing.
+   * The owner is responsible for clamping.
+   */
+  onWidthChange: (width: number) => void;
+  /** Double-click reset. */
+  onReset?: () => void;
+  'aria-label': string;
+  'aria-controls'?: string;
+  'aria-valuemin'?: number;
+  'aria-valuemax'?: number;
+  'aria-valuenow'?: number;
+}
+
+/**
+ * Overlay drag handle straddling a panel edge: an invisible strip over the
+ * panel's border whose center line highlights on hover/drag, with
+ * double-click reset, pointer-capture dragging (works with touch/pen, no
+ * ghost image), and keyboard/ARIA window-splitter support.
+ *
+ * The panel's positioning ancestor must not clip overflow — the strip hangs
+ * ~8px past the panel edge.
+ */
+export function DraggableBorder({
+  element,
+  position,
+  onWidthChange,
+  onReset,
+  'aria-label': ariaLabel,
+  'aria-controls': ariaControls,
+  'aria-valuemin': ariaValueMin,
+  'aria-valuemax': ariaValueMax,
+  'aria-valuenow': ariaValueNow,
+}: DraggableBorderProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const pointerIdRef = useRef<number | null>(null);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+  const pendingWidthRef = useRef(0);
+  const rafRef = useRef<number | null>(null);
+  const movedRef = useRef(false);
+  const lastDragEndAtRef = useRef(0);
+
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  // Suppress text selection for the duration of a drag. Effect cleanup also
+  // covers the handle unmounting mid-drag (e.g. Escape closing the panel).
+  useEffect(() => {
+    if (!isDragging) return;
+    const previous = document.body.style.userSelect;
+    document.body.style.userSelect = 'none';
+    return () => {
+      document.body.style.userSelect = previous;
+    };
+  }, [isDragging]);
+
+  const stopDrag = () => {
+    pointerIdRef.current = null;
+    setIsDragging(false);
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+      // Flush the final position that was still waiting on the next frame.
+      if (movedRef.current) onWidthChange(pendingWidthRef.current);
+    }
+    if (movedRef.current) {
+      movedRef.current = false;
+      lastDragEndAtRef.current = performance.now();
+    }
+  };
+
+  const handlePointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+    // Ignore secondary pointers (e.g. a second finger) while a drag is active
+    // so they can't re-baseline the gesture.
+    if (pointerIdRef.current !== null) return;
+    const el = element.current;
+    if (!el) return;
+    if (e.pointerType === 'mouse' && e.button !== 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    pointerIdRef.current = e.pointerId;
+    startXRef.current = e.clientX;
+    startWidthRef.current = el.offsetWidth;
+    movedRef.current = false;
+    setIsDragging(true);
+  };
+
+  // Pointer capture routes move/up events to the strip itself, so no
+  // document-level listeners are needed.
+  const handlePointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (pointerIdRef.current !== e.pointerId) return;
+    if (Math.abs(e.clientX - startXRef.current) > 4) {
+      movedRef.current = true;
+    }
+    const delta =
+      position === 'left'
+        ? startXRef.current - e.clientX
+        : e.clientX - startXRef.current;
+    pendingWidthRef.current = startWidthRef.current + delta;
+    if (!rafRef.current) {
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        onWidthChange(pendingWidthRef.current);
+      });
+    }
+  };
+
+  const handlePointerEnd = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (pointerIdRef.current !== e.pointerId) return;
+    stopDrag();
+  };
+
+  const handleLostPointerCapture = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) {
+      return;
+    }
+    stopDrag();
+  };
+
+  const handleDoubleClick = () => {
+    // Pointer-capture drags still emit click/dblclick (unlike HTML5 drag), so
+    // a dblclick during or right after a real drag is two resize nudges, not
+    // a reset request.
+    if (
+      movedRef.current ||
+      performance.now() - lastDragEndAtRef.current < 500
+    ) {
+      return;
+    }
+    onReset?.();
+  };
+
+  const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
+    const el = element.current;
+    if (!el) return;
+    const step = e.shiftKey ? 64 : 16;
+    // Arrows move the border in screen direction: for a left-edge border,
+    // ArrowLeft grows the panel.
+    const grow = position === 'left' ? 1 : -1;
+    let next: number | null = null;
+    if (e.key === 'ArrowLeft') {
+      next = el.offsetWidth + grow * step;
+    } else if (e.key === 'ArrowRight') {
+      next = el.offsetWidth - grow * step;
+    } else if (e.key === 'Home' && ariaValueMin !== undefined) {
+      next = ariaValueMin;
+    } else if (e.key === 'End' && ariaValueMax !== undefined) {
+      next = ariaValueMax;
+    }
+    if (next === null) return;
+    e.preventDefault();
+    onWidthChange(next);
+  };
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: the WAI-ARIA window-splitter pattern requires a focusable div with role=separator; <hr> cannot receive focus or drag interactions
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={ariaLabel}
+      aria-controls={ariaControls}
+      aria-valuemin={ariaValueMin}
+      aria-valuemax={ariaValueMax}
+      aria-valuenow={ariaValueNow}
+      tabIndex={0}
+      className={cn(
+        'group absolute inset-y-0 z-10 w-[17px] cursor-col-resize touch-none outline-none',
+        position === 'left' ? '-left-2' : '-right-2'
+      )}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerEnd}
+      onPointerCancel={handlePointerEnd}
+      onLostPointerCapture={handleLostPointerCapture}
+      onDoubleClick={handleDoubleClick}
+      onKeyDown={handleKeyDown}
+    >
+      {/* Center line: sits exactly over the panel's 1px border and highlights
+          on hover/drag/focus (delayed so incidental mouse-overs don't flash).
+          pointer-events-none is load-bearing: without it this 1px line is a
+          hit target, so a double-click aimed at the line lands one click on
+          the line and (after sub-pixel jitter) the other on the strip. A
+          native dblclick only fires when both clicks share a target, so the
+          reset silently fails on the line but works just beside it. Keeping
+          the line inert makes the separator div the sole target everywhere. */}
+      <span
+        aria-hidden
+        className={cn(
+          'pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-transparent transition-colors delay-75 duration-100',
+          'group-hover:bg-gray-500 group-focus-visible:bg-[var(--ds-focus-color)]',
+          isDragging && 'bg-gray-500'
+        )}
+      />
+    </div>
+  );
+}

package/src/components/new-trace-viewer/components/middle-truncate/truncate.ts

@@ -1,4 +1,4 @@
-const ELLIPSIS = '...';
+const ELLIPSIS = '…';
 const MIN_START = 3;
 const MIN_END = 3;
 const MIN_KEPT = MIN_START + MIN_END;

package/src/components/new-trace-viewer/components/pane-constants.ts

@@ -0,0 +1,19 @@
+/**
+ * Layout constants shared by SplitPane and TraceViewerSkeleton. Kept in a
+ * module without 'use client' so the skeleton's import chain stays
+ * server-component-safe for external consumers.
+ */
+
+/** Width (px) of the draggable gutter column between the list and timeline. */
+export const GUTTER_PX = 1;
+
+/** Minimum width (px) of either SplitPane pane. */
+export const MIN_PX = 50;
+
+/** Default width (px) of the start (event list) pane. */
+export const DEFAULT_START_PX = 340;
+
+/** Grid column template for the [list | gutter | timeline] split. */
+export function paneColTemplate(startPx: number): string {
+  return `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
+}

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/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 },