@workflow/web-shared 5.0.0-beta.3 → 5.0.0-beta.31

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/event-list.tsx

@@ -1,13 +1,18 @@
 import { Circle } from 'lucide-react';
-import { cn } from '../../../lib/utils';
-import type { Span } from '../../trace-viewer/types';
-import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+import { useRef } from 'react';
+import { cn } from '../../../lib/cn';
+import { formatDurationPrecise } from '../../trace-viewer/util/timing';
 import {
-  WorkflowIcon,
-  WebhookIcon,
   SleepIcon,
   StepForwardIcon,
+  WebhookIcon,
+  WorkflowIcon,
 } from '../icons';
+import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
+import type { Span } from '../types';
+import { getSpanDurationMs, isSpanErrored } from '../utils';
+import { MiddleTruncate } from './middle-truncate/middle-truncate';
+import { ROW_HEIGHT_PX, useRowWindow } from './use-row-window';
 
 interface EventStyle {
   icon: React.ComponentType<{ className?: string }>;
@@ -17,7 +22,7 @@ interface EventStyle {
 const eventStyles: Record<string, EventStyle> = {
   run: { icon: WorkflowIcon, className: 'text-blue-900' },
   step: { icon: StepForwardIcon, className: 'text-green-900' },
-  hook: { icon: WebhookIcon, className: 'text-yellow-900' },
+  hook: { icon: WebhookIcon, className: 'text-gray-900' },
   sleep: { icon: SleepIcon, className: 'text-gray-900' },
 };
 
@@ -26,6 +31,8 @@ const defaultStyle: EventStyle = {
   className: 'text-gray-900',
 };
 
+const ROW_HEIGHT_CLASS = 'h-10';
+
 function getEventStyle(resource: string, isErrored: boolean): EventStyle {
   const style = eventStyles[resource] ?? defaultStyle;
   return {
@@ -37,15 +44,16 @@ function getEventStyle(resource: string, isErrored: boolean): EventStyle {
 const EventRow = ({
   span,
   isSelected,
+  isDimmed,
   onSelectSpan,
 }: {
   span: Span;
   isSelected: boolean;
+  isDimmed?: boolean;
   onSelectSpan: (spanId: string) => void;
 }) => {
-  const durationMs = getHighResInMs(span.duration);
-  const isErrored =
-    (span.attributes.data as Record<string, unknown>).status === 'failed';
+  const durationMs = getSpanDurationMs(span);
+  const isErrored = isSpanErrored(span);
   const { icon: Icon, className: tagClassName } = getEventStyle(
     span.resource,
     isErrored
@@ -53,24 +61,32 @@ const EventRow = ({
 
   return (
     <li
-      className="overflow-clip group"
+      className={cn(
+        'relative overflow-clip group transition-opacity',
+        ROW_HEIGHT_CLASS,
+        isDimmed && 'opacity-35'
+      )}
       role="treeitem"
       aria-selected={isSelected}
       aria-expanded={isSelected}
       aria-level={1}
       onClick={() => onSelectSpan(span.spanId)}
     >
-      <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-[34px] py-1.5 flex">
-        <div className="flex items-center gap-2">
-          <span className={tagClassName}>
-            <Icon className="w-4 h-4" />
-          </span>
-          <span className="text-label-14">{span.name}</span>
-        </div>
-        <div className="ml-auto">
-          <span className="text-label-14 text-gray-900 tabular-nums">
-            {formatDuration(durationMs)}
-          </span>
+      <div className="h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200">
+        <div className="flex h-full min-w-0 items-center pl-4 pr-2">
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            <span className={cn('shrink-0', tagClassName)}>
+              <Icon className="w-4 h-4" />
+            </span>
+            <span className="min-w-0 text-label-14">
+              <MiddleTruncate value={span.name} />
+            </span>
+          </div>
+          <div className="ml-2 shrink-0">
+            <span className="text-label-14 text-gray-900 tabular-nums">
+              {formatDurationPrecise(durationMs)}
+            </span>
+          </div>
         </div>
       </div>
     </li>
@@ -80,28 +96,37 @@ const EventRow = ({
 const EventList = ({
   spans,
   activeSpanId,
+  searchResult,
   onSelectSpan,
 }: {
   spans: Span[];
   activeSpanId: string | null;
+  searchResult: SpanSearchResult;
   onSelectSpan: (spanId: string) => void;
 }) => {
+  const listRef = useRef<HTMLUListElement>(null);
+  const { start, end } = useRowWindow(listRef, spans.length, ROW_HEIGHT_PX);
+
   return (
     <ul
+      ref={listRef}
       id="event-list"
       role="tree"
-      className="block min-h-0 overflow-visible px-2 py-2"
+      className="block min-h-0 overflow-visible divide-y divide-gray-400 border-b border-gray-400"
+      style={{
+        paddingTop: start * ROW_HEIGHT_PX,
+        paddingBottom: (spans.length - end) * ROW_HEIGHT_PX,
+      }}
     >
-      {spans.map((span) => {
-        return (
-          <EventRow
-            key={span.spanId}
-            span={span}
-            isSelected={span.spanId === activeSpanId}
-            onSelectSpan={onSelectSpan}
-          />
-        );
-      })}
+      {spans.slice(start, end).map((span) => (
+        <EventRow
+          key={span.spanId}
+          span={span}
+          isSelected={span.spanId === activeSpanId}
+          isDimmed={isSpanDimmedBySearch(span.spanId, searchResult)}
+          onSelectSpan={onSelectSpan}
+        />
+      ))}
     </ul>
   );
 };

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

@@ -0,0 +1,114 @@
+import { ELLIPSIS, toGraphemes } from './truncate';
+
+interface GetMiddleTruncateCopyTextOptions {
+  prefixText: string;
+  selectionEnd: number;
+  selectionStart: number;
+  suffixText: string;
+  value: string;
+}
+
+interface GetMiddleTruncateCopyTextFromSelectionTextOptions {
+  prefixText: string;
+  selectionText: string;
+  suffixText: string;
+  value: string;
+}
+
+function getMiddleTruncateCopyText({
+  prefixText,
+  selectionEnd,
+  selectionStart,
+  suffixText,
+  value,
+}: GetMiddleTruncateCopyTextOptions): string | null {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+
+  if (
+    selectionStart < 0 ||
+    selectionEnd > visibleText.length ||
+    selectionStart >= selectionEnd
+  ) {
+    return null;
+  }
+
+  if (selectionStart === 0 && selectionEnd === visibleText.length) {
+    return value;
+  }
+
+  const ellipsisStart = prefixText.length;
+  const ellipsisEnd = ellipsisStart + ELLIPSIS.length;
+
+  if (selectionStart > ellipsisStart || selectionEnd < ellipsisEnd) {
+    return null;
+  }
+
+  const originalGraphemes = toGraphemes(value);
+  const selectedPrefixGraphemeCount = toGraphemes(
+    visibleText.slice(0, selectionStart)
+  ).length;
+  const selectedSuffixGraphemeCount = toGraphemes(
+    visibleText.slice(ellipsisEnd, selectionEnd)
+  ).length;
+  const suffixStart = originalGraphemes.length - toGraphemes(suffixText).length;
+
+  return originalGraphemes
+    .slice(
+      selectedPrefixGraphemeCount,
+      suffixStart + selectedSuffixGraphemeCount
+    )
+    .join('');
+}
+
+function getMiddleTruncateCopyTextFromSelectionText({
+  prefixText,
+  selectionText,
+  suffixText,
+  value,
+}: GetMiddleTruncateCopyTextFromSelectionTextOptions): string | null {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+  const trimmedSelectionText = selectionText.trim();
+
+  if (!trimmedSelectionText) {
+    return null;
+  }
+
+  const leading = selectionText.slice(
+    0,
+    selectionText.length - selectionText.trimStart().length
+  );
+  const trailing = selectionText.slice(selectionText.trimEnd().length);
+
+  if (trimmedSelectionText === visibleText) {
+    return leading + value + trailing;
+  }
+
+  if (!trimmedSelectionText.includes(ELLIPSIS)) {
+    return null;
+  }
+
+  const selectionStart = visibleText.indexOf(trimmedSelectionText);
+  if (selectionStart === -1) {
+    return null;
+  }
+
+  const selectionEnd = selectionStart + trimmedSelectionText.length;
+  const mappedText = getMiddleTruncateCopyText({
+    prefixText,
+    selectionEnd,
+    selectionStart,
+    suffixText,
+    value,
+  });
+
+  return mappedText === null ? null : leading + mappedText + trailing;
+}
+
+export {
+  getMiddleTruncateCopyText,
+  getMiddleTruncateCopyTextFromSelectionText,
+};
+export type {
+  GetMiddleTruncateCopyTextFromSelectionTextOptions,
+  GetMiddleTruncateCopyTextOptions,
+};

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

@@ -0,0 +1,157 @@
+'use client';
+
+import { useCallback, useRef } from 'react';
+import type { ClipboardEvent, ComponentPropsWithoutRef, JSX } from 'react';
+import { cn } from '../../../../lib/cn';
+import {
+  getMiddleTruncateCopyText,
+  getMiddleTruncateCopyTextFromSelectionText,
+} from './copy-selection';
+import { ELLIPSIS } from './truncate';
+import { useMiddleTruncate } from './use-middle-truncate';
+
+/** Props for the {@link MiddleTruncate} component. */
+interface MiddleTruncateProps
+  extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
+  /** The full text string to display, truncated from the middle when it overflows. */
+  value: string;
+}
+
+function getRangeOffsets(
+  container: HTMLElement,
+  range: Range
+): { end: number; start: number } | null {
+  if (
+    !container.contains(range.startContainer) ||
+    !container.contains(range.endContainer)
+  ) {
+    return null;
+  }
+
+  const startRange = document.createRange();
+  startRange.selectNodeContents(container);
+  startRange.setEnd(range.startContainer, range.startOffset);
+
+  const endRange = document.createRange();
+  endRange.selectNodeContents(container);
+  endRange.setEnd(range.endContainer, range.endOffset);
+
+  return {
+    end: endRange.toString().length,
+    start: startRange.toString().length,
+  };
+}
+
+/**
+ * @gdoc
+ *
+ * Truncates text from the middle with an ellipsis when it overflows, preserving the beginning and end (e.g. file paths, URLs). Copy behavior restores the full untruncated text to the clipboard.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Geist Middle Truncate](https://vercel.com/geist/middle-truncate)
+ *
+ * @param value - Full text string to display.
+ */
+function MiddleTruncate({
+  value,
+  className,
+  onCopy: onCopyProp,
+  ...props
+}: MiddleTruncateProps): JSX.Element {
+  const { ref, measureRef, displayText, isTruncated, prefixText, suffixText } =
+    useMiddleTruncate(value);
+  const visibleRef = useRef<HTMLSpanElement | null>(null);
+
+  const handleCopy = useCallback(
+    (e: ClipboardEvent<HTMLSpanElement>) => {
+      onCopyProp?.(e);
+      if (e.defaultPrevented || !isTruncated) return;
+
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return;
+      const selectionText = selection.toString();
+      if (!selectionText) return;
+
+      // Only intercept when the selection is fully within this element.
+      // If the user selected across elements (e.g. a table row), let
+      // the browser's default behavior preserve surrounding context.
+      const range = selection.getRangeAt(0);
+      const visibleEl = visibleRef.current;
+      let copyText: string | null = null;
+
+      if (
+        e.currentTarget.contains(range.startContainer) &&
+        e.currentTarget.contains(range.endContainer) &&
+        visibleEl
+      ) {
+        const offsets = getRangeOffsets(visibleEl, range);
+        if (offsets) {
+          copyText = getMiddleTruncateCopyText({
+            prefixText,
+            selectionEnd: offsets.end,
+            selectionStart: offsets.start,
+            suffixText,
+            value,
+          });
+        }
+      }
+
+      copyText ??= getMiddleTruncateCopyTextFromSelectionText({
+        prefixText,
+        selectionText,
+        suffixText,
+        value,
+      });
+
+      if (copyText === null) return;
+
+      e.preventDefault();
+      e.clipboardData.setData('text/plain', copyText);
+    },
+    [onCopyProp, isTruncated, prefixText, suffixText, value]
+  );
+
+  return (
+    <span
+      title={isTruncated ? value : undefined}
+      {...props}
+      ref={ref}
+      className={cn(
+        'relative inline-grid min-w-0 max-w-full overflow-hidden whitespace-nowrap',
+        className
+      )}
+      onCopy={handleCopy}
+    >
+      {isTruncated && <span className="sr-only select-none">{value}</span>}
+      <span
+        aria-hidden="true"
+        className="pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap"
+      >
+        {value}
+      </span>
+      <span
+        aria-hidden={isTruncated || undefined}
+        className="col-start-1 row-start-1 min-w-0 overflow-hidden"
+        ref={visibleRef}
+      >
+        {isTruncated ? (
+          <>
+            <span>{prefixText}</span>
+            <span>{ELLIPSIS}</span>
+            <span>{suffixText}</span>
+          </>
+        ) : (
+          displayText
+        )}
+      </span>
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap"
+        ref={measureRef}
+      />
+    </span>
+  );
+}
+
+export { MiddleTruncate };
+export type { MiddleTruncateProps };