@workflow/web-shared 5.0.0-beta.2 → 5.0.0-beta.21

package/src/components/new-trace-viewer/components/event-list.tsx

@@ -0,0 +1,136 @@
+import { Circle } from 'lucide-react';
+import { useRef } from 'react';
+import { cn } from '../../../lib/utils';
+import type { Span } from '../types';
+import { formatDurationPrecise } from '../../trace-viewer/util/timing';
+import {
+  SleepIcon,
+  StepForwardIcon,
+  WebhookIcon,
+  WorkflowIcon,
+} from '../icons';
+import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
+import { getSpanDurationMs } 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 }>;
+  className: string;
+}
+
+const eventStyles: Record<string, EventStyle> = {
+  run: { icon: WorkflowIcon, className: 'text-blue-900' },
+  step: { icon: StepForwardIcon, className: 'text-green-900' },
+  hook: { icon: WebhookIcon, className: 'text-gray-900' },
+  sleep: { icon: SleepIcon, className: 'text-gray-900' },
+};
+
+const defaultStyle: EventStyle = {
+  icon: Circle,
+  className: 'text-gray-900',
+};
+
+const ROW_HEIGHT_CLASS = 'h-10';
+
+function getEventStyle(resource: string, isErrored: boolean): EventStyle {
+  const style = eventStyles[resource] ?? defaultStyle;
+  return {
+    icon: style.icon,
+    className: cn(isErrored ? 'text-red-900' : style.className),
+  };
+}
+
+const EventRow = ({
+  span,
+  isSelected,
+  isDimmed,
+  onSelectSpan,
+}: {
+  span: Span;
+  isSelected: boolean;
+  isDimmed?: boolean;
+  onSelectSpan: (spanId: string) => void;
+}) => {
+  const durationMs = getSpanDurationMs(span);
+  const workflowStatus = (span.attributes.data as Record<string, unknown>)
+    ?.status as string | undefined;
+  const isErrored = span.status.code === 2 || workflowStatus === 'failed';
+  const { icon: Icon, className: tagClassName } = getEventStyle(
+    span.resource,
+    isErrored
+  );
+
+  return (
+    <li
+      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="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>
+  );
+};
+
+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 divide-y divide-gray-alpha-400 border-b border-gray-alpha-400"
+      style={{
+        paddingTop: start * ROW_HEIGHT_PX,
+        paddingBottom: (spans.length - end) * ROW_HEIGHT_PX,
+      }}
+    >
+      {spans.slice(start, end).map((span) => (
+        <EventRow
+          key={span.spanId}
+          span={span}
+          isSelected={span.spanId === activeSpanId}
+          isDimmed={isSpanDimmedBySearch(span.spanId, searchResult)}
+          onSelectSpan={onSelectSpan}
+        />
+      ))}
+    </ul>
+  );
+};
+
+export default EventList;

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/utils';
+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 };

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

