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

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

@@ -0,0 +1,94 @@
+import { Skeleton } from '../../ui/skeleton';
+
+const COL_TEMPLATE = '340px 1px minmax(50px, 1fr)';
+
+const ROWS: { id: string; name: number; off: number; bar: number }[] = [
+  { id: 'r0', name: 62, off: 0, bar: 72 },
+  { id: 'r1', name: 78, off: 6, bar: 48 },
+  { id: 'r2', name: 50, off: 10, bar: 55 },
+  { id: 'r3', name: 84, off: 18, bar: 30 },
+  { id: 'r4', name: 45, off: 18, bar: 42 },
+  { id: 'r5', name: 66, off: 34, bar: 38 },
+  { id: 'r6', name: 55, off: 41, bar: 25 },
+  { id: 'r7', name: 40, off: 50, bar: 30 },
+];
+
+const HEADER_MARKERS = ['m0', 'm1', 'm2', 'm3'];
+
+const HeaderDivider = () => (
+  <div className="flex justify-center">
+    <span aria-hidden className="h-full w-px bg-gray-alpha-400" />
+  </div>
+);
+
+export function TraceViewerSkeleton() {
+  return (
+    <output
+      aria-busy="true"
+      aria-label="Loading trace"
+      className="flex flex-col w-full h-full min-h-0 bg-background-100"
+    >
+      <span className="sr-only">Loading trace…</span>
+
+      {/* Header row: search header | divider | timeline header */}
+      <div
+        className="shrink-0 grid"
+        style={{ gridTemplateColumns: COL_TEMPLATE }}
+      >
+        <div className="h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5">
+          <Skeleton className="w-3.5 h-3.5 shrink-0 rounded-sm" />
+          <Skeleton className="h-3.5 w-40" />
+        </div>
+        <HeaderDivider />
+        <div className="h-10 min-h-10 flex items-end border-b border-gray-alpha-400 px-4 pb-1 gap-2">
+          <div className="relative flex-1 flex items-end justify-between">
+            {HEADER_MARKERS.map((id) => (
+              <Skeleton key={id} className="h-3.5 w-9" />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Content row: event list | gutter | timeline */}
+      <div
+        className="grid flex-1 min-h-0 overflow-hidden"
+        style={{ gridTemplateColumns: COL_TEMPLATE }}
+      >
+        {/* Sidebar event rows */}
+        <div className="block overflow-visible">
+          <ul className="block divide-y divide-gray-alpha-400 border-b border-gray-alpha-400">
+            {ROWS.map((row) => (
+              <li key={row.id} className="h-10 flex items-center pl-4 pr-2">
+                <div className="flex min-w-0 flex-1 items-center gap-2">
+                  <Skeleton className="w-4 h-4 shrink-0 rounded-sm" />
+                  <Skeleton
+                    className="h-3.5"
+                    style={{ width: `${row.name}%` }}
+                  />
+                </div>
+                <Skeleton className="ml-2 h-3.5 w-10 shrink-0" />
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Gutter */}
+        <span aria-hidden className="h-full w-px bg-gray-alpha-400" />
+
+        {/* Timeline bars */}
+        <div className="relative min-h-0">
+          {ROWS.map((row) => (
+            <div key={row.id} className="relative h-10">
+              <div className="absolute inset-x-4 inset-y-0">
+                <Skeleton
+                  className="absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]"
+                  style={{ left: `${row.off}%`, width: `${row.bar}%` }}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </output>
+  );
+}

package/src/components/new-trace-viewer/components/use-row-window.ts

@@ -0,0 +1,140 @@
+'use client';
+
+import { type RefObject, useEffect, useState } from 'react';
+
+/** Rows rendered on the first paint, before the container has been measured. */
+const INITIAL_VISIBLE_ROWS = 60;
+
+export interface RowWindow {
+  /** First visible row index (inclusive), already padded by overscan. */
+  start: number;
+  /** Last visible row index (exclusive), already padded by overscan. */
+  end: number;
+}
+
+/** Nearest scrollable ancestor of `el` (the shared `SplitPane` container). */
+function getScrollParent(el: HTMLElement | null): HTMLElement | null {
+  let node = el?.parentElement ?? null;
+  while (node) {
+    const overflowY = getComputedStyle(node).overflowY;
+    if (overflowY === 'auto' || overflowY === 'scroll') return node;
+    node = node.parentElement;
+  }
+  return null;
+}
+
+/**
+ * Fixed-height windowing over a shared scroll container.
+ *
+ * The events list and timeline both render one `rowHeight`-tall row per span
+ * and scroll together inside the same `SplitPane`. Each caller passes a ref to
+ * its own root; the hook walks up to the shared scrollable ancestor, so the
+ * scroll container doesn't have to be threaded through props. Same scroll
+ * position + same row height means both panes window to the same range.
+ */
+export function useRowWindow(
+  ref: RefObject<HTMLElement | null>,
+  rowCount: number,
+  rowHeight: number,
+  overscan = 12
+): RowWindow {
+  // Bound the pre-measurement window so the first paint of a large trace
+  // doesn't render every row before the effect narrows it down.
+  const [range, setRange] = useState<RowWindow>(() => ({
+    start: 0,
+    end: Math.min(rowCount, INITIAL_VISIBLE_ROWS),
+  }));
+
+  useEffect(() => {
+    const self = ref.current;
+    const el = getScrollParent(self);
+    if (!self || !el) return;
+
+    let raf = 0;
+    const measure = () => {
+      raf = 0;
+      // Offset of the list's top within the scroll container's content, so the
+      // window stays correct even if the list isn't flush with the top.
+      const offset =
+        self.getBoundingClientRect().top -
+        el.getBoundingClientRect().top +
+        el.scrollTop;
+      const top = el.scrollTop - offset;
+      const start = Math.max(0, Math.floor(top / rowHeight) - overscan);
+      const end = Math.min(
+        rowCount,
+        Math.ceil((top + el.clientHeight) / rowHeight) + overscan
+      );
+      setRange((prev) =>
+        prev.start === start && prev.end === end ? prev : { start, end }
+      );
+    };
+
+    const onScroll = () => {
+      if (!raf) raf = requestAnimationFrame(measure);
+    };
+
+    measure();
+    el.addEventListener('scroll', onScroll, { passive: true });
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+
+    return () => {
+      el.removeEventListener('scroll', onScroll);
+      ro.disconnect();
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, [ref, rowCount, rowHeight, overscan]);
+
+  return range;
+}
+
+/** Row height (px) shared by the events list and timeline rows (`h-10`). */
+export const ROW_HEIGHT_PX = 40;
+
+/**
+ * Scroll a windowed row into view by index.
+ *
+ * The list is virtualized (fixed `rowHeight` rows), so an off-screen row has no
+ * DOM node to `scrollIntoView` — its target offset is computed from its index
+ * instead. Walks up from `listEl` to the shared scrollable ancestor (the same
+ * one `useRowWindow` measures against), only scrolls when the row sits outside
+ * the visible area, leaves a one-row `margin` of breathing room past it, and
+ * clamps the result to `[0, scrollHeight - clientHeight]`.
+ */
+export function scrollRowIntoView(
+  listEl: HTMLElement | null,
+  index: number,
+  rowHeight: number,
+  opts?: { margin?: number; behavior?: ScrollBehavior }
+): void {
+  const scroller = listEl ? getScrollParent(listEl) : null;
+  if (!listEl || !scroller) return;
+
+  const margin = opts?.margin ?? rowHeight;
+
+  // Offset of the list's top within the scroll container's content.
+  const listOffset =
+    listEl.getBoundingClientRect().top -
+    scroller.getBoundingClientRect().top +
+    scroller.scrollTop;
+
+  const rowTop = listOffset + index * rowHeight;
+  const rowBottom = rowTop + rowHeight;
+  const viewTop = scroller.scrollTop;
+  const viewBottom = viewTop + scroller.clientHeight;
+
+  let top: number | null = null;
+  if (rowTop < viewTop) {
+    top = rowTop - margin;
+  } else if (rowBottom > viewBottom) {
+    top = rowBottom + margin - scroller.clientHeight;
+  }
+  if (top === null) return;
+
+  const max = scroller.scrollHeight - scroller.clientHeight;
+  scroller.scrollTo({
+    top: Math.max(0, Math.min(top, max)),
+    behavior: opts?.behavior,
+  });
+}

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

@@ -0,0 +1,90 @@
+'use client';
+
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import type { Span } from './types';
+
+interface ActiveSpanContextValue {
+  activeSpanId: string | null;
+  activeSpan: Span | null;
+  setActiveSpan: (spanId: string) => void;
+  clearActiveSpan: () => void;
+}
+
+const ActiveSpanContext = createContext<ActiveSpanContextValue | null>(null);
+ActiveSpanContext.displayName = 'ActiveSpanContext';
+
+export function ActiveSpanProvider({
+  spans,
+  children,
+}: {
+  spans: Span[];
+  children: ReactNode;
+}) {
+  const [activeSpanId, setActiveSpanId] = useState<string | null>(null);
+
+  useEffect(() => {
+    setActiveSpanId((currentSpanId) => {
+      if (!currentSpanId) {
+        return null;
+      }
+
+      const hasCurrentSpan = spans.some(
+        (span) => span.spanId === currentSpanId
+      );
+      if (hasCurrentSpan) {
+        return currentSpanId;
+      }
+
+      return null;
+    });
+  }, [spans]);
+
+  const activeSpan = useMemo(() => {
+    if (!activeSpanId) {
+      return null;
+    }
+
+    return spans.find((span) => span.spanId === activeSpanId) ?? null;
+  }, [activeSpanId, spans]);
+
+  const setActiveSpan = useCallback((spanId: string) => {
+    setActiveSpanId(spanId);
+  }, []);
+
+  const clearActiveSpan = useCallback(() => {
+    setActiveSpanId(null);
+  }, []);
+
+  const value = useMemo<ActiveSpanContextValue>(
+    () => ({
+      activeSpanId,
+      activeSpan,
+      setActiveSpan,
+      clearActiveSpan,
+    }),
+    [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]
+  );
+
+  return (
+    <ActiveSpanContext.Provider value={value}>
+      {children}
+    </ActiveSpanContext.Provider>
+  );
+}
+
+export const useActiveSpan = (): ActiveSpanContextValue => {
+  const context = useContext(ActiveSpanContext);
+  if (!context) {
+    throw new Error('useActiveSpan must be used within ActiveSpanProvider');
+  }
+
+  return context;
+};

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

@@ -0,0 +1,79 @@
+const WorkflowIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      strokeLinejoin="round"
+      style={{ color: 'currentColor' }}
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        d="M5.75 7L6.4209 7.33594L4.85254 10.4717C5.38789 10.771 5.75 11.3431 5.75 12V14C5.75 14.9665 4.96648 15.75 4 15.75H2C1.03352 15.75 0.25 14.9665 0.25 14V12C0.25 11.0335 1.03352 10.25 2 10.25H3.28711L5.0791 6.66504L5.75 7ZM14 10.25C14.9665 10.25 15.75 11.0335 15.75 12V14C15.75 14.9665 14.9665 15.75 14 15.75H12C11.1185 15.75 10.3909 15.098 10.2695 14.25H7V12.75H10.25V12C10.25 11.0335 11.0335 10.25 12 10.25H14ZM2 11.75C1.86192 11.75 1.75 11.8619 1.75 12V14C1.75 14.1381 1.86192 14.25 2 14.25H4C4.13808 14.25 4.25 14.1381 4.25 14V12C4.25 11.8619 4.13808 11.75 4 11.75H2ZM12 11.75C11.8619 11.75 11.75 11.8619 11.75 12V14C11.75 14.1381 11.8619 14.25 12 14.25H14C14.1381 14.25 14.25 14.1381 14.25 14V12C14.25 11.8619 14.1381 11.75 14 11.75H12ZM9 0.25C9.96649 0.25 10.75 1.03351 10.75 2V4C10.75 4.44642 10.5808 4.85197 10.3057 5.16113L12.2041 8.6416L10.8877 9.36035L8.91895 5.75H7C6.03351 5.75 5.25 4.96649 5.25 4V2C5.25 1.03351 6.03351 0.25 7 0.25H9ZM7 1.75C6.86193 1.75 6.75 1.86193 6.75 2V4C6.75 4.13807 6.86193 4.25 7 4.25H9C9.13807 4.25 9.25 4.13807 9.25 4V2C9.25 1.86193 9.13807 1.75 9 1.75H7Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const WebhookIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.8349 3.24994C5.14454 4.44567 5.55423 5.97464 6.74996 6.665L7.39465 7.03721L7.02726 7.68466L5.14599 11C5.21289 11.1531 5.25 11.3222 5.25 11.5C5.25 12.1904 4.69036 12.75 4 12.75C3.30964 12.75 2.75 12.1904 2.75 11.5C2.75 10.8634 3.22584 10.338 3.84123 10.26L5.38944 7.5316C3.95909 6.30274 3.55857 4.19264 4.53586 2.49994C5.64043 0.586765 8.08679 -0.0687357 9.99996 1.03583C11.836 2.09584 12.5137 4.39156 11.5892 6.26591L10.4949 4.33754C10.4418 3.53274 10.0009 2.76843 9.24996 2.33487C8.05423 1.64452 6.52525 2.0542 5.8349 3.24994ZM9.146 4.99996C9.21289 4.84686 9.25 4.67776 9.25 4.5C9.25 3.80964 8.69036 3.25 8 3.25C7.30964 3.25 6.75 3.80964 6.75 4.5C6.75 5.13659 7.22586 5.66203 7.84127 5.74002L9.72266 9.05556L10.0956 9.71274L10.75 9.33493C11.9457 8.64458 13.4747 9.05427 14.165 10.25C14.8554 11.4457 14.4457 12.9747 13.25 13.6651C12.5047 14.0953 11.63 14.0983 10.9096 13.75H8.69252C9.85895 15.4685 12.1727 16.0191 14 14.9641C15.9131 13.8595 16.5686 11.4132 15.4641 9.5C14.4886 7.81038 12.4665 7.10169 10.6895 7.71998L9.146 4.99996ZM13.25 11.5C13.25 12.1904 12.6904 12.75 12 12.75C11.591 12.75 11.228 12.5536 10.9999 12.25H7.9298C7.57875 14.1006 5.95279 15.5 4 15.5C1.79086 15.5 0 13.7091 0 11.5C0 9.40018 1.61801 7.67826 3.67529 7.51299L2.58098 9.44147C1.92792 9.89251 1.5 10.6463 1.5 11.5C1.5 12.8807 2.61929 14 4 14C5.38071 14 6.5 12.8807 6.5 11.5V10.75H7.25H10.9999C11.228 10.4464 11.591 10.25 12 10.25C12.6904 10.25 13.25 10.8096 13.25 11.5Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const SleepIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.25 1.25V2.03971C5.87928 2.18571 4.62678 2.72736 3.6089 3.54824L3.03033 2.96967L2.5 2.43934L1.43934 3.5L1.96967 4.03033L2.54824 4.6089C1.57979 5.80976 1 7.33717 1 9C1 12.866 4.13401 16 8 16C11.866 16 15 12.866 15 9C15 7.33717 14.4202 5.80976 13.4518 4.6089L14.0303 4.03033L14.5607 3.5L13.5 2.43934L12.9697 2.96967L12.3911 3.54824C11.3732 2.72736 10.1207 2.18571 8.75 2.03971V1.25H9.25H10V-0.25H9.25H8.75H7.25H6.75H6V1.25H6.75H7.25ZM2.5 9C2.5 5.96243 4.96243 3.5 8 3.5C11.0376 3.5 13.5 5.96243 13.5 9C13.5 12.0376 11.0376 14.5 8 14.5C4.96243 14.5 2.5 12.0376 2.5 9ZM8.75 6.75V6H7.25V6.75V9V9.75H8.75V9V6.75Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const StepForwardIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+export { WorkflowIcon, WebhookIcon, SleepIcon, StepForwardIcon };

package/src/components/new-trace-viewer/search.ts

@@ -0,0 +1,178 @@
+import type { Span } from './types';
+
+const ATTR_FILTER_REGEX = /(?:^|\s)(?<pair>(?<key>[\w.]+):(?<value>\S*))/g;
+
+export interface SpanAttributeFilter {
+  key: string;
+  value: string;
+}
+
+export interface ParsedSpanSearchQuery {
+  text: string;
+  attributes: SpanAttributeFilter[];
+}
+
+export interface SpanSearchResult {
+  isActive: boolean;
+  matchedSpanIds: Set<string>;
+  matchingSpans: Span[];
+  query: ParsedSpanSearchQuery;
+}
+
+export function parseSpanSearchQuery(rawQuery: string): ParsedSpanSearchQuery {
+  const attributes: SpanAttributeFilter[] = [];
+  for (const match of rawQuery.matchAll(ATTR_FILTER_REGEX)) {
+    const key = match.groups?.key?.trim();
+    if (!key) continue;
+    attributes.push({
+      key,
+      value: (match.groups?.value ?? '').toLocaleLowerCase(),
+    });
+  }
+
+  const text = rawQuery
+    .replace(ATTR_FILTER_REGEX, ' ')
+    .replace(/\s{2,}/g, ' ')
+    .trim()
+    .toLocaleLowerCase();
+
+  return { text, attributes };
+}
+
+export function isSpanDimmedBySearch(
+  spanId: string,
+  result: SpanSearchResult
+): boolean {
+  return result.isActive && !result.matchedSpanIds.has(spanId);
+}
+
+export function searchSpans(spans: Span[], rawQuery: string): SpanSearchResult {
+  const query = parseSpanSearchQuery(rawQuery);
+  const isActive = Boolean(query.text || query.attributes.length);
+  const matchingSpans = isActive
+    ? spans.filter((span) => spanMatchesQuery(span, query))
+    : spans;
+
+  return {
+    isActive,
+    matchedSpanIds: new Set(matchingSpans.map((span) => span.spanId)),
+    matchingSpans,
+    query,
+  };
+}
+
+function spanMatchesQuery(span: Span, query: ParsedSpanSearchQuery): boolean {
+  if (query.text && !spanMatchesText(span, query.text)) {
+    return false;
+  }
+
+  return query.attributes.every(({ key, value }) =>
+    spanMatchesAttribute(span, key, value)
+  );
+}
+
+function spanMatchesText(span: Span, text: string): boolean {
+  return [
+    span.name,
+    span.spanId,
+    span.resource,
+    span.library.name,
+    span.library.version,
+  ]
+    .filter((value): value is string => typeof value === 'string')
+    .some((value) => value.toLocaleLowerCase().includes(text));
+}
+
+function spanMatchesAttribute(
+  span: Span,
+  key: string,
+  expectedValue: string
+): boolean {
+  const candidates = getSearchValues(span, key);
+  if (!candidates.length) return false;
+
+  if (!expectedValue) {
+    return candidates.some((value) => value != null);
+  }
+
+  return candidates.some((value) =>
+    valueToSearchString(value).toLocaleLowerCase().includes(expectedValue)
+  );
+}
+
+function getSearchValues(span: Span, key: string): unknown[] {
+  const candidates: unknown[] = [];
+  const normalizedKey = key.toLocaleLowerCase();
+
+  switch (normalizedKey) {
+    case 'id':
+    case 'spanid':
+    case 'span.id':
+      candidates.push(span.spanId);
+      break;
+    case 'name':
+      candidates.push(span.name);
+      break;
+    case 'resource':
+      candidates.push(span.resource);
+      break;
+    case 'library':
+    case 'library.name':
+      candidates.push(span.library.name);
+      break;
+    case 'library.version':
+      candidates.push(span.library.version);
+      break;
+    case 'status':
+    case 'status.code':
+      candidates.push(span.status.code);
+      break;
+  }
+
+  candidates.push(getOwnProperty(span.attributes, key));
+  candidates.push(getPathValue(span.attributes, key));
+
+  if (!normalizedKey.startsWith('data.')) {
+    candidates.push(getPathValue(span.attributes.data, key));
+  }
+
+  return candidates.filter((value) => value !== undefined);
+}
+
+function getOwnProperty(source: unknown, key: string): unknown {
+  if (!source || typeof source !== 'object') return undefined;
+  if (!Object.hasOwn(source, key)) return undefined;
+  return (source as Record<string, unknown>)[key];
+}
+
+function getPathValue(source: unknown, path: string): unknown {
+  if (!source || typeof source !== 'object') return undefined;
+
+  let current: unknown = source;
+  for (const segment of path.split('.')) {
+    if (!segment) return undefined;
+    current = getOwnProperty(current, segment);
+    if (current === undefined) return undefined;
+  }
+
+  return current;
+}
+
+function valueToSearchString(value: unknown): string {
+  if (value instanceof Date) return value.toISOString();
+  if (typeof value === 'string') return value;
+  if (
+    value == null ||
+    typeof value === 'number' ||
+    typeof value === 'boolean' ||
+    typeof value === 'bigint'
+  ) {
+    return String(value);
+  }
+
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}