@workflow/web-shared 5.0.0-beta.1 → 5.0.0-beta.3

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

@@ -5,8 +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 { DecryptButton } from '../ui/decrypt-button';
+import { DecryptClickContext } from '../ui/data-inspector';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
@@ -56,6 +55,7 @@ export interface SelectedSpanInfo {
 export function EntityDetailPanel({
   run,
   onStreamClick,
+  onRunClick,
   spanDetailData,
   spanDetailError,
   spanDetailLoading,
@@ -71,6 +71,8 @@ export function EntityDetailPanel({
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
+  /** Callback when a run reference is clicked */
+  onRunClick?: (runId: string) => void;
   /** Pre-fetched span detail data for the selected span. */
   spanDetailData: WorkflowRun | Step | Hook | Event | null;
   /** Error from external span detail fetch. */
@@ -209,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;
@@ -347,155 +338,108 @@ 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)' }}
+      <DecryptClickContext.Provider
+        value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
       >
-        <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)',
-                }}
+        <div className="flex-1 overflow-y-auto px-3 pt-3 pb-8">
+          {hasPendingActions && (
+            <div
+              className="mb-4 rounded-lg border p-2"
+              style={{
+                borderColor: 'var(--ds-gray-300)',
+                backgroundColor: 'var(--ds-gray-100)',
+              }}
+            >
+              <p
+                className="mb-2 px-1 text-[13px] font-medium uppercase tracking-wide"
+                style={{ color: 'var(--ds-gray-700)' }}
               >
-                {runStateLabel}
-              </span>
+                Actions
+              </p>
+              <div className="flex flex-col gap-2">
+                {/* Wake up button for pending sleep calls */}
+                {resource === 'sleep' && canWakeUp && (
+                  <button
+                    type="button"
+                    onClick={handleWakeUp}
+                    disabled={stoppingSleep}
+                    className={clsx(
+                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
+                      'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
+                      stoppingSleep
+                        ? 'opacity-50 cursor-not-allowed'
+                        : 'cursor-pointer'
+                    )}
+                    style={{
+                      background: 'var(--ds-amber-200)',
+                      color: 'var(--ds-amber-900)',
+                    }}
+                  >
+                    <Zap className="h-4 w-4" />
+                    {stoppingSleep ? 'Waking up...' : 'Wake Up Sleep'}
+                  </button>
+                )}
+
+                {/* Resolve hook button for pending hooks */}
+                {resource === 'hook' && canResolveHook && (
+                  <button
+                    type="button"
+                    onClick={() => setShowResolveHookModal(true)}
+                    disabled={resolvingHook}
+                    className={clsx(
+                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
+                      'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
+                      resolvingHook
+                        ? 'opacity-50 cursor-not-allowed'
+                        : 'cursor-pointer'
+                    )}
+                    style={{
+                      background: 'var(--ds-gray-1000)',
+                      color: 'var(--ds-background-100)',
+                    }}
+                  >
+                    <Send className="h-4 w-4" />
+                    Resolve Hook
+                  </button>
+                )}
+              </div>
             </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}
-            />
           )}
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto px-3 pt-3 pb-8">
-        {hasPendingActions && (
-          <div
-            className="mb-4 rounded-lg border p-2"
-            style={{
-              borderColor: 'var(--ds-gray-300)',
-              backgroundColor: 'var(--ds-gray-100)',
-            }}
-          >
-            <p
-              className="mb-2 px-1 text-[13px] font-medium uppercase tracking-wide"
-              style={{ color: 'var(--ds-gray-700)' }}
-            >
-              Actions
-            </p>
-            <div className="flex flex-col gap-2">
-              {/* Wake up button for pending sleep calls */}
-              {resource === 'sleep' && canWakeUp && (
-                <button
-                  type="button"
-                  onClick={handleWakeUp}
-                  disabled={stoppingSleep}
-                  className={clsx(
-                    'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
-                    'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
-                    stoppingSleep
-                      ? 'opacity-50 cursor-not-allowed'
-                      : 'cursor-pointer'
-                  )}
-                  style={{
-                    background: 'var(--ds-amber-200)',
-                    color: 'var(--ds-amber-900)',
-                  }}
-                >
-                  <Zap className="h-4 w-4" />
-                  {stoppingSleep ? 'Waking up...' : 'Wake Up Sleep'}
-                </button>
-              )}
-
-              {/* Resolve hook button for pending hooks */}
-              {resource === 'hook' && canResolveHook && (
-                <button
-                  type="button"
-                  onClick={() => setShowResolveHookModal(true)}
-                  disabled={resolvingHook}
-                  className={clsx(
-                    'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
-                    'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
-                    resolvingHook
-                      ? 'opacity-50 cursor-not-allowed'
-                      : 'cursor-pointer'
-                  )}
-                  style={{
-                    background: 'var(--ds-gray-1000)',
-                    color: 'var(--ds-background-100)',
-                  }}
-                >
-                  <Send className="h-4 w-4" />
-                  Resolve Hook
-                </button>
-              )}
-            </div>
-          </div>
-        )}
 
