@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.40

package/src/components/sidebar/span-detail-merge.ts

@@ -0,0 +1,134 @@
+const hasField = (
+  value: object,
+  key: string
+): value is Record<string, unknown> => key in value;
+
+const RESOURCES_WITH_FETCHED_DETAIL = new Set(['run', 'step', 'sleep']);
+
+export function resourceNeedsFetchedDetail(
+  resource: string | undefined
+): boolean {
+  return resource !== undefined && RESOURCES_WITH_FETCHED_DETAIL.has(resource);
+}
+
+export type SpanDetailStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+export interface SpanDetailView {
+  status: SpanDetailStatus;
+  displayData: Record<string, unknown>;
+  detail: unknown;
+  error: Error | undefined;
+}
+
+export function deriveSpanDetailView(args: {
+  resource: string | undefined;
+  resourceId: string | undefined;
+  inlineData: unknown;
+  fetchedDetail: unknown;
+  fetchedError: Error | null;
+}): SpanDetailView {
+  const { resource, resourceId, inlineData, fetchedDetail, fetchedError } =
+    args;
+
+  const matchedDetail = spanDetailMatchesSelection(
+    fetchedDetail,
+    resource,
+    resourceId
+  )
+    ? fetchedDetail
+    : null;
+  const displayData = mergeSpanDetail(inlineData, matchedDetail) as Record<
+    string,
+    unknown
+  >;
+
+  if (!resource || !resourceId) {
+    return { status: 'idle', displayData, detail: null, error: undefined };
+  }
+  if (fetchedError) {
+    return {
+      status: 'error',
+      displayData,
+      detail: matchedDetail,
+      error: fetchedError,
+    };
+  }
+  if (!resourceNeedsFetchedDetail(resource)) {
+    return {
+      status: 'ready',
+      displayData,
+      detail: matchedDetail,
+      error: undefined,
+    };
+  }
+  if (matchedDetail !== null) {
+    return {
+      status: 'ready',
+      displayData,
+      detail: matchedDetail,
+      error: undefined,
+    };
+  }
+  return { status: 'loading', displayData, detail: null, error: undefined };
+}
+
+/**
+ * Returns true when the fetched `detail` belongs to the current selection.
+ * The fetch lags selection, so it can briefly hold a previously selected span
+ * (even a different resource type); reject it before merging or its fields
+ * union into the wrong panel. Steps/hooks/waits carry their parent `runId`, so
+ * a `run` selection excludes objects identifiable as a child resource.
+ */
+export function spanDetailMatchesSelection(
+  detail: unknown,
+  resource: string | undefined,
+  resourceId: string | undefined
+): boolean {
+  if (!detail || typeof detail !== 'object' || !resource || !resourceId) {
+    return false;
+  }
+  switch (resource) {
+    case 'step':
+      return hasField(detail, 'stepId') && detail.stepId === resourceId;
+    case 'hook':
+      return hasField(detail, 'hookId') && detail.hookId === resourceId;
+    case 'sleep':
+      return hasField(detail, 'waitId') && detail.waitId === resourceId;
+    case 'run':
+      return (
+        hasField(detail, 'runId') &&
+        !('stepId' in detail) &&
+        !('hookId' in detail) &&
+        !('waitId' in detail) &&
+        detail.runId === resourceId
+      );
+    default:
+      return false;
+  }
+}
+
+/**
+ * Merges fetched `detail` over the span's own data. The detail supplies the
+ * heavy fields the trace strips (input/output/error/metadata, sleep resumeAt);
+ * the span's identity, status, and event-derived timestamps stay authoritative
+ * so they don't flicker to the backend row's millisecond-different values.
+ */
+export function mergeSpanDetail(spanData: unknown, detail: unknown): unknown {
+  if (!detail || typeof detail !== 'object') {
+    return spanData;
+  }
+  if (!spanData || typeof spanData !== 'object') {
+    return detail;
+  }
+  // Skip `undefined` span fields so they don't clobber a value the detail
+  // legitimately provides (e.g. a step's optional startedAt).
+  const merged: Record<string, unknown> = { ...detail };
+  for (const [key, value] of Object.entries(
+    spanData as Record<string, unknown>
+  )) {
+    if (value !== undefined) {
+      merged[key] = value;
+    }
+  }
+  return merged;
+}

package/src/components/sidebar/use-selected-span-detail.ts

