@workflow/web-shared 5.0.0-beta.38 → 5.0.0-beta.39

package/dist/lib/trace-types.d.ts

@@ -0,0 +1,54 @@
+export interface Span {
+    name: string;
+    kind: number;
+    resource: string;
+    library: {
+        name: string;
+        version?: string;
+    };
+    spanId: string;
+    parentSpanId?: string;
+    status: {
+        code: number;
+    };
+    traceFlags: number;
+    attributes: Record<string, unknown>;
+    links: Record<string, unknown>[];
+    events: SpanEvent[];
+    startTime: [number, number];
+    endTime: [number, number];
+    duration: [number, number];
+    /**
+     * The time when the span became active/started executing (optional).
+     * If provided and different from startTime, the portion between startTime
+     * and activeStartTime will be rendered as a "queued" period with different styling.
+     */
+    activeStartTime?: [number, number];
+}
+export interface SpanEvent {
+    name: string;
+    timestamp: [number, number];
+    attributes: Record<string, unknown>;
+    /**
+     * Optional custom color for this event marker (workflow-specific feature).
+     * If provided, this color will be used for the event marker line/diamond.
+     */
+    color?: string;
+    /**
+     * Whether to show a vertical line for this event in the timeline (workflow-specific feature).
+     * If false, only the diamond marker on the span will be shown.
+     * Defaults to true if not specified.
+     */
+    showVerticalLine?: boolean;
+}
+export interface Resource {
+    name: string;
+    attributes: Record<string, string>;
+}
+export interface Trace {
+    traceId: string;
+    resources?: Resource[];
+    spans: Span[];
+    rootSpanId?: string;
+}
+//# sourceMappingURL=trace-types.d.ts.map

package/dist/lib/trace-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trace-types.d.ts","sourceRoot":"","sources":["../../src/lib/trace-types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IACjC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/lib/trace-types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhY2UtdHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL3RyYWNlLXR5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIFNwYW4ge1xuICBuYW1lOiBzdHJpbmc7XG4gIGtpbmQ6IG51bWJlcjtcbiAgcmVzb3VyY2U6IHN0cmluZztcbiAgbGlicmFyeToge1xuICAgIG5hbWU6IHN0cmluZztcbiAgICB2ZXJzaW9uPzogc3RyaW5nO1xuICB9O1xuICBzcGFuSWQ6IHN0cmluZztcbiAgcGFyZW50U3BhbklkPzogc3RyaW5nO1xuICBzdGF0dXM6IHtcbiAgICBjb2RlOiBudW1iZXI7XG4gIH07XG4gIHRyYWNlRmxhZ3M6IG51bWJlcjtcbiAgYXR0cmlidXRlczogUmVjb3JkPHN0cmluZywgdW5rbm93bj47XG4gIGxpbmtzOiBSZWNvcmQ8c3RyaW5nLCB1bmtub3duPltdO1xuICBldmVudHM6IFNwYW5FdmVudFtdO1xuICBzdGFydFRpbWU6IFtudW1iZXIsIG51bWJlcl07XG4gIGVuZFRpbWU6IFtudW1iZXIsIG51bWJlcl07XG4gIGR1cmF0aW9uOiBbbnVtYmVyLCBudW1iZXJdO1xuICAvKipcbiAgICogVGhlIHRpbWUgd2hlbiB0aGUgc3BhbiBiZWNhbWUgYWN0aXZlL3N0YXJ0ZWQgZXhlY3V0aW5nIChvcHRpb25hbCkuXG4gICAqIElmIHByb3ZpZGVkIGFuZCBkaWZmZXJlbnQgZnJvbSBzdGFydFRpbWUsIHRoZSBwb3J0aW9uIGJldHdlZW4gc3RhcnRUaW1lXG4gICAqIGFuZCBhY3RpdmVTdGFydFRpbWUgd2lsbCBiZSByZW5kZXJlZCBhcyBhIFwicXVldWVkXCIgcGVyaW9kIHdpdGggZGlmZmVyZW50IHN0eWxpbmcuXG4gICAqL1xuICBhY3RpdmVTdGFydFRpbWU/OiBbbnVtYmVyLCBudW1iZXJdO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIFNwYW5FdmVudCB7XG4gIG5hbWU6IHN0cmluZztcbiAgdGltZXN0YW1wOiBbbnVtYmVyLCBudW1iZXJdO1xuICBhdHRyaWJ1dGVzOiBSZWNvcmQ8c3RyaW5nLCB1bmtub3duPjtcbiAgLyoqXG4gICAqIE9wdGlvbmFsIGN1c3RvbSBjb2xvciBmb3IgdGhpcyBldmVudCBtYXJrZXIgKHdvcmtmbG93LXNwZWNpZmljIGZlYXR1cmUpLlxuICAgKiBJZiBwcm92aWRlZCwgdGhpcyBjb2xvciB3aWxsIGJlIHVzZWQgZm9yIHRoZSBldmVudCBtYXJrZXIgbGluZS9kaWFtb25kLlxuICAgKi9cbiAgY29sb3I/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBXaGV0aGVyIHRvIHNob3cgYSB2ZXJ0aWNhbCBsaW5lIGZvciB0aGlzIGV2ZW50IGluIHRoZSB0aW1lbGluZSAod29ya2Zsb3ctc3BlY2lmaWMgZmVhdHVyZSkuXG4gICAqIElmIGZhbHNlLCBvbmx5IHRoZSBkaWFtb25kIG1hcmtlciBvbiB0aGUgc3BhbiB3aWxsIGJlIHNob3duLlxuICAgKiBEZWZhdWx0cyB0byB0cnVlIGlmIG5vdCBzcGVjaWZpZWQuXG4gICAqL1xuICBzaG93VmVydGljYWxMaW5lPzogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBSZXNvdXJjZSB7XG4gIG5hbWU6IHN0cmluZztcbiAgYXR0cmlidXRlczogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBUcmFjZSB7XG4gIHRyYWNlSWQ6IHN0cmluZztcbiAgcmVzb3VyY2VzPzogUmVzb3VyY2VbXTtcbiAgc3BhbnM6IFNwYW5bXTtcbiAgcm9vdFNwYW5JZD86IHN0cmluZztcbn1cbiJdfQ==

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@workflow/web-shared",
   "description": "Shared components for Workflow Observability UI",
