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

package/src/components/index.ts

@@ -13,18 +13,24 @@ export {
   ResolveHookModal,
   useHookActions,
 } from './hook-actions';
+export { TraceViewerSkeleton } from './new-trace-viewer/components/trace-viewer-skeleton';
 export { RunTraceView } from './run-trace-view';
 export { ConversationView } from './sidebar/conversation-view';
-export {
-  SidebarDataProvider,
-  type SidebarDataContextValue,
-} from './sidebar/sidebar-data-context';
 export type {
   SelectedSpanInfo,
   SpanSelectionInfo,
 } from './sidebar/entity-detail-panel';
+export {
+  type SidebarDataContextValue,
+  SidebarDataProvider,
+} from './sidebar/sidebar-data-context';
+export type {
+  DetailResource,
+  FetchSpanDetail,
+} from './sidebar/use-selected-span-detail';
 export { type StreamChunk, StreamViewer } from './stream-viewer';
 export type { Span, SpanEvent } from './trace-viewer/types';
+export { NewTraceViewer } from './trace-viewer-new';
 export {
   DataInspector,
   type DataInspectorProps,
@@ -32,8 +38,9 @@ export {
   type DecryptClickContextValue,
 } from './ui/data-inspector';
 export { DecryptButton } from './ui/decrypt-button';
+export { IconButton } from './ui/icon-button';
+export { Kbd } from './ui/kbd';
 export { LoadMoreButton } from './ui/load-more-button';
 export { MenuDropdown, type MenuDropdownOption } from './ui/menu-dropdown';
 export { Spinner } from './ui/spinner';
 export { WorkflowTraceViewer } from './workflow-trace-view';
-export { NewTraceViewer } from './trace-viewer-new';

package/src/components/new-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/new-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();
+  });
+});

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

@@ -0,0 +1,76 @@
+/**
+ * Width model for the span detail panel: the stored value is the user's
+ * preferred width (absolute px, persisted to localStorage on explicit
+ * interaction only), while the container-relative maximum is applied at
+ * render time — so a width preferred on a wide screen survives a narrower
+ * session and restores when the viewer grows again.
+ */
+
+/** Floor for the detail panel — matches the previous `clamp(280px, …)` floor. */
+export const PANEL_MIN_WIDTH = 280;
+
+/**
+ * Absolute ceiling enforced at the storage layer so a corrupt or stale stored
+ * value can never wedge the layout open.
+ */
+export const PANEL_HARD_MAX_WIDTH = 1300;
+
+/** Default width — matches the previous fixed 360px column. */
+export const PANEL_DEFAULT_WIDTH = 360;
+
+/**
+ * Width the main (event list + timeline) area keeps while the panel is
+ * resized or the container shrinks. Below `PANEL_MIN_WIDTH + MAIN_MIN_WIDTH`
+ * of container the panel gives way first, compressing below its own floor —
+ * the list and timeline stay usable at the panel's expense.
+ */
+export const MAIN_MIN_WIDTH = 400;
+
+export const PANEL_WIDTH_STORAGE_KEY = 'workflow-trace-detail-panel-width';
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function computeMaxPanelWidth(availableWidth: number): number {
+  if (availableWidth <= 0) return PANEL_HARD_MAX_WIDTH;
+  return Math.min(
+    Math.max(availableWidth - MAIN_MIN_WIDTH, 0),
+    PANEL_HARD_MAX_WIDTH
+  );
+}
+
+/**
+ * Note: when the container is too small to honor both floors
+ * (`availableWidth < PANEL_MIN_WIDTH + MAIN_MIN_WIDTH`), the max wins and the
+ * panel compresses below `PANEL_MIN_WIDTH`.
+ */
+export function clampPanelWidth(width: number, availableWidth: number): number {
+  return clamp(width, PANEL_MIN_WIDTH, computeMaxPanelWidth(availableWidth));
+}
+
+export function readStoredPanelWidth(): number {
+  if (typeof window === 'undefined') return PANEL_DEFAULT_WIDTH;
+  try {
+    const raw = window.localStorage.getItem(PANEL_WIDTH_STORAGE_KEY);
+    const value = raw ? Number(raw) : Number.NaN;
+    if (!Number.isFinite(value)) return PANEL_DEFAULT_WIDTH;
+    // Only enforce absolute bounds at the storage layer; the container-relative
+    // max is applied at render time (see module docs).
+    return clamp(value, PANEL_MIN_WIDTH, PANEL_HARD_MAX_WIDTH);
+  } catch {
+    return PANEL_DEFAULT_WIDTH;
+  }
+}
+
+export function writeStoredPanelWidth(width: number): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(
+      PANEL_WIDTH_STORAGE_KEY,
+      String(Math.round(width))
+    );
+  } catch {
+    // Best-effort (private mode, quota).
+  }
+}