@@ -0,0 +1,146 @@
+'use client';
+
+import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type {
+  SelectedSpanInfo,
+  SpanSelectionInfo,
+} from './entity-detail-panel';
+import {
+  deriveSpanDetailView,
+  resourceNeedsFetchedDetail,
+  type SpanDetailStatus,
+} from './span-detail-merge';
+
+export type DetailResource = WorkflowRun | Step | Hook | Event;
+
+export type FetchSpanDetail = (
+  selection: SpanSelectionInfo
+) => Promise<DetailResource>;
+
+function deriveSpanSelection(
+  selectedSpan: SelectedSpanInfo | null
+): SpanSelectionInfo | null {
+  if (!selectedSpan) return null;
+  const { resource, data } = selectedSpan;
+
+  if (
+    resource === 'step' &&
+    data &&
+    typeof data === 'object' &&
+    'stepId' in data
+  ) {
+    const step = data as Step;
+    return { resource: 'step', resourceId: step.stepId, runId: step.runId };
+  }
+  if (
+    resource === 'run' &&
+    data &&
+    typeof data === 'object' &&
+    'runId' in data
+  ) {
+    return { resource: 'run', resourceId: (data as WorkflowRun).runId };
+  }
+  if (
+    resource === 'hook' &&
+    data &&
+    typeof data === 'object' &&
+    'hookId' in data
+  ) {
+    return { resource: 'hook', resourceId: (data as Hook).hookId };
+  }
+  if (resource === 'sleep') {
+    if (!selectedSpan.spanId) return null;
+    const waitData = data as { runId?: string } | undefined;
+    return {
+      resource: 'sleep',
+      resourceId: selectedSpan.spanId,
+      runId: waitData?.runId,
+    };
+  }
+  return null;
+}
+
+export interface SelectedSpanDetailResult {
+  status: SpanDetailStatus;
+  resource: SpanSelectionInfo['resource'] | undefined;
+  resourceId: string | undefined;
+  runId: string | undefined;
+  displayData: Record<string, unknown>;
+  detail: DetailResource | null;
+  error: Error | undefined;
+}
+
+export function useSelectedSpanDetail(
+  selectedSpan: SelectedSpanInfo | null,
+  fetchSpanDetail: FetchSpanDetail
+): SelectedSpanDetailResult {
+  const selection = useMemo(
+    () => deriveSpanSelection(selectedSpan),
+    [selectedSpan]
+  );
+  const resource = selection?.resource;
+  const resourceId = selection?.resourceId;
+  const runId = selection?.runId;
+  const selectionKey =
+    resource && resourceId ? `${resource}:${resourceId}` : null;
+  const needsFetch = resourceNeedsFetchedDetail(resource);
+
+  const [fetched, setFetched] = useState<{
+    detail: DetailResource | null;
+    error: Error | null;
+    errorKey: string | null;
+  }>({ detail: null, error: null, errorKey: null });
+
+  const tokenRef = useRef(0);
+  const selectionRef = useRef(selection);
+  selectionRef.current = selection;
+
+  useEffect(() => {
+    if (!selectionKey || !needsFetch) {
+      return;
+    }
+    const activeSelection = selectionRef.current;
+    if (!activeSelection) {
+      return;
+    }
+    const token = ++tokenRef.current;
+    fetchSpanDetail(activeSelection)
+      .then((detail) => {
+        if (tokenRef.current !== token) return;
+        setFetched({ detail, error: null, errorKey: null });
+      })
+      .catch((err: unknown) => {
+        if (tokenRef.current !== token) return;
+        setFetched({
+          detail: null,
+          error: err instanceof Error ? err : new Error(String(err)),
+          errorKey: selectionKey,
+        });
+      });
+  }, [selectionKey, runId, needsFetch, fetchSpanDetail]);
+
+  const scopedError = fetched.errorKey === selectionKey ? fetched.error : null;
+
+  const view = useMemo(
+    () =>
+      deriveSpanDetailView({
+        resource,
+        resourceId,
+        inlineData: selectedSpan?.data,
+        fetchedDetail: fetched.detail,
+        fetchedError: scopedError,
+      }),
+    [resource, resourceId, selectedSpan?.data, fetched.detail, scopedError]
+  );
+
+  return {
+    status: view.status,
+    resource,
+    resourceId,
+    runId,
+    displayData: view.displayData,
+    detail: view.detail as DetailResource | null,
+    error: view.error,
+  };
+}