-  "version": "5.0.0-beta.38",
+  "version": "5.0.0-beta.39",
   "private": false,
   "files": [
     "dist",
@@ -55,9 +55,9 @@
     "streamdown": "2.3.0",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4",
-    "@workflow/core": "5.0.0-beta.38",
+    "@workflow/core": "5.0.0-beta.39",
     "@workflow/utils": "5.0.0-beta.8",
-    "@workflow/world": "5.0.0-beta.23"
+    "@workflow/world": "5.0.0-beta.24"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.4",
@@ -67,11 +67,11 @@
     "ai": "6.0.116",
     "typescript": "^6.0.3",
     "vitest": "^4.1.10",
-    "@workflow/errors": "5.0.0-beta.14",
+    "@workflow/errors": "5.0.0-beta.15",
     "@workflow/tsconfig": "5.0.0-beta.0"
   },
   "scripts": {
-    "build": "tsc && cp -r src/components/trace-viewer/*.css dist/components/trace-viewer/ && cp src/components/new-trace-viewer/components/*.module.css dist/components/new-trace-viewer/components/ && cp src/styles.css dist/styles.css",
+    "build": "tsc && cp src/components/trace-viewer/components/*.module.css dist/components/trace-viewer/components/ && cp src/styles.css dist/styles.css",
     "dev": "tsc --watch",
     "clean": "tsc --build --clean && rm -r dist ||:",
     "test": "vitest run",

package/src/components/event-list-view.tsx

@@ -639,7 +639,10 @@ function PayloadBlock({
         : null;
     if (cancelReason) {
       return (
-        <div className="p-2 text-xs" style={{ color: 'var(--ds-gray-1000)' }}>
+        <div
+          className="p-2 text-label-12"
+          style={{ color: 'var(--ds-gray-1000)' }}
+        >
           <span style={{ color: 'var(--ds-gray-900)' }}>Reason: </span>
           <span className="whitespace-pre-wrap break-words">
             {cancelReason}
@@ -660,7 +663,7 @@ function PayloadBlock({
       <button
         type="button"
         onClick={handleCopy}
-        className="absolute bottom-2 right-2 opacity-0 group-hover/payload:opacity-100 transition-opacity flex items-center gap-1 px-2 py-1 rounded-md text-xs hover:bg-[var(--ds-gray-alpha-200)]"
+        className="absolute bottom-2 right-2 opacity-0 group-hover/payload:opacity-100 transition-opacity flex items-center gap-1 px-2 py-1 rounded-md text-button-12 hover:bg-[var(--ds-gray-alpha-200)]"
         style={{ ...BUTTON_RESET_STYLE, color: 'var(--ds-gray-700)' }}
         aria-label="Copy payload"
       >
@@ -1028,7 +1031,7 @@ export function EventRow({
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') handleRowClick();
         }}
-        className="w-full text-left flex items-center gap-0 text-[13px] hover:bg-[var(--ds-gray-alpha-100)] transition-colors cursor-pointer"
+        className="w-full text-left flex items-center gap-0 text-label-13 hover:bg-[var(--ds-gray-alpha-100)] transition-colors cursor-pointer"
         style={{ minHeight: 40 }}
       >
         <TreeGutter
@@ -1185,7 +1188,7 @@ export function EventRow({
             {(durationInfo?.queued !== undefined ||
               durationInfo?.ran !== undefined) && (
               <div
-                className="px-2 pb-1.5 text-xs flex gap-3"
+                className="px-2 pb-1.5 text-label-12 flex gap-3"
                 style={{ color: 'var(--ds-gray-900)' }}
               >
                 {durationInfo.queued !== undefined &&
@@ -1213,7 +1216,7 @@ export function EventRow({
               <PayloadBlock data={displayPayload} eventType={event.eventType} />
             ) : loadError ? (
               <div
-                className="rounded-md border p-3 text-xs"
+                className="rounded-md border p-3 text-label-12"
                 style={{
                   borderColor: 'var(--ds-red-400)',
                   backgroundColor: 'var(--ds-red-100)',
@@ -1233,7 +1236,7 @@ export function EventRow({
               </div>
             ) : (
               <div
-                className="p-2 text-xs"
+                className="p-2 text-label-12"
                 style={{ color: 'var(--ds-gray-900)' }}
               >
                 No data
@@ -1708,7 +1711,7 @@ function EventListViewInner({
 
         {/* Header */}
         <div
-          className="flex items-center gap-0 text-[13px] font-medium h-10 border-b flex-shrink-0"
+          className="flex items-center gap-0 text-label-13 font-medium h-10 border-b flex-shrink-0"
           style={{
             borderColor: 'var(--ds-gray-alpha-200)',
             color: 'var(--ds-gray-900)',
@@ -1748,7 +1751,7 @@ function EventListViewInner({
           />
         ) : sortedEvents.length === 0 ? (
           <div
-            className="flex flex-1 items-center justify-center px-6 text-center text-sm"
+            className="flex flex-1 items-center justify-center px-6 text-center text-copy-14"
             style={{ color: 'var(--ds-gray-700)' }}
           >
             {searchNotFound && searchQuery.trim()
@@ -1813,7 +1816,7 @@ function EventListViewInner({
 
         {/* Fixed footer — count + load more */}
         <div
-          className="relative flex-shrink-0 flex items-center h-10 border-t px-4 text-xs"
+          className="relative flex-shrink-0 flex items-center h-10 border-t px-4 text-label-12"
           style={{
             borderColor: 'var(--ds-gray-alpha-200)',
             color: 'var(--ds-gray-900)',

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export type { Span, SpanEvent } from '../lib/trace-types';
 export { ErrorBoundary } from './error-boundary';
 export { EventListView } from './event-list-view';
 export type {
@@ -13,8 +14,6 @@ export {
   ResolveHookModal,
   useHookActions,
 } from './hook-actions';
-export { TraceViewerSkeleton } from './new-trace-viewer/components/trace-viewer-skeleton';
-export { RunTraceView } from './run-trace-view';
 export { ConversationView } from './sidebar/conversation-view';
 export type {
   SelectedSpanInfo,
@@ -30,8 +29,8 @@ export type {
 } from './sidebar/use-selected-span-detail';
 export { type StreamChunk, StreamViewer } from './stream-viewer';
 export { StreamViewerSkeleton } from './stream-viewer-skeleton';
-export type { Span, SpanEvent } from './trace-viewer/types';
-export { NewTraceViewer } from './trace-viewer-new';
+export { TraceViewer } from './trace-viewer';
+export { TraceViewerSkeleton } from './trace-viewer/components/trace-viewer-skeleton';
 export {
   DataInspector,
   type DataInspectorProps,
@@ -44,4 +43,3 @@ export { Kbd } from './ui/kbd';
 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';

package/src/components/sidebar/attribute-panel.tsx

@@ -204,7 +204,7 @@ function EncryptedFieldBlock() {
 function ExpiredFieldBlock() {
   return (
     <div
-      className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs"
+      className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-label-12"
       style={{
         borderColor: 'var(--ds-gray-300)',
         backgroundColor: 'var(--ds-gray-100)',
@@ -243,7 +243,14 @@ type AttributeKey =
   | 'lastReceivedAt'
   | 'disposedAt'
   | 'isSystem'
-  | 'errorCode';
+  | 'errorCode'
+  // Analytics-only provenance (AnalyticsEvent / AnalyticsStep), not on Event.
+  | 'computeInstanceId'
+  // Analytics-only, and event-grained: only AnalyticsEvent carries it. The key
+  // is `vercelId` because that is the name the backend stores the SDK's
+  // `requestId` under; AnalyticsEvent's sibling `requestId` column is never
+  // written, so reading that one would always be empty.
+  | 'vercelId';
 
 const attributeOrder: AttributeKey[] = [
   'workflowName',
@@ -256,12 +263,16 @@ const attributeOrder: AttributeKey[] = [
   'runId',
   'attempt',
   'token',
+  'isWebhook',
+  'isSystem',
   'receivedCount',
   'lastReceivedAt',
   'disposedAt',
   'correlationId',
   'eventType',
   'deploymentId',
+  'vercelId',
+  'computeInstanceId',
   'specVersion',
   'workflowCoreVersion',
   'ownerId',
@@ -275,6 +286,7 @@ const attributeOrder: AttributeKey[] = [
   'completedAt',
   'expiredAt',
   'retryAfter',
+  'errorCode',
   'error',
   'metadata',
   'eventData',
@@ -284,12 +296,19 @@ const attributeOrder: AttributeKey[] = [
   'resumeAt',
 ];
 
-const sortByAttributeOrder = (a: string, b: string): number => {
-  const aIndex = attributeOrder.indexOf(a as AttributeKey) || 0;
-  const bIndex = attributeOrder.indexOf(b as AttributeKey) || 0;
-  return aIndex - bIndex;
+/**
+ * Rank of an attribute in {@link attributeOrder}. Keys absent from that list
+ * sort after every listed one rather than before them — `indexOf` reports a
+ * miss as `-1`, which is truthy, so a `|| 0` fallback never fires.
+ */
+const attributeOrderIndex = (attribute: string): number => {
+  const index = attributeOrder.indexOf(attribute as AttributeKey);
+  return index === -1 ? attributeOrder.length : index;
 };
 
+const sortByAttributeOrder = (a: string, b: string): number =>
+  attributeOrderIndex(a) - attributeOrderIndex(b);
+
 /**
  * Display names for attributes that should render differently from their key.
  */
@@ -307,6 +326,8 @@ const attributeDisplayNames: Partial<Record<AttributeKey, string>> = {
   errorCode: 'Error Code',
   correlationId: 'Correlation ID',
   deploymentId: 'Deployment ID',
+  vercelId: 'Request ID',
+  computeInstanceId: 'Compute Instance ID',
   specVersion: 'Spec Version',
   workflowCoreVersion: '@workflow/core version',
   occurredAt: 'Occurred',
@@ -388,6 +409,14 @@ const timestampWithTooltipOrNull = (value: unknown): ReactNode | null => {
   );
 };
 
+/**
+ * Renders an opaque provenance id. The analytics read contract types these as
+ * nullable, and only a `null` return is filtered out of the panel, so a bare
+ * `String()` would surface the literal text "null" as the value.
+ */
+const opaqueIdOrNull = (value: unknown): string | null =>
+  hasDisplayContent(value) ? String(value) : null;
+
 interface DisplayContext {
   stepName?: string;
   sectionOpen?: boolean;
@@ -419,11 +448,15 @@ const attributeToDisplayFn: Record<
   disposedAt: localMillisecondTimeOrNull,
   // Internal resume plumbing — not surfaced in the UI
   resumeContext: (_value: unknown) => null,
+  resumeId: (_value: unknown) => null,
+  resumeCapabilities: (_value: unknown) => null,
   // Event details
   eventType: (value: unknown) => String(value),
   correlationId: (value: unknown) => String(value),
   // Project details
   deploymentId: (value: unknown) => String(value),
+  vercelId: opaqueIdOrNull,
+  computeInstanceId: opaqueIdOrNull,
   specVersion: (value: unknown) => String(value),
   workflowCoreVersion: (value: unknown) => String(value),
   // Tenancy (we don't show these)
@@ -668,7 +701,7 @@ const selfHeaderedAttributes = new Set([
 
 const ExpiredDataMessage = () => (
   <div
-    className="text-copy-12 rounded-md border p-4 my-2"
+    className="text-label-12 rounded-md border p-4 my-2"
     style={{
       borderColor: 'var(--ds-gray-300)',
       backgroundColor: 'var(--ds-gray-100)',
@@ -684,6 +717,8 @@ const copyableBasicAttributes = new Set<AttributeKey>([
   'hookId',
   'eventId',
   'deploymentId',
+  'vercelId',
+  'computeInstanceId',
   'moduleSpecifier',
   'token',
 ]);
@@ -776,7 +811,10 @@ export const AttributeBlock = ({
         <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)' }}>
+        <span
+          className="text-label-12"
+          style={{ color: 'var(--ds-gray-1000)' }}
+        >
           {displayValue}
         </span>
       </div>

package/src/components/sidebar/attributes-block.tsx

@@ -8,8 +8,8 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { ArrowUpRight } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { cn } from '../../lib/cn';
-import { CopyButton } from '../new-trace-viewer/components/copy-button';
-import { MiddleTruncate } from '../new-trace-viewer/components/middle-truncate/middle-truncate';
+import { CopyButton } from '../trace-viewer/components/copy-button';
+import { MiddleTruncate } from '../trace-viewer/components/middle-truncate/middle-truncate';
 import {
   CollapsibleContent,
   CollapsibleRoot,

package/src/components/sidebar/copyable-data-block.tsx

@@ -2,7 +2,7 @@
 
 import { Lock } from 'lucide-react';
 import { useContext } from 'react';
-import { CopyButton } from '../new-trace-viewer/components/copy-button';
+import { CopyButton } from '../trace-viewer/components/copy-button';
 import { Button } from '../ui/button';
 import { DataInspector, DecryptClickContext } from '../ui/data-inspector';
 import { Spinner } from '../ui/spinner';

package/src/components/sidebar/entity-detail-panel.tsx

@@ -323,7 +323,7 @@ export function EntityDetailPanel({
               }}
             >
               <p
-                className="mb-2 px-1 text-[13px] font-medium uppercase tracking-wide"
+                className="mb-2 px-1 text-label-13 font-medium uppercase tracking-wide"
                 style={{ color: 'var(--ds-gray-700)' }}
               >
                 Actions
@@ -336,7 +336,7 @@ export function EntityDetailPanel({
                     onClick={handleWakeUp}
                     disabled={stoppingSleep}
                     className={clsx(
-                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
+                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-button-14',
                       'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
                       stoppingSleep
                         ? 'opacity-50 cursor-not-allowed'
@@ -359,7 +359,7 @@ export function EntityDetailPanel({
                     onClick={() => setShowResolveHookModal(true)}
                     disabled={resolvingHook}
                     className={clsx(
-                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
+                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-button-14',
                       'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
                       resolvingHook
                         ? 'opacity-50 cursor-not-allowed'

package/src/components/sidebar/events-list.tsx

@@ -238,7 +238,7 @@ function EventDataBlock({
   if (isExpiredMarker(data) || hasOnlyExpiredFields(data, eventType)) {
     return (
       <div
-        className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs"
+        className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-label-12"
         style={{
           borderColor: 'var(--ds-gray-300)',
           backgroundColor: 'var(--ds-gray-100)',

package/src/components/stream-viewer.tsx

@@ -2,9 +2,9 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
-import { CopyButton } from './new-trace-viewer/components/copy-button';
 import { serializeForClipboard } from './sidebar/copyable-data-block';
 import { StreamViewerSkeleton } from './stream-viewer-skeleton';
+import { CopyButton } from './trace-viewer/components/copy-button';
 import { DataInspector } from './ui/data-inspector';
 
 // ──────────────────────────────────────────────────────────────────────────

package/src/components/{new-trace-viewer → trace-viewer}/components/event-list.tsx

@@ -1,7 +1,6 @@
 import { Circle } from 'lucide-react';
 import { useRef } from 'react';
 import { cn } from '../../../lib/cn';
-import { formatDurationPrecise } from '../../trace-viewer/util/timing';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
 import {
   SleepIcon,
@@ -11,6 +10,7 @@ import {
 } from '../icons';
 import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
 import type { Span } from '../types';
+import { formatDurationPrecise } from '../util/timing';
 import { getSpanDurationMs, isSpanErrored } from '../utils';
 import { MiddleTruncate } from './middle-truncate/middle-truncate';
 import { ROW_HEIGHT_PX, useRowWindow } from './use-row-window';

package/src/components/{new-trace-viewer → trace-viewer}/components/minimap.tsx

@@ -10,11 +10,8 @@ import {
   useState,
 } from 'react';
 import { cn } from '../../../lib/cn';
-import {
-  formatDurationPrecise,
-  getHighResInMs,
-} from '../../trace-viewer/util/timing';
 import type { Span } from '../types';
+import { formatDurationPrecise, getHighResInMs } from '../util/timing';
 import {
   clampViewportToRoot,
   isSpanErrored,

package/src/components/{new-trace-viewer → trace-viewer}/components/timeline.tsx

@@ -12,12 +12,9 @@ import {
   useState,
 } from 'react';
 import { cn } from '../../../lib/cn';
-import {
-  formatDurationPrecise,
-  getHighResInMs,
-} from '../../trace-viewer/util/timing';
 import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
 import type { Span } from '../types';
+import { formatDurationPrecise, getHighResInMs } from '../util/timing';
 import type {
   OffscreenMarkers,
   Segment,
@@ -664,7 +661,7 @@ export function TimelineHeader({
         {markers.map((m) => (
           <span
             key={String(m.value)}
-            className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap"
+            className="absolute bottom-1 text-label-12-mono text-gray-900 whitespace-nowrap"
             style={{ left: `${m.position * 100}%` }}
           >
             {m.label}

package/src/components/{new-trace-viewer → trace-viewer}/components/trace-shortcut-helper.tsx

@@ -86,7 +86,7 @@ export function TraceShortcutHelper({
   };
 
   return (
-    <div className="group pointer-events-auto hidden h-8 w-fit items-center gap-1 text-xs leading-none text-gray-900 @min-[480px]:flex">
+    <div className="group pointer-events-auto hidden h-8 w-fit items-center gap-1 text-label-12 leading-none text-gray-900 @min-[480px]:flex">
       <span
         aria-live="polite"
         aria-atomic="true"