From b3b8b1b9709b48e34a4ec2e920a1b6454a2604e2 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 3 Aug 2026 20:46:23 +0000
Subject: [PATCH] Replace trace viewer inline styles with Tailwind

Signed-off-by: Cursor Agent <cursoragent@cursor.com>
---
 .changeset/shy-frogs-juggle.md                |   5 +
 .../new-trace-viewer/components/timeline.tsx  |  60 +++---
 .../components/trace-viewer-skeleton.tsx      |  98 ++++++----
 .../src/components/new-trace-viewer/icons.tsx |   8 +-
 .../components/new-trace-viewer/utils.test.ts |  12 +-
 .../src/components/new-trace-viewer/utils.ts  |  48 ++---
 .../trace-viewer/components/map.tsx           |  11 +-
 .../components/trace-viewer/components/ui.tsx |  17 +-
 .../components/trace-viewer/trace-viewer.tsx  |  29 +--
 .../src/components/workflow-trace-view.tsx    | 174 ++----------------
 10 files changed, 153 insertions(+), 309 deletions(-)
 create mode 100644 .changeset/shy-frogs-juggle.md

diff --git a/.changeset/shy-frogs-juggle.md b/.changeset/shy-frogs-juggle.md
new file mode 100644
index 0000000000..1bf0488992
--- /dev/null
+++ b/.changeset/shy-frogs-juggle.md
@@ -0,0 +1,5 @@
+---
+'@workflow/web-shared': patch
+---
+
+Replace static trace viewer styles with Tailwind theme utilities.
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/timeline.tsx b/packages/web-shared/src/components/new-trace-viewer/components/timeline.tsx
index bf53182119..731d523c45 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/timeline.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/timeline.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ArrowLeft, ArrowRight } from 'lucide-react';
-import type { CSSProperties, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import {
   Fragment,
   memo,
@@ -31,7 +31,7 @@ import {
   computeSpanGaps,
   computeSpanMarkers,
   computeSpanSegments,
-  getResourceColor,
+  getResourceClassNames,
   getSpanDurationMs,
   isSpanErrored,
 } from '../utils';
@@ -65,11 +65,6 @@ const SEGMENT_CLASSES: Record<SegmentStatus, string> = {
   received: 'bg-blue-200 border border-blue-500',
 };
 
-const TIMELINE_INSET_STYLE: CSSProperties = {
-  left: TIMELINE_PADDING_PX,
-  right: TIMELINE_PADDING_PX,
-};
-
 const STRIPED_SEGMENT_STATUSES: ReadonlySet<SegmentStatus> = new Set([
   'pending',
   'running',
@@ -263,18 +258,18 @@ function BoundaryArrow({
 }
 
 function PlainBar({
-  bg,
-  border,
+  className,
   label,
 }: {
-  bg: string;
-  border: string;
+  className: string;
   label: string | null;
 }): ReactNode {
   return (
     <div
-      className="relative h-6 w-full min-w-1 rounded-[0.25rem] border"
-      style={{ background: bg, borderColor: border }}
+      className={cn(
+        'relative h-6 w-full min-w-1 rounded-[0.25rem] border',
+        className
+      )}
     >
       {label ? <DurationLabel label={label} /> : null}
     </div>
@@ -355,14 +350,13 @@ function SegmentBar({
           <div
             key={i}
             className={cn(
-              'absolute h-full overflow-hidden rounded-[0.25rem]',
+              'absolute h-full min-w-px overflow-hidden rounded-[0.25rem]',
               SEGMENT_CLASSES[seg.status]
             )}
             style={{
               // 1px gap between adjacent segments, distributed equally.
               left: `calc(${seg.leftPct}% + 0.5px)`,
               width: `calc(${seg.widthPct}% - 1px)`,
-              minWidth: 1,
             }}
           >
             {STRIPED_SEGMENT_STATUSES.has(seg.status) ? (
@@ -460,13 +454,10 @@ const TimelineBar = memo(function TimelineBar({
     markers.length > 0 || offscreen.left !== null || offscreen.right !== null;
 
   const isErrored = isSpanErrored(span);
-  const colors = getResourceColor(span.resource);
-  const fallbackBg = isErrored
-    ? (colors.errorBg ?? 'var(--ds-red-200)')
-    : colors.bg;
-  const fallbackBorder = isErrored
-    ? (colors.errorBorder ?? 'var(--ds-red-500)')
-    : colors.border;
+  const colors = getResourceClassNames(span.resource);
+  const fallbackClassName = isErrored
+    ? (colors.errorClassName ?? 'border-red-500 bg-red-200')
+    : colors.className;
 
   const totalLabel = formatDurationPrecise(totalDurationMs);
   const showTotalLabel =
@@ -489,7 +480,7 @@ const TimelineBar = memo(function TimelineBar({
       )}
       onClick={handleClick}
     >
-      <div className="absolute inset-y-0" style={TIMELINE_INSET_STYLE}>
+      <div className="absolute inset-x-4 inset-y-0">
         <div
           className="absolute top-1/2 h-6 -translate-y-1/2 overflow-hidden rounded-[0.25rem]"
           style={getBarPositionStyle(geometry)}
@@ -498,15 +489,13 @@ const TimelineBar = memo(function TimelineBar({
             <BoundaryArrow direction={geometry.mode.direction} />
           ) : geometry.mode.kind === 'tiny' ? (
             <div
-              className="h-6 rounded-[0.25rem] border"
-              style={{ background: fallbackBg, borderColor: fallbackBorder }}
+              className={cn('h-6 rounded-[0.25rem] border', fallbackClassName)}
             />
           ) : segments.length > 0 ? (
             <SegmentBar segments={segments} showLabels={!hasMarkers} />
           ) : (
             <PlainBar
-              bg={fallbackBg}
-              border={fallbackBorder}
+              className={fallbackClassName}
               label={showTotalLabel ? totalLabel : null}
             />
           )}
@@ -615,10 +604,9 @@ const DeltaMeasureLine = memo(function DeltaMeasureLine({
   return (
     <>
       <div
-        className="absolute h-px bg-amber-800"
+        className="absolute h-px w-1 bg-amber-800"
         style={{
           left: Math.min(anchorX, guideX),
-          width: MEASURE_GUIDE_OUTSET_PX,
           top: anchorCenterY,
         }}
       />
@@ -784,8 +772,7 @@ export function Timeline({
     >
       <div
         aria-hidden
-        className="absolute inset-y-0 pointer-events-none"
-        style={TIMELINE_INSET_STYLE}
+        className="pointer-events-none absolute inset-x-4 inset-y-0"
       >
         {markers.map((marker) =>
           // Skip the "0s" origin marker since the left edge already implies it.
@@ -799,10 +786,7 @@ export function Timeline({
         )}
       </div>
       {hover != null && (
-        <div
-          className="absolute inset-y-0 pointer-events-none z-10"
-          style={TIMELINE_INSET_STYLE}
-        >
+        <div className="pointer-events-none absolute inset-x-4 inset-y-0 z-10">
           <div
             className="absolute top-0 bottom-0 w-px bg-gray-alpha-500"
             style={{ left: `${hover.fraction * 100}%` }}
@@ -827,8 +811,7 @@ export function Timeline({
       {altHeld && anchorIndex < 0 && (
         <div
           aria-hidden
-          className="absolute inset-y-0 pointer-events-none"
-          style={TIMELINE_INSET_STYLE}
+          className="pointer-events-none absolute inset-x-4 inset-y-0"
         >
           {gapMeasurements.map((gap) => (
             <DeltaMeasureLine
@@ -842,8 +825,7 @@ export function Timeline({
       {measurement && (
         <div
           aria-hidden
-          className="absolute inset-y-0 pointer-events-none z-20"
-          style={TIMELINE_INSET_STYLE}
+          className="pointer-events-none absolute inset-x-4 inset-y-0 z-20"
         >
           <DeltaMeasureLine {...measurement} timelineWidth={timelineWidth} />
         </div>
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/trace-viewer-skeleton.tsx b/packages/web-shared/src/components/new-trace-viewer/components/trace-viewer-skeleton.tsx
index 7977ace4ae..fa06154a2a 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/trace-viewer-skeleton.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/trace-viewer-skeleton.tsx
@@ -1,19 +1,62 @@
 import { Skeleton } from '../../ui/skeleton';
-import { DEFAULT_START_PX, paneColTemplate } from './pane-constants';
 
-// Mirrors SplitPane's initial column template so the skeleton lines up with
-// the real viewer's first paint.
-const COL_TEMPLATE = paneColTemplate(DEFAULT_START_PX);
-
-const ROWS: { id: string; name: number; off: number; bar: number }[] = [
-  { id: 'r0', name: 62, off: 0, bar: 72 },
-  { id: 'r1', name: 78, off: 6, bar: 48 },
-  { id: 'r2', name: 50, off: 10, bar: 55 },
-  { id: 'r3', name: 84, off: 18, bar: 30 },
-  { id: 'r4', name: 45, off: 18, bar: 42 },
-  { id: 'r5', name: 66, off: 34, bar: 38 },
-  { id: 'r6', name: 55, off: 41, bar: 25 },
-  { id: 'r7', name: 40, off: 50, bar: 30 },
+const ROWS = [
+  {
+    id: 'r0',
+    nameClassName: 'w-[62%]',
+    offsetClassName: 'left-0',
+    barClassName: 'w-[72%]',
+    topClassName: 'top-0',
+  },
+  {
+    id: 'r1',
+    nameClassName: 'w-[78%]',
+    offsetClassName: 'left-[6%]',
+    barClassName: 'w-[48%]',
+    topClassName: 'top-[3.5px]',
+  },
+  {
+    id: 'r2',
+    nameClassName: 'w-1/2',
+    offsetClassName: 'left-[10%]',
+    barClassName: 'w-[55%]',
+    topClassName: 'top-[7px]',
+  },
+  {
+    id: 'r3',
+    nameClassName: 'w-[84%]',
+    offsetClassName: 'left-[18%]',
+    barClassName: 'w-[30%]',
+    topClassName: 'top-[10.5px]',
+  },
+  {
+    id: 'r4',
+    nameClassName: 'w-[45%]',
+    offsetClassName: 'left-[18%]',
+    barClassName: 'w-[42%]',
+    topClassName: 'top-[14px]',
+  },
+  {
+    id: 'r5',
+    nameClassName: 'w-[66%]',
+    offsetClassName: 'left-[34%]',
+    barClassName: 'w-[38%]',
+    topClassName: 'top-[17.5px]',
+  },
+  {
+    id: 'r6',
+    nameClassName: 'w-[55%]',
+    offsetClassName: 'left-[41%]',
+    barClassName: 'w-1/4',
+    topClassName: 'top-[21px]',
+  },
+  {
+    id: 'r7',
+    nameClassName: 'w-2/5',
+    offsetClassName: 'left-1/2',
+    barClassName: 'w-[30%]',
+    topClassName: 'top-[24.5px]',
+  },
 ];
 
 const HEADER_MARKERS = ['m0', 'm1', 'm2', 'm3'];
@@ -36,25 +79,17 @@ export function TraceViewerSkeleton() {
       {/* Minimap strip: thin density lines tracing the same shape as the bars */}
       <div className="relative h-10 min-h-10 shrink-0 border-b border-gray-alpha-400">
         <div className="absolute inset-x-4 top-[6px]">
-          {ROWS.map((row, index) => (
+          {ROWS.map((row) => (
             <Skeleton
               key={row.id}
-              className="absolute h-[3px] rounded-full"
-              style={{
-                left: `${row.off}%`,
-                width: `${row.bar}%`,
-                top: index * 3.5,
-              }}
+              className={`absolute h-[3px] rounded-full ${row.offsetClassName} ${row.barClassName} ${row.topClassName}`}
             />
           ))}
         </div>
       </div>
 
       {/* Header row: search header | divider | timeline header */}
-      <div
-        className="shrink-0 grid"
-        style={{ gridTemplateColumns: COL_TEMPLATE }}
-      >
+      <div className="grid shrink-0 grid-cols-[340px_1px_minmax(50px,1fr)]">
         <div className="h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5">
           <Skeleton className="w-3.5 h-3.5 shrink-0 rounded-sm" />
           <Skeleton className="h-3.5 w-40" />
@@ -70,10 +105,7 @@ export function TraceViewerSkeleton() {
       </div>
 
       {/* Content row: event list | gutter | timeline */}
-      <div
-        className="grid flex-1 min-h-0 overflow-hidden"
-        style={{ gridTemplateColumns: COL_TEMPLATE }}
-      >
+      <div className="grid min-h-0 flex-1 grid-cols-[340px_1px_minmax(50px,1fr)] overflow-hidden">
         {/* Sidebar event rows */}
         <div className="block overflow-visible">
           <ul className="block divide-y divide-gray-alpha-400 border-b border-gray-alpha-400">
@@ -81,10 +113,7 @@ export function TraceViewerSkeleton() {
               <li key={row.id} className="h-10 flex items-center pl-4 pr-2">
                 <div className="flex min-w-0 flex-1 items-center gap-2">
                   <Skeleton className="w-4 h-4 shrink-0 rounded-sm" />
-                  <Skeleton
-                    className="h-3.5"
-                    style={{ width: `${row.name}%` }}
-                  />
+                  <Skeleton className={`h-3.5 ${row.nameClassName}`} />
                 </div>
                 <Skeleton className="ml-2 h-3.5 w-10 shrink-0" />
               </li>
@@ -101,8 +130,7 @@ export function TraceViewerSkeleton() {
             <div key={row.id} className="relative h-10">
               <div className="absolute inset-x-4 inset-y-0">
                 <Skeleton
-                  className="absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]"
-                  style={{ left: `${row.off}%`, width: `${row.bar}%` }}
+                  className={`absolute top-1/2 h-6 -translate-y-1/2 rounded-[0.25rem] ${row.offsetClassName} ${row.barClassName}`}
                 />
               </div>
             </div>
diff --git a/packages/web-shared/src/components/new-trace-viewer/icons.tsx b/packages/web-shared/src/components/new-trace-viewer/icons.tsx
index 24a031d285..18ee467f9e 100644
--- a/packages/web-shared/src/components/new-trace-viewer/icons.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/icons.tsx
@@ -1,10 +1,10 @@
 const WorkflowIcon = () => {
   return (
     <svg
+      aria-hidden="true"
       data-testid="geist-icon"
       height="16"
       strokeLinejoin="round"
-      style={{ color: 'currentColor' }}
       viewBox="0 0 16 16"
       width="16"
     >
@@ -19,12 +19,12 @@ const WorkflowIcon = () => {
 const WebhookIcon = () => {
   return (
     <svg
+      aria-hidden="true"
       data-testid="geist-icon"
       height="16"
       strokeLinejoin="round"
       viewBox="0 0 16 16"
       width="16"
-      style={{ color: 'currentColor' }}
     >
       <path
         fillRule="evenodd"
@@ -39,12 +39,12 @@ const WebhookIcon = () => {
 const SleepIcon = () => {
   return (
     <svg
+      aria-hidden="true"
       data-testid="geist-icon"
       height="16"
       strokeLinejoin="round"
       viewBox="0 0 16 16"
       width="16"
-      style={{ color: 'currentColor' }}
     >
       <path
         fillRule="evenodd"
@@ -59,12 +59,12 @@ const SleepIcon = () => {
 const StepForwardIcon = () => {
   return (
     <svg
+      aria-hidden="true"
       data-testid="geist-icon"
       height="16"
       strokeLinejoin="round"
       viewBox="0 0 16 16"
       width="16"
-      style={{ color: 'currentColor' }}
     >
       <path
         fillRule="evenodd"
diff --git a/packages/web-shared/src/components/new-trace-viewer/utils.test.ts b/packages/web-shared/src/components/new-trace-viewer/utils.test.ts
index d953b1859e..f2cc2848ed 100644
--- a/packages/web-shared/src/components/new-trace-viewer/utils.test.ts
+++ b/packages/web-shared/src/components/new-trace-viewer/utils.test.ts
@@ -7,7 +7,7 @@ import {
   computeSpanMarkers,
   computeSpanSegments,
   computeTimeMarkers,
-  getResourceColor,
+  getResourceClassNames,
 } from './utils';
 
 /** Build a high-res timestamp tuple ([seconds, nanoseconds]) for a given ms. */
@@ -248,13 +248,11 @@ describe('computeTimeMarkers', () => {
   });
 });
 
-describe('getResourceColor', () => {
+describe('getResourceClassNames', () => {
   it('uses gray for hooks (passive spans), not amber', () => {
-    expect(getResourceColor('hook')).toEqual({
-      bg: 'var(--ds-gray-200)',
-      border: 'var(--ds-gray-500)',
-      errorBg: 'var(--ds-red-200)',
-      errorBorder: 'var(--ds-red-500)',
+    expect(getResourceClassNames('hook')).toEqual({
+      className: 'border-gray-500 bg-gray-200',
+      errorClassName: 'border-red-500 bg-red-200',
     });
   });
 });
diff --git a/packages/web-shared/src/components/new-trace-viewer/utils.ts b/packages/web-shared/src/components/new-trace-viewer/utils.ts
index 7958ae7c8a..8b2a36fcb3 100644
--- a/packages/web-shared/src/components/new-trace-viewer/utils.ts
+++ b/packages/web-shared/src/components/new-trace-viewer/utils.ts
@@ -279,55 +279,41 @@ export function computeSpanDelta(
 // Resource colors
 // ---------------------------------------------------------------------------
 
-export const RESOURCE_COLORS: Record<
+export const RESOURCE_CLASS_NAMES: Record<
   string,
   {
-    bg: string;
-    border: string;
-    errorBg?: string;
-    errorBorder?: string;
+    className: string;
+    errorClassName?: string;
   }
 > = {
   run: {
-    bg: 'var(--ds-blue-200)',
-    border: 'var(--ds-blue-500)',
-    errorBg: 'var(--ds-red-200)',
-    errorBorder: 'var(--ds-red-500)',
+    className: 'border-blue-500 bg-blue-200',
+    errorClassName: 'border-red-500 bg-red-200',
   },
   step: {
-    bg: 'var(--ds-green-200)',
-    border: 'var(--ds-green-500)',
-    errorBg: 'var(--ds-red-200)',
-    errorBorder: 'var(--ds-red-500)',
+    className: 'border-green-500 bg-green-200',
+    errorClassName: 'border-red-500 bg-red-200',
   },
   // Passive spans (hooks) stay gray — matches event-list icons and the minimap.
   hook: {
-    bg: 'var(--ds-gray-200)',
-    border: 'var(--ds-gray-500)',
-    errorBg: 'var(--ds-red-200)',
-    errorBorder: 'var(--ds-red-500)',
+    className: 'border-gray-500 bg-gray-200',
+    errorClassName: 'border-red-500 bg-red-200',
   },
   sleep: {
-    bg: 'var(--ds-purple-200)',
-    border: 'var(--ds-purple-500)',
-    errorBg: 'var(--ds-red-200)',
-    errorBorder: 'var(--ds-red-500)',
+    className: 'border-purple-500 bg-purple-200',
+    errorClassName: 'border-red-500 bg-red-200',
   },
   default: {
-    bg: 'var(--ds-gray-200)',
-    border: 'var(--ds-gray-500)',
-    errorBg: 'var(--ds-red-200)',
-    errorBorder: 'var(--ds-red-500)',
+    className: 'border-gray-500 bg-gray-200',
+    errorClassName: 'border-red-500 bg-red-200',
   },
 };
 
-export function getResourceColor(resource: string): {
-  bg: string;
-  border: string;
-  errorBg?: string;
-  errorBorder?: string;
+export function getResourceClassNames(resource: string): {
+  className: string;
+  errorClassName?: string;
 } {
-  return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
+  return RESOURCE_CLASS_NAMES[resource] ?? RESOURCE_CLASS_NAMES.default;
 }
 
 // ---------------------------------------------------------------------------
diff --git a/packages/web-shared/src/components/trace-viewer/components/map.tsx b/packages/web-shared/src/components/trace-viewer/components/map.tsx
index a40dede8ff..f3dfc182e7 100644
--- a/packages/web-shared/src/components/trace-viewer/components/map.tsx
+++ b/packages/web-shared/src/components/trace-viewer/components/map.tsx
@@ -194,22 +194,21 @@ export const MiniMap = memo(function MiniMap({
 
   return (
     <div
-      className={styles.mapContainer}
+      className={`${styles.mapContainer} h-14`}
       ref={containerRef}
       style={{
         width: thumbWidth > 0 ? mapWidth : '100%',
-        height: MAP_HEIGHT,
       }}
     >
       <canvas
-        className={styles.mapCanvas}
+        className={`${styles.mapCanvas} h-14`}
         height={MAP_HEIGHT * dpi}
         ref={canvasRef}
-        style={{ width: mapWidth, height: MAP_HEIGHT }}
+        style={{ width: mapWidth }}
         width={mapWidth * dpi}
       />
       <div
-        className={styles.mapThumb}
+        className={`${styles.mapThumb} !top-0.5 !h-13`}
         ref={thumbRef}
         style={{
           transform: thumbStyle.transform,
@@ -217,8 +216,6 @@ export const MiniMap = memo(function MiniMap({
             thumbWidth > 0
               ? thumbWidth
               : `calc(100% - ${TIMELINE_PADDING * 2}px)`,
-          top: 2,
-          height: MAP_HEIGHT - 4,
         }}
       />
     </div>
diff --git a/packages/web-shared/src/components/trace-viewer/components/ui.tsx b/packages/web-shared/src/components/trace-viewer/components/ui.tsx
index 204b265c2b..44fe3d45d9 100644
--- a/packages/web-shared/src/components/trace-viewer/components/ui.tsx
+++ b/packages/web-shared/src/components/trace-viewer/components/ui.tsx
@@ -4,10 +4,9 @@ import { clsx } from 'clsx';
 import type { AnchorHTMLAttributes, ReactNode } from 'react';
 import styles from '../trace-viewer.module.css';
 
-// Color token mapping helper
-const colorTokenMap: Record<string, string> = {
-  'gray-700': 'var(--ds-gray-700)',
-  'gray-900': 'var(--ds-gray-900)',
+const colorClassNameMap: Partial<Record<string, string>> = {
+  'gray-700': 'text-gray-700',
+  'gray-900': 'text-gray-900',
 };
 
 export function IconCross({
@@ -17,14 +16,15 @@ export function IconCross({
   size?: number;
   color?: string;
 }): ReactNode {
-  const style = { color: colorTokenMap[color] || color } as const;
+  const colorClassName = colorClassNameMap[color];
   return (
     <svg
       width={size}
       height={size}
       viewBox="0 0 24 24"
       fill="none"
-      style={style}
+      className={colorClassName}
+      style={colorClassName ? undefined : { color }}
       aria-hidden
     >
       <title>Cross</title>
@@ -67,14 +67,15 @@ export function IconExternalSmall({
   size?: number;
   color?: string;
 }): ReactNode {
-  const style = { color: colorTokenMap[color] || color } as const;
+  const colorClassName = colorClassNameMap[color];
   return (
     <svg
       width={size}
       height={size}
       viewBox="0 0 24 24"
       fill="none"
-      style={style}
+      className={colorClassName}
+      style={colorClassName ? undefined : { color }}
       aria-hidden
     >
       <title>External Small</title>
diff --git a/packages/web-shared/src/components/trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/trace-viewer/trace-viewer.tsx
index 9825b4bbba..89c16e0fc8 100644
--- a/packages/web-shared/src/components/trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/trace-viewer/trace-viewer.tsx
@@ -456,12 +456,10 @@ export function TraceViewerTimeline({
       <div className={clsx(styles.traceViewerContent, inert && styles.inert)}>
         <div className={styles.timeline} ref={timelineRef}>
           <div
+            className="relative p-2 pb-0"
             style={{
-              position: 'relative',
               width: state.timelineWidth,
               minHeight: state.timelineHeight - TIMELINE_PADDING * 2,
-              padding: TIMELINE_PADDING,
-              paddingBottom: 0,
             }}
           >
             <div
@@ -513,20 +511,10 @@ export function TraceViewerTimeline({
                   const insetPx = Math.min(unknownWidth * 0.05, 20);
                   return (
                     <div
+                      className="pointer-events-none absolute top-0 z-[1] h-full bg-[repeating-linear-gradient(-45deg,var(--ds-background-200)_0,var(--ds-background-200)_11px,var(--ds-gray-200)_11px,var(--ds-gray-200)_12px)] [mask-image:linear-gradient(to_right,transparent_1%,black_3%)] [-webkit-mask-image:linear-gradient(to_right,transparent_1%,black_3%)]"
                       style={{
-                        position: 'absolute',
-                        top: 0,
                         left: knownPx + insetPx,
                         width: unknownWidth - insetPx,
-                        height: '100%',
-                        pointerEvents: 'none',
-                        zIndex: 1,
-                        maskImage:
-                          'linear-gradient(to right, transparent 1%, black 3%)',
-                        WebkitMaskImage:
-                          'linear-gradient(to right, transparent 1%, black 3%)',
-                        background:
-                          'repeating-linear-gradient(-45deg, var(--ds-background-200) 0, var(--ds-background-200) 11px, var(--ds-gray-200) 11px, var(--ds-gray-200) 12px)',
                       }}
                     />
                   );
@@ -569,16 +557,13 @@ export function TraceViewerPanel({
 
   return (
     <div
-      className={clsx(styles.spanDetailPanelTraceViewer, className)}
+      className={clsx(
+        styles.spanDetailPanelTraceViewer,
+        'relative [--height:100%] [--map-height:0] [--panel-height:100%] [--panel-width:100%] [--search-gap:0] [--search-height:0]',
+        className
+      )}
       style={
         {
-          position: 'relative',
-          '--search-height': '0',
-          '--search-gap': '0',
-          '--map-height': '0',
-          '--panel-width': `100%`,
-          '--panel-height': `100%`,
-          '--height': `100%`,
           '--scrollbar-width': `${state.scrollbarWidth}px`,
         } as CSSProperties
       }
diff --git a/packages/web-shared/src/components/workflow-trace-view.tsx b/packages/web-shared/src/components/workflow-trace-view.tsx
index 7c5c0991f5..af6ff42d37 100644
--- a/packages/web-shared/src/components/workflow-trace-view.tsx
+++ b/packages/web-shared/src/components/workflow-trace-view.tsx
@@ -16,6 +16,7 @@ import {
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { cn } from '../lib/cn';
 import { useToast } from '../lib/toast';
 import {
   buildTrace,
@@ -188,72 +189,24 @@ function SpanContextMenu({
   return createPortal(
     <div
       ref={menuRef}
+      className="fixed z-[99999] min-w-[180px] overflow-x-hidden overflow-y-auto bg-background-100 p-1 text-sm material-menu"
       style={{
-        position: 'fixed',
         left: adjustedPos.x,
         top: adjustedPos.y,
-        zIndex: 99999,
-        boxShadow: 'var(--ds-shadow-menu)',
-        borderRadius: 12,
-        background: 'var(--ds-background-100)',
-        padding: 'var(--geist-space-gap-quarter, 4px)',
-        fontSize: 14,
-        minWidth: 180,
-        overflowX: 'hidden',
-        overflowY: 'auto',
       }}
     >
-      <div
-        style={{
-          display: 'block',
-          color: 'var(--ds-gray-900)',
-          fontSize: '0.75rem',
-          padding: 'var(--geist-gap-quarter, 4px) var(--geist-space-2x, 8px)',
-          fontWeight: 500,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          maxWidth: 240,
-          borderBottom: '1px solid var(--ds-gray-alpha-400)',
-          marginBottom: 4,
-        }}
-      >
+      <div className="mb-1 block max-w-60 overflow-hidden text-ellipsis whitespace-nowrap border-gray-alpha-400 border-b px-2 py-1 font-medium text-gray-900 text-xs">
         {menu.spanName}
       </div>
       {items.map((item) => (
         <button
           key={item.label}
           type="button"
-          style={{
-            outline: 'none',
-            cursor: item.disabled ? 'not-allowed' : 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            padding: '0 var(--geist-space-2x, 8px)',
-            height: 40,
-            textDecoration: 'none',
-            borderRadius: 6,
-            color: item.destructive
-              ? 'var(--ds-red-900)'
-              : 'var(--ds-gray-1000)',
-            width: '100%',
-            background: 'transparent',
-            border: 'none',
-            fontSize: 14,
-            textAlign: 'left',
-            opacity: item.disabled ? 0.4 : 1,
-            transition: 'background 0.15s',
-          }}
+          className={cn(
+            'flex h-10 w-full cursor-pointer items-center gap-2 rounded-md !border-none !bg-transparent px-2 text-left text-sm no-underline outline-none transition-colors hover:!bg-gray-alpha-100 disabled:cursor-not-allowed disabled:opacity-40',
+            item.destructive ? 'text-red-900' : 'text-gray-1000'
+          )}
           disabled={item.disabled}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLButtonElement).style.background =
-              'var(--ds-gray-alpha-100)';
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLButtonElement).style.background =
-              'transparent';
-          }}
           onClick={() => {
             item.action();
             onClose();
@@ -724,13 +677,9 @@ function TraceViewerFooter({
   isLive: boolean;
   isInitialLoading: boolean;
 }): ReactNode {
-  const style = { color: 'var(--ds-gray-900)' };
   if (hasMore || isInitialLoading) {
     return (
-      <div
-        className="flex items-center justify-center gap-2 py-3 text-xs"
-        style={style}
-      >
+      <div className="flex items-center justify-center gap-2 py-3 text-gray-900 text-xs">
         <Spinner size={14} />
         Loading more events…
       </div>
@@ -738,19 +687,13 @@ function TraceViewerFooter({
   }
   if (isLive) {
     return (
-      <div
-        className="flex items-center justify-center py-3 text-xs"
-        style={style}
-      >
+      <div className="flex items-center justify-center py-3 text-gray-900 text-xs">
         Waiting for more events…
       </div>
     );
   }
   return (
-    <div
-      className="flex items-center justify-center py-3 text-xs"
-      style={style}
-    >
+    <div className="flex items-center justify-center py-3 text-gray-900 text-xs">
       End of run
     </div>
   );
@@ -1012,23 +955,15 @@ export const WorkflowTraceViewer = ({
       {/* Detail panel (rendered outside the context, as a sibling) */}
       {selectedSpan && (
         <div
-          className="relative border-l flex-shrink-0 flex flex-col"
-          style={{
-            width: panelWidth,
-            borderColor: 'var(--ds-gray-200)',
-            backgroundColor: 'var(--ds-background-100)',
-          }}
+          className="relative flex flex-shrink-0 flex-col border-gray-200 border-l bg-background-100"
+          style={{ width: panelWidth }}
         >
           <PanelResizeHandle onResize={handleResize} />
           {/* Panel header */}
-          <div
-            className="flex items-center justify-between px-3 py-2 border-y flex-shrink-0"
-            style={{ borderColor: 'var(--ds-gray-200)' }}
-          >
+          <div className="flex flex-shrink-0 items-center justify-between border-gray-200 border-y px-3 py-2">
             <div className="min-w-0 flex-1">
               <div
-                className="text-sm font-medium truncate"
-                style={{ color: 'var(--ds-gray-1000)' }}
+                className="truncate font-medium text-gray-1000 text-sm"
                 title={selectedSpanName}
               >
                 {selectedSpanName}
@@ -1040,30 +975,7 @@ export const WorkflowTraceViewer = ({
                 aria-label="Previous span"
                 onClick={handleSelectPrevSpan}
                 disabled={!canSelectPrevSpan}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  marginLeft: 6,
-                  width: 24,
-                  height: 24,
-                  padding: 0,
-                  borderRadius: 6,
-                  border: 'none',
-                  background: 'transparent',
-                  color: 'var(--ds-gray-700)',
-                  cursor: canSelectPrevSpan ? 'pointer' : 'not-allowed',
-                  opacity: canSelectPrevSpan ? 1 : 0.45,
-                  flexShrink: 0,
-                  transition: 'background 0.15s',
-                }}
-                onMouseEnter={(e) => {
-                  if (!canSelectPrevSpan) return;
-                  e.currentTarget.style.background = 'var(--ds-gray-alpha-100)';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'transparent';
-                }}
+                className="ml-1.5 flex size-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-md !border-none !bg-transparent p-0 text-gray-700 transition-colors hover:!bg-gray-alpha-100 disabled:cursor-not-allowed disabled:opacity-45"
               >
                 <ChevronUp size={16} />
               </button>
@@ -1072,67 +984,17 @@ export const WorkflowTraceViewer = ({
                 aria-label="Next span"
                 onClick={handleSelectNextSpan}
                 disabled={!canSelectNextSpan}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  marginLeft: 2,
-                  width: 24,
-                  height: 24,
-                  padding: 0,
-                  borderRadius: 6,
-                  border: 'none',
-                  background: 'transparent',
-                  color: 'var(--ds-gray-700)',
-                  cursor: canSelectNextSpan ? 'pointer' : 'not-allowed',
-                  opacity: canSelectNextSpan ? 1 : 0.45,
-                  flexShrink: 0,
-                  transition: 'background 0.15s',
-                }}
-                onMouseEnter={(e) => {
-                  if (!canSelectNextSpan) return;
-                  e.currentTarget.style.background = 'var(--ds-gray-alpha-100)';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'transparent';
-                }}
+                className="ml-0.5 flex size-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-md !border-none !bg-transparent p-0 text-gray-700 transition-colors hover:!bg-gray-alpha-100 disabled:cursor-not-allowed disabled:opacity-45"
               >
                 <ChevronDown size={16} />
               </button>
             </div>
-            <div
-              className="flex items-center"
-              style={{
-                borderLeft: '1px solid var(--ds-gray-300)',
-                marginLeft: 6,
-              }}
-            >
+            <div className="ml-1.5 flex items-center border-gray-300 border-l">
               <button
                 type="button"
                 aria-label="Close panel"
                 onClick={handleClose}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  marginLeft: 6,
-                  width: 24,
-                  height: 24,
-                  padding: 0,
-                  borderRadius: 6,
-                  border: 'none',
-                  background: 'transparent',
-                  color: 'var(--ds-gray-700)',
-                  cursor: 'pointer',
-                  flexShrink: 0,
-                  transition: 'background 0.15s',
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = 'var(--ds-gray-alpha-100)';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'transparent';
-                }}
+                className="ml-1.5 flex size-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-md !border-none !bg-transparent p-0 text-gray-700 transition-colors hover:!bg-gray-alpha-100"
               >
                 <X size={16} />
               </button>