From 3ee6c2aa2046892552530c84554be577b09ef422 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 14:42:14 -0400
Subject: [PATCH 01/58] wip

---
 .../components/event-list.tsx                 |  77 +++
 .../new-trace-viewer/components/timeline.tsx  | 207 ++++++++
 .../new-trace-viewer/trace-viewer.tsx         | 107 ++++
 .../src/components/new-trace-viewer/types.ts  |   0
 .../new-trace-viewer/util/constants.ts        |   0
 .../src/components/workflow-trace-view.tsx    |   2 +
 packages/web-shared/src/styles.css            | 460 +++++++++++++++++-
 7 files changed, 852 insertions(+), 1 deletion(-)
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/components/timeline.tsx
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/types.ts
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/util/constants.ts

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
new file mode 100644
index 0000000000..b88855bb2c
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx
@@ -0,0 +1,77 @@
+import { StepForward } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { Span } from '../../trace-viewer/types';
+import { formatDuration } from '../../../lib/utils';
+
+const eventTag = cva(['rounded-sm p-1'], {
+  variants: {
+    eventType: {
+      run: 'bg-blue-200 text-blue-900',
+      step: 'bg-green-200 text-green-900',
+      hook: 'bg-yellow-200 text-yellow-900',
+      sleep: 'bg-gray-200 text-gray-900',
+      default: 'bg-gray-200 text-gray-900',
+    },
+  },
+});
+
+type EventType = 'run' | 'step' | 'hook' | 'sleep' | 'default';
+
+const toEventType = (resource: string): EventType => {
+  switch (resource) {
+    case 'run':
+    case 'step':
+    case 'hook':
+    case 'sleep':
+      return resource;
+    default:
+      return 'default';
+  }
+};
+
+const EventRow = ({ span }: { span: Span }) => {
+  return (
+    <li
+      key={span.spanId}
+      role="treeitem"
+      aria-level={0}
+      aria-selected={false}
+      aria-expanded="false"
+      className="overflow-clip group"
+      // onClick={() => {
+      //   setActiveSpan(span.spanId);
+      //   console.log(span.spanId);
+      // }}
+    >
+      <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-9 py-1.5 cursor-pointer flex">
+        <div className="flex items-center gap-2">
+          <span className={eventTag({ eventType: toEventType(span.resource) })}>
+            <StepForward className="w-4 h-4" />
+          </span>
+          <span className="text-label-14">{span.name}</span>
+        </div>
+        <div className="ml-auto">
+          <span className="text-label-14 text-gray-900 tabular-nums">
+            {formatDuration(span.duration[1])}
+          </span>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+const EventList = ({ spans }: { spans: Span[] }) => {
+  return (
+    <ul
+      id="event-list"
+      role="tree"
+      className="block min-h-0 overflow-visible px-2 py-2"
+    >
+      {spans.map((span) => {
+        return <EventRow key={span.spanId} span={span} />;
+      })}
+    </ul>
+  );
+};
+
+export default EventList;
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
new file mode 100644
index 0000000000..4fb1bbc14b
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/timeline.tsx
@@ -0,0 +1,207 @@
+import { cva } from 'class-variance-authority';
+import { memo, type ReactNode } from 'react';
+import { cn } from '../../../lib/utils';
+import { SegmentStatus } from '../../trace-viewer/components/span-segments';
+import type { ResourceType } from '../../trace-viewer/components/span-strategies';
+import type { Span } from '../../trace-viewer/types';
+import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+
+const MIN_BAR_WIDTH_PCT = 0.8;
+
+export interface TimelineCompression {
+  toVisual: (time: number) => number;
+}
+
+const clamp = (value: number, min: number, max: number): number => {
+  return Math.min(Math.max(value, min), max);
+};
+
+const toResourceType = (resource: string): ResourceType => {
+  switch (resource) {
+    case 'run':
+    case 'step':
+    case 'hook':
+    case 'sleep':
+      return resource;
+    default:
+      return 'default';
+  }
+};
+
+const TimelineRow = ({
+  children,
+  isSelected,
+  onClick,
+  title,
+}: {
+  children: ReactNode;
+  isSelected: boolean;
+  onClick: () => void;
+  title: string;
+}) => {
+  return (
+    <button
+      type="button"
+      title={title}
+      className="overflow-clip w-full px-2 group block cursor-pointer"
+      role="treeitem"
+      aria-selected={isSelected}
+      onClick={onClick}
+    >
+      <div
+        className={cn(
+          'relative flex h-9 items-center hover:bg-gray-100 rounded-sm px-2 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200'
+        )}
+      >
+        {children}
+      </div>
+    </button>
+  );
+};
+
+export const resourceStatus = cva('', {
+  variants: {
+    resourceType: {
+      run: 'bg-blue-200 text-blue-900',
+      step: 'bg-green-200 text-green-900',
+      hook: 'bg-amber-200 text-amber-900',
+      sleep: 'bg-purple-200 text-purple-900',
+      default: 'bg-gray-200 text-gray-900',
+    },
+    errored: {
+      true: 'bg-red-200 text-red-900',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    resourceType: 'default',
+  },
+});
+
+const spanVariants = cva('relative block h-full w-full min-w-0.5 rounded-xs', {
+  variants: {
+    status: {
+      running: 'bg-green-700',
+      failed: 'bg-red-700',
+      succeeded: 'bg-blue-700',
+      retrying: 'bg-yellow-700',
+      queued: 'bg-gray-500',
+      waiting: 'bg-gray-700',
+      sleeping: 'bg-amber-700',
+      received: 'bg-blue-700',
+    },
+    errored: {
+      true: 'bg-red-700',
+      false: '',
+    },
+    resourceType: {
+      run: 'bg-blue-700',
+      step: 'bg-green-700',
+      hook: 'bg-amber-700',
+      sleep: 'bg-purple-700',
+      default: 'bg-gray-500',
+    },
+  },
+});
+
+export const TimelineBar = memo(function TimelineBar({
+  span,
+  compression,
+  isSelected,
+  onClick,
+}: {
+  span: Span;
+  compression: TimelineCompression;
+  isSelected: boolean;
+  onClick: () => void;
+}): ReactNode {
+  const startTime = getHighResInMs(span.startTime);
+  const endTime = getHighResInMs(span.endTime);
+  const activeStartTime = span.activeStartTime
+    ? getHighResInMs(span.activeStartTime)
+    : undefined;
+
+  const leftFrac = compression.toVisual(startTime);
+  const rightFrac = compression.toVisual(endTime);
+  const widthFrac = Math.max(rightFrac - leftFrac, 0);
+
+  const leftPct = clamp(leftFrac * 100, 0, 100);
+  const maxWidthPct = Math.max(100 - leftPct, MIN_BAR_WIDTH_PCT);
+  const widthPct =
+    widthFrac > 0
+      ? clamp(widthFrac * 100, MIN_BAR_WIDTH_PCT, maxWidthPct)
+      : MIN_BAR_WIDTH_PCT;
+
+  const hasQueued =
+    activeStartTime != null &&
+    activeStartTime > startTime &&
+    activeStartTime < endTime;
+
+  let queuedBarPct = 0;
+  let activeBarPct = 100;
+  if (hasQueued && widthFrac > 0) {
+    const activeFrac = compression.toVisual(activeStartTime);
+    queuedBarPct = clamp(((activeFrac - leftFrac) / widthFrac) * 100, 0, 100);
+    activeBarPct = 100 - queuedBarPct;
+  }
+
+  const isErrored = span.status.code === 2;
+  const activeStatus: SegmentStatus = isErrored ? 'failed' : 'running';
+  const durationLabel = formatDuration(Math.max(endTime - startTime, 0), true);
+
+  return (
+    <TimelineRow
+      isSelected={isSelected}
+      onClick={onClick}
+      title={`${span.name} - ${durationLabel}`}
+    >
+      <div
+        className="absolute top-2 h-5 min-w-0.5"
+        style={{
+          left: `${leftPct}%`,
+          width: `${widthPct}%`,
+        }}
+      >
+        <div className="flex h-full w-full overflow-hidden rounded-xs ring-1 ring-black/5">
+          {hasQueued && queuedBarPct > 0 ? (
+            <Span status="queued" resourceType="default" width={queuedBarPct} />
+          ) : null}
+          <Span
+            status={activeStatus}
+            resourceType={toResourceType(span.resource)}
+            width={activeBarPct}
+          />
+        </div>
+      </div>
+    </TimelineRow>
+  );
+});
+
+const Span = ({
+  status,
+  resourceType,
+  width,
+}: {
+  status: SegmentStatus;
+  resourceType: ResourceType;
+  width: number;
+}) => {
+  return (
+    <span
+      style={{
+        width: `${clamp(width, 0, 100)}%`,
+      }}
+      className="block h-full"
+    >
+      <span className={cn(spanVariants({ status, resourceType }))} />
+    </span>
+  );
+};
+
+export const Timeline = memo(function Timeline({
+  children,
+}: {
+  children: ReactNode;
+}): ReactNode {
+  return <div className="w-full h-full py-2">{children}</div>;
+});
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
new file mode 100644
index 0000000000..03496ad800
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+// import { cn } from "../../lib/utils";
+import EventList from './components/event-list';
+import type { Trace } from '../trace-viewer/types';
+import { useMemo, type ReactNode } from 'react';
+import { X } from 'lucide-react';
+import { Timeline, TimelineBar } from './components/timeline';
+import { getHighResInMs } from '../trace-viewer/util/timing';
+
+interface NewTraceViewerProps {
+  trace: Trace;
+}
+
+const TraceHeader = () => {
+  return (
+    <header>
+      <h1>Trace</h1>
+    </header>
+  );
+};
+
+export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
+  const activeSpan = trace.spans[0];
+  const splitRatio = 0.5;
+  const compression = useMemo(() => {
+    let minStart = Number.POSITIVE_INFINITY;
+    let maxEnd = Number.NEGATIVE_INFINITY;
+
+    for (const span of trace.spans) {
+      const start = getHighResInMs(span.startTime);
+      const end = getHighResInMs(span.endTime);
+
+      if (start < minStart) minStart = start;
+      if (end > maxEnd) maxEnd = end;
+    }
+
+    if (!Number.isFinite(minStart) || !Number.isFinite(maxEnd)) {
+      minStart = 0;
+      maxEnd = 1;
+    }
+
+    const range = Math.max(maxEnd - minStart, 1);
+
+    return {
+      toVisual(time: number): number {
+        return Math.min(Math.max((time - minStart) / range, 0), 1);
+      },
+    };
+  }, [trace.spans]);
+
+  return (
+    <div
+      data-pane="pane-root"
+      className="flex w-full overflow-hidden h-full max-h-full"
+      style={{
+        display: 'grid',
+        gridTemplateColumns: activeSpan
+          ? 'minmax(100px, 1fr) 3px clamp(50px, 430px, 100%)'
+          : 'minmax(100px, 1fr) 3px',
+        height: '100%',
+      }}
+    >
+      <div>
+        <TraceHeader />
+        <div
+          data-pane="left-pane"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: `minmax(50px, ${splitRatio * 100}%) 3px minmax(50px, ${(1 - splitRatio) * 100}%)`,
+            height: '100%',
+          }}
+        >
+          <EventList spans={trace.spans} />
+          <div className="w-px bg-gray-alpha-400 h-full" role="separator" />
+          <Timeline>
+            {trace.spans.map((span) => (
+              <TimelineBar
+                key={span.spanId}
+                span={span}
+                compression={compression}
+                isSelected={false}
+                onClick={() => {}}
+              />
+            ))}
+          </Timeline>
+        </div>
+      </div>
+      {activeSpan ? (
+        <>
+          <div className="w-px bg-gray-alpha-400 h-full" role="separator"></div>
+          <aside
+            id="side-panel"
+            className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden bg-background-200"
+          >
+            <button
+              type="button"
+              onClick={() => console.log('close side panel')}
+            >
+              <X />
+            </button>
+          </aside>
+        </>
+      ) : null}
+    </div>
+  );
+}
diff --git a/packages/web-shared/src/components/new-trace-viewer/types.ts b/packages/web-shared/src/components/new-trace-viewer/types.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/web-shared/src/components/new-trace-viewer/util/constants.ts b/packages/web-shared/src/components/new-trace-viewer/util/constants.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/web-shared/src/components/workflow-trace-view.tsx b/packages/web-shared/src/components/workflow-trace-view.tsx
index 9136fe327d..f29e746fdf 100644
--- a/packages/web-shared/src/components/workflow-trace-view.tsx
+++ b/packages/web-shared/src/components/workflow-trace-view.tsx
@@ -37,6 +37,7 @@ import {
   getCustomSpanEventClassName,
 } from './workflow-traces/trace-colors';
 import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
+import { NewTraceViewer } from './new-trace-viewer/trace-viewer';
 
 /**
  * While a run is live, continuously grow root.duration and rescale so the
@@ -966,6 +967,7 @@ export const WorkflowTraceViewer = ({
 
   return (
     <div className="relative w-full h-full flex">
+      <NewTraceViewer trace={trace} />
       {/* Timeline (takes remaining space) */}
       <div className="flex-1 min-w-0 relative">
         <TraceViewerContextProvider
diff --git a/packages/web-shared/src/styles.css b/packages/web-shared/src/styles.css
index 8745b3dbfb..f659134063 100644
--- a/packages/web-shared/src/styles.css
+++ b/packages/web-shared/src/styles.css
@@ -105,7 +105,7 @@
 /* Dark theme defaults */
 .dark-theme,
 .dark,
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ds-background-100: hsl(0, 0%, 7%);
   --ds-background-200: hsl(0, 0%, 10%);
 
@@ -184,3 +184,461 @@
   --ds-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.3);
 }
 
+@theme inline {
+  /* Deactivating namespaces. When you do this, all of the default utilities that use that namespace (like bg-red-500) will be removed, and only your custom values (like bg-custom) will be available. https://tailwindcss.com/docs/theme#overriding-the-default-theme */
+  /* --color-*: initial; @sev:revert */
+  --breakpoint-*: initial;
+
+  --spacing: 0.25rem;
+
+  /* Pixel Fonts */
+  --font-pixel-square: var(--font-geist-pixel-square);
+  --font-pixel-circle: var(--font-geist-pixel-circle);
+  --font-pixel-line: var(--font-geist-pixel-line);
+  --font-pixel-grid: var(--font-geist-pixel-grid);
+  --font-pixel-triangle: var(--font-geist-pixel-triangle);
+
+  --radius-xs: 0.125rem; /* Previously xs: 2px */
+  --radius-sm: 0.25rem; /* Previously sm: 4px */
+  --radius-md: 0.375rem; /* Previously DEFAULT: 6px */
+  --radius-lg: 0.5rem; /* Previously md: 8px */
+  --radius-xl: 0.75rem; /* Previously lg: 12px */
+  --radius-2xl: 1rem;
+
+  /* Override Tailwind default shadows with Geist's DS shadows */
+  --shadow-border: var(--ds-shadow-border);
+
+  --shadow-2xs: var(--ds-shadow-2xs);
+  --shadow-xs: var(--ds-shadow-xs);
+  --shadow-sm: var(--ds-shadow-small);
+  --shadow-md: var(--ds-shadow-medium);
+  --shadow-lg: var(--ds-shadow-large);
+  --shadow-xl: var(--ds-shadow-xl);
+  --shadow-2xl: var(--ds-shadow-2xl);
+
+  /* Geist Breakpoints */
+  --breakpoint-sm: 401px;
+  --breakpoint-md: 601px;
+  --breakpoint-lg: 961px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-2xl: 1400px;
+
+  --color-geist-cyan: var(--geist-cyan);
+  --color-geist-warning: var(--geist-warning);
+  --color-geist-error: var(--geist-error);
+
+  --color-black: var(--ds-black);
+  --color-white: var(--ds-white);
+
+  --color-background-100: var(--ds-background-100);
+  --color-background-200: var(--ds-background-200);
+
+  --color-gray-100: var(--ds-gray-100);
+  --color-gray-200: var(--ds-gray-200);
+  --color-gray-300: var(--ds-gray-300);
+  --color-gray-400: var(--ds-gray-400);
+  --color-gray-500: var(--ds-gray-500);
+  --color-gray-600: var(--ds-gray-600);
+  --color-gray-700: var(--ds-gray-700);
+  --color-gray-800: var(--ds-gray-800);
+  --color-gray-900: var(--ds-gray-900);
+  --color-gray-1000: var(--ds-gray-1000);
+
+  --color-gray-alpha-100: var(--ds-gray-alpha-100);
+  --color-gray-alpha-200: var(--ds-gray-alpha-200);
+  --color-gray-alpha-300: var(--ds-gray-alpha-300);
+  --color-gray-alpha-400: var(--ds-gray-alpha-400);
+  --color-gray-alpha-500: var(--ds-gray-alpha-500);
+  --color-gray-alpha-600: var(--ds-gray-alpha-600);
+  --color-gray-alpha-700: var(--ds-gray-alpha-700);
+  --color-gray-alpha-800: var(--ds-gray-alpha-800);
+  --color-gray-alpha-900: var(--ds-gray-alpha-900);
+  --color-gray-alpha-1000: var(--ds-gray-alpha-1000);
+
+  --color-blue-100: var(--ds-blue-100);
+  --color-blue-200: var(--ds-blue-200);
+  --color-blue-300: var(--ds-blue-300);
+  --color-blue-400: var(--ds-blue-400);
+  --color-blue-500: var(--ds-blue-500);
+  --color-blue-600: var(--ds-blue-600);
+  --color-blue-700: var(--ds-blue-700);
+  --color-blue-800: var(--ds-blue-800);
+  --color-blue-900: var(--ds-blue-900);
+  --color-blue-1000: var(--ds-blue-1000);
+
+  --color-red-100: var(--ds-red-100);
+  --color-red-200: var(--ds-red-200);
+  --color-red-300: var(--ds-red-300);
+  --color-red-400: var(--ds-red-400);
+  --color-red-500: var(--ds-red-500);
+  --color-red-600: var(--ds-red-600);
+  --color-red-700: var(--ds-red-700);
+  --color-red-800: var(--ds-red-800);
+  --color-red-900: var(--ds-red-900);
+  --color-red-1000: var(--ds-red-1000);
+
+  --color-amber-100: var(--ds-amber-100);
+  --color-amber-200: var(--ds-amber-200);
+  --color-amber-300: var(--ds-amber-300);
+  --color-amber-400: var(--ds-amber-400);
+  --color-amber-500: var(--ds-amber-500);
+  --color-amber-600: var(--ds-amber-600);
+  --color-amber-700: var(--ds-amber-700);
+  --color-amber-800: var(--ds-amber-800);
+  --color-amber-900: var(--ds-amber-900);
+  --color-amber-1000: var(--ds-amber-1000);
+
+  --color-green-100: var(--ds-green-100);
+  --color-green-200: var(--ds-green-200);
+  --color-green-300: var(--ds-green-300);
+  --color-green-400: var(--ds-green-400);
+  --color-green-500: var(--ds-green-500);
+  --color-green-600: var(--ds-green-600);
+  --color-green-700: var(--ds-green-700);
+  --color-green-800: var(--ds-green-800);
+  --color-green-900: var(--ds-green-900);
+  --color-green-1000: var(--ds-green-1000);
+
+  --color-teal-100: var(--ds-teal-100);
+  --color-teal-200: var(--ds-teal-200);
+  --color-teal-300: var(--ds-teal-300);
+  --color-teal-400: var(--ds-teal-400);
+  --color-teal-500: var(--ds-teal-500);
+  --color-teal-600: var(--ds-teal-600);
+  --color-teal-700: var(--ds-teal-700);
+  --color-teal-800: var(--ds-teal-800);
+  --color-teal-900: var(--ds-teal-900);
+  --color-teal-1000: var(--ds-teal-1000);
+
+  --color-purple-100: var(--ds-purple-100);
+  --color-purple-200: var(--ds-purple-200);
+  --color-purple-300: var(--ds-purple-300);
+  --color-purple-400: var(--ds-purple-400);
+  --color-purple-500: var(--ds-purple-500);
+  --color-purple-600: var(--ds-purple-600);
+  --color-purple-700: var(--ds-purple-700);
+  --color-purple-800: var(--ds-purple-800);
+  --color-purple-900: var(--ds-purple-900);
+  --color-purple-1000: var(--ds-purple-1000);
+
+  --color-pink-100: var(--ds-pink-100);
+  --color-pink-200: var(--ds-pink-200);
+  --color-pink-300: var(--ds-pink-300);
+  --color-pink-400: var(--ds-pink-400);
+  --color-pink-500: var(--ds-pink-500);
+  --color-pink-600: var(--ds-pink-600);
+  --color-pink-700: var(--ds-pink-700);
+  --color-pink-800: var(--ds-pink-800);
+  --color-pink-900: var(--ds-pink-900);
+  --color-pink-1000: var(--ds-pink-1000);
+}
+
+/* tempory utility remove once front is fully migrated to geistcn */
+@utility geist-sr-only {
+  @apply sr-only;
+}
+
+@utility clearable-input {
+  --duration: 561.04ms;
+  --timing: linear(
+    0 0%,
+    0.00484 1%,
+    0.018323 2%,
+    0.039014 3%,
+    0.065627 4%,
+    0.097013 5%,
+    0.132156 6%,
+    0.170155 7.000000000000001%,
+    0.210219 8%,
+    0.251659 9%,
+    0.293875 10%,
+    0.336353 11%,
+    0.378653 12%,
+    0.420402 13%,
+    0.461292 14.000000000000002%,
+    0.501066 15%,
+    0.53952 16%,
+    0.57649 17%,
+    0.611853 18%,
+    0.645519 19%,
+    0.677428 20%,
+    0.707546 21%,
+    0.735859 22%,
+    0.762374 23%,
+    0.787113 24%,
+    0.810113 25%,
+    0.83142 26%,
+    0.851089 27%,
+    0.869183 28.000000000000004%,
+    0.88577 28.999999999999996%,
+    0.900923 30%,
+    0.914714 31%,
+    0.927222 32%,
+    0.938521 33%,
+    0.948689 34%,
+    0.957801 35%,
+    0.965931 36%,
+    0.973151 37%,
+    0.979531 38%,
+    0.985137 39%,
+    0.990035 40%,
+    0.994286 41%,
+    0.997947 42%,
+    1.001072 43%,
+    1.003715 44%,
+    1.005922 45%,
+    1.00774 46%,
+    1.009209 47%,
+    1.010369 48%,
+    1.011256 49%,
+    1.011902 50%,
+    1.012339 51%,
+    1.012593 52%,
+    1.01269 53%,
+    1.012653 54%,
+    1.012502 55.00000000000001%,
+    1.012256 56.00000000000001%,
+    1.011932 56.99999999999999%,
+    1.011545 57.99999999999999%,
+    1.011107 59%,
+    1.010631 60%,
+    1.010127 61%,
+    1.009604 62%,
+    1.00907 63%,
+    1.008531 64%,
+    1.007993 65%,
+    1.007461 66%,
+    1.00694 67%,
+    1.006432 68%,
+    1.00594 69%,
+    1.005467 70%,
+    1.005014 71%,
+    1.004582 72%,
+    1.004173 73%,
+    1.003786 74%,
+    1.003422 75%,
+    1.003081 76%,
+    1.002763 77%,
+    1.002466 78%,
+    1.002192 79%,
+    1.001938 80%,
+    1.001705 81%,
+    1.00149 82%,
+    1.001294 83%,
+    1.001116 84%,
+    1.000954 85%,
+    1.000808 86%,
+    1.000676 87%,
+    1.000558 88%,
+    1.000452 89%,
+    1.000358 90%,
+    1.000275 91%,
+    1.000202 92%,
+    1.000138 93%,
+    1.000083 94%
+  );
+}
+
+@utility webkit-search-reset {
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+@utility animation-delay-* {
+  animation-delay: --value(--animation-delay-*);
+  animation-delay: calc(--value(integer) * 1ms);
+  animation-delay: --value([*]);
+}
+
+@utility -animation-delay-* {
+  animation-delay: calc(--value(--animation-delay-*) * -1);
+  animation-delay: calc(--value(integer) * -1ms);
+  animation-delay: calc(--value([*]) * -1);
+}
+
+@utility no-scrollbar {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Material */
+
+@utility material-base {
+  @apply bg-background-100 rounded-[6px];
+  box-shadow: var(--ds-shadow-border);
+}
+
+@utility material-small {
+  @apply bg-background-100 rounded-[6px];
+  box-shadow: var(--ds-shadow-border-small);
+}
+
+@utility material-medium {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-border-medium);
+}
+
+@utility material-large {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-border-large);
+}
+
+@utility material-tooltip {
+  @apply bg-background-100 rounded-[6px];
+  box-shadow: var(--ds-shadow-tooltip);
+}
+
+@utility material-menu {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-menu);
+}
+
+@utility material-modal {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-modal);
+}
+
+@utility material-fullscreen {
+  @apply bg-background-100 rounded-[16px];
+  box-shadow: var(--ds-shadow-fullscreen);
+}
+
+/* Typography Heading */
+
+@utility text-heading-72 {
+  @apply font-sans font-semibold text-[72px] leading-[72px] tracking-[-4.32px];
+}
+
+@utility text-heading-64 {
+  @apply font-sans font-semibold text-[64px] leading-[64px] tracking-[-3.84px];
+}
+
+@utility text-heading-56 {
+  @apply font-sans font-semibold text-[56px] leading-[56px] tracking-[-3.36px];
+}
+
+@utility text-heading-48 {
+  @apply font-sans font-semibold text-[48px] leading-[56px] tracking-[-2.88px];
+}
+
+@utility text-heading-40 {
+  @apply font-sans font-semibold text-[40px] leading-[48px] tracking-[-2.4px];
+}
+
+@utility text-heading-32 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[32px] leading-[40px] tracking-[-1.28px];
+}
+
+@utility text-heading-24 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[24px] leading-[32px] tracking-[-0.96px];
+}
+
+@utility text-heading-20 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[20px] leading-[26px] tracking-[-0.4px];
+}
+
+@utility text-heading-16 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[16px] leading-[24px] tracking-[-0.32px];
+}
+
+@utility text-heading-14 {
+  @apply font-sans font-semibold text-[14px] leading-[20px] tracking-[-0.28px];
+}
+
+/* Typography Button */
+
+@utility text-button-16 {
+  @apply font-sans font-medium text-[16px] leading-[20px];
+}
+
+@utility text-button-14 {
+  @apply font-sans font-medium text-[14px] leading-[20px];
+}
+
+@utility text-button-12 {
+  @apply font-sans font-medium text-[12px] leading-[16px];
+}
+
+/* Typography Label */
+
+@utility text-label-20 {
+  @apply font-sans font-normal text-[20px] leading-[32px];
+}
+
+@utility text-label-18 {
+  @apply font-sans font-normal text-[18px] leading-[20px];
+}
+
+@utility text-label-16 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[16px] leading-[20px];
+}
+
+@utility text-label-14 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[14px] leading-[20px];
+}
+
+@utility text-label-14-mono {
+  @apply font-mono font-normal text-[14px] leading-[20px];
+}
+
+@utility text-label-13 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[13px] leading-[16px];
+}
+
+@utility text-label-13-mono {
+  @apply font-mono font-normal text-[13px] leading-[20px];
+}
+
+@utility text-label-12 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[12px] leading-[16px];
+}
+
+@utility text-label-12-mono {
+  @apply font-mono font-normal text-[12px] leading-[16px];
+}
+
+/* Typography Copy */
+
+@utility text-copy-24 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[24px] leading-[36px];
+}
+
+@utility text-copy-20 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[20px] leading-[36px];
+}
+
+@utility text-copy-18 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[18px] leading-[28px];
+}
+
+@utility text-copy-16 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[16px] leading-[24px];
+}
+
+@utility text-copy-14 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[14px] leading-[20px];
+}
+
+@utility text-copy-14-mono {
+  @apply font-mono font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[14px] leading-[20px];
+}
+
+@utility text-copy-13 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[13px] leading-[18px];
+}
+
+@utility text-copy-13-mono {
+  @apply font-mono font-normal text-[13px] leading-[18px];
+}
+
+@utility container {
+  @apply px-6 mx-auto w-full;
+  max-width: calc(1200px + 48px);
+}

From ee38ef1af2f72f1bddd7d2445cfc09e1572c77b4 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 14:45:48 -0400
Subject: [PATCH 02/58] context

---
 .../components/event-list.tsx                 | 45 ++++++---
 .../components/new-trace-viewer/context.tsx   | 94 +++++++++++++++++++
 .../new-trace-viewer/trace-viewer.tsx         | 27 ++++--
 3 files changed, 146 insertions(+), 20 deletions(-)
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/context.tsx

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 b88855bb2c..ad9c84cd99 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
@@ -1,7 +1,7 @@
 import { StepForward } from 'lucide-react';
 import { cva } from 'class-variance-authority';
-import { Span } from '../../trace-viewer/types';
-import { formatDuration } from '../../../lib/utils';
+import type { Span } from '../../trace-viewer/types';
+import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
 
 const eventTag = cva(['rounded-sm p-1'], {
   variants: {
@@ -29,19 +29,25 @@ const toEventType = (resource: string): EventType => {
   }
 };
 
-const EventRow = ({ span }: { span: Span }) => {
+const EventRow = ({
+  span,
+  isSelected,
+  onSelectSpan,
+}: {
+  span: Span;
+  isSelected: boolean;
+  onSelectSpan: (spanId: string) => void;
+}) => {
+  const durationMs = getHighResInMs(span.duration);
+
   return (
     <li
-      key={span.spanId}
       role="treeitem"
       aria-level={0}
-      aria-selected={false}
+      aria-selected={isSelected}
       aria-expanded="false"
       className="overflow-clip group"
-      // onClick={() => {
-      //   setActiveSpan(span.spanId);
-      //   console.log(span.spanId);
-      // }}
+      onClick={() => onSelectSpan(span.spanId)}
     >
       <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-9 py-1.5 cursor-pointer flex">
         <div className="flex items-center gap-2">
@@ -52,7 +58,7 @@ const EventRow = ({ span }: { span: Span }) => {
         </div>
         <div className="ml-auto">
           <span className="text-label-14 text-gray-900 tabular-nums">
-            {formatDuration(span.duration[1])}
+            {formatDuration(durationMs)}
           </span>
         </div>
       </div>
@@ -60,7 +66,15 @@ const EventRow = ({ span }: { span: Span }) => {
   );
 };
 
-const EventList = ({ spans }: { spans: Span[] }) => {
+const EventList = ({
+  spans,
+  activeSpanId,
+  onSelectSpan,
+}: {
+  spans: Span[];
+  activeSpanId: string | null;
+  onSelectSpan: (spanId: string) => void;
+}) => {
   return (
     <ul
       id="event-list"
@@ -68,7 +82,14 @@ const EventList = ({ spans }: { spans: Span[] }) => {
       className="block min-h-0 overflow-visible px-2 py-2"
     >
       {spans.map((span) => {
-        return <EventRow key={span.spanId} span={span} />;
+        return (
+          <EventRow
+            key={span.spanId}
+            span={span}
+            isSelected={span.spanId === activeSpanId}
+            onSelectSpan={onSelectSpan}
+          />
+        );
       })}
     </ul>
   );
diff --git a/packages/web-shared/src/components/new-trace-viewer/context.tsx b/packages/web-shared/src/components/new-trace-viewer/context.tsx
new file mode 100644
index 0000000000..737251155e
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/context.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import type { Span } from '../trace-viewer/types';
+
+interface ActiveSpanContextValue {
+  activeSpanId: string | null;
+  activeSpan: Span | null;
+  setActiveSpan: (spanId: string) => void;
+  clearActiveSpan: () => void;
+}
+
+const ActiveSpanContext = createContext<ActiveSpanContextValue | null>(null);
+ActiveSpanContext.displayName = 'ActiveSpanContext';
+
+export function ActiveSpanProvider({
+  spans,
+  children,
+}: {
+  spans: Span[];
+  children: ReactNode;
+}) {
+  const [activeSpanId, setActiveSpanId] = useState<string | null>(
+    spans[0]?.spanId ?? null
+  );
+
+  useEffect(() => {
+    setActiveSpanId((currentSpanId) => {
+      if (spans.length === 0) {
+        return null;
+      }
+
+      if (currentSpanId) {
+        const hasCurrentSpan = spans.some(
+          (span) => span.spanId === currentSpanId
+        );
+        if (hasCurrentSpan) {
+          return currentSpanId;
+        }
+      }
+
+      return spans[0].spanId;
+    });
+  }, [spans]);
+
+  const activeSpan = useMemo(() => {
+    if (!activeSpanId) {
+      return null;
+    }
+
+    return spans.find((span) => span.spanId === activeSpanId) ?? null;
+  }, [activeSpanId, spans]);
+
+  const setActiveSpan = useCallback((spanId: string) => {
+    setActiveSpanId(spanId);
+  }, []);
+
+  const clearActiveSpan = useCallback(() => {
+    setActiveSpanId(null);
+  }, []);
+
+  const value = useMemo<ActiveSpanContextValue>(
+    () => ({
+      activeSpanId,
+      activeSpan,
+      setActiveSpan,
+      clearActiveSpan,
+    }),
+    [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]
+  );
+
+  return (
+    <ActiveSpanContext.Provider value={value}>
+      {children}
+    </ActiveSpanContext.Provider>
+  );
+}
+
+export const useActiveSpan = (): ActiveSpanContextValue => {
+  const context = useContext(ActiveSpanContext);
+  if (!context) {
+    throw new Error('useActiveSpan must be used within ActiveSpanProvider');
+  }
+
+  return context;
+};
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 03496ad800..b870033fe4 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -7,6 +7,7 @@ import { useMemo, type ReactNode } from 'react';
 import { X } from 'lucide-react';
 import { Timeline, TimelineBar } from './components/timeline';
 import { getHighResInMs } from '../trace-viewer/util/timing';
+import { ActiveSpanProvider, useActiveSpan } from './context';
 
 interface NewTraceViewerProps {
   trace: Trace;
@@ -21,7 +22,16 @@ const TraceHeader = () => {
 };
 
 export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
-  const activeSpan = trace.spans[0];
+  return (
+    <ActiveSpanProvider spans={trace.spans}>
+      <NewTraceViewerContent trace={trace} />
+    </ActiveSpanProvider>
+  );
+}
+
+function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
+  const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } =
+    useActiveSpan();
   const splitRatio = 0.5;
   const compression = useMemo(() => {
     let minStart = Number.POSITIVE_INFINITY;
@@ -71,7 +81,11 @@ export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
             height: '100%',
           }}
         >
-          <EventList spans={trace.spans} />
+          <EventList
+            spans={trace.spans}
+            activeSpanId={activeSpanId}
+            onSelectSpan={setActiveSpan}
+          />
           <div className="w-px bg-gray-alpha-400 h-full" role="separator" />
           <Timeline>
             {trace.spans.map((span) => (
@@ -79,8 +93,8 @@ export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
                 key={span.spanId}
                 span={span}
                 compression={compression}
-                isSelected={false}
-                onClick={() => {}}
+                isSelected={span.spanId === activeSpanId}
+                onClick={() => setActiveSpan(span.spanId)}
               />
             ))}
           </Timeline>
@@ -93,10 +107,7 @@ export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
             id="side-panel"
             className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden bg-background-200"
           >
-            <button
-              type="button"
-              onClick={() => console.log('close side panel')}
-            >
+            <button type="button" onClick={clearActiveSpan}>
               <X />
             </button>
           </aside>

From b8f0676984a2d1fc811bcb8c8f1514fbdd96fcc7 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 15:29:29 -0400
Subject: [PATCH 03/58] cleanup

---
 .../components/alt-split-pane.tsx             | 205 ++++++++++++++++++
 .../components/event-list.tsx                 |  10 +-
 .../new-trace-viewer/components/timeline.tsx  |  74 +++----
 .../components/new-trace-viewer/context.tsx   |   2 +-
 .../new-trace-viewer/trace-viewer.tsx         |  32 ++-
 5 files changed, 259 insertions(+), 64 deletions(-)
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/components/alt-split-pane.tsx

diff --git a/packages/web-shared/src/components/new-trace-viewer/components/alt-split-pane.tsx b/packages/web-shared/src/components/new-trace-viewer/components/alt-split-pane.tsx
new file mode 100644
index 0000000000..cc84593ce2
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/alt-split-pane.tsx
@@ -0,0 +1,205 @@
+'use client';
+
+import {
+  Children,
+  type Dispatch,
+  type KeyboardEvent,
+  type MutableRefObject,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  type SetStateAction,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '../../../lib/utils';
+
+const GUTTER_PX = 3;
+
+export function Divider() {
+  return <div aria-hidden className="h-full w-px shrink-0 bg-gray-alpha-400" />;
+}
+
+export interface SplitPaneProps {
+  children: ReactNode;
+  className?: string;
+  /** Initial width fraction for the first pane (0.15–0.85). */
+  defaultRatio?: number;
+}
+
+function clampRatio(v: number) {
+  return Math.min(0.85, Math.max(0.15, v));
+}
+
+function markUndoBaseline(
+  initialRatioRef: MutableRefObject<number | null>,
+  splitRatio: number
+) {
+  if (initialRatioRef.current === null) initialRatioRef.current = splitRatio;
+}
+
+function handleSplitKeyboard(
+  e: KeyboardEvent<HTMLDivElement>,
+  splitRatio: number,
+  initialRatioRef: MutableRefObject<number | null>,
+  setSplitRatio: Dispatch<SetStateAction<number>>
+): void {
+  const step = e.shiftKey ? 0.1 : 0.02;
+
+  if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+    e.preventDefault();
+    markUndoBaseline(initialRatioRef, splitRatio);
+    setSplitRatio((r) => clampRatio(r - step));
+    return;
+  }
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+    e.preventDefault();
+    markUndoBaseline(initialRatioRef, splitRatio);
+    setSplitRatio((r) => clampRatio(r + step));
+    return;
+  }
+  if (e.key === 'Home') {
+    e.preventDefault();
+    markUndoBaseline(initialRatioRef, splitRatio);
+    setSplitRatio(0.15);
+    return;
+  }
+  if (e.key === 'End') {
+    e.preventDefault();
+    markUndoBaseline(initialRatioRef, splitRatio);
+    setSplitRatio(0.85);
+    return;
+  }
+  if (e.key === 'Escape') {
+    e.preventDefault();
+    if (initialRatioRef.current !== null) {
+      setSplitRatio(initialRatioRef.current);
+      initialRatioRef.current = null;
+    }
+  }
+}
+
+export function SplitPane({
+  children,
+  className,
+  defaultRatio = 0.45,
+}: SplitPaneProps) {
+  const parts = Children.toArray(children);
+  if (parts.length !== 2) {
+    throw new Error('SplitPane expects exactly two children');
+  }
+  const [start, end] = parts;
+
+  const [splitRatio, setSplitRatio] = useState(defaultRatio);
+  const [isDraggingSplit, setIsDraggingSplit] = useState(false);
+  const innerGridRef = useRef<HTMLDivElement>(null);
+  const gutterRef = useRef<HTMLDivElement>(null);
+  const rafRef = useRef<number | null>(null);
+  const pendingRatio = useRef(defaultRatio);
+  const pointerIdRef = useRef<number | null>(null);
+  const initialRatioRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isDraggingSplit) return;
+
+    const onPointerMove = (e: globalThis.PointerEvent) => {
+      if (e.pointerId !== pointerIdRef.current) return;
+      const container = innerGridRef.current;
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      pendingRatio.current = clampRatio((e.clientX - rect.left) / rect.width);
+      if (!rafRef.current) {
+        rafRef.current = requestAnimationFrame(() => {
+          rafRef.current = null;
+          setSplitRatio(pendingRatio.current);
+        });
+      }
+    };
+
+    const onPointerUp = (e: globalThis.PointerEvent) => {
+      if (e.pointerId !== pointerIdRef.current) return;
+      const gutter = gutterRef.current;
+      if (gutter?.hasPointerCapture(e.pointerId)) {
+        gutter.releasePointerCapture(e.pointerId);
+      }
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      pointerIdRef.current = null;
+      setIsDraggingSplit(false);
+    };
+
+    document.addEventListener('pointermove', onPointerMove);
+    document.addEventListener('pointerup', onPointerUp);
+    document.addEventListener('pointercancel', onPointerUp);
+
+    return () => {
+      document.removeEventListener('pointermove', onPointerMove);
+      document.removeEventListener('pointerup', onPointerUp);
+      document.removeEventListener('pointercancel', onPointerUp);
+    };
+  }, [isDraggingSplit]);
+
+  const handleSplitPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    pointerIdRef.current = e.pointerId;
+    setIsDraggingSplit(true);
+  };
+
+  const handleLostPointerCapture = () => {
+    pointerIdRef.current = null;
+    setIsDraggingSplit(false);
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  };
+
+  const handleSplitKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    handleSplitKeyboard(e, splitRatio, initialRatioRef, setSplitRatio);
+  };
+
+  const ratioPercent = Math.round(splitRatio * 100);
+
+  return (
+    <div
+      ref={innerGridRef}
+      className={cn(
+        'grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto',
+        isDraggingSplit && 'select-none',
+        className
+      )}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `minmax(50px, ${splitRatio * 100}%) ${GUTTER_PX}px minmax(50px, ${(1 - splitRatio) * 100}%)`,
+        height: '100%',
+      }}
+    >
+      {start}
+      <div
+        ref={gutterRef}
+        role="slider"
+        aria-orientation="horizontal"
+        aria-valuenow={ratioPercent}
+        aria-valuemin={15}
+        aria-valuemax={85}
+        aria-valuetext={`${ratioPercent}%`}
+        tabIndex={0}
+        className="relative z-10 flex shrink-0 cursor-col-resize justify-center outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        onPointerDown={handleSplitPointerDown}
+        onLostPointerCapture={handleLostPointerCapture}
+        onKeyDown={handleSplitKeyDown}
+      >
+        <span className="h-full w-px bg-gray-alpha-400" aria-hidden />
+      </div>
+      {end}
+    </div>
+  );
+}
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 ad9c84cd99..ff99827085 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
@@ -1,5 +1,5 @@
-import { StepForward } from 'lucide-react';
 import { cva } from 'class-variance-authority';
+import { StepForward } from 'lucide-react';
 import type { Span } from '../../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
 
@@ -42,14 +42,14 @@ const EventRow = ({
 
   return (
     <li
+      className="overflow-clip group"
       role="treeitem"
-      aria-level={0}
       aria-selected={isSelected}
-      aria-expanded="false"
-      className="overflow-clip group"
+      aria-expanded={isSelected}
+      aria-level={1}
       onClick={() => onSelectSpan(span.spanId)}
     >
-      <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-9 py-1.5 cursor-pointer flex">
+      <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-9 py-1.5 flex">
         <div className="flex items-center gap-2">
           <span className={eventTag({ eventType: toEventType(span.resource) })}>
             <StepForward className="w-4 h-4" />
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 4fb1bbc14b..9b0418c810 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
@@ -32,30 +32,28 @@ const TimelineRow = ({
   children,
   isSelected,
   onClick,
-  title,
 }: {
   children: ReactNode;
   isSelected: boolean;
   onClick: () => void;
-  title: string;
 }) => {
   return (
-    <button
-      type="button"
-      title={title}
-      className="overflow-clip w-full px-2 group block cursor-pointer"
+    <div
+      className="overflow-clip w-full group"
       role="treeitem"
       aria-selected={isSelected}
+      aria-expanded={isSelected}
+      aria-level={1}
       onClick={onClick}
     >
       <div
         className={cn(
-          'relative flex h-9 items-center hover:bg-gray-100 rounded-sm px-2 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200'
+          'relative flex h-9 items-center hover:bg-gray-100 rounded-sm group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200'
         )}
       >
         {children}
       </div>
-    </button>
+    </div>
   );
 };
 
@@ -78,31 +76,34 @@ export const resourceStatus = cva('', {
   },
 });
 
-const spanVariants = cva('relative block h-full w-full min-w-0.5 rounded-xs', {
-  variants: {
-    status: {
-      running: 'bg-green-700',
-      failed: 'bg-red-700',
-      succeeded: 'bg-blue-700',
-      retrying: 'bg-yellow-700',
-      queued: 'bg-gray-500',
-      waiting: 'bg-gray-700',
-      sleeping: 'bg-amber-700',
-      received: 'bg-blue-700',
-    },
-    errored: {
-      true: 'bg-red-700',
-      false: '',
-    },
-    resourceType: {
-      run: 'bg-blue-700',
-      step: 'bg-green-700',
-      hook: 'bg-amber-700',
-      sleep: 'bg-purple-700',
-      default: 'bg-gray-500',
+const spanVariants = cva(
+  'relative flex h-5 w-full min-w-0.5 rounded-xs items-center',
+  {
+    variants: {
+      status: {
+        running: 'bg-green-700',
+        failed: 'bg-red-700',
+        succeeded: 'bg-blue-700',
+        retrying: 'bg-amber-700',
+        queued: 'bg-gray-500',
+        waiting: 'bg-gray-700',
+        sleeping: 'bg-amber-700',
+        received: 'bg-blue-700',
+      },
+      errored: {
+        true: 'bg-red-700',
+        false: '',
+      },
+      resourceType: {
+        run: 'bg-blue-700',
+        step: 'bg-green-700',
+        hook: 'bg-amber-700',
+        sleep: 'bg-purple-700',
+        default: 'bg-gray-500',
+      },
     },
-  },
-});
+  }
+);
 
 export const TimelineBar = memo(function TimelineBar({
   span,
@@ -147,14 +148,9 @@ export const TimelineBar = memo(function TimelineBar({
 
   const isErrored = span.status.code === 2;
   const activeStatus: SegmentStatus = isErrored ? 'failed' : 'running';
-  const durationLabel = formatDuration(Math.max(endTime - startTime, 0), true);
 
   return (
-    <TimelineRow
-      isSelected={isSelected}
-      onClick={onClick}
-      title={`${span.name} - ${durationLabel}`}
-    >
+    <TimelineRow isSelected={isSelected} onClick={onClick}>
       <div
         className="absolute top-2 h-5 min-w-0.5"
         style={{
@@ -162,7 +158,7 @@ export const TimelineBar = memo(function TimelineBar({
           width: `${widthPct}%`,
         }}
       >
-        <div className="flex h-full w-full overflow-hidden rounded-xs ring-1 ring-black/5">
+        <div className="flex flex-row space-x-0.5 w-full">
           {hasQueued && queuedBarPct > 0 ? (
             <Span status="queued" resourceType="default" width={queuedBarPct} />
           ) : null}
diff --git a/packages/web-shared/src/components/new-trace-viewer/context.tsx b/packages/web-shared/src/components/new-trace-viewer/context.tsx
index 737251155e..d20cb63437 100644
--- a/packages/web-shared/src/components/new-trace-viewer/context.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/context.tsx
@@ -2,12 +2,12 @@
 
 import {
   createContext,
+  type ReactNode,
   useCallback,
   useContext,
   useEffect,
   useMemo,
   useState,
-  type ReactNode,
 } from 'react';
 import type { Span } from '../trace-viewer/types';
 
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index b870033fe4..e74db26bb2 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-// import { cn } from "../../lib/utils";
-import EventList from './components/event-list';
-import type { Trace } from '../trace-viewer/types';
-import { useMemo, type ReactNode } from 'react';
 import { X } from 'lucide-react';
-import { Timeline, TimelineBar } from './components/timeline';
+import { type ReactNode, useMemo } from 'react';
+import type { Trace } from '../trace-viewer/types';
 import { getHighResInMs } from '../trace-viewer/util/timing';
+import { Divider, SplitPane } from './components/alt-split-pane';
+import EventList from './components/event-list';
+import { Timeline, TimelineBar } from './components/timeline';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 
 interface NewTraceViewerProps {
@@ -32,7 +32,6 @@ export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
 function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
   const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } =
     useActiveSpan();
-  const splitRatio = 0.5;
   const compression = useMemo(() => {
     let minStart = Number.POSITIVE_INFINITY;
     let maxEnd = Number.NEGATIVE_INFINITY;
@@ -62,7 +61,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
   return (
     <div
       data-pane="pane-root"
-      className="flex w-full overflow-hidden h-full max-h-full"
+      className="flex w-full h-full max-h-full"
       style={{
         display: 'grid',
         gridTemplateColumns: activeSpan
@@ -71,22 +70,17 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
         height: '100%',
       }}
     >
-      <div>
+      <div
+        id="trace-parent"
+        className="grid grid-rows-[auto_1fr] h-full min-h-0 overflow-hidden relative border"
+      >
         <TraceHeader />
-        <div
-          data-pane="left-pane"
-          style={{
-            display: 'grid',
-            gridTemplateColumns: `minmax(50px, ${splitRatio * 100}%) 3px minmax(50px, ${(1 - splitRatio) * 100}%)`,
-            height: '100%',
-          }}
-        >
+        <SplitPane>
           <EventList
             spans={trace.spans}
             activeSpanId={activeSpanId}
             onSelectSpan={setActiveSpan}
           />
-          <div className="w-px bg-gray-alpha-400 h-full" role="separator" />
           <Timeline>
             {trace.spans.map((span) => (
               <TimelineBar
@@ -98,11 +92,11 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
               />
             ))}
           </Timeline>
-        </div>
+        </SplitPane>
       </div>
       {activeSpan ? (
         <>
-          <div className="w-px bg-gray-alpha-400 h-full" role="separator"></div>
+          <Divider />
           <aside
             id="side-panel"
             className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden bg-background-200"

From 6ca75d7bcbb511b3b263d5fdc5f45da7be332c33 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 16:00:27 -0400
Subject: [PATCH 04/58] wip

---
 .../components/alt-split-pane.tsx             |  18 +-
 .../new-trace-viewer/components/timeline.tsx  | 297 ++++++++----------
 .../new-trace-viewer/detail-panel.tsx         |  57 ++++
 .../new-trace-viewer/trace-viewer.tsx         | 226 +++++++++----
 .../src/components/new-trace-viewer/utils.ts  | 158 ++++++++++
 5 files changed, 529 insertions(+), 227 deletions(-)
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/utils.ts

diff --git a/packages/web-shared/src/components/new-trace-viewer/components/alt-split-pane.tsx b/packages/web-shared/src/components/new-trace-viewer/components/alt-split-pane.tsx
index cc84593ce2..9c3ae1d0e8 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/alt-split-pane.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/alt-split-pane.tsx
@@ -4,9 +4,9 @@ import {
   Children,
   type Dispatch,
   type KeyboardEvent,
-  type MutableRefObject,
   type ReactNode,
   type PointerEvent as ReactPointerEvent,
+  type RefObject,
   type SetStateAction,
   useEffect,
   useRef,
@@ -14,7 +14,8 @@ import {
 } from 'react';
 import { cn } from '../../../lib/utils';
 
-const GUTTER_PX = 3;
+/** Wide enough for comfortable dragging; visual line stays 1px centered. */
+const GUTTER_PX = 9;
 
 export function Divider() {
   return <div aria-hidden className="h-full w-px shrink-0 bg-gray-alpha-400" />;
@@ -32,7 +33,7 @@ function clampRatio(v: number) {
 }
 
 function markUndoBaseline(
-  initialRatioRef: MutableRefObject<number | null>,
+  initialRatioRef: RefObject<number | null>,
   splitRatio: number
 ) {
   if (initialRatioRef.current === null) initialRatioRef.current = splitRatio;
@@ -41,7 +42,7 @@ function markUndoBaseline(
 function handleSplitKeyboard(
   e: KeyboardEvent<HTMLDivElement>,
   splitRatio: number,
-  initialRatioRef: MutableRefObject<number | null>,
+  initialRatioRef: RefObject<number | null>,
   setSplitRatio: Dispatch<SetStateAction<number>>
 ): void {
   const step = e.shiftKey ? 0.1 : 0.02;
@@ -192,12 +193,17 @@ export function SplitPane({
         aria-valuemax={85}
         aria-valuetext={`${ratioPercent}%`}
         tabIndex={0}
-        className="relative z-10 flex shrink-0 cursor-col-resize justify-center outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className={cn(
+          'relative z-20 isolate flex shrink-0 cursor-col-resize justify-center outline-none focus-visible:ring-2 focus-visible:ring-ring'
+        )}
         onPointerDown={handleSplitPointerDown}
         onLostPointerCapture={handleLostPointerCapture}
         onKeyDown={handleSplitKeyDown}
       >
-        <span className="h-full w-px bg-gray-alpha-400" aria-hidden />
+        <span
+          className="pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400"
+          aria-hidden
+        />
       </div>
       {end}
     </div>
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 9b0418c810..5e848e2328 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,118 +1,28 @@
-import { cva } from 'class-variance-authority';
-import { memo, type ReactNode } from 'react';
+'use client';
+
+import type { ReactNode } from 'react';
+import { memo, useMemo } from 'react';
 import { cn } from '../../../lib/utils';
-import { SegmentStatus } from '../../trace-viewer/components/span-segments';
-import type { ResourceType } from '../../trace-viewer/components/span-strategies';
 import type { Span } from '../../trace-viewer/types';
-import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
-
-const MIN_BAR_WIDTH_PCT = 0.8;
-
-export interface TimelineCompression {
-  toVisual: (time: number) => number;
-}
-
-const clamp = (value: number, min: number, max: number): number => {
-  return Math.min(Math.max(value, min), max);
-};
-
-const toResourceType = (resource: string): ResourceType => {
-  switch (resource) {
-    case 'run':
-    case 'step':
-    case 'hook':
-    case 'sleep':
-      return resource;
-    default:
-      return 'default';
-  }
-};
-
-const TimelineRow = ({
-  children,
-  isSelected,
-  onClick,
-}: {
-  children: ReactNode;
-  isSelected: boolean;
-  onClick: () => void;
-}) => {
-  return (
-    <div
-      className="overflow-clip w-full group"
-      role="treeitem"
-      aria-selected={isSelected}
-      aria-expanded={isSelected}
-      aria-level={1}
-      onClick={onClick}
-    >
-      <div
-        className={cn(
-          'relative flex h-9 items-center hover:bg-gray-100 rounded-sm group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200'
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export const resourceStatus = cva('', {
-  variants: {
-    resourceType: {
-      run: 'bg-blue-200 text-blue-900',
-      step: 'bg-green-200 text-green-900',
-      hook: 'bg-amber-200 text-amber-900',
-      sleep: 'bg-purple-200 text-purple-900',
-      default: 'bg-gray-200 text-gray-900',
-    },
-    errored: {
-      true: 'bg-red-200 text-red-900',
-      false: '',
-    },
-  },
-  defaultVariants: {
-    resourceType: 'default',
-  },
-});
-
-const spanVariants = cva(
-  'relative flex h-5 w-full min-w-0.5 rounded-xs items-center',
-  {
-    variants: {
-      status: {
-        running: 'bg-green-700',
-        failed: 'bg-red-700',
-        succeeded: 'bg-blue-700',
-        retrying: 'bg-amber-700',
-        queued: 'bg-gray-500',
-        waiting: 'bg-gray-700',
-        sleeping: 'bg-amber-700',
-        received: 'bg-blue-700',
-      },
-      errored: {
-        true: 'bg-red-700',
-        false: '',
-      },
-      resourceType: {
-        run: 'bg-blue-700',
-        step: 'bg-green-700',
-        hook: 'bg-amber-700',
-        sleep: 'bg-purple-700',
-        default: 'bg-gray-500',
-      },
-    },
-  }
-);
-
-export const TimelineBar = memo(function TimelineBar({
+import { getHighResInMs } from '../../trace-viewer/util/timing';
+import type { TimeCompression } from '../utils';
+import {
+  computeCompressedTimeMarkers,
+  computeTimeMarkers,
+  getResourceColor,
+} from '../utils';
+
+const QUEUED_BACKGROUND =
+  'radial-gradient(circle at center, var(--ds-gray-800) 0 2.5px, transparent 2.6px) center / 52px 100% repeat-x, var(--ds-gray-300)';
+
+const TimelineBar = memo(function TimelineBar({
   span,
   compression,
   isSelected,
   onClick,
 }: {
   span: Span;
-  compression: TimelineCompression;
+  compression: TimeCompression;
   isSelected: boolean;
   onClick: () => void;
 }): ReactNode {
@@ -124,80 +34,147 @@ export const TimelineBar = memo(function TimelineBar({
 
   const leftFrac = compression.toVisual(startTime);
   const rightFrac = compression.toVisual(endTime);
-  const widthFrac = Math.max(rightFrac - leftFrac, 0);
+  const widthFrac = rightFrac - leftFrac;
 
-  const leftPct = clamp(leftFrac * 100, 0, 100);
-  const maxWidthPct = Math.max(100 - leftPct, MIN_BAR_WIDTH_PCT);
-  const widthPct =
-    widthFrac > 0
-      ? clamp(widthFrac * 100, MIN_BAR_WIDTH_PCT, maxWidthPct)
-      : MIN_BAR_WIDTH_PCT;
+  const leftPct = leftFrac * 100;
+  const widthPct = widthFrac * 100;
+
+  const isErrored = span.status.code === 2;
+  const colors = getResourceColor(span.resource);
+  const barColor = isErrored
+    ? (colors.errorBar ?? 'var(--ds-red-700)')
+    : colors.bar;
 
-  const hasQueued =
-    activeStartTime != null &&
-    activeStartTime > startTime &&
-    activeStartTime < endTime;
+  const hasQueued = activeStartTime != null && activeStartTime > startTime;
 
   let queuedBarPct = 0;
   let activeBarPct = 100;
   if (hasQueued && widthFrac > 0) {
     const activeFrac = compression.toVisual(activeStartTime);
-    queuedBarPct = clamp(((activeFrac - leftFrac) / widthFrac) * 100, 0, 100);
+    queuedBarPct = ((activeFrac - leftFrac) / widthFrac) * 100;
     activeBarPct = 100 - queuedBarPct;
   }
 
-  const isErrored = span.status.code === 2;
-  const activeStatus: SegmentStatus = isErrored ? 'failed' : 'running';
-
   return (
-    <TimelineRow isSelected={isSelected} onClick={onClick}>
+    <div
+      className={cn(
+        'h-9 relative flex items-center cursor-pointer transition-[background-color] duration-[120ms] ease-in-out',
+        isSelected ? 'bg-gray-alpha-200' : 'hover:bg-gray-alpha-100'
+      )}
+      onClick={onClick}
+    >
       <div
-        className="absolute top-2 h-5 min-w-0.5"
+        className="absolute h-6 top-1.5 flex items-center rounded-sm"
         style={{
           left: `${leftPct}%`,
-          width: `${widthPct}%`,
+          width: `max(${widthPct}%, 4px)`,
         }}
       >
-        <div className="flex flex-row space-x-0.5 w-full">
-          {hasQueued && queuedBarPct > 0 ? (
-            <Span status="queued" resourceType="default" width={queuedBarPct} />
-          ) : null}
-          <Span
-            status={activeStatus}
-            resourceType={toResourceType(span.resource)}
-            width={activeBarPct}
+        {hasQueued ? (
+          <div className="flex gap-0.5 w-full">
+            <div
+              className="h-4 rounded-[2px]"
+              style={{
+                width: `${queuedBarPct}%`,
+                minWidth: 4,
+                background: QUEUED_BACKGROUND,
+              }}
+            />
+            <div
+              className="h-4 rounded-[2px]"
+              style={{
+                width: `${activeBarPct}%`,
+                minWidth: 4,
+                background: barColor,
+              }}
+            />
+          </div>
+        ) : (
+          <div
+            className="h-4 rounded-[2px]"
+            style={{
+              width: '100%',
+              minWidth: 4,
+              background: barColor,
+            }}
           />
-        </div>
+        )}
       </div>
-    </TimelineRow>
+    </div>
   );
 });
 
-const Span = ({
-  status,
-  resourceType,
-  width,
-}: {
-  status: SegmentStatus;
-  resourceType: ResourceType;
-  width: number;
-}) => {
-  return (
-    <span
-      style={{
-        width: `${clamp(width, 0, 100)}%`,
-      }}
-      className="block h-full"
-    >
-      <span className={cn(spanVariants({ status, resourceType }))} />
-    </span>
-  );
-};
+export { TimelineBar };
 
-export const Timeline = memo(function Timeline({
-  children,
+export function Timeline({
+  spans,
+  viewStart,
+  viewDuration,
+  rootStart,
+  compression,
+  isZoomed,
+  onResetZoom,
+  selectedId,
+  onSelect,
 }: {
-  children: ReactNode;
+  spans: Span[];
+  viewStart: number;
+  viewDuration: number;
+  rootStart: number;
+  compression: TimeCompression;
+  isZoomed: boolean;
+  onResetZoom: () => void;
+  selectedId: string | null;
+  onSelect: (spanId: string) => void;
 }): ReactNode {
-  return <div className="w-full h-full py-2">{children}</div>;
-});
+  const viewEnd = viewStart + viewDuration;
+
+  const markers = useMemo(
+    () =>
+      compression.isCompressed
+        ? computeCompressedTimeMarkers(
+            compression,
+            viewStart,
+            viewEnd,
+            rootStart
+          )
+        : computeTimeMarkers(viewDuration, viewStart - rootStart),
+    [compression, viewStart, viewEnd, viewDuration, rootStart]
+  );
+
+  return (
+    <>
+      <div className="sticky top-0 z-[4] bg-background-100 border-b border-gray-alpha-400 h-8 min-h-8 flex items-end px-4 pb-1">
+        {markers.map((m, i) => (
+          <span
+            key={i}
+            className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap -translate-x-1/2"
+            style={{ left: `${m.position * 100}%` }}
+          >
+            {m.label}
+          </span>
+        ))}
+        {isZoomed && (
+          <button
+            type="button"
+            className="absolute right-2 top-1/2 -translate-y-1/2 z-[5] flex items-center py-0.5 px-2 border border-gray-alpha-400 rounded-md bg-background-100 font-sans text-[11px] font-medium text-gray-900 cursor-pointer whitespace-nowrap transition-[color,border-color] duration-[120ms] ease-in-out hover:text-gray-1000 hover:border-gray-600"
+            onClick={onResetZoom}
+          >
+            Reset zoom
+          </button>
+        )}
+      </div>
+      <div className="relative py-2">
+        {spans.map((span) => (
+          <TimelineBar
+            key={span.spanId}
+            span={span}
+            compression={compression}
+            isSelected={selectedId === span.spanId}
+            onClick={() => onSelect(span.spanId)}
+          />
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx b/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx
new file mode 100644
index 0000000000..4118a325b1
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { X } from 'lucide-react';
+import type { ReactNode } from 'react';
+import type { Span } from '../trace-viewer/types';
+import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+
+interface DetailPanelProps {
+  span: Span;
+  rootStart: number;
+  onClose: () => void;
+}
+
+export function DetailPanel({
+  span,
+  rootStart,
+  onClose,
+}: DetailPanelProps): ReactNode {
+  const startMs = getHighResInMs(span.startTime);
+  const durationMs = getHighResInMs(span.duration);
+  const offsetMs = startMs - rootStart;
+
+  return (
+    <aside className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden bg-background-200">
+      <div className="flex items-center justify-between px-3 border-b border-gray-alpha-400">
+        <span className="text-sm font-medium text-gray-1000 truncate">
+          {span.name}
+        </span>
+        <button
+          type="button"
+          className="p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors"
+          onClick={onClose}
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+      <div className="overflow-y-auto p-3 space-y-3">
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm">
+          <dt className="text-gray-900">Resource</dt>
+          <dd className="text-gray-1000 font-mono">{span.resource}</dd>
+          <dt className="text-gray-900">Duration</dt>
+          <dd className="text-gray-1000 tabular-nums font-mono">
+            {formatDuration(durationMs)}
+          </dd>
+          <dt className="text-gray-900">Offset</dt>
+          <dd className="text-gray-1000 tabular-nums font-mono">
+            +{formatDuration(offsetMs)}
+          </dd>
+          <dt className="text-gray-900">Status</dt>
+          <dd className="text-gray-1000 font-mono">
+            {span.status.code === 2 ? 'Error' : 'OK'}
+          </dd>
+        </dl>
+      </div>
+    </aside>
+  );
+}
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index e74db26bb2..e08554d7cb 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -1,25 +1,32 @@
 'use client';
 
-import { X } from 'lucide-react';
-import { type ReactNode, useMemo } from 'react';
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import type { Trace } from '../trace-viewer/types';
-import { getHighResInMs } from '../trace-viewer/util/timing';
-import { Divider, SplitPane } from './components/alt-split-pane';
+import { SplitPane } from './components/alt-split-pane';
 import EventList from './components/event-list';
-import { Timeline, TimelineBar } from './components/timeline';
+import { Timeline } from './components/timeline';
 import { ActiveSpanProvider, useActiveSpan } from './context';
+import { DetailPanel } from './detail-panel';
+import { buildTimeCompression, computeRootBounds } from './utils';
 
 interface NewTraceViewerProps {
   trace: Trace;
 }
 
-const TraceHeader = () => {
-  return (
-    <header>
-      <h1>Trace</h1>
-    </header>
-  );
-};
+const MAX_ZOOM = 20;
+const TIMELINE_PADDING = 16;
+
+interface Viewport {
+  start: number;
+  end: number;
+}
 
 export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
   return (
@@ -32,31 +39,126 @@ export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
 function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
   const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } =
     useActiveSpan();
-  const compression = useMemo(() => {
-    let minStart = Number.POSITIVE_INFINITY;
-    let maxEnd = Number.NEGATIVE_INFINITY;
 
-    for (const span of trace.spans) {
-      const start = getHighResInMs(span.startTime);
-      const end = getHighResInMs(span.endTime);
+  const root = useMemo(() => computeRootBounds(trace.spans), [trace.spans]);
+
+  const [viewport, setViewport] = useState<Viewport>({
+    start: root.startTime,
+    end: root.startTime + root.duration,
+  });
+
+  useEffect(() => {
+    setViewport({ start: root.startTime, end: root.startTime + root.duration });
+  }, [root.startTime, root.duration]);
+
+  const viewDuration = viewport.end - viewport.start;
+
+  const compression = useMemo(
+    () => buildTimeCompression(trace.spans, viewport.start, viewport.end),
+    [trace.spans, viewport.start, viewport.end]
+  );
+
+  const isZoomed =
+    viewport.start > root.startTime + 0.01 ||
+    viewport.end < root.startTime + root.duration - 0.01;
+
+  const resetZoom = useCallback(() => {
+    setViewport({ start: root.startTime, end: root.startTime + root.duration });
+  }, [root.startTime, root.duration]);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        clearActiveSpan();
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [clearActiveSpan]);
+
+  const timelineRef = useRef<HTMLDivElement>(null);
 
-      if (start < minStart) minStart = start;
-      if (end > maxEnd) maxEnd = end;
-    }
+  useEffect(() => {
+    const el = timelineRef.current;
+    if (!el) return;
 
-    if (!Number.isFinite(minStart) || !Number.isFinite(maxEnd)) {
-      minStart = 0;
-      maxEnd = 1;
-    }
+    const rootS = root.startTime;
+    const rootE = root.startTime + root.duration;
+    const rootD = root.duration;
+    if (rootD <= 0) return;
 
-    const range = Math.max(maxEnd - minStart, 1);
+    const onWheel = (e: WheelEvent): void => {
+      const isZoomGesture = e.ctrlKey || e.metaKey;
+      const hasDeltaX = Math.abs(e.deltaX) > Math.abs(e.deltaY);
 
-    return {
-      toVisual(time: number): number {
-        return Math.min(Math.max((time - minStart) / range, 0), 1);
-      },
+      if (!isZoomGesture && !hasDeltaX) return;
+      e.preventDefault();
+
+      const rect = el.getBoundingClientRect();
+      const contentWidth = rect.width - TIMELINE_PADDING * 2;
+      if (contentWidth <= 0) return;
+
+      if (isZoomGesture) {
+        let dy = e.deltaY;
+        if (e.deltaMode === 1) dy *= 16;
+
+        const cursorFraction = Math.max(
+          0,
+          Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING) / contentWidth)
+        );
+        const scaleFactor = Math.pow(2, dy / 200);
+
+        setViewport((prev) => {
+          const prevDuration = prev.end - prev.start;
+          const cursorTime = prev.start + cursorFraction * prevDuration;
+          const minViewport = Math.max(10, rootD / MAX_ZOOM);
+          const newDuration = Math.max(
+            minViewport,
+            Math.min(rootD, prevDuration * scaleFactor)
+          );
+
+          let newStart = cursorTime - cursorFraction * newDuration;
+          let newEnd = newStart + newDuration;
+
+          if (newStart < rootS) {
+            newStart = rootS;
+            newEnd = rootS + newDuration;
+          }
+          if (newEnd > rootE) {
+            newEnd = rootE;
+            newStart = Math.max(rootS, rootE - newDuration);
+          }
+
+          return { start: newStart, end: newEnd };
+        });
+      } else {
+        let dx = e.deltaX;
+        if (e.deltaMode === 1) dx *= 16;
+
+        setViewport((prev) => {
+          const prevDuration = prev.end - prev.start;
+          const panAmount = (dx / contentWidth) * prevDuration;
+
+          let newStart = prev.start + panAmount;
+          let newEnd = prev.end + panAmount;
+
+          if (newStart < rootS) {
+            newStart = rootS;
+            newEnd = rootS + prevDuration;
+          }
+          if (newEnd > rootE) {
+            newEnd = rootE;
+            newStart = Math.max(rootS, rootE - prevDuration);
+          }
+
+          return { start: newStart, end: newEnd };
+        });
+      }
     };
-  }, [trace.spans]);
+
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, [root.startTime, root.duration]);
 
   return (
     <div
@@ -66,46 +168,48 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
         display: 'grid',
         gridTemplateColumns: activeSpan
           ? 'minmax(100px, 1fr) 3px clamp(50px, 430px, 100%)'
-          : 'minmax(100px, 1fr) 3px',
+          : 'minmax(100px, 1fr)',
         height: '100%',
       }}
     >
       <div
         id="trace-parent"
-        className="grid grid-rows-[auto_1fr] h-full min-h-0 overflow-hidden relative border"
+        className="grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative border border-gray-400 rounded-lg bg-background-100"
       >
-        <TraceHeader />
         <SplitPane>
-          <EventList
-            spans={trace.spans}
-            activeSpanId={activeSpanId}
-            onSelectSpan={setActiveSpan}
-          />
-          <Timeline>
-            {trace.spans.map((span) => (
-              <TimelineBar
-                key={span.spanId}
-                span={span}
-                compression={compression}
-                isSelected={span.spanId === activeSpanId}
-                onClick={() => setActiveSpan(span.spanId)}
-              />
-            ))}
-          </Timeline>
+          <div className="block min-h-0 overflow-visible">
+            <div className="sticky top-0 z-[4] bg-background-100 border-b border-gray-alpha-400 h-8 min-h-8" />
+            <EventList
+              spans={trace.spans}
+              activeSpanId={activeSpanId}
+              onSelectSpan={setActiveSpan}
+            />
+          </div>
+          <div
+            ref={timelineRef}
+            className="block min-h-0 overflow-visible relative"
+            onDoubleClick={resetZoom}
+          >
+            <Timeline
+              spans={trace.spans}
+              viewStart={viewport.start}
+              viewDuration={viewDuration}
+              rootStart={root.startTime}
+              compression={compression}
+              isZoomed={isZoomed}
+              onResetZoom={resetZoom}
+              selectedId={activeSpanId}
+              onSelect={setActiveSpan}
+            />
+          </div>
         </SplitPane>
       </div>
       {activeSpan ? (
-        <>
-          <Divider />
-          <aside
-            id="side-panel"
-            className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden bg-background-200"
-          >
-            <button type="button" onClick={clearActiveSpan}>
-              <X />
-            </button>
-          </aside>
-        </>
+        <DetailPanel
+          span={activeSpan}
+          rootStart={root.startTime}
+          onClose={clearActiveSpan}
+        />
       ) : null}
     </div>
   );
diff --git a/packages/web-shared/src/components/new-trace-viewer/utils.ts b/packages/web-shared/src/components/new-trace-viewer/utils.ts
new file mode 100644
index 0000000000..d2a6e19f31
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/utils.ts
@@ -0,0 +1,158 @@
+import type { Span } from '../trace-viewer/types';
+import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+
+// ---------------------------------------------------------------------------
+// Root bounds
+// ---------------------------------------------------------------------------
+
+export interface RootBounds {
+  startTime: number;
+  endTime: number;
+  duration: number;
+}
+
+export function computeRootBounds(spans: Span[]): RootBounds {
+  let minStart = Number.POSITIVE_INFINITY;
+  let maxEnd = Number.NEGATIVE_INFINITY;
+
+  for (const span of spans) {
+    const s = getHighResInMs(span.startTime);
+    const e = getHighResInMs(span.endTime);
+    if (s < minStart) minStart = s;
+    if (e > maxEnd) maxEnd = e;
+  }
+
+  if (!Number.isFinite(minStart) || !Number.isFinite(maxEnd)) {
+    return { startTime: 0, endTime: 1, duration: 1 };
+  }
+
+  const duration = Math.max(maxEnd - minStart, 1);
+  return { startTime: minStart, endTime: maxEnd, duration };
+}
+
+// ---------------------------------------------------------------------------
+// Time compression
+// ---------------------------------------------------------------------------
+
+export interface TimeCompression {
+  toVisual(time: number): number;
+  isCompressed: boolean;
+}
+
+export function buildTimeCompression(
+  _spans: Span[],
+  viewStart: number,
+  viewEnd: number
+): TimeCompression {
+  const range = viewEnd - viewStart;
+
+  return {
+    isCompressed: false,
+    toVisual(time: number): number {
+      if (range <= 0) return 0;
+      return Math.min(Math.max((time - viewStart) / range, 0), 1);
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Time markers
+// ---------------------------------------------------------------------------
+
+export interface TimeMarker {
+  position: number;
+  label: string;
+}
+
+const NICE_INTERVALS = [
+  1, 2, 5, 10, 20, 50, 100, 200, 500, 1_000, 2_000, 5_000, 10_000, 20_000,
+  50_000, 100_000, 200_000, 500_000, 1_000_000, 2_000_000, 5_000_000,
+  10_000_000, 20_000_000, 50_000_000, 100_000_000, 200_000_000, 500_000_000,
+  1_000_000_000, 2_000_000_000, 5_000_000_000,
+];
+
+const MAX_MARKERS = 8;
+
+function pickInterval(viewDuration: number, maxTicks: number): number {
+  for (const interval of NICE_INTERVALS) {
+    if (viewDuration / interval <= maxTicks) return interval;
+  }
+  return NICE_INTERVALS[NICE_INTERVALS.length - 1];
+}
+
+export function computeTimeMarkers(
+  viewDuration: number,
+  offset: number
+): TimeMarker[] {
+  if (viewDuration <= 0) return [];
+
+  const maxTicks = 6;
+  const interval = pickInterval(viewDuration, maxTicks);
+
+  const firstTick = Math.ceil(offset / interval) * interval;
+  const markers: TimeMarker[] = [];
+
+  for (let t = firstTick; t <= offset + viewDuration; t += interval) {
+    const position = (t - offset) / viewDuration;
+    if (position < -0.01 || position > 1.01) continue;
+    markers.push({
+      position: Math.min(Math.max(position, 0), 1),
+      label: formatDuration(Math.abs(t), true),
+    });
+    if (markers.length >= MAX_MARKERS) break;
+  }
+
+  return markers;
+}
+
+export function computeCompressedTimeMarkers(
+  compression: TimeCompression,
+  viewStart: number,
+  viewEnd: number,
+  rootStart: number
+): TimeMarker[] {
+  const viewDuration = viewEnd - viewStart;
+  if (viewDuration <= 0) return [];
+
+  const maxTicks = 6;
+  const interval = pickInterval(viewDuration, maxTicks);
+  const offset = viewStart - rootStart;
+
+  const firstTick = Math.ceil(offset / interval) * interval;
+  const markers: TimeMarker[] = [];
+
+  for (let t = firstTick; t <= offset + viewDuration; t += interval) {
+    const absTime = rootStart + t;
+    const position = compression.toVisual(absTime);
+    if (position < -0.01 || position > 1.01) continue;
+    markers.push({
+      position: Math.min(Math.max(position, 0), 1),
+      label: formatDuration(Math.abs(t), true),
+    });
+    if (markers.length >= MAX_MARKERS) break;
+  }
+
+  return markers;
+}
+
+// ---------------------------------------------------------------------------
+// Resource colors
+// ---------------------------------------------------------------------------
+
+export const RESOURCE_COLORS: Record<
+  string,
+  { bar: string; errorBar?: 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)' },
+};
+
+export function getResourceColor(resource: string): {
+  bar: string;
+  errorBar?: string;
+} {
+  return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
+}

From b3ce9b767b27cbf789f85567b1ad425422528ccf Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 16:30:30 -0400
Subject: [PATCH 05/58] wip

---
 .../{alt-split-pane.tsx => split-pane.tsx}    |  0
 .../new-trace-viewer/detail-panel.tsx         |  2 +-
 .../new-trace-viewer/trace-viewer.tsx         | 24 +++++++++++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)
 rename packages/web-shared/src/components/new-trace-viewer/components/{alt-split-pane.tsx => split-pane.tsx} (100%)

diff --git a/packages/web-shared/src/components/new-trace-viewer/components/alt-split-pane.tsx b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
similarity index 100%
rename from packages/web-shared/src/components/new-trace-viewer/components/alt-split-pane.tsx
rename to packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
diff --git a/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx b/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx
index 4118a325b1..6fa902539e 100644
--- a/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx
@@ -21,7 +21,7 @@ export function DetailPanel({
   const offsetMs = startMs - rootStart;
 
   return (
-    <aside className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden bg-background-200">
+    <aside className="grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200">
       <div className="flex items-center justify-between px-3 border-b border-gray-alpha-400">
         <span className="text-sm font-medium text-gray-1000 truncate">
           {span.name}
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index e08554d7cb..9eaa72d2ff 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react';
 import type { Trace } from '../trace-viewer/types';
-import { SplitPane } from './components/alt-split-pane';
+import { SplitPane } from './components/split-pane';
 import EventList from './components/event-list';
 import { Timeline } from './components/timeline';
 import { ActiveSpanProvider, useActiveSpan } from './context';
@@ -47,8 +47,28 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     end: root.startTime + root.duration,
   });
 
+  const prevRootRef = useRef<Viewport>({
+    start: root.startTime,
+    end: root.startTime + root.duration,
+  });
+
   useEffect(() => {
-    setViewport({ start: root.startTime, end: root.startTime + root.duration });
+    const prevRoot = prevRootRef.current;
+    const newStart = root.startTime;
+    const newEnd = root.startTime + root.duration;
+
+    setViewport((prev) => {
+      const wasAtFullExtent =
+        Math.abs(prev.start - prevRoot.start) < 0.01 &&
+        Math.abs(prev.end - prevRoot.end) < 0.01;
+
+      if (wasAtFullExtent) {
+        return { start: newStart, end: newEnd };
+      }
+      return prev;
+    });
+
+    prevRootRef.current = { start: newStart, end: newEnd };
   }, [root.startTime, root.duration]);
 
   const viewDuration = viewport.end - viewport.start;

From 977b2785e6d3739bbf01035143fdbf6276492f9e Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 16:36:06 -0400
Subject: [PATCH 06/58] Update trace-viewer.tsx

---
 .../new-trace-viewer/trace-viewer.tsx         | 52 ++++++++++++++++++-
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 9eaa72d2ff..1db5088d5b 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -9,6 +9,7 @@ import {
   useState,
 } from 'react';
 import type { Trace } from '../trace-viewer/types';
+import { getHighResInMs } from '../trace-viewer/util/timing';
 import { SplitPane } from './components/split-pane';
 import EventList from './components/event-list';
 import { Timeline } from './components/timeline';
@@ -86,6 +87,53 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     setViewport({ start: root.startTime, end: root.startTime + root.duration });
   }, [root.startTime, root.duration]);
 
+  const handleSelectSpan = useCallback(
+    (spanId: string) => {
+      setActiveSpan(spanId);
+
+      const span = trace.spans.find((s) => s.spanId === spanId);
+      if (!span) return;
+
+      const spanStart = getHighResInMs(span.startTime);
+      const spanEnd = getHighResInMs(span.endTime);
+      const spanDuration = spanEnd - spanStart;
+
+      const rootS = root.startTime;
+      const rootE = root.startTime + root.duration;
+      const rootD = root.duration;
+
+      if (spanDuration > rootD * 0.8) {
+        setViewport({ start: rootS, end: rootE });
+        return;
+      }
+
+      const padding = Math.max(spanDuration * 0.2, rootD / MAX_ZOOM / 2);
+      let newStart = spanStart - padding;
+      let newEnd = spanEnd + padding;
+
+      const minViewport = Math.max(10, rootD / MAX_ZOOM);
+      if (newEnd - newStart < minViewport) {
+        const center = (spanStart + spanEnd) / 2;
+        newStart = center - minViewport / 2;
+        newEnd = center + minViewport / 2;
+      }
+
+      if (newStart < rootS) {
+        const duration = newEnd - newStart;
+        newStart = rootS;
+        newEnd = Math.min(rootE, rootS + duration);
+      }
+      if (newEnd > rootE) {
+        const duration = newEnd - newStart;
+        newEnd = rootE;
+        newStart = Math.max(rootS, rootE - duration);
+      }
+
+      setViewport({ start: newStart, end: newEnd });
+    },
+    [setActiveSpan, trace.spans, root.startTime, root.duration]
+  );
+
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent): void => {
       if (e.key === 'Escape') {
@@ -202,7 +250,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             <EventList
               spans={trace.spans}
               activeSpanId={activeSpanId}
-              onSelectSpan={setActiveSpan}
+              onSelectSpan={handleSelectSpan}
             />
           </div>
           <div
@@ -219,7 +267,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
               isZoomed={isZoomed}
               onResetZoom={resetZoom}
               selectedId={activeSpanId}
-              onSelect={setActiveSpan}
+              onSelect={handleSelectSpan}
             />
           </div>
         </SplitPane>

From 0c3d41616ed09396b276e2e1acee150fc3e58efd Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 16:55:50 -0400
Subject: [PATCH 07/58] adjust hovers

---
 .../components/new-trace-viewer/components/timeline.tsx    | 7 +++++--
 .../src/components/new-trace-viewer/trace-viewer.tsx       | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

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 5e848e2328..1eb358a682 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
@@ -57,9 +57,12 @@ const TimelineBar = memo(function TimelineBar({
 
   return (
     <div
+      role="treeitem"
+      aria-selected={isSelected}
+      aria-expanded={isSelected}
+      aria-level={1}
       className={cn(
-        'h-9 relative flex items-center cursor-pointer transition-[background-color] duration-[120ms] ease-in-out',
-        isSelected ? 'bg-gray-alpha-200' : 'hover:bg-gray-alpha-100'
+        'h-9 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 rounded-sm aria-selected:hover:bg-gray-200'
       )}
       onClick={onClick}
     >
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 1db5088d5b..7805120f8b 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -255,7 +255,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           </div>
           <div
             ref={timelineRef}
-            className="block min-h-0 overflow-visible relative"
+            className="block min-h-0 overflow-visible relative px-2"
             onDoubleClick={resetZoom}
           >
             <Timeline

From a65d7bfe66bce48926294c5b9734d598ee3d63fd Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 17:09:55 -0400
Subject: [PATCH 08/58] time marker

---
 packages/web-shared/src/lib/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-shared/src/lib/utils.ts b/packages/web-shared/src/lib/utils.ts
index c3ec461b0f..5538b4ff50 100644
--- a/packages/web-shared/src/lib/utils.ts
+++ b/packages/web-shared/src/lib/utils.ts
@@ -54,7 +54,7 @@ export function formatDuration(ms: number, compact = false): string {
     if (ms < MS_IN_HOUR) {
       return `${durationFormatter.format(ms / MS_IN_MINUTE)}m`;
     }
-    return `${durationFormatter.format(ms / MS_IN_HOUR)}h`;
+    return `${Math.round(ms / MS_IN_HOUR)}h`;
   }
 
   // Full format: human-readable multi-part

From f076a56fd0054fe1af5d09d1753750adfec95786 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 17:51:51 -0400
Subject: [PATCH 09/58] tweak

---
 .../new-trace-viewer/components/event-list.tsx       | 12 +++++++++++-
 .../new-trace-viewer/components/timeline.tsx         |  6 +++---
 .../src/components/new-trace-viewer/trace-viewer.tsx |  2 +-
 3 files changed, 15 insertions(+), 5 deletions(-)

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 ff99827085..7faa6768cc 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
@@ -12,6 +12,9 @@ const eventTag = cva(['rounded-sm p-1'], {
       sleep: 'bg-gray-200 text-gray-900',
       default: 'bg-gray-200 text-gray-900',
     },
+    isErrored: {
+      true: 'bg-red-200 text-red-900',
+    },
   },
 });
 
@@ -39,6 +42,8 @@ const EventRow = ({
   onSelectSpan: (spanId: string) => void;
 }) => {
   const durationMs = getHighResInMs(span.duration);
+  const isErrored = span.attributes.data.status === 'failed';
+  console.log(span);
 
   return (
     <li
@@ -51,7 +56,12 @@ const EventRow = ({
     >
       <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-9 py-1.5 flex">
         <div className="flex items-center gap-2">
-          <span className={eventTag({ eventType: toEventType(span.resource) })}>
+          <span
+            className={eventTag({
+              eventType: toEventType(span.resource),
+              isErrored: isErrored || undefined,
+            })}
+          >
             <StepForward className="w-4 h-4" />
           </span>
           <span className="text-label-14">{span.name}</span>
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 1eb358a682..0a6621cd7b 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
@@ -76,7 +76,7 @@ const TimelineBar = memo(function TimelineBar({
         {hasQueued ? (
           <div className="flex gap-0.5 w-full">
             <div
-              className="h-4 rounded-[2px]"
+              className="h-4 rounded-sm"
               style={{
                 width: `${queuedBarPct}%`,
                 minWidth: 4,
@@ -84,7 +84,7 @@ const TimelineBar = memo(function TimelineBar({
               }}
             />
             <div
-              className="h-4 rounded-[2px]"
+              className="h-4 rounded-sm"
               style={{
                 width: `${activeBarPct}%`,
                 minWidth: 4,
@@ -94,7 +94,7 @@ const TimelineBar = memo(function TimelineBar({
           </div>
         ) : (
           <div
-            className="h-4 rounded-[2px]"
+            className="h-4 rounded-sm"
             style={{
               width: '100%',
               minWidth: 4,
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 7805120f8b..f6c7a3263b 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -235,7 +235,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
       style={{
         display: 'grid',
         gridTemplateColumns: activeSpan
-          ? 'minmax(100px, 1fr) 3px clamp(50px, 430px, 100%)'
+          ? 'minmax(100px, 1fr) clamp(50px, 430px, 100%)'
           : 'minmax(100px, 1fr)',
         height: '100%',
       }}

From 6c92c5c1f82905067dfb81c3d0d60f99509b97d4 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 17:53:45 -0400
Subject: [PATCH 10/58] Update event-list.tsx

---
 .../src/components/new-trace-viewer/components/event-list.tsx  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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 7faa6768cc..de32d1645d 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
@@ -42,7 +42,8 @@ const EventRow = ({
   onSelectSpan: (spanId: string) => void;
 }) => {
   const durationMs = getHighResInMs(span.duration);
-  const isErrored = span.attributes.data.status === 'failed';
+  const isErrored =
+    (span.attributes.data as Record<string, unknown>).status === 'failed';
   console.log(span);
 
   return (

From 7bc8e67da11e14e852ed824621c321d7b5270070 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 18:04:59 -0400
Subject: [PATCH 11/58] header

---
 .../components/split-pane.tsx                 | 89 ++++++++++++++-----
 .../new-trace-viewer/components/timeline.tsx  | 87 +++++++++---------
 .../new-trace-viewer/trace-viewer.tsx         | 34 +++----
 3 files changed, 132 insertions(+), 78 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
index 9c3ae1d0e8..545f87fc3f 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
@@ -26,6 +26,10 @@ export interface SplitPaneProps {
   className?: string;
   /** Initial width fraction for the first pane (0.15–0.85). */
   defaultRatio?: number;
+  /** Fixed (non-scrolling) header rendered above the start pane. */
+  startHeader?: ReactNode;
+  /** Fixed (non-scrolling) header rendered above the end pane. */
+  endHeader?: ReactNode;
 }
 
 function clampRatio(v: number) {
@@ -84,6 +88,8 @@ export function SplitPane({
   children,
   className,
   defaultRatio = 0.45,
+  startHeader,
+  endHeader,
 }: SplitPaneProps) {
   const parts = Children.toArray(children);
   if (parts.length !== 2) {
@@ -168,6 +174,65 @@ export function SplitPane({
   };
 
   const ratioPercent = Math.round(splitRatio * 100);
+  const colTemplate = `minmax(50px, ${splitRatio * 100}%) ${GUTTER_PX}px minmax(50px, ${(1 - splitRatio) * 100}%)`;
+
+  const hasHeaders = startHeader != null || endHeader != null;
+
+  const gutter = (
+    <div
+      ref={gutterRef}
+      role="slider"
+      aria-orientation="horizontal"
+      aria-valuenow={ratioPercent}
+      aria-valuemin={15}
+      aria-valuemax={85}
+      aria-valuetext={`${ratioPercent}%`}
+      tabIndex={0}
+      className={cn(
+        'relative z-20 isolate flex shrink-0 cursor-col-resize justify-center outline-none focus-visible:ring-2 focus-visible:ring-ring'
+      )}
+      onPointerDown={handleSplitPointerDown}
+      onLostPointerCapture={handleLostPointerCapture}
+      onKeyDown={handleSplitKeyDown}
+    >
+      <span
+        className="pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400"
+        aria-hidden
+      />
+    </div>
+  );
+
+  if (hasHeaders) {
+    return (
+      <div className={cn('flex flex-col h-full min-h-0', className)}>
+        <div
+          className="shrink-0 grid"
+          style={{ gridTemplateColumns: colTemplate }}
+        >
+          <div>{startHeader}</div>
+          <div className="flex justify-center">
+            <span className="h-full w-px bg-gray-alpha-400" aria-hidden />
+          </div>
+          <div>{endHeader}</div>
+        </div>
+        <div
+          ref={innerGridRef}
+          className={cn(
+            'grid flex-1 min-h-0 content-start overflow-x-hidden overflow-y-auto',
+            isDraggingSplit && 'select-none'
+          )}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: colTemplate,
+          }}
+        >
+          {start}
+          {gutter}
+          {end}
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div
@@ -179,32 +244,12 @@ export function SplitPane({
       )}
       style={{
         display: 'grid',
-        gridTemplateColumns: `minmax(50px, ${splitRatio * 100}%) ${GUTTER_PX}px minmax(50px, ${(1 - splitRatio) * 100}%)`,
+        gridTemplateColumns: colTemplate,
         height: '100%',
       }}
     >
       {start}
-      <div
-        ref={gutterRef}
-        role="slider"
-        aria-orientation="horizontal"
-        aria-valuenow={ratioPercent}
-        aria-valuemin={15}
-        aria-valuemax={85}
-        aria-valuetext={`${ratioPercent}%`}
-        tabIndex={0}
-        className={cn(
-          'relative z-20 isolate flex shrink-0 cursor-col-resize justify-center outline-none focus-visible:ring-2 focus-visible:ring-ring'
-        )}
-        onPointerDown={handleSplitPointerDown}
-        onLostPointerCapture={handleLostPointerCapture}
-        onKeyDown={handleSplitKeyDown}
-      >
-        <span
-          className="pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400"
-          aria-hidden
-        />
-      </div>
+      {gutter}
       {end}
     </div>
   );
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 0a6621cd7b..dce5eabf9e 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
@@ -109,26 +109,20 @@ const TimelineBar = memo(function TimelineBar({
 
 export { TimelineBar };
 
-export function Timeline({
-  spans,
+export function TimelineHeader({
   viewStart,
   viewDuration,
   rootStart,
   compression,
   isZoomed,
   onResetZoom,
-  selectedId,
-  onSelect,
 }: {
-  spans: Span[];
   viewStart: number;
   viewDuration: number;
   rootStart: number;
   compression: TimeCompression;
   isZoomed: boolean;
   onResetZoom: () => void;
-  selectedId: string | null;
-  onSelect: (spanId: string) => void;
 }): ReactNode {
   const viewEnd = viewStart + viewDuration;
 
@@ -146,38 +140,51 @@ export function Timeline({
   );
 
   return (
-    <>
-      <div className="sticky top-0 z-[4] bg-background-100 border-b border-gray-alpha-400 h-8 min-h-8 flex items-end px-4 pb-1">
-        {markers.map((m, i) => (
-          <span
-            key={i}
-            className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap -translate-x-1/2"
-            style={{ left: `${m.position * 100}%` }}
-          >
-            {m.label}
-          </span>
-        ))}
-        {isZoomed && (
-          <button
-            type="button"
-            className="absolute right-2 top-1/2 -translate-y-1/2 z-[5] flex items-center py-0.5 px-2 border border-gray-alpha-400 rounded-md bg-background-100 font-sans text-[11px] font-medium text-gray-900 cursor-pointer whitespace-nowrap transition-[color,border-color] duration-[120ms] ease-in-out hover:text-gray-1000 hover:border-gray-600"
-            onClick={onResetZoom}
-          >
-            Reset zoom
-          </button>
-        )}
-      </div>
-      <div className="relative py-2">
-        {spans.map((span) => (
-          <TimelineBar
-            key={span.spanId}
-            span={span}
-            compression={compression}
-            isSelected={selectedId === span.spanId}
-            onClick={() => onSelect(span.spanId)}
-          />
-        ))}
-      </div>
-    </>
+    <div className="relative bg-background-100 border-b border-gray-alpha-400 h-8 min-h-8 flex items-end px-4 pb-1">
+      {markers.map((m, i) => (
+        <span
+          key={i}
+          className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap -translate-x-1/2"
+          style={{ left: `${m.position * 100}%` }}
+        >
+          {m.label}
+        </span>
+      ))}
+      {isZoomed && (
+        <button
+          type="button"
+          className="absolute right-2 top-1/2 -translate-y-1/2 z-[5] flex items-center py-0.5 px-2 border border-gray-alpha-400 rounded-md bg-background-100 font-sans text-[11px] font-medium text-gray-900 cursor-pointer whitespace-nowrap transition-[color,border-color] duration-[120ms] ease-in-out hover:text-gray-1000 hover:border-gray-600"
+          onClick={onResetZoom}
+        >
+          Reset zoom
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function Timeline({
+  spans,
+  compression,
+  selectedId,
+  onSelect,
+}: {
+  spans: Span[];
+  compression: TimeCompression;
+  selectedId: string | null;
+  onSelect: (spanId: string) => void;
+}): ReactNode {
+  return (
+    <div className="relative py-2">
+      {spans.map((span) => (
+        <TimelineBar
+          key={span.spanId}
+          span={span}
+          compression={compression}
+          isSelected={selectedId === span.spanId}
+          onClick={() => onSelect(span.spanId)}
+        />
+      ))}
+    </div>
   );
 }
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index f6c7a3263b..b14821d7a7 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -12,7 +12,7 @@ import type { Trace } from '../trace-viewer/types';
 import { getHighResInMs } from '../trace-viewer/util/timing';
 import { SplitPane } from './components/split-pane';
 import EventList from './components/event-list';
-import { Timeline } from './components/timeline';
+import { Timeline, TimelineHeader } from './components/timeline';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { DetailPanel } from './detail-panel';
 import { buildTimeCompression, computeRootBounds } from './utils';
@@ -231,22 +231,29 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
   return (
     <div
       data-pane="pane-root"
-      className="flex w-full h-full max-h-full"
-      style={{
-        display: 'grid',
-        gridTemplateColumns: activeSpan
-          ? 'minmax(100px, 1fr) clamp(50px, 430px, 100%)'
-          : 'minmax(100px, 1fr)',
-        height: '100%',
-      }}
+      data-has-detail={activeSpan ? '' : undefined}
+      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(50px,430px,100%)]"
     >
       <div
         id="trace-parent"
         className="grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative border border-gray-400 rounded-lg bg-background-100"
       >
-        <SplitPane>
+        <SplitPane
+          startHeader={
+            <div className="bg-background-100 border-b border-gray-alpha-400 h-8 min-h-8" />
+          }
+          endHeader={
+            <TimelineHeader
+              viewStart={viewport.start}
+              viewDuration={viewDuration}
+              rootStart={root.startTime}
+              compression={compression}
+              isZoomed={isZoomed}
+              onResetZoom={resetZoom}
+            />
+          }
+        >
           <div className="block min-h-0 overflow-visible">
-            <div className="sticky top-0 z-[4] bg-background-100 border-b border-gray-alpha-400 h-8 min-h-8" />
             <EventList
               spans={trace.spans}
               activeSpanId={activeSpanId}
@@ -260,12 +267,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           >
             <Timeline
               spans={trace.spans}
-              viewStart={viewport.start}
-              viewDuration={viewDuration}
-              rootStart={root.startTime}
               compression={compression}
-              isZoomed={isZoomed}
-              onResetZoom={resetZoom}
               selectedId={activeSpanId}
               onSelect={handleSelectSpan}
             />

From f35331b900afae75194dd6b12d26a3832ed00668 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 18:10:20 -0400
Subject: [PATCH 12/58] Update utils.ts

---
 packages/web-shared/src/lib/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-shared/src/lib/utils.ts b/packages/web-shared/src/lib/utils.ts
index 5538b4ff50..c3ec461b0f 100644
--- a/packages/web-shared/src/lib/utils.ts
+++ b/packages/web-shared/src/lib/utils.ts
@@ -54,7 +54,7 @@ export function formatDuration(ms: number, compact = false): string {
     if (ms < MS_IN_HOUR) {
       return `${durationFormatter.format(ms / MS_IN_MINUTE)}m`;
     }
-    return `${Math.round(ms / MS_IN_HOUR)}h`;
+    return `${durationFormatter.format(ms / MS_IN_HOUR)}h`;
   }
 
   // Full format: human-readable multi-part

From 5ef9a9b60320472fd85059e3c9a551334841318a Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 18:58:41 -0400
Subject: [PATCH 13/58] search

---
 .../components/event-list.tsx                 | 68 +++++++++----------
 .../new-trace-viewer/trace-viewer.tsx         | 38 +++++++++--
 2 files changed, 67 insertions(+), 39 deletions(-)

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 de32d1645d..15bf24ed38 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
@@ -1,37 +1,37 @@
-import { cva } from 'class-variance-authority';
-import { StepForward } from 'lucide-react';
+import { Circle, Clock, Play, StepForward, Webhook } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
 
-const eventTag = cva(['rounded-sm p-1'], {
-  variants: {
-    eventType: {
-      run: 'bg-blue-200 text-blue-900',
-      step: 'bg-green-200 text-green-900',
-      hook: 'bg-yellow-200 text-yellow-900',
-      sleep: 'bg-gray-200 text-gray-900',
-      default: 'bg-gray-200 text-gray-900',
-    },
-    isErrored: {
-      true: 'bg-red-200 text-red-900',
-    },
-  },
-});
+interface EventStyle {
+  icon: LucideIcon;
+  className: string;
+}
 
-type EventType = 'run' | 'step' | 'hook' | 'sleep' | 'default';
+const eventStyles: Record<string, EventStyle> = {
+  run: { icon: Play, className: 'bg-blue-200 text-blue-900' },
+  step: { icon: StepForward, className: 'bg-green-200 text-green-900' },
+  hook: { icon: Webhook, className: 'bg-yellow-200 text-yellow-900' },
+  sleep: { icon: Clock, className: 'bg-gray-200 text-gray-900' },
+};
 
-const toEventType = (resource: string): EventType => {
-  switch (resource) {
-    case 'run':
-    case 'step':
-    case 'hook':
-    case 'sleep':
-      return resource;
-    default:
-      return 'default';
-  }
+const defaultStyle: EventStyle = {
+  icon: Circle,
+  className: 'bg-gray-200 text-gray-900',
 };
 
+function getEventStyle(resource: string, isErrored: boolean): EventStyle {
+  const style = eventStyles[resource] ?? defaultStyle;
+  return {
+    icon: style.icon,
+    className: cn(
+      'rounded-sm p-1',
+      isErrored ? 'bg-red-200 text-red-900' : style.className
+    ),
+  };
+}
+
 const EventRow = ({
   span,
   isSelected,
@@ -44,7 +44,10 @@ const EventRow = ({
   const durationMs = getHighResInMs(span.duration);
   const isErrored =
     (span.attributes.data as Record<string, unknown>).status === 'failed';
-  console.log(span);
+  const { icon: Icon, className: tagClassName } = getEventStyle(
+    span.resource,
+    isErrored
+  );
 
   return (
     <li
@@ -57,13 +60,8 @@ const EventRow = ({
     >
       <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-9 py-1.5 flex">
         <div className="flex items-center gap-2">
-          <span
-            className={eventTag({
-              eventType: toEventType(span.resource),
-              isErrored: isErrored || undefined,
-            })}
-          >
-            <StepForward className="w-4 h-4" />
+          <span className={tagClassName}>
+            <Icon className="w-4 h-4" />
           </span>
           <span className="text-label-14">{span.name}</span>
         </div>
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index b14821d7a7..60b30015b5 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Search, X } from 'lucide-react';
 import {
   type ReactNode,
   useCallback,
@@ -41,6 +42,17 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
   const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } =
     useActiveSpan();
 
+  const [searchQuery, setSearchQuery] = useState('');
+
+  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 root = useMemo(() => computeRootBounds(trace.spans), [trace.spans]);
 
   const [viewport, setViewport] = useState<Viewport>({
@@ -236,11 +248,29 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     >
       <div
         id="trace-parent"
-        className="grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative border border-gray-400 rounded-lg bg-background-100"
+        className="grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
       >
         <SplitPane
           startHeader={
-            <div className="bg-background-100 border-b border-gray-alpha-400 h-8 min-h-8" />
+            <div className="bg-background-100 border-b border-gray-alpha-400 h-8 min-h-8 flex items-center px-2 gap-1.5">
+              <Search className="w-3.5 h-3.5 shrink-0 text-gray-800" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Filter events..."
+                className="flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none"
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => setSearchQuery('')}
+                  className="shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              )}
+            </div>
           }
           endHeader={
             <TimelineHeader
@@ -255,7 +285,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
         >
           <div className="block min-h-0 overflow-visible">
             <EventList
-              spans={trace.spans}
+              spans={filteredSpans}
               activeSpanId={activeSpanId}
               onSelectSpan={handleSelectSpan}
             />
@@ -266,7 +296,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             onDoubleClick={resetZoom}
           >
             <Timeline
-              spans={trace.spans}
+              spans={filteredSpans}
               compression={compression}
               selectedId={activeSpanId}
               onSelect={handleSelectSpan}

From f74e80ca15609c82d88826ef037a0cdd91da4397 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 19:07:00 -0400
Subject: [PATCH 14/58] Update timeline.tsx

---
 .../src/components/new-trace-viewer/components/timeline.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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 dce5eabf9e..94d55d84e0 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
@@ -13,7 +13,7 @@ import {
 } from '../utils';
 
 const QUEUED_BACKGROUND =
-  'radial-gradient(circle at center, var(--ds-gray-800) 0 2.5px, transparent 2.6px) center / 52px 100% repeat-x, var(--ds-gray-300)';
+  'radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)';
 
 const TimelineBar = memo(function TimelineBar({
   span,
@@ -174,6 +174,7 @@ export function Timeline({
   selectedId: string | null;
   onSelect: (spanId: string) => void;
 }): ReactNode {
+  console.log('spans', spans);
   return (
     <div className="relative py-2">
       {spans.map((span) => (

From 1418a663f757e6f2c8ee95e131f4bb057e13abd2 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 19:54:29 -0400
Subject: [PATCH 15/58] ship

---
 .../new-trace-viewer/components/timeline.tsx  |  73 ++--
 .../src/components/new-trace-viewer/utils.ts  | 378 +++++++++++++++++-
 2 files changed, 411 insertions(+), 40 deletions(-)

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 94d55d84e0..d1db77c864 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
@@ -5,15 +5,24 @@ import { memo, useMemo } from 'react';
 import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
 import { getHighResInMs } from '../../trace-viewer/util/timing';
-import type { TimeCompression } from '../utils';
+import type { SegmentStatus, TimeCompression } from '../utils';
 import {
   computeCompressedTimeMarkers,
+  computeSpanSegments,
   computeTimeMarkers,
   getResourceColor,
 } from '../utils';
 
-const QUEUED_BACKGROUND =
-  'radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)';
+const SEGMENT_CLASSES: Record<SegmentStatus, string> = {
+  queued: 'segment-queued',
+  retrying: 'segment-hatched',
+  waiting: 'segment-hatched',
+  running: 'bg-blue-700',
+  failed: 'bg-red-700',
+  succeeded: 'bg-green-700',
+  sleeping: 'bg-amber-700',
+  received: 'bg-blue-700',
+};
 
 const TimelineBar = memo(function TimelineBar({
   span,
@@ -28,9 +37,6 @@ const TimelineBar = memo(function TimelineBar({
 }): ReactNode {
   const startTime = getHighResInMs(span.startTime);
   const endTime = getHighResInMs(span.endTime);
-  const activeStartTime = span.activeStartTime
-    ? getHighResInMs(span.activeStartTime)
-    : undefined;
 
   const leftFrac = compression.toVisual(startTime);
   const rightFrac = compression.toVisual(endTime);
@@ -39,22 +45,14 @@ const TimelineBar = memo(function TimelineBar({
   const leftPct = leftFrac * 100;
   const widthPct = widthFrac * 100;
 
+  const segments = useMemo(() => computeSpanSegments(span), [span]);
+
   const isErrored = span.status.code === 2;
   const colors = getResourceColor(span.resource);
-  const barColor = isErrored
+  const fallbackColor = isErrored
     ? (colors.errorBar ?? 'var(--ds-red-700)')
     : colors.bar;
 
-  const hasQueued = activeStartTime != null && activeStartTime > startTime;
-
-  let queuedBarPct = 0;
-  let activeBarPct = 100;
-  if (hasQueued && widthFrac > 0) {
-    const activeFrac = compression.toVisual(activeStartTime);
-    queuedBarPct = ((activeFrac - leftFrac) / widthFrac) * 100;
-    activeBarPct = 100 - queuedBarPct;
-  }
-
   return (
     <div
       role="treeitem"
@@ -67,38 +65,36 @@ const TimelineBar = memo(function TimelineBar({
       onClick={onClick}
     >
       <div
-        className="absolute h-6 top-1.5 flex items-center rounded-sm"
+        className="absolute h-6 top-1.5 rounded-sm"
         style={{
           left: `${leftPct}%`,
           width: `max(${widthPct}%, 4px)`,
         }}
       >
-        {hasQueued ? (
-          <div className="flex gap-0.5 w-full">
-            <div
-              className="h-4 rounded-sm"
-              style={{
-                width: `${queuedBarPct}%`,
-                minWidth: 4,
-                background: QUEUED_BACKGROUND,
-              }}
-            />
-            <div
-              className="h-4 rounded-sm"
-              style={{
-                width: `${activeBarPct}%`,
-                minWidth: 4,
-                background: barColor,
-              }}
-            />
+        {segments.length > 0 ? (
+          <div className="relative w-full h-4 top-1 [&>*:nth-child(2)]:rounded-l-sm">
+            {segments.map((seg, i) => (
+              <div
+                key={`${seg.status}-${i}`}
+                className={cn(
+                  'absolute h-full first:rounded-sm last:rounded-r-sm border-r border-white',
+                  SEGMENT_CLASSES[seg.status]
+                )}
+                style={{
+                  left: `${seg.startFraction * 100}%`,
+                  width: `${(seg.endFraction - seg.startFraction) * 100}%`,
+                  minWidth: 2,
+                }}
+              />
+            ))}
           </div>
         ) : (
           <div
-            className="h-4 rounded-sm"
+            className="h-4 rounded-sm relative top-1"
             style={{
               width: '100%',
               minWidth: 4,
-              background: barColor,
+              background: fallbackColor,
             }}
           />
         )}
@@ -174,7 +170,6 @@ export function Timeline({
   selectedId: string | null;
   onSelect: (spanId: string) => void;
 }): ReactNode {
-  console.log('spans', spans);
   return (
     <div className="relative py-2">
       {spans.map((span) => (
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 d2a6e19f31..9a5b09f280 100644
--- a/packages/web-shared/src/components/new-trace-viewer/utils.ts
+++ b/packages/web-shared/src/components/new-trace-viewer/utils.ts
@@ -1,4 +1,4 @@
-import type { Span } from '../trace-viewer/types';
+import type { Span, SpanEvent } from '../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
 
 // ---------------------------------------------------------------------------
@@ -156,3 +156,379 @@ export function getResourceColor(resource: string): {
 } {
   return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
 }
+
+// ---------------------------------------------------------------------------
+// Span segments — split a timeline bar into colored sections by event state
+// ---------------------------------------------------------------------------
+
+export type SegmentStatus =
+  | 'queued'
+  | 'running'
+  | 'failed'
+  | 'retrying'
+  | 'succeeded'
+  | 'waiting'
+  | 'sleeping'
+  | 'received';
+
+export interface Segment {
+  startFraction: number;
+  endFraction: number;
+  status: SegmentStatus;
+}
+
+function clampFraction(value: number): number {
+  return Math.max(0, Math.min(1, value));
+}
+
+function timeToFraction(
+  time: number,
+  spanStart: number,
+  spanDuration: number
+): number {
+  if (spanDuration <= 0) return 0;
+  return clampFraction((time - spanStart) / spanDuration);
+}
+
+interface EventMark {
+  time: number;
+  type: string;
+}
+
+function sortedEventMarks(
+  events: SpanEvent[],
+  relevantNames: string[]
+): EventMark[] {
+  return events
+    .filter((e) => relevantNames.includes(e.name))
+    .map((e) => ({ time: getHighResInMs(e.timestamp), type: e.name }))
+    .sort((a, b) => a.time - b.time);
+}
+
+function computeStepSegmentsFromSpan(
+  startMs: number,
+  duration: number,
+  events: SpanEvent[]
+): Segment[] {
+  const segments: Segment[] = [];
+  if (duration <= 0) return segments;
+
+  const marks = sortedEventMarks(events, [
+    'step_started',
+    'step_retrying',
+    'step_failed',
+    'step_completed',
+  ]);
+
+  if (marks.length === 0) {
+    segments.push({ startFraction: 0, endFraction: 1, status: 'running' });
+    return segments;
+  }
+
+  const firstFraction = timeToFraction(marks[0].time, startMs, duration);
+  if (firstFraction > 0.001) {
+    segments.push({
+      startFraction: 0,
+      endFraction: firstFraction,
+      status: 'queued',
+    });
+  }
+
+  for (let i = 0; i < marks.length; i++) {
+    const mark = marks[i];
+    const markFrac = timeToFraction(mark.time, startMs, duration);
+    const nextMark = marks[i + 1];
+    const nextFrac = nextMark
+      ? timeToFraction(nextMark.time, startMs, duration)
+      : 1;
+
+    if (mark.type === 'step_started') {
+      if (i === marks.length - 1) {
+        segments.push({
+          startFraction: markFrac,
+          endFraction: 1,
+          status: 'succeeded',
+        });
+      } else {
+        const nextType = nextMark.type;
+        const attemptStatus: SegmentStatus =
+          nextType === 'step_retrying' || nextType === 'step_failed'
+            ? 'failed'
+            : nextType === 'step_completed'
+              ? 'succeeded'
+              : 'running';
+        segments.push({
+          startFraction: markFrac,
+          endFraction: nextFrac,
+          status: attemptStatus,
+        });
+      }
+    } else if (mark.type === 'step_retrying') {
+      segments.push({
+        startFraction: markFrac,
+        endFraction: nextFrac,
+        status: 'retrying',
+      });
+    } else if (mark.type === 'step_failed') {
+      if (markFrac < 0.999) {
+        segments.push({
+          startFraction: markFrac,
+          endFraction: 1,
+          status: 'failed',
+        });
+      }
+    }
+  }
+
+  return segments;
+}
+
+function computeHookSegmentsFromSpan(
+  startMs: number,
+  duration: number,
+  events: SpanEvent[]
+): Segment[] {
+  const segments: Segment[] = [];
+  if (duration <= 0) return segments;
+
+  const sorted = [...events]
+    .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))
+    .sort((a, b) => a.time - b.time);
+
+  const received = sorted.find((e) => e.name === 'hook_received');
+  const disposed = sorted.find((e) => e.name === 'hook_disposed');
+
+  if (!received && !disposed) {
+    segments.push({ startFraction: 0, endFraction: 1, status: 'waiting' });
+    return segments;
+  }
+
+  const receivedFrac = received
+    ? timeToFraction(received.time, startMs, duration)
+    : null;
+  const disposedFrac = disposed
+    ? timeToFraction(disposed.time, startMs, duration)
+    : null;
+
+  if (receivedFrac !== null && receivedFrac > 0.001) {
+    segments.push({
+      startFraction: 0,
+      endFraction: receivedFrac,
+      status: 'waiting',
+    });
+  } else if (receivedFrac === null && disposedFrac !== null) {
+    segments.push({
+      startFraction: 0,
+      endFraction: disposedFrac,
+      status: 'waiting',
+    });
+  }
+
+  if (receivedFrac !== null) {
+    segments.push({
+      startFraction: receivedFrac,
+      endFraction: disposedFrac ?? 1,
+      status: 'received',
+    });
+  }
+
+  if (disposedFrac !== null && disposedFrac < 0.999) {
+    segments.push({
+      startFraction: disposedFrac,
+      endFraction: 1,
+      status: 'succeeded',
+    });
+  }
+
+  return segments;
+}
+
+function computeSleepSegmentsFromSpan(
+  startMs: number,
+  duration: number,
+  events: SpanEvent[]
+): Segment[] {
+  const segments: Segment[] = [];
+  if (duration <= 0) return segments;
+
+  const completedTime = events
+    .filter((e) => e.name === 'wait_completed')
+    .map((e) => getHighResInMs(e.timestamp))
+    .sort((a, b) => a - b)[0];
+
+  if (completedTime === undefined) {
+    segments.push({ startFraction: 0, endFraction: 1, status: 'sleeping' });
+    return segments;
+  }
+
+  const completedFrac = timeToFraction(completedTime, startMs, duration);
+  if (completedFrac > 0.001) {
+    segments.push({
+      startFraction: 0,
+      endFraction: completedFrac,
+      status: 'sleeping',
+    });
+  }
+
+  segments.push({
+    startFraction: completedFrac,
+    endFraction: 1,
+    status: 'succeeded',
+  });
+
+  return segments;
+}
+
+function computeRunSegmentsFromSpan(
+  startMs: number,
+  duration: number,
+  activeStartMs: number | undefined,
+  events: SpanEvent[],
+  attributes: Record<string, unknown>
+): Segment[] {
+  const segments: Segment[] = [];
+  if (duration <= 0) return segments;
+
+  const sorted = [...events]
+    .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))
+    .sort((a, b) => a.time - b.time);
+
+  const hasRunCreated = sorted.some((e) => e.name === 'run_created');
+
+  if (!hasRunCreated) {
+    const runData = attributes?.data as Record<string, unknown> | undefined;
+    const runStatus = runData?.status as string | undefined;
+    return computeV1RunSegments(startMs, duration, activeStartMs, runStatus);
+  }
+
+  const failedEvent = sorted.find((e) => e.name === 'run_failed');
+  const completedEvent = sorted.find((e) => e.name === 'run_completed');
+
+  let cursor = 0;
+  if (activeStartMs !== undefined && activeStartMs > startMs) {
+    const queuedFrac = timeToFraction(activeStartMs, startMs, duration);
+    if (queuedFrac > 0.001) {
+      segments.push({
+        startFraction: 0,
+        endFraction: queuedFrac,
+        status: 'queued',
+      });
+      cursor = queuedFrac;
+    }
+  }
+
+  if (failedEvent) {
+    const failedFrac = timeToFraction(failedEvent.time, startMs, duration);
+    if (failedFrac > cursor + 0.001) {
+      segments.push({
+        startFraction: cursor,
+        endFraction: failedFrac,
+        status: 'running',
+      });
+    }
+    segments.push({
+      startFraction: failedFrac,
+      endFraction: 1,
+      status: 'failed',
+    });
+  } else if (completedEvent) {
+    const completedFrac = timeToFraction(
+      completedEvent.time,
+      startMs,
+      duration
+    );
+    if (completedFrac > cursor + 0.001) {
+      segments.push({
+        startFraction: cursor,
+        endFraction: completedFrac,
+        status: 'running',
+      });
+    }
+    segments.push({
+      startFraction: completedFrac,
+      endFraction: 1,
+      status: 'succeeded',
+    });
+  } else {
+    segments.push({
+      startFraction: cursor,
+      endFraction: 1,
+      status: 'running',
+    });
+  }
+
+  return segments;
+}
+
+function computeV1RunSegments(
+  startMs: number,
+  duration: number,
+  activeStartMs: number | undefined,
+  runStatus: string | undefined
+): Segment[] {
+  const segments: Segment[] = [];
+
+  let cursor = 0;
+  if (activeStartMs !== undefined && activeStartMs > startMs) {
+    const queuedFrac = timeToFraction(activeStartMs, startMs, duration);
+    if (queuedFrac > 0.001) {
+      segments.push({
+        startFraction: 0,
+        endFraction: queuedFrac,
+        status: 'queued',
+      });
+      cursor = queuedFrac;
+    }
+  }
+
+  if (runStatus === 'failed') {
+    segments.push({ startFraction: cursor, endFraction: 1, status: 'failed' });
+  } else if (runStatus === 'completed' || runStatus === 'cancelled') {
+    segments.push({
+      startFraction: cursor,
+      endFraction: 1,
+      status: 'succeeded',
+    });
+  } else {
+    segments.push({
+      startFraction: cursor,
+      endFraction: 1,
+      status: 'running',
+    });
+  }
+
+  return segments;
+}
+
+/**
+ * Compute event-based segments for a span. Dispatches on `span.resource`
+ * to the appropriate resource-type-specific segment builder.
+ * Returns an empty array for generic (non-workflow) spans.
+ */
+export function computeSpanSegments(span: Span): Segment[] {
+  const startMs = getHighResInMs(span.startTime);
+  const endMs = getHighResInMs(span.endTime);
+  const duration = endMs - startMs;
+  const activeStartMs = span.activeStartTime
+    ? getHighResInMs(span.activeStartTime)
+    : undefined;
+
+  switch (span.resource) {
+    case 'step':
+      return computeStepSegmentsFromSpan(startMs, duration, span.events);
+    case 'hook':
+      return computeHookSegmentsFromSpan(startMs, duration, span.events);
+    case 'sleep':
+      return computeSleepSegmentsFromSpan(startMs, duration, span.events);
+    case 'run':
+      return computeRunSegmentsFromSpan(
+        startMs,
+        duration,
+        activeStartMs,
+        span.events,
+        span.attributes
+      );
+    default:
+      return [];
+  }
+}

From 595b14f5f411236701d37eb4a2526c69c1c9b467 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 19 Mar 2026 20:07:33 -0400
Subject: [PATCH 16/58] Update timeline.tsx

---
 .../new-trace-viewer/components/timeline.tsx  | 37 +++++++++++++------
 1 file changed, 25 insertions(+), 12 deletions(-)

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 d1db77c864..d6405e991e 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
@@ -13,15 +13,24 @@ import {
   getResourceColor,
 } from '../utils';
 
-const SEGMENT_CLASSES: Record<SegmentStatus, string> = {
-  queued: 'segment-queued',
-  retrying: 'segment-hatched',
-  waiting: 'segment-hatched',
-  running: 'bg-blue-700',
-  failed: 'bg-red-700',
-  succeeded: 'bg-green-700',
-  sleeping: 'bg-amber-700',
-  received: 'bg-blue-700',
+const QUEUED_BACKGROUND =
+  'radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)';
+
+const HATCHED_BACKGROUND =
+  'repeating-linear-gradient(-45deg, var(--ds-gray-400) 0px, var(--ds-gray-400) 3px, var(--ds-gray-500) 3px, var(--ds-gray-500) 6px)';
+
+const SEGMENT_CONFIG: Record<
+  SegmentStatus,
+  { className?: string; style?: React.CSSProperties }
+> = {
+  queued: { style: { background: QUEUED_BACKGROUND } },
+  retrying: { style: { background: HATCHED_BACKGROUND } },
+  waiting: { style: { background: HATCHED_BACKGROUND } },
+  running: { className: 'bg-blue-700' },
+  failed: { className: 'bg-red-700' },
+  succeeded: { className: 'bg-green-700' },
+  sleeping: { className: 'bg-amber-700' },
+  received: { className: 'bg-blue-700' },
 };
 
 const TimelineBar = memo(function TimelineBar({
@@ -77,13 +86,17 @@ const TimelineBar = memo(function TimelineBar({
               <div
                 key={`${seg.status}-${i}`}
                 className={cn(
-                  'absolute h-full first:rounded-sm last:rounded-r-sm border-r border-white',
-                  SEGMENT_CLASSES[seg.status]
+                  'absolute h-full first:rounded-sm last:rounded-r-sm',
+                  SEGMENT_CONFIG[seg.status].className
                 )}
                 style={{
                   left: `${seg.startFraction * 100}%`,
-                  width: `${(seg.endFraction - seg.startFraction) * 100}%`,
+                  width:
+                    seg.status === 'queued'
+                      ? `calc(${(seg.endFraction - seg.startFraction) * 100}% - 2px)`
+                      : `${(seg.endFraction - seg.startFraction) * 100}%`,
                   minWidth: 2,
+                  ...SEGMENT_CONFIG[seg.status].style,
                 }}
               />
             ))}

From 3ce1c8aae4b4db4faa9360a37e78712de54cf556 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Fri, 20 Mar 2026 00:20:39 -0400
Subject: [PATCH 17/58] Update event-list.tsx

---
 .../components/event-list.tsx                 | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

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 15bf24ed38..48ce1b481f 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
@@ -1,19 +1,24 @@
-import { Circle, Clock, Play, StepForward, Webhook } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
+import { Circle } from 'lucide-react';
 import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+import {
+  WorkflowIcon,
+  WebhookIcon,
+  SleepIcon,
+  StepForwardIcon,
+} from '../icons';
 
 interface EventStyle {
-  icon: LucideIcon;
+  icon: React.ComponentType<{ className?: string }>;
   className: string;
 }
 
 const eventStyles: Record<string, EventStyle> = {
-  run: { icon: Play, className: 'bg-blue-200 text-blue-900' },
-  step: { icon: StepForward, className: 'bg-green-200 text-green-900' },
-  hook: { icon: Webhook, className: 'bg-yellow-200 text-yellow-900' },
-  sleep: { icon: Clock, className: 'bg-gray-200 text-gray-900' },
+  run: { icon: WorkflowIcon, className: 'bg-blue-200 text-blue-900' },
+  step: { icon: StepForwardIcon, className: 'bg-green-200 text-green-900' },
+  hook: { icon: WebhookIcon, className: 'bg-yellow-200 text-yellow-900' },
+  sleep: { icon: SleepIcon, className: 'bg-gray-200 text-gray-900' },
 };
 
 const defaultStyle: EventStyle = {

From a6514a03f13711c04b5c3a1fd04c7fd5bf75572d Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Fri, 20 Mar 2026 00:21:07 -0400
Subject: [PATCH 18/58] Create icons.tsx

---
 .../src/components/new-trace-viewer/icons.tsx | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/icons.tsx

diff --git a/packages/web-shared/src/components/new-trace-viewer/icons.tsx b/packages/web-shared/src/components/new-trace-viewer/icons.tsx
new file mode 100644
index 0000000000..e0ad6362dd
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/icons.tsx
@@ -0,0 +1,79 @@
+const WorkflowIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      stroke-linejoin="round"
+      style={{ color: 'currentColor' }}
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        d="M5.75 7L6.4209 7.33594L4.85254 10.4717C5.38789 10.771 5.75 11.3431 5.75 12V14C5.75 14.9665 4.96648 15.75 4 15.75H2C1.03352 15.75 0.25 14.9665 0.25 14V12C0.25 11.0335 1.03352 10.25 2 10.25H3.28711L5.0791 6.66504L5.75 7ZM14 10.25C14.9665 10.25 15.75 11.0335 15.75 12V14C15.75 14.9665 14.9665 15.75 14 15.75H12C11.1185 15.75 10.3909 15.098 10.2695 14.25H7V12.75H10.25V12C10.25 11.0335 11.0335 10.25 12 10.25H14ZM2 11.75C1.86192 11.75 1.75 11.8619 1.75 12V14C1.75 14.1381 1.86192 14.25 2 14.25H4C4.13808 14.25 4.25 14.1381 4.25 14V12C4.25 11.8619 4.13808 11.75 4 11.75H2ZM12 11.75C11.8619 11.75 11.75 11.8619 11.75 12V14C11.75 14.1381 11.8619 14.25 12 14.25H14C14.1381 14.25 14.25 14.1381 14.25 14V12C14.25 11.8619 14.1381 11.75 14 11.75H12ZM9 0.25C9.96649 0.25 10.75 1.03351 10.75 2V4C10.75 4.44642 10.5808 4.85197 10.3057 5.16113L12.2041 8.6416L10.8877 9.36035L8.91895 5.75H7C6.03351 5.75 5.25 4.96649 5.25 4V2C5.25 1.03351 6.03351 0.25 7 0.25H9ZM7 1.75C6.86193 1.75 6.75 1.86193 6.75 2V4C6.75 4.13807 6.86193 4.25 7 4.25H9C9.13807 4.25 9.25 4.13807 9.25 4V2C9.25 1.86193 9.13807 1.75 9 1.75H7Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const WebhookIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      stroke-linejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.8349 3.24994C5.14454 4.44567 5.55423 5.97464 6.74996 6.665L7.39465 7.03721L7.02726 7.68466L5.14599 11C5.21289 11.1531 5.25 11.3222 5.25 11.5C5.25 12.1904 4.69036 12.75 4 12.75C3.30964 12.75 2.75 12.1904 2.75 11.5C2.75 10.8634 3.22584 10.338 3.84123 10.26L5.38944 7.5316C3.95909 6.30274 3.55857 4.19264 4.53586 2.49994C5.64043 0.586765 8.08679 -0.0687357 9.99996 1.03583C11.836 2.09584 12.5137 4.39156 11.5892 6.26591L10.4949 4.33754C10.4418 3.53274 10.0009 2.76843 9.24996 2.33487C8.05423 1.64452 6.52525 2.0542 5.8349 3.24994ZM9.146 4.99996C9.21289 4.84686 9.25 4.67776 9.25 4.5C9.25 3.80964 8.69036 3.25 8 3.25C7.30964 3.25 6.75 3.80964 6.75 4.5C6.75 5.13659 7.22586 5.66203 7.84127 5.74002L9.72266 9.05556L10.0956 9.71274L10.75 9.33493C11.9457 8.64458 13.4747 9.05427 14.165 10.25C14.8554 11.4457 14.4457 12.9747 13.25 13.6651C12.5047 14.0953 11.63 14.0983 10.9096 13.75H8.69252C9.85895 15.4685 12.1727 16.0191 14 14.9641C15.9131 13.8595 16.5686 11.4132 15.4641 9.5C14.4886 7.81038 12.4665 7.10169 10.6895 7.71998L9.146 4.99996ZM13.25 11.5C13.25 12.1904 12.6904 12.75 12 12.75C11.591 12.75 11.228 12.5536 10.9999 12.25H7.9298C7.57875 14.1006 5.95279 15.5 4 15.5C1.79086 15.5 0 13.7091 0 11.5C0 9.40018 1.61801 7.67826 3.67529 7.51299L2.58098 9.44147C1.92792 9.89251 1.5 10.6463 1.5 11.5C1.5 12.8807 2.61929 14 4 14C5.38071 14 6.5 12.8807 6.5 11.5V10.75H7.25H10.9999C11.228 10.4464 11.591 10.25 12 10.25C12.6904 10.25 13.25 10.8096 13.25 11.5Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const SleepIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.25 1.25V2.03971C5.87928 2.18571 4.62678 2.72736 3.6089 3.54824L3.03033 2.96967L2.5 2.43934L1.43934 3.5L1.96967 4.03033L2.54824 4.6089C1.57979 5.80976 1 7.33717 1 9C1 12.866 4.13401 16 8 16C11.866 16 15 12.866 15 9C15 7.33717 14.4202 5.80976 13.4518 4.6089L14.0303 4.03033L14.5607 3.5L13.5 2.43934L12.9697 2.96967L12.3911 3.54824C11.3732 2.72736 10.1207 2.18571 8.75 2.03971V1.25H9.25H10V-0.25H9.25H8.75H7.25H6.75H6V1.25H6.75H7.25ZM2.5 9C2.5 5.96243 4.96243 3.5 8 3.5C11.0376 3.5 13.5 5.96243 13.5 9C13.5 12.0376 11.0376 14.5 8 14.5C4.96243 14.5 2.5 12.0376 2.5 9ZM8.75 6.75V6H7.25V6.75V9V9.75H8.75V9V6.75Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const StepForwardIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+export { WorkflowIcon, WebhookIcon, SleepIcon, StepForwardIcon };

From a905c3d08303a0a7ebbad69a8af38e042ecb6a2f Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Fri, 20 Mar 2026 00:21:20 -0400
Subject: [PATCH 19/58] Update trace-viewer.tsx

---
 .../new-trace-viewer/trace-viewer.tsx         | 77 +++++++++++++++++--
 1 file changed, 70 insertions(+), 7 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 60b30015b5..ac30c69694 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -30,6 +30,69 @@ interface Viewport {
   end: number;
 }
 
+function useAnimatedViewport(initial: Viewport) {
+  const [viewport, setViewportState] = useState<Viewport>(initial);
+  const animRef = useRef<{
+    raf: number;
+    from: Viewport;
+    to: Viewport;
+    start: number;
+  } | null>(null);
+  const currentRef = useRef(initial);
+  currentRef.current = viewport;
+
+  const cancel = useCallback(() => {
+    if (animRef.current) {
+      cancelAnimationFrame(animRef.current.raf);
+      animRef.current = null;
+    }
+  }, []);
+
+  const animateTo = useCallback(
+    (target: Viewport) => {
+      cancel();
+      const from = currentRef.current;
+      const anim = { raf: 0, from, to: target, start: performance.now() };
+
+      const tick = () => {
+        const t = Math.min((performance.now() - anim.start) / 150, 1);
+        const e = 1 - (1 - t) * (1 - t);
+        setViewportState({
+          start: anim.from.start + (anim.to.start - anim.from.start) * e,
+          end: anim.from.end + (anim.to.end - anim.from.end) * e,
+        });
+        if (t < 1) anim.raf = requestAnimationFrame(tick);
+        else animRef.current = null;
+      };
+
+      animRef.current = anim;
+      anim.raf = requestAnimationFrame(tick);
+    },
+    [cancel]
+  );
+
+  const setViewport = useCallback(
+    (update: Viewport | ((prev: Viewport) => Viewport)) => {
+      cancel();
+      if (typeof update === 'function') {
+        setViewportState((prev) => {
+          const next = update(prev);
+          currentRef.current = next;
+          return next;
+        });
+      } else {
+        currentRef.current = update;
+        setViewportState(update);
+      }
+    },
+    [cancel]
+  );
+
+  useEffect(() => cancel, [cancel]);
+
+  return { viewport, setViewport, animateTo };
+}
+
 export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
   return (
     <ActiveSpanProvider spans={trace.spans}>
@@ -55,7 +118,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   const root = useMemo(() => computeRootBounds(trace.spans), [trace.spans]);
 
-  const [viewport, setViewport] = useState<Viewport>({
+  const { viewport, setViewport, animateTo } = useAnimatedViewport({
     start: root.startTime,
     end: root.startTime + root.duration,
   });
@@ -96,8 +159,8 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     viewport.end < root.startTime + root.duration - 0.01;
 
   const resetZoom = useCallback(() => {
-    setViewport({ start: root.startTime, end: root.startTime + root.duration });
-  }, [root.startTime, root.duration]);
+    animateTo({ start: root.startTime, end: root.startTime + root.duration });
+  }, [animateTo, root.startTime, root.duration]);
 
   const handleSelectSpan = useCallback(
     (spanId: string) => {
@@ -115,7 +178,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
       const rootD = root.duration;
 
       if (spanDuration > rootD * 0.8) {
-        setViewport({ start: rootS, end: rootE });
+        animateTo({ start: rootS, end: rootE });
         return;
       }
 
@@ -141,9 +204,9 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
         newStart = Math.max(rootS, rootE - duration);
       }
 
-      setViewport({ start: newStart, end: newEnd });
+      animateTo({ start: newStart, end: newEnd });
     },
-    [setActiveSpan, trace.spans, root.startTime, root.duration]
+    [animateTo, setActiveSpan, trace.spans, root.startTime, root.duration]
   );
 
   useEffect(() => {
@@ -244,7 +307,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     <div
       data-pane="pane-root"
       data-has-detail={activeSpan ? '' : undefined}
-      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(50px,430px,100%)]"
+      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(50px,320px,100%)]"
     >
       <div
         id="trace-parent"

From 202b5b559c0711bc1d71990ba2c528955889952e Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Fri, 20 Mar 2026 00:21:34 -0400
Subject: [PATCH 20/58] Update utils.ts

---
 packages/web-shared/src/lib/utils.ts | 47 +++++++++++++---------------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/packages/web-shared/src/lib/utils.ts b/packages/web-shared/src/lib/utils.ts
index c3ec461b0f..ad06843804 100644
--- a/packages/web-shared/src/lib/utils.ts
+++ b/packages/web-shared/src/lib/utils.ts
@@ -7,7 +7,12 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-const durationFormatter = new Intl.NumberFormat(undefined, {
+const compactFormatter = new Intl.NumberFormat(undefined, {
+  maximumFractionDigits: 2,
+});
+
+const secondsFormatter = new Intl.NumberFormat(undefined, {
+  minimumFractionDigits: 2,
   maximumFractionDigits: 2,
 });
 
@@ -20,48 +25,40 @@ const MS_IN_DAY = 24 * MS_IN_HOUR;
  * Formats a duration in milliseconds to a human-readable string.
  *
  * @param ms - Duration in milliseconds
- * @param compact - If true, returns a single-unit format (e.g., "45s", "2.5m").
- *                  If false (default), returns multi-part format (e.g., "1h 30m", "2d 5h").
+ * @param compact - If true, returns a single-unit format (e.g., "0.38s", "2.5m").
+ *                  If false (default), returns multi-part format (e.g., "1m 13.21s", "2d 5h 3m 12.00s").
  *
- * Compact format:
- * - < 1s: shows milliseconds (e.g., "500ms")
- * - < 1m: shows seconds (e.g., "45s")
- * - < 1h: shows minutes (e.g., "45m")
+ * Compact format (timeline markers):
+ * - < 1m: shows seconds (e.g., "0.38s", "45s")
+ * - < 1h: shows minutes (e.g., "2.5m")
  * - >= 1h: shows hours (e.g., "2.5h")
  *
  * Full format:
- * - < 1s: shows milliseconds (e.g., "500ms")
- * - < 1m: shows seconds (e.g., "45.5s")
- * - >= 1m: shows human-readable format (e.g., "1h 30m", "2d 5h")
+ * - < 1m: shows seconds (e.g., "0.38s", "2.71s")
+ * - >= 1m: shows decomposed format with fractional seconds (e.g., "1m 13.21s", "2m 13.04s")
  */
 export function formatDuration(ms: number, compact = false): string {
   if (ms === 0) {
-    return '0';
+    return '0s';
   }
 
-  // For durations less than 1 second, show milliseconds
-  if (ms < MS_IN_SECOND) {
-    return `${durationFormatter.format(ms)}ms`;
-  }
-
-  // For durations less than 1 minute, show seconds
   if (ms < MS_IN_MINUTE) {
-    return `${durationFormatter.format(ms / MS_IN_SECOND)}s`;
+    return `${secondsFormatter.format(ms / MS_IN_SECOND)}s`;
   }
 
-  // Compact format: single unit
+  // Compact format: single unit for timeline markers
   if (compact) {
     if (ms < MS_IN_HOUR) {
-      return `${durationFormatter.format(ms / MS_IN_MINUTE)}m`;
+      return `${compactFormatter.format(ms / MS_IN_MINUTE)}m`;
     }
-    return `${durationFormatter.format(ms / MS_IN_HOUR)}h`;
+    return `${compactFormatter.format(ms / MS_IN_HOUR)}h`;
   }
 
-  // Full format: human-readable multi-part
+  // Full format: decompose into larger units + fractional seconds
   const days = Math.floor(ms / MS_IN_DAY);
   const hours = Math.floor((ms % MS_IN_DAY) / MS_IN_HOUR);
   const minutes = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
-  const seconds = Math.floor((ms % MS_IN_MINUTE) / MS_IN_SECOND);
+  const seconds = (ms % MS_IN_MINUTE) / MS_IN_SECOND;
 
   const parts: string[] = [];
 
@@ -74,9 +71,7 @@ export function formatDuration(ms: number, compact = false): string {
   if (minutes > 0) {
     parts.push(`${minutes}m`);
   }
-  if (hours <= 1 && (seconds > 0 || parts.length === 0)) {
-    parts.push(`${seconds}s`);
-  }
+  parts.push(`${secondsFormatter.format(seconds)}s`);
 
   return parts.join(' ');
 }

From ffcebde441a6d21e9d349e1e0459f3edac6ec695 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Fri, 20 Mar 2026 17:43:52 -0400
Subject: [PATCH 21/58] new trace viewrr

---
 packages/web-shared/src/components/index.ts   |  1 +
 .../new-trace-viewer/trace-viewer.tsx         |  2 +-
 .../src/components/trace-viewer-new.tsx       | 33 +++++++++++++++++++
 .../src/components/workflow-trace-view.tsx    |  1 -
 4 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 packages/web-shared/src/components/trace-viewer-new.tsx

diff --git a/packages/web-shared/src/components/index.ts b/packages/web-shared/src/components/index.ts
index f62e0a5c0b..ee49551d80 100644
--- a/packages/web-shared/src/components/index.ts
+++ b/packages/web-shared/src/components/index.ts
@@ -27,3 +27,4 @@ export { LoadMoreButton } from './ui/load-more-button';
 export { MenuDropdown, type MenuDropdownOption } from './ui/menu-dropdown';
 export { Spinner } from './ui/spinner';
 export { WorkflowTraceViewer } from './workflow-trace-view';
+export { NewTraceViewer } from './trace-viewer-new';
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index ac30c69694..5001c90b89 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -321,7 +321,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
                 type="text"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Filter events..."
+                placeholder="Search events..."
                 className="flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none"
               />
               {searchQuery && (
diff --git a/packages/web-shared/src/components/trace-viewer-new.tsx b/packages/web-shared/src/components/trace-viewer-new.tsx
new file mode 100644
index 0000000000..09b70a6e43
--- /dev/null
+++ b/packages/web-shared/src/components/trace-viewer-new.tsx
@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { WorkflowRun } from '@workflow/core/runtime';
+import { buildTrace, TraceWithMeta } from '../lib/trace-builder';
+import { Event } from '@workflow/world';
+import { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';
+import { Trace } from './trace-viewer/types';
+
+const NewTraceViewer = ({
+  run,
+  events,
+}: {
+  run: WorkflowRun;
+  events: Event[];
+}) => {
+  // Build trace only when actual data changes — no timer-driven rebuilds.
+  // Active span widths are animated imperatively by useLiveTick at 60fps.
+  const traceWithMeta: TraceWithMeta | undefined = useMemo(() => {
+    if (!run?.runId) {
+      return undefined;
+    }
+    return buildTrace(run, events, new Date());
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep; useLiveTick handles live growth
+  }, [run, events]);
+  const trace = traceWithMeta;
+
+  return (
+    <div className="relative w-full h-full flex">
+      <NewTraceViewerComponent trace={trace as Trace} />
+    </div>
+  );
+};
+
+export { NewTraceViewer };
diff --git a/packages/web-shared/src/components/workflow-trace-view.tsx b/packages/web-shared/src/components/workflow-trace-view.tsx
index f29e746fdf..b5f43eb7c6 100644
--- a/packages/web-shared/src/components/workflow-trace-view.tsx
+++ b/packages/web-shared/src/components/workflow-trace-view.tsx
@@ -967,7 +967,6 @@ export const WorkflowTraceViewer = ({
 
   return (
     <div className="relative w-full h-full flex">
-      <NewTraceViewer trace={trace} />
       {/* Timeline (takes remaining space) */}
       <div className="flex-1 min-w-0 relative">
         <TraceViewerContextProvider

From 6f42f16a43bb8835a3f9003a588c28c9b9528e04 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Fri, 20 Mar 2026 17:46:02 -0400
Subject: [PATCH 22/58] Update workflow-trace-view.tsx

---
 packages/web-shared/src/components/workflow-trace-view.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-shared/src/components/workflow-trace-view.tsx b/packages/web-shared/src/components/workflow-trace-view.tsx
index b5f43eb7c6..9136fe327d 100644
--- a/packages/web-shared/src/components/workflow-trace-view.tsx
+++ b/packages/web-shared/src/components/workflow-trace-view.tsx
@@ -37,7 +37,6 @@ import {
   getCustomSpanEventClassName,
 } from './workflow-traces/trace-colors';
 import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
-import { NewTraceViewer } from './new-trace-viewer/trace-viewer';
 
 /**
  * While a run is live, continuously grow root.duration and rescale so the

From e7fd6b5d9c0aedb4082f263f99fc6f6fc4b71541 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Fri, 20 Mar 2026 22:03:05 +0000
Subject: [PATCH 23/58] Fix: Runtime crash when `trace` is `undefined`:
 `NewTraceViewerComponent` receives `undefined` (cast as `Trace`) and
 immediately accesses `trace.spans`, causing "Cannot read properties of
 undefined".
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit fixes the issue reported at packages/web-shared/src/components/trace-viewer-new.tsx:28

**Bug Analysis:**

In `trace-viewer-new.tsx`, the `buildTrace` function returns `undefined` when `!run?.runId`. The result is stored in `trace` which has type `TraceWithMeta | undefined`. However, on line 28, `trace` is passed directly to `NewTraceViewerComponent` with a type assertion `trace as Trace`, which silences the TypeScript error but does not prevent the runtime crash.

Inside `NewTraceViewerComponent` (in `new-trace-viewer/trace-viewer.tsx` line 98), the component immediately accesses `trace.spans`:

```tsx
<ActiveSpanProvider spans={trace.spans}>
```

When `trace` is `undefined`, this produces: `TypeError: Cannot read properties of undefined (reading 'spans')`.

This happens whenever the component renders before `run.runId` is available — a normal scenario during initial loading.

The old `WorkflowTraceViewer` component (in `workflow-trace-view.tsx` line 953) correctly handles this with a `if (!trace)` guard that renders a loading skeleton. The new component lacks this guard.

**Fix:**

Added a null guard in `trace-viewer-new.tsx` that checks `if (!trace)` before rendering `NewTraceViewerComponent`. When trace is undefined, a simple loading placeholder is rendered instead. This prevents the crash and follows the same pattern as the existing `WorkflowTraceViewer`. The `as Trace` cast on line 28 is now safe because `trace` is guaranteed to be defined after the guard.


Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: mitul-s <mitulxshah@gmail.com>
---
 packages/web-shared/src/components/trace-viewer-new.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/web-shared/src/components/trace-viewer-new.tsx b/packages/web-shared/src/components/trace-viewer-new.tsx
index 09b70a6e43..44853bbd4f 100644
--- a/packages/web-shared/src/components/trace-viewer-new.tsx
+++ b/packages/web-shared/src/components/trace-viewer-new.tsx
@@ -23,6 +23,14 @@ const NewTraceViewer = ({
   }, [run, events]);
   const trace = traceWithMeta;
 
+  if (!trace) {
+    return (
+      <div className="relative w-full h-full flex items-center justify-center">
+        <div className="text-gray-500 text-sm">Loading trace…</div>
+      </div>
+    );
+  }
+
   return (
     <div className="relative w-full h-full flex">
       <NewTraceViewerComponent trace={trace as Trace} />

From 970233a0f190dd484e90debec28e707bd1332282 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Mon, 30 Mar 2026 18:15:38 -0400
Subject: [PATCH 24/58] fixed edge view

---
 .../new-trace-viewer/components/timeline.tsx  | 36 ++++++++++++++++---
 .../src/components/workflow-trace-view.tsx    |  4 ++-
 packages/web-shared/src/lib/utils.ts          |  6 ++--
 3 files changed, 38 insertions(+), 8 deletions(-)

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 d6405e991e..ae2cb3e715 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 type { ReactNode } from 'react';
-import { memo, useMemo } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
 import { getHighResInMs } from '../../trace-viewer/util/timing';
@@ -33,14 +33,18 @@ const SEGMENT_CONFIG: Record<
   received: { className: 'bg-blue-700' },
 };
 
+const FIXED_BAR_WIDTH_PX = 4;
+
 const TimelineBar = memo(function TimelineBar({
   span,
   compression,
+  containerWidth,
   isSelected,
   onClick,
 }: {
   span: Span;
   compression: TimeCompression;
+  containerWidth: number;
   isSelected: boolean;
   onClick: () => void;
 }): ReactNode {
@@ -54,6 +58,9 @@ const TimelineBar = memo(function TimelineBar({
   const leftPct = leftFrac * 100;
   const widthPct = widthFrac * 100;
 
+  const pixelWidth = widthFrac * containerWidth;
+  const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;
+
   const segments = useMemo(() => computeSpanSegments(span), [span]);
 
   const isErrored = span.status.code === 2;
@@ -77,10 +84,17 @@ const TimelineBar = memo(function TimelineBar({
         className="absolute h-6 top-1.5 rounded-sm"
         style={{
           left: `${leftPct}%`,
-          width: `max(${widthPct}%, 4px)`,
+          width: isCompressed
+            ? `${FIXED_BAR_WIDTH_PX}px`
+            : `max(${widthPct}%, 4px)`,
         }}
       >
-        {segments.length > 0 ? (
+        {isCompressed ? (
+          <div
+            className="h-4 rounded-sm relative top-1"
+            style={{ width: '100%', background: fallbackColor }}
+          />
+        ) : segments.length > 0 ? (
           <div className="relative w-full h-4 top-1 [&>*:nth-child(2)]:rounded-l-sm">
             {segments.map((seg, i) => (
               <div
@@ -183,13 +197,27 @@ export function Timeline({
   selectedId: string | null;
   onSelect: (spanId: string) => void;
 }): ReactNode {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      setContainerWidth(entry.contentRect.width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
   return (
-    <div className="relative py-2">
+    <div ref={containerRef} className="relative py-2">
       {spans.map((span) => (
         <TimelineBar
           key={span.spanId}
           span={span}
           compression={compression}
+          containerWidth={containerWidth}
           isSelected={selectedId === span.spanId}
           onClick={() => onSelect(span.spanId)}
         />
diff --git a/packages/web-shared/src/components/workflow-trace-view.tsx b/packages/web-shared/src/components/workflow-trace-view.tsx
index 9136fe327d..a56000cf73 100644
--- a/packages/web-shared/src/components/workflow-trace-view.tsx
+++ b/packages/web-shared/src/components/workflow-trace-view.tsx
@@ -37,6 +37,7 @@ import {
   getCustomSpanEventClassName,
 } from './workflow-traces/trace-colors';
 import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
+import { NewTraceViewer } from './trace-viewer-new';
 
 /**
  * While a run is live, continuously grow root.duration and rescale so the
@@ -965,7 +966,8 @@ export const WorkflowTraceViewer = ({
   }
 
   return (
-    <div className="relative w-full h-full flex">
+    <div className="relative w-full h-full flex flex-col">
+      <NewTraceViewer run={run} events={events} />
       {/* Timeline (takes remaining space) */}
       <div className="flex-1 min-w-0 relative">
         <TraceViewerContextProvider
diff --git a/packages/web-shared/src/lib/utils.ts b/packages/web-shared/src/lib/utils.ts
index c2286a4c3e..861f551620 100644
--- a/packages/web-shared/src/lib/utils.ts
+++ b/packages/web-shared/src/lib/utils.ts
@@ -7,9 +7,9 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-const compactFormatter = new Intl.NumberFormat(undefined, {
-  maximumFractionDigits: 2,
-});
+// const compactFormatter = new Intl.NumberFormat(undefined, {
+//   maximumFractionDigits: 2,
+// });
 
 const secondsFormatter = new Intl.NumberFormat(undefined, {
   minimumFractionDigits: 2,

From 071857c6bb8f0dfc48f248edb9bbfa4c468c4bb7 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Mon, 30 Mar 2026 18:37:23 -0400
Subject: [PATCH 25/58] Update timeline.tsx

---
 .../new-trace-viewer/components/timeline.tsx  | 45 +++++++++++--------
 1 file changed, 27 insertions(+), 18 deletions(-)

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 ae2cb3e715..cc5cdcf759 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
@@ -96,24 +96,33 @@ const TimelineBar = memo(function TimelineBar({
           />
         ) : segments.length > 0 ? (
           <div className="relative w-full h-4 top-1 [&>*:nth-child(2)]:rounded-l-sm">
-            {segments.map((seg, i) => (
-              <div
-                key={`${seg.status}-${i}`}
-                className={cn(
-                  'absolute h-full first:rounded-sm last:rounded-r-sm',
-                  SEGMENT_CONFIG[seg.status].className
-                )}
-                style={{
-                  left: `${seg.startFraction * 100}%`,
-                  width:
-                    seg.status === 'queued'
-                      ? `calc(${(seg.endFraction - seg.startFraction) * 100}% - 2px)`
-                      : `${(seg.endFraction - seg.startFraction) * 100}%`,
-                  minWidth: 2,
-                  ...SEGMENT_CONFIG[seg.status].style,
-                }}
-              />
-            ))}
+            {segments.map((seg, i) => {
+              const segPixelWidth =
+                (seg.endFraction - seg.startFraction) * pixelWidth;
+              const segStyle =
+                seg.status === 'queued' && segPixelWidth < 20
+                  ? { background: 'var(--ds-gray-500)' }
+                  : SEGMENT_CONFIG[seg.status].style;
+
+              return (
+                <div
+                  key={`${seg.status}-${i}`}
+                  className={cn(
+                    'absolute h-full first:rounded-sm last:rounded-r-sm',
+                    SEGMENT_CONFIG[seg.status].className
+                  )}
+                  style={{
+                    left: `${seg.startFraction * 100}%`,
+                    width:
+                      seg.status === 'queued'
+                        ? `calc(${(seg.endFraction - seg.startFraction) * 100}% - 2px)`
+                        : `${(seg.endFraction - seg.startFraction) * 100}%`,
+                    minWidth: 2,
+                    ...segStyle,
+                  }}
+                />
+              );
+            })}
           </div>
         ) : (
           <div

From 956639d0cdbeb797bcb1eadcae87596a7a81569c Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Tue, 31 Mar 2026 17:57:23 -0400
Subject: [PATCH 26/58] ship it

---
 packages/web-shared/package.json              |   1 +
 .../new-trace-viewer/components/timeline.tsx  | 298 ++++++++++++++----
 .../new-trace-viewer/trace-viewer.tsx         |  55 +++-
 .../src/components/new-trace-viewer/utils.ts  |  35 ++
 packages/web-shared/src/styles.css            |  11 +
 pnpm-lock.yaml                                |  43 ++-
 6 files changed, 370 insertions(+), 73 deletions(-)

diff --git a/packages/web-shared/package.json b/packages/web-shared/package.json
index 35bee97bd5..e347a966a1 100644
--- a/packages/web-shared/package.json
+++ b/packages/web-shared/package.json
@@ -47,6 +47,7 @@
     "format": "biome format --write"
   },
   "dependencies": {
+    "@radix-ui/react-tooltip": "1.2.8",
     "@tailwindcss/postcss": "4",
     "@workflow/core": "workspace:*",
     "@workflow/utils": "workspace:*",
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 cc5cdcf759..d4c6077640 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,13 +1,15 @@
 'use client';
 
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import type { ReactNode } from 'react';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
-import { getHighResInMs } from '../../trace-viewer/util/timing';
-import type { SegmentStatus, TimeCompression } from '../utils';
+import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+import type { Segment, SegmentStatus, TimeCompression } from '../utils';
 import {
   computeCompressedTimeMarkers,
+  computeSpanGaps,
   computeSpanSegments,
   computeTimeMarkers,
   getResourceColor,
@@ -33,7 +35,116 @@ const SEGMENT_CONFIG: Record<
   received: { className: 'bg-blue-700' },
 };
 
+const SEGMENT_LABELS: Record<SegmentStatus, string> = {
+  queued: 'Queued',
+  retrying: 'Retrying',
+  waiting: 'Waiting',
+  running: 'Running',
+  failed: 'Failed',
+  succeeded: 'Succeeded',
+  sleeping: 'Sleeping',
+  received: 'Received',
+};
+
+const SEGMENT_DOT_COLORS: Record<SegmentStatus, string> = {
+  queued: 'bg-gray-500',
+  retrying: 'bg-gray-500',
+  waiting: 'bg-gray-500',
+  running: 'bg-blue-700',
+  failed: 'bg-red-700',
+  succeeded: 'bg-green-700',
+  sleeping: 'bg-amber-700',
+  received: 'bg-blue-700',
+};
+
 const FIXED_BAR_WIDTH_PX = 4;
+const ROW_HEIGHT = 36;
+const CONTAINER_PAD_Y = 8;
+const END_CAP_HEIGHT = 8;
+
+const DeltaIndicator = memo(function DeltaIndicator({
+  leftFrac,
+  rightFrac,
+  label,
+  rowIndex,
+}: {
+  leftFrac: number;
+  rightFrac: number;
+  label: string;
+  rowIndex: number;
+}) {
+  const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;
+
+  return (
+    <div
+      className="absolute pointer-events-none"
+      style={{
+        left: `${leftFrac * 100}%`,
+        width: `${(rightFrac - leftFrac) * 100}%`,
+        top: centerY - END_CAP_HEIGHT / 2,
+        height: END_CAP_HEIGHT,
+      }}
+    >
+      <div className="absolute left-0 top-0 w-px h-full bg-orange-500" />
+      <div className="absolute left-0 right-0 top-1/2 h-px bg-orange-500" />
+      <div className="absolute right-0 top-0 w-px h-full bg-orange-500" />
+      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-mono text-[10px] leading-none whitespace-nowrap rounded px-1 py-0.5 text-orange-800 bg-orange-100/90">
+        {label}
+      </span>
+    </div>
+  );
+});
+
+function BarTooltipContent({
+  segments,
+  totalDurationMs,
+}: {
+  segments: Segment[];
+  totalDurationMs: number;
+}) {
+  const mergedSegments = useMemo(() => {
+    const merged: Segment[] = [];
+    for (const seg of segments) {
+      const last = merged[merged.length - 1];
+      if (last && last.status === seg.status) {
+        last.endFraction = seg.endFraction;
+      } else {
+        merged.push({ ...seg });
+      }
+    }
+    return merged;
+  }, [segments]);
+
+  return (
+    <div className="flex flex-col gap-1">
+      {mergedSegments.map((seg, i) => {
+        const segDuration =
+          (seg.endFraction - seg.startFraction) * totalDurationMs;
+        return (
+          <div
+            key={`${seg.status}-${i}`}
+            className="flex items-center justify-between gap-3"
+          >
+            <div className="flex items-center gap-1.5">
+              <span
+                className={cn(
+                  'w-1.5 h-1.5 rounded-full shrink-0',
+                  SEGMENT_DOT_COLORS[seg.status]
+                )}
+              />
+              <span className="text-label-12 font-medium">
+                {SEGMENT_LABELS[seg.status]}
+              </span>
+            </div>
+            <span className="text-label-12 font-mono font-medium text-gray-900 tabular-nums">
+              {formatDuration(segDuration)}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
 
 const TimelineBar = memo(function TimelineBar({
   span,
@@ -50,6 +161,7 @@ const TimelineBar = memo(function TimelineBar({
 }): ReactNode {
   const startTime = getHighResInMs(span.startTime);
   const endTime = getHighResInMs(span.endTime);
+  const totalDurationMs = endTime - startTime;
 
   const leftFrac = compression.toVisual(startTime);
   const rightFrac = compression.toVisual(endTime);
@@ -69,6 +181,54 @@ const TimelineBar = memo(function TimelineBar({
     ? (colors.errorBar ?? 'var(--ds-red-700)')
     : colors.bar;
 
+  const barContent = isCompressed ? (
+    <div
+      className="h-4 rounded-sm relative top-1"
+      style={{ width: '100%', background: fallbackColor }}
+    />
+  ) : segments.length > 0 ? (
+    <div className="relative w-full h-4 top-1 [&>*:nth-child(2)]:rounded-l-sm">
+      {segments.map((seg, i) => {
+        const segPixelWidth =
+          (seg.endFraction - seg.startFraction) * pixelWidth;
+        const segStyle =
+          seg.status === 'queued' && segPixelWidth < 20
+            ? { background: 'var(--ds-gray-500)' }
+            : SEGMENT_CONFIG[seg.status].style;
+
+        return (
+          <div
+            key={`${seg.status}-${i}`}
+            className={cn(
+              'absolute h-full first:rounded-sm last:rounded-r-sm',
+              SEGMENT_CONFIG[seg.status].className
+            )}
+            style={{
+              left: `${seg.startFraction * 100}%`,
+              width:
+                seg.status === 'queued'
+                  ? `calc(${(seg.endFraction - seg.startFraction) * 100}% - 2px)`
+                  : `${(seg.endFraction - seg.startFraction) * 100}%`,
+              minWidth: 2,
+              ...segStyle,
+            }}
+          />
+        );
+      })}
+    </div>
+  ) : (
+    <div
+      className="h-4 rounded-sm relative top-1"
+      style={{
+        width: '100%',
+        minWidth: 4,
+        background: fallbackColor,
+      }}
+    />
+  );
+
+  const hasTooltip = segments.length > 0;
+
   return (
     <div
       role="treeitem"
@@ -80,61 +240,47 @@ const TimelineBar = memo(function TimelineBar({
       )}
       onClick={onClick}
     >
-      <div
-        className="absolute h-6 top-1.5 rounded-sm"
-        style={{
-          left: `${leftPct}%`,
-          width: isCompressed
-            ? `${FIXED_BAR_WIDTH_PX}px`
-            : `max(${widthPct}%, 4px)`,
-        }}
-      >
-        {isCompressed ? (
-          <div
-            className="h-4 rounded-sm relative top-1"
-            style={{ width: '100%', background: fallbackColor }}
-          />
-        ) : segments.length > 0 ? (
-          <div className="relative w-full h-4 top-1 [&>*:nth-child(2)]:rounded-l-sm">
-            {segments.map((seg, i) => {
-              const segPixelWidth =
-                (seg.endFraction - seg.startFraction) * pixelWidth;
-              const segStyle =
-                seg.status === 'queued' && segPixelWidth < 20
-                  ? { background: 'var(--ds-gray-500)' }
-                  : SEGMENT_CONFIG[seg.status].style;
-
-              return (
-                <div
-                  key={`${seg.status}-${i}`}
-                  className={cn(
-                    'absolute h-full first:rounded-sm last:rounded-r-sm',
-                    SEGMENT_CONFIG[seg.status].className
-                  )}
-                  style={{
-                    left: `${seg.startFraction * 100}%`,
-                    width:
-                      seg.status === 'queued'
-                        ? `calc(${(seg.endFraction - seg.startFraction) * 100}% - 2px)`
-                        : `${(seg.endFraction - seg.startFraction) * 100}%`,
-                    minWidth: 2,
-                    ...segStyle,
-                  }}
-                />
-              );
-            })}
-          </div>
-        ) : (
-          <div
-            className="h-4 rounded-sm relative top-1"
-            style={{
-              width: '100%',
-              minWidth: 4,
-              background: fallbackColor,
-            }}
-          />
-        )}
-      </div>
+      {hasTooltip ? (
+        <TooltipPrimitive.Root delayDuration={200}>
+          <TooltipPrimitive.Trigger asChild>
+            <div
+              className="absolute h-6 top-1.5 rounded-sm"
+              style={{
+                left: `${leftPct}%`,
+                width: isCompressed
+                  ? `${FIXED_BAR_WIDTH_PX}px`
+                  : `max(${widthPct}%, 4px)`,
+              }}
+            >
+              {barContent}
+            </div>
+          </TooltipPrimitive.Trigger>
+          <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Content
+              side="top"
+              sideOffset={6}
+              className="z-50 rounded border border-gray-alpha-400 bg-background-100 shadow-md px-3 py-2 min-w-[160px] origin-[var(--radix-tooltip-content-transform-origin)] data-[state=delayed-open]:animate-[tooltip-enter_150ms_ease-out]"
+            >
+              <BarTooltipContent
+                segments={segments}
+                totalDurationMs={totalDurationMs}
+              />
+            </TooltipPrimitive.Content>
+          </TooltipPrimitive.Portal>
+        </TooltipPrimitive.Root>
+      ) : (
+        <div
+          className="absolute h-6 top-1.5 rounded-sm"
+          style={{
+            left: `${leftPct}%`,
+            width: isCompressed
+              ? `${FIXED_BAR_WIDTH_PX}px`
+              : `max(${widthPct}%, 4px)`,
+          }}
+        >
+          {barContent}
+        </div>
+      )}
     </div>
   );
 });
@@ -148,6 +294,7 @@ export function TimelineHeader({
   compression,
   isZoomed,
   onResetZoom,
+  hoverInfo,
 }: {
   viewStart: number;
   viewDuration: number;
@@ -155,6 +302,7 @@ export function TimelineHeader({
   compression: TimeCompression;
   isZoomed: boolean;
   onResetZoom: () => void;
+  hoverInfo?: { fraction: number; label: string } | null;
 }): ReactNode {
   const viewEnd = viewStart + viewDuration;
 
@@ -182,6 +330,14 @@ export function TimelineHeader({
           {m.label}
         </span>
       ))}
+      {hoverInfo && (
+        <span
+          className="absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2"
+          style={{ left: `${hoverInfo.fraction * 100}%` }}
+        >
+          {hoverInfo.label}
+        </span>
+      )}
       {isZoomed && (
         <button
           type="button"
@@ -200,11 +356,15 @@ export function Timeline({
   compression,
   selectedId,
   onSelect,
+  hoverFraction,
+  altHeld = false,
 }: {
   spans: Span[];
   compression: TimeCompression;
   selectedId: string | null;
   onSelect: (spanId: string) => void;
+  hoverFraction?: number | null;
+  altHeld?: boolean;
 }): ReactNode {
   const containerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
@@ -219,8 +379,19 @@ export function Timeline({
     return () => ro.disconnect();
   }, []);
 
+  const gaps = useMemo(
+    () => computeSpanGaps(spans, compression),
+    [spans, compression]
+  );
+
   return (
     <div ref={containerRef} className="relative py-2">
+      {hoverFraction != null && (
+        <div
+          className="absolute top-0 bottom-0 w-px bg-gray-alpha-400 pointer-events-none z-10"
+          style={{ left: `${hoverFraction * 100}%` }}
+        />
+      )}
       {spans.map((span) => (
         <TimelineBar
           key={span.spanId}
@@ -231,6 +402,19 @@ export function Timeline({
           onClick={() => onSelect(span.spanId)}
         />
       ))}
+      {altHeld && (
+        <div aria-hidden className="absolute inset-0 pointer-events-none">
+          {gaps.map((gap) => (
+            <DeltaIndicator
+              key={gap.rowIndex}
+              leftFrac={gap.leftFrac}
+              rightFrac={gap.rightFrac}
+              label={formatDuration(gap.gapMs, true)}
+              rowIndex={gap.rowIndex}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 5001c90b89..2e86fef563 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -10,7 +10,7 @@ import {
   useState,
 } from 'react';
 import type { Trace } from '../trace-viewer/types';
-import { getHighResInMs } from '../trace-viewer/util/timing';
+import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
 import { SplitPane } from './components/split-pane';
 import EventList from './components/event-list';
 import { Timeline, TimelineHeader } from './components/timeline';
@@ -209,17 +209,63 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     [animateTo, setActiveSpan, trace.spans, root.startTime, root.duration]
   );
 
+  const [altHeld, setAltHeld] = useState(false);
+
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent): void => {
       if (e.key === 'Escape') {
         clearActiveSpan();
       }
+      if (e.key === 'Alt') {
+        e.preventDefault();
+        setAltHeld(true);
+      }
+    };
+    const onKeyUp = (e: KeyboardEvent): void => {
+      if (e.key === 'Alt') setAltHeld(false);
     };
+    const onBlur = (): void => setAltHeld(false);
+
     window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+    window.addEventListener('blur', onBlur);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+      window.removeEventListener('blur', onBlur);
+    };
   }, [clearActiveSpan]);
 
   const timelineRef = useRef<HTMLDivElement>(null);
+  const [hoverFraction, setHoverFraction] = useState<number | null>(null);
+
+  const hoverInfo = useMemo(() => {
+    if (hoverFraction == null) return null;
+    const absTime = compression.fromVisual(hoverFraction);
+    const offset = absTime - root.startTime;
+    return { fraction: hoverFraction, label: formatDuration(offset, true) };
+  }, [hoverFraction, compression, root.startTime]);
+
+  const handleTimelineMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const el = timelineRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const padding = 8;
+      const contentWidth = rect.width - padding * 2;
+      if (contentWidth <= 0) return;
+      const fraction = Math.max(
+        0,
+        Math.min(1, (e.clientX - rect.left - padding) / contentWidth)
+      );
+      setHoverFraction(fraction);
+    },
+    []
+  );
+
+  const handleTimelineMouseLeave = useCallback(() => {
+    setHoverFraction(null);
+  }, []);
 
   useEffect(() => {
     const el = timelineRef.current;
@@ -343,6 +389,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
               compression={compression}
               isZoomed={isZoomed}
               onResetZoom={resetZoom}
+              hoverInfo={hoverInfo}
             />
           }
         >
@@ -357,12 +404,16 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             ref={timelineRef}
             className="block min-h-0 overflow-visible relative px-2"
             onDoubleClick={resetZoom}
+            onMouseMove={handleTimelineMouseMove}
+            onMouseLeave={handleTimelineMouseLeave}
           >
             <Timeline
               spans={filteredSpans}
               compression={compression}
               selectedId={activeSpanId}
               onSelect={handleSelectSpan}
+              hoverFraction={hoverFraction}
+              altHeld={altHeld}
             />
           </div>
         </SplitPane>
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 9a5b09f280..f75541a8f0 100644
--- a/packages/web-shared/src/components/new-trace-viewer/utils.ts
+++ b/packages/web-shared/src/components/new-trace-viewer/utils.ts
@@ -36,6 +36,7 @@ export function computeRootBounds(spans: Span[]): RootBounds {
 
 export interface TimeCompression {
   toVisual(time: number): number;
+  fromVisual(fraction: number): number;
   isCompressed: boolean;
 }
 
@@ -52,6 +53,9 @@ export function buildTimeCompression(
       if (range <= 0) return 0;
       return Math.min(Math.max((time - viewStart) / range, 0), 1);
     },
+    fromVisual(fraction: number): number {
+      return viewStart + fraction * range;
+    },
   };
 }
 
@@ -135,6 +139,37 @@ export function computeCompressedTimeMarkers(
   return markers;
 }
 
+// ---------------------------------------------------------------------------
+// Span gaps — time deltas between consecutive spans (Alt-key overlay)
+// ---------------------------------------------------------------------------
+
+export interface SpanGap {
+  gapMs: number;
+  leftFrac: number;
+  rightFrac: number;
+  rowIndex: number;
+}
+
+export function computeSpanGaps(
+  spans: Span[],
+  compression: TimeCompression
+): SpanGap[] {
+  const gaps: SpanGap[] = [];
+  for (let i = 0; i < spans.length - 1; i++) {
+    const endTime = getHighResInMs(spans[i].endTime);
+    const startTime = getHighResInMs(spans[i + 1].startTime);
+    const gapMs = startTime - endTime;
+    if (gapMs <= 0) continue;
+
+    const leftFrac = compression.toVisual(endTime);
+    const rightFrac = compression.toVisual(startTime);
+    if (rightFrac - leftFrac < 0.001) continue;
+
+    gaps.push({ gapMs, leftFrac, rightFrac, rowIndex: i });
+  }
+  return gaps;
+}
+
 // ---------------------------------------------------------------------------
 // Resource colors
 // ---------------------------------------------------------------------------
diff --git a/packages/web-shared/src/styles.css b/packages/web-shared/src/styles.css
index f659134063..23adb5f578 100644
--- a/packages/web-shared/src/styles.css
+++ b/packages/web-shared/src/styles.css
@@ -642,3 +642,14 @@
   @apply px-6 mx-auto w-full;
   max-width: calc(1200px + 48px);
 }
+
+@keyframes tooltip-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5aa47b0b6a..d5b6cee6ec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -810,7 +810,7 @@ importers:
     devDependencies:
       '@nuxt/module-builder':
         specifier: 1.0.2
-        version: 1.0.2(@nuxt/cli@3.34.0(@nuxt/schema@4.4.2)(cac@6.7.14)(magicast@0.5.2))(@vue/compiler-core@3.5.30)(esbuild@0.27.4)(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))
+        version: 1.0.2(@nuxt/cli@3.34.0(@nuxt/schema@4.4.2)(cac@6.7.14)(magicast@0.5.2))(@vue/compiler-core@3.5.30)(esbuild@0.27.3)(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))
       '@nuxt/schema':
         specifier: 4.4.2
         version: 4.4.2
@@ -1143,6 +1143,9 @@ importers:
 
   packages/web-shared:
     dependencies:
+      '@radix-ui/react-tooltip':
+        specifier: 1.2.8
+        version: 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@tailwindcss/postcss':
         specifier: '4'
         version: 4.1.13
@@ -17946,7 +17949,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/module-builder@1.0.2(@nuxt/cli@3.34.0(@nuxt/schema@4.4.2)(cac@6.7.14)(magicast@0.5.2))(@vue/compiler-core@3.5.30)(esbuild@0.27.4)(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))':
+  '@nuxt/module-builder@1.0.2(@nuxt/cli@3.34.0(@nuxt/schema@4.4.2)(cac@6.7.14)(magicast@0.5.2))(@vue/compiler-core@3.5.30)(esbuild@0.27.3)(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))':
     dependencies:
       '@nuxt/cli': 3.34.0(@nuxt/schema@4.4.2)(cac@6.7.14)(magicast@0.5.2)
       citty: 0.1.6
@@ -17954,14 +17957,14 @@ snapshots:
       defu: 6.1.4
       jiti: 2.6.1
       magic-regexp: 0.10.0
-      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.4)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3))
+      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.3)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3))
       mlly: 1.8.0
       pathe: 2.0.3
       pkg-types: 2.3.0
       tsconfck: 3.1.6(typescript@5.9.3)
       typescript: 5.9.3
-      unbuild: 3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.4)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3))
-      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.4)(vue@3.5.30(typescript@5.9.3))
+      unbuild: 3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.3)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3))
+      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.3)(vue@3.5.30(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/compiler-core'
       - esbuild
@@ -22692,6 +22695,14 @@ snapshots:
     optionalDependencies:
       vite: 7.1.12(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.3)
 
+  '@vitest/mocker@4.0.18(vite@7.1.12(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.3))':
+    dependencies:
+      '@vitest/spy': 4.0.18
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.1.12(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.3)
+
   '@vitest/mocker@4.0.18(vite@7.1.12(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.3))':
     dependencies:
       '@vitest/spy': 4.0.18
@@ -23148,6 +23159,10 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
+  acorn-import-attributes@1.9.5(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+
   acorn-import-phases@1.0.4(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
@@ -26141,8 +26156,8 @@ snapshots:
 
   import-in-the-middle@1.15.0:
     dependencies:
-      acorn: 8.15.0
-      acorn-import-attributes: 1.9.5(acorn@8.15.0)
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
       cjs-module-lexer: 1.4.3
       module-details-from-path: 1.0.4
 
@@ -27418,7 +27433,7 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
-  mkdist@2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.4)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3)):
+  mkdist@2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.3)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3)):
     dependencies:
       autoprefixer: 10.4.21(postcss@8.5.6)
       citty: 0.1.6
@@ -27436,7 +27451,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
       vue: 3.5.30(typescript@5.9.3)
-      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.4)(vue@3.5.30(typescript@5.9.3))
+      vue-sfc-transformer: 0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.3)(vue@3.5.30(typescript@5.9.3))
 
   mlly@1.8.0:
     dependencies:
@@ -31143,7 +31158,7 @@ snapshots:
 
   ultrahtml@1.6.0: {}
 
-  unbuild@3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.4)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3)):
+  unbuild@3.6.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.3)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@4.53.2)
       '@rollup/plugin-commonjs': 28.0.9(rollup@4.53.2)
@@ -31159,7 +31174,7 @@ snapshots:
       hookable: 5.5.3
       jiti: 2.6.1
       magic-string: 0.30.21
-      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.4)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3))
+      mkdist: 2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.3)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3))
       mlly: 1.8.0
       pathe: 2.0.3
       pkg-types: 2.3.0
@@ -31826,7 +31841,7 @@ snapshots:
   vitest@4.0.18(@opentelemetry/api@1.9.0)(@types/node@22.19.0)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.3):
     dependencies:
       '@vitest/expect': 4.0.18
-      '@vitest/mocker': 4.0.18(vite@7.1.12(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.3))
+      '@vitest/mocker': 4.0.18(vite@7.1.12(@types/node@22.19.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.3))
       '@vitest/pretty-format': 4.0.18
       '@vitest/runner': 4.0.18
       '@vitest/snapshot': 4.0.18
@@ -31955,11 +31970,11 @@ snapshots:
     optionalDependencies:
       '@vue/compiler-sfc': 3.5.30
 
-  vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.4)(vue@3.5.30(typescript@5.9.3)):
+  vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.30)(esbuild@0.27.3)(vue@3.5.30(typescript@5.9.3)):
     dependencies:
       '@babel/parser': 7.28.5
       '@vue/compiler-core': 3.5.30
-      esbuild: 0.27.4
+      esbuild: 0.27.3
       vue: 3.5.30(typescript@5.9.3)
 
   vue@3.5.30(typescript@5.9.3):

From 9ccab96147ba25d025f004724cb3d0cf41fe94f8 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Tue, 31 Mar 2026 18:40:19 -0400
Subject: [PATCH 27/58] cleanup

---
 .../components/new-trace-viewer/components/timeline.tsx   | 8 ++++----
 .../src/components/new-trace-viewer/trace-viewer.tsx      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

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 d4c6077640..723dec5b8e 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
@@ -85,10 +85,10 @@ const DeltaIndicator = memo(function DeltaIndicator({
         height: END_CAP_HEIGHT,
       }}
     >
-      <div className="absolute left-0 top-0 w-px h-full bg-orange-500" />
-      <div className="absolute left-0 right-0 top-1/2 h-px bg-orange-500" />
-      <div className="absolute right-0 top-0 w-px h-full bg-orange-500" />
-      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-mono text-[10px] leading-none whitespace-nowrap rounded px-1 py-0.5 text-orange-800 bg-orange-100/90">
+      <div className="absolute left-0 top-0 w-px h-full bg-amber-800" />
+      <div className="absolute left-0 right-0 top-1/2 h-px bg-amber-800" />
+      <div className="absolute right-0 top-0 w-px h-full bg-amber-800" />
+      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800">
         {label}
       </span>
     </div>
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 2e86fef563..2ed1d53eb1 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -393,7 +393,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             />
           }
         >
-          <div className="block min-h-0 overflow-visible">
+          <div className="block overflow-visible">
             <EventList
               spans={filteredSpans}
               activeSpanId={activeSpanId}

From 7786d7147325987ce6bcb547822f6268f456b4f9 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Tue, 31 Mar 2026 19:16:25 -0400
Subject: [PATCH 28/58] Update trace-viewer.tsx

---
 .../src/components/new-trace-viewer/trace-viewer.tsx     | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 2ed1d53eb1..724f3c4d9d 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { Search, X } from 'lucide-react';
 import {
   type ReactNode,
@@ -95,9 +96,11 @@ function useAnimatedViewport(initial: Viewport) {
 
 export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
   return (
-    <ActiveSpanProvider spans={trace.spans}>
-      <NewTraceViewerContent trace={trace} />
-    </ActiveSpanProvider>
+    <TooltipPrimitive.Provider delayDuration={0}>
+      <ActiveSpanProvider spans={trace.spans}>
+        <NewTraceViewerContent trace={trace} />
+      </ActiveSpanProvider>
+    </TooltipPrimitive.Provider>
   );
 }
 

From bfe2a8cfcbb99101dea51385a510b502f00843ac Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 9 Apr 2026 15:51:31 -0400
Subject: [PATCH 29/58] wip

---
 .../src/components/new-trace-viewer/trace-viewer.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 724f3c4d9d..6f17540cce 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -364,13 +364,13 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
       >
         <SplitPane
           startHeader={
-            <div className="bg-background-100 border-b border-gray-alpha-400 h-8 min-h-8 flex items-center px-2 gap-1.5">
+            <div className="bg-background-100 border rounded-md border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5">
               <Search className="w-3.5 h-3.5 shrink-0 text-gray-800" />
               <input
                 type="text"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Search events..."
+                placeholder="Search spans..."
                 className="flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none"
               />
               {searchQuery && (

From e073494bfbc3bad196c3fe9ec98947f03c501d43 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 9 Apr 2026 15:54:25 -0400
Subject: [PATCH 30/58] wip

---
 .../new-trace-viewer/components/timeline.tsx  | 48 +++++++++++++------
 1 file changed, 34 insertions(+), 14 deletions(-)

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 723dec5b8e..fd8fb28bc3 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
@@ -26,7 +26,9 @@ const SEGMENT_CONFIG: Record<
   { className?: string; style?: React.CSSProperties }
 > = {
   queued: { style: { background: QUEUED_BACKGROUND } },
-  retrying: { style: { background: HATCHED_BACKGROUND } },
+  retrying: {
+    className: 'box-border bg-gray-500',
+  },
   waiting: { style: { background: HATCHED_BACKGROUND } },
   running: { className: 'bg-blue-700' },
   failed: { className: 'bg-red-700' },
@@ -58,6 +60,7 @@ const SEGMENT_DOT_COLORS: Record<SegmentStatus, string> = {
 };
 
 const FIXED_BAR_WIDTH_PX = 4;
+const SEGMENT_GAP_PX = 1;
 const ROW_HEIGHT = 36;
 const CONTAINER_PAD_Y = 8;
 const END_CAP_HEIGHT = 8;
@@ -174,20 +177,40 @@ const TimelineBar = memo(function TimelineBar({
   const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;
 
   const segments = useMemo(() => computeSpanSegments(span), [span]);
+  const finalSegment = segments[segments.length - 1];
 
-  const isErrored = span.status.code === 2;
+  const workflowStatus = (span.attributes.data as Record<string, unknown>)
+    ?.status as string | undefined;
+  const isErrored = span.status.code === 2 || workflowStatus === 'failed';
   const colors = getResourceColor(span.resource);
   const fallbackColor = isErrored
     ? (colors.errorBar ?? 'var(--ds-red-700)')
     : colors.bar;
+  const compressedSegmentStatus = isErrored ? 'failed' : finalSegment?.status;
+  const compressedSegmentStyle =
+    compressedSegmentStatus === 'queued'
+      ? { background: 'var(--ds-gray-500)' }
+      : compressedSegmentStatus
+        ? SEGMENT_CONFIG[compressedSegmentStatus].style
+        : undefined;
+  const compressedSegmentClassName = compressedSegmentStatus
+    ? SEGMENT_CONFIG[compressedSegmentStatus].className
+    : undefined;
 
   const barContent = isCompressed ? (
     <div
-      className="h-4 rounded-sm relative top-1"
-      style={{ width: '100%', background: fallbackColor }}
+      className={cn(
+        'h-4 rounded-[0.25rem] relative top-1',
+        compressedSegmentClassName
+      )}
+      style={{
+        width: '100%',
+        background: compressedSegmentStyle ? undefined : fallbackColor,
+        ...compressedSegmentStyle,
+      }}
     />
   ) : segments.length > 0 ? (
-    <div className="relative w-full h-4 top-1 [&>*:nth-child(2)]:rounded-l-sm">
+    <div className="relative w-full h-4 top-1">
       {segments.map((seg, i) => {
         const segPixelWidth =
           (seg.endFraction - seg.startFraction) * pixelWidth;
@@ -200,16 +223,13 @@ const TimelineBar = memo(function TimelineBar({
           <div
             key={`${seg.status}-${i}`}
             className={cn(
-              'absolute h-full first:rounded-sm last:rounded-r-sm',
+              'absolute h-full rounded-[0.25rem]',
               SEGMENT_CONFIG[seg.status].className
             )}
             style={{
-              left: `${seg.startFraction * 100}%`,
-              width:
-                seg.status === 'queued'
-                  ? `calc(${(seg.endFraction - seg.startFraction) * 100}% - 2px)`
-                  : `${(seg.endFraction - seg.startFraction) * 100}%`,
-              minWidth: 2,
+              left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,
+              width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,
+              minWidth: 1,
               ...segStyle,
             }}
           />
@@ -218,7 +238,7 @@ const TimelineBar = memo(function TimelineBar({
     </div>
   ) : (
     <div
-      className="h-4 rounded-sm relative top-1"
+      className="h-4 rounded-[0.25rem] relative top-1"
       style={{
         width: '100%',
         minWidth: 4,
@@ -320,7 +340,7 @@ export function TimelineHeader({
   );
 
   return (
-    <div className="relative bg-background-100 border-b border-gray-alpha-400 h-8 min-h-8 flex items-end px-4 pb-1">
+    <div className="relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1">
       {markers.map((m, i) => (
         <span
           key={i}

From 047a854056b33737058f2d913b2c1477f14721af Mon Sep 17 00:00:00 2001
From: Mitul Shah <mitulxshah@gmail.com>
Date: Mon, 13 Apr 2026 19:44:56 -0400
Subject: [PATCH 31/58] Add detail pane to the new trace viewer + cleanup 
 (#1714)

* detail pane

* cleanup

* cleanup
---
 packages/web-shared/src/components/index.ts   |   4 +
 .../components/split-pane.tsx                 | 140 ++----
 .../new-trace-viewer/trace-viewer.tsx         | 164 +++++++-
 .../components/sidebar/attribute-panel.tsx    | 107 +++--
 .../sidebar/entity-detail-panel.tsx           |  60 +--
 .../src/components/sidebar/events-list.tsx    |   4 +-
 .../sidebar/sidebar-data-context.tsx          |  60 +++
 .../src/components/trace-viewer-new.tsx       |   8 +-
 .../src/components/workflow-trace-view.tsx    |   4 +-
 .../workflow-graph-execution-viewer.tsx       |   4 +-
 .../flow-graph/workflow-graph-viewer.css      |  10 +-
 .../flow-graph/workflow-graph-viewer.tsx      |   2 +-
 .../web/app/components/run-detail-view.tsx    |  69 +--
 packages/web/app/globals.css                  | 397 +++++++-----------
 14 files changed, 519 insertions(+), 514 deletions(-)
 create mode 100644 packages/web-shared/src/components/sidebar/sidebar-data-context.tsx

diff --git a/packages/web-shared/src/components/index.ts b/packages/web-shared/src/components/index.ts
index ee49551d80..dcf77a8842 100644
--- a/packages/web-shared/src/components/index.ts
+++ b/packages/web-shared/src/components/index.ts
@@ -15,6 +15,10 @@ export {
 } from './hook-actions';
 export { RunTraceView } from './run-trace-view';
 export { ConversationView } from './sidebar/conversation-view';
+export {
+  SidebarDataProvider,
+  type SidebarDataContextValue,
+} from './sidebar/sidebar-data-context';
 export type {
   SelectedSpanInfo,
   SpanSelectionInfo,
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
index 545f87fc3f..ce5741450a 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
@@ -2,12 +2,9 @@
 
 import {
   Children,
-  type Dispatch,
-  type KeyboardEvent,
   type ReactNode,
   type PointerEvent as ReactPointerEvent,
-  type RefObject,
-  type SetStateAction,
+  useCallback,
   useEffect,
   useRef,
   useState,
@@ -16,6 +13,8 @@ import { cn } from '../../../lib/utils';
 
 /** Wide enough for comfortable dragging; visual line stays 1px centered. */
 const GUTTER_PX = 9;
+const MIN_PX = 50;
+const DEFAULT_START_PX = 340;
 
 export function Divider() {
   return <div aria-hidden className="h-full w-px shrink-0 bg-gray-alpha-400" />;
@@ -24,70 +23,18 @@ export function Divider() {
 export interface SplitPaneProps {
   children: ReactNode;
   className?: string;
-  /** Initial width fraction for the first pane (0.15–0.85). */
-  defaultRatio?: number;
+  /** Fixed pixel width for the start (left) pane. Default 220. */
+  defaultStartWidth?: number;
   /** Fixed (non-scrolling) header rendered above the start pane. */
   startHeader?: ReactNode;
   /** Fixed (non-scrolling) header rendered above the end pane. */
   endHeader?: ReactNode;
 }
 
-function clampRatio(v: number) {
-  return Math.min(0.85, Math.max(0.15, v));
-}
-
-function markUndoBaseline(
-  initialRatioRef: RefObject<number | null>,
-  splitRatio: number
-) {
-  if (initialRatioRef.current === null) initialRatioRef.current = splitRatio;
-}
-
-function handleSplitKeyboard(
-  e: KeyboardEvent<HTMLDivElement>,
-  splitRatio: number,
-  initialRatioRef: RefObject<number | null>,
-  setSplitRatio: Dispatch<SetStateAction<number>>
-): void {
-  const step = e.shiftKey ? 0.1 : 0.02;
-
-  if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-    e.preventDefault();
-    markUndoBaseline(initialRatioRef, splitRatio);
-    setSplitRatio((r) => clampRatio(r - step));
-    return;
-  }
-  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-    e.preventDefault();
-    markUndoBaseline(initialRatioRef, splitRatio);
-    setSplitRatio((r) => clampRatio(r + step));
-    return;
-  }
-  if (e.key === 'Home') {
-    e.preventDefault();
-    markUndoBaseline(initialRatioRef, splitRatio);
-    setSplitRatio(0.15);
-    return;
-  }
-  if (e.key === 'End') {
-    e.preventDefault();
-    markUndoBaseline(initialRatioRef, splitRatio);
-    setSplitRatio(0.85);
-    return;
-  }
-  if (e.key === 'Escape') {
-    e.preventDefault();
-    if (initialRatioRef.current !== null) {
-      setSplitRatio(initialRatioRef.current);
-      initialRatioRef.current = null;
-    }
-  }
-}
-
 export function SplitPane({
   children,
   className,
-  defaultRatio = 0.45,
+  defaultStartWidth = DEFAULT_START_PX,
   startHeader,
   endHeader,
 }: SplitPaneProps) {
@@ -97,14 +44,13 @@ export function SplitPane({
   }
   const [start, end] = parts;
 
-  const [splitRatio, setSplitRatio] = useState(defaultRatio);
-  const [isDraggingSplit, setIsDraggingSplit] = useState(false);
-  const innerGridRef = useRef<HTMLDivElement>(null);
+  const [startPx, setStartPx] = useState(defaultStartWidth);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
   const gutterRef = useRef<HTMLDivElement>(null);
   const rafRef = useRef<number | null>(null);
-  const pendingRatio = useRef(defaultRatio);
+  const pendingPx = useRef(defaultStartWidth);
   const pointerIdRef = useRef<number | null>(null);
-  const initialRatioRef = useRef<number | null>(null);
 
   useEffect(() => {
     return () => {
@@ -112,19 +58,26 @@ export function SplitPane({
     };
   }, []);
 
+  const clampPx = useCallback((px: number) => {
+    const el = containerRef.current;
+    if (!el) return px;
+    const maxPx = el.getBoundingClientRect().width - MIN_PX - GUTTER_PX;
+    return Math.min(maxPx, Math.max(MIN_PX, px));
+  }, []);
+
   useEffect(() => {
-    if (!isDraggingSplit) return;
+    if (!isDragging) return;
 
     const onPointerMove = (e: globalThis.PointerEvent) => {
       if (e.pointerId !== pointerIdRef.current) return;
-      const container = innerGridRef.current;
+      const container = containerRef.current;
       if (!container) return;
       const rect = container.getBoundingClientRect();
-      pendingRatio.current = clampRatio((e.clientX - rect.left) / rect.width);
+      pendingPx.current = clampPx(e.clientX - rect.left);
       if (!rafRef.current) {
         rafRef.current = requestAnimationFrame(() => {
           rafRef.current = null;
-          setSplitRatio(pendingRatio.current);
+          setStartPx(pendingPx.current);
         });
       }
     };
@@ -140,7 +93,7 @@ export function SplitPane({
         rafRef.current = null;
       }
       pointerIdRef.current = null;
-      setIsDraggingSplit(false);
+      setIsDragging(false);
     };
 
     document.addEventListener('pointermove', onPointerMove);
@@ -152,48 +105,32 @@ export function SplitPane({
       document.removeEventListener('pointerup', onPointerUp);
       document.removeEventListener('pointercancel', onPointerUp);
     };
-  }, [isDraggingSplit]);
+  }, [isDragging, clampPx]);
 
-  const handleSplitPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+  const handlePointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
     e.currentTarget.setPointerCapture(e.pointerId);
     pointerIdRef.current = e.pointerId;
-    setIsDraggingSplit(true);
+    setIsDragging(true);
   };
 
   const handleLostPointerCapture = () => {
     pointerIdRef.current = null;
-    setIsDraggingSplit(false);
+    setIsDragging(false);
     if (rafRef.current) {
       cancelAnimationFrame(rafRef.current);
       rafRef.current = null;
     }
   };
 
-  const handleSplitKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    handleSplitKeyboard(e, splitRatio, initialRatioRef, setSplitRatio);
-  };
-
-  const ratioPercent = Math.round(splitRatio * 100);
-  const colTemplate = `minmax(50px, ${splitRatio * 100}%) ${GUTTER_PX}px minmax(50px, ${(1 - splitRatio) * 100}%)`;
-
+  const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
   const hasHeaders = startHeader != null || endHeader != null;
 
   const gutter = (
     <div
       ref={gutterRef}
-      role="slider"
-      aria-orientation="horizontal"
-      aria-valuenow={ratioPercent}
-      aria-valuemin={15}
-      aria-valuemax={85}
-      aria-valuetext={`${ratioPercent}%`}
-      tabIndex={0}
-      className={cn(
-        'relative z-20 isolate flex shrink-0 cursor-col-resize justify-center outline-none focus-visible:ring-2 focus-visible:ring-ring'
-      )}
-      onPointerDown={handleSplitPointerDown}
+      className="relative z-20 isolate flex shrink-0 cursor-col-resize justify-center"
+      onPointerDown={handlePointerDown}
       onLostPointerCapture={handleLostPointerCapture}
-      onKeyDown={handleSplitKeyDown}
     >
       <span
         className="pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400"
@@ -216,15 +153,12 @@ export function SplitPane({
           <div>{endHeader}</div>
         </div>
         <div
-          ref={innerGridRef}
+          ref={containerRef}
           className={cn(
             'grid flex-1 min-h-0 content-start overflow-x-hidden overflow-y-auto',
-            isDraggingSplit && 'select-none'
+            isDragging && 'select-none'
           )}
-          style={{
-            display: 'grid',
-            gridTemplateColumns: colTemplate,
-          }}
+          style={{ gridTemplateColumns: colTemplate }}
         >
           {start}
           {gutter}
@@ -236,17 +170,13 @@ export function SplitPane({
 
   return (
     <div
-      ref={innerGridRef}
+      ref={containerRef}
       className={cn(
         'grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto',
-        isDraggingSplit && 'select-none',
+        isDragging && 'select-none',
         className
       )}
-      style={{
-        display: 'grid',
-        gridTemplateColumns: colTemplate,
-        height: '100%',
-      }}
+      style={{ gridTemplateColumns: colTemplate, height: '100%' }}
     >
       {start}
       {gutter}
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 6f17540cce..5e45d0571a 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -1,7 +1,8 @@
 'use client';
 
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { Search, X } from 'lucide-react';
+import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
+import { Copy, Search, X } from 'lucide-react';
 import {
   type ReactNode,
   useCallback,
@@ -10,6 +11,12 @@ import {
   useRef,
   useState,
 } from 'react';
+import { ErrorBoundary } from '../error-boundary';
+import {
+  EntityDetailPanel,
+  type SelectedSpanInfo,
+} from '../sidebar/entity-detail-panel';
+import { useSidebarDataOptional } from '../sidebar/sidebar-data-context';
 import type { Trace } from '../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
 import { SplitPane } from './components/split-pane';
@@ -94,6 +101,35 @@ function useAnimatedViewport(initial: Viewport) {
   return { viewport, setViewport, animateTo };
 }
 
+// ---------------------------------------------------------------------------
+// Hook: bridge ActiveSpanContext + SidebarDataContext → SelectedSpanInfo
+// ---------------------------------------------------------------------------
+
+function useSelectedSpanInfo(): SelectedSpanInfo | null {
+  const { activeSpan } = useActiveSpan();
+  const sidebar = useSidebarDataOptional();
+
+  return useMemo(() => {
+    if (!activeSpan || !sidebar) return null;
+
+    const correlationId = activeSpan.spanId;
+    const rawEvents = correlationId
+      ? sidebar.events.filter((e) => e.correlationId === correlationId)
+      : [];
+
+    return {
+      data: activeSpan.attributes?.data,
+      resource: activeSpan.attributes?.resource as string | undefined,
+      spanId: activeSpan.spanId,
+      rawEvents,
+    };
+  }, [activeSpan, sidebar?.events]);
+}
+
+// ---------------------------------------------------------------------------
+// Root component
+// ---------------------------------------------------------------------------
+
 export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
   return (
     <TooltipPrimitive.Provider delayDuration={0}>
@@ -108,6 +144,9 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
   const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } =
     useActiveSpan();
 
+  const sidebar = useSidebarDataOptional();
+  const selectedSpan = useSelectedSpanInfo();
+
   const [searchQuery, setSearchQuery] = useState('');
 
   const filteredSpans = useMemo(() => {
@@ -167,6 +206,10 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   const handleSelectSpan = useCallback(
     (spanId: string) => {
+      if (spanId === activeSpanId) {
+        clearActiveSpan();
+        return;
+      }
       setActiveSpan(spanId);
 
       const span = trace.spans.find((s) => s.spanId === spanId);
@@ -209,7 +252,15 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
       animateTo({ start: newStart, end: newEnd });
     },
-    [animateTo, setActiveSpan, trace.spans, root.startTime, root.duration]
+    [
+      animateTo,
+      setActiveSpan,
+      clearActiveSpan,
+      activeSpanId,
+      trace.spans,
+      root.startTime,
+      root.duration,
+    ]
   );
 
   const [altHeld, setAltHeld] = useState(false);
@@ -352,11 +403,39 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     return () => el.removeEventListener('wheel', onWheel);
   }, [root.startTime, root.duration]);
 
+  // Derive the selected span name and metadata for the panel header
+  const selectedSpanName = useMemo(() => {
+    if (!selectedSpan?.data) return 'Details';
+    const data = selectedSpan.data as Record<string, unknown>;
+    const stepName = data.stepName as string | undefined;
+    const workflowName = data.workflowName as string | undefined;
+    return (
+      (stepName ? parseStepName(stepName)?.shortName : undefined) ??
+      (workflowName ? parseWorkflowName(workflowName)?.shortName : undefined) ??
+      stepName ??
+      workflowName ??
+      (data.hookId as string) ??
+      'Details'
+    );
+  }, [selectedSpan?.data]);
+
+  const selectedResource = selectedSpan?.resource as string | undefined;
+  const selectedResourceId = useMemo(() => {
+    if (!selectedSpan?.data) return undefined;
+    const data = selectedSpan.data as Record<string, unknown>;
+    return (
+      (data.stepId as string) ??
+      (data.runId as string) ??
+      (data.hookId as string) ??
+      selectedSpan.spanId
+    );
+  }, [selectedSpan?.data, selectedSpan?.spanId]);
+
   return (
     <div
       data-pane="pane-root"
       data-has-detail={activeSpan ? '' : undefined}
-      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(50px,320px,100%)]"
+      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]"
     >
       <div
         id="trace-parent"
@@ -421,7 +500,84 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           </div>
         </SplitPane>
       </div>
-      {activeSpan ? (
+
+      {/* Detail panel */}
+      {activeSpan && sidebar ? (
+        <aside className="flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400">
+          {/* 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>
+                    )}
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 text-[13px] font-mono text-gray-700 hover:text-gray-1000 transition-colors group truncate"
+                      onClick={() => {
+                        navigator.clipboard.writeText(selectedResourceId);
+                      }}
+                      title={selectedResourceId}
+                    >
+                      <span className="truncate">
+                        {selectedResourceId.length > 20
+                          ? `${selectedResourceId.slice(0, 8)} ... ${selectedResourceId.slice(-6)}`
+                          : selectedResourceId}
+                      </span>
+                      <Copy className="w-3 h-3 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+                    </button>
+                  </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"
+                onClick={clearActiveSpan}
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+          {/* Panel body */}
+          <div className="flex-1 overflow-y-auto">
+            <ErrorBoundary title="Failed to load entity details">
+              <EntityDetailPanel
+                run={sidebar.run}
+                onStreamClick={sidebar.onStreamClick}
+                spanDetailData={sidebar.spanDetailData}
+                spanDetailError={sidebar.spanDetailError}
+                spanDetailLoading={sidebar.spanDetailLoading}
+                onSpanSelect={sidebar.onSpanSelect}
+                onWakeUpSleep={sidebar.onWakeUpSleep}
+                onLoadEventData={sidebar.onLoadEventData}
+                onResolveHook={sidebar.onResolveHook}
+                encryptionKey={sidebar.encryptionKey}
+                onDecrypt={sidebar.onDecrypt}
+                isDecrypting={sidebar.isDecrypting}
+                selectedSpan={selectedSpan}
+              />
+            </ErrorBoundary>
+          </div>
+        </aside>
+      ) : activeSpan ? (
         <DetailPanel
           span={activeSpan}
           rootStart={root.startTime}
diff --git a/packages/web-shared/src/components/sidebar/attribute-panel.tsx b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
index 747bf21447..f3e6870150 100644
--- a/packages/web-shared/src/components/sidebar/attribute-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
@@ -5,7 +5,7 @@ import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import type { ModelMessage } from 'ai';
 import { Lock } from 'lucide-react';
 import type { KeyboardEvent, ReactNode } from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
 import { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
@@ -286,8 +286,29 @@ const sortByAttributeOrder = (a: string, b: string): number => {
  * Display names for attributes that should render differently from their key.
  */
 const attributeDisplayNames: Partial<Record<AttributeKey, string>> = {
+  moduleSpecifier: 'Module',
+  workflowName: 'Workflow Name',
+  stepName: 'Step Name',
+  stepId: 'Step ID',
+  hookId: 'Hook ID',
+  attempt: 'Attempts',
+  eventId: 'Event ID',
+  runId: 'Run ID',
+  eventType: 'Event Type',
+  correlationId: 'Correlation ID',
+  deploymentId: 'Deployment ID',
+  specVersion: 'Spec Version',
   workflowCoreVersion: '@workflow/core version',
-  receivedCount: 'times resolved',
+  createdAt: 'Created At',
+  startedAt: 'Started At',
+  updatedAt: 'Updated At',
+  completedAt: 'Completed At',
+  expiredAt: 'Expired At',
+  retryAfter: 'Retry After',
+  resumeAt: 'Resume At',
+  lastReceivedAt: 'Last Received At',
+  disposedAt: 'Disposed At',
+  receivedCount: 'Times Resolved',
 };
 
 /**
@@ -374,17 +395,16 @@ const attributeToDisplayFn: Record<
   (value: unknown, context?: DisplayContext) => null | string | ReactNode
 > = {
   // Names that need pretty-printing
-  workflowName: (value: unknown) =>
-    parseWorkflowName(String(value))?.shortName ?? '?',
+  workflowName: (_value: unknown) => null,
   moduleSpecifier: (value: unknown) => getModuleSpecifierFromName(value),
-  stepName: (value: unknown) => parseStepName(String(value))?.shortName ?? '?',
+  stepName: (_value: unknown) => null,
   // IDs
-  runId: (value: unknown) => String(value),
-  stepId: (value: unknown) => String(value),
+  runId: (_value: unknown) => null,
+  stepId: (_value: unknown) => null,
   hookId: (value: unknown) => String(value),
   eventId: (value: unknown) => String(value),
   // Run/step details
-  status: (value: unknown) => String(value),
+  status: (_value: unknown) => null,
   attempt: (value: unknown) => String(value),
   // Hook details
   token: (value: unknown) => String(value),
@@ -409,7 +429,7 @@ const attributeToDisplayFn: Record<
   startedAt: timestampWithTooltipOrNull,
   updatedAt: timestampWithTooltipOrNull,
   completedAt: timestampWithTooltipOrNull,
-  expiredAt: timestampWithTooltipOrNull,
+  expiredAt: (_value: unknown) => null,
   retryAfter: timestampWithTooltipOrNull,
   resumeAt: timestampWithTooltipOrNull,
   // Resolved attributes, won't actually use this function
@@ -463,7 +483,7 @@ const attributeToDisplayFn: Record<
           <DetailCard
             summary="Input (no data)"
             disabled
-            summaryClassName="text-base py-2"
+            summaryClassName="text-label-14 font-medium py-2"
           />
         );
       }
@@ -472,7 +492,7 @@ const attributeToDisplayFn: Record<
         <>
           <DetailCard
             summary={`Input (${argCount} ${argLabel})`}
-            summaryClassName="text-base py-2"
+            summaryClassName="text-label-14 font-medium py-2"
             contentClassName="mt-0"
           >
             {Array.isArray(args)
@@ -503,14 +523,14 @@ const attributeToDisplayFn: Record<
         <DetailCard
           summary="Input (no data)"
           disabled
-          summaryClassName="text-base py-2"
+          summaryClassName="text-label-14 font-medium py-2"
         />
       );
     }
     return (
       <DetailCard
         summary={`Input (${argCount} ${argLabel})`}
-        summaryClassName="text-base py-2"
+        summaryClassName="text-label-14 font-medium py-2"
         contentClassName="mt-0"
       >
         {Array.isArray(value)
@@ -530,7 +550,7 @@ const attributeToDisplayFn: Record<
     return (
       <DetailCard
         summary="Output"
-        summaryClassName="text-base py-2"
+        summaryClassName="text-label-14 font-medium py-2"
         contentClassName="mt-0"
       >
         {JsonBlock(value)}
@@ -548,7 +568,7 @@ const attributeToDisplayFn: Record<
       return (
         <DetailCard
           summary="Error"
-          summaryClassName="text-base py-2"
+          summaryClassName="text-label-14 font-medium py-2"
           contentClassName="mt-0"
         >
           <ErrorStackBlock value={value} />
@@ -559,7 +579,7 @@ const attributeToDisplayFn: Record<
     return (
       <DetailCard
         summary="Error"
-        summaryClassName="text-base py-2"
+        summaryClassName="text-label-14 font-medium py-2"
         contentClassName="mt-0"
       >
         {JsonBlock(value)}
@@ -617,10 +637,7 @@ export const AttributeBlock = ({
       <div
         className={`my-2 flex flex-col ${attribute === 'input' || attribute === 'output' ? 'gap-2 my-3.5' : 'gap-0'}`}
       >
-        <span
-          className={`${attribute === 'input' || attribute === 'output' ? 'text-base' : 'text-xs'} font-medium first-letter:uppercase`}
-          style={{ color: 'var(--ds-gray-700)' }}
-        >
+        <span className="text-label-14 text-gray-1000 font-medium first-letter:uppercase">
           {attribute}
         </span>
         <Skeleton className="h-9 w-full rounded-md" />
@@ -668,10 +685,7 @@ export const AttributeBlock = ({
         key={attribute}
         className={`my-2 flex flex-col ${attribute === 'input' || attribute === 'output' || attribute === 'error' ? 'gap-2 my-3.5' : 'gap-0'}`}
       >
-        <span
-          className={`${attribute === 'input' || attribute === 'output' || attribute === 'error' ? 'text-base' : 'text-xs'} font-medium first-letter:uppercase`}
-          style={{ color: 'var(--ds-gray-700)' }}
-        >
+        <span className="text-label-14 text-gray-1000 font-medium first-letter:uppercase">
           {attribute}
         </span>
         <span className="text-xs" style={{ color: 'var(--ds-gray-1000)' }}>
@@ -801,13 +815,8 @@ export const AttributePanel = ({
       <div>
         {/* Basic attributes in a vertical layout with border */}
         {visibleBasicAttributes.length > 0 && (
-          <div
-            className="mb-3 flex flex-col overflow-hidden rounded-lg border"
-            style={{
-              borderColor: 'var(--ds-gray-300)',
-            }}
-          >
-            {orderedBasicAttributes.map((attribute, index) => {
+          <div className="flex flex-col overflow-hidden rounded-lg border text-gray-alpha-400 px-3">
+            {orderedBasicAttributes.map((attribute) => {
               const displayValue = attributeToDisplayFn[
                 attribute as keyof typeof attributeToDisplayFn
               ]?.(displayData[attribute as keyof typeof displayData]);
@@ -816,24 +825,11 @@ export const AttributePanel = ({
                 typeof displayValue === 'string'
                   ? displayValue
                   : String(displayValue ?? displayData.moduleSpecifier ?? '');
-              const shouldCapitalizeLabel = attribute !== 'workflowCoreVersion';
-              const showResumeAtSkeleton =
-                isLoading && resource === 'sleep' && !displayData.resumeAt;
-              const showDivider =
-                index < orderedBasicAttributes.length - 1 ||
-                showResumeAtSkeleton;
 
               return (
-                <div key={attribute} className="py-1">
-                  <div className="flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1">
-                    <span
-                      className={
-                        shouldCapitalizeLabel
-                          ? 'text-[14px] first-letter:uppercase'
-                          : 'text-[14px]'
-                      }
-                      style={{ color: 'var(--ds-gray-700)' }}
-                    >
+                <React.Fragment key={attribute}>
+                  <div className="flex items-center justify-between gap-4 rounded-sm py-3">
+                    <span className="text-gray-900 text-label-14">
                       {getAttributeDisplayName(attribute)}
                     </span>
                     {isModuleSpecifier ? (
@@ -854,21 +850,16 @@ export const AttributePanel = ({
                         {moduleSpecifierValue}
                       </button>
                     ) : (
-                      <span
-                        className="min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono"
-                        style={{ color: 'var(--ds-gray-1000)' }}
-                      >
+                      <span className="min-w-0 max-w-[70%] truncate text-right text-label-13 font-mono text-gray-1000">
                         {displayValue}
                       </span>
                     )}
                   </div>
-                  {showDivider ? (
-                    <div
-                      className="mx-2.5 border-b"
-                      style={{ borderColor: 'var(--ds-gray-300)' }}
-                    />
-                  ) : null}
-                </div>
+                  <div
+                    className="h-px bg-gray-alpha-200 last:hidden"
+                    aria-hidden="true"
+                  />
+                </React.Fragment>
               );
             })}
             {isLoading && resource === 'sleep' && !displayData.resumeAt && (
diff --git a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
index 740cfb8e19..d2e84e0389 100644
--- a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
@@ -347,59 +347,21 @@ export function EntityDetailPanel({
     return null;
   }
 
-  const resourceLabel = resource.charAt(0).toUpperCase() + resource.slice(1);
   const hasPendingActions =
     (resource === 'sleep' && canWakeUp) ||
     (resource === 'hook' && canResolveHook);
-  const runStateLabel = run.completedAt ? 'Completed' : 'Live';
 
   return (
     <div className="flex h-full flex-col">
-      <div
-        className="border-b px-3 py-3"
-        style={{ borderColor: 'var(--ds-gray-200)' }}
-      >
-        <div className="flex items-start justify-between gap-2">
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <span
-                className="inline-flex items-center rounded-full border px-2 py-0.5 text-[13px] font-medium"
-                style={{
-                  borderColor: 'var(--ds-gray-300)',
-                  color: 'var(--ds-gray-900)',
-                  backgroundColor: 'var(--ds-background-100)',
-                }}
-              >
-                {resourceLabel}
-              </span>
-              <span
-                className="text-[13px]"
-                style={{
-                  color: run.completedAt
-                    ? 'var(--ds-gray-700)'
-                    : 'var(--ds-green-800)',
-                }}
-              >
-                {runStateLabel}
-              </span>
-            </div>
-            <p
-              className="mt-1 truncate font-mono text-[13px]"
-              style={{ color: 'var(--ds-gray-700)' }}
-              title={resourceId}
-            >
-              {resourceId}
-            </p>
-          </div>
-          {(hasEncryptedFields || encryptionKey) && onDecrypt && (
-            <DecryptButton
-              decrypted={!!encryptionKey}
-              loading={isDecrypting}
-              onClick={onDecrypt}
-            />
-          )}
+      {(hasEncryptedFields || encryptionKey) && onDecrypt && (
+        <div className="px-3 pt-3">
+          <DecryptButton
+            decrypted={!!encryptionKey}
+            loading={isDecrypting}
+            onClick={onDecrypt}
+          />
         </div>
-      </div>
+      )}
 
       <div className="flex-1 overflow-y-auto px-3 pt-3 pb-8">
         {hasPendingActions && (
@@ -468,12 +430,6 @@ export function EntityDetailPanel({
 
         <div className="space-y-4">
           <section>
-            <h3
-              className="mb-2 text-[13px] font-medium uppercase tracking-wide"
-              style={{ color: 'var(--ds-gray-700)' }}
-            >
-              Details
-            </h3>
             <AttributePanel
               data={displayData}
               moduleSpecifier={moduleSpecifier}
diff --git a/packages/web-shared/src/components/sidebar/events-list.tsx b/packages/web-shared/src/components/sidebar/events-list.tsx
index 7c85835b8c..4002b04abf 100644
--- a/packages/web-shared/src/components/sidebar/events-list.tsx
+++ b/packages/web-shared/src/components/sidebar/events-list.tsx
@@ -301,10 +301,10 @@ export function EventsList({
   return (
     <div className="mt-2" style={{ color: 'var(--ds-gray-1000)' }}>
       <h3
-        className="text-heading-16 font-medium mt-4 mb-2"
+        className="text-label-14 font-medium mt-4 mb-2"
         style={{ color: 'var(--ds-gray-1000)' }}
       >
-        Events {!isLoading && `(${sortedEvents.length})`}
+        Events
       </h3>
       {isLoading ? (
         <div className="flex flex-col gap-4">
diff --git a/packages/web-shared/src/components/sidebar/sidebar-data-context.tsx b/packages/web-shared/src/components/sidebar/sidebar-data-context.tsx
new file mode 100644
index 0000000000..0506d16b80
--- /dev/null
+++ b/packages/web-shared/src/components/sidebar/sidebar-data-context.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import type { SpanSelectionInfo } from './entity-detail-panel';
+
+export interface SidebarDataContextValue {
+  run: WorkflowRun;
+  events: Event[];
+  spanDetailData: WorkflowRun | Step | Hook | Event | null;
+  spanDetailError?: Error | null;
+  spanDetailLoading?: boolean;
+  onSpanSelect: (info: SpanSelectionInfo) => void;
+  onStreamClick?: (streamId: string) => void;
+  onWakeUpSleep?: (
+    runId: string,
+    correlationId: string
+  ) => Promise<{ stoppedCount: number }>;
+  onLoadEventData?: (
+    correlationId: string,
+    eventId: string
+  ) => Promise<unknown | null>;
+  onResolveHook?: (
+    hookToken: string,
+    payload: unknown,
+    hook?: Hook
+  ) => Promise<void>;
+  encryptionKey?: Uint8Array;
+  onDecrypt?: () => void;
+  isDecrypting?: boolean;
+}
+
+const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);
+SidebarDataContext.displayName = 'SidebarDataContext';
+
+export function SidebarDataProvider({
+  value,
+  children,
+}: {
+  value: SidebarDataContextValue;
+  children: ReactNode;
+}) {
+  return (
+    <SidebarDataContext.Provider value={value}>
+      {children}
+    </SidebarDataContext.Provider>
+  );
+}
+
+export function useSidebarData(): SidebarDataContextValue {
+  const ctx = useContext(SidebarDataContext);
+  if (!ctx) {
+    throw new Error('useSidebarData must be used within a SidebarDataProvider');
+  }
+  return ctx;
+}
+
+export function useSidebarDataOptional(): SidebarDataContextValue | null {
+  return useContext(SidebarDataContext);
+}
diff --git a/packages/web-shared/src/components/trace-viewer-new.tsx b/packages/web-shared/src/components/trace-viewer-new.tsx
index 44853bbd4f..ba5f3ff86d 100644
--- a/packages/web-shared/src/components/trace-viewer-new.tsx
+++ b/packages/web-shared/src/components/trace-viewer-new.tsx
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
-import { WorkflowRun } from '@workflow/core/runtime';
-import { buildTrace, TraceWithMeta } from '../lib/trace-builder';
-import { Event } from '@workflow/world';
+import type { WorkflowRun } from '@workflow/core/runtime';
+import type { Event } from '@workflow/world';
+import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
 import { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';
-import { Trace } from './trace-viewer/types';
+import type { Trace } from './trace-viewer/types';
 
 const NewTraceViewer = ({
   run,
diff --git a/packages/web-shared/src/components/workflow-trace-view.tsx b/packages/web-shared/src/components/workflow-trace-view.tsx
index a56000cf73..46e060355e 100644
--- a/packages/web-shared/src/components/workflow-trace-view.tsx
+++ b/packages/web-shared/src/components/workflow-trace-view.tsx
@@ -17,6 +17,7 @@ import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useToast } from '../lib/toast';
+import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
 import { ErrorBoundary } from './error-boundary';
 import {
   EntityDetailPanel,
@@ -36,8 +37,6 @@ import {
   getCustomSpanClassName,
   getCustomSpanEventClassName,
 } from './workflow-traces/trace-colors';
-import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
-import { NewTraceViewer } from './trace-viewer-new';
 
 /**
  * While a run is live, continuously grow root.duration and rescale so the
@@ -967,7 +966,6 @@ export const WorkflowTraceViewer = ({
 
   return (
     <div className="relative w-full h-full flex flex-col">
-      <NewTraceViewer run={run} events={events} />
       {/* Timeline (takes remaining space) */}
       <div className="flex-1 min-w-0 relative">
         <TraceViewerContextProvider
diff --git a/packages/web/app/components/flow-graph/workflow-graph-execution-viewer.tsx b/packages/web/app/components/flow-graph/workflow-graph-execution-viewer.tsx
index 294ffdacf7..40389d81b4 100644
--- a/packages/web/app/components/flow-graph/workflow-graph-execution-viewer.tsx
+++ b/packages/web/app/components/flow-graph/workflow-graph-execution-viewer.tsx
@@ -256,7 +256,7 @@ function getExecutionNodeStyle(nodeKind: string, executions?: StepExecution[]) {
   // If no execution data, show faded state with gray border
   if (!executions || executions.length === 0) {
     return {
-      color: 'hsl(var(--card-foreground))',
+      color: 'var(--card-foreground)',
       backgroundColor,
       borderColor: '#9ca3af', // gray-400
       opacity: 0.4,
@@ -293,7 +293,7 @@ function getExecutionNodeStyle(nodeKind: string, executions?: StepExecution[]) {
   }
 
   return {
-    color: 'hsl(var(--card-foreground))',
+    color: 'var(--card-foreground)',
     backgroundColor,
     borderColor,
     borderWidth,
diff --git a/packages/web/app/components/flow-graph/workflow-graph-viewer.css b/packages/web/app/components/flow-graph/workflow-graph-viewer.css
index eaa355cee5..141692571a 100644
--- a/packages/web/app/components/flow-graph/workflow-graph-viewer.css
+++ b/packages/web/app/components/flow-graph/workflow-graph-viewer.css
@@ -22,13 +22,13 @@
 /* Custom styling for React Flow controls in dark mode */
 .react-flow__controls {
     button {
-      background-color: hsl(var(--background));
-      border: 1px solid hsl(var(--border));
-      color: hsl(var(--foreground));
+      background-color: var(--background);
+      border: 1px solid var(--border);
+      color: var(--foreground);
     }
   
     button:hover {
-      background-color: hsl(var(--accent));
+      background-color: var(--accent);
     }
   
     button path {
@@ -92,7 +92,7 @@
     left: 12px;
     font-size: 11px;
     font-weight: 600;
-    color: hsl(var(--muted-foreground));
+    color: var(--muted-foreground);
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
diff --git a/packages/web/app/components/flow-graph/workflow-graph-viewer.tsx b/packages/web/app/components/flow-graph/workflow-graph-viewer.tsx
index f1d606168b..118b9c7f48 100644
--- a/packages/web/app/components/flow-graph/workflow-graph-viewer.tsx
+++ b/packages/web/app/components/flow-graph/workflow-graph-viewer.tsx
@@ -408,7 +408,7 @@ export function getNodeBorderColor(nodeKind: string): string {
 // Get node styling based on node kind - theme-aware colors using CSS variables
 export function getNodeStyle(nodeKind: string): NodeStyleResult {
   return {
-    color: 'hsl(var(--card-foreground))',
+    color: 'var(--card-foreground)',
     backgroundColor: getNodeBackgroundColor(nodeKind),
     borderColor: getNodeBorderColor(nodeKind),
   };
diff --git a/packages/web/app/components/run-detail-view.tsx b/packages/web/app/components/run-detail-view.tsx
index df5b029f68..d94a802fb7 100644
--- a/packages/web/app/components/run-detail-view.tsx
+++ b/packages/web/app/components/run-detail-view.tsx
@@ -6,9 +6,11 @@ import {
   EventListView,
   hydrateResourceIO,
   hydrateResourceIOWithKey,
+  NewTraceViewer,
+  type SidebarDataContextValue,
+  SidebarDataProvider,
   StreamViewer,
   stepEventsToStepEntity,
-  WorkflowTraceViewer,
 } from '@workflow/web-shared';
 import type { Event, WorkflowRun } from '@workflow/world';
 import {
@@ -18,7 +20,6 @@ import {
   List,
   Loader2,
   Lock,
-  Unlock,
 } from 'lucide-react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router';
@@ -42,20 +43,17 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '~/components/ui/breadcrumb';
-import { Button } from '~/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '~/components/ui/tooltip';
+import { useEventsListData } from '~/lib/client/hooks/use-events-list-data';
 import { mapRunToExecution } from '~/lib/flow-graph/graph-execution-mapper';
 import { useWorkflowGraphManifest } from '~/lib/flow-graph/use-workflow-graph';
 import { useStreamReader } from '~/lib/hooks/use-stream-reader';
-
 import { fetchEvent, getEncryptionKeyForRun } from '~/lib/rpc-client';
-
-import { useEventsListData } from '~/lib/client/hooks/use-events-list-data';
 import type { EnvMap } from '~/lib/types';
 import {
   cancelRun,
@@ -338,9 +336,6 @@ export function RunDetailView({
     loading,
     error,
     update,
-    loadMoreTraceData,
-    hasMoreTraceData,
-    isLoadingMoreTraceData,
   } = useWorkflowTraceViewerData(env, runId, { live: true });
 
   const run = runData ?? ({} as WorkflowRun);
@@ -418,6 +413,39 @@ export function RunDetailView({
     setSpanSelection(info);
   }, []);
 
+  const sidebarData = useMemo<SidebarDataContextValue>(
+    () => ({
+      run,
+      events: allEvents ?? [],
+      spanDetailData: spanDetailData ?? null,
+      spanDetailError,
+      spanDetailLoading,
+      onSpanSelect: handleSpanSelect,
+      onStreamClick: handleStreamClick,
+      onWakeUpSleep: handleWakeUpSleep,
+      onLoadEventData: handleLoadSidebarEventData,
+      onResolveHook: handleResolveHook,
+      encryptionKey: encryptionKey ?? undefined,
+      onDecrypt: handleDecrypt,
+      isDecrypting,
+    }),
+    [
+      run,
+      allEvents,
+      spanDetailData,
+      spanDetailError,
+      spanDetailLoading,
+      handleSpanSelect,
+      handleStreamClick,
+      handleWakeUpSleep,
+      handleLoadSidebarEventData,
+      handleResolveHook,
+      encryptionKey,
+      handleDecrypt,
+      isDecrypting,
+    ]
+  );
+
   // Fetch streams for this run
   const {
     streams,
@@ -741,26 +769,9 @@ export function RunDetailView({
             <TabsContent value="trace" className="mt-0 flex-1 min-h-0">
               <ErrorBoundary title="Failed to load trace viewer">
                 <div className="h-full">
-                  <WorkflowTraceViewer
-                    error={error}
-                    events={allEvents}
-                    run={run}
-                    isLoading={loading}
-                    spanDetailData={spanDetailData}
-                    spanDetailLoading={spanDetailLoading}
-                    spanDetailError={spanDetailError}
-                    onSpanSelect={handleSpanSelect}
-                    onStreamClick={handleStreamClick}
-                    onWakeUpSleep={handleWakeUpSleep}
-                    onResolveHook={handleResolveHook}
-                    onLoadEventData={handleLoadSidebarEventData}
-                    onLoadMoreSpans={loadMoreTraceData}
-                    hasMoreSpans={hasMoreTraceData}
-                    isLoadingMoreSpans={isLoadingMoreTraceData}
-                    encryptionKey={encryptionKey ?? undefined}
-                    onDecrypt={handleDecrypt}
-                    isDecrypting={isDecrypting}
-                  />
+                  <SidebarDataProvider value={sidebarData}>
+                    <NewTraceViewer run={run} events={allEvents ?? []} />
+                  </SidebarDataProvider>
                 </div>
               </ErrorBoundary>
             </TabsContent>
diff --git a/packages/web/app/globals.css b/packages/web/app/globals.css
index 26b228b873..a88982cec8 100644
--- a/packages/web/app/globals.css
+++ b/packages/web/app/globals.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "../../web-shared/src/styles.css";
 
 /* Scan web-shared package for Tailwind classes */
 @source "../../web-shared/src";
@@ -111,113 +112,51 @@
   --node-bg-tool: #f3e8ff;
   --node-bg-conditional: #fee2e2;
 
-  /* Geist Design System Colors - Light Mode */
-  /* Backgrounds */
-  --ds-background-100: rgb(255 255 255);
-  --ds-background-200: rgb(250 250 250);
-
-  /* Gray Scale */
-  --ds-gray-100: rgb(250 250 250);
-  --ds-gray-200: rgb(245 245 245);
-  --ds-gray-300: rgb(229 229 229);
-  --ds-gray-400: rgb(212 212 212);
-  --ds-gray-500: rgb(163 163 163);
-  --ds-gray-600: rgb(115 115 115);
-  --ds-gray-700: rgb(82 82 82);
-  --ds-gray-800: rgb(64 64 64);
-  --ds-gray-900: rgb(23 23 23);
-  --ds-gray-1000: rgb(0 0 0);
-
-  /* Gray Alpha */
-  --ds-gray-alpha-100: rgba(0, 0, 0, 0.05);
-  --ds-gray-alpha-200: hsla(0, 0%, 0%, 0.081);
-  --ds-gray-alpha-400: hsla(0, 0%, 0%, 0.08);
-  --ds-gray-alpha-700: hsla(0, 0%, 0%, 0.44);
-  --ds-gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
-
-  /* Blue */
-  --ds-blue-100: rgb(224 242 254);
-  --ds-blue-200: rgb(186 230 253);
-  --ds-blue-300: rgb(125 211 252);
-  --ds-blue-400: rgb(56 189 248);
-  --ds-blue-500: rgb(14 165 233);
-  --ds-blue-600: rgb(2 132 199);
-  --ds-blue-700: rgb(3 105 161);
+  /* GeistCN gaps still needed by the app and web-shared consumers */
+  --ds-black: oklch(0 0 0);
+  --ds-white: oklch(1 0 0);
+  --ds-gray-alpha-300: hsla(0, 0%, 0%, 0.1);
+  --ds-gray-alpha-500: hsla(0, 0%, 0%, 0.21);
+  --ds-gray-alpha-600: hsla(0, 0%, 0%, 0.24);
+  --ds-gray-alpha-800: hsla(0, 0%, 0%, 0.51);
+  --ds-gray-alpha-900: hsla(0, 0%, 0%, 0.7);
   --ds-blue-800: rgb(7 89 133);
-  --ds-blue-900: rgb(12 74 110);
   --ds-blue-1000: rgb(8 47 73);
-
-  /* Red */
-  --ds-red-100: rgb(254 226 226);
-  --ds-red-200: rgb(254 202 202);
-  --ds-red-300: rgb(252 165 165);
-  --ds-red-400: rgb(248 113 113);
-  --ds-red-500: rgb(239 68 68);
-  --ds-red-600: rgb(220 38 38);
-  --ds-red-700: rgb(185 28 28);
   --ds-red-800: rgb(153 27 27);
-  --ds-red-900: rgb(127 29 29);
   --ds-red-1000: rgb(69 10 10);
-
-  /* Amber */
-  --ds-amber-100: rgb(254 243 199);
-  --ds-amber-200: rgb(253 230 138);
-  --ds-amber-300: rgb(252 211 77);
-  --ds-amber-400: rgb(251 191 36);
-  --ds-amber-500: rgb(245 158 11);
-  --ds-amber-600: rgb(217 119 6);
-  --ds-amber-700: rgb(180 83 9);
   --ds-amber-800: rgb(146 64 14);
-  --ds-amber-900: rgb(120 53 15);
   --ds-amber-1000: rgb(69 26 3);
-
-  /* Green */
-  --ds-green-100: rgb(220 252 231);
-  --ds-green-200: rgb(187 247 208);
-  --ds-green-300: rgb(134 239 172);
-  --ds-green-400: rgb(74 222 128);
-  --ds-green-500: rgb(34 197 94);
-  --ds-green-600: rgb(22 163 74);
-  --ds-green-700: rgb(21 128 61);
+  --ds-green-50: color-mix(in srgb, var(--ds-green-100) 55%, white);
   --ds-green-800: rgb(22 101 52);
-  --ds-green-900: rgb(20 83 45);
   --ds-green-1000: rgb(5 46 22);
-
-  /* Purple */
-  --ds-purple-100: rgb(243 232 255);
-  --ds-purple-200: rgb(233 213 255);
-  --ds-purple-300: rgb(216 180 254);
-  --ds-purple-400: rgb(192 132 252);
-  --ds-purple-500: rgb(168 85 247);
-  --ds-purple-600: rgb(147 51 234);
-  --ds-purple-700: rgb(126 34 206);
-  --ds-purple-800: rgb(107 33 168);
-  --ds-purple-900: rgb(88 28 135);
-  --ds-purple-1000: rgb(59 7 100);
-
-  /* Pink */
-  --ds-pink-200: rgb(252 231 243);
-  --ds-pink-400: rgb(249 168 212);
-  --ds-pink-500: rgb(244 114 182);
-  --ds-pink-900: rgb(131 24 67);
-
-  /* Teal */
   --ds-teal-100: rgb(204 251 241);
-  --ds-teal-200: rgb(153 246 228);
   --ds-teal-300: rgb(94 234 212);
-  --ds-teal-400: rgb(45 212 191);
-  --ds-teal-500: rgb(20 184 166);
   --ds-teal-600: rgb(13 148 136);
   --ds-teal-700: rgb(15 118 110);
   --ds-teal-800: rgb(17 94 89);
-  --ds-teal-900: rgb(19 78 74);
   --ds-teal-1000: rgb(4 47 46);
-
-  /* Shadows */
-  --ds-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.05);
+  --ds-purple-800: rgb(107 33 168);
+  --ds-purple-1000: rgb(59 7 100);
+  --ds-pink-100: rgb(253 242 248);
+  --ds-pink-300: rgb(251 207 232);
+  --ds-pink-600: rgb(219 39 119);
+  --ds-pink-700: rgb(190 24 93);
+  --ds-pink-800: rgb(157 23 77);
+  --ds-pink-1000: rgb(80 7 36);
+  --ds-shadow-2xs: 0 1px 2px rgba(0, 0, 0, 0.03);
+  --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
   --ds-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07), 0 24px 48px rgba(0, 0, 0, 0.07);
-  --ds-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.10), 0 48px 96px rgba(0, 0, 0, 0.10);
+  --ds-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.1), 0 48px 96px rgba(0, 0, 0, 0.1);
+  --ds-shadow-xl: var(--ds-shadow-large);
+  --ds-shadow-2xl: var(--ds-shadow-large);
+  --ds-shadow-border: 0 0 0 1px var(--ds-gray-alpha-200);
+  --ds-shadow-border-small: var(--ds-shadow-small);
+  --ds-shadow-border-medium: var(--ds-shadow-medium);
+  --ds-shadow-border-large: var(--ds-shadow-large);
+  --ds-shadow-tooltip: var(--ds-shadow-medium);
   --ds-shadow-menu: var(--ds-shadow-medium);
+  --ds-shadow-modal: var(--ds-shadow-large);
+  --ds-shadow-fullscreen: var(--ds-shadow-large);
 
   /* Legacy aliases used by trace-viewer.module.css */
   --geist-background: var(--ds-background-100);
@@ -226,7 +165,9 @@
   --accents-7: var(--ds-gray-900);
 }
 
-.dark {
+.dark,
+.dark-theme,
+[data-theme="dark"] {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
@@ -268,113 +209,49 @@
   --node-bg-tool: #581c87;
   --node-bg-conditional: #7f1d1d;
 
-  /* Geist Design System Colors - Dark Mode */
-  /* Backgrounds */
-  --ds-background-100: rgb(0 0 0);
-  --ds-background-200: rgb(10 10 10);
-
-  /* Gray Scale */
-  --ds-gray-100: rgb(17 17 17);
-  --ds-gray-200: rgb(23 23 23);
-  --ds-gray-300: rgb(41 41 41);
-  --ds-gray-400: rgb(64 64 64);
-  --ds-gray-500: rgb(115 115 115);
-  --ds-gray-600: rgb(163 163 163);
-  --ds-gray-700: rgb(212 212 212);
-  --ds-gray-800: rgb(229 229 229);
-  --ds-gray-900: rgb(245 245 245);
-  --ds-gray-1000: rgb(255 255 255);
-
-  /* Gray Alpha - Dark Mode */
-  --ds-gray-alpha-100: rgba(255, 255, 255, 0.06);
-  --ds-gray-alpha-200: rgba(255, 255, 255, 0.09);
-  --ds-gray-alpha-400: rgba(255, 255, 255, 0.14);
-  --ds-gray-alpha-700: rgba(255, 255, 255, 0.45);
-  --ds-gray-alpha-1000: rgba(255, 255, 255, 0.92);
-
-  /* Blue - Dark Mode */
-  --ds-blue-100: rgb(8 47 73);
-  --ds-blue-200: rgb(12 74 110);
-  --ds-blue-300: rgb(7 89 133);
-  --ds-blue-400: rgb(3 105 161);
-  --ds-blue-500: rgb(2 132 199);
-  --ds-blue-600: rgb(14 165 233);
-  --ds-blue-700: rgb(56 189 248);
+  /* GeistCN gaps still needed by the app and web-shared consumers */
+  --ds-gray-alpha-300: rgba(255, 255, 255, 0.13);
+  --ds-gray-alpha-500: rgba(255, 255, 255, 0.24);
+  --ds-gray-alpha-600: rgba(255, 255, 255, 0.51);
+  --ds-gray-alpha-800: rgba(255, 255, 255, 0.47);
+  --ds-gray-alpha-900: rgba(255, 255, 255, 0.61);
   --ds-blue-800: rgb(125 211 252);
-  --ds-blue-900: rgb(186 230 253);
   --ds-blue-1000: rgb(224 242 254);
-
-  /* Red - Dark Mode */
-  --ds-red-100: rgb(69 10 10);
-  --ds-red-200: rgb(127 29 29);
-  --ds-red-300: rgb(153 27 27);
-  --ds-red-400: rgb(185 28 28);
-  --ds-red-500: rgb(220 38 38);
-  --ds-red-600: rgb(239 68 68);
-  --ds-red-700: rgb(248 113 113);
   --ds-red-800: rgb(252 165 165);
-  --ds-red-900: rgb(254 202 202);
   --ds-red-1000: rgb(254 226 226);
-
-  /* Amber - Dark Mode */
-  --ds-amber-100: rgb(69 26 3);
-  --ds-amber-200: rgb(120 53 15);
-  --ds-amber-300: rgb(146 64 14);
-  --ds-amber-400: rgb(180 83 9);
-  --ds-amber-500: rgb(217 119 6);
-  --ds-amber-600: rgb(245 158 11);
-  --ds-amber-700: rgb(251 191 36);
   --ds-amber-800: rgb(252 211 77);
-  --ds-amber-900: rgb(253 230 138);
   --ds-amber-1000: rgb(254 243 199);
-
-  /* Green - Dark Mode */
-  --ds-green-100: rgb(5 46 22);
-  --ds-green-200: rgb(20 83 45);
-  --ds-green-300: rgb(22 101 52);
-  --ds-green-400: rgb(21 128 61);
-  --ds-green-500: rgb(22 163 74);
-  --ds-green-600: rgb(34 197 94);
-  --ds-green-700: rgb(74 222 128);
+  --ds-green-50: color-mix(in srgb, var(--ds-green-100) 35%, black);
   --ds-green-800: rgb(134 239 172);
-  --ds-green-900: rgb(187 247 208);
   --ds-green-1000: rgb(220 252 231);
-
-  /* Purple - Dark Mode */
-  --ds-purple-100: rgb(59 7 100);
-  --ds-purple-200: rgb(88 28 135);
-  --ds-purple-300: rgb(107 33 168);
-  --ds-purple-400: rgb(126 34 206);
-  --ds-purple-500: rgb(147 51 234);
-  --ds-purple-600: rgb(168 85 247);
-  --ds-purple-700: rgb(192 132 252);
-  --ds-purple-800: rgb(216 180 254);
-  --ds-purple-900: rgb(233 213 255);
-  --ds-purple-1000: rgb(243 232 255);
-
-  /* Pink - Dark Mode */
-  --ds-pink-200: rgb(131 24 67);
-  --ds-pink-400: rgb(157 23 77);
-  --ds-pink-500: rgb(190 24 93);
-  --ds-pink-900: rgb(251 207 232);
-
-  /* Teal - Dark Mode */
   --ds-teal-100: rgb(4 47 46);
-  --ds-teal-200: rgb(19 78 74);
   --ds-teal-300: rgb(17 94 89);
-  --ds-teal-400: rgb(15 118 110);
-  --ds-teal-500: rgb(13 148 136);
   --ds-teal-600: rgb(20 184 166);
   --ds-teal-700: rgb(45 212 191);
   --ds-teal-800: rgb(94 234 212);
-  --ds-teal-900: rgb(153 246 228);
   --ds-teal-1000: rgb(204 251 241);
-
-  /* Shadows - Dark Mode */
-  --ds-shadow-small: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 24px rgba(0, 0, 0, 0.3);
+  --ds-purple-800: rgb(216 180 254);
+  --ds-purple-1000: rgb(243 232 255);
+  --ds-pink-100: rgb(80 7 36);
+  --ds-pink-300: rgb(131 24 67);
+  --ds-pink-600: rgb(219 39 119);
+  --ds-pink-700: rgb(244 114 182);
+  --ds-pink-800: rgb(249 168 212);
+  --ds-pink-1000: rgb(253 242 248);
+  --ds-shadow-2xs: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
   --ds-shadow-medium: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.4);
   --ds-shadow-large: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 16px rgba(0, 0, 0, 0.5), 0 48px 96px rgba(0, 0, 0, 0.5);
+  --ds-shadow-xl: var(--ds-shadow-large);
+  --ds-shadow-2xl: var(--ds-shadow-large);
+  --ds-shadow-border: 0 0 0 1px var(--ds-gray-alpha-200);
+  --ds-shadow-border-small: var(--ds-shadow-small);
+  --ds-shadow-border-medium: var(--ds-shadow-medium);
+  --ds-shadow-border-large: var(--ds-shadow-large);
+  --ds-shadow-tooltip: var(--ds-shadow-medium);
   --ds-shadow-menu: var(--ds-shadow-medium);
+  --ds-shadow-modal: var(--ds-shadow-large);
+  --ds-shadow-fullscreen: var(--ds-shadow-large);
 
   /* Legacy aliases used by trace-viewer.module.css */
   --geist-background: var(--ds-background-100);
@@ -418,101 +295,120 @@
     --sidebar-accent-foreground: oklch(0.985 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);
     --sidebar-ring: oklch(0.556 0 0);
-
-    /* Workflow node background colors - Dark Mode */
     --node-bg-step: #14532d;
     --node-bg-start: #1e3a5f;
     --node-bg-primitive: #7c2d12;
     --node-bg-agent: #831843;
     --node-bg-tool: #581c87;
     --node-bg-conditional: #7f1d1d;
-
-    /* Geist Design System Colors - Dark Mode (same as .dark) */
-    --ds-background-100: rgb(0 0 0);
-    --ds-background-200: rgb(10 10 10);
-    --ds-gray-100: rgb(17 17 17);
-    --ds-gray-200: rgb(23 23 23);
-    --ds-gray-300: rgb(41 41 41);
-    --ds-gray-400: rgb(64 64 64);
-    --ds-gray-500: rgb(115 115 115);
-    --ds-gray-600: rgb(163 163 163);
-    --ds-gray-700: rgb(212 212 212);
-    --ds-gray-800: rgb(229 229 229);
-    --ds-gray-900: rgb(245 245 245);
-    --ds-gray-1000: rgb(255 255 255);
+    --ds-background-100: hsl(0, 0%, 7%);
+    --ds-background-200: hsl(0, 0%, 10%);
+    --ds-gray-100: hsl(0, 0%, 11%);
+    --ds-gray-200: hsl(0, 0%, 14%);
+    --ds-gray-300: hsl(0, 0%, 17%);
+    --ds-gray-400: hsl(0, 0%, 14%);
+    --ds-gray-500: hsl(0, 0%, 23%);
+    --ds-gray-600: hsl(0, 0%, 34%);
+    --ds-gray-700: hsl(0, 0%, 44%);
+    --ds-gray-800: hsl(0, 0%, 51%);
+    --ds-gray-900: hsl(0, 0%, 63%);
+    --ds-gray-1000: hsl(0, 0%, 93%);
     --ds-gray-alpha-100: rgba(255, 255, 255, 0.06);
     --ds-gray-alpha-200: rgba(255, 255, 255, 0.09);
     --ds-gray-alpha-400: rgba(255, 255, 255, 0.14);
     --ds-gray-alpha-700: rgba(255, 255, 255, 0.45);
     --ds-gray-alpha-1000: rgba(255, 255, 255, 0.92);
-    --ds-blue-100: rgb(8 47 73);
-    --ds-blue-200: rgb(12 74 110);
-    --ds-blue-300: rgb(7 89 133);
-    --ds-blue-400: rgb(3 105 161);
-    --ds-blue-500: rgb(2 132 199);
-    --ds-blue-600: rgb(14 165 233);
-    --ds-blue-700: rgb(56 189 248);
+    --ds-blue-100: hsl(216, 50%, 12%);
+    --ds-blue-200: hsl(214, 59%, 15%);
+    --ds-blue-300: hsl(213, 71%, 20%);
+    --ds-blue-400: hsl(212, 78%, 23%);
+    --ds-blue-500: hsl(211, 86%, 27%);
+    --ds-blue-600: hsl(210, 92%, 36%);
+    --ds-blue-700: hsl(210, 100%, 45%);
+    --ds-blue-900: hsl(210, 100%, 72%);
+    --ds-red-100: hsl(357, 37%, 12%);
+    --ds-red-200: hsl(357, 46%, 16%);
+    --ds-red-300: hsl(356, 54%, 22%);
+    --ds-red-400: hsl(357, 55%, 26%);
+    --ds-red-500: hsl(357, 60%, 32%);
+    --ds-red-600: hsl(358, 75%, 44%);
+    --ds-red-700: hsl(358, 75%, 59%);
+    --ds-red-900: hsl(358, 100%, 76%);
+    --ds-amber-100: hsl(35, 100%, 8%);
+    --ds-amber-200: hsl(33, 100%, 11%);
+    --ds-amber-300: hsl(33, 100%, 15%);
+    --ds-amber-400: hsl(35, 100%, 17%);
+    --ds-amber-500: hsl(35, 100%, 22%);
+    --ds-amber-600: hsl(36, 100%, 30%);
+    --ds-amber-700: hsl(39, 100%, 57%);
+    --ds-amber-900: hsl(39, 100%, 77%);
+    --ds-green-100: hsl(136, 50%, 9%);
+    --ds-green-200: hsl(137, 50%, 12%);
+    --ds-green-300: hsl(136, 50%, 14%);
+    --ds-green-400: hsl(135, 70%, 16%);
+    --ds-green-500: hsl(135, 70%, 23%);
+    --ds-green-600: hsl(135, 70%, 34%);
+    --ds-green-700: hsl(131, 41%, 46%);
+    --ds-green-900: hsl(120, 46%, 72%);
+    --ds-teal-200: hsl(169, 78%, 10%);
+    --ds-teal-400: hsl(170, 70%, 17%);
+    --ds-teal-500: hsl(170, 70%, 22%);
+    --ds-teal-900: hsl(168, 80%, 60%);
+    --ds-purple-100: hsl(283, 30%, 12%);
+    --ds-purple-200: hsl(281, 38%, 16%);
+    --ds-purple-300: hsl(279, 44%, 23%);
+    --ds-purple-400: hsl(277, 46%, 28%);
+    --ds-purple-500: hsl(274, 49%, 35%);
+    --ds-purple-600: hsl(272, 51%, 54%);
+    --ds-purple-700: hsl(272, 51%, 54%);
+    --ds-purple-900: hsl(275, 80%, 71%);
+    --ds-pink-200: hsl(335, 32%, 14%);
+    --ds-pink-400: hsl(336, 44%, 25%);
+    --ds-pink-500: hsl(336, 50%, 32%);
+    --ds-pink-900: hsl(336, 80%, 70%);
+    --ds-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.3);
+    --ds-gray-alpha-300: rgba(255, 255, 255, 0.13);
+    --ds-gray-alpha-500: rgba(255, 255, 255, 0.24);
+    --ds-gray-alpha-600: rgba(255, 255, 255, 0.51);
+    --ds-gray-alpha-800: rgba(255, 255, 255, 0.47);
+    --ds-gray-alpha-900: rgba(255, 255, 255, 0.61);
     --ds-blue-800: rgb(125 211 252);
-    --ds-blue-900: rgb(186 230 253);
     --ds-blue-1000: rgb(224 242 254);
-    --ds-red-100: rgb(69 10 10);
-    --ds-red-200: rgb(127 29 29);
-    --ds-red-300: rgb(153 27 27);
-    --ds-red-400: rgb(185 28 28);
-    --ds-red-500: rgb(220 38 38);
-    --ds-red-600: rgb(239 68 68);
-    --ds-red-700: rgb(248 113 113);
     --ds-red-800: rgb(252 165 165);
-    --ds-red-900: rgb(254 202 202);
     --ds-red-1000: rgb(254 226 226);
-    --ds-amber-100: rgb(69 26 3);
-    --ds-amber-200: rgb(120 53 15);
-    --ds-amber-300: rgb(146 64 14);
-    --ds-amber-400: rgb(180 83 9);
-    --ds-amber-500: rgb(217 119 6);
-    --ds-amber-600: rgb(245 158 11);
-    --ds-amber-700: rgb(251 191 36);
     --ds-amber-800: rgb(252 211 77);
-    --ds-amber-900: rgb(253 230 138);
     --ds-amber-1000: rgb(254 243 199);
-    --ds-green-100: rgb(5 46 22);
-    --ds-green-200: rgb(20 83 45);
-    --ds-green-300: rgb(22 101 52);
-    --ds-green-400: rgb(21 128 61);
-    --ds-green-500: rgb(22 163 74);
-    --ds-green-600: rgb(34 197 94);
-    --ds-green-700: rgb(74 222 128);
+    --ds-green-50: color-mix(in srgb, var(--ds-green-100) 35%, black);
     --ds-green-800: rgb(134 239 172);
-    --ds-green-900: rgb(187 247 208);
     --ds-green-1000: rgb(220 252 231);
-    --ds-purple-100: rgb(59 7 100);
-    --ds-purple-200: rgb(88 28 135);
-    --ds-purple-300: rgb(107 33 168);
-    --ds-purple-400: rgb(126 34 206);
-    --ds-purple-500: rgb(147 51 234);
-    --ds-purple-600: rgb(168 85 247);
-    --ds-purple-700: rgb(192 132 252);
-    --ds-purple-800: rgb(216 180 254);
-    --ds-purple-900: rgb(233 213 255);
-    --ds-purple-1000: rgb(243 232 255);
-    --ds-pink-200: rgb(131 24 67);
-    --ds-pink-400: rgb(157 23 77);
-    --ds-pink-500: rgb(190 24 93);
-    --ds-pink-900: rgb(251 207 232);
     --ds-teal-100: rgb(4 47 46);
-    --ds-teal-200: rgb(19 78 74);
     --ds-teal-300: rgb(17 94 89);
-    --ds-teal-400: rgb(15 118 110);
-    --ds-teal-500: rgb(13 148 136);
     --ds-teal-600: rgb(20 184 166);
     --ds-teal-700: rgb(45 212 191);
     --ds-teal-800: rgb(94 234 212);
-    --ds-teal-900: rgb(153 246 228);
     --ds-teal-1000: rgb(204 251 241);
-    --ds-shadow-small: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 24px rgba(0, 0, 0, 0.3);
+    --ds-purple-800: rgb(216 180 254);
+    --ds-purple-1000: rgb(243 232 255);
+    --ds-pink-100: rgb(80 7 36);
+    --ds-pink-300: rgb(131 24 67);
+    --ds-pink-600: rgb(219 39 119);
+    --ds-pink-700: rgb(244 114 182);
+    --ds-pink-800: rgb(249 168 212);
+    --ds-pink-1000: rgb(253 242 248);
+    --ds-shadow-2xs: 0 1px 2px rgba(0, 0, 0, 0.35);
+    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
     --ds-shadow-medium: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.4);
     --ds-shadow-large: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 16px rgba(0, 0, 0, 0.5), 0 48px 96px rgba(0, 0, 0, 0.5);
+    --ds-shadow-xl: var(--ds-shadow-large);
+    --ds-shadow-2xl: var(--ds-shadow-large);
+    --ds-shadow-border: 0 0 0 1px var(--ds-gray-alpha-200);
+    --ds-shadow-border-small: var(--ds-shadow-small);
+    --ds-shadow-border-medium: var(--ds-shadow-medium);
+    --ds-shadow-border-large: var(--ds-shadow-large);
+    --ds-shadow-tooltip: var(--ds-shadow-medium);
     --ds-shadow-menu: var(--ds-shadow-medium);
+    --ds-shadow-modal: var(--ds-shadow-large);
+    --ds-shadow-fullscreen: var(--ds-shadow-large);
     --geist-background: var(--ds-background-100);
     --accents-2: var(--ds-gray-300);
     --accents-5: var(--ds-gray-700);
@@ -524,9 +420,11 @@
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground overscroll-none;
   }
+
   html {
     @apply overscroll-none;
   }
@@ -536,6 +434,7 @@
   0%, 100% {
     background-position: 0% 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }

From 1f081bffb7f9d06ef19dd590bd64c12fb7d8d193 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Mon, 13 Apr 2026 21:20:35 -0400
Subject: [PATCH 32/58] cleanu

---
 .../components/sidebar/attribute-panel.tsx    |  2 +-
 .../sidebar/entity-detail-panel.tsx           | 21 -------------------
 2 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/packages/web-shared/src/components/sidebar/attribute-panel.tsx b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
index 6dd9ffcd67..04838622d0 100644
--- a/packages/web-shared/src/components/sidebar/attribute-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
@@ -5,7 +5,7 @@ import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import type { ModelMessage } from 'ai';
 import { Lock } from 'lucide-react';
 import type { KeyboardEvent, ReactNode } from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
 import { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
diff --git a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
index 630bd0f166..40c9bb0dd2 100644
--- a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
@@ -6,7 +6,6 @@ import { Send, Zap } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useToast } from '../../lib/toast';
 import { isEncryptedMarker } from '../../lib/hydration';
-import { DecryptButton } from '../ui/decrypt-button';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
@@ -212,17 +211,6 @@ export function EntityDetailPanel({
   const error = spanDetailError ?? undefined;
   const loading = spanDetailLoading ?? false;
 
-  const hasEncryptedFields = useMemo(() => {
-    if (!spanDetailData) return false;
-    const d = spanDetailData as Record<string, unknown>;
-    return (
-      isEncryptedMarker(d.input) ||
-      isEncryptedMarker(d.output) ||
-      isEncryptedMarker(d.error) ||
-      isEncryptedMarker(d.metadata)
-    );
-  }, [spanDetailData]);
-
   // Get the hook token for resolving (prefer fetched data, then hooks array fallback)
   const hookToken = useMemo(() => {
     if (resource !== 'hook' || !resourceId) return undefined;
@@ -356,15 +344,6 @@ export function EntityDetailPanel({
 
   return (
     <div className="flex h-full flex-col">
-      {(hasEncryptedFields || hasEncryptedData || encryptionKey) &&
-        onDecrypt && (
-          <DecryptButton
-            decrypted={!!encryptionKey}
-            loading={isDecrypting}
-            onClick={onDecrypt}
-          />
-        )}
-
       <div className="flex-1 overflow-y-auto px-3 pt-3 pb-8">
         {hasPendingActions && (
           <div

From 6e484f9247f0b877219335af46500bd3540cc29b Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Mon, 13 Apr 2026 21:31:12 -0400
Subject: [PATCH 33/58] fix

---
 .../new-trace-viewer/components/timeline.tsx  | 38 ++++++++++---------
 .../sidebar/entity-detail-panel.tsx           |  4 --
 2 files changed, 20 insertions(+), 22 deletions(-)

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 fd8fb28bc3..e520dc675f 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
@@ -340,24 +340,26 @@ export function TimelineHeader({
   );
 
   return (
-    <div className="relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1">
-      {markers.map((m, i) => (
-        <span
-          key={i}
-          className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap -translate-x-1/2"
-          style={{ left: `${m.position * 100}%` }}
-        >
-          {m.label}
-        </span>
-      ))}
-      {hoverInfo && (
-        <span
-          className="absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2"
-          style={{ left: `${hoverInfo.fraction * 100}%` }}
-        >
-          {hoverInfo.label}
-        </span>
-      )}
+    <div className="relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-2 pb-1">
+      <div className="relative h-full flex-1">
+        {markers.map((m, i) => (
+          <span
+            key={i}
+            className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap -translate-x-1/2"
+            style={{ left: `${m.position * 100}%` }}
+          >
+            {m.label}
+          </span>
+        ))}
+        {hoverInfo && (
+          <span
+            className="absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2"
+            style={{ left: `${hoverInfo.fraction * 100}%` }}
+          >
+            {hoverInfo.label}
+          </span>
+        )}
+      </div>
       {isZoomed && (
         <button
           type="button"
diff --git a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
index 40c9bb0dd2..fd2252a045 100644
--- a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
@@ -5,7 +5,6 @@ import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useToast } from '../../lib/toast';
-import { isEncryptedMarker } from '../../lib/hydration';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
@@ -66,7 +65,6 @@ export function EntityDetailPanel({
   onDecrypt,
   isDecrypting = false,
   selectedSpan,
-  hasEncryptedData = false,
 }: {
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
@@ -103,8 +101,6 @@ export function EntityDetailPanel({
   isDecrypting?: boolean;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
-  /** Run-level hint: the run contains encrypted data (from probe). */
-  hasEncryptedData?: boolean;
 }): React.JSX.Element | null {
   const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);

From 469c12c03a40c7b3abbda9ac0663b00223e3efc9 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Mon, 13 Apr 2026 21:38:34 -0400
Subject: [PATCH 34/58] Update workflow-trace-view.tsx

---
 packages/web-shared/src/components/workflow-trace-view.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/web-shared/src/components/workflow-trace-view.tsx b/packages/web-shared/src/components/workflow-trace-view.tsx
index fda84bdf0d..46e060355e 100644
--- a/packages/web-shared/src/components/workflow-trace-view.tsx
+++ b/packages/web-shared/src/components/workflow-trace-view.tsx
@@ -775,7 +775,6 @@ export const WorkflowTraceViewer = ({
   encryptionKey,
   onDecrypt,
   isDecrypting = false,
-  hasEncryptedData = false,
 }: {
   run: WorkflowRun;
   events: Event[];
@@ -816,8 +815,6 @@ export const WorkflowTraceViewer = ({
   onDecrypt?: () => void;
   /** Whether the encryption key is currently being fetched */
   isDecrypting?: boolean;
-  /** Run-level hint: the run contains encrypted data (from probe). */
-  hasEncryptedData?: boolean;
 }) => {
   const toast = useToast();
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
@@ -1154,7 +1151,6 @@ export const WorkflowTraceViewer = ({
                 onDecrypt={onDecrypt}
                 isDecrypting={isDecrypting}
                 selectedSpan={selectedSpan}
-                hasEncryptedData={hasEncryptedData}
               />
             </ErrorBoundary>
           </div>

From 6df48fd99eac8c0977a4c1bbd4249c62a6aa3e0a Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Mon, 13 Apr 2026 22:25:39 -0400
Subject: [PATCH 35/58] cleanup

---
 .../web-shared/src/components/new-trace-viewer/trace-viewer.tsx | 2 +-
 packages/web/app/components/run-detail-view.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 5e45d0571a..0d2a0debc9 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -503,7 +503,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
       {/* Detail panel */}
       {activeSpan && sidebar ? (
-        <aside className="flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400">
+        <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">
diff --git a/packages/web/app/components/run-detail-view.tsx b/packages/web/app/components/run-detail-view.tsx
index b9834f9095..77544c99ae 100644
--- a/packages/web/app/components/run-detail-view.tsx
+++ b/packages/web/app/components/run-detail-view.tsx
@@ -769,7 +769,7 @@ export function RunDetailView({
 
             <TabsContent value="trace" className="mt-0 flex-1 min-h-0">
               <ErrorBoundary title="Failed to load trace viewer">
-                <div className="h-full">
+                <div className="h-full -mx-6 pl-6 bg-background-100 border-t border-gray-alpha-400 overflow-hidden">
                   <SidebarDataProvider value={sidebarData}>
                     <NewTraceViewer run={run} events={allEvents ?? []} />
                   </SidebarDataProvider>

From ca890885fff546f048ed79be1c2d83c75039e181 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Tue, 14 Apr 2026 12:58:39 -0400
Subject: [PATCH 36/58] Update entity-detail-panel.tsx

---
 .../sidebar/entity-detail-panel.tsx           | 66 -------------------
 1 file changed, 66 deletions(-)

diff --git a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
index 33e60e956c..fb1ec8c2c2 100644
--- a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
@@ -5,9 +5,7 @@ import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useToast } from '../../lib/toast';
-import { isEncryptedMarker } from '../../lib/hydration';
 import { DecryptClickContext } from '../ui/data-inspector';
-import { DecryptButton } from '../ui/decrypt-button';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
@@ -68,7 +66,6 @@ export function EntityDetailPanel({
   onDecrypt,
   isDecrypting = false,
   selectedSpan,
-  hasEncryptedData = false,
 }: {
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
@@ -105,8 +102,6 @@ export function EntityDetailPanel({
   isDecrypting?: boolean;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
-  /** Run-level hint: the run contains encrypted data (from probe). */
-  hasEncryptedData?: boolean;
 }): React.JSX.Element | null {
   const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);
@@ -320,18 +315,6 @@ export function EntityDetailPanel({
     | Hook
     | Event;
 
-  const hasEncryptedFields = useMemo(() => {
-    const value = displayData as Record<string, unknown> | null | undefined;
-    if (!value) return false;
-
-    return (
-      isEncryptedMarker(value.input) ||
-      isEncryptedMarker(value.output) ||
-      isEncryptedMarker(value.error) ||
-      isEncryptedMarker(value.metadata)
-    );
-  }, [displayData]);
-
   const moduleSpecifier = useMemo(() => {
     const displayRecord = displayData as Record<string, unknown>;
     const displayStepName = displayRecord.stepName;
@@ -352,61 +335,12 @@ export function EntityDetailPanel({
     return null;
   }
 
-  const resourceLabel = resource.charAt(0).toUpperCase() + resource.slice(1);
   const hasPendingActions =
     (resource === 'sleep' && canWakeUp) ||
     (resource === 'hook' && canResolveHook);
-  const runStateLabel = run.completedAt ? 'Completed' : 'Live';
 
   return (
     <div className="flex h-full flex-col">
-      <div
-        className="border-b px-3 py-3"
-        style={{ borderColor: 'var(--ds-gray-200)' }}
-      >
-        <div className="flex items-start justify-between gap-2">
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <span
-                className="inline-flex items-center rounded-full border px-2 py-0.5 text-[13px] font-medium"
-                style={{
-                  borderColor: 'var(--ds-gray-300)',
-                  color: 'var(--ds-gray-900)',
-                  backgroundColor: 'var(--ds-background-100)',
-                }}
-              >
-                {resourceLabel}
-              </span>
-              <span
-                className="text-[13px]"
-                style={{
-                  color: run.completedAt
-                    ? 'var(--ds-gray-700)'
-                    : 'var(--ds-green-800)',
-                }}
-              >
-                {runStateLabel}
-              </span>
-            </div>
-            <p
-              className="mt-1 truncate font-mono text-[13px]"
-              style={{ color: 'var(--ds-gray-700)' }}
-              title={resourceId}
-            >
-              {resourceId}
-            </p>
-          </div>
-          {(hasEncryptedFields || hasEncryptedData || encryptionKey) &&
-            onDecrypt && (
-              <DecryptButton
-                decrypted={!!encryptionKey}
-                loading={isDecrypting}
-                onClick={onDecrypt}
-              />
-            )}
-        </div>
-      </div>
-
       <DecryptClickContext.Provider
         value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
       >

From 8279b433d1cedfea132523a0873db717e12a7e30 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Wed, 15 Apr 2026 16:57:02 -0400
Subject: [PATCH 37/58] move sidebar provider into export

---
 .../web-shared/src/components/trace-viewer-new.tsx | 14 +++++++++++---
 packages/web/app/components/run-detail-view.tsx    |  9 +++++----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/web-shared/src/components/trace-viewer-new.tsx b/packages/web-shared/src/components/trace-viewer-new.tsx
index ba5f3ff86d..a509c2aff9 100644
--- a/packages/web-shared/src/components/trace-viewer-new.tsx
+++ b/packages/web-shared/src/components/trace-viewer-new.tsx
@@ -3,14 +3,20 @@ import type { WorkflowRun } from '@workflow/core/runtime';
 import type { Event } from '@workflow/world';
 import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
 import { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';
+import {
+  SidebarDataProvider,
+  type SidebarDataContextValue,
+} from './sidebar/sidebar-data-context';
 import type { Trace } from './trace-viewer/types';
 
 const NewTraceViewer = ({
   run,
   events,
+  sidebarData,
 }: {
   run: WorkflowRun;
   events: Event[];
+  sidebarData: SidebarDataContextValue;
 }) => {
   // Build trace only when actual data changes — no timer-driven rebuilds.
   // Active span widths are animated imperatively by useLiveTick at 60fps.
@@ -32,9 +38,11 @@ const NewTraceViewer = ({
   }
 
   return (
-    <div className="relative w-full h-full flex">
-      <NewTraceViewerComponent trace={trace as Trace} />
-    </div>
+    <SidebarDataProvider value={sidebarData}>
+      <div className="relative w-full h-full flex">
+        <NewTraceViewerComponent trace={trace as Trace} />
+      </div>
+    </SidebarDataProvider>
   );
 };
 
diff --git a/packages/web/app/components/run-detail-view.tsx b/packages/web/app/components/run-detail-view.tsx
index 77544c99ae..e2eb9eef04 100644
--- a/packages/web/app/components/run-detail-view.tsx
+++ b/packages/web/app/components/run-detail-view.tsx
@@ -8,7 +8,6 @@ import {
   hydrateResourceIOWithKey,
   NewTraceViewer,
   type SidebarDataContextValue,
-  SidebarDataProvider,
   StreamViewer,
   stepEventsToStepEntity,
 } from '@workflow/web-shared';
@@ -770,9 +769,11 @@ export function RunDetailView({
             <TabsContent value="trace" className="mt-0 flex-1 min-h-0">
               <ErrorBoundary title="Failed to load trace viewer">
                 <div className="h-full -mx-6 pl-6 bg-background-100 border-t border-gray-alpha-400 overflow-hidden">
-                  <SidebarDataProvider value={sidebarData}>
-                    <NewTraceViewer run={run} events={allEvents ?? []} />
-                  </SidebarDataProvider>
+                  <NewTraceViewer
+                    run={run}
+                    events={allEvents ?? []}
+                    sidebarData={sidebarData}
+                  />
                 </div>
               </ErrorBoundary>
             </TabsContent>

From 58085e91710f452f6a0852f296f709edf2139e17 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Wed, 15 Apr 2026 21:02:30 -0400
Subject: [PATCH 38/58] dead code

---
 .../new-trace-viewer/trace-viewer.tsx         |  1 -
 .../sidebar/entity-detail-panel.tsx           | 64 -------------------
 2 files changed, 65 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 421090ba00..7e4be4eed7 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -574,7 +574,6 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
                 onDecrypt={sidebar.onDecrypt}
                 isDecrypting={sidebar.isDecrypting}
                 selectedSpan={selectedSpan}
-                hasEncryptedData={sidebar.hasEncryptedData}
               />
             </ErrorBoundary>
           </div>
diff --git a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
index 6404f134ac..2ee489d5ad 100644
--- a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
@@ -4,10 +4,8 @@ import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { isEncryptedMarker } from '../../lib/hydration';
 import { useToast } from '../../lib/toast';
 import { DecryptClickContext } from '../ui/data-inspector';
-import { DecryptButton } from '../ui/decrypt-button';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
@@ -69,7 +67,6 @@ export function EntityDetailPanel({
   onDecrypt,
   isDecrypting = false,
   selectedSpan,
-  hasEncryptedData = false,
 }: {
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
@@ -108,8 +105,6 @@ export function EntityDetailPanel({
   isDecrypting?: boolean;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
-  /** Run-level hint: the run contains encrypted data (from probe). */
-  hasEncryptedData?: boolean;
 }): React.JSX.Element | null {
   const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);
@@ -215,17 +210,6 @@ export function EntityDetailPanel({
 
   const error = spanDetailError ?? undefined;
   const loading = spanDetailLoading ?? false;
-  const hasEncryptedFields = useMemo(() => {
-    if (!spanDetailData) return false;
-    const detailData = spanDetailData as Record<string, unknown>;
-
-    return (
-      isEncryptedMarker(detailData.input) ||
-      isEncryptedMarker(detailData.output) ||
-      isEncryptedMarker(detailData.error) ||
-      isEncryptedMarker(detailData.metadata)
-    );
-  }, [spanDetailData]);
 
   // Get the hook token for resolving (prefer fetched data, then hooks array fallback)
   const hookToken = useMemo(() => {
@@ -357,57 +341,9 @@ export function EntityDetailPanel({
   const hasPendingActions =
     (resource === 'sleep' && canWakeUp) ||
     (resource === 'hook' && canResolveHook);
-  const resourceLabel = resource.charAt(0).toUpperCase() + resource.slice(1);
-  const runStateLabel = run.completedAt ? 'Completed' : 'Live';
 
   return (
     <div className="flex h-full flex-col">
-      <div
-        className="border-b px-3 py-3"
-        style={{ borderColor: 'var(--ds-gray-200)' }}
-      >
-        <div className="flex items-start justify-between gap-2">
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <span
-                className="inline-flex items-center rounded-full border px-2 py-0.5 text-[13px] font-medium"
-                style={{
-                  borderColor: 'var(--ds-gray-300)',
-                  color: 'var(--ds-gray-900)',
-                  backgroundColor: 'var(--ds-background-100)',
-                }}
-              >
-                {resourceLabel}
-              </span>
-              <span
-                className="text-[13px]"
-                style={{
-                  color: run.completedAt
-                    ? 'var(--ds-gray-700)'
-                    : 'var(--ds-green-800)',
-                }}
-              >
-                {runStateLabel}
-              </span>
-            </div>
-            <p
-              className="mt-1 truncate font-mono text-[13px]"
-              style={{ color: 'var(--ds-gray-700)' }}
-              title={resourceId}
-            >
-              {resourceId}
-            </p>
-          </div>
-          {(hasEncryptedFields || hasEncryptedData || encryptionKey) &&
-            onDecrypt && (
-              <DecryptButton
-                decrypted={!!encryptionKey}
-                loading={isDecrypting}
-                onClick={onDecrypt}
-              />
-            )}
-        </div>
-      </div>
       <DecryptClickContext.Provider
         value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
       >

From 1898bcdd2f9154186473a7b3720befddcfce56ce Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 16 Apr 2026 15:37:49 -0400
Subject: [PATCH 39/58] cleaning up more

---
 .../components/copy-button.tsx                | 68 +++++++++++++++++++
 .../new-trace-viewer/components/timeline.tsx  | 13 +++-
 .../new-trace-viewer/trace-viewer.tsx         | 44 ++++++------
 .../src/components/new-trace-viewer/utils.ts  | 65 +++---------------
 .../sidebar/entity-detail-panel.tsx           |  6 --
 5 files changed, 109 insertions(+), 87 deletions(-)
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/components/copy-button.tsx

diff --git a/packages/web-shared/src/components/new-trace-viewer/components/copy-button.tsx b/packages/web-shared/src/components/new-trace-viewer/components/copy-button.tsx
new file mode 100644
index 0000000000..2b3df3bd9b
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/copy-button.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { Check, Copy } from 'lucide-react';
+import { type JSX, useEffect, useRef, useState } from 'react';
+import { cn } from '../../../lib/utils';
+
+interface CopyButtonProps {
+  copyText: string;
+  ariaLabel: string;
+  className?: string;
+}
+
+export function CopyButton({
+  copyText,
+  ariaLabel,
+  className,
+}: CopyButtonProps): JSX.Element {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      className={cn(
+        'cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-none p-1 m-0',
+        className
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        void navigator.clipboard.writeText(copyText).then(() => {
+          setCopied(true);
+          timeoutRef.current = setTimeout(() => setCopied(false), 1000);
+        });
+      }}
+    >
+      <div className="relative w-3 h-3">
+        <div
+          className={cn(
+            'absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out',
+            copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0'
+          )}
+        >
+          <Check className="w-3 h-3" />
+        </div>
+        <div
+          className={cn(
+            'absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out',
+            copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
+          )}
+        >
+          <Copy className="w-3 h-3" />
+        </div>
+      </div>
+    </button>
+  );
+}
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 e520dc675f..32081a82af 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
@@ -186,7 +186,11 @@ const TimelineBar = memo(function TimelineBar({
   const fallbackColor = isErrored
     ? (colors.errorBar ?? 'var(--ds-red-700)')
     : colors.bar;
-  const compressedSegmentStatus = isErrored ? 'failed' : finalSegment?.status;
+  const compressedSegmentStatus = isErrored
+    ? 'failed'
+    : span.resource === 'hook'
+      ? 'received'
+      : finalSegment?.status;
   const compressedSegmentStyle =
     compressedSegmentStatus === 'queued'
       ? { background: 'var(--ds-gray-500)' }
@@ -197,6 +201,9 @@ const TimelineBar = memo(function TimelineBar({
     ? SEGMENT_CONFIG[compressedSegmentStatus].className
     : undefined;
 
+  const hasCompressedStatus = Boolean(
+    compressedSegmentClassName || compressedSegmentStyle
+  );
   const barContent = isCompressed ? (
     <div
       className={cn(
@@ -205,7 +212,7 @@ const TimelineBar = memo(function TimelineBar({
       )}
       style={{
         width: '100%',
-        background: compressedSegmentStyle ? undefined : fallbackColor,
+        background: hasCompressedStatus ? undefined : fallbackColor,
         ...compressedSegmentStyle,
       }}
     />
@@ -345,7 +352,7 @@ export function TimelineHeader({
         {markers.map((m, i) => (
           <span
             key={i}
-            className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap -translate-x-1/2"
+            className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap"
             style={{ left: `${m.position * 100}%` }}
           >
             {m.label}
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 7e4be4eed7..13bf40f067 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -2,7 +2,7 @@
 
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
-import { Copy, Search, X } from 'lucide-react';
+import { Search, X } from 'lucide-react';
 import {
   type ReactNode,
   useCallback,
@@ -19,6 +19,7 @@ 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 { SplitPane } from './components/split-pane';
 import EventList from './components/event-list';
 import { Timeline, TimelineHeader } from './components/timeline';
@@ -30,7 +31,7 @@ interface NewTraceViewerProps {
   trace: Trace;
 }
 
-const MAX_ZOOM = 20;
+const MIN_VIEWPORT_MS = 0.001;
 const TIMELINE_PADDING = 16;
 
 interface Viewport {
@@ -228,15 +229,14 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
         return;
       }
 
-      const padding = Math.max(spanDuration * 0.2, rootD / MAX_ZOOM / 2);
+      const padding = Math.max(spanDuration * 0.2, MIN_VIEWPORT_MS / 2);
       let newStart = spanStart - padding;
       let newEnd = spanEnd + padding;
 
-      const minViewport = Math.max(10, rootD / MAX_ZOOM);
-      if (newEnd - newStart < minViewport) {
+      if (newEnd - newStart < MIN_VIEWPORT_MS) {
         const center = (spanStart + spanEnd) / 2;
-        newStart = center - minViewport / 2;
-        newEnd = center + minViewport / 2;
+        newStart = center - MIN_VIEWPORT_MS / 2;
+        newEnd = center + MIN_VIEWPORT_MS / 2;
       }
 
       if (newStart < rootS) {
@@ -354,9 +354,8 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
         setViewport((prev) => {
           const prevDuration = prev.end - prev.start;
           const cursorTime = prev.start + cursorFraction * prevDuration;
-          const minViewport = Math.max(10, rootD / MAX_ZOOM);
           const newDuration = Math.max(
-            minViewport,
+            MIN_VIEWPORT_MS,
             Math.min(rootD, prevDuration * scaleFactor)
           );
 
@@ -443,13 +442,16 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
       >
         <SplitPane
           startHeader={
-            <div className="bg-background-100 border rounded-md 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 px-2 gap-1.5">
               <Search className="w-3.5 h-3.5 shrink-0 text-gray-800" />
               <input
+                id="trace-viewer-search"
+                name="trace-viewer-search"
                 type="text"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 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"
               />
               {searchQuery && (
@@ -529,21 +531,17 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
                           selectedResource.slice(1)}
                       </span>
                     )}
-                    <button
-                      type="button"
-                      className="flex items-center gap-1 text-[13px] font-mono text-gray-700 hover:text-gray-1000 transition-colors group truncate"
-                      onClick={() => {
-                        navigator.clipboard.writeText(selectedResourceId);
-                      }}
+                    <div
+                      className="flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0"
                       title={selectedResourceId}
                     >
-                      <span className="truncate">
-                        {selectedResourceId.length > 20
-                          ? `${selectedResourceId.slice(0, 8)} ... ${selectedResourceId.slice(-6)}`
-                          : selectedResourceId}
-                      </span>
-                      <Copy className="w-3 h-3 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
-                    </button>
+                      <span className="truncate">{selectedResourceId}</span>
+                      <CopyButton
+                        copyText={selectedResourceId}
+                        ariaLabel="Copy ID"
+                        className="shrink-0"
+                      />
+                    </div>
                   </div>
                 )}
               </div>
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 f75541a8f0..028cb56e89 100644
--- a/packages/web-shared/src/components/new-trace-viewer/utils.ts
+++ b/packages/web-shared/src/components/new-trace-viewer/utils.ts
@@ -437,7 +437,6 @@ function computeRunSegmentsFromSpan(
   }
 
   const failedEvent = sorted.find((e) => e.name === 'run_failed');
-  const completedEvent = sorted.find((e) => e.name === 'run_completed');
 
   let cursor = 0;
   if (activeStartMs !== undefined && activeStartMs > startMs) {
@@ -452,45 +451,11 @@ function computeRunSegmentsFromSpan(
     }
   }
 
-  if (failedEvent) {
-    const failedFrac = timeToFraction(failedEvent.time, startMs, duration);
-    if (failedFrac > cursor + 0.001) {
-      segments.push({
-        startFraction: cursor,
-        endFraction: failedFrac,
-        status: 'running',
-      });
-    }
-    segments.push({
-      startFraction: failedFrac,
-      endFraction: 1,
-      status: 'failed',
-    });
-  } else if (completedEvent) {
-    const completedFrac = timeToFraction(
-      completedEvent.time,
-      startMs,
-      duration
-    );
-    if (completedFrac > cursor + 0.001) {
-      segments.push({
-        startFraction: cursor,
-        endFraction: completedFrac,
-        status: 'running',
-      });
-    }
-    segments.push({
-      startFraction: completedFrac,
-      endFraction: 1,
-      status: 'succeeded',
-    });
-  } else {
-    segments.push({
-      startFraction: cursor,
-      endFraction: 1,
-      status: 'running',
-    });
-  }
+  segments.push({
+    startFraction: cursor,
+    endFraction: 1,
+    status: failedEvent ? 'failed' : 'running',
+  });
 
   return segments;
 }
@@ -516,21 +481,11 @@ function computeV1RunSegments(
     }
   }
 
-  if (runStatus === 'failed') {
-    segments.push({ startFraction: cursor, endFraction: 1, status: 'failed' });
-  } else if (runStatus === 'completed' || runStatus === 'cancelled') {
-    segments.push({
-      startFraction: cursor,
-      endFraction: 1,
-      status: 'succeeded',
-    });
-  } else {
-    segments.push({
-      startFraction: cursor,
-      endFraction: 1,
-      status: 'running',
-    });
-  }
+  segments.push({
+    startFraction: cursor,
+    endFraction: 1,
+    status: runStatus === 'failed' ? 'failed' : 'running',
+  });
 
   return segments;
 }
diff --git a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
index 2ee489d5ad..bf1f7682f3 100644
--- a/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/entity-detail-panel.tsx
@@ -414,12 +414,6 @@ export function EntityDetailPanel({
 
           <div className="space-y-4">
             <section>
-              <h3
-                className="mb-2 text-[13px] font-medium uppercase tracking-wide"
-                style={{ color: 'var(--ds-gray-700)' }}
-              >
-                Details
-              </h3>
               <AttributePanel
                 data={displayData}
                 moduleSpecifier={moduleSpecifier}

From 9f5877f7d0771881f17bd82287ac6c116a814596 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 16 Apr 2026 16:22:57 -0400
Subject: [PATCH 40/58] remove decorative indenting & output loader

---
 .../components/sidebar/attribute-panel.tsx    | 12 +++++------
 .../src/components/sidebar/detail-card.tsx    | 20 +------------------
 2 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/packages/web-shared/src/components/sidebar/attribute-panel.tsx b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
index 82ee292385..f2a7786854 100644
--- a/packages/web-shared/src/components/sidebar/attribute-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
@@ -460,7 +460,7 @@ const attributeToDisplayFn: Record<
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
   createdAt: timestampWithTooltipOrNull,
   startedAt: timestampWithTooltipOrNull,
-  updatedAt: timestampWithTooltipOrNull,
+  updatedAt: (_value: unknown) => null,
   completedAt: timestampWithTooltipOrNull,
   expiredAt: (_value: unknown) => null,
   retryAfter: timestampWithTooltipOrNull,
@@ -662,13 +662,11 @@ export const AttributeBlock = ({
   context?: DisplayContext;
 }) => {
   const isExpandableLoadingTarget =
-    attribute === 'input' ||
-    attribute === 'output' ||
-    attribute === 'eventData';
+    attribute === 'input' || attribute === 'eventData';
   if (isLoading && isExpandableLoadingTarget && !hasDisplayContent(value)) {
     return (
       <div
-        className={`my-2 flex flex-col ${attribute === 'input' || attribute === 'output' ? 'gap-2 my-3.5' : 'gap-0'}`}
+        className={`my-2 flex flex-col ${attribute === 'input' ? 'gap-2 my-3.5' : 'gap-0'}`}
       >
         <span className="text-label-14 text-gray-1000 font-medium first-letter:uppercase">
           {attribute}
@@ -787,9 +785,9 @@ export const AttributePanel = ({
 
     if (!isLoading) return present;
 
-    // During loading, ensure input/output appear so their skeletons render
+    // During loading, ensure input appears so its skeleton renders
     // in the correct position (above the events section).
-    const loadingDefaults = ['input', 'output'];
+    const loadingDefaults = ['input'];
     for (const key of loadingDefaults) {
       if (!present.includes(key)) {
         present.push(key);
diff --git a/packages/web-shared/src/components/sidebar/detail-card.tsx b/packages/web-shared/src/components/sidebar/detail-card.tsx
index 603f29a0d0..8d817f8cce 100644
--- a/packages/web-shared/src/components/sidebar/detail-card.tsx
+++ b/packages/web-shared/src/components/sidebar/detail-card.tsx
@@ -59,25 +59,7 @@ export function DetailCard({
           {summary}
         </span>
       </summary>
-      {/* Expanded content with connecting line */}
-      <div className={`relative pl-6 mt-3 ${contentClassName ?? ''}`}>
-        {/* Curved connecting line - vertical part from summary */}
-        <div
-          className="absolute left-3 -top-3 w-px h-3"
-          style={{ backgroundColor: 'var(--ds-gray-400)' }}
-        />
-        {/* Curved corner */}
-        <div
-          className="absolute left-3 top-0 w-3 h-3 border-l border-b rounded-bl-lg"
-          style={{ borderColor: 'var(--ds-gray-400)' }}
-        />
-        {/* Horizontal part to content */}
-        <div
-          className="absolute left-6 top-3 w-0 h-px -translate-y-px"
-          style={{ backgroundColor: 'var(--ds-gray-400)' }}
-        />
-        <div>{children}</div>
-      </div>
+      <div className={`mt-2 ${contentClassName ?? ''}`}>{children}</div>
     </details>
   );
 }

From cbfa9c42c2b77604e44ab007d670f998ac69acb1 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 16 Apr 2026 17:15:32 -0400
Subject: [PATCH 41/58] fix bars

---
 .../components/new-trace-viewer/components/timeline.tsx   | 8 ++++++--
 .../web-shared/src/components/sidebar/attribute-panel.tsx | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

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 32081a82af..f881e3845c 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
@@ -273,7 +273,9 @@ const TimelineBar = memo(function TimelineBar({
             <div
               className="absolute h-6 top-1.5 rounded-sm"
               style={{
-                left: `${leftPct}%`,
+                left: isCompressed
+                  ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`
+                  : `${leftPct}%`,
                 width: isCompressed
                   ? `${FIXED_BAR_WIDTH_PX}px`
                   : `max(${widthPct}%, 4px)`,
@@ -299,7 +301,9 @@ const TimelineBar = memo(function TimelineBar({
         <div
           className="absolute h-6 top-1.5 rounded-sm"
           style={{
-            left: `${leftPct}%`,
+            left: isCompressed
+              ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`
+              : `${leftPct}%`,
             width: isCompressed
               ? `${FIXED_BAR_WIDTH_PX}px`
               : `max(${widthPct}%, 4px)`,
diff --git a/packages/web-shared/src/components/sidebar/attribute-panel.tsx b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
index f2a7786854..bb3dd8cd28 100644
--- a/packages/web-shared/src/components/sidebar/attribute-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
@@ -860,7 +860,7 @@ export const AttributePanel = ({
             {/* Basic attributes in a vertical layout with border */}
             {visibleBasicAttributes.length > 0 && (
               <div
-                className="mb-3 flex flex-col overflow-hidden rounded-lg border"
+                className="mb-3 flex flex-col overflow-hidden rounded-md border"
                 style={{
                   borderColor: 'var(--ds-gray-300)',
                 }}

From 71c1257a20e508b38cb547c0538f6acb4de58138 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 16 Apr 2026 17:57:46 -0400
Subject: [PATCH 42/58] Update inspector-theme.ts

---
 .../src/components/ui/inspector-theme.ts      | 120 ++++++------------
 1 file changed, 39 insertions(+), 81 deletions(-)

diff --git a/packages/web-shared/src/components/ui/inspector-theme.ts b/packages/web-shared/src/components/ui/inspector-theme.ts
index 9ff25f9ec6..5d04188082 100644
--- a/packages/web-shared/src/components/ui/inspector-theme.ts
+++ b/packages/web-shared/src/components/ui/inspector-theme.ts
@@ -1,17 +1,16 @@
 /**
  * Shared theme configuration for react-inspector's ObjectInspector.
  *
- * Color choices are inspired by Node.js `util.inspect()` ANSI stylizing:
- *   - property names: unstyled (default foreground — dark text on light, light text on dark)
- *   - strings / symbols: green
- *   - numbers / booleans / bigint: yellow
- *   - null: bold (foreground)
- *   - undefined: grey
- *   - regexp: red
- *   - functions (special): cyan
- *   - date: magenta
+ * Colors follow Geist's Shiki JSON palette so the inspector reads the same
+ * as highlighted code blocks across the product:
+ *   - property names / punctuation: --ds-gray-1000 (default foreground)
+ *   - strings / numbers / booleans: --ds-green-900
+ *   - null / undefined: --ds-gray-900 (muted)
+ *   - regexp / function: --ds-purple-900
+ *   - date: --ds-pink-900
  *
- * See: https://github.com/nodejs/node/blob/main/lib/internal/util/inspect.js
+ * Because the `--ds-*` tokens adapt to theme automatically, the light and
+ * dark objects are intentionally identical.
  */
 
 // ---------------------------------------------------------------------------
@@ -25,11 +24,11 @@ export interface InspectorThemeExtended {
 }
 
 export const inspectorThemeExtendedLight: InspectorThemeExtended = {
-  OBJECT_VALUE_DATE_COLOR: '#a21caf', // fuchsia-700
+  OBJECT_VALUE_DATE_COLOR: 'var(--ds-pink-900)',
 };
 
 export const inspectorThemeExtendedDark: InspectorThemeExtended = {
-  OBJECT_VALUE_DATE_COLOR: '#e879f9', // fuchsia-400
+  OBJECT_VALUE_DATE_COLOR: 'var(--ds-pink-900)',
 };
 
 // ---------------------------------------------------------------------------
@@ -57,96 +56,55 @@ const shared = {
 // Light theme
 // ---------------------------------------------------------------------------
 
-export const inspectorThemeLight = {
+const geistTheme = {
   ...shared,
 
   // Base text
   BASE_COLOR: 'var(--ds-gray-1000)',
 
-  // Property names — unstyled, same as base foreground (Node: no style)
-  OBJECT_NAME_COLOR: 'var(--ds-gray-900)',
+  // Property names — default foreground (matches JSON key color in Geist Shiki)
+  OBJECT_NAME_COLOR: 'var(--ds-gray-1000)',
 
-  // Strings & symbols — green (Node: 'green')
-  OBJECT_VALUE_STRING_COLOR: '#16a34a', // green-600
-  OBJECT_VALUE_SYMBOL_COLOR: '#16a34a',
+  // Strings & symbols — green
+  OBJECT_VALUE_STRING_COLOR: 'var(--ds-green-900)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'var(--ds-green-900)',
 
-  // Numbers & booleans — yellow/amber (Node: 'yellow')
-  OBJECT_VALUE_NUMBER_COLOR: '#b45309', // amber-700 (readable on white)
-  OBJECT_VALUE_BOOLEAN_COLOR: '#b45309',
+  // Numbers & booleans — green (Geist JSON tokens)
+  OBJECT_VALUE_NUMBER_COLOR: 'var(--ds-green-900)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'var(--ds-green-900)',
 
-  // null — bold foreground (Node: 'bold')
+  // null — muted foreground
   OBJECT_VALUE_NULL_COLOR: 'var(--ds-gray-900)',
 
-  // undefined — grey (Node: 'grey')
-  OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-500)',
+  // undefined — muted foreground
+  OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-900)',
 
-  // RegExp — red (Node regexp base uses green/red/yellow palette)
-  OBJECT_VALUE_REGEXP_COLOR: '#dc2626', // red-600
+  // RegExp — purple
+  OBJECT_VALUE_REGEXP_COLOR: 'var(--ds-purple-900)',
 
-  // Functions — cyan (Node: 'special' → 'cyan')
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: '#0891b2', // cyan-600
+  // Functions — purple
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'var(--ds-purple-900)',
 
-  // HTML (less relevant for data inspection, but reasonable defaults)
-  HTML_TAG_COLOR: 'var(--ds-gray-500)',
-  HTML_TAGNAME_COLOR: '#0891b2',
-  HTML_ATTRIBUTE_NAME_COLOR: '#b45309',
-  HTML_ATTRIBUTE_VALUE_COLOR: '#16a34a',
-  HTML_COMMENT_COLOR: 'var(--ds-gray-400)',
-  HTML_DOCTYPE_COLOR: 'var(--ds-gray-400)',
+  // HTML (rarely used here, kept consistent with the palette)
+  HTML_TAG_COLOR: 'var(--ds-gray-900)',
+  HTML_TAGNAME_COLOR: 'var(--ds-blue-900)',
+  HTML_ATTRIBUTE_NAME_COLOR: 'var(--ds-amber-900)',
+  HTML_ATTRIBUTE_VALUE_COLOR: 'var(--ds-green-900)',
+  HTML_COMMENT_COLOR: 'var(--ds-gray-700)',
+  HTML_DOCTYPE_COLOR: 'var(--ds-gray-700)',
 
   // Structural
-  ARROW_COLOR: 'var(--ds-gray-500)',
+  ARROW_COLOR: 'var(--ds-gray-700)',
   TABLE_BORDER_COLOR: 'var(--ds-gray-300)',
   TABLE_TH_BACKGROUND_COLOR: 'var(--ds-gray-100)',
   TABLE_TH_HOVER_COLOR: 'var(--ds-gray-200)',
-  TABLE_SORT_ICON_COLOR: 'var(--ds-gray-500)',
+  TABLE_SORT_ICON_COLOR: 'var(--ds-gray-700)',
 };
 
+export const inspectorThemeLight = geistTheme;
+
 // ---------------------------------------------------------------------------
 // Dark theme
 // ---------------------------------------------------------------------------
 
-export const inspectorThemeDark = {
-  ...shared,
-
-  // Base text
-  BASE_COLOR: 'var(--ds-gray-1000)',
-
-  // Property names — white/light foreground (Node: unstyled = white in dark terminal)
-  OBJECT_NAME_COLOR: 'var(--ds-gray-900)',
-
-  // Strings & symbols — green (Node: 'green')
-  OBJECT_VALUE_STRING_COLOR: '#4ade80', // green-400
-  OBJECT_VALUE_SYMBOL_COLOR: '#4ade80',
-
-  // Numbers & booleans — yellow (Node: 'yellow')
-  OBJECT_VALUE_NUMBER_COLOR: '#facc15', // yellow-400
-  OBJECT_VALUE_BOOLEAN_COLOR: '#facc15',
-
-  // null — bold foreground / white (Node: 'bold')
-  OBJECT_VALUE_NULL_COLOR: 'var(--ds-gray-1000)',
-
-  // undefined — grey (Node: 'grey')
-  OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-500)',
-
-  // RegExp — red (Node regexp palette)
-  OBJECT_VALUE_REGEXP_COLOR: '#f87171', // red-400
-
-  // Functions — cyan (Node: 'special' → 'cyan')
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: '#22d3ee', // cyan-400
-
-  // HTML
-  HTML_TAG_COLOR: 'var(--ds-gray-500)',
-  HTML_TAGNAME_COLOR: '#22d3ee',
-  HTML_ATTRIBUTE_NAME_COLOR: '#facc15',
-  HTML_ATTRIBUTE_VALUE_COLOR: '#4ade80',
-  HTML_COMMENT_COLOR: 'var(--ds-gray-500)',
-  HTML_DOCTYPE_COLOR: 'var(--ds-gray-500)',
-
-  // Structural
-  ARROW_COLOR: 'var(--ds-gray-500)',
-  TABLE_BORDER_COLOR: 'var(--ds-gray-300)',
-  TABLE_TH_BACKGROUND_COLOR: 'var(--ds-gray-100)',
-  TABLE_TH_HOVER_COLOR: 'var(--ds-gray-200)',
-  TABLE_SORT_ICON_COLOR: 'var(--ds-gray-500)',
-};
+export const inspectorThemeDark = geistTheme;

From 3f907db16cb237f9dd2465a029b51c8ca3c81b75 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Tue, 21 Apr 2026 12:02:23 -0400
Subject: [PATCH 43/58] cleanups

---
 .../components/event-list.tsx                 |  17 +-
 .../new-trace-viewer/components/timeline.tsx  | 185 ++++++------------
 .../new-trace-viewer/trace-viewer.tsx         |  11 +-
 .../components/sidebar/attribute-panel.tsx    |  19 +-
 .../src/components/sidebar/events-list.tsx    |  11 +-
 5 files changed, 82 insertions(+), 161 deletions(-)

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 48ce1b481f..0c2368a41c 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
@@ -15,25 +15,22 @@ interface EventStyle {
 }
 
 const eventStyles: Record<string, EventStyle> = {
-  run: { icon: WorkflowIcon, className: 'bg-blue-200 text-blue-900' },
-  step: { icon: StepForwardIcon, className: 'bg-green-200 text-green-900' },
-  hook: { icon: WebhookIcon, className: 'bg-yellow-200 text-yellow-900' },
-  sleep: { icon: SleepIcon, className: 'bg-gray-200 text-gray-900' },
+  run: { icon: WorkflowIcon, className: 'text-blue-900' },
+  step: { icon: StepForwardIcon, className: 'text-green-900' },
+  hook: { icon: WebhookIcon, className: 'text-yellow-900' },
+  sleep: { icon: SleepIcon, className: 'text-gray-900' },
 };
 
 const defaultStyle: EventStyle = {
   icon: Circle,
-  className: 'bg-gray-200 text-gray-900',
+  className: 'text-gray-900',
 };
 
 function getEventStyle(resource: string, isErrored: boolean): EventStyle {
   const style = eventStyles[resource] ?? defaultStyle;
   return {
     icon: style.icon,
-    className: cn(
-      'rounded-sm p-1',
-      isErrored ? 'bg-red-200 text-red-900' : style.className
-    ),
+    className: cn(isErrored ? 'text-red-900' : style.className),
   };
 }
 
@@ -63,7 +60,7 @@ const EventRow = ({
       aria-level={1}
       onClick={() => onSelectSpan(span.spanId)}
     >
-      <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-9 py-1.5 flex">
+      <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-[34px] py-1.5 flex">
         <div className="flex items-center gap-2">
           <span className={tagClassName}>
             <Icon className="w-4 h-4" />
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 f881e3845c..84585612a7 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,12 +1,11 @@
 'use client';
 
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import type { ReactNode } from 'react';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
-import type { Segment, SegmentStatus, TimeCompression } from '../utils';
+import type { SegmentStatus, TimeCompression } from '../utils';
 import {
   computeCompressedTimeMarkers,
   computeSpanGaps,
@@ -37,31 +36,10 @@ const SEGMENT_CONFIG: Record<
   received: { className: 'bg-blue-700' },
 };
 
-const SEGMENT_LABELS: Record<SegmentStatus, string> = {
-  queued: 'Queued',
-  retrying: 'Retrying',
-  waiting: 'Waiting',
-  running: 'Running',
-  failed: 'Failed',
-  succeeded: 'Succeeded',
-  sleeping: 'Sleeping',
-  received: 'Received',
-};
-
-const SEGMENT_DOT_COLORS: Record<SegmentStatus, string> = {
-  queued: 'bg-gray-500',
-  retrying: 'bg-gray-500',
-  waiting: 'bg-gray-500',
-  running: 'bg-blue-700',
-  failed: 'bg-red-700',
-  succeeded: 'bg-green-700',
-  sleeping: 'bg-amber-700',
-  received: 'bg-blue-700',
-};
-
 const FIXED_BAR_WIDTH_PX = 4;
 const SEGMENT_GAP_PX = 1;
-const ROW_HEIGHT = 36;
+// Keep this in sync with the rendered row height in the timeline/event list.
+const ROW_HEIGHT = 34;
 const CONTAINER_PAD_Y = 8;
 const END_CAP_HEIGHT = 8;
 
@@ -98,57 +76,6 @@ const DeltaIndicator = memo(function DeltaIndicator({
   );
 });
 
-function BarTooltipContent({
-  segments,
-  totalDurationMs,
-}: {
-  segments: Segment[];
-  totalDurationMs: number;
-}) {
-  const mergedSegments = useMemo(() => {
-    const merged: Segment[] = [];
-    for (const seg of segments) {
-      const last = merged[merged.length - 1];
-      if (last && last.status === seg.status) {
-        last.endFraction = seg.endFraction;
-      } else {
-        merged.push({ ...seg });
-      }
-    }
-    return merged;
-  }, [segments]);
-
-  return (
-    <div className="flex flex-col gap-1">
-      {mergedSegments.map((seg, i) => {
-        const segDuration =
-          (seg.endFraction - seg.startFraction) * totalDurationMs;
-        return (
-          <div
-            key={`${seg.status}-${i}`}
-            className="flex items-center justify-between gap-3"
-          >
-            <div className="flex items-center gap-1.5">
-              <span
-                className={cn(
-                  'w-1.5 h-1.5 rounded-full shrink-0',
-                  SEGMENT_DOT_COLORS[seg.status]
-                )}
-              />
-              <span className="text-label-12 font-medium">
-                {SEGMENT_LABELS[seg.status]}
-              </span>
-            </div>
-            <span className="text-label-12 font-mono font-medium text-gray-900 tabular-nums">
-              {formatDuration(segDuration)}
-            </span>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
 const TimelineBar = memo(function TimelineBar({
   span,
   compression,
@@ -175,6 +102,7 @@ const TimelineBar = memo(function TimelineBar({
 
   const pixelWidth = widthFrac * containerWidth;
   const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;
+  const [isRowHovered, setIsRowHovered] = useState(false);
 
   const segments = useMemo(() => computeSpanSegments(span), [span]);
   const finalSegment = segments[segments.length - 1];
@@ -204,10 +132,25 @@ const TimelineBar = memo(function TimelineBar({
   const hasCompressedStatus = Boolean(
     compressedSegmentClassName || compressedSegmentStyle
   );
+  const renderDurationLabel = (label: string) => (
+    <span
+      className="pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums"
+      style={{ textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }}
+    >
+      {label}
+    </span>
+  );
+  const getMinDurationLabelWidthPx = (label: string) =>
+    Math.max(40, label.length * 6 + 12);
+  const totalDurationLabel = formatDuration(totalDurationMs);
+  const showBarDurationLabel =
+    isRowHovered &&
+    pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
+
   const barContent = isCompressed ? (
     <div
       className={cn(
-        'h-4 rounded-[0.25rem] relative top-1',
+        'relative h-4 rounded-[0.25rem] top-[3px]',
         compressedSegmentClassName
       )}
       style={{
@@ -215,12 +158,20 @@ const TimelineBar = memo(function TimelineBar({
         background: hasCompressedStatus ? undefined : fallbackColor,
         ...compressedSegmentStyle,
       }}
-    />
+    >
+      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}
+    </div>
   ) : segments.length > 0 ? (
-    <div className="relative w-full h-4 top-1">
+    <div className="relative w-full h-4 top-[3px]">
       {segments.map((seg, i) => {
         const segPixelWidth =
           (seg.endFraction - seg.startFraction) * pixelWidth;
+        const segDurationLabel = formatDuration(
+          (seg.endFraction - seg.startFraction) * totalDurationMs
+        );
+        const showSegmentDurationLabel =
+          isRowHovered &&
+          segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);
         const segStyle =
           seg.status === 'queued' && segPixelWidth < 20
             ? { background: 'var(--ds-gray-500)' }
@@ -239,23 +190,27 @@ const TimelineBar = memo(function TimelineBar({
               minWidth: 1,
               ...segStyle,
             }}
-          />
+          >
+            {showSegmentDurationLabel
+              ? renderDurationLabel(segDurationLabel)
+              : null}
+          </div>
         );
       })}
     </div>
   ) : (
     <div
-      className="h-4 rounded-[0.25rem] relative top-1"
+      className="relative h-4 rounded-[0.25rem] top-[3px]"
       style={{
         width: '100%',
         minWidth: 4,
         background: fallbackColor,
       }}
-    />
+    >
+      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}
+    </div>
   );
 
-  const hasTooltip = segments.length > 0;
-
   return (
     <div
       role="treeitem"
@@ -263,55 +218,25 @@ const TimelineBar = memo(function TimelineBar({
       aria-expanded={isSelected}
       aria-level={1}
       className={cn(
-        'h-9 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 rounded-sm aria-selected:hover:bg-gray-200'
+        'h-[34px] relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 rounded-sm aria-selected:hover:bg-gray-200'
       )}
+      onMouseEnter={() => setIsRowHovered(true)}
+      onMouseLeave={() => setIsRowHovered(false)}
       onClick={onClick}
     >
-      {hasTooltip ? (
-        <TooltipPrimitive.Root delayDuration={200}>
-          <TooltipPrimitive.Trigger asChild>
-            <div
-              className="absolute h-6 top-1.5 rounded-sm"
-              style={{
-                left: isCompressed
-                  ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`
-                  : `${leftPct}%`,
-                width: isCompressed
-                  ? `${FIXED_BAR_WIDTH_PX}px`
-                  : `max(${widthPct}%, 4px)`,
-              }}
-            >
-              {barContent}
-            </div>
-          </TooltipPrimitive.Trigger>
-          <TooltipPrimitive.Portal>
-            <TooltipPrimitive.Content
-              side="top"
-              sideOffset={6}
-              className="z-50 rounded border border-gray-alpha-400 bg-background-100 shadow-md px-3 py-2 min-w-[160px] origin-[var(--radix-tooltip-content-transform-origin)] data-[state=delayed-open]:animate-[tooltip-enter_150ms_ease-out]"
-            >
-              <BarTooltipContent
-                segments={segments}
-                totalDurationMs={totalDurationMs}
-              />
-            </TooltipPrimitive.Content>
-          </TooltipPrimitive.Portal>
-        </TooltipPrimitive.Root>
-      ) : (
-        <div
-          className="absolute h-6 top-1.5 rounded-sm"
-          style={{
-            left: isCompressed
-              ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`
-              : `${leftPct}%`,
-            width: isCompressed
-              ? `${FIXED_BAR_WIDTH_PX}px`
-              : `max(${widthPct}%, 4px)`,
-          }}
-        >
-          {barContent}
-        </div>
-      )}
+      <div
+        className="absolute top-1.5 h-[22px] rounded-sm"
+        style={{
+          left: isCompressed
+            ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`
+            : `${leftPct}%`,
+          width: isCompressed
+            ? `${FIXED_BAR_WIDTH_PX}px`
+            : `max(${widthPct}%, 4px)`,
+        }}
+      >
+        {barContent}
+      </div>
     </div>
   );
 });
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 13bf40f067..b9fb629bda 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import { Search, X } from 'lucide-react';
 import {
@@ -133,11 +132,9 @@ function useSelectedSpanInfo(): SelectedSpanInfo | null {
 
 export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
   return (
-    <TooltipPrimitive.Provider delayDuration={0}>
-      <ActiveSpanProvider spans={trace.spans}>
-        <NewTraceViewerContent trace={trace} />
-      </ActiveSpanProvider>
-    </TooltipPrimitive.Provider>
+    <ActiveSpanProvider spans={trace.spans}>
+      <NewTraceViewerContent trace={trace} />
+    </ActiveSpanProvider>
   );
 }
 
@@ -556,7 +553,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           </div>
           {/* Panel body */}
           <div className="flex-1 overflow-y-auto">
-            <ErrorBoundary title="Failed to load entity details">
+            <ErrorBoundary>
               <EntityDetailPanel
                 run={sidebar.run}
                 onStreamClick={sidebar.onStreamClick}
diff --git a/packages/web-shared/src/components/sidebar/attribute-panel.tsx b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
index bb3dd8cd28..4e16aa638a 100644
--- a/packages/web-shared/src/components/sidebar/attribute-panel.tsx
+++ b/packages/web-shared/src/components/sidebar/attribute-panel.tsx
@@ -331,15 +331,15 @@ const attributeDisplayNames: Partial<Record<AttributeKey, string>> = {
   deploymentId: 'Deployment ID',
   specVersion: 'Spec Version',
   workflowCoreVersion: '@workflow/core version',
-  createdAt: 'Created At',
-  startedAt: 'Started At',
-  updatedAt: 'Updated At',
-  completedAt: 'Completed At',
-  expiredAt: 'Expired At',
+  createdAt: 'Created',
+  startedAt: 'Started',
+  updatedAt: 'Updated',
+  completedAt: 'Completed',
+  expiredAt: 'Expired',
   retryAfter: 'Retry After',
-  resumeAt: 'Resume At',
-  lastReceivedAt: 'Last Received At',
-  disposedAt: 'Disposed At',
+  resumeAt: 'Resume',
+  lastReceivedAt: 'Last Received',
+  disposedAt: 'Disposed',
   receivedCount: 'Times Resolved',
 };
 
@@ -429,8 +429,7 @@ const attributeToDisplayFn: Record<
   // Names that need pretty-printing
   workflowName: (_value: unknown) => null,
   moduleSpecifier: (value: unknown) => getModuleSpecifierFromName(value),
-  stepName: (value: unknown) =>
-    parseStepName(String(value))?.shortName ?? String(value),
+  stepName: (_value: unknown) => null,
   // IDs
   runId: (_value: unknown) => null,
   stepId: (_value: unknown) => null,
diff --git a/packages/web-shared/src/components/sidebar/events-list.tsx b/packages/web-shared/src/components/sidebar/events-list.tsx
index c14927bd49..af31f533a1 100644
--- a/packages/web-shared/src/components/sidebar/events-list.tsx
+++ b/packages/web-shared/src/components/sidebar/events-list.tsx
@@ -142,8 +142,11 @@ function EventItem({
           className="flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5"
           style={{ borderColor: 'var(--ds-gray-300)' }}
         >
-          <span className="text-[14px]" style={{ color: 'var(--ds-gray-700)' }}>
-            eventId
+          <span
+            className="text-[13px] font-medium"
+            style={{ color: 'var(--ds-gray-700)' }}
+          >
+            Event ID
           </span>
           <span
             className="max-w-[70%] truncate text-right text-[13px] font-mono"
@@ -159,10 +162,10 @@ function EventItem({
             style={{ borderColor: 'var(--ds-gray-300)' }}
           >
             <span
-              className="text-[14px]"
+              className="text-[13px] font-medium"
               style={{ color: 'var(--ds-gray-700)' }}
             >
-              correlationId
+              Correlation ID
             </span>
             <span
               className="max-w-[70%] truncate text-right text-[13px] font-mono"

From 39d9890514a03d52436f531f68f550974f720f68 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Tue, 21 Apr 2026 12:59:27 -0400
Subject: [PATCH 44/58] Update copyable-data-block.tsx

---
 .../web-shared/src/components/sidebar/copyable-data-block.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-shared/src/components/sidebar/copyable-data-block.tsx b/packages/web-shared/src/components/sidebar/copyable-data-block.tsx
index 16d0685a97..d77f4376f9 100644
--- a/packages/web-shared/src/components/sidebar/copyable-data-block.tsx
+++ b/packages/web-shared/src/components/sidebar/copyable-data-block.tsx
@@ -24,7 +24,7 @@ export function CopyableDataBlock({ data }: { data: unknown }) {
   const toast = useToast();
   return (
     <div
-      className="relative overflow-x-auto rounded-md border p-3 pt-9"
+      className="relative overflow-x-auto rounded-md border p-3"
       style={{ borderColor: 'var(--ds-gray-300)' }}
     >
       <button

From 7aefc5253b2db183d3f015ac4b03514d6931f104 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Wed, 29 Apr 2026 14:11:47 -0400
Subject: [PATCH 45/58] cleanup

---
 .../components/split-pane.tsx                 |  2 +-
 .../new-trace-viewer/components/timeline.tsx  | 56 +++------------
 .../new-trace-viewer/trace-viewer.tsx         | 70 +++++++++++++++++--
 .../src/components/new-trace-viewer/utils.ts  | 35 ++--------
 .../web/app/components/run-detail-view.tsx    |  2 +-
 5 files changed, 78 insertions(+), 87 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
index ce5741450a..53131392a3 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
@@ -155,7 +155,7 @@ export function SplitPane({
         <div
           ref={containerRef}
           className={cn(
-            'grid flex-1 min-h-0 content-start overflow-x-hidden overflow-y-auto',
+            'grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto',
             isDragging && 'select-none'
           )}
           style={{ gridTemplateColumns: colTemplate }}
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 84585612a7..19ba18646e 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,5 +1,6 @@
 'use client';
 
+import { ArrowLeft, ArrowRight } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../lib/utils';
@@ -36,7 +37,7 @@ const SEGMENT_CONFIG: Record<
   received: { className: 'bg-blue-700' },
 };
 
-const FIXED_BAR_WIDTH_PX = 4;
+const COMPRESSED_BOX_SIZE_PX = 16;
 const SEGMENT_GAP_PX = 1;
 // Keep this in sync with the rendered row height in the timeline/event list.
 const ROW_HEIGHT = 34;
@@ -101,11 +102,11 @@ const TimelineBar = memo(function TimelineBar({
   const widthPct = widthFrac * 100;
 
   const pixelWidth = widthFrac * containerWidth;
-  const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;
+  const isCompressed =
+    containerWidth > 0 && pixelWidth < COMPRESSED_BOX_SIZE_PX;
   const [isRowHovered, setIsRowHovered] = useState(false);
 
   const segments = useMemo(() => computeSpanSegments(span), [span]);
-  const finalSegment = segments[segments.length - 1];
 
   const workflowStatus = (span.attributes.data as Record<string, unknown>)
     ?.status as string | undefined;
@@ -114,24 +115,7 @@ const TimelineBar = memo(function TimelineBar({
   const fallbackColor = isErrored
     ? (colors.errorBar ?? 'var(--ds-red-700)')
     : colors.bar;
-  const compressedSegmentStatus = isErrored
-    ? 'failed'
-    : span.resource === 'hook'
-      ? 'received'
-      : finalSegment?.status;
-  const compressedSegmentStyle =
-    compressedSegmentStatus === 'queued'
-      ? { background: 'var(--ds-gray-500)' }
-      : compressedSegmentStatus
-        ? SEGMENT_CONFIG[compressedSegmentStatus].style
-        : undefined;
-  const compressedSegmentClassName = compressedSegmentStatus
-    ? SEGMENT_CONFIG[compressedSegmentStatus].className
-    : undefined;
 
-  const hasCompressedStatus = Boolean(
-    compressedSegmentClassName || compressedSegmentStyle
-  );
   const renderDurationLabel = (label: string) => (
     <span
       className="pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums"
@@ -147,19 +131,10 @@ const TimelineBar = memo(function TimelineBar({
     isRowHovered &&
     pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
 
+  const CompressedArrow = leftFrac < 0.5 ? ArrowLeft : ArrowRight;
   const barContent = isCompressed ? (
-    <div
-      className={cn(
-        'relative h-4 rounded-[0.25rem] top-[3px]',
-        compressedSegmentClassName
-      )}
-      style={{
-        width: '100%',
-        background: hasCompressedStatus ? undefined : fallbackColor,
-        ...compressedSegmentStyle,
-      }}
-    >
-      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}
+    <div className="relative top-[3px] flex h-4 w-4 items-center justify-center rounded-[0.25rem] bg-gray-200">
+      <CompressedArrow className="size-3 text-gray-900" />
     </div>
   ) : segments.length > 0 ? (
     <div className="relative w-full h-4 top-[3px]">
@@ -228,10 +203,10 @@ const TimelineBar = memo(function TimelineBar({
         className="absolute top-1.5 h-[22px] rounded-sm"
         style={{
           left: isCompressed
-            ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`
+            ? `min(${leftPct}%, calc(100% - ${COMPRESSED_BOX_SIZE_PX}px))`
             : `${leftPct}%`,
           width: isCompressed
-            ? `${FIXED_BAR_WIDTH_PX}px`
+            ? `${COMPRESSED_BOX_SIZE_PX}px`
             : `max(${widthPct}%, 4px)`,
         }}
       >
@@ -248,16 +223,12 @@ export function TimelineHeader({
   viewDuration,
   rootStart,
   compression,
-  isZoomed,
-  onResetZoom,
   hoverInfo,
 }: {
   viewStart: number;
   viewDuration: number;
   rootStart: number;
   compression: TimeCompression;
-  isZoomed: boolean;
-  onResetZoom: () => void;
   hoverInfo?: { fraction: number; label: string } | null;
 }): ReactNode {
   const viewEnd = viewStart + viewDuration;
@@ -296,15 +267,6 @@ export function TimelineHeader({
           </span>
         )}
       </div>
-      {isZoomed && (
-        <button
-          type="button"
-          className="absolute right-2 top-1/2 -translate-y-1/2 z-[5] flex items-center py-0.5 px-2 border border-gray-alpha-400 rounded-md bg-background-100 font-sans text-[11px] font-medium text-gray-900 cursor-pointer whitespace-nowrap transition-[color,border-color] duration-[120ms] ease-in-out hover:text-gray-1000 hover:border-gray-600"
-          onClick={onResetZoom}
-        >
-          Reset zoom
-        </button>
-      )}
     </div>
   );
 }
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index b9fb629bda..33e371b0da 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
-import { Search, X } from 'lucide-react';
+import { RotateCcw, Search, X, ZoomIn, ZoomOut } from 'lucide-react';
 import {
   type ReactNode,
   useCallback,
@@ -194,14 +194,46 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     [trace.spans, viewport.start, viewport.end]
   );
 
-  const isZoomed =
-    viewport.start > root.startTime + 0.01 ||
-    viewport.end < root.startTime + root.duration - 0.01;
-
   const resetZoom = useCallback(() => {
     animateTo({ start: root.startTime, end: root.startTime + root.duration });
   }, [animateTo, root.startTime, root.duration]);
 
+  const ZOOM_FACTOR = 0.5;
+
+  const zoomBy = useCallback(
+    (factor: number) => {
+      const rootS = root.startTime;
+      const rootE = root.startTime + root.duration;
+      const rootD = root.duration;
+
+      setViewport((prev) => {
+        const prevDuration = prev.end - prev.start;
+        const center = (prev.start + prev.end) / 2;
+        const newDuration = Math.max(
+          MIN_VIEWPORT_MS,
+          Math.min(rootD, prevDuration * factor)
+        );
+        let newStart = center - newDuration / 2;
+        let newEnd = center + newDuration / 2;
+
+        if (newStart < rootS) {
+          newStart = rootS;
+          newEnd = rootS + newDuration;
+        }
+        if (newEnd > rootE) {
+          newEnd = rootE;
+          newStart = Math.max(rootS, rootE - newDuration);
+        }
+
+        return { start: newStart, end: newEnd };
+      });
+    },
+    [setViewport, root.startTime, root.duration]
+  );
+
+  const zoomIn = useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
+  const zoomOut = useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);
+
   const handleSelectSpan = useCallback(
     (spanId: string) => {
       if (spanId === activeSpanId) {
@@ -468,8 +500,6 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
               viewDuration={viewDuration}
               rootStart={root.startTime}
               compression={compression}
-              isZoomed={isZoomed}
-              onResetZoom={resetZoom}
               hoverInfo={hoverInfo}
             />
           }
@@ -498,6 +528,32 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             />
           </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-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            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-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            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-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            onClick={zoomIn}
+            aria-label="Zoom in"
+          >
+            <ZoomIn className="w-4 h-4" />
+          </button>
+        </div>
       </div>
 
       {/* Detail panel */}
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 028cb56e89..2a7beedc17 100644
--- a/packages/web-shared/src/components/new-trace-viewer/utils.ts
+++ b/packages/web-shared/src/components/new-trace-viewer/utils.ts
@@ -379,39 +379,12 @@ function computeHookSegmentsFromSpan(
 }
 
 function computeSleepSegmentsFromSpan(
-  startMs: number,
+  _startMs: number,
   duration: number,
-  events: SpanEvent[]
+  _events: SpanEvent[]
 ): Segment[] {
-  const segments: Segment[] = [];
-  if (duration <= 0) return segments;
-
-  const completedTime = events
-    .filter((e) => e.name === 'wait_completed')
-    .map((e) => getHighResInMs(e.timestamp))
-    .sort((a, b) => a - b)[0];
-
-  if (completedTime === undefined) {
-    segments.push({ startFraction: 0, endFraction: 1, status: 'sleeping' });
-    return segments;
-  }
-
-  const completedFrac = timeToFraction(completedTime, startMs, duration);
-  if (completedFrac > 0.001) {
-    segments.push({
-      startFraction: 0,
-      endFraction: completedFrac,
-      status: 'sleeping',
-    });
-  }
-
-  segments.push({
-    startFraction: completedFrac,
-    endFraction: 1,
-    status: 'succeeded',
-  });
-
-  return segments;
+  if (duration <= 0) return [];
+  return [{ startFraction: 0, endFraction: 1, status: 'sleeping' }];
 }
 
 function computeRunSegmentsFromSpan(
diff --git a/packages/web/app/components/run-detail-view.tsx b/packages/web/app/components/run-detail-view.tsx
index 7750b5d474..0f362c4842 100644
--- a/packages/web/app/components/run-detail-view.tsx
+++ b/packages/web/app/components/run-detail-view.tsx
@@ -781,7 +781,7 @@ export function RunDetailView({
 
             <TabsContent value="trace" className="mt-0 flex-1 min-h-0">
               <ErrorBoundary title="Failed to load trace viewer">
-                <div className="h-full -mx-6 pl-6 bg-background-100 border-t border-gray-alpha-400 overflow-hidden">
+                <div className="h-full -mx-6 bg-background-100 border-t border-gray-alpha-400 overflow-hidden">
                   <NewTraceViewer
                     run={run}
                     events={allEvents ?? []}

From 5cb758b537c3ba4b152b3e9a85ba28f44992592f Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Wed, 29 Apr 2026 14:53:13 -0400
Subject: [PATCH 46/58] chonky

---
 .../new-trace-viewer/components/timeline.tsx  | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

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 19ba18646e..55a67bb27a 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
@@ -37,7 +37,9 @@ const SEGMENT_CONFIG: Record<
   received: { className: 'bg-blue-700' },
 };
 
-const COMPRESSED_BOX_SIZE_PX = 16;
+const BAR_HEIGHT_PX = 24;
+const COMPRESSED_BOX_SIZE_PX = 24;
+const COMPRESSED_SEGMENT_WIDTH_PX = 4;
 const SEGMENT_GAP_PX = 1;
 // Keep this in sync with the rendered row height in the timeline/event list.
 const ROW_HEIGHT = 34;
@@ -131,13 +133,19 @@ const TimelineBar = memo(function TimelineBar({
     isRowHovered &&
     pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
 
+  const showCompressedArrow = isCompressed && (leftFrac <= 0 || rightFrac >= 1);
   const CompressedArrow = leftFrac < 0.5 ? ArrowLeft : ArrowRight;
-  const barContent = isCompressed ? (
-    <div className="relative top-[3px] flex h-4 w-4 items-center justify-center rounded-[0.25rem] bg-gray-200">
+  const barContent = showCompressedArrow ? (
+    <div className="flex h-6 w-6 items-center justify-center rounded-[0.25rem]">
       <CompressedArrow className="size-3 text-gray-900" />
     </div>
+  ) : isCompressed ? (
+    <div
+      className="h-6 rounded-[0.25rem]"
+      style={{ background: fallbackColor }}
+    />
   ) : segments.length > 0 ? (
-    <div className="relative w-full h-4 top-[3px]">
+    <div className="relative h-6 w-full">
       {segments.map((seg, i) => {
         const segPixelWidth =
           (seg.endFraction - seg.startFraction) * pixelWidth;
@@ -175,7 +183,7 @@ const TimelineBar = memo(function TimelineBar({
     </div>
   ) : (
     <div
-      className="relative h-4 rounded-[0.25rem] top-[3px]"
+      className="relative h-6 rounded-[0.25rem]"
       style={{
         width: '100%',
         minWidth: 4,
@@ -200,14 +208,23 @@ const TimelineBar = memo(function TimelineBar({
       onClick={onClick}
     >
       <div
-        className="absolute top-1.5 h-[22px] rounded-sm"
+        className="absolute top-1/2 -translate-y-1/2 rounded-sm"
         style={{
           left: isCompressed
-            ? `min(${leftPct}%, calc(100% - ${COMPRESSED_BOX_SIZE_PX}px))`
+            ? `min(${leftPct}%, calc(100% - ${
+                showCompressedArrow
+                  ? COMPRESSED_BOX_SIZE_PX
+                  : COMPRESSED_SEGMENT_WIDTH_PX
+              }px))`
             : `${leftPct}%`,
           width: isCompressed
-            ? `${COMPRESSED_BOX_SIZE_PX}px`
+            ? `${
+                showCompressedArrow
+                  ? COMPRESSED_BOX_SIZE_PX
+                  : COMPRESSED_SEGMENT_WIDTH_PX
+              }px`
             : `max(${widthPct}%, 4px)`,
+          height: BAR_HEIGHT_PX,
         }}
       >
         {barContent}

From a3b14d5b7d08e15976da3902b67ed091906a1abd Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Wed, 29 Apr 2026 15:10:19 -0400
Subject: [PATCH 47/58] Update timeline.tsx

---
 .../src/components/new-trace-viewer/components/timeline.tsx  | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

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 55a67bb27a..bd04be58cd 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
@@ -15,9 +15,6 @@ import {
   getResourceColor,
 } from '../utils';
 
-const QUEUED_BACKGROUND =
-  'radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)';
-
 const HATCHED_BACKGROUND =
   'repeating-linear-gradient(-45deg, var(--ds-gray-400) 0px, var(--ds-gray-400) 3px, var(--ds-gray-500) 3px, var(--ds-gray-500) 6px)';
 
@@ -25,7 +22,7 @@ const SEGMENT_CONFIG: Record<
   SegmentStatus,
   { className?: string; style?: React.CSSProperties }
 > = {
-  queued: { style: { background: QUEUED_BACKGROUND } },
+  queued: { className: 'bg-gray-500' },
   retrying: {
     className: 'box-border bg-gray-500',
   },

From b0dca2c53108fdef41f14d4c7b69241a80d96c86 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Wed, 29 Apr 2026 15:11:40 -0400
Subject: [PATCH 48/58] bug fxi

---
 .../src/components/new-trace-viewer/context.tsx  | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/context.tsx b/packages/web-shared/src/components/new-trace-viewer/context.tsx
index d20cb63437..dc8bd82a6c 100644
--- a/packages/web-shared/src/components/new-trace-viewer/context.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/context.tsx
@@ -34,20 +34,18 @@ export function ActiveSpanProvider({
 
   useEffect(() => {
     setActiveSpanId((currentSpanId) => {
-      if (spans.length === 0) {
+      if (!currentSpanId) {
         return null;
       }
 
-      if (currentSpanId) {
-        const hasCurrentSpan = spans.some(
-          (span) => span.spanId === currentSpanId
-        );
-        if (hasCurrentSpan) {
-          return currentSpanId;
-        }
+      const hasCurrentSpan = spans.some(
+        (span) => span.spanId === currentSpanId
+      );
+      if (hasCurrentSpan) {
+        return currentSpanId;
       }
 
-      return spans[0].spanId;
+      return null;
     });
   }, [spans]);
 

From 4038f33352b098e17956ab69bf2c6066a93ae40b Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Wed, 29 Apr 2026 15:31:40 -0400
Subject: [PATCH 49/58] marker lines

---
 .../new-trace-viewer/components/timeline.tsx  | 45 ++++++++-----------
 .../new-trace-viewer/trace-viewer.tsx         | 30 +++++++++----
 2 files changed, 40 insertions(+), 35 deletions(-)

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 bd04be58cd..f4d9a2b28a 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
@@ -233,39 +233,18 @@ const TimelineBar = memo(function TimelineBar({
 export { TimelineBar };
 
 export function TimelineHeader({
-  viewStart,
-  viewDuration,
-  rootStart,
-  compression,
+  markers,
   hoverInfo,
 }: {
-  viewStart: number;
-  viewDuration: number;
-  rootStart: number;
-  compression: TimeCompression;
+  markers: TimeMarker[];
   hoverInfo?: { fraction: number; label: string } | null;
 }): ReactNode {
-  const viewEnd = viewStart + viewDuration;
-
-  const markers = useMemo(
-    () =>
-      compression.isCompressed
-        ? computeCompressedTimeMarkers(
-            compression,
-            viewStart,
-            viewEnd,
-            rootStart
-          )
-        : computeTimeMarkers(viewDuration, viewStart - rootStart),
-    [compression, viewStart, viewEnd, viewDuration, rootStart]
-  );
-
   return (
     <div className="relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-2 pb-1">
       <div className="relative h-full flex-1">
-        {markers.map((m, i) => (
+        {markers.map((m) => (
           <span
-            key={i}
+            key={`${m.position}-${m.label}`}
             className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap"
             style={{ left: `${m.position * 100}%` }}
           >
@@ -288,6 +267,7 @@ export function TimelineHeader({
 export function Timeline({
   spans,
   compression,
+  markers,
   selectedId,
   onSelect,
   hoverFraction,
@@ -295,6 +275,7 @@ export function Timeline({
 }: {
   spans: Span[];
   compression: TimeCompression;
+  markers: TimeMarker[];
   selectedId: string | null;
   onSelect: (spanId: string) => void;
   hoverFraction?: number | null;
@@ -319,7 +300,19 @@ export function Timeline({
   );
 
   return (
-    <div ref={containerRef} className="relative py-2">
+    <div ref={containerRef} className="relative py-2 h-full">
+      <div
+        aria-hidden
+        className="absolute inset-y-0 inset-x-0 pointer-events-none"
+      >
+        {markers.map((marker) => (
+          <div
+            key={`${marker.position}-${marker.label}`}
+            className="absolute top-0 bottom-0 w-px bg-gray-alpha-300"
+            style={{ left: `${marker.position * 100}%` }}
+          />
+        ))}
+      </div>
       {hoverFraction != null && (
         <div
           className="absolute top-0 bottom-0 w-px bg-gray-alpha-400 pointer-events-none z-10"
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 33e371b0da..5effa289ed 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -19,12 +19,17 @@ 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 { SplitPane } from './components/split-pane';
 import EventList from './components/event-list';
+import { SplitPane } from './components/split-pane';
 import { Timeline, TimelineHeader } from './components/timeline';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { DetailPanel } from './detail-panel';
-import { buildTimeCompression, computeRootBounds } from './utils';
+import {
+  buildTimeCompression,
+  computeCompressedTimeMarkers,
+  computeRootBounds,
+  computeTimeMarkers,
+} from './utils';
 
 interface NewTraceViewerProps {
   trace: Trace;
@@ -194,6 +199,18 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     [trace.spans, viewport.start, viewport.end]
   );
 
+  const timeMarkers = useMemo(() => {
+    const viewEnd = viewport.end;
+    return compression.isCompressed
+      ? computeCompressedTimeMarkers(
+          compression,
+          viewport.start,
+          viewEnd,
+          root.startTime
+        )
+      : computeTimeMarkers(viewDuration, viewport.start - root.startTime);
+  }, [compression, viewport.start, viewport.end, viewDuration, root.startTime]);
+
   const resetZoom = useCallback(() => {
     animateTo({ start: root.startTime, end: root.startTime + root.duration });
   }, [animateTo, root.startTime, root.duration]);
@@ -495,13 +512,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             </div>
           }
           endHeader={
-            <TimelineHeader
-              viewStart={viewport.start}
-              viewDuration={viewDuration}
-              rootStart={root.startTime}
-              compression={compression}
-              hoverInfo={hoverInfo}
-            />
+            <TimelineHeader markers={timeMarkers} hoverInfo={hoverInfo} />
           }
         >
           <div className="block overflow-visible">
@@ -521,6 +532,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             <Timeline
               spans={filteredSpans}
               compression={compression}
+              markers={timeMarkers}
               selectedId={activeSpanId}
               onSelect={handleSelectSpan}
               hoverFraction={hoverFraction}

From 62e9a645615de5ca7ddc446da32d80f3e3b617f5 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Wed, 29 Apr 2026 16:36:48 -0400
Subject: [PATCH 50/58] wip

---
 .../components/split-pane.tsx                 |  3 +-
 .../new-trace-viewer/components/timeline.tsx  | 86 ++++++++++---------
 .../new-trace-viewer/trace-viewer.tsx         | 34 ++------
 .../src/components/new-trace-viewer/utils.ts  | 69 ++-------------
 4 files changed, 63 insertions(+), 129 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
index 53131392a3..9a2677c736 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
@@ -11,8 +11,7 @@ import {
 } from 'react';
 import { cn } from '../../../lib/utils';
 
-/** Wide enough for comfortable dragging; visual line stays 1px centered. */
-const GUTTER_PX = 9;
+const GUTTER_PX = 1;
 const MIN_PX = 50;
 const DEFAULT_START_PX = 340;
 
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 f4d9a2b28a..ce05484394 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
@@ -6,12 +6,10 @@ import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
-import type { SegmentStatus, TimeCompression } from '../utils';
+import type { SegmentStatus, TimeMarker } from '../utils';
 import {
-  computeCompressedTimeMarkers,
   computeSpanGaps,
   computeSpanSegments,
-  computeTimeMarkers,
   getResourceColor,
 } from '../utils';
 
@@ -35,8 +33,8 @@ const SEGMENT_CONFIG: Record<
 };
 
 const BAR_HEIGHT_PX = 24;
-const COMPRESSED_BOX_SIZE_PX = 24;
-const COMPRESSED_SEGMENT_WIDTH_PX = 4;
+const TINY_BAR_BOX_SIZE_PX = 24;
+const TINY_BAR_WIDTH_PX = 4;
 const SEGMENT_GAP_PX = 1;
 // Keep this in sync with the rendered row height in the timeline/event list.
 const ROW_HEIGHT = 34;
@@ -78,13 +76,15 @@ const DeltaIndicator = memo(function DeltaIndicator({
 
 const TimelineBar = memo(function TimelineBar({
   span,
-  compression,
+  viewStart,
+  viewDuration,
   containerWidth,
   isSelected,
   onClick,
 }: {
   span: Span;
-  compression: TimeCompression;
+  viewStart: number;
+  viewDuration: number;
   containerWidth: number;
   isSelected: boolean;
   onClick: () => void;
@@ -93,16 +93,22 @@ const TimelineBar = memo(function TimelineBar({
   const endTime = getHighResInMs(span.endTime);
   const totalDurationMs = endTime - startTime;
 
-  const leftFrac = compression.toVisual(startTime);
-  const rightFrac = compression.toVisual(endTime);
-  const widthFrac = rightFrac - leftFrac;
+  const leftFracRaw =
+    viewDuration > 0 ? (startTime - viewStart) / viewDuration : 0;
+  const rightFracRaw =
+    viewDuration > 0 ? (endTime - viewStart) / viewDuration : 0;
+  const widthFrac = rightFracRaw - leftFracRaw;
 
-  const leftPct = leftFrac * 100;
+  const leftPct = leftFracRaw * 100;
   const widthPct = widthFrac * 100;
 
   const pixelWidth = widthFrac * containerWidth;
-  const isCompressed =
-    containerWidth > 0 && pixelWidth < COMPRESSED_BOX_SIZE_PX;
+  const visibleLeftFrac = Math.max(0, Math.min(1, leftFracRaw));
+  const visibleRightFrac = Math.max(0, Math.min(1, rightFracRaw));
+  const visiblePixelWidth =
+    Math.max(0, visibleRightFrac - visibleLeftFrac) * containerWidth;
+  const isTinyBar =
+    containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;
   const [isRowHovered, setIsRowHovered] = useState(false);
 
   const segments = useMemo(() => computeSpanSegments(span), [span]);
@@ -130,13 +136,13 @@ const TimelineBar = memo(function TimelineBar({
     isRowHovered &&
     pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
 
-  const showCompressedArrow = isCompressed && (leftFrac <= 0 || rightFrac >= 1);
-  const CompressedArrow = leftFrac < 0.5 ? ArrowLeft : ArrowRight;
-  const barContent = showCompressedArrow ? (
+  const showBoundaryArrow = isTinyBar && (leftFracRaw < 0 || rightFracRaw > 1);
+  const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;
+  const barContent = showBoundaryArrow ? (
     <div className="flex h-6 w-6 items-center justify-center rounded-[0.25rem]">
-      <CompressedArrow className="size-3 text-gray-900" />
+      <BoundaryArrow className="size-3 text-gray-900" />
     </div>
-  ) : isCompressed ? (
+  ) : isTinyBar ? (
     <div
       className="h-6 rounded-[0.25rem]"
       style={{ background: fallbackColor }}
@@ -198,29 +204,25 @@ const TimelineBar = memo(function TimelineBar({
       aria-expanded={isSelected}
       aria-level={1}
       className={cn(
-        'h-[34px] relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 rounded-sm aria-selected:hover:bg-gray-200'
+        'h-[34px] relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'
       )}
       onMouseEnter={() => setIsRowHovered(true)}
       onMouseLeave={() => setIsRowHovered(false)}
       onClick={onClick}
     >
       <div
-        className="absolute top-1/2 -translate-y-1/2 rounded-sm"
+        className="absolute top-1/2 -translate-y-1/2"
         style={{
-          left: isCompressed
-            ? `min(${leftPct}%, calc(100% - ${
-                showCompressedArrow
-                  ? COMPRESSED_BOX_SIZE_PX
-                  : COMPRESSED_SEGMENT_WIDTH_PX
-              }px))`
-            : `${leftPct}%`,
-          width: isCompressed
-            ? `${
-                showCompressedArrow
-                  ? COMPRESSED_BOX_SIZE_PX
-                  : COMPRESSED_SEGMENT_WIDTH_PX
-              }px`
-            : `max(${widthPct}%, 4px)`,
+          left: showBoundaryArrow
+            ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))`
+            : isTinyBar
+              ? `min(${leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`
+              : `${leftPct}%`,
+          width: showBoundaryArrow
+            ? `${TINY_BAR_BOX_SIZE_PX}px`
+            : isTinyBar
+              ? `${TINY_BAR_WIDTH_PX}px`
+              : `max(${widthPct}%, 4px)`,
           height: BAR_HEIGHT_PX,
         }}
       >
@@ -266,7 +268,8 @@ export function TimelineHeader({
 
 export function Timeline({
   spans,
-  compression,
+  viewStart,
+  viewEnd,
   markers,
   selectedId,
   onSelect,
@@ -274,7 +277,8 @@ export function Timeline({
   altHeld = false,
 }: {
   spans: Span[];
-  compression: TimeCompression;
+  viewStart: number;
+  viewEnd: number;
   markers: TimeMarker[];
   selectedId: string | null;
   onSelect: (spanId: string) => void;
@@ -283,6 +287,7 @@ export function Timeline({
 }): ReactNode {
   const containerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
+  const viewDuration = viewEnd - viewStart;
 
   useEffect(() => {
     const el = containerRef.current;
@@ -295,12 +300,12 @@ export function Timeline({
   }, []);
 
   const gaps = useMemo(
-    () => computeSpanGaps(spans, compression),
-    [spans, compression]
+    () => computeSpanGaps(spans, viewStart, viewEnd),
+    [spans, viewStart, viewEnd]
   );
 
   return (
-    <div ref={containerRef} className="relative py-2 h-full">
+    <div ref={containerRef} className="relative py-2 h-full overflow-hidden">
       <div
         aria-hidden
         className="absolute inset-y-0 inset-x-0 pointer-events-none"
@@ -323,7 +328,8 @@ export function Timeline({
         <TimelineBar
           key={span.spanId}
           span={span}
-          compression={compression}
+          viewStart={viewStart}
+          viewDuration={viewDuration}
           containerWidth={containerWidth}
           isSelected={selectedId === span.spanId}
           onClick={() => onSelect(span.spanId)}
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 5effa289ed..be860fb382 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -24,12 +24,7 @@ import { SplitPane } from './components/split-pane';
 import { Timeline, TimelineHeader } from './components/timeline';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { DetailPanel } from './detail-panel';
-import {
-  buildTimeCompression,
-  computeCompressedTimeMarkers,
-  computeRootBounds,
-  computeTimeMarkers,
-} from './utils';
+import { computeRootBounds, computeTimeMarkers } from './utils';
 
 interface NewTraceViewerProps {
   trace: Trace;
@@ -194,23 +189,11 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   const viewDuration = viewport.end - viewport.start;
 
-  const compression = useMemo(
-    () => buildTimeCompression(trace.spans, viewport.start, viewport.end),
-    [trace.spans, viewport.start, viewport.end]
+  const timeMarkers = useMemo(
+    () => computeTimeMarkers(viewDuration, viewport.start - root.startTime),
+    [viewDuration, viewport.start, root.startTime]
   );
 
-  const timeMarkers = useMemo(() => {
-    const viewEnd = viewport.end;
-    return compression.isCompressed
-      ? computeCompressedTimeMarkers(
-          compression,
-          viewport.start,
-          viewEnd,
-          root.startTime
-        )
-      : computeTimeMarkers(viewDuration, viewport.start - root.startTime);
-  }, [compression, viewport.start, viewport.end, viewDuration, root.startTime]);
-
   const resetZoom = useCallback(() => {
     animateTo({ start: root.startTime, end: root.startTime + root.duration });
   }, [animateTo, root.startTime, root.duration]);
@@ -341,10 +324,10 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   const hoverInfo = useMemo(() => {
     if (hoverFraction == null) return null;
-    const absTime = compression.fromVisual(hoverFraction);
+    const absTime = viewport.start + hoverFraction * viewDuration;
     const offset = absTime - root.startTime;
     return { fraction: hoverFraction, label: formatDuration(offset, true) };
-  }, [hoverFraction, compression, root.startTime]);
+  }, [hoverFraction, viewport.start, viewDuration, root.startTime]);
 
   const handleTimelineMouseMove = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
@@ -524,14 +507,15 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           </div>
           <div
             ref={timelineRef}
-            className="block min-h-0 overflow-visible relative px-2"
+            className="block min-h-0 overflow-visible relative"
             onDoubleClick={resetZoom}
             onMouseMove={handleTimelineMouseMove}
             onMouseLeave={handleTimelineMouseLeave}
           >
             <Timeline
               spans={filteredSpans}
-              compression={compression}
+              viewStart={viewport.start}
+              viewEnd={viewport.end}
               markers={timeMarkers}
               selectedId={activeSpanId}
               onSelect={handleSelectSpan}
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 2a7beedc17..4e4cac4e61 100644
--- a/packages/web-shared/src/components/new-trace-viewer/utils.ts
+++ b/packages/web-shared/src/components/new-trace-viewer/utils.ts
@@ -30,35 +30,6 @@ export function computeRootBounds(spans: Span[]): RootBounds {
   return { startTime: minStart, endTime: maxEnd, duration };
 }
 
-// ---------------------------------------------------------------------------
-// Time compression
-// ---------------------------------------------------------------------------
-
-export interface TimeCompression {
-  toVisual(time: number): number;
-  fromVisual(fraction: number): number;
-  isCompressed: boolean;
-}
-
-export function buildTimeCompression(
-  _spans: Span[],
-  viewStart: number,
-  viewEnd: number
-): TimeCompression {
-  const range = viewEnd - viewStart;
-
-  return {
-    isCompressed: false,
-    toVisual(time: number): number {
-      if (range <= 0) return 0;
-      return Math.min(Math.max((time - viewStart) / range, 0), 1);
-    },
-    fromVisual(fraction: number): number {
-      return viewStart + fraction * range;
-    },
-  };
-}
-
 // ---------------------------------------------------------------------------
 // Time markers
 // ---------------------------------------------------------------------------
@@ -109,36 +80,6 @@ export function computeTimeMarkers(
   return markers;
 }
 
-export function computeCompressedTimeMarkers(
-  compression: TimeCompression,
-  viewStart: number,
-  viewEnd: number,
-  rootStart: number
-): TimeMarker[] {
-  const viewDuration = viewEnd - viewStart;
-  if (viewDuration <= 0) return [];
-
-  const maxTicks = 6;
-  const interval = pickInterval(viewDuration, maxTicks);
-  const offset = viewStart - rootStart;
-
-  const firstTick = Math.ceil(offset / interval) * interval;
-  const markers: TimeMarker[] = [];
-
-  for (let t = firstTick; t <= offset + viewDuration; t += interval) {
-    const absTime = rootStart + t;
-    const position = compression.toVisual(absTime);
-    if (position < -0.01 || position > 1.01) continue;
-    markers.push({
-      position: Math.min(Math.max(position, 0), 1),
-      label: formatDuration(Math.abs(t), true),
-    });
-    if (markers.length >= MAX_MARKERS) break;
-  }
-
-  return markers;
-}
-
 // ---------------------------------------------------------------------------
 // Span gaps — time deltas between consecutive spans (Alt-key overlay)
 // ---------------------------------------------------------------------------
@@ -152,8 +93,12 @@ export interface SpanGap {
 
 export function computeSpanGaps(
   spans: Span[],
-  compression: TimeCompression
+  viewStart: number,
+  viewEnd: number
 ): SpanGap[] {
+  const range = viewEnd - viewStart;
+  if (range <= 0) return [];
+
   const gaps: SpanGap[] = [];
   for (let i = 0; i < spans.length - 1; i++) {
     const endTime = getHighResInMs(spans[i].endTime);
@@ -161,8 +106,8 @@ export function computeSpanGaps(
     const gapMs = startTime - endTime;
     if (gapMs <= 0) continue;
 
-    const leftFrac = compression.toVisual(endTime);
-    const rightFrac = compression.toVisual(startTime);
+    const leftFrac = Math.min(Math.max((endTime - viewStart) / range, 0), 1);
+    const rightFrac = Math.min(Math.max((startTime - viewStart) / range, 0), 1);
     if (rightFrac - leftFrac < 0.001) continue;
 
     gaps.push({ gapMs, leftFrac, rightFrac, rowIndex: i });

From 9a90c067b63310bfad95061b0a5cbee6c85fdcda Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Wed, 29 Apr 2026 17:17:22 -0400
Subject: [PATCH 51/58] changes

---
 .../components/event-list.tsx                 |  5 +-
 .../new-trace-viewer/components/timeline.tsx  |  3 +-
 .../new-trace-viewer/detail-panel.tsx         |  3 +-
 .../src/components/new-trace-viewer/utils.ts  | 10 ++-
 .../trace-span-construction.ts                | 26 +++++--
 packages/web-shared/src/lib/trace-builder.ts  |  3 +-
 .../web-shared/test/trace-builder-v1.test.ts  | 68 +++++++++++++++++++
 7 files changed, 107 insertions(+), 11 deletions(-)

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 0c2368a41c..61ed3de7d5 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
@@ -1,13 +1,14 @@
 import { Circle } from 'lucide-react';
 import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
-import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+import { formatDuration } from '../../trace-viewer/util/timing';
 import {
   WorkflowIcon,
   WebhookIcon,
   SleepIcon,
   StepForwardIcon,
 } from '../icons';
+import { getSpanDurationMs } from '../utils';
 
 interface EventStyle {
   icon: React.ComponentType<{ className?: string }>;
@@ -43,7 +44,7 @@ const EventRow = ({
   isSelected: boolean;
   onSelectSpan: (spanId: string) => void;
 }) => {
-  const durationMs = getHighResInMs(span.duration);
+  const durationMs = getSpanDurationMs(span);
   const isErrored =
     (span.attributes.data as Record<string, unknown>).status === 'failed';
   const { icon: Icon, className: tagClassName } = getEventStyle(
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 ce05484394..611ee4c4bf 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
@@ -10,6 +10,7 @@ import type { SegmentStatus, TimeMarker } from '../utils';
 import {
   computeSpanGaps,
   computeSpanSegments,
+  getSpanDurationMs,
   getResourceColor,
 } from '../utils';
 
@@ -91,7 +92,7 @@ const TimelineBar = memo(function TimelineBar({
 }): ReactNode {
   const startTime = getHighResInMs(span.startTime);
   const endTime = getHighResInMs(span.endTime);
-  const totalDurationMs = endTime - startTime;
+  const totalDurationMs = getSpanDurationMs(span);
 
   const leftFracRaw =
     viewDuration > 0 ? (startTime - viewStart) / viewDuration : 0;
diff --git a/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx b/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx
index 6fa902539e..64956d78fc 100644
--- a/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx
@@ -4,6 +4,7 @@ import { X } from 'lucide-react';
 import type { ReactNode } from 'react';
 import type { Span } from '../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import { getSpanDurationMs } from './utils';
 
 interface DetailPanelProps {
   span: Span;
@@ -17,7 +18,7 @@ export function DetailPanel({
   onClose,
 }: DetailPanelProps): ReactNode {
   const startMs = getHighResInMs(span.startTime);
-  const durationMs = getHighResInMs(span.duration);
+  const durationMs = getSpanDurationMs(span);
   const offsetMs = startMs - rootStart;
 
   return (
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 4e4cac4e61..21addf8259 100644
--- a/packages/web-shared/src/components/new-trace-viewer/utils.ts
+++ b/packages/web-shared/src/components/new-trace-viewer/utils.ts
@@ -30,6 +30,13 @@ export function computeRootBounds(spans: Span[]): RootBounds {
   return { startTime: minStart, endTime: maxEnd, duration };
 }
 
+export function getSpanDurationMs(span: Span): number {
+  return Math.max(
+    0,
+    getHighResInMs(span.endTime) - getHighResInMs(span.startTime)
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Time markers
 // ---------------------------------------------------------------------------
@@ -415,8 +422,7 @@ function computeV1RunSegments(
  */
 export function computeSpanSegments(span: Span): Segment[] {
   const startMs = getHighResInMs(span.startTime);
-  const endMs = getHighResInMs(span.endTime);
-  const duration = endMs - startMs;
+  const duration = getSpanDurationMs(span);
   const activeStartMs = span.activeStartTime
     ? getHighResInMs(span.activeStartTime)
     : undefined;
diff --git a/packages/web-shared/src/components/workflow-traces/trace-span-construction.ts b/packages/web-shared/src/components/workflow-traces/trace-span-construction.ts
index 7005c3930f..8fffbb669d 100644
--- a/packages/web-shared/src/components/workflow-traces/trace-span-construction.ts
+++ b/packages/web-shared/src/components/workflow-traces/trace-span-construction.ts
@@ -59,7 +59,7 @@ export const waitEventsToWaitEntity = (
   waitId: string;
   runId: string;
   createdAt: Date;
-  resumeAt: Date;
+  resumeAt?: Date;
   completedAt?: Date;
 } | null => {
   const startEvent = events.find((event) => event.eventType === 'wait_created');
@@ -73,7 +73,9 @@ export const waitEventsToWaitEntity = (
     waitId: startEvent.correlationId,
     runId: startEvent.runId,
     createdAt: startEvent.createdAt,
-    resumeAt: startEvent.eventData?.resumeAt,
+    resumeAt: startEvent.eventData?.resumeAt
+      ? new Date(startEvent.eventData.resumeAt)
+      : undefined,
     completedAt: completedEvent?.createdAt,
   };
 };
@@ -81,13 +83,29 @@ export const waitEventsToWaitEntity = (
 /**
  * Converts a workflow Wait to an OpenTelemetry Span
  */
-export function waitToSpan(events: Event[], maxEndTime: Date): Span | null {
+export function waitToSpan(
+  events: Event[],
+  maxEndTime: Date,
+  fallbackEndTime = maxEndTime
+): Span | null {
   const wait = waitEventsToWaitEntity(events);
   if (!wait) {
     return null;
   }
   const startTime = wait.createdAt;
-  const endTime = wait.completedAt ?? maxEndTime;
+  const startMs = startTime.getTime();
+  let endTime = wait.completedAt;
+  if (!endTime) {
+    const fallbackCap =
+      wait.resumeAt && wait.resumeAt.getTime() < fallbackEndTime.getTime()
+        ? wait.resumeAt
+        : fallbackEndTime;
+    endTime =
+      maxEndTime.getTime() > startMs &&
+      maxEndTime.getTime() < fallbackCap.getTime()
+        ? maxEndTime
+        : fallbackCap;
+  }
   const start = dateToOtelTime(startTime);
   const end = dateToOtelTime(endTime);
   const duration = calculateDuration(startTime, endTime);
diff --git a/packages/web-shared/src/lib/trace-builder.ts b/packages/web-shared/src/lib/trace-builder.ts
index b4179813ec..81faa537fd 100644
--- a/packages/web-shared/src/lib/trace-builder.ts
+++ b/packages/web-shared/src/lib/trace-builder.ts
@@ -117,6 +117,7 @@ function buildSpans(
   // unknown territory. Even when the run is completed, we may not have loaded
   // all events yet, so always use the latest event we've actually seen.
   const childMaxEnd = latestKnownTime;
+  const runMaxEnd = run.completedAt ?? now;
 
   const stepSpans = Array.from(groupedEvents.eventsByStepId.values())
     .map((events) => stepToSpan(events, childMaxEnd))
@@ -127,7 +128,7 @@ function buildSpans(
     .filter((span): span is Span => span !== null);
 
   const waitSpans = Array.from(groupedEvents.timerEvents.values())
-    .map((events) => waitToSpan(events, childMaxEnd))
+    .map((events) => waitToSpan(events, childMaxEnd, runMaxEnd))
     .filter((span): span is Span => span !== null);
 
   return {
diff --git a/packages/web-shared/test/trace-builder-v1.test.ts b/packages/web-shared/test/trace-builder-v1.test.ts
index 1109b9b2f1..e99ea664a6 100644
--- a/packages/web-shared/test/trace-builder-v1.test.ts
+++ b/packages/web-shared/test/trace-builder-v1.test.ts
@@ -192,6 +192,74 @@ describe('Trace viewer with v1 events (no run lifecycle events)', () => {
       // parseStepName which returns the correlationId as fallback
       expect(stepSpan!.spanId).toBe('step_1');
     });
+
+    it('uses resumeAt for pending sleep span duration', () => {
+      const run = makeV1Run({
+        status: 'running',
+        completedAt: undefined,
+        output: undefined,
+      });
+      const waitCreatedAt = new Date(BASE_TIME.getTime() + 1_000);
+      const resumeAt = new Date(BASE_TIME.getTime() + 61_000);
+      const events = [
+        {
+          eventId: 'evnt_wait_created',
+          runId: 'wrun_v1test',
+          eventType: 'wait_created',
+          correlationId: 'wait_1',
+          createdAt: waitCreatedAt,
+          specVersion: 1,
+          eventData: { resumeAt },
+        },
+      ] as Event[];
+
+      const trace = buildTrace(
+        run,
+        events,
+        new Date(BASE_TIME.getTime() + 11_000)
+      );
+      const sleepSpan = trace.spans.find((s) => s.resource === 'sleep');
+
+      expect(sleepSpan).toBeDefined();
+      const { map } = parseTrace(trace);
+      expect(map[sleepSpan!.spanId].duration).toBe(10_000);
+    });
+
+    it('caps pending sleep spans at the latest known event before resumeAt', () => {
+      const run = makeV1Run({
+        status: 'completed',
+        completedAt: new Date(BASE_TIME.getTime() + 86_400_000),
+      });
+      const waitCreatedAt = new Date(BASE_TIME.getTime() + 1_000);
+      const latestKnownAt = new Date(BASE_TIME.getTime() + 86_401_000);
+      const resumeAt = new Date(BASE_TIME.getTime() + 6 * 86_400_000 + 1_000);
+      const events = [
+        {
+          eventId: 'evnt_wait_created',
+          runId: 'wrun_v1test',
+          eventType: 'wait_created',
+          correlationId: 'wait_1',
+          createdAt: waitCreatedAt,
+          specVersion: 1,
+          eventData: { resumeAt },
+        },
+        {
+          eventId: 'evnt_run_completed',
+          runId: 'wrun_v1test',
+          eventType: 'run_completed',
+          createdAt: latestKnownAt,
+          specVersion: 1,
+          eventData: { output: { result: 'ok' } },
+        },
+      ] as Event[];
+
+      const trace = buildTrace(run, events, latestKnownAt);
+      const sleepSpan = trace.spans.find((s) => s.resource === 'sleep');
+
+      expect(sleepSpan).toBeDefined();
+      const { map } = parseTrace(trace);
+      expect(map[sleepSpan!.spanId].duration).toBe(86_399_000);
+    });
   });
 
   describe('computeSegments for v1 run spans', () => {

From cd6e5db5269166953bdf4b987faa05e4108fe7ee Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Wed, 29 Apr 2026 17:34:31 -0400
Subject: [PATCH 52/58] Update event-list.tsx

---
 .../components/new-trace-viewer/components/event-list.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 61ed3de7d5..49d1b7fcff 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
@@ -54,14 +54,14 @@ const EventRow = ({
 
   return (
     <li
-      className="overflow-clip group"
+      className="relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400"
       role="treeitem"
       aria-selected={isSelected}
       aria-expanded={isSelected}
       aria-level={1}
       onClick={() => onSelectSpan(span.spanId)}
     >
-      <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-[34px] py-1.5 flex">
+      <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 px-2 h-[34px] py-1.5 flex">
         <div className="flex items-center gap-2">
           <span className={tagClassName}>
             <Icon className="w-4 h-4" />
@@ -91,7 +91,7 @@ const EventList = ({
     <ul
       id="event-list"
       role="tree"
-      className="block min-h-0 overflow-visible px-2 py-2"
+      className="block min-h-0 overflow-visible py-2"
     >
       {spans.map((span) => {
         return (

From 1abcf34ba6f8e727f46e6621dd370e70fd81b7f1 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Wed, 29 Apr 2026 17:55:17 -0400
Subject: [PATCH 53/58] rounded

---
 .../components/trace-viewer/util/timing.ts    | 14 ++---
 packages/web-shared/src/lib/utils.ts          | 58 +++++++++----------
 2 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/packages/web-shared/src/components/trace-viewer/util/timing.ts b/packages/web-shared/src/components/trace-viewer/util/timing.ts
index b357635890..60ae65582b 100644
--- a/packages/web-shared/src/components/trace-viewer/util/timing.ts
+++ b/packages/web-shared/src/components/trace-viewer/util/timing.ts
@@ -14,22 +14,18 @@ export function getMsInHighRes(ms: number): [number, number] {
 }
 
 /**
- * Formats a duration for timeline display (compact single-unit format).
+ * Formats a duration for timeline display (compact format).
  * @deprecated Use formatDuration(ms, true) instead.
  */
 export const formatDurationForTimeline = (ms: number): string =>
   formatDuration(ms, true);
 
-const timeSelectionFormatter = new Intl.NumberFormat(undefined, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
 export function formatTimeSelection(ms: number): string {
-  if (ms >= 1000) {
-    return `${timeSelectionFormatter.format(ms / 1000)}s`;
+  const roundedMs = Math.round(ms);
+  if (roundedMs < 1000) {
+    return `${roundedMs}ms`;
   }
-  return `${timeSelectionFormatter.format(ms)}ms`;
+  return `${Math.round(ms / 1000)}s`;
 }
 
 /**
diff --git a/packages/web-shared/src/lib/utils.ts b/packages/web-shared/src/lib/utils.ts
index 861f551620..4e36599785 100644
--- a/packages/web-shared/src/lib/utils.ts
+++ b/packages/web-shared/src/lib/utils.ts
@@ -7,15 +7,6 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-// const compactFormatter = new Intl.NumberFormat(undefined, {
-//   maximumFractionDigits: 2,
-// });
-
-const secondsFormatter = new Intl.NumberFormat(undefined, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
 const MS_IN_SECOND = 1000;
 const MS_IN_MINUTE = 60 * MS_IN_SECOND;
 const MS_IN_HOUR = 60 * MS_IN_MINUTE;
@@ -25,44 +16,53 @@ const MS_IN_DAY = 24 * MS_IN_HOUR;
  * Formats a duration in milliseconds to a human-readable string.
  *
  * @param ms - Duration in milliseconds
- * @param compact - If true, returns a single-unit format (e.g., "0.38s", "2.5m").
- *                  If false (default), returns multi-part format (e.g., "1m 13.21s", "2d 5h 3m 12.00s").
+ * @param compact - If true, returns a compact format (e.g., "380ms", "2m 30s").
+ *                  If false (default), returns multi-part format (e.g., "1m 13s", "2d 5h 3m 12s").
  *
  * Compact format (timeline markers):
- * - < 1m: shows seconds (e.g., "0.38s", "45s")
- * - < 1h: shows minutes (e.g., "2.5m")
- * - >= 1h: shows hours (e.g., "2.5h")
+ * - < 1s: shows milliseconds (e.g., "380ms")
+ * - < 1m: shows seconds (e.g., "45s")
+ * - < 1h: shows minutes and seconds (e.g., "2m 30s")
+ * - >= 1h: shows hours and minutes (e.g., "2h 30m")
  *
  * Full format:
- * - < 1m: shows seconds (e.g., "0.38s", "2.71s")
- * - >= 1m: shows decomposed format with fractional seconds (e.g., "1m 13.21s", "2m 13.04s")
+ * - < 1s: shows milliseconds (e.g., "380ms")
+ * - < 1m: shows seconds (e.g., "45s")
+ * - >= 1m: shows decomposed format with whole seconds (e.g., "1m 13s", "2m 13s")
  */
 export function formatDuration(ms: number, compact = false): string {
   if (ms === 0) {
     return '0s';
   }
 
-  if (ms < MS_IN_MINUTE) {
-    return `${secondsFormatter.format(ms / MS_IN_SECOND)}s`;
+  if (ms < MS_IN_SECOND) {
+    const roundedMs = Math.round(ms);
+    return roundedMs < MS_IN_SECOND ? `${roundedMs}ms` : '1s';
+  }
+
+  const roundedMs = Math.round(ms / MS_IN_SECOND) * MS_IN_SECOND;
+
+  if (roundedMs < MS_IN_MINUTE) {
+    return `${Math.floor(roundedMs / MS_IN_SECOND)}s`;
   }
 
   // Compact format: multi-unit without decimals (e.g. "8m 20s", "2h 30m")
   if (compact) {
-    if (ms < MS_IN_HOUR) {
-      const m = Math.floor(ms / MS_IN_MINUTE);
-      const s = Math.floor((ms % MS_IN_MINUTE) / MS_IN_SECOND);
+    if (roundedMs < MS_IN_HOUR) {
+      const m = Math.floor(roundedMs / MS_IN_MINUTE);
+      const s = Math.floor((roundedMs % MS_IN_MINUTE) / MS_IN_SECOND);
       return s > 0 ? `${m}m ${s}s` : `${m}m`;
     }
-    const h = Math.floor(ms / MS_IN_HOUR);
-    const m = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
+    const h = Math.floor(roundedMs / MS_IN_HOUR);
+    const m = Math.floor((roundedMs % MS_IN_HOUR) / MS_IN_MINUTE);
     return m > 0 ? `${h}h ${m}m` : `${h}h`;
   }
 
-  // Full format: decompose into larger units + fractional seconds
-  const days = Math.floor(ms / MS_IN_DAY);
-  const hours = Math.floor((ms % MS_IN_DAY) / MS_IN_HOUR);
-  const minutes = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
-  const seconds = (ms % MS_IN_MINUTE) / MS_IN_SECOND;
+  // Full format: decompose into larger units + whole seconds.
+  const days = Math.floor(roundedMs / MS_IN_DAY);
+  const hours = Math.floor((roundedMs % MS_IN_DAY) / MS_IN_HOUR);
+  const minutes = Math.floor((roundedMs % MS_IN_HOUR) / MS_IN_MINUTE);
+  const seconds = Math.floor((roundedMs % MS_IN_MINUTE) / MS_IN_SECOND);
 
   const parts: string[] = [];
 
@@ -75,7 +75,7 @@ export function formatDuration(ms: number, compact = false): string {
   if (minutes > 0) {
     parts.push(`${minutes}m`);
   }
-  parts.push(`${secondsFormatter.format(seconds)}s`);
+  parts.push(`${seconds}s`);
 
   return parts.join(' ');
 }

From 7df11f1b4bd7d6114002478d4039e405cda25d89 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 30 Apr 2026 14:00:26 -0400
Subject: [PATCH 54/58] Update event-list.tsx

---
 .../components/event-list.tsx                 | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

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 49d1b7fcff..b97fb208b2 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
@@ -54,22 +54,22 @@ const EventRow = ({
 
   return (
     <li
-      className="relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400"
-      role="treeitem"
+      className='relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400'
+      role='treeitem'
       aria-selected={isSelected}
       aria-expanded={isSelected}
       aria-level={1}
       onClick={() => onSelectSpan(span.spanId)}
     >
-      <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 px-2 h-[34px] py-1.5 flex">
-        <div className="flex items-center gap-2">
+      <div className='hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 px-2 h-[34px] py-1.5 flex'>
+        <div className='flex items-center gap-2'>
           <span className={tagClassName}>
-            <Icon className="w-4 h-4" />
+            <Icon className='w-4 h-4' />
           </span>
-          <span className="text-label-14">{span.name}</span>
+          <span className='text-label-14'>{span.name}</span>
         </div>
-        <div className="ml-auto">
-          <span className="text-label-14 text-gray-900 tabular-nums">
+        <div className='ml-auto'>
+          <span className='text-label-14 text-gray-900 tabular-nums'>
             {formatDuration(durationMs)}
           </span>
         </div>
@@ -88,11 +88,7 @@ const EventList = ({
   onSelectSpan: (spanId: string) => void;
 }) => {
   return (
-    <ul
-      id="event-list"
-      role="tree"
-      className="block min-h-0 overflow-visible py-2"
-    >
+    <ul id='event-list' role='tree' className='block min-h-0 overflow-visible'>
       {spans.map((span) => {
         return (
           <EventRow

From c3494a05cb526e71453f78151691c0a8746c7fb7 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 30 Apr 2026 15:33:15 -0400
Subject: [PATCH 55/58] middle truncate component

---
 .../middle-truncate/copy-selection.ts         | 114 ++++++++++++
 .../middle-truncate/middle-truncate.tsx       | 157 ++++++++++++++++
 .../components/middle-truncate/truncate.ts    | 132 ++++++++++++++
 .../middle-truncate/use-middle-truncate.ts    | 167 ++++++++++++++++++
 4 files changed, 570 insertions(+)
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/copy-selection.ts
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/middle-truncate.tsx
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/truncate.ts
 create mode 100644 packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.ts

diff --git a/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/copy-selection.ts b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/copy-selection.ts
new file mode 100644
index 0000000000..6280336d8f
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/copy-selection.ts
@@ -0,0 +1,114 @@
+import { ELLIPSIS, toGraphemes } from './truncate';
+
+interface GetMiddleTruncateCopyTextOptions {
+  prefixText: string;
+  selectionEnd: number;
+  selectionStart: number;
+  suffixText: string;
+  value: string;
+}
+
+interface GetMiddleTruncateCopyTextFromSelectionTextOptions {
+  prefixText: string;
+  selectionText: string;
+  suffixText: string;
+  value: string;
+}
+
+function getMiddleTruncateCopyText({
+  prefixText,
+  selectionEnd,
+  selectionStart,
+  suffixText,
+  value,
+}: GetMiddleTruncateCopyTextOptions): string | null {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+
+  if (
+    selectionStart < 0 ||
+    selectionEnd > visibleText.length ||
+    selectionStart >= selectionEnd
+  ) {
+    return null;
+  }
+
+  if (selectionStart === 0 && selectionEnd === visibleText.length) {
+    return value;
+  }
+
+  const ellipsisStart = prefixText.length;
+  const ellipsisEnd = ellipsisStart + ELLIPSIS.length;
+
+  if (selectionStart > ellipsisStart || selectionEnd < ellipsisEnd) {
+    return null;
+  }
+
+  const originalGraphemes = toGraphemes(value);
+  const selectedPrefixGraphemeCount = toGraphemes(
+    visibleText.slice(0, selectionStart)
+  ).length;
+  const selectedSuffixGraphemeCount = toGraphemes(
+    visibleText.slice(ellipsisEnd, selectionEnd)
+  ).length;
+  const suffixStart = originalGraphemes.length - toGraphemes(suffixText).length;
+
+  return originalGraphemes
+    .slice(
+      selectedPrefixGraphemeCount,
+      suffixStart + selectedSuffixGraphemeCount
+    )
+    .join('');
+}
+
+function getMiddleTruncateCopyTextFromSelectionText({
+  prefixText,
+  selectionText,
+  suffixText,
+  value,
+}: GetMiddleTruncateCopyTextFromSelectionTextOptions): string | null {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+  const trimmedSelectionText = selectionText.trim();
+
+  if (!trimmedSelectionText) {
+    return null;
+  }
+
+  const leading = selectionText.slice(
+    0,
+    selectionText.length - selectionText.trimStart().length
+  );
+  const trailing = selectionText.slice(selectionText.trimEnd().length);
+
+  if (trimmedSelectionText === visibleText) {
+    return leading + value + trailing;
+  }
+
+  if (!trimmedSelectionText.includes(ELLIPSIS)) {
+    return null;
+  }
+
+  const selectionStart = visibleText.indexOf(trimmedSelectionText);
+  if (selectionStart === -1) {
+    return null;
+  }
+
+  const selectionEnd = selectionStart + trimmedSelectionText.length;
+  const mappedText = getMiddleTruncateCopyText({
+    prefixText,
+    selectionEnd,
+    selectionStart,
+    suffixText,
+    value,
+  });
+
+  return mappedText === null ? null : leading + mappedText + trailing;
+}
+
+export {
+  getMiddleTruncateCopyText,
+  getMiddleTruncateCopyTextFromSelectionText,
+};
+export type {
+  GetMiddleTruncateCopyTextFromSelectionTextOptions,
+  GetMiddleTruncateCopyTextOptions,
+};
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/middle-truncate.tsx b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/middle-truncate.tsx
new file mode 100644
index 0000000000..c17b5ab173
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/middle-truncate.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import { useCallback, useRef } from 'react';
+import type { ClipboardEvent, ComponentPropsWithoutRef, JSX } from 'react';
+import { cn } from '../../../../lib/utils';
+import {
+  getMiddleTruncateCopyText,
+  getMiddleTruncateCopyTextFromSelectionText,
+} from './copy-selection';
+import { ELLIPSIS } from './truncate';
+import { useMiddleTruncate } from './use-middle-truncate';
+
+/** Props for the {@link MiddleTruncate} component. */
+interface MiddleTruncateProps
+  extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
+  /** The full text string to display, truncated from the middle when it overflows. */
+  value: string;
+}
+
+function getRangeOffsets(
+  container: HTMLElement,
+  range: Range
+): { end: number; start: number } | null {
+  if (
+    !container.contains(range.startContainer) ||
+    !container.contains(range.endContainer)
+  ) {
+    return null;
+  }
+
+  const startRange = document.createRange();
+  startRange.selectNodeContents(container);
+  startRange.setEnd(range.startContainer, range.startOffset);
+
+  const endRange = document.createRange();
+  endRange.selectNodeContents(container);
+  endRange.setEnd(range.endContainer, range.endOffset);
+
+  return {
+    end: endRange.toString().length,
+    start: startRange.toString().length,
+  };
+}
+
+/**
+ * @gdoc
+ *
+ * Truncates text from the middle with an ellipsis when it overflows, preserving the beginning and end (e.g. file paths, URLs). Copy behavior restores the full untruncated text to the clipboard.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Geist Middle Truncate](https://vercel.com/geist/middle-truncate)
+ *
+ * @param value - Full text string to display.
+ */
+function MiddleTruncate({
+  value,
+  className,
+  onCopy: onCopyProp,
+  ...props
+}: MiddleTruncateProps): JSX.Element {
+  const { ref, measureRef, displayText, isTruncated, prefixText, suffixText } =
+    useMiddleTruncate(value);
+  const visibleRef = useRef<HTMLSpanElement | null>(null);
+
+  const handleCopy = useCallback(
+    (e: ClipboardEvent<HTMLSpanElement>) => {
+      onCopyProp?.(e);
+      if (e.defaultPrevented || !isTruncated) return;
+
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return;
+      const selectionText = selection.toString();
+      if (!selectionText) return;
+
+      // Only intercept when the selection is fully within this element.
+      // If the user selected across elements (e.g. a table row), let
+      // the browser's default behavior preserve surrounding context.
+      const range = selection.getRangeAt(0);
+      const visibleEl = visibleRef.current;
+      let copyText: string | null = null;
+
+      if (
+        e.currentTarget.contains(range.startContainer) &&
+        e.currentTarget.contains(range.endContainer) &&
+        visibleEl
+      ) {
+        const offsets = getRangeOffsets(visibleEl, range);
+        if (offsets) {
+          copyText = getMiddleTruncateCopyText({
+            prefixText,
+            selectionEnd: offsets.end,
+            selectionStart: offsets.start,
+            suffixText,
+            value,
+          });
+        }
+      }
+
+      copyText ??= getMiddleTruncateCopyTextFromSelectionText({
+        prefixText,
+        selectionText,
+        suffixText,
+        value,
+      });
+
+      if (copyText === null) return;
+
+      e.preventDefault();
+      e.clipboardData.setData('text/plain', copyText);
+    },
+    [onCopyProp, isTruncated, prefixText, suffixText, value]
+  );
+
+  return (
+    <span
+      title={isTruncated ? value : undefined}
+      {...props}
+      ref={ref}
+      className={cn(
+        'relative inline-grid min-w-0 max-w-full overflow-hidden whitespace-nowrap',
+        className
+      )}
+      onCopy={handleCopy}
+    >
+      {isTruncated && <span className='sr-only select-none'>{value}</span>}
+      <span
+        aria-hidden='true'
+        className='pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap'
+      >
+        {value}
+      </span>
+      <span
+        aria-hidden={isTruncated || undefined}
+        className='col-start-1 row-start-1 min-w-0 overflow-hidden'
+        ref={visibleRef}
+      >
+        {isTruncated ? (
+          <>
+            <span>{prefixText}</span>
+            <span>{ELLIPSIS}</span>
+            <span>{suffixText}</span>
+          </>
+        ) : (
+          displayText
+        )}
+      </span>
+      <span
+        aria-hidden='true'
+        className='pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap'
+        ref={measureRef}
+      />
+    </span>
+  );
+}
+
+export { MiddleTruncate };
+export type { MiddleTruncateProps };
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/truncate.ts b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/truncate.ts
new file mode 100644
index 0000000000..feacc9f53e
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/truncate.ts
@@ -0,0 +1,132 @@
+const ELLIPSIS = '...';
+const MIN_START = 3;
+const MIN_END = 3;
+const MIN_KEPT = MIN_START + MIN_END;
+const graphemeSegmenter =
+  typeof Intl !== 'undefined' && 'Segmenter' in Intl
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+
+type MeasureFn = (text: string) => number;
+
+/**
+ * Splits a string into grapheme clusters using Intl.Segmenter.
+ * Falls back to Array.from for environments without Intl.Segmenter.
+ */
+function toGraphemes(text: string): string[] {
+  if (graphemeSegmenter) {
+    return [...graphemeSegmenter.segment(text)].map((s) => s.segment);
+  }
+  return Array.from(text);
+}
+
+interface TruncateResult {
+  prefixText: string;
+  prefixGraphemeCount: number;
+  suffixText: string;
+  suffixGraphemeCount: number;
+  text: string;
+  truncated: boolean;
+}
+
+function buildCandidate(graphemes: string[], kept: number): TruncateResult {
+  if (kept <= 0) {
+    return {
+      prefixText: '',
+      prefixGraphemeCount: 0,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: ELLIPSIS,
+      truncated: true,
+    };
+  }
+
+  const suffixGraphemeCount =
+    kept >= MIN_KEPT
+      ? Math.max(MIN_END, Math.floor(kept / 2))
+      : Math.floor(kept / 2);
+  const prefixGraphemeCount = kept - suffixGraphemeCount;
+  const prefixText = graphemes.slice(0, prefixGraphemeCount).join('');
+  const suffixText =
+    suffixGraphemeCount > 0
+      ? graphemes.slice(-suffixGraphemeCount).join('')
+      : '';
+
+  return {
+    prefixText,
+    prefixGraphemeCount,
+    suffixText,
+    suffixGraphemeCount,
+    text: prefixText + ELLIPSIS + suffixText,
+    truncated: true,
+  };
+}
+
+/**
+ * Middle-truncates a string so `prefix...suffix` fits within `availableWidth`.
+ * Uses binary search over grapheme clusters with an injectable measure function.
+ */
+function middleTruncate(
+  graphemes: string[],
+  availableWidth: number,
+  measure: MeasureFn,
+  fullWidth?: number
+): TruncateResult {
+  const fullText = graphemes.join('');
+  const resolvedFullWidth = fullWidth ?? measure(fullText);
+
+  if (availableWidth <= 0 || graphemes.length === 0) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false,
+    };
+  }
+
+  if (resolvedFullWidth <= availableWidth) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false,
+    };
+  }
+
+  // Binary search for the maximum number of kept graphemes
+  let lo = 0;
+  let hi = graphemes.length - 1;
+  let best = -1;
+
+  while (lo <= hi) {
+    const mid = (lo + hi) >>> 1;
+    const candidate = buildCandidate(graphemes, mid);
+
+    if (measure(candidate.text) <= availableWidth) {
+      best = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+
+  if (best === -1) {
+    return {
+      prefixText: '',
+      prefixGraphemeCount: 0,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: '',
+      truncated: true,
+    };
+  }
+
+  return buildCandidate(graphemes, best);
+}
+
+export { middleTruncate, toGraphemes, ELLIPSIS, MIN_START, MIN_END };
+export type { MeasureFn, TruncateResult };
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.ts b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.ts
new file mode 100644
index 0000000000..ae989d58c3
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.ts
@@ -0,0 +1,167 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { middleTruncate, toGraphemes } from './truncate';
+
+const useIsomorphicLayoutEffect =
+  typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+interface MiddleTruncateState {
+  displayText: string;
+  isTruncated: boolean;
+  prefixGraphemeCount: number;
+  prefixText: string;
+  suffixGraphemeCount: number;
+  suffixText: string;
+}
+
+function createFullState(
+  value: string,
+  graphemes: string[]
+): MiddleTruncateState {
+  return {
+    displayText: value,
+    isTruncated: false,
+    prefixGraphemeCount: graphemes.length,
+    prefixText: value,
+    suffixGraphemeCount: 0,
+    suffixText: '',
+  };
+}
+
+/**
+ * Middle-truncation logic. Returns refs to attach to the container and measurement elements, plus the truncated display text. Recalculates on resize, font loading, and value changes.
+ * Powers the `<MiddleTruncate>` (`<span>`) component.
+ *
+ * Documentation: [Geist Middle Truncate](https://vercel.com/geist/middle-truncate)
+ *
+ * @param value - Full text string to truncate.
+ */
+function useMiddleTruncate(value: string): {
+  ref: React.RefObject<HTMLSpanElement | null>;
+  measureRef: React.RefObject<HTMLSpanElement | null>;
+  displayText: string;
+  isTruncated: boolean;
+  prefixGraphemeCount: number;
+  prefixText: string;
+  suffixGraphemeCount: number;
+  suffixText: string;
+} {
+  const graphemes = useMemo(() => toGraphemes(value), [value]);
+  const fullState = useMemo(
+    () => createFullState(value, graphemes),
+    [graphemes, value]
+  );
+  const ref = useRef<HTMLSpanElement | null>(null);
+  const measureRef = useRef<HTMLSpanElement | null>(null);
+  const [state, setState] = useState<MiddleTruncateState>(() => fullState);
+  const rafRef = useRef<number>(0);
+
+  const updateState = useCallback((nextState: MiddleTruncateState) => {
+    setState((currentState) => {
+      if (
+        currentState.displayText === nextState.displayText &&
+        currentState.isTruncated === nextState.isTruncated &&
+        currentState.prefixText === nextState.prefixText &&
+        currentState.prefixGraphemeCount === nextState.prefixGraphemeCount &&
+        currentState.suffixText === nextState.suffixText &&
+        currentState.suffixGraphemeCount === nextState.suffixGraphemeCount
+      ) {
+        return currentState;
+      }
+
+      return nextState;
+    });
+  }, []);
+
+  const recalculate = useCallback(() => {
+    const el = ref.current;
+    const measureEl = measureRef.current;
+    if (!el || !measureEl) return;
+
+    const available = el.clientWidth;
+
+    if (available <= 0) {
+      updateState(fullState);
+      return;
+    }
+
+    const measure = (text: string): number => {
+      measureEl.textContent = text;
+      return measureEl.scrollWidth;
+    };
+
+    const fullWidth = measure(value);
+
+    if (fullWidth <= available) {
+      updateState(fullState);
+      return;
+    }
+
+    const result = middleTruncate(graphemes, available, measure, fullWidth);
+    updateState({
+      displayText: result.text,
+      isTruncated: result.truncated,
+      prefixGraphemeCount: result.prefixGraphemeCount,
+      prefixText: result.prefixText,
+      suffixGraphemeCount: result.suffixGraphemeCount,
+      suffixText: result.suffixText,
+    });
+  }, [fullState, graphemes, updateState, value]);
+
+  // Measure on mount and when value changes - before paint
+  useIsomorphicLayoutEffect(() => {
+    recalculate();
+  }, [recalculate]);
+
+  // ResizeObserver + font loading for ongoing responsiveness
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const debouncedRecalc = (): void => {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(recalculate);
+    };
+
+    const ro =
+      typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(debouncedRecalc)
+        : null;
+    ro?.observe(el);
+    window.addEventListener('resize', debouncedRecalc);
+
+    const onFontsLoaded = (): void => {
+      debouncedRecalc();
+    };
+    const fontSet = 'fonts' in document ? document.fonts : null;
+    fontSet?.addEventListener?.('loadingdone', onFontsLoaded);
+
+    return () => {
+      ro?.disconnect();
+      window.removeEventListener('resize', debouncedRecalc);
+      cancelAnimationFrame(rafRef.current);
+      fontSet?.removeEventListener?.('loadingdone', onFontsLoaded);
+    };
+  }, [recalculate]);
+
+  return {
+    ref,
+    measureRef,
+    displayText: state.displayText,
+    isTruncated: state.isTruncated,
+    prefixGraphemeCount: state.prefixGraphemeCount,
+    prefixText: state.prefixText,
+    suffixGraphemeCount: state.suffixGraphemeCount,
+    suffixText: state.suffixText,
+  };
+}
+
+export { useMiddleTruncate };

From f5adc8229a195cae7a236321559bde7de4d7a1ed Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 30 Apr 2026 15:33:42 -0400
Subject: [PATCH 56/58] cleanup

---
 .../components/event-list.tsx                 |  34 +++--
 .../new-trace-viewer/components/timeline.tsx  | 127 +++++++++++-------
 .../new-trace-viewer/trace-viewer.tsx         | 110 ++++++++-------
 .../src/components/new-trace-viewer/utils.ts  |   2 +
 4 files changed, 161 insertions(+), 112 deletions(-)

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 b97fb208b2..4d5218f6a6 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
@@ -9,6 +9,7 @@ import {
   StepForwardIcon,
 } from '../icons';
 import { getSpanDurationMs } from '../utils';
+import { MiddleTruncate } from './middle-truncate/middle-truncate';
 
 interface EventStyle {
   icon: React.ComponentType<{ className?: string }>;
@@ -27,6 +28,8 @@ const defaultStyle: EventStyle = {
   className: 'text-gray-900',
 };
 
+const ROW_HEIGHT_CLASS = 'h-12';
+
 function getEventStyle(resource: string, isErrored: boolean): EventStyle {
   const style = eventStyles[resource] ?? defaultStyle;
   return {
@@ -54,24 +57,31 @@ const EventRow = ({
 
   return (
     <li
-      className='relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400'
+      className={cn(
+        'relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400',
+        ROW_HEIGHT_CLASS
+      )}
       role='treeitem'
       aria-selected={isSelected}
       aria-expanded={isSelected}
       aria-level={1}
       onClick={() => onSelectSpan(span.spanId)}
     >
-      <div className='hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 px-2 h-[34px] py-1.5 flex'>
-        <div className='flex items-center gap-2'>
-          <span className={tagClassName}>
-            <Icon className='w-4 h-4' />
-          </span>
-          <span className='text-label-14'>{span.name}</span>
-        </div>
-        <div className='ml-auto'>
-          <span className='text-label-14 text-gray-900 tabular-nums'>
-            {formatDuration(durationMs)}
-          </span>
+      <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 px-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>
+            <span className='min-w-0 text-label-14'>
+              <MiddleTruncate value={span.name} />
+            </span>
+          </div>
+          <div className='ml-2 shrink-0'>
+            <span className='text-label-14 text-gray-900 tabular-nums'>
+              {formatDuration(durationMs)}
+            </span>
+          </div>
         </div>
       </div>
     </li>
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 d5bd87240d..4aaf803f37 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
@@ -14,9 +14,6 @@ import {
   getResourceColor,
 } from '../utils';
 
-const HATCHED_BACKGROUND =
-  'repeating-linear-gradient(-45deg, var(--ds-gray-400) 0px, var(--ds-gray-400) 3px, var(--ds-gray-500) 3px, var(--ds-gray-500) 6px)';
-
 const SEGMENT_CONFIG: Record<
   SegmentStatus,
   { className?: string; style?: React.CSSProperties }
@@ -25,7 +22,7 @@ const SEGMENT_CONFIG: Record<
   retrying: {
     className: 'box-border bg-gray-500',
   },
-  waiting: { style: { background: HATCHED_BACKGROUND } },
+  waiting: { className: 'bg-amber-700' },
   running: { className: 'bg-blue-700' },
   failed: { className: 'bg-red-700' },
   succeeded: { className: 'bg-green-700' },
@@ -38,9 +35,11 @@ const TINY_BAR_BOX_SIZE_PX = 24;
 const TINY_BAR_WIDTH_PX = 4;
 const SEGMENT_GAP_PX = 1;
 // Keep this in sync with the rendered row height in the timeline/event list.
-const ROW_HEIGHT = 34;
+const ROW_HEIGHT = 48;
 const CONTAINER_PAD_Y = 8;
 const END_CAP_HEIGHT = 8;
+export const TIMELINE_PADDING_PX = 16;
+const ORIGIN_MARKER_EPSILON = 0.000001;
 
 const DeltaIndicator = memo(function DeltaIndicator({
   leftFrac,
@@ -57,7 +56,7 @@ const DeltaIndicator = memo(function DeltaIndicator({
 
   return (
     <div
-      className="absolute pointer-events-none"
+      className='absolute pointer-events-none'
       style={{
         left: `${leftFrac * 100}%`,
         width: `${(rightFrac - leftFrac) * 100}%`,
@@ -65,10 +64,10 @@ const DeltaIndicator = memo(function DeltaIndicator({
         height: END_CAP_HEIGHT,
       }}
     >
-      <div className="absolute left-0 top-0 w-px h-full bg-amber-800" />
-      <div className="absolute left-0 right-0 top-1/2 h-px bg-amber-800" />
-      <div className="absolute right-0 top-0 w-px h-full bg-amber-800" />
-      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800">
+      <div className='absolute left-0 top-0 w-px h-full bg-amber-800' />
+      <div className='absolute left-0 right-0 top-1/2 h-px bg-amber-800' />
+      <div className='absolute right-0 top-0 w-px h-full bg-amber-800' />
+      <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800'>
         {label}
       </span>
     </div>
@@ -123,7 +122,7 @@ const TimelineBar = memo(function TimelineBar({
     : colors.bar;
   const renderDurationLabel = (label: string) => (
     <span
-      className="pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums"
+      className='pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums'
       style={{ textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }}
     >
       {label}
@@ -139,16 +138,16 @@ const TimelineBar = memo(function TimelineBar({
   const showBoundaryArrow = isTinyBar && (leftFracRaw < 0 || rightFracRaw > 1);
   const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;
   const barContent = showBoundaryArrow ? (
-    <div className="flex h-6 w-6 items-center justify-center rounded-[0.25rem]">
-      <BoundaryArrow className="size-3 text-gray-900" />
+    <div className='flex h-6 w-6 items-center justify-center rounded-[0.25rem]'>
+      <BoundaryArrow className='size-3 text-gray-900' />
     </div>
   ) : isTinyBar ? (
     <div
-      className="h-6 rounded-[0.25rem]"
+      className='h-6 rounded-[0.25rem]'
       style={{ background: fallbackColor }}
     />
   ) : segments.length > 0 ? (
-    <div className="relative h-6 w-full">
+    <div className='relative h-6 w-full'>
       {segments.map((seg, i) => {
         const segPixelWidth =
           (seg.endFraction - seg.startFraction) * pixelWidth;
@@ -186,7 +185,7 @@ const TimelineBar = memo(function TimelineBar({
     </div>
   ) : (
     <div
-      className="relative h-6 rounded-[0.25rem]"
+      className='relative h-6 rounded-[0.25rem]'
       style={{
         width: '100%',
         minWidth: 4,
@@ -199,34 +198,42 @@ const TimelineBar = memo(function TimelineBar({
 
   return (
     <div
-      role="treeitem"
+      role='treeitem'
       aria-selected={isSelected}
       aria-expanded={isSelected}
       aria-level={1}
       className={cn(
-        'h-[34px] relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'
+        'h-12 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'
       )}
       onMouseEnter={() => setIsRowHovered(true)}
       onMouseLeave={() => setIsRowHovered(false)}
       onClick={onClick}
     >
       <div
-        className="absolute top-1/2 -translate-y-1/2"
+        className='absolute inset-y-0'
         style={{
-          left: showBoundaryArrow
-            ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))`
-            : isTinyBar
-              ? `min(${leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`
-              : `${leftPct}%`,
-          width: showBoundaryArrow
-            ? `${TINY_BAR_BOX_SIZE_PX}px`
-            : isTinyBar
-              ? `${TINY_BAR_WIDTH_PX}px`
-              : `max(${widthPct}%, 4px)`,
-          height: BAR_HEIGHT_PX,
+          left: TIMELINE_PADDING_PX,
+          right: TIMELINE_PADDING_PX,
         }}
       >
-        {barContent}
+        <div
+          className='absolute top-1/2 -translate-y-1/2'
+          style={{
+            left: showBoundaryArrow
+              ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))`
+              : isTinyBar
+                ? `min(${leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`
+                : `${leftPct}%`,
+            width: showBoundaryArrow
+              ? `${TINY_BAR_BOX_SIZE_PX}px`
+              : isTinyBar
+                ? `${TINY_BAR_WIDTH_PX}px`
+                : `max(${widthPct}%, 4px)`,
+            height: BAR_HEIGHT_PX,
+          }}
+        >
+          {barContent}
+        </div>
       </div>
     </div>
   );
@@ -242,12 +249,12 @@ export function TimelineHeader({
   hoverInfo?: { fraction: number; label: string } | null;
 }): ReactNode {
   return (
-    <div className="relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-2 pb-1">
-      <div className="relative h-full flex-1">
+    <div className='relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1'>
+      <div className='relative h-full flex-1'>
         {markers.map((m) => (
           <span
             key={`${m.position}-${m.label}`}
-            className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap"
+            className='absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap'
             style={{ left: `${m.position * 100}%` }}
           >
             {m.label}
@@ -255,7 +262,7 @@ export function TimelineHeader({
         ))}
         {hoverInfo && (
           <span
-            className="absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2"
+            className='absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2'
             style={{ left: `${hoverInfo.fraction * 100}%` }}
           >
             {hoverInfo.label}
@@ -288,6 +295,7 @@ export function Timeline({
   const containerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
   const viewDuration = viewEnd - viewStart;
+  const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);
 
   useEffect(() => {
     const el = containerRef.current;
@@ -305,24 +313,38 @@ export function Timeline({
   );
 
   return (
-    <div ref={containerRef} className="relative py-2 h-full overflow-hidden">
+    <div ref={containerRef} className='relative h-full overflow-hidden'>
       <div
         aria-hidden
-        className="absolute inset-y-0 inset-x-0 pointer-events-none"
+        className='absolute inset-y-0 pointer-events-none'
+        style={{
+          left: TIMELINE_PADDING_PX,
+          right: TIMELINE_PADDING_PX,
+        }}
       >
-        {markers.map((marker) => (
-          <div
-            key={`${marker.position}-${marker.label}`}
-            className="absolute top-0 bottom-0 w-px bg-gray-alpha-300"
-            style={{ left: `${marker.position * 100}%` }}
-          />
-        ))}
+        {markers.map((marker) =>
+          Math.abs(marker.value) > ORIGIN_MARKER_EPSILON ? (
+            <div
+              key={`${marker.position}-${marker.label}`}
+              className='absolute top-0 bottom-0 w-px bg-gray-alpha-300'
+              style={{ left: `${marker.position * 100}%` }}
+            />
+          ) : null
+        )}
       </div>
       {hoverFraction != null && (
         <div
-          className="absolute top-0 bottom-0 w-px bg-gray-alpha-400 pointer-events-none z-10"
-          style={{ left: `${hoverFraction * 100}%` }}
-        />
+          className='absolute inset-y-0 pointer-events-none z-10'
+          style={{
+            left: TIMELINE_PADDING_PX,
+            right: TIMELINE_PADDING_PX,
+          }}
+        >
+          <div
+            className='absolute top-0 bottom-0 w-px bg-gray-alpha-400'
+            style={{ left: `${hoverFraction * 100}%` }}
+          />
+        </div>
       )}
       {spans.map((span) => (
         <TimelineBar
@@ -330,13 +352,20 @@ export function Timeline({
           span={span}
           viewStart={viewStart}
           viewDuration={viewDuration}
-          containerWidth={containerWidth}
+          containerWidth={timelineWidth}
           isSelected={selectedId === span.spanId}
           onClick={() => onSelect(span.spanId)}
         />
       ))}
       {altHeld && (
-        <div aria-hidden className="absolute inset-0 pointer-events-none">
+        <div
+          aria-hidden
+          className='absolute inset-y-0 pointer-events-none'
+          style={{
+            left: TIMELINE_PADDING_PX,
+            right: TIMELINE_PADDING_PX,
+          }}
+        >
           {gaps.map((gap) => (
             <DeltaIndicator
               key={gap.rowIndex}
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index be860fb382..3332994d4c 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -21,7 +21,11 @@ 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 { Timeline, TimelineHeader } from './components/timeline';
+import {
+  Timeline,
+  TimelineHeader,
+  TIMELINE_PADDING_PX,
+} from './components/timeline';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { DetailPanel } from './detail-panel';
 import { computeRootBounds, computeTimeMarkers } from './utils';
@@ -31,7 +35,6 @@ interface NewTraceViewerProps {
 }
 
 const MIN_VIEWPORT_MS = 0.001;
-const TIMELINE_PADDING = 16;
 
 interface Viewport {
   start: number;
@@ -334,12 +337,14 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
       const el = timelineRef.current;
       if (!el) return;
       const rect = el.getBoundingClientRect();
-      const padding = 8;
-      const contentWidth = rect.width - padding * 2;
+      const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;
       if (contentWidth <= 0) return;
       const fraction = Math.max(
         0,
-        Math.min(1, (e.clientX - rect.left - padding) / contentWidth)
+        Math.min(
+          1,
+          (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
+        )
       );
       setHoverFraction(fraction);
     },
@@ -367,7 +372,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
       e.preventDefault();
 
       const rect = el.getBoundingClientRect();
-      const contentWidth = rect.width - TIMELINE_PADDING * 2;
+      const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;
       if (contentWidth <= 0) return;
 
       if (isZoomGesture) {
@@ -376,7 +381,10 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
         const cursorFraction = Math.max(
           0,
-          Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING) / contentWidth)
+          Math.min(
+            1,
+            (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
+          )
         );
         const scaleFactor = Math.pow(2, dy / 200);
 
@@ -461,35 +469,35 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   return (
     <div
-      data-pane="pane-root"
+      data-pane='pane-root'
       data-has-detail={activeSpan ? '' : undefined}
-      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]"
+      className='grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]'
     >
       <div
-        id="trace-parent"
-        className="grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
+        id='trace-parent'
+        className='grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100'
       >
         <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">
-              <Search className="w-3.5 h-3.5 shrink-0 text-gray-800" />
+            <div className='bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5'>
+              <Search className='w-3.5 h-3.5 shrink-0 text-gray-800' />
               <input
-                id="trace-viewer-search"
-                name="trace-viewer-search"
-                type="text"
+                id='trace-viewer-search'
+                name='trace-viewer-search'
+                type='text'
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                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"
+                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'
               />
               {searchQuery && (
                 <button
-                  type="button"
+                  type='button'
                   onClick={() => setSearchQuery('')}
-                  className="shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors"
+                  className='shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors'
                 >
-                  <X className="w-3 h-3" />
+                  <X className='w-3 h-3' />
                 </button>
               )}
             </div>
@@ -498,7 +506,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             <TimelineHeader markers={timeMarkers} hoverInfo={hoverInfo} />
           }
         >
-          <div className="block overflow-visible">
+          <div className='block overflow-visible'>
             <EventList
               spans={filteredSpans}
               activeSpanId={activeSpanId}
@@ -507,7 +515,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           </div>
           <div
             ref={timelineRef}
-            className="block min-h-0 overflow-visible relative"
+            className='block min-h-0 overflow-visible relative'
             onDoubleClick={resetZoom}
             onMouseMove={handleTimelineMouseMove}
             onMouseLeave={handleTimelineMouseLeave}
@@ -524,46 +532,46 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             />
           </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">
+        <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-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            type='button'
+            className='flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100'
             onClick={zoomOut}
-            aria-label="Zoom out"
+            aria-label='Zoom out'
           >
-            <ZoomOut className="w-4 h-4" />
+            <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-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            type='button'
+            className='flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100'
             onClick={resetZoom}
-            aria-label="Reset zoom"
+            aria-label='Reset zoom'
           >
-            <RotateCcw className="w-3.5 h-3.5" />
+            <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-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            type='button'
+            className='flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100'
             onClick={zoomIn}
-            aria-label="Zoom in"
+            aria-label='Zoom in'
           >
-            <ZoomIn className="w-4 h-4" />
+            <ZoomIn className='w-4 h-4' />
           </button>
         </div>
       </div>
 
       {/* Detail panel */}
       {activeSpan && sidebar ? (
-        <aside className="flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto">
+        <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">
+          <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">
+                  <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 ${
@@ -581,30 +589,30 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
                       </span>
                     )}
                     <div
-                      className="flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0"
+                      className='flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0'
                       title={selectedResourceId}
                     >
-                      <span className="truncate">{selectedResourceId}</span>
+                      <span className='truncate'>{selectedResourceId}</span>
                       <CopyButton
                         copyText={selectedResourceId}
-                        ariaLabel="Copy ID"
-                        className="shrink-0"
+                        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"
+                type='button'
+                className='p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0'
                 onClick={clearActiveSpan}
               >
-                <X className="w-4 h-4" />
+                <X className='w-4 h-4' />
               </button>
             </div>
           </div>
           {/* Panel body */}
-          <div className="flex-1 overflow-y-auto">
+          <div className='flex-1 overflow-y-auto'>
             <ErrorBoundary>
               <EntityDetailPanel
                 run={sidebar.run}
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 21addf8259..012b7828a1 100644
--- a/packages/web-shared/src/components/new-trace-viewer/utils.ts
+++ b/packages/web-shared/src/components/new-trace-viewer/utils.ts
@@ -44,6 +44,7 @@ export function getSpanDurationMs(span: Span): number {
 export interface TimeMarker {
   position: number;
   label: string;
+  value: number;
 }
 
 const NICE_INTERVALS = [
@@ -80,6 +81,7 @@ export function computeTimeMarkers(
     markers.push({
       position: Math.min(Math.max(position, 0), 1),
       label: formatDuration(Math.abs(t), true),
+      value: t,
     });
     if (markers.length >= MAX_MARKERS) break;
   }

From ccacb747f5e1e614c9ce81f9594937e3e98bf7e9 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 30 Apr 2026 15:39:21 -0400
Subject: [PATCH 57/58] height updatres

---
 .../src/components/new-trace-viewer/components/event-list.tsx | 2 +-
 .../src/components/new-trace-viewer/components/timeline.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

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 4d5218f6a6..973b27bf4f 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
@@ -28,7 +28,7 @@ const defaultStyle: EventStyle = {
   className: 'text-gray-900',
 };
 
-const ROW_HEIGHT_CLASS = 'h-12';
+const ROW_HEIGHT_CLASS = 'h-10';
 
 function getEventStyle(resource: string, isErrored: boolean): EventStyle {
   const style = eventStyles[resource] ?? defaultStyle;
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 4aaf803f37..0d11f6ee71 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
@@ -35,7 +35,7 @@ const TINY_BAR_BOX_SIZE_PX = 24;
 const TINY_BAR_WIDTH_PX = 4;
 const SEGMENT_GAP_PX = 1;
 // Keep this in sync with the rendered row height in the timeline/event list.
-const ROW_HEIGHT = 48;
+const ROW_HEIGHT = 40;
 const CONTAINER_PAD_Y = 8;
 const END_CAP_HEIGHT = 8;
 export const TIMELINE_PADDING_PX = 16;
@@ -203,7 +203,7 @@ const TimelineBar = memo(function TimelineBar({
       aria-expanded={isSelected}
       aria-level={1}
       className={cn(
-        'h-12 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'
+        'h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'
       )}
       onMouseEnter={() => setIsRowHovered(true)}
       onMouseLeave={() => setIsRowHovered(false)}

From 750b66b70a17f1ee0ff55df81eb7a0f31604ef1e Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 30 Apr 2026 16:20:21 -0400
Subject: [PATCH 58/58] colour fixes

---
 .../new-trace-viewer/components/timeline.tsx  | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

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 0d11f6ee71..0ff2c8a92e 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
@@ -22,11 +22,11 @@ const SEGMENT_CONFIG: Record<
   retrying: {
     className: 'box-border bg-gray-500',
   },
-  waiting: { className: 'bg-amber-700' },
+  waiting: { className: 'bg-gray-500' },
   running: { className: 'bg-blue-700' },
   failed: { className: 'bg-red-700' },
   succeeded: { className: 'bg-green-700' },
-  sleeping: { className: 'bg-amber-700' },
+  sleeping: { className: 'bg-gray-500' },
   received: { className: 'bg-blue-700' },
 };
 
@@ -56,7 +56,7 @@ const DeltaIndicator = memo(function DeltaIndicator({
 
   return (
     <div
-      className='absolute pointer-events-none'
+      className="absolute pointer-events-none"
       style={{
         left: `${leftFrac * 100}%`,
         width: `${(rightFrac - leftFrac) * 100}%`,
@@ -64,10 +64,10 @@ const DeltaIndicator = memo(function DeltaIndicator({
         height: END_CAP_HEIGHT,
       }}
     >
-      <div className='absolute left-0 top-0 w-px h-full bg-amber-800' />
-      <div className='absolute left-0 right-0 top-1/2 h-px bg-amber-800' />
-      <div className='absolute right-0 top-0 w-px h-full bg-amber-800' />
-      <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800'>
+      <div className="absolute left-0 top-0 w-px h-full bg-amber-800" />
+      <div className="absolute left-0 right-0 top-1/2 h-px bg-amber-800" />
+      <div className="absolute right-0 top-0 w-px h-full bg-amber-800" />
+      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800">
         {label}
       </span>
     </div>
@@ -122,7 +122,7 @@ const TimelineBar = memo(function TimelineBar({
     : colors.bar;
   const renderDurationLabel = (label: string) => (
     <span
-      className='pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums'
+      className="pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums"
       style={{ textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }}
     >
       {label}
@@ -138,16 +138,16 @@ const TimelineBar = memo(function TimelineBar({
   const showBoundaryArrow = isTinyBar && (leftFracRaw < 0 || rightFracRaw > 1);
   const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;
   const barContent = showBoundaryArrow ? (
-    <div className='flex h-6 w-6 items-center justify-center rounded-[0.25rem]'>
-      <BoundaryArrow className='size-3 text-gray-900' />
+    <div className="flex h-6 w-6 items-center justify-center rounded-[0.25rem]">
+      <BoundaryArrow className="size-3 text-gray-900" />
     </div>
   ) : isTinyBar ? (
     <div
-      className='h-6 rounded-[0.25rem]'
+      className="h-6 rounded-[0.25rem]"
       style={{ background: fallbackColor }}
     />
   ) : segments.length > 0 ? (
-    <div className='relative h-6 w-full'>
+    <div className="relative h-6 w-full">
       {segments.map((seg, i) => {
         const segPixelWidth =
           (seg.endFraction - seg.startFraction) * pixelWidth;
@@ -185,7 +185,7 @@ const TimelineBar = memo(function TimelineBar({
     </div>
   ) : (
     <div
-      className='relative h-6 rounded-[0.25rem]'
+      className="relative h-6 rounded-[0.25rem]"
       style={{
         width: '100%',
         minWidth: 4,
@@ -198,7 +198,7 @@ const TimelineBar = memo(function TimelineBar({
 
   return (
     <div
-      role='treeitem'
+      role="treeitem"
       aria-selected={isSelected}
       aria-expanded={isSelected}
       aria-level={1}
@@ -210,14 +210,14 @@ const TimelineBar = memo(function TimelineBar({
       onClick={onClick}
     >
       <div
-        className='absolute inset-y-0'
+        className="absolute inset-y-0"
         style={{
           left: TIMELINE_PADDING_PX,
           right: TIMELINE_PADDING_PX,
         }}
       >
         <div
-          className='absolute top-1/2 -translate-y-1/2'
+          className="absolute top-1/2 -translate-y-1/2"
           style={{
             left: showBoundaryArrow
               ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))`
@@ -249,12 +249,12 @@ export function TimelineHeader({
   hoverInfo?: { fraction: number; label: string } | null;
 }): ReactNode {
   return (
-    <div className='relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1'>
-      <div className='relative h-full flex-1'>
+    <div className="relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1">
+      <div className="relative h-full flex-1">
         {markers.map((m) => (
           <span
             key={`${m.position}-${m.label}`}
-            className='absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap'
+            className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap"
             style={{ left: `${m.position * 100}%` }}
           >
             {m.label}
@@ -262,7 +262,7 @@ export function TimelineHeader({
         ))}
         {hoverInfo && (
           <span
-            className='absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2'
+            className="absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2"
             style={{ left: `${hoverInfo.fraction * 100}%` }}
           >
             {hoverInfo.label}
@@ -313,10 +313,10 @@ export function Timeline({
   );
 
   return (
-    <div ref={containerRef} className='relative h-full overflow-hidden'>
+    <div ref={containerRef} className="relative h-full overflow-hidden">
       <div
         aria-hidden
-        className='absolute inset-y-0 pointer-events-none'
+        className="absolute inset-y-0 pointer-events-none"
         style={{
           left: TIMELINE_PADDING_PX,
           right: TIMELINE_PADDING_PX,
@@ -326,7 +326,7 @@ export function Timeline({
           Math.abs(marker.value) > ORIGIN_MARKER_EPSILON ? (
             <div
               key={`${marker.position}-${marker.label}`}
-              className='absolute top-0 bottom-0 w-px bg-gray-alpha-300'
+              className="absolute top-0 bottom-0 w-px bg-gray-alpha-300"
               style={{ left: `${marker.position * 100}%` }}
             />
           ) : null
@@ -334,14 +334,14 @@ export function Timeline({
       </div>
       {hoverFraction != null && (
         <div
-          className='absolute inset-y-0 pointer-events-none z-10'
+          className="absolute inset-y-0 pointer-events-none z-10"
           style={{
             left: TIMELINE_PADDING_PX,
             right: TIMELINE_PADDING_PX,
           }}
         >
           <div
-            className='absolute top-0 bottom-0 w-px bg-gray-alpha-400'
+            className="absolute top-0 bottom-0 w-px bg-gray-alpha-400"
             style={{ left: `${hoverFraction * 100}%` }}
           />
         </div>
@@ -360,7 +360,7 @@ export function Timeline({
       {altHeld && (
         <div
           aria-hidden
-          className='absolute inset-y-0 pointer-events-none'
+          className="absolute inset-y-0 pointer-events-none"
           style={{
             left: TIMELINE_PADDING_PX,
             right: TIMELINE_PADDING_PX,