@@ -0,0 +1,132 @@
+const ELLIPSIS = '...';
+const MIN_START = 3;
+const MIN_END = 3;
+const MIN_KEPT = MIN_START + MIN_END;
+const graphemeSegmenter =
+  typeof Intl !== 'undefined' && 'Segmenter' in Intl
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+
+type MeasureFn = (text: string) => number;
+
+/**
+ * Splits a string into grapheme clusters using Intl.Segmenter.
+ * Falls back to Array.from for environments without Intl.Segmenter.
+ */
+function toGraphemes(text: string): string[] {
+  if (graphemeSegmenter) {
+    return [...graphemeSegmenter.segment(text)].map((s) => s.segment);
+  }
+  return Array.from(text);
+}
+
+interface TruncateResult {
+  prefixText: string;
+  prefixGraphemeCount: number;
+  suffixText: string;
+  suffixGraphemeCount: number;
+  text: string;
+  truncated: boolean;
+}
+
+function buildCandidate(graphemes: string[], kept: number): TruncateResult {
+  if (kept <= 0) {
+    return {
+      prefixText: '',
+      prefixGraphemeCount: 0,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: ELLIPSIS,
+      truncated: true,
+    };
+  }
+
+  const suffixGraphemeCount =
+    kept >= MIN_KEPT
+      ? Math.max(MIN_END, Math.floor(kept / 2))
+      : Math.floor(kept / 2);
+  const prefixGraphemeCount = kept - suffixGraphemeCount;
+  const prefixText = graphemes.slice(0, prefixGraphemeCount).join('');
+  const suffixText =
+    suffixGraphemeCount > 0
+      ? graphemes.slice(-suffixGraphemeCount).join('')
+      : '';
+
+  return {
+    prefixText,
+    prefixGraphemeCount,
+    suffixText,
+    suffixGraphemeCount,
+    text: prefixText + ELLIPSIS + suffixText,
+    truncated: true,
+  };
+}
+
+/**
+ * Middle-truncates a string so `prefix...suffix` fits within `availableWidth`.
+ * Uses binary search over grapheme clusters with an injectable measure function.
+ */
+function middleTruncate(
+  graphemes: string[],
+  availableWidth: number,
+  measure: MeasureFn,
+  fullWidth?: number
+): TruncateResult {
+  const fullText = graphemes.join('');
+  const resolvedFullWidth = fullWidth ?? measure(fullText);
+
+  if (availableWidth <= 0 || graphemes.length === 0) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false,
+    };
+  }
+
+  if (resolvedFullWidth <= availableWidth) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false,
+    };
+  }
+
+  // Binary search for the maximum number of kept graphemes
+  let lo = 0;
+  let hi = graphemes.length - 1;
+  let best = -1;
+
+  while (lo <= hi) {
+    const mid = (lo + hi) >>> 1;
+    const candidate = buildCandidate(graphemes, mid);
+
+    if (measure(candidate.text) <= availableWidth) {
+      best = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+
+  if (best === -1) {
+    return {
+      prefixText: '',
+      prefixGraphemeCount: 0,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: '',
+      truncated: true,
+    };
+  }
+
+  return buildCandidate(graphemes, best);
+}
+
+export { middleTruncate, toGraphemes, ELLIPSIS, MIN_START, MIN_END };
+export type { MeasureFn, TruncateResult };

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

@@ -0,0 +1,167 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { middleTruncate, toGraphemes } from './truncate';
+
+const useIsomorphicLayoutEffect =
+  typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+interface MiddleTruncateState {
+  displayText: string;
+  isTruncated: boolean;
+  prefixGraphemeCount: number;
+  prefixText: string;
+  suffixGraphemeCount: number;
+  suffixText: string;
+}
+
+function createFullState(
+  value: string,
+  graphemes: string[]
+): MiddleTruncateState {
+  return {
+    displayText: value,
+    isTruncated: false,
+    prefixGraphemeCount: graphemes.length,
+    prefixText: value,
+    suffixGraphemeCount: 0,
+    suffixText: '',
+  };
+}
+
+/**
+ * Middle-truncation logic. Returns refs to attach to the container and measurement elements, plus the truncated display text. Recalculates on resize, font loading, and value changes.
+ * Powers the `<MiddleTruncate>` (`<span>`) component.
+ *
+ * Documentation: [Geist Middle Truncate](https://vercel.com/geist/middle-truncate)
+ *
+ * @param value - Full text string to truncate.
+ */
+function useMiddleTruncate(value: string): {
+  ref: React.RefObject<HTMLSpanElement | null>;
+  measureRef: React.RefObject<HTMLSpanElement | null>;
+  displayText: string;
+  isTruncated: boolean;
+  prefixGraphemeCount: number;
+  prefixText: string;
+  suffixGraphemeCount: number;
+  suffixText: string;
+} {
+  const graphemes = useMemo(() => toGraphemes(value), [value]);
+  const fullState = useMemo(
+    () => createFullState(value, graphemes),
+    [graphemes, value]
+  );
+  const ref = useRef<HTMLSpanElement | null>(null);
+  const measureRef = useRef<HTMLSpanElement | null>(null);
+  const [state, setState] = useState<MiddleTruncateState>(() => fullState);
+  const rafRef = useRef<number>(0);
+
+  const updateState = useCallback((nextState: MiddleTruncateState) => {
+    setState((currentState) => {
+      if (
+        currentState.displayText === nextState.displayText &&
+        currentState.isTruncated === nextState.isTruncated &&
+        currentState.prefixText === nextState.prefixText &&
+        currentState.prefixGraphemeCount === nextState.prefixGraphemeCount &&
+        currentState.suffixText === nextState.suffixText &&
+        currentState.suffixGraphemeCount === nextState.suffixGraphemeCount
+      ) {
+        return currentState;
+      }
+
+      return nextState;
+    });
+  }, []);
+
+  const recalculate = useCallback(() => {
+    const el = ref.current;
+    const measureEl = measureRef.current;
+    if (!el || !measureEl) return;
+
+    const available = el.clientWidth;
+
+    if (available <= 0) {
+      updateState(fullState);
+      return;
+    }
+
+    const measure = (text: string): number => {
+      measureEl.textContent = text;
+      return measureEl.scrollWidth;
+    };
+
+    const fullWidth = measure(value);
+
+    if (fullWidth <= available) {
+      updateState(fullState);
+      return;
+    }
+
+    const result = middleTruncate(graphemes, available, measure, fullWidth);
+    updateState({
+      displayText: result.text,
+      isTruncated: result.truncated,
+      prefixGraphemeCount: result.prefixGraphemeCount,
+      prefixText: result.prefixText,
+      suffixGraphemeCount: result.suffixGraphemeCount,
+      suffixText: result.suffixText,
+    });
+  }, [fullState, graphemes, updateState, value]);
+
+  // Measure on mount and when value changes - before paint
+  useIsomorphicLayoutEffect(() => {
+    recalculate();
+  }, [recalculate]);
+
+  // ResizeObserver + font loading for ongoing responsiveness
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const debouncedRecalc = (): void => {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(recalculate);
+    };
+
+    const ro =
+      typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(debouncedRecalc)
+        : null;
+    ro?.observe(el);
+    window.addEventListener('resize', debouncedRecalc);
+
+    const onFontsLoaded = (): void => {
+      debouncedRecalc();
+    };
+    const fontSet = 'fonts' in document ? document.fonts : null;
+    fontSet?.addEventListener?.('loadingdone', onFontsLoaded);
+
+    return () => {
+      ro?.disconnect();
+      window.removeEventListener('resize', debouncedRecalc);
+      cancelAnimationFrame(rafRef.current);
+      fontSet?.removeEventListener?.('loadingdone', onFontsLoaded);
+    };
+  }, [recalculate]);
+
+  return {
+    ref,
+    measureRef,
+    displayText: state.displayText,
+    isTruncated: state.isTruncated,
+    prefixGraphemeCount: state.prefixGraphemeCount,
+    prefixText: state.prefixText,
+    suffixGraphemeCount: state.suffixGraphemeCount,
+    suffixText: state.suffixText,
+  };
+}
+
+export { useMiddleTruncate };