package/src/components/stream-viewer-skeleton.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from './ui/skeleton';
+
+const STREAM_SKELETON_ROWS = [
+  { id: 'stream-skeleton-row-1', width: '72%' },
+  { id: 'stream-skeleton-row-2', width: '58%' },
+  { id: 'stream-skeleton-row-3', width: '80%' },
+  { id: 'stream-skeleton-row-4', width: '64%' },
+];
+
+export function StreamViewerSkeleton() {
+  return (
+    <output
+      aria-busy="true"
+      aria-label="Loading stream"
+      className="flex h-full min-h-0 w-full flex-col overflow-hidden bg-background-100"
+    >
+      <span className="sr-only">Loading stream…</span>
+      <div className="flex h-10 min-h-10 items-center border-b border-gray-alpha-400 px-3">
+        <Skeleton className="h-3 w-10" />
+      </div>
+      <div className="flex flex-col">
+        {STREAM_SKELETON_ROWS.map((row) => (
+          <div
+            key={row.id}
+            className="flex h-10 items-center gap-2 border-b border-gray-alpha-400 px-3"
+          >
+            <Skeleton className="h-3" style={{ width: row.width }} />
+            <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
+          </div>
+        ))}
+      </div>
+    </output>
+  );
+}

package/src/components/stream-viewer.tsx

@@ -2,8 +2,10 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
+import { serializeForClipboard } from './sidebar/copyable-data-block';
+import { StreamViewerSkeleton } from './stream-viewer-skeleton';
+import { CopyButton } from './trace-viewer/components/copy-button';
 import { DataInspector } from './ui/data-inspector';
-import { Skeleton } from './ui/skeleton';
 
 // ──────────────────────────────────────────────────────────────────────────
 // Types
@@ -23,7 +25,7 @@ interface StreamViewerProps {
   error?: string | null;
   /** True while the initial stream connection is being established */
   isLoading?: boolean;
-  /** Called when the user scrolls near the bottom, for triggering pagination */
+  /** Called when the user scrolls near the rendered end. */
   onScrollEnd?: () => void;
 }
 
