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

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

@@ -53,6 +53,7 @@ export interface SelectedSpanInfo {
  */
 export function EntityDetailPanel({
   run,
+  hooks,
   onStreamClick,
   spanDetailData,
   spanDetailError,
@@ -64,6 +65,8 @@ export function EntityDetailPanel({
   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 +99,11 @@ export function EntityDetailPanel({
   const [stoppingSleep, setStoppingSleep] = useState(false);
   const [showResolveHookModal, setShowResolveHookModal] = useState(false);
   const [resolvingHook, setResolvingHook] = useState(false);
+  // Track hooks that were resolved in this session so the button hides
+  // immediately without waiting for the next event poll.
+  const [resolvedHookIds, setResolvedHookIds] = useState<Set<string>>(
+    new Set()
+  );
 
   const data = selectedSpan?.data;
   const rawEvents = selectedSpan?.rawEvents;
@@ -167,7 +175,11 @@ export function EntityDetailPanel({
   // Check if this hook can be resolved
   const canResolveHook = useMemo(() => {
     void rawEventsLength;
-    if (resource !== 'hook' || !rawEvents) return false;
+    if (resource !== 'hook' || !rawEvents || !resourceId) return false;
+
+    // Check if we already resolved this hook in this session
+    if (resolvedHookIds.has(resourceId)) return false;
+
     const terminalStates = ['completed', 'failed', 'cancelled'];
     if (terminalStates.includes(run.status)) return false;
     const hasHookDisposed = rawEvents.some(
@@ -175,17 +187,36 @@ export function EntityDetailPanel({
     );
     if (hasHookDisposed) return false;
     return true;
-  }, [resource, rawEvents, rawEventsLength, run.status]);
+  }, [
+    resource,
+    resourceId,
+    rawEvents,
+    rawEventsLength,
+    run.status,
+    resolvedHookIds,
+  ]);
 
   const error = spanDetailError ?? undefined;
   const loading = spanDetailLoading ?? false;
 
-  // Get the hook token for resolving
+  // Get the hook token for resolving (prefer fetched data, then hooks array fallback)
   const hookToken = useMemo(() => {
-    if (resource !== 'hook') return undefined;
-    const candidate = spanDetailData ?? data;
-    return isHook(candidate) ? candidate.token : undefined;
-  }, [resource, spanDetailData, data]);
+    if (resource !== 'hook' || !resourceId) return undefined;
+    // 1. Try the externally-fetched detail data first
+    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)
+    if (isHook(data) && (data as Hook).token) {
+      return (data as Hook).token;
+    }
+    return undefined;
+  }, [resource, resourceId, spanDetailData, data, hooks]);
 
   useEffect(() => {
     if (error && selectedSpan && resource) {
@@ -254,6 +285,10 @@ export function EntityDetailPanel({
           description: 'The payload has been sent and the hook resolved.',
         });
         setShowResolveHookModal(false);
+        // Mark this hook as resolved locally so the button hides immediately
+        if (resourceId) {
+          setResolvedHookIds((prev) => new Set(prev).add(resourceId));
+        }
       } catch (err) {
         console.error('Failed to resolve hook:', err);
         toast.error('Failed to resolve hook', {
@@ -271,34 +306,58 @@ export function EntityDetailPanel({
     return null;
   }
 
-  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;
+    const displayWorkflowName = displayRecord.workflowName;
+    if (typeof displayStepName === 'string') {
+      return displayStepName;
+    }
+    if (typeof displayWorkflowName === 'string') {
+      return displayWorkflowName;
+    }
+    if (typeof run.workflowName === 'string') {
+      return run.workflowName;
+    }
+    return undefined;
+  }, [displayData, run.workflowName]);
 
   return (
-    <div className={clsx('flex flex-col px-2')}>
+    <div
+      className={clsx('flex flex-col px-3')}
+      style={{ paddingTop: 12, gap: 16 }}
+    >
       {/* Wake up button for pending sleep calls */}
       {resource === 'sleep' && canWakeUp && (
-        <div className="mb-3 pb-3 border-b border-gray-200 dark:border-gray-700">
+        <div
+          className="mb-3 pb-3"
+          style={{ borderBottom: '1px solid var(--ds-gray-alpha-400)' }}
+        >
           <button
             type="button"
             onClick={handleWakeUp}
             disabled={stoppingSleep}
             className={clsx(
               'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md w-full',
-              'bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200',
-              'hover:bg-amber-200 dark:hover:bg-amber-900/50',
               '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'}
           </button>
-          <p className="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+          <p className="mt-1.5 text-xs" style={{ color: 'var(--ds-gray-900)' }}>
             Interrupt this sleep call and wake up the run.
           </p>
         </div>
@@ -306,23 +365,29 @@ export function EntityDetailPanel({
 
       {/* Resolve hook button for pending hooks */}
       {resource === 'hook' && canResolveHook && (
-        <div className="mb-3 pb-3 border-b border-gray-200 dark:border-gray-700">
+        <div
+          className="mb-3 pb-3"
+          style={{ borderBottom: '1px solid var(--ds-gray-alpha-400)' }}
+        >
           <button
             type="button"
             onClick={() => setShowResolveHookModal(true)}
             disabled={resolvingHook}
             className={clsx(
               'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md w-full',
-              'bg-primary text-primary-foreground hover:bg-primary/90',
               '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>
-          <p className="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+          <p className="mt-1.5 text-xs" style={{ color: 'var(--ds-gray-900)' }}>
             Send a JSON payload to resolve this hook.
           </p>
         </div>
@@ -339,6 +404,7 @@ export function EntityDetailPanel({
       {/* Content display */}
       <AttributePanel
         data={displayData}
+        moduleSpecifier={moduleSpecifier}
         expiredAt={run.expiredAt}
         isLoading={loading}
         error={error ?? undefined}

package/src/components/sidebar/events-list.tsx

@@ -2,9 +2,7 @@
 
 import type { Event } from '@workflow/world';
 import { useCallback, useMemo, useState } from 'react';
-import { ObjectInspector } from 'react-inspector';
-import { useDarkMode } from '../../hooks/use-dark-mode';
-import { inspectorThemeDark, inspectorThemeLight } from '../ui/inspector-theme';
+import { DataInspector } from '../ui/data-inspector';
 import { localMillisecondTime } from './attribute-panel';
 import { DetailCard } from './detail-card';
 
@@ -15,6 +13,8 @@ const DATA_EVENT_TYPES = new Set([
   'step_created',
   'step_completed',
   'step_failed',
+  'hook_created',
+  'hook_received',
   'run_created',
   'run_completed',
 ]);
@@ -32,7 +32,6 @@ function EventItem({
     eventId: string
   ) => Promise<unknown | null>;
 }) {
-  const isDark = useDarkMode();
   const [loadedData, setLoadedData] = useState<unknown | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
@@ -170,13 +169,7 @@ function EventItem({
           className="mt-2 overflow-x-auto rounded-md border p-3"
           style={{ borderColor: 'var(--ds-gray-300)' }}
         >
-          <ObjectInspector
-            data={displayData}
-            // @ts-expect-error react-inspector accepts theme objects at runtime
-            // see https://github.com/storybookjs/react-inspector/blob/main/README.md#theme
-            theme={isDark ? inspectorThemeDark : inspectorThemeLight}
-            expandLevel={2}
-          />
+          <DataInspector data={displayData} />
         </div>
       )}
     </DetailCard>

package/src/components/sidebar/resolve-hook-modal.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import clsx from 'clsx';
 import { Send, X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
@@ -17,6 +16,9 @@ interface ResolveHookModalProps {
 
 /**
  * Modal component for resolving a hook by entering a JSON payload.
+ *
+ * Styled to match the Geist design-system dialog component used in the
+ * Vercel dashboard so it looks native when rendered inside `front`.
  */
 export function ResolveHookModal({
   isOpen,
@@ -82,6 +84,15 @@ export function ResolveHookModal({
     [submitPayload]
   );
 
+  const isMacPlatform =
+    typeof navigator !== 'undefined' &&
+    (
+      (navigator as Navigator & { userAgentData?: { platform?: string } })
+        .userAgentData?.platform ?? navigator.userAgent
+    )
+      .toLowerCase()
+      .includes('mac');
+
   // Handle Cmd/Ctrl + Enter to submit
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -99,30 +110,60 @@ export function ResolveHookModal({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 50,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
       role="dialog"
       aria-modal="true"
       aria-labelledby="resolve-hook-modal-title"
     >
-      {/* Backdrop */}
+      {/* Backdrop — matches Geist dialog ::backdrop */}
       <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'rgba(0, 0, 0, 0.7)',
+        }}
         onClick={isSubmitting ? undefined : onClose}
       />
 
-      {/* Modal content */}
+      {/* Modal card — matches Geist dialog.geist-dialog */}
       <div
-        className={clsx(
-          'relative z-10 w-full max-w-lg mx-4',
-          'bg-background text-foreground rounded-lg shadow-xl',
-          'border border-border'
-        )}
+        style={{
+          position: 'relative',
+          zIndex: 10,
+          width: 480,
+          maxWidth: 'calc(100% - 32px)',
+          borderRadius: 12,
+          border: 'none',
+          boxShadow: 'var(--ds-shadow-menu)',
+          background: 'var(--ds-background-100)',
+          color: 'var(--ds-gray-1000)',
+          overflow: 'hidden',
+        }}
       >
         {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '16px 24px',
+          }}
+        >
           <h2
             id="resolve-hook-modal-title"
-            className="text-lg font-semibold text-foreground"
+            style={{
+              margin: 0,
+              fontSize: 16,
+              fontWeight: 600,
+              color: 'var(--ds-gray-1000)',
+            }}
           >
             Resolve Hook
           </h2>
@@ -130,30 +171,69 @@ export function ResolveHookModal({
             type="button"
             onClick={onClose}
             disabled={isSubmitting}
-            className={clsx(
-              'p-1 rounded-md transition-colors',
-              'text-muted-foreground hover:text-foreground',
-              'hover:bg-muted',
-              'disabled:opacity-50 disabled:cursor-not-allowed'
-            )}
             aria-label="Close modal"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: 4,
+              borderRadius: 6,
+              border: 'none',
+              background: 'transparent',
+              color: 'var(--ds-gray-900)',
+              cursor: isSubmitting ? 'not-allowed' : 'pointer',
+              opacity: isSubmitting ? 0.5 : 1,
+              transition: 'background 0.15s',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = 'var(--ds-gray-alpha-200)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = 'transparent';
+            }}
           >
-            <X className="h-5 w-5" />
+            <X style={{ width: 16, height: 16 }} />
           </button>
         </div>
 
         {/* Body */}
         <form onSubmit={handleSubmit}>
-          <div className="px-4 py-4">
+          <div style={{ padding: '0 24px 16px' }}>
             <label
               htmlFor="json-payload"
-              className="block text-sm font-medium text-foreground mb-2"
+              style={{
+                display: 'block',
+                fontSize: 14,
+                fontWeight: 500,
+                marginBottom: 6,
+                color: 'var(--ds-gray-1000)',
+              }}
             >
               JSON Payload
             </label>
-            <p className="text-xs text-muted-foreground mb-3">
+            <p
+              style={{
+                fontSize: 13,
+                marginBottom: 12,
+                marginTop: 0,
+                color: 'var(--ds-gray-900)',
+                lineHeight: 1.5,
+              }}
+            >
               Enter a JSON value to send to the hook. Leave empty to send{' '}
-              <code className="px-1 py-0.5 bg-muted rounded text-xs">null</code>
+              <code
+                style={{
+                  padding: '2px 6px',
+                  borderRadius: 4,
+                  fontSize: 12,
+                  fontFamily:
+                    'var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace)',
+                  background: 'var(--ds-gray-alpha-200)',
+                  color: 'var(--ds-gray-1000)',
+                }}
+              >
+                null
+              </code>
               .
             </p>
             <textarea
@@ -167,34 +247,97 @@ export function ResolveHookModal({
               onKeyDown={handleKeyDown}
               disabled={isSubmitting}
               placeholder='{"key": "value"}'
-              className={clsx(
-                'w-full h-40 px-3 py-2 font-mono text-sm',
-                'text-foreground',
-                'bg-background',
-                'border rounded-md',
-                'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background',
-                'disabled:opacity-50 disabled:cursor-not-allowed',
-                'placeholder:text-muted-foreground',
-                parseError ? 'border-destructive' : 'border-input'
-              )}
+              style={{
+                width: '100%',
+                height: 160,
+                padding: '8px 12px',
+                fontFamily:
+                  'var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace)',
+                fontSize: 13,
+                lineHeight: 1.5,
+                borderRadius: 8,
+                border: `1px solid ${parseError ? 'var(--ds-red-700)' : 'var(--ds-gray-alpha-400)'}`,
+                color: 'var(--ds-gray-1000)',
+                background: 'var(--ds-background-100)',
+                outline: 'none',
+                resize: 'none',
+                opacity: isSubmitting ? 0.5 : 1,
+                cursor: isSubmitting ? 'not-allowed' : 'text',
+                boxSizing: 'border-box',
+              }}
             />
             {parseError && (
-              <p className="mt-2 text-sm text-destructive">{parseError}</p>
+              <p
+                style={{
+                  marginTop: 8,
+                  fontSize: 13,
+                  color: 'var(--ds-red-900)',
+                  margin: '8px 0 0',
+                }}
+              >
+                {parseError}
+              </p>
             )}
+            <p
+              style={{
+                marginTop: 8,
+                fontSize: 12,
+                color: 'var(--ds-gray-800)',
+                margin: '8px 0 0',
+              }}
+            >
+              Press{' '}
+              <kbd
+                style={{
+                  padding: '2px 5px',
+                  borderRadius: 4,
+                  fontSize: 11,
+                  fontFamily:
+                    'var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace)',
+                  background: 'var(--ds-gray-alpha-200)',
+                  border: '1px solid var(--ds-gray-alpha-400)',
+                }}
+              >
+                {isMacPlatform ? '⌘' : 'Ctrl'}
+                +Enter
+              </kbd>{' '}
+              to submit
+            </p>
           </div>
 
           {/* Footer */}
-          <div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-border">
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              gap: 8,
+              padding: '12px 24px',
+              borderTop: '1px solid var(--ds-gray-alpha-400)',
+            }}
+          >
             <button
               type="button"
               onClick={onClose}
               disabled={isSubmitting}
-              className={clsx(
-                'px-4 py-2 text-sm font-medium rounded-md transition-colors',
-                'bg-secondary text-secondary-foreground',
-                'hover:bg-secondary/80',
-                'disabled:opacity-50 disabled:cursor-not-allowed'
-              )}
+              style={{
+                padding: '8px 16px',
+                fontSize: 14,
+                fontWeight: 500,
+                borderRadius: 8,
+                border: '1px solid var(--ds-gray-alpha-400)',
+                background: 'var(--ds-background-100)',
+                color: 'var(--ds-gray-1000)',
+                cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                opacity: isSubmitting ? 0.5 : 1,
+                transition: 'background 0.15s',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = 'var(--ds-gray-alpha-100)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'var(--ds-background-100)';
+              }}
             >
               Cancel
             </button>
@@ -202,13 +345,29 @@ export function ResolveHookModal({
               type="button"
               onClick={() => void submitPayload()}
               disabled={isSubmitting}
-              className={clsx(
-                'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md transition-colors',
-                'bg-primary text-primary-foreground hover:bg-primary/90',
-                'disabled:opacity-50 disabled:cursor-not-allowed'
-              )}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+                padding: '8px 16px',
+                fontSize: 14,
+                fontWeight: 500,
+                borderRadius: 8,
+                border: 'none',
+                background: 'var(--ds-gray-1000)',
+                color: 'var(--ds-background-100)',
+                cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                opacity: isSubmitting ? 0.5 : 1,
+                transition: 'opacity 0.15s',
+              }}
+              onMouseEnter={(e) => {
+                if (!isSubmitting) e.currentTarget.style.opacity = '0.9';
+              }}
+              onMouseLeave={(e) => {
+                if (!isSubmitting) e.currentTarget.style.opacity = '1';
+              }}
             >
-              <Send className="h-4 w-4" />
+              <Send style={{ width: 14, height: 14 }} />
               {isSubmitting ? 'Sending...' : 'Send Payload'}
             </button>
           </div>