@workflow/web-shared 4.1.0-beta.64 → 4.1.0-beta.65

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

@@ -6,12 +6,15 @@ import { Check, ChevronRight, Copy } from 'lucide-react';
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
+import { isEncryptedMarker } from '../lib/hydration';
+import { DecryptButton } from './ui/decrypt-button';
 import { formatDuration } from '../lib/utils';
 import { DataInspector } from './ui/data-inspector';
 import {
   ErrorStackBlock,
   isStructuredErrorWithStack,
 } from './ui/error-stack-block';
+import { LoadMoreButton } from './ui/load-more-button';
 import { MenuDropdown } from './ui/menu-dropdown';
 import { Skeleton } from './ui/skeleton';
 
@@ -596,6 +599,30 @@ const SORT_OPTIONS = [
   { value: 'asc' as const, label: 'Oldest' },
 ];
 
+function RowsSkeleton() {
+  return (
+    <div className="flex-1 overflow-hidden">
+      {Array.from({ length: 8 }, (_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-3 px-4"
+          style={{ height: 40 }}
+        >
+          <Skeleton
+            className="h-2 w-2 flex-shrink-0"
+            style={{ borderRadius: '50%' }}
+          />
+          <Skeleton className="h-3" style={{ width: 90 }} />
+          <Skeleton className="h-3" style={{ width: 100 }} />
+          <Skeleton className="h-3" style={{ width: 80 }} />
+          <Skeleton className="h-3 flex-1" />
+          <Skeleton className="h-3 flex-1" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 // ──────────────────────────────────────────────────────────────────────────
 // Event row
 // ──────────────────────────────────────────────────────────────────────────
@@ -616,6 +643,10 @@ interface EventsListProps {
   /** Called when the user changes sort order. When provided, the sort dropdown is shown
    *  and the parent is expected to refetch from the API with the new order. */
   onSortOrderChange?: (order: 'asc' | 'desc') => void;
+  /** Called when the user clicks the Decrypt button. */
+  onDecrypt?: () => void;
+  /** Whether the encryption key is currently being fetched. */
+  isDecrypting?: boolean;
 }
 
 function EventRow({
@@ -1020,6 +1051,8 @@ export function EventListView({
   isLoading = false,
   sortOrder: sortOrderProp,
   onSortOrderChange,
+  onDecrypt,
+  isDecrypting = false,
 }: EventsListProps) {
   const [internalSortOrder, setInternalSortOrder] = useState<'asc' | 'desc'>(
     'asc'
@@ -1046,6 +1079,22 @@ export function EventListView({
     );
   }, [events, effectiveSortOrder]);
 
+  // Detect encrypted fields across all loaded events.
+  // Only checks top-level eventData values (input, output, result, etc.) —
+  // the current data model guarantees encrypted markers appear at this level.
+  const hasEncryptedData = useMemo(() => {
+    if (!events) return false;
+    for (const event of events) {
+      const ed = (event as Record<string, unknown>).eventData;
+      if (!ed || typeof ed !== 'object') continue;
+      const data = ed as Record<string, unknown>;
+      for (const val of Object.values(data)) {
+        if (isEncryptedMarker(val)) return true;
+      }
+    }
+    return false;
+  }, [events]);
+
   const { correlationNameMap, workflowName } = useMemo(
     () => buildNameMaps(events ?? null, run ?? null),
     [events, run]
@@ -1201,52 +1250,43 @@ export function EventListView({
     }
   }, [searchQuery, searchIndex]);
 
-  if (!events || events.length === 0) {
-    if (isLoading) {
-      return (
-        <div className="h-full flex flex-col overflow-hidden">
-          {/* Skeleton search bar */}
-          <div style={{ padding: 6 }}>
-            <Skeleton style={{ height: 40, borderRadius: 6 }} />
-          </div>
-          {/* Skeleton header */}
-          <div
-            className="flex items-center gap-0 h-10 border-b flex-shrink-0 px-4"
-            style={{ borderColor: 'var(--ds-gray-alpha-200)' }}
-          >
-            <Skeleton className="h-3" style={{ width: 60 }} />
-            <div style={{ flex: 1 }} />
-            <Skeleton className="h-3" style={{ width: 80 }} />
-            <div style={{ flex: 1 }} />
-            <Skeleton className="h-3" style={{ width: 50 }} />
-            <div style={{ flex: 1 }} />
-            <Skeleton className="h-3" style={{ width: 90 }} />
-            <div style={{ flex: 1 }} />
-            <Skeleton className="h-3" style={{ width: 70 }} />
-          </div>
-          {/* Skeleton rows */}
-          <div className="flex-1 overflow-hidden">
-            {Array.from({ length: 8 }, (_, i) => (
-              <div
-                key={i}
-                className="flex items-center gap-3 px-4"
-                style={{ height: 40 }}
-              >
-                <Skeleton
-                  className="h-2 w-2 flex-shrink-0"
-                  style={{ borderRadius: '50%' }}
-                />
-                <Skeleton className="h-3" style={{ width: 90 }} />
-                <Skeleton className="h-3" style={{ width: 100 }} />
-                <Skeleton className="h-3" style={{ width: 80 }} />
-                <Skeleton className="h-3 flex-1" />
-                <Skeleton className="h-3 flex-1" />
-              </div>
-            ))}
-          </div>
+  // Track whether we've ever had events to distinguish initial load from refetch
+  const hasHadEventsRef = useRef(false);
+  if (sortedEvents.length > 0) {
+    hasHadEventsRef.current = true;
+  }
+  const isInitialLoad = isLoading && !hasHadEventsRef.current;
+  const isRefetching =
+    isLoading && hasHadEventsRef.current && sortedEvents.length === 0;
+
+  if (isInitialLoad) {
+    return (
+      <div className="h-full flex flex-col overflow-hidden">
+        {/* Skeleton search bar */}
+        <div style={{ padding: 6 }}>
+          <Skeleton style={{ height: 40, borderRadius: 6 }} />
         </div>
-      );
-    }
+        {/* Skeleton header */}
+        <div
+          className="flex items-center gap-0 h-10 border-b flex-shrink-0 px-4"
+          style={{ borderColor: 'var(--ds-gray-alpha-200)' }}
+        >
+          <Skeleton className="h-3" style={{ width: 60 }} />
+          <div style={{ flex: 1 }} />
+          <Skeleton className="h-3" style={{ width: 80 }} />
+          <div style={{ flex: 1 }} />
+          <Skeleton className="h-3" style={{ width: 50 }} />
+          <div style={{ flex: 1 }} />
+          <Skeleton className="h-3" style={{ width: 90 }} />
+          <div style={{ flex: 1 }} />
+          <Skeleton className="h-3" style={{ width: 70 }} />
+        </div>
+        <RowsSkeleton />
+      </div>
+    );
+  }
+
+  if (!isLoading && (!events || events.length === 0)) {
     return (
       <div
         className="flex items-center justify-center h-full text-sm"
@@ -1339,6 +1379,13 @@ export function EventListView({
           value={effectiveSortOrder}
           onChange={handleSortOrderChange}
         />
+        {(hasEncryptedData || encryptionKey) && onDecrypt && (
+          <DecryptButton
+            decrypted={!!encryptionKey}
+            loading={isDecrypting}
+            onClick={onDecrypt}
+          />
+        )}
       </div>
 
       {/* Header */}
@@ -1369,82 +1416,75 @@ export function EventListView({
         </div>
       </div>
 
-      {/* Virtualized event rows */}
-      <Virtuoso
-        ref={virtuosoRef}
-        totalCount={sortedEvents.length}
-        overscan={20}
-        defaultItemHeight={40}
-        endReached={() => {
-          if (!hasMoreEvents || isLoadingMoreEvents) {
-            return;
-          }
-          void onLoadMoreEvents?.();
-        }}
-        itemContent={(index: number) => {
-          const ev = sortedEvents[index];
-          return (
-            <EventRow
-              event={ev}
-              index={index}
-              isFirst={index === 0}
-              isLast={index === sortedEvents.length - 1}
-              isExpanded={expandedEventIds.has(ev.eventId)}
-              onToggleExpand={toggleEventExpanded}
-              activeGroupKey={activeGroupKey}
-              selectedGroupKey={selectedGroupKey}
-              selectedGroupRange={selectedGroupRange}
-              correlationNameMap={correlationNameMap}
-              workflowName={workflowName}
-              durationMap={durationMap}
-              onSelectGroup={onSelectGroup}
-              onHoverGroup={onHoverGroup}
-              onLoadEventData={onLoadEventData}
-              cachedEventData={
-                eventDataCacheRef.current.get(ev.eventId) ?? null
-              }
-              onCacheEventData={cacheEventData}
-              encryptionKey={encryptionKey}
-            />
-          );
-        }}
-        components={{
-          Footer: hasMoreEvents
-            ? () => (
-                <div className="px-3 pt-3 flex justify-center">
-                  <button
-                    type="button"
-                    onClick={() => void onLoadMoreEvents?.()}
-                    disabled={isLoadingMoreEvents}
-                    className="h-8 px-3 text-xs rounded-md border transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
-                    style={{
-                      borderColor: 'var(--ds-gray-alpha-400)',
-                      color: 'var(--ds-gray-900)',
-                      backgroundColor: 'var(--ds-background-100)',
-                    }}
-                  >
-                    {isLoadingMoreEvents
-                      ? 'Loading more events...'
-                      : 'Load more'}
-                  </button>
-                </div>
-              )
-            : undefined,
-        }}
-        style={{ flex: 1, minHeight: 0 }}
-      />
+      {/* Virtualized event rows or refetching skeleton */}
+      {isRefetching ? (
+        <RowsSkeleton />
+      ) : (
+        <Virtuoso
+          ref={virtuosoRef}
+          totalCount={sortedEvents.length}
+          overscan={20}
+          defaultItemHeight={40}
+          endReached={() => {
+            if (!hasMoreEvents || isLoadingMoreEvents) {
+              return;
+            }
+            void onLoadMoreEvents?.();
+          }}
+          itemContent={(index: number) => {
+            const ev = sortedEvents[index];
+            return (
+              <EventRow
+                event={ev}
+                index={index}
+                isFirst={index === 0}
+                isLast={index === sortedEvents.length - 1}
+                isExpanded={expandedEventIds.has(ev.eventId)}
+                onToggleExpand={toggleEventExpanded}
+                activeGroupKey={activeGroupKey}
+                selectedGroupKey={selectedGroupKey}
+                selectedGroupRange={selectedGroupRange}
+                correlationNameMap={correlationNameMap}
+                workflowName={workflowName}
+                durationMap={durationMap}
+                onSelectGroup={onSelectGroup}
+                onHoverGroup={onHoverGroup}
+                onLoadEventData={onLoadEventData}
+                cachedEventData={
+                  eventDataCacheRef.current.get(ev.eventId) ?? null
+                }
+                onCacheEventData={cacheEventData}
+                encryptionKey={encryptionKey}
+              />
+            );
+          }}
+          style={{ flex: 1, minHeight: 0 }}
+        />
+      )}
 
-      {/* Fixed footer — always at the bottom of the visible area */}
+      {/* Fixed footer — count + load more */}
       <div
-        className="flex-shrink-0 border-t text-xs px-3 py-2"
+        className="relative flex-shrink-0 flex items-center h-10 border-t px-4 text-xs"
         style={{
           borderColor: 'var(--ds-gray-alpha-200)',
           color: 'var(--ds-gray-900)',
           backgroundColor: 'var(--ds-background-100)',
         }}
       >
-        {sortedEvents.length} event
-        {sortedEvents.length !== 1 ? 's' : ''} total
+        <span>
+          {sortedEvents.length} event
+          {sortedEvents.length !== 1 ? 's' : ''} loaded
+        </span>
+        {hasMoreEvents && (
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <div className="pointer-events-auto">
+              <LoadMoreButton
+                loading={isLoadingMoreEvents}
+                onClick={() => void onLoadMoreEvents?.()}
+              />
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/components/index.ts

@@ -22,5 +22,8 @@ export type {
 export { type StreamChunk, StreamViewer } from './stream-viewer';
 export type { Span, SpanEvent } from './trace-viewer/types';
 export { DataInspector, type DataInspectorProps } from './ui/data-inspector';
+export { DecryptButton } from './ui/decrypt-button';
+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/entity-detail-panel.tsx

@@ -2,10 +2,11 @@
 
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
-import { Lock, Send, Unlock, Zap } from 'lucide-react';
+import { Send, Zap } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 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';
@@ -64,6 +65,7 @@ export function EntityDetailPanel({
   onResolveHook,
   encryptionKey,
   onDecrypt,
+  isDecrypting = false,
   selectedSpan,
 }: {
   run: WorkflowRun;
@@ -97,6 +99,8 @@ export function EntityDetailPanel({
   encryptionKey?: Uint8Array;
   /** Callback to initiate decryption of encrypted run data */
   onDecrypt?: () => void;
+  /** Whether the encryption key is currently being fetched */
+  isDecrypting?: boolean;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
 }): React.JSX.Element | null {
@@ -381,31 +385,11 @@ export function EntityDetailPanel({
             </p>
           </div>
           {(hasEncryptedFields || encryptionKey) && onDecrypt && (
-            <button
-              type="button"
+            <DecryptButton
+              decrypted={!!encryptionKey}
+              loading={isDecrypting}
               onClick={onDecrypt}
-              disabled={!!encryptionKey}
-              className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium transition-colors flex-shrink-0"
-              style={{
-                borderColor: encryptionKey
-                  ? 'var(--ds-green-400)'
-                  : 'var(--ds-gray-300)',
-                color: encryptionKey
-                  ? 'var(--ds-green-900)'
-                  : 'var(--ds-gray-900)',
-                backgroundColor: encryptionKey
-                  ? 'var(--ds-green-100)'
-                  : 'var(--ds-background-100)',
-                cursor: encryptionKey ? 'default' : 'pointer',
-              }}
-            >
-              {encryptionKey ? (
-                <Unlock className="h-3 w-3" />
-              ) : (
-                <Lock className="h-3 w-3" />
-              )}
-              {encryptionKey ? 'Decrypted' : 'Decrypt'}
-            </button>
+            />
           )}
         </div>
       </div>

package/src/components/stream-viewer.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
 import { DataInspector } from './ui/data-inspector';
 import { Skeleton } from './ui/skeleton';
 
@@ -46,6 +47,8 @@ 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 */
+  onScrollEnd?: () => void;
 }
 
 // ──────────────────────────────────────────────────────────────────────────
@@ -114,45 +117,41 @@ function StreamSkeleton() {
  * of complex types (Map, Set, Date, custom classes, etc.).
  */
 export function StreamViewer({
-  streamId,
+  streamId: _streamId,
   chunks,
   isLive,
   error,
   isLoading,
+  onScrollEnd,
 }: StreamViewerProps) {
-  const [hasMoreBelow, setHasMoreBelow] = useState(false);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const checkScrollPosition = useCallback(() => {
-    if (scrollRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
-      const isAtBottom = scrollHeight - scrollTop - clientHeight < 10;
-      setHasMoreBelow(!isAtBottom && scrollHeight > clientHeight);
-    }
-  }, []);
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const prevChunkCountRef = useRef(0);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: chunks.length triggers scroll on new chunks
+  // Auto-scroll to bottom when new chunks arrive (live streaming)
   useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    if (chunks.length > prevChunkCountRef.current && chunks.length > 0) {
+      virtuosoRef.current?.scrollToIndex({
+        index: chunks.length - 1,
+        align: 'end',
+      });
     }
-    checkScrollPosition();
-  }, [chunks.length, checkScrollPosition]);
+    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 pb-4">
+      <div className="flex flex-col h-full">
         <StreamSkeleton />
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col h-full pb-4">
+    <div className="flex flex-col h-full">
       {/* Live indicator */}
       {isLive && (
-        <div className="flex items-center gap-1.5 mb-3 px-1">
+        <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)' }}
@@ -182,52 +181,42 @@ export function StreamViewer({
       )}
 
       {/* Content */}
-      <div className="relative flex-1 min-h-[200px]">
-        <div
-          ref={scrollRef}
-          onScroll={checkScrollPosition}
-          className="absolute inset-0 overflow-auto flex flex-col gap-2"
-        >
-          {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>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)',
-              }}
-            >
-              {isLive ? 'Waiting for stream data...' : 'Stream is empty'}
-            </div>
-          ) : (
-            chunks.map((chunk, index) => (
-              <ChunkRow
-                key={`${streamId}-chunk-${chunk.id}`}
-                chunk={chunk}
-                index={index}
-              />
-            ))
-          )}
-        </div>
-        {hasMoreBelow && (
+      <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>Error reading stream:</div>
+            <div>{error}</div>
+          </div>
+        ) : chunks.length === 0 ? (
           <div
-            className="absolute bottom-0 left-0 right-0 h-8 pointer-events-none"
+            className="text-[11px] rounded-md border p-3"
             style={{
-              background:
-                'linear-gradient(to top, var(--ds-background-100), transparent)',
+              borderColor: 'var(--ds-gray-300)',
+              backgroundColor: 'var(--ds-gray-100)',
+              color: 'var(--ds-gray-600)',
             }}
+          >
+            {isLive ? 'Waiting for stream data...' : 'Stream is empty'}
+          </div>
+        ) : (
+          <Virtuoso
+            ref={virtuosoRef}
+            totalCount={chunks.length}
+            overscan={10}
+            endReached={() => onScrollEnd?.()}
+            itemContent={(index) => (
+              <div style={{ paddingBottom: 8 }}>
+                <ChunkRow chunk={chunks[index]} index={index} />
+              </div>
+            )}
+            style={{ flex: 1, minHeight: 0 }}
           />
         )}
       </div>

package/src/components/ui/decrypt-button.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Spinner } from './spinner';
+
+const STYLES = `.wf-decrypt-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-decrypt-idle{color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400)}.wf-decrypt-idle:hover{background:var(--ds-gray-alpha-200)}.wf-decrypt-done{color:var(--ds-green-900);background:var(--ds-green-100);box-shadow:0 0 0 1px var(--ds-green-400);cursor:default}`;
+
+interface DecryptButtonProps {
+  /** Whether an encryption key has been obtained (decryption is active). */
+  decrypted?: boolean;
+  /** Whether the key is currently being fetched. */
+  loading?: boolean;
+  /** Called when the user clicks to initiate decryption. */
+  onClick?: () => void;
+}
+
+/**
+ * Decrypt/Decrypted button using Geist secondary style.
+ * Three states: idle (secondary gray), decrypting (spinner), decrypted (green success).
+ */
+export function DecryptButton({
+  decrypted = false,
+  loading = false,
+  onClick,
+}: DecryptButtonProps) {
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: STYLES }} />
+      <button
+        type="button"
+        onClick={decrypted ? undefined : onClick}
+        disabled={decrypted || loading}
+        className={`wf-decrypt-btn ${decrypted ? 'wf-decrypt-done' : 'wf-decrypt-idle'}`}
+      >
+        {loading ? (
+          <Spinner size={14} />
+        ) : decrypted ? (
+          <svg
+            width={14}
+            height={14}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 9.9-1" />
+          </svg>
+        ) : (
+          <svg
+            width={14}
+            height={14}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+        )}
+        {loading ? 'Decrypting…' : decrypted ? 'Decrypted' : 'Decrypt'}
+      </button>
+    </>
+  );
+}