@workflow/web-shared 5.0.0-beta.6 → 5.0.0-beta.8

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

@@ -1,7 +1,15 @@
 'use client';
 
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
-import { RotateCcw, Search, X, ZoomIn, ZoomOut } from 'lucide-react';
+import {
+  ChevronDown,
+  ChevronUp,
+  RotateCcw,
+  Search,
+  X,
+  ZoomIn,
+  ZoomOut,
+} from 'lucide-react';
 import {
   type ReactNode,
   useCallback,
@@ -10,6 +18,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useReducedMotion } from '../../hooks/use-reduced-motion';
 import { ErrorBoundary } from '../error-boundary';
 import {
   EntityDetailPanel,
@@ -18,7 +27,6 @@ import {
 import { useSidebarDataOptional } from '../sidebar/sidebar-data-context';
 import type { Trace } from '../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
-import { CopyButton } from './components/copy-button';
 import EventList from './components/event-list';
 import { SplitPane } from './components/split-pane';
 import {
@@ -51,6 +59,7 @@ function useAnimatedViewport(initial: Viewport) {
   } | null>(null);
   const currentRef = useRef(initial);
   currentRef.current = viewport;
+  const reducedMotion = useReducedMotion();
 
   const cancel = useCallback(() => {
     if (animRef.current) {
@@ -62,6 +71,13 @@ function useAnimatedViewport(initial: Viewport) {
   const animateTo = useCallback(
     (target: Viewport) => {
       cancel();
+
+      if (reducedMotion) {
+        currentRef.current = target;
+        setViewportState(target);
+        return;
+      }
+
       const from = currentRef.current;
       const anim = { raf: 0, from, to: target, start: performance.now() };
 
@@ -79,7 +95,7 @@ function useAnimatedViewport(initial: Viewport) {
       animRef.current = anim;
       anim.raf = requestAnimationFrame(tick);
     },
-    [cancel]
+    [cancel, reducedMotion]
   );
 
   const setViewport = useCallback(
@@ -298,13 +314,31 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
   const [altHeld, setAltHeld] = useState(false);
 
   useEffect(() => {
+    const handleSidebarNavKey = (e: KeyboardEvent): void => {
+      const target = e.target as HTMLElement | null;
+      if (
+        target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target?.isContentEditable
+      ) {
+        return;
+      }
+      const targetId =
+        e.key === 'k' ? prevSpanIdRef.current : nextSpanIdRef.current;
+      if (targetId) {
+        e.preventDefault();
+        handleSelectSpanRef.current(targetId);
+      }
+    };
+
     const onKeyDown = (e: KeyboardEvent): void => {
       if (e.key === 'Escape') {
         clearActiveSpan();
-      }
-      if (e.key === 'Alt') {
+      } else if (e.key === 'Alt') {
         e.preventDefault();
         setAltHeld(true);
+      } else if (e.key === 'j' || e.key === 'k') {
+        handleSidebarNavKey(e);
       }
     };
     const onKeyUp = (e: KeyboardEvent): void => {
@@ -459,21 +493,30 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     );
   }, [selectedSpan?.data, selectedSpan?.resource]);
 
-  const selectedResource = selectedSpan?.resource as string | undefined;
-  const selectedResourceId = useMemo(() => {
-    if (!selectedSpan?.data) return undefined;
-    const data = selectedSpan.data as Record<string, unknown>;
-    if (selectedSpan.resource === 'hook') {
-      return (data.hookId as string | undefined) ?? selectedSpan.spanId;
-    }
+  const { prevSpanId, nextSpanId } = useMemo(() => {
+    if (!activeSpanId) return { prevSpanId: null, nextSpanId: null };
+    const i = filteredSpans.findIndex((s) => s.spanId === activeSpanId);
+    if (i === -1) return { prevSpanId: null, nextSpanId: null };
+    return {
+      prevSpanId: filteredSpans[i - 1]?.spanId ?? null,
+      nextSpanId: filteredSpans[i + 1]?.spanId ?? null,
+    };
+  }, [activeSpanId, filteredSpans]);
 
-    return (
-      (data.stepId as string) ??
-      (data.runId as string) ??
-      (data.hookId as string) ??
-      selectedSpan.spanId
-    );
-  }, [selectedSpan?.data, selectedSpan?.resource, selectedSpan?.spanId]);
+  const handleSelectPrevSpan = useCallback(() => {
+    if (prevSpanId) handleSelectSpan(prevSpanId);
+  }, [prevSpanId, handleSelectSpan]);
+
+  const handleSelectNextSpan = useCallback(() => {
+    if (nextSpanId) handleSelectSpan(nextSpanId);
+  }, [nextSpanId, handleSelectSpan]);
+
+  const prevSpanIdRef = useRef(prevSpanId);
+  const nextSpanIdRef = useRef(nextSpanId);
+  const handleSelectSpanRef = useRef(handleSelectSpan);
+  prevSpanIdRef.current = prevSpanId;
+  nextSpanIdRef.current = nextSpanId;
+  handleSelectSpanRef.current = handleSelectSpan;
 
   return (
     <div
@@ -487,7 +530,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
       >
         <SplitPane
           startHeader={
-            <div className="bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5">
+            <div className="bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center pl-4 pr-2 gap-1.5">
               <Search className="w-3.5 h-3.5 shrink-0 text-gray-800" />
               <input
                 id="trace-viewer-search"
@@ -502,6 +545,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
               {searchQuery && (
                 <button
                   type="button"
+                  aria-label="Clear search"
                   onClick={() => setSearchQuery('')}
                   className="shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors"
                 >
@@ -572,47 +616,37 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
       {activeSpan && sidebar ? (
         <aside className="flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto">
           {/* Panel header */}
-          <div className="flex-shrink-0 px-4 pt-4 pb-3">
-            <div className="flex items-start justify-between gap-2">
-              <div className="min-w-0 flex-1">
-                <span className="text-[15px] font-semibold text-gray-1000 truncate block">
-                  {selectedSpanName}
-                </span>
-                {selectedResourceId && (
-                  <div className="mt-1 flex items-center gap-2">
-                    {selectedResource && (
-                      <span
-                        className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none shrink-0 ${
-                          selectedResource === 'step'
-                            ? 'bg-green-200 text-green-900'
-                            : selectedResource === 'run'
-                              ? 'bg-blue-200 text-blue-900'
-                              : selectedResource === 'hook'
-                                ? 'bg-yellow-200 text-yellow-900'
-                                : 'bg-gray-200 text-gray-900'
-                        }`}
-                      >
-                        {selectedResource.charAt(0).toUpperCase() +
-                          selectedResource.slice(1)}
-                      </span>
-                    )}
-                    <div
-                      className="flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0"
-                      title={selectedResourceId}
-                    >
-                      <span className="truncate">{selectedResourceId}</span>
-                      <CopyButton
-                        copyText={selectedResourceId}
-                        ariaLabel="Copy ID"
-                        className="shrink-0"
-                      />
-                    </div>
-                  </div>
-                )}
-              </div>
+          <div className="flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3">
+            <span className="text-label-14 font-medium text-gray-1000 truncate block">
+              {selectedSpanName}
+            </span>
+            <div className="flex items-center gap-0.5 shrink-0">
+              <button
+                type="button"
+                aria-label="Navigate to previous span"
+                aria-keyshortcuts="K"
+                onClick={handleSelectPrevSpan}
+                disabled={!prevSpanId}
+                className="p-1 rounded text-gray-1000 transition-colors enabled:hover:bg-gray-alpha-100 disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                <ChevronUp className="w-4 h-4" />
+              </button>
+              <button
+                type="button"
+                aria-label="Navigate to next span"
+                aria-keyshortcuts="J"
+                onClick={handleSelectNextSpan}
+                disabled={!nextSpanId}
+                className="p-1 rounded text-gray-1000 transition-colors enabled:hover:bg-gray-alpha-100 disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                <ChevronDown className="w-4 h-4" />
+              </button>
+              <div aria-hidden className="w-px h-4 bg-gray-alpha-400 mx-1" />
               <button
                 type="button"
-                className="p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0"
+                aria-label="Close span details"
+                aria-keyshortcuts="Escape"
+                className="p-1 rounded text-gray-1000 hover:bg-gray-alpha-100 transition-colors"
                 onClick={clearActiveSpan}
               >
                 <X className="w-4 h-4" />

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

@@ -130,18 +130,50 @@ export function computeSpanGaps(
 
 export const RESOURCE_COLORS: Record<
   string,
-  { bar: string; errorBar?: string }
+  {
+    bg: string;
+    border: string;
+    errorBg?: string;
+    errorBorder?: string;
+  }
 > = {
-  run: { bar: 'var(--ds-blue-700)', errorBar: 'var(--ds-red-700)' },
-  step: { bar: 'var(--ds-green-700)', errorBar: 'var(--ds-red-700)' },
-  hook: { bar: 'var(--ds-amber-700)', errorBar: 'var(--ds-red-700)' },
-  sleep: { bar: 'var(--ds-purple-700)', errorBar: 'var(--ds-red-700)' },
-  default: { bar: 'var(--ds-gray-500)', errorBar: 'var(--ds-red-700)' },
+  run: {
+    bg: 'var(--ds-blue-200)',
+    border: 'var(--ds-blue-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  step: {
+    bg: 'var(--ds-green-200)',
+    border: 'var(--ds-green-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  hook: {
+    bg: 'var(--ds-amber-200)',
+    border: 'var(--ds-amber-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  sleep: {
+    bg: 'var(--ds-purple-200)',
+    border: 'var(--ds-purple-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  default: {
+    bg: 'var(--ds-gray-200)',
+    border: 'var(--ds-gray-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
 };
 
 export function getResourceColor(resource: string): {
-  bar: string;
-  errorBar?: string;
+  bg: string;
+  border: string;
+  errorBg?: string;
+  errorBorder?: string;
 } {
   return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
 }