@workflow/web-shared 5.0.0-beta.7 → 5.0.0-beta.9

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

@@ -1,10 +1,19 @@
 '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,
+  useDeferredValue,
   useEffect,
   useMemo,
   useRef,
@@ -19,16 +28,17 @@ 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 { IconButton } from '../ui/icon-button';
 import EventList from './components/event-list';
 import { SplitPane } from './components/split-pane';
 import {
+  TIMELINE_PADDING_PX,
   Timeline,
   TimelineHeader,
-  TIMELINE_PADDING_PX,
 } from './components/timeline';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { DetailPanel } from './detail-panel';
+import { searchSpans } from './search';
 import { computeRootBounds, computeTimeMarkers } from './utils';
 
 interface NewTraceViewerProps {
@@ -135,7 +145,7 @@ function useSelectedSpanInfo(): SelectedSpanInfo | null {
       spanId: activeSpan.spanId,
       rawEvents,
     };
-  }, [activeSpan, sidebar?.events]);
+  }, [activeSpan, sidebar]);
 }
 
 // ---------------------------------------------------------------------------
@@ -158,15 +168,12 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
   const selectedSpan = useSelectedSpanInfo();
 
   const [searchQuery, setSearchQuery] = useState('');
+  const deferredSearchQuery = useDeferredValue(searchQuery);
 
-  const filteredSpans = useMemo(() => {
-    const q = searchQuery.trim().toLowerCase();
-    if (!q) return trace.spans;
-    return trace.spans.filter(
-      (s) =>
-        s.name.toLowerCase().includes(q) || s.resource.toLowerCase().includes(q)
-    );
-  }, [trace.spans, searchQuery]);
+  const searchResult = useMemo(
+    () => searchSpans(trace.spans, deferredSearchQuery),
+    [trace.spans, deferredSearchQuery]
+  );
 
   const root = useMemo(() => computeRootBounds(trace.spans), [trace.spans]);
 
@@ -197,7 +204,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     });
 
     prevRootRef.current = { start: newStart, end: newEnd };
-  }, [root.startTime, root.duration]);
+  }, [root.startTime, root.duration, setViewport]);
 
   const viewDuration = viewport.end - viewport.start;
 
@@ -307,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 => {
@@ -395,7 +420,8 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
           )
         );
-        const scaleFactor = Math.pow(2, dy / 200);
+        const isMouseWheel = e.deltaMode === 1 || Math.abs(e.deltaY) >= 50;
+        const scaleFactor = Math.pow(2, dy / (isMouseWheel ? 200 : 60));
 
         setViewport((prev) => {
           const prevDuration = prev.end - prev.start;
@@ -446,7 +472,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
     el.addEventListener('wheel', onWheel, { passive: false });
     return () => el.removeEventListener('wheel', onWheel);
-  }, [root.startTime, root.duration]);
+  }, [root.startTime, root.duration, setViewport]);
 
   // Derive the selected span name and metadata for the panel header
   const selectedSpanName = useMemo(() => {
@@ -468,21 +494,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 = trace.spans.findIndex((s) => s.spanId === activeSpanId);
+    if (i === -1) return { prevSpanId: null, nextSpanId: null };
+    return {
+      prevSpanId: trace.spans[i - 1]?.spanId ?? null,
+      nextSpanId: trace.spans[i + 1]?.spanId ?? null,
+    };
+  }, [activeSpanId, trace.spans]);
 
-    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
@@ -496,7 +531,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"
@@ -504,6 +539,13 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
                 type="text"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Escape' && searchQuery) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setSearchQuery('');
+                  }
+                }}
                 placeholder="Search spans..."
                 aria-label="Search spans"
                 className="flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none"
@@ -511,10 +553,13 @@ 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"
+                  className="-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex"
                 >
-                  <X className="w-3 h-3" />
+                  <kbd className="inline-flex h-5 min-h-5 min-w-5 items-center justify-center rounded border border-gray-alpha-400 bg-background-100 px-1 font-sans text-[13px] font-medium leading-[1.7em] text-gray-900">
+                    Esc
+                  </kbd>
                 </button>
               )}
             </div>
@@ -525,11 +570,13 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
         >
           <div className="block overflow-visible">
             <EventList
-              spans={filteredSpans}
+              spans={trace.spans}
               activeSpanId={activeSpanId}
+              searchResult={searchResult}
               onSelectSpan={handleSelectSpan}
             />
           </div>
+          {/* biome-ignore lint/a11y/noStaticElementInteractions: timeline hover and wheel gestures are pointer-only annotations */}
           <div
             ref={timelineRef}
             className="block min-h-0 overflow-visible relative"
@@ -538,42 +585,43 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             onMouseLeave={handleTimelineMouseLeave}
           >
             <Timeline
-              spans={filteredSpans}
+              spans={trace.spans}
               viewStart={viewport.start}
               viewEnd={viewport.end}
               markers={timeMarkers}
               selectedId={activeSpanId}
+              searchResult={searchResult}
               onSelect={handleSelectSpan}
               hoverFraction={hoverFraction}
               altHeld={altHeld}
             />
           </div>
         </SplitPane>
-        <div className="absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400">
-          <button
-            type="button"
-            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+        <div className="absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400">
+          <IconButton
+            variant="muted"
+            size="small"
             onClick={zoomOut}
             aria-label="Zoom out"
           >
             <ZoomOut className="w-4 h-4" />
-          </button>
-          <button
-            type="button"
-            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+          </IconButton>
+          <IconButton
+            variant="muted"
+            size="small"
             onClick={resetZoom}
             aria-label="Reset zoom"
           >
             <RotateCcw className="w-3.5 h-3.5" />
-          </button>
-          <button
-            type="button"
-            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+          </IconButton>
+          <IconButton
+            variant="muted"
+            size="small"
             onClick={zoomIn}
             aria-label="Zoom in"
           >
             <ZoomIn className="w-4 h-4" />
-          </button>
+          </IconButton>
         </div>
       </div>
 
@@ -581,49 +629,35 @@ 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'
-                              : '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>
-              <button
-                type="button"
-                className="p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0"
+          <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">
+              <IconButton
+                aria-label="Navigate to previous span"
+                aria-keyshortcuts="K"
+                onClick={handleSelectPrevSpan}
+                disabled={!prevSpanId}
+              >
+                <ChevronUp className="w-4 h-4" />
+              </IconButton>
+              <IconButton
+                aria-label="Navigate to next span"
+                aria-keyshortcuts="J"
+                onClick={handleSelectNextSpan}
+                disabled={!nextSpanId}
+              >
+                <ChevronDown className="w-4 h-4" />
+              </IconButton>
+              <div aria-hidden className="w-px h-4 bg-gray-alpha-400 mx-1" />
+              <IconButton
+                aria-label="Close span details"
+                aria-keyshortcuts="Escape"
                 onClick={clearActiveSpan}
               >
                 <X className="w-4 h-4" />
-              </button>
+              </IconButton>
             </div>
           </div>
           {/* Panel body */}