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

package/src/components/index.ts

@@ -22,4 +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>
+    </>
+  );
+}

package/src/components/ui/error-stack-block.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Copy } from 'lucide-react';
+import { AlertCircle, Copy } from 'lucide-react';
 import { toast } from 'sonner';
 
 /**
@@ -19,10 +19,9 @@ export function isStructuredErrorWithStack(
 }
 
 /**
- * Renders an error with a `stack` field as readable pre-formatted text,
- * styled to match the CopyableDataBlock component. The error message is
- * displayed at the top with a visual separator from the stack trace.
- * The entire block is copyable via a copy button.
+ * Renders an error with a `stack` field as a visually distinct error block.
+ * Shows the error message with an alert icon at the top, separated from
+ * the stack trace below.
  */
 export function ErrorStackBlock({
   value,
@@ -35,15 +34,22 @@ export function ErrorStackBlock({
 
   return (
     <div
-      className="relative overflow-x-auto rounded-md border p-3 pt-9"
-      style={{ borderColor: 'var(--ds-gray-300)' }}
+      className="relative overflow-hidden rounded-md border"
+      style={{
+        borderColor: 'var(--ds-red-400)',
+        background: 'var(--ds-red-100)',
+      }}
     >
       <button
         type="button"
         aria-label="Copy error"
         title="Copy"
-        className="!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border !bg-[var(--ds-background-100)] !text-[var(--ds-gray-800)] transition-transform transition-colors duration-100 hover:!bg-[var(--ds-gray-alpha-200)] active:!scale-95 active:!bg-[var(--ds-gray-alpha-300)]"
-        style={{ borderColor: 'var(--ds-gray-300)' }}
+        className="!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border transition-transform transition-colors duration-100 hover:!bg-[var(--ds-red-200)] active:!scale-95"
+        style={{
+          borderColor: 'var(--ds-red-400)',
+          background: 'var(--ds-red-100)',
+          color: 'var(--ds-red-900)',
+        }}
         onClick={() => {
           navigator.clipboard
             .writeText(copyText)
@@ -59,19 +65,23 @@ export function ErrorStackBlock({
       </button>
 
       {message && (
-        <p
-          className="pb-2 mb-2 text-xs font-semibold font-mono"
+        <div
+          className="flex items-start gap-2 px-3 py-2.5 pr-10"
           style={{
             color: 'var(--ds-red-900)',
-            borderBottom: '1px solid var(--ds-gray-300)',
+            borderBottom: '1px solid var(--ds-red-400)',
           }}
         >
-          {message}
-        </p>
+          <AlertCircle className="h-4 w-4 shrink-0" style={{ marginTop: 1 }} />
+          <p className="text-xs font-semibold m-0 break-words">{message}</p>
+        </div>
       )}
       <pre
-        className="text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0"
-        style={{ color: 'var(--ds-gray-1000)' }}
+        className="px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0"
+        style={{
+          color: 'var(--ds-red-900)',
+          background: 'var(--ds-red-200)',
+        }}
       >
         {stack}
       </pre>

package/src/components/ui/load-more-button.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Spinner } from './spinner';
+
+const STYLES = `.wf-load-more{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-load-more:hover{background:var(--ds-gray-alpha-200)}.wf-load-more:disabled{opacity:.6;cursor:default}.wf-load-more:disabled:hover{background:var(--ds-background-100)}`;
+
+interface LoadMoreButtonProps {
+  loading?: boolean;
+  onClick?: () => void;
+  label?: string;
+  loadingLabel?: string;
+}
+
+/**
+ * A "Load more" button matching Geist's Button type="secondary" size="small"
+ * with a spinner prefix when loading.
+ */
+export function LoadMoreButton({
+  loading = false,
+  onClick,
+  label = 'Load more',
+  loadingLabel = 'Loading...',
+}: LoadMoreButtonProps) {
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: STYLES }} />
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={loading}
+        className="wf-load-more"
+      >
+        {loading && <Spinner size={14} />}
+        {loading ? loadingLabel : label}
+      </button>
+    </>
+  );
+}

package/src/components/ui/menu-dropdown.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+const STYLES = `.wf-menu-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;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;transition:background 150ms}.wf-menu-btn:hover{background:var(--ds-gray-alpha-200)}.wf-menu-item{appearance:none;-webkit-appearance:none;border:none;display:flex;align-items:center;width:100%;height:40px;padding:0 8px;border-radius:6px;font-size:14px;color:var(--ds-gray-1000);background:transparent;cursor:pointer;transition:background 150ms}.wf-menu-item:hover{background:var(--ds-gray-alpha-100)}`;
+
+export interface MenuDropdownOption<T extends string = string> {
+  value: T;
+  label: string;
+}
+
+interface MenuDropdownProps<T extends string = string> {
+  options: MenuDropdownOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+}
+
+/**
+ * A dropdown menu that matches Geist's MenuButton (secondary) + Menu styling.
+ * Uses CSS classes with proper :hover specificity (no inline background).
+ */
+export function MenuDropdown<T extends string = string>({
+  options,
+  value,
+  onChange,
+}: MenuDropdownProps<T>) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const label =
+    options.find((o) => o.value === value)?.label ?? options[0]?.label ?? '';
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  return (
+    <div ref={ref} style={{ position: 'relative', flexShrink: 0 }}>
+      <style dangerouslySetInnerHTML={{ __html: STYLES }} />
+
+      <button
+        type="button"
+        className="wf-menu-btn"
+        onClick={() => setOpen(!open)}
+      >
+        <span>{label}</span>
+        <svg
+          width={16}
+          height={16}
+          viewBox="0 0 16 16"
+          fill="none"
+          style={{
+            marginLeft: 16,
+            marginRight: -4,
+            color: 'var(--ds-gray-900)',
+          }}
+        >
+          <path
+            d="M4.5 6L8 9.5L11.5 6"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          style={{
+            position: 'absolute',
+            right: 0,
+            top: '100%',
+            marginTop: 4,
+            minWidth: 140,
+            padding: 4,
+            borderRadius: 12,
+            background: 'var(--ds-background-100)',
+            boxShadow: 'var(--ds-shadow-menu, var(--ds-shadow-medium))',
+            zIndex: 2001,
+          }}
+          role="menu"
+        >
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              role="menuitem"
+              className="wf-menu-item"
+              style={{
+                fontWeight: option.value === value ? 500 : 400,
+              }}
+              onClick={() => {
+                onChange(option.value);
+                setOpen(false);
+              }}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/spinner.tsx

@@ -0,0 +1,76 @@
+const KEYFRAMES = `@keyframes wf-spinner-fade{0%{opacity:1}100%{opacity:.15}}`;
+
+/**
+ * Spinner matching Geist's multi-line fade spinner.
+ * At size ≤12: 8 lines, ≤16: 10 lines, else: 12 lines.
+ */
+export function Spinner({
+  size = 14,
+  color,
+}: {
+  size?: number;
+  color?: string;
+}) {
+  const config =
+    size <= 12
+      ? {
+          count: 8,
+          angle: 45,
+          delays: [-875, -750, -625, -500, -375, -250, -125, 0],
+          duration: 1000,
+          lineW: 3,
+          lineH: 1.5,
+        }
+      : size <= 16
+        ? {
+            count: 10,
+            angle: 36,
+            delays: [-900, -800, -700, -600, -500, -400, -300, -200, -100, 0],
+            duration: 1000,
+            lineW: 4,
+            lineH: 1.5,
+          }
+        : {
+            count: 12,
+            angle: 30,
+            delays: [
+              -1100, -1000, -900, -800, -700, -600, -500, -400, -300, -200,
+              -100, 0,
+            ],
+            duration: 1200,
+            lineW: size * 0.24,
+            lineH: size * 0.08,
+          };
+
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        position: 'relative',
+        width: size,
+        height: size,
+      }}
+    >
+      <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />
+      {config.delays.map((delay, i) => (
+        <span
+          key={delay}
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            width: config.lineW,
+            height: config.lineH,
+            marginLeft: -config.lineW / 2,
+            marginTop: -config.lineH / 2,
+            borderRadius: 1,
+            backgroundColor: color ?? 'var(--ds-gray-700)',
+            transform: `rotate(${i * config.angle}deg) translate(${size * 0.36}px)`,
+            animation: `wf-spinner-fade ${config.duration}ms linear infinite`,
+            animationDelay: `${delay}ms`,
+          }}
+        />
+      ))}
+    </span>
+  );
+}