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

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

@@ -13,6 +13,7 @@ import {
 import {
   type ReactNode,
   useCallback,
+  useDeferredValue,
   useEffect,
   useMemo,
   useRef,
@@ -27,15 +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 { 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 {
@@ -142,7 +145,7 @@ function useSelectedSpanInfo(): SelectedSpanInfo | null {
       spanId: activeSpan.spanId,
       rawEvents,
     };
-  }, [activeSpan, sidebar?.events]);
+  }, [activeSpan, sidebar]);
 }
 
 // ---------------------------------------------------------------------------
@@ -165,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]);
 
@@ -204,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;
 
@@ -420,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;
@@ -471,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(() => {
@@ -495,13 +496,13 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   const { prevSpanId, nextSpanId } = useMemo(() => {
     if (!activeSpanId) return { prevSpanId: null, nextSpanId: null };
-    const i = filteredSpans.findIndex((s) => s.spanId === activeSpanId);
+    const i = trace.spans.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,
+      prevSpanId: trace.spans[i - 1]?.spanId ?? null,
+      nextSpanId: trace.spans[i + 1]?.spanId ?? null,
     };
-  }, [activeSpanId, filteredSpans]);
+  }, [activeSpanId, trace.spans]);
 
   const handleSelectPrevSpan = useCallback(() => {
     if (prevSpanId) handleSelectSpan(prevSpanId);
@@ -538,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"
@@ -547,9 +555,11 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
                   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>
@@ -560,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"
@@ -573,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>
 
@@ -621,36 +634,30 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
               {selectedSpanName}
             </span>
             <div className="flex items-center gap-0.5 shrink-0">
-              <button
-                type="button"
+              <IconButton
                 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"
+              </IconButton>
+              <IconButton
                 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>
+              </IconButton>
               <div aria-hidden className="w-px h-4 bg-gray-alpha-400 mx-1" />
-              <button
-                type="button"
+              <IconButton
                 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" />
-              </button>
+              </IconButton>
             </div>
           </div>
           {/* Panel body */}

package/src/components/ui/button.tsx

@@ -10,7 +10,14 @@ const buttonVariants = cva(
     '!text-gray-100',
     'bg-gray-1000',
     'transition-[border-color,background,color,transform,box-shadow] duration-150 ease-in-out',
-    'hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))] dark-theme:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]',
+    // Geist invert hover: literal fallbacks (no token dep, so it resolves in any
+    // consuming app), darkened via ancestor theme class without a registered variant.
+    'hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))]',
+    '[.dark-theme_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]',
+    '[[data-theme=dark]_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]',
+    // Geist focus ring as arbitrary properties (no bare `outline`/ambiguous
+    // arbitrary-color utilities, which differ between Tailwind v3 and v4).
+    'focus-visible:[outline:2px_solid_var(--ds-focus-color)] focus-visible:[outline-offset:2px]',
     // disabled styles
     'disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',
     'disabled:bg-gray-100 disabled:!text-gray-700 disabled:hover:bg-gray-100',
@@ -28,7 +35,7 @@ const buttonVariants = cva(
       size: {
         default: 'h-10 px-4 text-[14px]',
         sm: 'h-8 px-3 text-[14px]',
-        xs: 'h-6 px-1.5 py-0.5 text-button-12',
+        xs: 'h-6 px-1.5 py-0.5 text-button-12 rounded-[4px]',
         icon: 'h-8 w-8',
       },
     },

package/src/components/ui/icon-button.tsx

@@ -0,0 +1,57 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const iconButtonVariants = cva(
+  [
+    'm-0 inline-flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent p-0 align-baseline font-inherit no-underline [background:none] [-webkit-appearance:none] [-webkit-tap-highlight-color:transparent]',
+    'transition-colors duration-150 ease-in-out',
+    'enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-40',
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] focus-visible:outline-offset-2',
+  ],
+  {
+    variants: {
+      variant: {
+        tertiary:
+          'text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000',
+        muted:
+          'text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000',
+      },
+      size: {
+        tiny: 'h-6 w-6 rounded-[4px] [&_svg]:h-4 [&_svg]:w-4',
+        small: 'h-8 w-8 rounded-md [&_svg]:h-4 [&_svg]:w-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'tertiary',
+      size: 'tiny',
+    },
+  }
+);
+
+export type IconButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'type'
+> &
+  VariantProps<typeof iconButtonVariants> & {
+    'aria-label': string;
+    type?: 'button' | 'submit' | 'reset';
+  };
+
+export function IconButton({
+  className,
+  variant,
+  size,
+  type = 'button',
+  ...props
+}: IconButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(iconButtonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { iconButtonVariants };

package/src/styles.css

@@ -36,6 +36,9 @@
   --ds-gray-alpha-700: hsla(0, 0%, 0%, 0.44);
   --ds-gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
 
+  /* Focus */
+  --ds-focus-color: var(--ds-blue-700);
+
   /* Blue */
   --ds-blue-100: hsl(212, 100%, 97%);
   --ds-blue-200: hsl(210, 100%, 96%);
@@ -126,6 +129,8 @@
   --ds-gray-alpha-700: rgba(255, 255, 255, 0.45);
   --ds-gray-alpha-1000: rgba(255, 255, 255, 0.92);
 
+  --ds-focus-color: var(--ds-blue-900);
+
   --ds-blue-100: hsl(216, 50%, 12%);
   --ds-blue-200: hsl(214, 59%, 15%);
   --ds-blue-300: hsl(213, 71%, 20%);