@workflow/web-shared 4.1.0-beta.47 → 4.1.0-beta.49

package/src/components/sidebar/events-list.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { useMemo } from 'react';
+import { ErrorCard } from '../ui/error-card';
+import type { SpanEvent } from '../trace-viewer/types.js';
+import { AttributeBlock, localMillisecondTime } from './attribute-panel';
+import { DetailCard } from './detail-card';
+
+export function EventsList({
+  events,
+  fullEvents,
+  isLoading = false,
+  error,
+}: {
+  events: SpanEvent[];
+  fullEvents?: SpanEvent[] | null;
+  isLoading?: boolean;
+  error?: Error | null;
+}) {
+  const displayData = useMemo(
+    () => (fullEvents?.length ? fullEvents : events) || [],
+    [events, fullEvents]
+  );
+
+  return (
+    <div className="mt-2" style={{ color: 'var(--ds-gray-1000)' }}>
+      <h3
+        className="text-heading-16 font-medium mt-4 mb-2"
+        style={{ color: 'var(--ds-gray-1000)' }}
+      >
+        Events {!isLoading && `(${displayData.length})`}
+      </h3>
+      {error ? (
+        <ErrorCard
+          title="Failed to load full event list"
+          details={error?.message}
+          className="my-4"
+        />
+      ) : null}
+      {isLoading ? <div>Loading events...</div> : null}
+      {!isLoading && !error && displayData.length === 0 && (
+        <div className="text-sm">No events found</div>
+      )}
+      {displayData.length > 0 && !error ? (
+        <div className="flex flex-col gap-2">
+          {displayData.map((event, index) => (
+            <DetailCard
+              key={`${event.name}-${index}`}
+              summary={
+                <>
+                  <span
+                    className="font-medium"
+                    style={{ color: 'var(--ds-gray-1000)' }}
+                  >
+                    {event.name}
+                  </span>{' '}
+                  -{' '}
+                  <span style={{ color: 'var(--ds-gray-700)' }}>
+                    {localMillisecondTime(
+                      event.timestamp[0] * 1000 + event.timestamp[1] / 1e6
+                    )}
+                  </span>
+                </>
+              }
+            >
+              {/* Bordered container with separator */}
+              <div
+                className="flex flex-col divide-y rounded-md border overflow-hidden"
+                style={{
+                  borderColor: 'var(--ds-gray-300)',
+                  backgroundColor: 'var(--ds-gray-100)',
+                }}
+              >
+                {Object.entries(event.attributes)
+                  .filter(([key]) => key !== 'eventData')
+                  .map(([key, value]) => (
+                    <div
+                      key={key}
+                      className="flex items-center justify-between px-2.5 py-1.5"
+                      style={{ borderColor: 'var(--ds-gray-300)' }}
+                    >
+                      <span
+                        className="text-[11px] font-medium"
+                        style={{ color: 'var(--ds-gray-700)' }}
+                      >
+                        {key}
+                      </span>
+                      <span
+                        className="text-[11px] font-mono"
+                        style={{ color: 'var(--ds-gray-1000)' }}
+                      >
+                        {String(value)}
+                      </span>
+                    </div>
+                  ))}
+              </div>
+              {error ? (
+                <ErrorCard
+                  title="Failed to load event data"
+                  details={String(error)}
+                  className="my-4"
+                />
+              ) : null}
+              {!error && !isLoading && event.attributes.eventData != null && (
+                <div className="mt-2">
+                  <AttributeBlock
+                    isLoading={isLoading}
+                    attribute="eventData"
+                    value={event.attributes.eventData}
+                  />
+                </div>
+              )}
+            </DetailCard>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/sidebar/resolve-hook-modal.tsx

@@ -0,0 +1,219 @@
+'use client';
+
+import clsx from 'clsx';
+import { Send, X } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface ResolveHookModalProps {
+  /** Whether the modal is open */
+  isOpen: boolean;
+  /** Callback when the modal should be closed */
+  onClose: () => void;
+  /** Callback when the form is submitted with the parsed JSON payload */
+  onSubmit: (payload: unknown) => Promise<void>;
+  /** Whether the submission is in progress */
+  isSubmitting?: boolean;
+}
+
+/**
+ * Modal component for resolving a hook by entering a JSON payload.
+ */
+export function ResolveHookModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  isSubmitting = false,
+}: ResolveHookModalProps): React.JSX.Element | null {
+  const [jsonInput, setJsonInput] = useState('');
+  const [parseError, setParseError] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Focus the textarea when the modal opens
+  useEffect(() => {
+    if (isOpen && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [isOpen]);
+
+  // Reset state when modal closes
+  useEffect(() => {
+    if (!isOpen) {
+      setJsonInput('');
+      setParseError(null);
+    }
+  }, [isOpen]);
+
+  // Handle escape key to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen && !isSubmitting) {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, isSubmitting, onClose]);
+
+  const submitPayload = useCallback(async () => {
+    setParseError(null);
+
+    // Parse the JSON input
+    let payload: unknown;
+    try {
+      // Allow empty string as null payload
+      if (jsonInput.trim() === '') {
+        payload = null;
+      } else {
+        payload = JSON.parse(jsonInput);
+      }
+    } catch {
+      setParseError('Invalid JSON. Please check your input.');
+      return;
+    }
+
+    await onSubmit(payload);
+  }, [jsonInput, onSubmit]);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      void submitPayload();
+    },
+    [submitPayload]
+  );
+
+  // Handle Cmd/Ctrl + Enter to submit
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && !isSubmitting) {
+        e.preventDefault();
+        handleSubmit(e as unknown as React.FormEvent);
+      }
+    },
+    [handleSubmit, isSubmitting]
+  );
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="resolve-hook-modal-title"
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={isSubmitting ? undefined : onClose}
+      />
+
+      {/* Modal content */}
+      <div
+        className={clsx(
+          'relative z-10 w-full max-w-lg mx-4',
+          'bg-background text-foreground rounded-lg shadow-xl',
+          'border border-border'
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+          <h2
+            id="resolve-hook-modal-title"
+            className="text-lg font-semibold text-foreground"
+          >
+            Resolve Hook
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isSubmitting}
+            className={clsx(
+              'p-1 rounded-md transition-colors',
+              'text-muted-foreground hover:text-foreground',
+              'hover:bg-muted',
+              'disabled:opacity-50 disabled:cursor-not-allowed'
+            )}
+            aria-label="Close modal"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <form onSubmit={handleSubmit}>
+          <div className="px-4 py-4">
+            <label
+              htmlFor="json-payload"
+              className="block text-sm font-medium text-foreground mb-2"
+            >
+              JSON Payload
+            </label>
+            <p className="text-xs text-muted-foreground mb-3">
+              Enter a JSON value to send to the hook. Leave empty to send{' '}
+              <code className="px-1 py-0.5 bg-muted rounded text-xs">null</code>
+              .
+            </p>
+            <textarea
+              ref={textareaRef}
+              id="json-payload"
+              value={jsonInput}
+              onChange={(e) => {
+                setJsonInput(e.target.value);
+                setParseError(null);
+              }}
+              onKeyDown={handleKeyDown}
+              disabled={isSubmitting}
+              placeholder='{"key": "value"}'
+              className={clsx(
+                'w-full h-40 px-3 py-2 font-mono text-sm',
+                'text-foreground',
+                'bg-background',
+                'border rounded-md',
+                'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+                'placeholder:text-muted-foreground',
+                parseError ? 'border-destructive' : 'border-input'
+              )}
+            />
+            {parseError && (
+              <p className="mt-2 text-sm text-destructive">{parseError}</p>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-border">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={isSubmitting}
+              className={clsx(
+                'px-4 py-2 text-sm font-medium rounded-md transition-colors',
+                'bg-secondary text-secondary-foreground',
+                'hover:bg-secondary/80',
+                'disabled:opacity-50 disabled:cursor-not-allowed'
+              )}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={() => void submitPayload()}
+              disabled={isSubmitting}
+              className={clsx(
+                'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md transition-colors',
+                'bg-primary text-primary-foreground hover:bg-primary/90',
+                'disabled:opacity-50 disabled:cursor-not-allowed'
+              )}
+            >
+              <Send className="h-4 w-4" />
+              {isSubmitting ? 'Sending...' : 'Send Payload'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/components/stream-viewer.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface StreamViewerProps {
+  streamId: string;
+  chunks: Chunk[];
+  isLive: boolean;
+  error?: string | null;
+}
+
+interface Chunk {
+  id: number;
+  text: string;
+}
+
+/**
+ * StreamViewer component that displays real-time stream data.
+ * It connects to a stream and displays chunks as they arrive,
+ * with auto-scroll functionality.
+ */
+export function StreamViewer({
+  streamId,
+  chunks,
+  isLive,
+  error,
+}: StreamViewerProps) {
+  // TODO: Handle 410 error specifically (stream expired)
+  const [hasMoreBelow, setHasMoreBelow] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const checkScrollPosition = useCallback(() => {
+    if (scrollRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+      const isAtBottom = scrollHeight - scrollTop - clientHeight < 10;
+      setHasMoreBelow(!isAtBottom && scrollHeight > clientHeight);
+    }
+  }, []);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: chunks.length triggers scroll on new chunks
+  useEffect(() => {
+    // Auto-scroll to bottom when new content arrives
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+    // Check scroll position after content changes
+    checkScrollPosition();
+  }, [chunks.length, checkScrollPosition]);
+
+  return (
+    <div className="flex flex-col h-full pb-4">
+      <div className="flex items-center justify-between mb-3 px-1">
+        <code
+          className="text-xs font-mono truncate max-w-[80%]"
+          style={{ color: 'var(--ds-gray-900)' }}
+          title={streamId}
+        >
+          {streamId}
+        </code>
+        <span
+          className="text-xs flex items-center gap-1.5"
+          style={{
+            color: isLive ? 'var(--ds-green-700)' : 'var(--ds-gray-600)',
+          }}
+        >
+          <span
+            className="inline-block w-2 h-2 rounded-full"
+            style={{
+              backgroundColor: isLive
+                ? 'var(--ds-green-600)'
+                : 'var(--ds-gray-500)',
+            }}
+          />
+          {isLive ? 'Live' : 'Closed'}
+        </span>
+      </div>
+
+      <div className="relative flex-1 min-h-[200px]">
+        <div
+          ref={scrollRef}
+          onScroll={checkScrollPosition}
+          className="absolute inset-0 overflow-auto flex flex-col gap-2"
+        >
+          {error ? (
+            <div
+              className="text-[11px] rounded-md border p-3"
+              style={{
+                borderColor: 'var(--ds-red-300)',
+                backgroundColor: 'var(--ds-red-100)',
+                color: 'var(--ds-red-700)',
+              }}
+            >
+              <div>Error reading stream:</div>
+              <div>{error}</div>
+            </div>
+          ) : chunks.length === 0 ? (
+            <div
+              className="text-[11px] rounded-md border p-3"
+              style={{
+                borderColor: 'var(--ds-gray-300)',
+                backgroundColor: 'var(--ds-gray-100)',
+                color: 'var(--ds-gray-600)',
+              }}
+            >
+              {isLive ? 'Waiting for stream data...' : 'Stream is empty'}
+            </div>
+          ) : (
+            chunks.map((chunk, index) => (
+              <pre
+                key={`${streamId}-chunk-${chunk.id}`}
+                className="text-[11px] rounded-md border p-3 m-0 whitespace-pre-wrap break-words"
+                style={{
+                  borderColor: 'var(--ds-gray-300)',
+                  backgroundColor: 'var(--ds-gray-100)',
+                  color: 'var(--ds-gray-1000)',
+                }}
+              >
+                <code>
+                  <span
+                    className="select-none mr-2"
+                    style={{ color: 'var(--ds-gray-500)' }}
+                  >
+                    [{index}]
+                  </span>
+                  {chunk.text}
+                </code>
+              </pre>
+            ))
+          )}
+        </div>
+        {hasMoreBelow && (
+          <div
+            className="absolute bottom-0 left-0 right-0 h-8 pointer-events-none"
+            style={{
+              background:
+                'linear-gradient(to top, var(--ds-background-100), transparent)',
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/trace-viewer/components/map.tsx

@@ -0,0 +1,226 @@
+import {
+  type MutableRefObject,
+  memo,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useTraceViewer } from '../context';
+import styles from '../trace-viewer.module.css';
+import type { VisibleSpan } from '../types';
+import { MAP_HEIGHT, TIMELINE_PADDING } from '../util/constants';
+import { useImmediateStyle } from '../util/use-immediate-style';
+
+const getDpi = (): number => {
+  if ('devicePixelRatio' in globalThis) {
+    return globalThis.devicePixelRatio || 1;
+  }
+  return 1;
+};
+
+const useDpi = (): number => {
+  const [dpi, setDpi] = useState(1);
+  useLayoutEffect(() => {
+    const onChange = (): void => setDpi(getDpi());
+    const media = matchMedia(`(resolution: ${dpi}dppx)`);
+    media.addEventListener('change', onChange);
+    onChange();
+
+    return () => {
+      media.removeEventListener('change', onChange);
+    };
+  }, [dpi]);
+  return dpi;
+};
+
+const padding = TIMELINE_PADDING;
+
+export const MiniMap = memo(function MiniMap({
+  timelineRef,
+  rows,
+  scale,
+}: {
+  timelineRef: MutableRefObject<HTMLDivElement | null>;
+  rows: VisibleSpan[][];
+  scale: number;
+}) {
+  const {
+    state: { root, baseScale, timelineWidth, width: fullWidth, scrollbarWidth },
+  } = useTraceViewer();
+  const mapWidth = fullWidth + TIMELINE_PADDING * 2;
+  const dpi = useDpi();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const thumbRatio =
+    (fullWidth / (fullWidth - scrollbarWidth)) *
+    Math.min(fullWidth / timelineWidth, baseScale / scale);
+  const thumbWidth = Math.min(
+    fullWidth,
+    (timelineWidth - scrollbarWidth) * thumbRatio
+  );
+  useEffect(() => {
+    let isHeld = false;
+    let clientX = 0;
+    let rect: DOMRect | undefined;
+
+    const isValidEventTarget = (target: EventTarget | null): boolean => {
+      return Boolean(containerRef.current?.contains(target as HTMLElement));
+    };
+
+    let nextFrame = 0;
+    const onFrame = (): void => {
+      if (!isHeld || !rect) return;
+      const $timeline = timelineRef.current;
+      if (!$timeline) return;
+
+      const x = clientX - thumbWidth * 0.5 - rect.left;
+      $timeline.scrollLeft = x / thumbRatio;
+    };
+
+    const onPointerMove = (event: PointerEvent): void => {
+      ({ clientX } = event);
+      cancelAnimationFrame(nextFrame);
+      nextFrame = requestAnimationFrame(onFrame);
+    };
+
+    const onPointerDown = (event: PointerEvent): void => {
+      if (!isValidEventTarget(event.target)) return;
+      isHeld = true;
+      rect = containerRef.current?.getBoundingClientRect();
+      onPointerMove(event);
+    };
+
+    const onPointerUp = (): void => {
+      isHeld = false;
+      rect = undefined;
+    };
+
+    const onTouchStart = (event: TouchEvent): void => {
+      if (!isValidEventTarget(event.target)) return;
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    };
+    const onTouchMove = (event: TouchEvent): void => {
+      if (!isHeld) return;
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    };
+
+    window.addEventListener('pointerdown', onPointerDown);
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', onPointerUp);
+    window.addEventListener('blur', onPointerUp);
+    window.addEventListener('touchstart', onTouchStart, { passive: false });
+    window.addEventListener('touchmove', onTouchMove, { passive: false });
+
+    return () => {
+      window.removeEventListener('pointerdown', onPointerDown);
+      window.removeEventListener('pointermove', onPointerMove);
+      window.removeEventListener('pointerup', onPointerUp);
+      window.removeEventListener('blur', onPointerUp);
+      window.removeEventListener('touchstart', onTouchStart);
+      window.removeEventListener('touchmove', onTouchMove);
+      cancelAnimationFrame(nextFrame);
+    };
+  }, [timelineRef, thumbRatio, thumbWidth]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx) return;
+
+    const render = (): void => {
+      ctx.resetTransform();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.scale(dpi, dpi);
+
+      const gap = 1;
+      const height = 3;
+      const ratio = (mapWidth - padding * 2) / root.duration;
+
+      // TODO: fill spans based on depth
+      ctx.fillStyle = '#ccc';
+      ctx.beginPath();
+      for (const row of rows) {
+        for (const span of row) {
+          const y = padding - gap + (gap + height) * span.row;
+          if (y >= MAP_HEIGHT - height - padding) break;
+
+          const x = padding + (span.startTime - root.startTime) * ratio;
+          const width = span.duration * ratio;
+
+          ctx.roundRect(x, y, width, height, height);
+        }
+      }
+      ctx.fill();
+    };
+
+    const nextFrame = requestAnimationFrame(render);
+
+    return () => cancelAnimationFrame(nextFrame);
+  }, [dpi, root, mapWidth, rows]);
+
+  const thumbRef = useRef<HTMLDivElement>(null);
+  const { style: thumbStyle, setStyle: setThumbStyle } =
+    useImmediateStyle(thumbRef);
+  useLayoutEffect(() => {
+    const $timeline = timelineRef.current;
+    if (!$timeline) return;
+
+    let nextFrame = 0;
+    const onFrame = (): void => {
+      setThumbStyle(
+        'transform',
+        `translateX(${padding + $timeline.scrollLeft * thumbRatio}px)`
+      );
+    };
+    onFrame();
+
+    const onScroll = (): void => {
+      cancelAnimationFrame(nextFrame);
+      nextFrame = requestAnimationFrame(onFrame);
+    };
+    $timeline.addEventListener('scroll', onScroll);
+
+    return () => {
+      cancelAnimationFrame(nextFrame);
+      $timeline.removeEventListener('scroll', onScroll);
+    };
+  }, [timelineRef, thumbRatio, setThumbStyle]);
+
+  return (
+    <div
+      className={styles.mapContainer}
+      ref={containerRef}
+      style={{
+        width: thumbWidth > 0 ? mapWidth : '100%',
+        height: MAP_HEIGHT,
+      }}
+    >
+      <canvas
+        className={styles.mapCanvas}
+        height={MAP_HEIGHT * dpi}
+        ref={canvasRef}
+        style={{ width: mapWidth, height: MAP_HEIGHT }}
+        width={mapWidth * dpi}
+      />
+      <div
+        className={styles.mapThumb}
+        ref={thumbRef}
+        style={{
+          transform: thumbStyle.transform,
+          width:
+            thumbWidth > 0
+              ? thumbWidth
+              : `calc(100% - ${TIMELINE_PADDING * 2}px)`,
+          top: 2,
+          height: MAP_HEIGHT - 4,
+        }}
+      />
+    </div>
+  );
+});