package/src/components/new-trace-viewer/components/detail-panel.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
+import { ChevronDown, ChevronUp, X } from 'lucide-react';
+import {
+  type ReactNode,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { filterSpanRawEvents } from '../../../lib/trace-builder';
+import { ErrorBoundary } from '../../error-boundary';
+import {
+  EntityDetailPanel,
+  type SelectedSpanInfo,
+} from '../../sidebar/entity-detail-panel';
+import { useSidebarData } from '../../sidebar/sidebar-data-context';
+import { IconButton } from '../../ui/icon-button';
+import { Kbd } from '../../ui/kbd';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
+import { useActiveSpan } from '../context';
+import {
+  clampPanelWidth,
+  computeMaxPanelWidth,
+  PANEL_DEFAULT_WIDTH,
+  PANEL_MIN_WIDTH,
+  readStoredPanelWidth,
+  writeStoredPanelWidth,
+} from './detail-panel-width';
+import { DraggableBorder } from './draggable-border';
+import { useElementWidth } from './use-element-width';
+
+const DETAIL_PANEL_ID = 'trace-detail-panel';
+
+/** Bridge ActiveSpanContext + SidebarDataContext → SelectedSpanInfo. */
+function useSelectedSpanInfo(): SelectedSpanInfo | null {
+  const { activeSpan } = useActiveSpan();
+  const sidebar = useSidebarData();
+
+  return useMemo(() => {
+    if (!activeSpan) return null;
+
+    const resource = activeSpan.attributes?.resource as string | undefined;
+    const rawEvents = filterSpanRawEvents(
+      sidebar.events,
+      resource,
+      activeSpan.spanId
+    );
+
+    return {
+      data: activeSpan.attributes?.data,
+      resource,
+      spanId: activeSpan.spanId,
+      rawEvents,
+    };
+  }, [activeSpan, sidebar]);
+}
+
+/**
+ * The span detail aside: content, prev/next/close header, J/K navigation, and
+ * the resizable left border with its width model (see detail-panel-width.ts).
+ *
+ * Always mounted — it renders null without a selection — so the panel width
+ * survives closing and reopening within a session.
+ */
+export function TraceDetailPanel({
+  containerRef,
+  onNavigateToSpan,
+  onClose,
+}: {
+  containerRef: RefObject<HTMLDivElement | null>;
+  onNavigateToSpan: (spanId: string) => void;
+  onClose: () => void;
+}): ReactNode {
+  const { activeSpan, activeSpanId, spans } = useActiveSpan();
+  const sidebar = useSidebarData();
+  const selectedSpan = useSelectedSpanInfo();
+  const isOpen = Boolean(activeSpan);
+
+  const [storedWidth, setStoredWidth] = useState<number>(() =>
+    readStoredPanelWidth()
+  );
+  const containerWidth = useElementWidth(containerRef, isOpen);
+  const asideRef = useRef<HTMLDivElement | null>(null);
+
+  const handleResize = useCallback(
+    (next: number) => {
+      const clamped = clampPanelWidth(next, containerWidth);
+      setStoredWidth(clamped);
+      writeStoredPanelWidth(clamped);
+    },
+    [containerWidth]
+  );
+
+  const panelWidth = clampPanelWidth(storedWidth, containerWidth);
+  const panelMaxWidth = Math.max(
+    PANEL_MIN_WIDTH,
+    computeMaxPanelWidth(containerWidth)
+  );
+
+  const { prevSpanId, nextSpanId } = useMemo(() => {
+    if (!activeSpanId) return { prevSpanId: null, nextSpanId: null };
+    const i = spans.findIndex((s) => s.spanId === activeSpanId);
+    if (i === -1) return { prevSpanId: null, nextSpanId: null };
+    return {
+      prevSpanId: spans[i - 1]?.spanId ?? null,
+      nextSpanId: spans[i + 1]?.spanId ?? null,
+    };
+  }, [activeSpanId, spans]);
+
+  const handleSelectPrev = useCallback(() => {
+    if (prevSpanId) onNavigateToSpan(prevSpanId);
+  }, [prevSpanId, onNavigateToSpan]);
+
+  const handleSelectNext = useCallback(() => {
+    if (nextSpanId) onNavigateToSpan(nextSpanId);
+  }, [nextSpanId, onNavigateToSpan]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (
+        e.key !== 'j' &&
+        e.key !== 'k' &&
+        e.key !== 'ArrowDown' &&
+        e.key !== 'ArrowUp'
+      ) {
+        return;
+      }
+      const target = e.target as HTMLElement | null;
+      if (
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target?.isContentEditable
+      ) {
+        return;
+      }
+      const targetId =
+        e.key === 'k' || e.key === 'ArrowUp' ? prevSpanId : nextSpanId;
+      if (targetId) {
+        e.preventDefault();
+        onNavigateToSpan(targetId);
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [isOpen, prevSpanId, nextSpanId, onNavigateToSpan]);
+
+  // Derive the selected span name for the panel header
+  const selectedSpanName = useMemo(() => {
+    if (!selectedSpan?.data) return 'Details';
+    const data = selectedSpan.data as Record<string, unknown>;
+    if (selectedSpan.resource === 'hook') {
+      return (data.token as string | undefined) ?? (data.hookId as string);
+    }
+
+    const stepName = data.stepName as string | undefined;
+    const workflowName = data.workflowName as string | undefined;
+    return (
+      (stepName ? parseStepName(stepName)?.shortName : undefined) ??
+      (workflowName ? parseWorkflowName(workflowName)?.shortName : undefined) ??
+      stepName ??
+      workflowName ??
+      (data.hookId as string) ??
+      'Details'
+    );
+  }, [selectedSpan?.data, selectedSpan?.resource]);
+
+  if (!activeSpan) return null;
+
+  return (
+    <aside
+      ref={asideRef}
+      id={DETAIL_PANEL_ID}
+      className="relative flex flex-col h-full max-h-full shrink-0 bg-background-100 border-l border-gray-alpha-400"
+      style={{ width: panelWidth }}
+    >
+      <DraggableBorder
+        element={asideRef}
+        position="left"
+        onWidthChange={handleResize}
+        onReset={() => handleResize(PANEL_DEFAULT_WIDTH)}
+        aria-label="Resize span details panel"
+        aria-controls={DETAIL_PANEL_ID}
+        aria-valuemin={PANEL_MIN_WIDTH}
+        aria-valuemax={panelMaxWidth}
+        aria-valuenow={Math.min(
+          Math.max(Math.round(panelWidth), PANEL_MIN_WIDTH),
+          panelMaxWidth
+        )}
+      />
+      {/* Panel header */}
+      <div className="flex items-center justify-between gap-2 shrink-0 px-4 py-[7.5px]">
+        <span className="text-label-14 font-medium text-gray-1000 truncate block">
+          {selectedSpanName}
+        </span>
+        <div className="flex items-center gap-0.5 shrink-0">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <IconButton
+                aria-label="Navigate up"
+                aria-keyshortcuts="K"
+                onClick={handleSelectPrev}
+                disabled={!prevSpanId}
+              >
+                <ChevronUp className="w-4 h-4" />
+              </IconButton>
+            </TooltipTrigger>
+            {prevSpanId ? (
+              <TooltipContent>
+                Navigate up
+                <Kbd>K</Kbd>
+              </TooltipContent>
+            ) : null}
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <IconButton
+                aria-label="Navigate down"
+                aria-keyshortcuts="J"
+                onClick={handleSelectNext}
+                disabled={!nextSpanId}
+              >
+                <ChevronDown className="w-4 h-4" />
+              </IconButton>
+            </TooltipTrigger>
+            {nextSpanId ? (
+              <TooltipContent>
+                Navigate down
+                <Kbd>J</Kbd>
+              </TooltipContent>
+            ) : null}
+          </Tooltip>
+          <div aria-hidden className="w-px h-4 bg-gray-alpha-400 mx-1" />
+          <IconButton
+            aria-label="Close span details"
+            aria-keyshortcuts="Escape"
+            onClick={onClose}
+          >
+            <X className="w-4 h-4" />
+          </IconButton>
+        </div>
+      </div>
+      {/* Panel body */}
+      <div className="flex-1 overflow-y-auto">
+        <ErrorBoundary>
+          <EntityDetailPanel
+            run={sidebar.run}
+            onStreamClick={sidebar.onStreamClick}
+            onRunClick={sidebar.onRunClick}
+            fetchSpanDetail={sidebar.fetchSpanDetail}
+            onWakeUpSleep={sidebar.onWakeUpSleep}
+            onLoadEventData={sidebar.onLoadEventData}
+            onResolveHook={sidebar.onResolveHook}
+            encryptionKey={sidebar.encryptionKey}
+            onDecrypt={sidebar.onDecrypt}
+            isDecrypting={sidebar.isDecrypting}
+            selectedSpan={selectedSpan}
+            showSeparateEventOccurrenceTimestamps={
+              sidebar.showSeparateEventOccurrenceTimestamps
+            }
+            getModuleSourceUrl={sidebar.getModuleSourceUrl}
+          />
+        </ErrorBoundary>
+      </div>
+    </aside>
+  );
+}