@workflow/web-shared 5.0.0-beta.37 → 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.37",
+  "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/utils": "5.0.0-beta.7",
-    "@workflow/core": "5.0.0-beta.37",
-    "@workflow/world": "5.0.0-beta.23"
+    "@workflow/core": "5.0.0-beta.39",
+    "@workflow/utils": "5.0.0-beta.8",
+    "@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.13",
+    "@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,
@@ -29,8 +28,9 @@ export type {
   FetchSpanDetail,
 } from './sidebar/use-selected-span-detail';
 export { type StreamChunk, StreamViewer } from './stream-viewer';
-export type { Span, SpanEvent } from './trace-viewer/types';
-export { NewTraceViewer } from './trace-viewer-new';
+export { StreamViewerSkeleton } from './stream-viewer-skeleton';
+export { TraceViewer } from './trace-viewer';
+export { TraceViewerSkeleton } from './trace-viewer/components/trace-viewer-skeleton';
 export {
   DataInspector,
   type DataInspectorProps,
@@ -43,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-skeleton.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from './ui/skeleton';
+
+const STREAM_SKELETON_ROWS = [
+  { id: 'stream-skeleton-row-1', width: '72%' },
+  { id: 'stream-skeleton-row-2', width: '58%' },
+  { id: 'stream-skeleton-row-3', width: '80%' },
+  { id: 'stream-skeleton-row-4', width: '64%' },
+];
+
+export function StreamViewerSkeleton() {
+  return (
+    <output
+      aria-busy="true"
+      aria-label="Loading stream"
+      className="flex h-full min-h-0 w-full flex-col overflow-hidden bg-background-100"
+    >
+      <span className="sr-only">Loading stream…</span>
+      <div className="flex h-10 min-h-10 items-center border-b border-gray-alpha-400 px-3">
+        <Skeleton className="h-3 w-10" />
+      </div>
+      <div className="flex flex-col">
+        {STREAM_SKELETON_ROWS.map((row) => (
+          <div
+            key={row.id}
+            className="flex h-10 items-center gap-2 border-b border-gray-alpha-400 px-3"
+          >
+            <Skeleton className="h-3" style={{ width: row.width }} />
+            <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
+          </div>
+        ))}
+      </div>
+    </output>
+  );
+}

package/src/components/stream-viewer.tsx

@@ -2,8 +2,10 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
+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';
-import { Skeleton } from './ui/skeleton';
 
 // ──────────────────────────────────────────────────────────────────────────
 // Types
@@ -23,7 +25,7 @@ interface StreamViewerProps {
   error?: string | null;
   /** True while the initial stream connection is being established */
   isLoading?: boolean;
-  /** Called when the user scrolls near the bottom, for triggering pagination */
+  /** Called when the user scrolls near the rendered end. */
   onScrollEnd?: () => void;
 }
 
@@ -31,60 +33,27 @@ interface StreamViewerProps {
 // Chunk row — memoized to prevent remounts during polling
 // ──────────────────────────────────────────────────────────────────────────
 
-const ChunkRow = React.memo(function ChunkRow({
-  chunk,
-  index,
-}: {
-  chunk: Chunk;
-  index: number;
-}) {
+const ChunkRow = React.memo(function ChunkRow({ chunk }: { chunk: Chunk }) {
   return (
-    <div
-      className="text-[11px] rounded-md border p-3"
-      style={{
-        borderColor: 'var(--ds-gray-300)',
-        backgroundColor: 'var(--ds-gray-100)',
-      }}
-    >
-      <div className="flex items-start gap-2">
-        <span
-          className="select-none pt-px"
-          style={{ color: 'var(--ds-gray-500)' }}
-        >
-          [{index}]
-        </span>
-        <div className="min-w-0 flex-1">
-          {typeof chunk.value === 'string' ? (
-            <span
-              className="whitespace-pre-wrap break-words"
-              style={{ color: 'var(--ds-gray-1000)' }}
-            >
-              {chunk.value}
-            </span>
-          ) : (
-            <DataInspector data={chunk.value} expandLevel={1} />
-          )}
-        </div>
+    <div className="flex w-full items-start gap-1 border-b border-gray-alpha-400 px-3 py-2">
+      <div className="min-w-0 flex-1">
+        {typeof chunk.value === 'string' ? (
+          <span className="whitespace-pre-wrap break-words text-label-12 font-mono text-gray-1000">
+            {chunk.value}
+          </span>
+        ) : (
+          <DataInspector data={chunk.value} expandLevel={1} />
+        )}
       </div>
+      <CopyButton
+        copyText={serializeForClipboard(chunk.value)}
+        ariaLabel="Copy chunk"
+        className="shrink-0 -mr-1 [&>div]:h-4 [&>div]:w-4 [&_svg]:h-4 [&_svg]:w-4"
+      />
     </div>
   );
 });
 
-// ──────────────────────────────────────────────────────────────────────────
-// Skeleton loading
-// ──────────────────────────────────────────────────────────────────────────
-
-function StreamSkeleton() {
-  return (
-    <div className="flex flex-col gap-3 animate-in fade-in">
-      <Skeleton style={{ width: 120, height: 16, borderRadius: 4 }} />
-      {[1, 2, 3, 4].map((i) => (
-        <Skeleton key={i} style={{ height: 56, borderRadius: 6 }} />
-      ))}
-    </div>
-  );
-}
-
 // ──────────────────────────────────────────────────────────────────────────
 // Main component
 // ──────────────────────────────────────────────────────────────────────────
@@ -105,7 +74,6 @@ export function StreamViewer({
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const prevChunkCountRef = useRef(0);
 
-  // Auto-scroll to bottom when new chunks arrive (live streaming)
   useEffect(() => {
     if (chunks.length > prevChunkCountRef.current && chunks.length > 0) {
       virtuosoRef.current?.scrollToIndex({
@@ -116,71 +84,31 @@ export function StreamViewer({
     prevChunkCountRef.current = chunks.length;
   }, [chunks.length]);
 
-  // Show skeleton when loading and no chunks have arrived yet
   if (isLoading && chunks.length === 0) {
-    return (
-      <div className="flex flex-col h-full">
-        <StreamSkeleton />
-      </div>
-    );
+    return <StreamViewerSkeleton />;
   }
 
   return (
-    <div className="flex flex-col h-full">
-      {/* Live indicator */}
-      {isLive && (
-        <div className="flex items-center gap-1.5 mb-2 px-1">
-          <span
-            className="inline-block w-2 h-2 rounded-full"
-            style={{ backgroundColor: 'var(--ds-green-600)' }}
-          />
-          <span className="text-xs" style={{ color: 'var(--ds-green-700)' }}>
-            Live
-          </span>
-        </div>
-      )}
-
-      {/* Header */}
-      {chunks.length > 0 && (
-        <div className="flex items-center gap-2 mb-2 px-1">
-          <span
-            className="text-[13px] font-medium"
-            style={{ color: 'var(--ds-gray-900)' }}
-          >
-            Stream Chunks
-          </span>
-          <span
-            className="text-xs tabular-nums"
-            style={{ color: 'var(--ds-gray-600)' }}
-          >
-            ({chunks.length})
-          </span>
-        </div>
-      )}
+    <div className="flex h-full w-full flex-col overflow-hidden bg-background-100">
+      {/* Status header */}
+      <div className="flex h-10 min-h-10 items-center gap-1.5 border-b border-gray-alpha-400 px-3">
+        {isLive && (
+          <>
+            <span className="inline-block h-2 w-2 rounded-full bg-green-600" />
+            <span className="text-label-12 text-green-700">Live</span>
+          </>
+        )}
+      </div>
 
       {/* Content */}
       <div className="flex-1 min-h-0">
         {error ? (
-          <div
-            className="text-[11px] rounded-md border p-3"
-            style={{
-              borderColor: 'var(--ds-red-300)',
-              backgroundColor: 'var(--ds-red-100)',
-              color: 'var(--ds-red-700)',
-            }}
-          >
+          <div className="border-b border-red-400 bg-red-100 px-3 py-2 text-label-12 text-red-900">
             <div>Error reading stream:</div>
             <div>{error}</div>
           </div>
         ) : chunks.length === 0 ? (
-          <div
-            className="text-[11px] rounded-md border p-3"
-            style={{
-              borderColor: 'var(--ds-gray-300)',
-              backgroundColor: 'var(--ds-gray-100)',
-              color: 'var(--ds-gray-600)',
-            }}
-          >
+          <div className="flex h-10 items-center border-b border-gray-alpha-400 bg-background-200 px-3 text-label-12 text-gray-900">
             {isLive ? 'Waiting for stream data...' : 'Stream is empty'}
           </div>
         ) : (
@@ -190,8 +118,8 @@ export function StreamViewer({
             overscan={10}
             endReached={() => onScrollEnd?.()}
             itemContent={(index) => (
-              <div style={{ paddingBottom: 8 }}>
-                <ChunkRow chunk={chunks[index]} index={index} />
+              <div className="w-full">
+                <ChunkRow chunk={chunks[index]} />
               </div>
             )}
             style={{ flex: 1, minHeight: 0 }}