From a1cf699566ba5dfa85635b93ffaefe6b3a63f217 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 16 Jul 2026 19:57:47 +0000
Subject: [PATCH] feat(web-shared): tooltip on event list icons in new trace
 viewer

Wrap each event row's icon with a Tooltip labeled 'Workflow', 'Step',
'Hook', 'Sleep' (or 'Event' fallback). Uses a 500ms delay so tooltips
don't appear instantly on incidental hover.
---
 .../trace-viewer-event-icon-tooltips.md       |  5 +++
 .../components/event-list.tsx                 | 32 ++++++++++++-------
 2 files changed, 26 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/trace-viewer-event-icon-tooltips.md

diff --git a/.changeset/trace-viewer-event-icon-tooltips.md b/.changeset/trace-viewer-event-icon-tooltips.md
new file mode 100644
index 0000000000..ef96ebb814
--- /dev/null
+++ b/.changeset/trace-viewer-event-icon-tooltips.md
@@ -0,0 +1,5 @@
+---
+'@workflow/web-shared': patch
+---
+
+Show a delayed tooltip (Step, Hook, Sleep, Workflow) when hovering the icon on each row in the new trace viewer's event list.
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx b/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx
index c7545367cb..3a54ab528a 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx
@@ -2,6 +2,7 @@ import { Circle } from 'lucide-react';
 import { useRef } from 'react';
 import { cn } from '../../../lib/cn';
 import { formatDurationPrecise } from '../../trace-viewer/util/timing';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
 import {
   SleepIcon,
   StepForwardIcon,
@@ -17,18 +18,20 @@ import { ROW_HEIGHT_PX, useRowWindow } from './use-row-window';
 interface EventStyle {
   icon: React.ComponentType<{ className?: string }>;
   className: string;
+  label: string;
 }
 
 const eventStyles: Record<string, EventStyle> = {
-  run: { icon: WorkflowIcon, className: 'text-blue-900' },
-  step: { icon: StepForwardIcon, className: 'text-green-900' },
-  hook: { icon: WebhookIcon, className: 'text-gray-900' },
-  sleep: { icon: SleepIcon, className: 'text-gray-900' },
+  run: { icon: WorkflowIcon, className: 'text-blue-900', label: 'Workflow' },
+  step: { icon: StepForwardIcon, className: 'text-green-900', label: 'Step' },
+  hook: { icon: WebhookIcon, className: 'text-gray-900', label: 'Hook' },
+  sleep: { icon: SleepIcon, className: 'text-gray-900', label: 'Sleep' },
 };
 
 const defaultStyle: EventStyle = {
   icon: Circle,
   className: 'text-gray-900',
+  label: 'Event',
 };
 
 const ROW_HEIGHT_CLASS = 'h-10';
@@ -38,6 +41,7 @@ function getEventStyle(resource: string, isErrored: boolean): EventStyle {
   return {
     icon: style.icon,
     className: cn(isErrored ? 'text-red-900' : style.className),
+    label: style.label,
   };
 }
 
@@ -54,10 +58,11 @@ const EventRow = ({
 }) => {
   const durationMs = getSpanDurationMs(span);
   const isErrored = isSpanErrored(span);
-  const { icon: Icon, className: tagClassName } = getEventStyle(
-    span.resource,
-    isErrored
-  );
+  const {
+    icon: Icon,
+    className: tagClassName,
+    label: iconLabel,
+  } = getEventStyle(span.resource, isErrored);
 
   return (
     <li
@@ -75,9 +80,14 @@ const EventRow = ({
       <div className="h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200">
         <div className="flex h-full min-w-0 items-center pl-4 pr-2">
           <div className="flex min-w-0 flex-1 items-center gap-2">
-            <span className={cn('shrink-0', tagClassName)}>
-              <Icon className="w-4 h-4" />
-            </span>
+            <Tooltip delayDuration={500}>
+              <TooltipTrigger asChild>
+                <span className={cn('shrink-0', tagClassName)}>
+                  <Icon className="w-4 h-4" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="top">{iconLabel}</TooltipContent>
+            </Tooltip>
             <span className="min-w-0 text-label-14">
               <MiddleTruncate value={span.name} />
             </span>