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

package/src/components/index.ts

@@ -22,4 +22,5 @@ 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 { MenuDropdown, type MenuDropdownOption } from './ui/menu-dropdown';
 export { WorkflowTraceViewer } from './workflow-trace-view';

package/src/components/run-trace-view.tsx

@@ -7,8 +7,6 @@ import { WorkflowTraceViewer } from './workflow-trace-view';
 
 interface RunTraceViewProps {
   run: WorkflowRun;
-  steps: Step[];
-  hooks: Hook[];
   events: Event[];
   isLoading?: boolean;
   error?: Error | null;
@@ -34,8 +32,6 @@ interface RunTraceViewProps {
 
 export function RunTraceView({
   run,
-  steps,
-  hooks,
   events,
   isLoading,
   error,
@@ -65,9 +61,7 @@ export function RunTraceView({
     <div className="w-full h-full relative">
       <WorkflowTraceViewer
         error={error}
-        steps={steps}
         events={events}
-        hooks={hooks}
         run={run}
         isLoading={isLoading}
         spanDetailData={spanDetailData}

package/src/components/sidebar/attribute-panel.tsx

@@ -215,7 +215,10 @@ type AttributeKey =
   | 'eventData'
   | 'resumeAt'
   | 'expiredAt'
-  | 'workflowCoreVersion';
+  | 'workflowCoreVersion'
+  | 'receivedCount'
+  | 'lastReceivedAt'
+  | 'disposedAt';
 
 const attributeOrder: AttributeKey[] = [
   'workflowName',
@@ -228,6 +231,9 @@ const attributeOrder: AttributeKey[] = [
   'runId',
   'attempt',
   'token',
+  'receivedCount',
+  'lastReceivedAt',
+  'disposedAt',
   'correlationId',
   'eventType',
   'deploymentId',
@@ -262,6 +268,7 @@ const sortByAttributeOrder = (a: string, b: string): number => {
  */
 const attributeDisplayNames: Partial<Record<AttributeKey, string>> = {
   workflowCoreVersion: '@workflow/core version',
+  receivedCount: 'times resolved',
 };
 
 /**
@@ -353,6 +360,9 @@ const attributeToDisplayFn: Record<
   // Hook details
   token: (value: unknown) => String(value),
   isWebhook: (value: unknown) => String(value),
+  receivedCount: (value: unknown) => String(value),
+  lastReceivedAt: localMillisecondTimeOrNull,
+  disposedAt: localMillisecondTimeOrNull,
   // Event details
   eventType: (value: unknown) => String(value),
   correlationId: (value: unknown) => String(value),
@@ -773,13 +783,18 @@ export const AttributePanel = ({
                 typeof displayValue === 'string'
                   ? displayValue
                   : String(displayValue ?? displayData.moduleSpecifier ?? '');
+              const shouldCapitalizeLabel = attribute !== 'workflowCoreVersion';
               const showDivider = index < orderedBasicAttributes.length - 1;
 
               return (
                 <div key={attribute} className="py-1">
                   <div className="flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1">
                     <span
-                      className="text-[14px] first-letter:uppercase"
+                      className={
+                        shouldCapitalizeLabel
+                          ? 'text-[14px] first-letter:uppercase'
+                          : 'text-[14px]'
+                      }
                       style={{ color: 'var(--ds-gray-700)' }}
                     >
                       {getAttributeDisplayName(attribute)}

package/src/components/sidebar/detail-card.tsx

@@ -1,3 +1,4 @@
+import { ChevronRight } from 'lucide-react';
 import type { ReactNode } from 'react';
 
 export function DetailCard({
@@ -42,14 +43,21 @@ export function DetailCard({
       onToggle={(e) => onToggle?.((e.target as HTMLDetailsElement).open)}
     >
       <summary
-        className={`cursor-pointer rounded-md border px-2.5 py-1.5 text-xs hover:brightness-95 ${summaryClassName ?? ''}`}
+        className={`cursor-pointer rounded-md border px-2.5 py-1.5 text-xs hover:brightness-95 [&::-webkit-details-marker]:hidden ${summaryClassName ?? ''}`}
         style={{
           borderColor: 'var(--ds-gray-300)',
           backgroundColor: 'var(--ds-gray-100)',
           color: 'var(--ds-gray-900)',
+          listStyle: 'none',
         }}
       >
-        {summary}
+        <span className="flex items-center gap-1.5">
+          <ChevronRight
+            size={14}
+            className="shrink-0 transition-transform group-open:rotate-90"
+          />
+          {summary}
+        </span>
       </summary>
       {/* Expanded content with connecting line */}
       <div className={`relative pl-6 mt-3 ${contentClassName ?? ''}`}>

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

@@ -2,9 +2,10 @@
 
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
-import { Send, Zap } from 'lucide-react';
+import { Lock, Send, Unlock, Zap } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
+import { isEncryptedMarker } from '../../lib/hydration';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
@@ -53,7 +54,6 @@ export interface SelectedSpanInfo {
  */
 export function EntityDetailPanel({
   run,
-  hooks,
   onStreamClick,
   spanDetailData,
   spanDetailError,
@@ -63,11 +63,10 @@ export function EntityDetailPanel({
   onLoadEventData,
   onResolveHook,
   encryptionKey,
+  onDecrypt,
   selectedSpan,
 }: {
   run: WorkflowRun;
-  /** All hooks for the current run (used as fallback for token lookup). */
-  hooks?: Hook[];
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
   /** Pre-fetched span detail data for the selected span. */
@@ -96,6 +95,8 @@ export function EntityDetailPanel({
   ) => Promise<void>;
   /** Encryption key (available after Decrypt is clicked), used to re-load event data */
   encryptionKey?: Uint8Array;
+  /** Callback to initiate decryption of encrypted run data */
+  onDecrypt?: () => void;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
 }): React.JSX.Element | null {
@@ -129,10 +130,11 @@ export function EntityDetailPanel({
       return { resource: 'hook', resourceId: data.hookId, runId: undefined };
     }
     if (res === 'sleep') {
+      const waitData = data as { runId?: string } | undefined;
       return {
         resource: 'sleep',
         resourceId: selectedSpan.spanId,
-        runId: undefined,
+        runId: waitData?.runId,
       };
     }
     return { resource: undefined, resourceId: undefined, runId: undefined };
@@ -196,6 +198,17 @@ 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;
@@ -203,17 +216,12 @@ export function EntityDetailPanel({
     if (isHook(spanDetailData) && spanDetailData.token) {
       return spanDetailData.token;
     }
-    // 2. Try the hooks array (always has tokens)
-    const hookFromArray = hooks?.find((h) => h.hookId === resourceId);
-    if (hookFromArray?.token) {
-      return hookFromArray.token;
-    }
-    // 3. Try the span's inline data (partial hook from events - may lack token)
+    // 2. Try the span's inline data (reconstructed from hook_created event)
     if (isHook(data) && (data as Hook).token) {
       return (data as Hook).token;
     }
     return undefined;
-  }, [resource, resourceId, spanDetailData, data, hooks]);
+  }, [resource, resourceId, spanDetailData, data]);
 
   useEffect(() => {
     if (error && selectedSpan && resource) {
@@ -299,16 +307,15 @@ export function EntityDetailPanel({
     [onResolveHook, hookToken, resolvingHook, spanDetailData, data]
   );
 
-  if (!selectedSpan || !resource || !resourceId) {
-    return null;
-  }
+  // Prefer externally-fetched details when available. For sleep spans, the
+  // host fetches full correlated events (withData=true) and materializes a wait
+  // entity, so this includes resumeAt/completedAt without bloating trace payloads.
+  const displayData = (spanDetailData ?? data) as
+    | WorkflowRun
+    | Step
+    | Hook
+    | Event;
 
-  // For sleep spans, spanDetailData from the host is typically an events array
-  // (not a single entity), so always prefer the inline wait entity from span
-  // attributes which contains waitId, runId, createdAt, resumeAt, completedAt.
-  const displayData = (
-    resource === 'sleep' ? data : (spanDetailData ?? data)
-  ) as WorkflowRun | Step | Hook | Event;
   const moduleSpecifier = useMemo(() => {
     const displayRecord = displayData as Record<string, unknown>;
     const displayStepName = displayRecord.stepName;
@@ -325,6 +332,10 @@ export function EntityDetailPanel({
     return undefined;
   }, [displayData, run.workflowName]);
 
+  if (!selectedSpan || !resource || !resourceId) {
+    return null;
+  }
+
   const resourceLabel = resource.charAt(0).toUpperCase() + resource.slice(1);
   const hasPendingActions =
     (resource === 'sleep' && canWakeUp) ||
@@ -369,6 +380,33 @@ export function EntityDetailPanel({
               {resourceId}
             </p>
           </div>
+          {(hasEncryptedFields || encryptionKey) && onDecrypt && (
+            <button
+              type="button"
+              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/trace-viewer/trace-viewer.tsx

@@ -103,7 +103,16 @@ export function TraceViewerTimeline({
   highlightedSpans,
   eagerRender = false,
   isLive = false,
-}: Omit<TraceViewerProps, 'getQuickLinks'>): ReactNode {
+  footer,
+  knownDurationMs,
+  hasMoreData = false,
+}: Omit<TraceViewerProps, 'getQuickLinks'> & {
+  footer?: ReactNode;
+  /** Duration in ms from trace start to the latest known event. Used to render the unknown-time overlay. */
+  knownDurationMs?: number;
+  /** Whether more data pages are expected. Controls the unknown-data overlay visibility. */
+  hasMoreData?: boolean;
+}): ReactNode {
   const isSkeleton = trace === skeletonTrace;
   const { state, dispatch } = useTraceViewer();
   const { timelineRef, scrollSnapshotRef } = state;
@@ -450,7 +459,7 @@ export function TraceViewerTimeline({
             style={{
               position: 'relative',
               width: state.timelineWidth,
-              height: state.timelineHeight - TIMELINE_PADDING * 2,
+              minHeight: state.timelineHeight - TIMELINE_PADDING * 2,
               padding: TIMELINE_PADDING,
               paddingBottom: 0,
             }}
@@ -487,8 +496,44 @@ export function TraceViewerTimeline({
                 scrollSnapshotRef={scrollSnapshotRef}
                 spans={spans}
               />
+              {/* Horizontal "unknown time" overlay — covers the region to the
+                  right of the latest known event, indicating data beyond this
+                  point hasn't been loaded yet. */}
+              {knownDurationMs != null &&
+                knownDurationMs > 0 &&
+                (hasMoreData || isLive) &&
+                state.root.duration > 0 &&
+                (() => {
+                  const knownPx = knownDurationMs * scale;
+                  const totalPx = state.root.duration * scale;
+                  const unknownWidth = totalPx - knownPx;
+                  // Only show if the unknown region is meaningfully wide
+                  if (unknownWidth < 4) return null;
+                  // Offset ~5% into the unknown region so it doesn't touch spans
+                  const insetPx = Math.min(unknownWidth * 0.05, 20);
+                  return (
+                    <div
+                      style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: knownPx + insetPx,
+                        width: unknownWidth - insetPx,
+                        height: '100%',
+                        pointerEvents: 'none',
+                        zIndex: 1,
+                        maskImage:
+                          'linear-gradient(to right, transparent 1%, black 3%)',
+                        WebkitMaskImage:
+                          'linear-gradient(to right, transparent 1%, black 3%)',
+                        background:
+                          'repeating-linear-gradient(-45deg, var(--ds-background-200) 0, var(--ds-background-200) 11px, var(--ds-gray-200) 11px, var(--ds-gray-200) 12px)',
+                      }}
+                    />
+                  );
+                })()}
             </div>
           </div>
+          {footer}
         </div>
         <div className={styles.zoomButtonTraceViewer}>
           <ZoomButton />

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/menu-dropdown.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+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>{`
+        .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)}
+      `}</style>
+
+      <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>
+  );
+}