@@ -31,60 +33,27 @@ interface StreamViewerProps {
 // Chunk row — memoized to prevent remounts during polling
 // ──────────────────────────────────────────────────────────────────────────
 
-const ChunkRow = React.memo(function ChunkRow({
-  chunk,
-  index,
-}: {
-  chunk: Chunk;
-  index: number;
-}) {
+const ChunkRow = React.memo(function ChunkRow({ chunk }: { chunk: Chunk }) {
   return (
-    <div
-      className="text-[11px] rounded-md border p-3"
-      style={{
-        borderColor: 'var(--ds-gray-300)',
-        backgroundColor: 'var(--ds-gray-100)',
-      }}
-    >
-      <div className="flex items-start gap-2">
-        <span
-          className="select-none pt-px"
-          style={{ color: 'var(--ds-gray-500)' }}
-        >
-          [{index}]
-        </span>
-        <div className="min-w-0 flex-1">
-          {typeof chunk.value === 'string' ? (
-            <span
-              className="whitespace-pre-wrap break-words"
-              style={{ color: 'var(--ds-gray-1000)' }}
-            >
-              {chunk.value}
-            </span>
-          ) : (
-            <DataInspector data={chunk.value} expandLevel={1} />
-          )}
-        </div>
+    <div className="flex w-full items-start gap-1 border-b border-gray-alpha-400 px-3 py-2">
+      <div className="min-w-0 flex-1">
+        {typeof chunk.value === 'string' ? (
+          <span className="whitespace-pre-wrap break-words text-label-12 font-mono text-gray-1000">
+            {chunk.value}
+          </span>
+        ) : (
+          <DataInspector data={chunk.value} expandLevel={1} />
+        )}
       </div>
+      <CopyButton
+        copyText={serializeForClipboard(chunk.value)}
+        ariaLabel="Copy chunk"
+        className="shrink-0 -mr-1 [&>div]:h-4 [&>div]:w-4 [&_svg]:h-4 [&_svg]:w-4"
+      />
     </div>
   );
 });
 
-// ──────────────────────────────────────────────────────────────────────────
-// Skeleton loading
-// ──────────────────────────────────────────────────────────────────────────
-
-function StreamSkeleton() {
-  return (
-    <div className="flex flex-col gap-3 animate-in fade-in">
-      <Skeleton style={{ width: 120, height: 16, borderRadius: 4 }} />
-      {[1, 2, 3, 4].map((i) => (
-        <Skeleton key={i} style={{ height: 56, borderRadius: 6 }} />
-      ))}
-    </div>
-  );
-}
-
 // ──────────────────────────────────────────────────────────────────────────
 // Main component
 // ──────────────────────────────────────────────────────────────────────────
@@ -105,7 +74,6 @@ export function StreamViewer({
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const prevChunkCountRef = useRef(0);
 
-  // Auto-scroll to bottom when new chunks arrive (live streaming)
   useEffect(() => {
     if (chunks.length > prevChunkCountRef.current && chunks.length > 0) {
       virtuosoRef.current?.scrollToIndex({
@@ -116,71 +84,31 @@ export function StreamViewer({
     prevChunkCountRef.current = chunks.length;
   }, [chunks.length]);
 
-  // Show skeleton when loading and no chunks have arrived yet
   if (isLoading && chunks.length === 0) {
-    return (
-      <div className="flex flex-col h-full">
-        <StreamSkeleton />
-      </div>
-    );
+    return <StreamViewerSkeleton />;
   }
 
   return (
-    <div className="flex flex-col h-full">
-      {/* Live indicator */}
-      {isLive && (
-        <div className="flex items-center gap-1.5 mb-2 px-1">
-          <span
-            className="inline-block w-2 h-2 rounded-full"
-            style={{ backgroundColor: 'var(--ds-green-600)' }}
-          />
-          <span className="text-xs" style={{ color: 'var(--ds-green-700)' }}>
-            Live
-          </span>
-        </div>
-      )}
-
-      {/* Header */}
-      {chunks.length > 0 && (
-        <div className="flex items-center gap-2 mb-2 px-1">
-          <span
-            className="text-[13px] font-medium"
-            style={{ color: 'var(--ds-gray-900)' }}
-          >
-            Stream Chunks
-          </span>
-          <span
-            className="text-xs tabular-nums"
-            style={{ color: 'var(--ds-gray-600)' }}
-          >
-            ({chunks.length})
-          </span>
-        </div>
-      )}
+    <div className="flex h-full w-full flex-col overflow-hidden bg-background-100">
+      {/* Status header */}
+      <div className="flex h-10 min-h-10 items-center gap-1.5 border-b border-gray-alpha-400 px-3">
+        {isLive && (
+          <>
+            <span className="inline-block h-2 w-2 rounded-full bg-green-600" />
+            <span className="text-label-12 text-green-700">Live</span>
+          </>
+        )}
+      </div>
 
       {/* Content */}
       <div className="flex-1 min-h-0">
         {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 className="border-b border-red-400 bg-red-100 px-3 py-2 text-label-12 text-red-900">
             <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)',
-            }}
-          >
+          <div className="flex h-10 items-center border-b border-gray-alpha-400 bg-background-200 px-3 text-label-12 text-gray-900">
             {isLive ? 'Waiting for stream data...' : 'Stream is empty'}
           </div>
         ) : (
@@ -190,8 +118,8 @@ export function StreamViewer({
             overscan={10}
             endReached={() => onScrollEnd?.()}
             itemContent={(index) => (
-              <div style={{ paddingBottom: 8 }}>
-                <ChunkRow chunk={chunks[index]} index={index} />
+              <div className="w-full">
+                <ChunkRow chunk={chunks[index]} />
               </div>
             )}
             style={{ flex: 1, minHeight: 0 }}

package/src/components/{new-trace-viewer → trace-viewer}/components/copy-button.tsx

@@ -2,7 +2,7 @@
 
 import { Check, Copy } from 'lucide-react';
 import { type JSX, useEffect, useRef, useState } from 'react';
-import { cn } from '../../../lib/utils';
+import { cn } from '../../../lib/cn';
 
 interface CopyButtonProps {
   copyText: string;
@@ -31,7 +31,7 @@ export function CopyButton({
       type="button"
       aria-label={ariaLabel}
       className={cn(
-        'cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-none p-1 m-0',
+        'cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-0 p-1 m-0',
         className
       )}
       onClick={(e) => {

package/src/components/trace-viewer/components/detail-panel-width.test.ts

@@ -0,0 +1,123 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  clampPanelWidth,
+  computeMaxPanelWidth,
+  MAIN_MIN_WIDTH,
+  PANEL_DEFAULT_WIDTH,
+  PANEL_HARD_MAX_WIDTH,
+  PANEL_MIN_WIDTH,
+  PANEL_WIDTH_STORAGE_KEY,
+  readStoredPanelWidth,
+  writeStoredPanelWidth,
+} from './detail-panel-width';
+
+function stubLocalStorage(overrides: Partial<Storage> = {}) {
+  const storage = {
+    getItem: vi.fn().mockReturnValue(null),
+    setItem: vi.fn(),
+    ...overrides,
+  };
+  vi.stubGlobal('window', { localStorage: storage });
+  return storage;
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('computeMaxPanelWidth', () => {
+  it('falls back to the hard max when the container is unmeasured', () => {
+    expect(computeMaxPanelWidth(0)).toBe(PANEL_HARD_MAX_WIDTH);
+    expect(computeMaxPanelWidth(-5)).toBe(PANEL_HARD_MAX_WIDTH);
+  });
+
+  it('reserves the main-area minimum', () => {
+    expect(computeMaxPanelWidth(1000)).toBe(1000 - MAIN_MIN_WIDTH);
+  });
+
+  it('caps at the hard max on very wide containers', () => {
+    expect(computeMaxPanelWidth(5000)).toBe(PANEL_HARD_MAX_WIDTH);
+  });
+
+  it('bottoms out at 0 when the container is smaller than the main minimum', () => {
+    expect(computeMaxPanelWidth(MAIN_MIN_WIDTH - 50)).toBe(0);
+  });
+});
+
+describe('clampPanelWidth', () => {
+  it('passes through widths within bounds', () => {
+    expect(clampPanelWidth(360, 1000)).toBe(360);
+  });
+
+  it('clamps to the panel minimum', () => {
+    expect(clampPanelWidth(100, 1000)).toBe(PANEL_MIN_WIDTH);
+  });
+
+  it('clamps to the container-relative maximum', () => {
+    expect(clampPanelWidth(900, 1000)).toBe(1000 - MAIN_MIN_WIDTH);
+  });
+
+  it('lets the max win below the crossover so the panel gives way, not the main area', () => {
+    // Container too small for both floors: panel compresses below its own min.
+    const available = PANEL_MIN_WIDTH + MAIN_MIN_WIDTH - 100;
+    expect(clampPanelWidth(360, available)).toBe(available - MAIN_MIN_WIDTH);
+  });
+});
+
+describe('readStoredPanelWidth', () => {
+  it('returns the default when window is unavailable (SSR)', () => {
+    expect(readStoredPanelWidth()).toBe(PANEL_DEFAULT_WIDTH);
+  });
+
+  it('returns the stored value when valid', () => {
+    stubLocalStorage({ getItem: vi.fn().mockReturnValue('512') });
+    expect(readStoredPanelWidth()).toBe(512);
+  });
+
+  it('returns the default for missing or unparseable values', () => {
+    stubLocalStorage({ getItem: vi.fn().mockReturnValue(null) });
+    expect(readStoredPanelWidth()).toBe(PANEL_DEFAULT_WIDTH);
+    stubLocalStorage({ getItem: vi.fn().mockReturnValue('not-a-number') });
+    expect(readStoredPanelWidth()).toBe(PANEL_DEFAULT_WIDTH);
+  });
+
+  it('clamps stored values to absolute bounds only', () => {
+    stubLocalStorage({ getItem: vi.fn().mockReturnValue('-20') });
+    expect(readStoredPanelWidth()).toBe(PANEL_MIN_WIDTH);
+    stubLocalStorage({ getItem: vi.fn().mockReturnValue('99999') });
+    expect(readStoredPanelWidth()).toBe(PANEL_HARD_MAX_WIDTH);
+  });
+
+  it('returns the default when storage access throws', () => {
+    stubLocalStorage({
+      getItem: vi.fn().mockImplementation(() => {
+        throw new Error('denied');
+      }),
+    });
+    expect(readStoredPanelWidth()).toBe(PANEL_DEFAULT_WIDTH);
+  });
+});
+
+describe('writeStoredPanelWidth', () => {
+  it('is a no-op when window is unavailable (SSR)', () => {
+    expect(() => writeStoredPanelWidth(400)).not.toThrow();
+  });
+
+  it('rounds and writes the value', () => {
+    const storage = stubLocalStorage();
+    writeStoredPanelWidth(412.6);
+    expect(storage.setItem).toHaveBeenCalledWith(
+      PANEL_WIDTH_STORAGE_KEY,
+      '413'
+    );
+  });
+
+  it('swallows storage errors (private mode, quota)', () => {
+    stubLocalStorage({
+      setItem: vi.fn().mockImplementation(() => {
+        throw new Error('quota');
+      }),
+    });
+    expect(() => writeStoredPanelWidth(400)).not.toThrow();
+  });
+});