@workflow/web-shared 4.1.0-beta.52 → 4.1.0-beta.53

package/src/components/stream-viewer.tsx

@@ -1,27 +1,116 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { ObjectInspector } from 'react-inspector';
-import { useDarkMode } from '../hooks/use-dark-mode';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { DataInspector } from './ui/data-inspector';
+import { Skeleton } from './ui/skeleton';
+
+// ──────────────────────────────────────────────────────────────────────────
+// Helpers
+// ──────────────────────────────────────────────────────────────────────────
+
+function deserializeChunkText(text: string): string {
+  try {
+    const parsed = JSON.parse(text);
+    if (typeof parsed === 'string') {
+      return parsed;
+    }
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return text;
+  }
+}
+
+function parseChunkData(text: string): unknown {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return text;
+  }
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// Types
+// ──────────────────────────────────────────────────────────────────────────
 
 export interface StreamChunk {
   id: number;
-  /** The raw hydrated value from the stream */
-  data: unknown;
+  text: string;
 }
 
+type Chunk = StreamChunk;
+
 interface StreamViewerProps {
   streamId: string;
-  chunks: StreamChunk[];
+  chunks: Chunk[];
   isLive: boolean;
   error?: string | null;
+  /** True while the initial stream connection is being established */
+  isLoading?: boolean;
+}
+
+// ──────────────────────────────────────────────────────────────────────────
+// Chunk row — memoized to prevent remounts during polling
+// ──────────────────────────────────────────────────────────────────────────
+
+const ChunkRow = React.memo(function ChunkRow({
+  chunk,
+  index,
+}: {
+  chunk: Chunk;
+  index: number;
+}) {
+  const parsed = parseChunkData(chunk.text);
+
+  return (
+    <div
+      className="text-[11px] rounded-md border p-3"
+      style={{
+        borderColor: 'var(--ds-gray-300)',
+        backgroundColor: 'var(--ds-gray-100)',
+      }}
+    >
+      <span
+        className="select-none mr-2"
+        style={{ color: 'var(--ds-gray-500)' }}
+      >
+        [{index}]
+      </span>
+      {typeof parsed === 'string' ? (
+        <span
+          className="whitespace-pre-wrap break-words"
+          style={{ color: 'var(--ds-gray-1000)' }}
+        >
+          {deserializeChunkText(parsed)}
+        </span>
+      ) : (
+        <DataInspector data={parsed} expandLevel={1} />
+      )}
+    </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>
+  );
 }
 
-import { inspectorThemeDark, inspectorThemeLight } from './ui/inspector-theme';
+// ──────────────────────────────────────────────────────────────────────────
+// Main component
+// ──────────────────────────────────────────────────────────────────────────
 
 /**
  * StreamViewer component that displays real-time stream data.
- * Each chunk is rendered with ObjectInspector for proper display
+ * Each chunk is rendered with DataInspector for proper display
  * of complex types (Map, Set, Date, custom classes, etc.).
  */
 export function StreamViewer({
@@ -29,8 +118,8 @@ export function StreamViewer({
   chunks,
   isLive,
   error,
+  isLoading,
 }: StreamViewerProps) {
-  const isDark = useDarkMode();
   const [hasMoreBelow, setHasMoreBelow] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -50,36 +139,49 @@ export function StreamViewer({
     checkScrollPosition();
   }, [chunks.length, checkScrollPosition]);
 
-  const theme = isDark ? inspectorThemeDark : inspectorThemeLight;
+  // Show skeleton when loading and no chunks have arrived yet
+  if (isLoading && chunks.length === 0) {
+    return (
+      <div className="flex flex-col h-full pb-4">
+        <StreamSkeleton />
+      </div>
+    );
+  }
 
   return (
     <div className="flex flex-col h-full pb-4">
-      <div className="flex items-center justify-between mb-3 px-1">
-        <code
-          className="text-xs font-mono truncate max-w-[80%]"
-          style={{ color: 'var(--ds-gray-900)' }}
-          title={streamId}
-        >
-          {streamId}
-        </code>
-        <span
-          className="text-xs flex items-center gap-1.5"
-          style={{
-            color: isLive ? 'var(--ds-green-700)' : 'var(--ds-gray-600)',
-          }}
-        >
+      {/* Live indicator */}
+      {isLive && (
+        <div className="flex items-center gap-1.5 mb-3 px-1">
           <span
             className="inline-block w-2 h-2 rounded-full"
-            style={{
-              backgroundColor: isLive
-                ? 'var(--ds-green-600)'
-                : 'var(--ds-gray-500)',
-            }}
+            style={{ backgroundColor: 'var(--ds-green-600)' }}
           />
-          {isLive ? 'Live' : 'Closed'}
-        </span>
-      </div>
+          <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>
+      )}
 
+      {/* Content */}
       <div className="relative flex-1 min-h-[200px]">
         <div
           ref={scrollRef}
@@ -111,36 +213,11 @@ export function StreamViewer({
             </div>
           ) : (
             chunks.map((chunk, index) => (
-              <div
+              <ChunkRow
                 key={`${streamId}-chunk-${chunk.id}`}
-                className="rounded-md border p-3"
-                style={{
-                  borderColor: 'var(--ds-gray-300)',
-                }}
-              >
-                <span
-                  className="select-none mr-2 text-[11px] font-mono"
-                  style={{ color: 'var(--ds-gray-500)' }}
-                >
-                  [{index}]
-                </span>
-                {typeof chunk.data === 'string' ? (
-                  <span
-                    className="text-[11px] font-mono"
-                    style={{ color: 'var(--ds-gray-1000)' }}
-                  >
-                    {chunk.data}
-                  </span>
-                ) : (
-                  <ObjectInspector
-                    data={chunk.data}
-                    // @ts-expect-error react-inspector accepts theme objects at runtime despite
-                    // types declaring string only — see https://github.com/storybookjs/react-inspector/blob/main/README.md#theme
-                    theme={theme}
-                    expandLevel={1}
-                  />
-                )}
-              </div>
+                chunk={chunk}
+                index={index}
+              />
             ))
           )}
         </div>

package/src/components/trace-viewer/components/markers.tsx

@@ -7,7 +7,7 @@ import type {
   MutableRefObject,
   ReactNode,
 } from 'react';
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { type TraceViewerAction, useTraceViewer } from '../context';
 import styles from '../trace-viewer.module.css';
 import type {
@@ -23,32 +23,70 @@ import {
   ROW_PADDING,
   TIMELINE_PADDING,
 } from '../util/constants';
-import { formatDurationForTimeline, formatTimeSelection } from '../util/timing';
+import {
+  formatDurationForTimeline,
+  formatTimeSelection,
+  formatWallClockTime,
+} from '../util/timing';
 import { useImmediateStyle } from '../util/use-immediate-style';
 import { useTrackpadZoom } from '../util/use-trackpad-zoom';
 
-const DIVISORS = [1, 2, 4, 5, 8, 10];
+/**
+ * Snap a raw duration to the nearest "nice" number in the 1-2-5 × 10^n
+ * sequence (e.g. …, 0.5, 1, 2, 5, 10, 20, 50, 100, …).
+ */
+function snapToNice(raw: number): number {
+  if (raw <= 0) return 1;
+  const log10 = Math.floor(Math.log10(raw));
+  const pow = 10 ** log10;
+  const normalized = raw / pow;
+
+  if (normalized <= 1.5) return pow;
+  if (normalized <= 3.5) return 2 * pow;
+  if (normalized <= 7.5) return 5 * pow;
+  return 10 * pow;
+}
 
-export function Markers({ scale }: { scale: number }): ReactNode {
+export function Markers({
+  scale,
+  isLive = false,
+}: {
+  scale: number;
+  isLive?: boolean;
+}): ReactNode {
   const {
     state: { root },
   } = useTraceViewer();
+  // Force a re-render every second when live to pick up new tick marks.
+  // The markers container width is grown at 60fps by useLiveTick;
+  // this interval only ensures the marker *labels* stay current.
+  const [, forceMarkerUpdate] = useState(0);
+  useEffect(() => {
+    if (!isLive) return;
+    const id = setInterval(() => forceMarkerUpdate((v) => v + 1), 1000);
+    return () => clearInterval(id);
+  }, [isLive]);
 
   const fullDuration = root.duration;
-  const logFull = Math.floor(Math.log10(fullDuration));
-  const logHalf = Math.floor(Math.log10(fullDuration * 0.5));
-  let markerDuration = Math.max(
-    2,
-    10 ** logFull * (logHalf === logFull ? 1 : 0.5)
-  );
-  let markerWidth = markerDuration * scale;
-  let divisor = 1;
-  for (const d of DIVISORS) {
-    if (markerDuration / d < 24) break;
-    divisor = d;
+
+  // Calculate a marker interval that gives reasonable spacing at any zoom level.
+  // We target ~50px per notch mark; labels appear on every Nth notch via labelSpacing.
+  // When scale is <= 0 (e.g. the initial -1 sentinel), fall back to a safe default
+  // to avoid generating an absurd number of markers.
+  const effectiveScale =
+    scale > 0 ? scale : fullDuration > 0 ? 1 / fullDuration : 1;
+  const targetNotchPx = 50;
+  let markerDuration = snapToNice(targetNotchPx / effectiveScale);
+  markerDuration = Math.max(1, markerDuration);
+  let markerWidth = markerDuration * effectiveScale;
+
+  // Cap marker count to avoid creating too many DOM elements at extreme zoom
+  // on very long traces.  Only the visible portion is shown on screen anyway.
+  const MAX_MARKERS = 1000;
+  if (fullDuration / markerDuration > MAX_MARKERS) {
+    markerDuration = snapToNice(fullDuration / MAX_MARKERS);
+    markerWidth = markerDuration * effectiveScale;
   }
-  markerDuration /= divisor;
-  markerWidth /= divisor;
   const markerCount = Math.ceil(fullDuration / markerDuration);
 
   // How often labels should appear for markers, e.g. 3 === one label for every third marker
@@ -77,6 +115,9 @@ export function Markers({ scale }: { scale: number }): ReactNode {
               {hasLabel ? (
                 <span className={styles.markerLabel}>
                   {formatDurationForTimeline(markerDuration * i)}
+                  <span className={styles.markerClockTime}>
+                    {formatWallClockTime(root.startTime + markerDuration * i)}
+                  </span>
                 </span>
               ) : null}
             </span>
@@ -327,13 +368,20 @@ export function CursorMarker({
           cache.set(span.span.spanId, {});
         }
 
-        // Event Hover
+        // Event Hover — only show the nearest event when multiple overlap
         const eventSpreadPx = 12;
         const eventSpreadMs = eventSpreadPx / scale;
+        let closestEvent: (typeof eventsRef.current)[number] | null = null;
+        let closestDist = Infinity;
         for (const event of eventsRef.current) {
-          const isHovered =
-            t >= event.timestamp - eventSpreadMs &&
-            t <= event.timestamp + eventSpreadMs;
+          const dist = Math.abs(event.timestamp - t);
+          if (dist <= eventSpreadMs && dist < closestDist) {
+            closestDist = dist;
+            closestEvent = event;
+          }
+        }
+        for (const event of eventsRef.current) {
+          const isHovered = event === closestEvent;
           if (event.isHovered === isHovered) continue;
           event.isHovered = isHovered;
           const $event = event.ref?.current;