-        <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}
-              expiredAt={run.expiredAt}
-              isLoading={loading}
-              error={error ?? undefined}
-              onStreamClick={onStreamClick}
-              resource={resource}
-            />
-          </section>
-
-          {resource !== 'run' && rawEvents && (
+          <div className="space-y-4">
             <section>
-              <EventsList
-                events={rawEvents}
-                onLoadEventData={onLoadEventData}
-                encryptionKey={encryptionKey}
+              <AttributePanel
+                data={displayData}
+                moduleSpecifier={moduleSpecifier}
+                expiredAt={run.expiredAt}
+                isLoading={loading}
+                error={error ?? undefined}
+                onStreamClick={onStreamClick}
+                onRunClick={onRunClick}
+                onDecrypt={onDecrypt}
+                isDecrypting={isDecrypting}
+                resource={resource}
               />
             </section>
-          )}
+
+            {resource !== 'run' && rawEvents && (
+              <section>
+                <EventsList
+                  events={rawEvents}
+                  onLoadEventData={onLoadEventData}
+                  encryptionKey={encryptionKey}
+                />
+              </section>
+            )}
+          </div>
         </div>
-      </div>
+      </DecryptClickContext.Provider>
 
       {/* Resolve Hook Modal */}
       <ResolveHookModal

package/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"
@@ -311,10 +314,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">

package/src/components/sidebar/sidebar-data-context.tsx

@@ -0,0 +1,62 @@
+'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;
+  onRunClick?: (runId: 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;
+  hasEncryptedData?: 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);
+}

package/src/components/stream-viewer.tsx

@@ -5,37 +5,13 @@ import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
 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;
-  text: string;
+  value: unknown;
 }
 
 type Chunk = StreamChunk;
@@ -62,8 +38,6 @@ const ChunkRow = React.memo(function ChunkRow({
   chunk: Chunk;
   index: number;
 }) {
-  const parsed = parseChunkData(chunk.text);
-
   return (
     <div
       className="text-[11px] rounded-md border p-3"
@@ -72,22 +46,26 @@ const ChunkRow = React.memo(function ChunkRow({
         backgroundColor: 'var(--ds-gray-100)',
       }}
     >
-      <span
-        className="select-none mr-2"
-        style={{ color: 'var(--ds-gray-500)' }}
-      >
-        [{index}]
-      </span>
-      {typeof parsed === 'string' ? (
+      <div className="flex items-start gap-2">
         <span
-          className="whitespace-pre-wrap break-words"
-          style={{ color: 'var(--ds-gray-1000)' }}
+          className="select-none pt-px"
+          style={{ color: 'var(--ds-gray-500)' }}
         >
-          {deserializeChunkText(parsed)}
+          [{index}]
         </span>
-      ) : (
-        <DataInspector data={parsed} expandLevel={1} />
-      )}
+        <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>
     </div>
   );
 });

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+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.
+  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;
+
+  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 (
+    <SidebarDataProvider value={sidebarData}>
+      <div className="relative w-full h-full flex">
+        <NewTraceViewerComponent trace={trace as Trace} />
+      </div>
+    </SidebarDataProvider>
+  );
+};
+
+export { NewTraceViewer };