@workflow/web-shared 4.1.0-beta.55 → 4.1.0-beta.57

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

@@ -156,20 +156,14 @@ export function EntityDetailPanel({
     if (resource !== 'sleep' || !rawEvents) return false;
     const terminalStates = ['completed', 'failed', 'cancelled'];
     if (terminalStates.includes(run.status)) return false;
+    const hasWaitCreated = rawEvents.some(
+      (e) => e.eventType === 'wait_created'
+    );
+    if (!hasWaitCreated) return false;
     const hasWaitCompleted = rawEvents.some(
       (e) => e.eventType === 'wait_completed'
     );
-    if (hasWaitCompleted) return false;
-    const waitCreatedEvent = rawEvents.find(
-      (e) => e.eventType === 'wait_created'
-    );
-    const eventData = (waitCreatedEvent as any)?.eventData as
-      | { resumeAt?: string | Date }
-      | undefined;
-    const resumeAt = eventData?.resumeAt;
-    if (!resumeAt) return false;
-    const resumeAtDate = new Date(resumeAt);
-    return resumeAtDate.getTime() > Date.now();
+    return !hasWaitCompleted;
   }, [resource, rawEvents, rawEventsLength, run.status]);
 
   // Check if this hook can be resolved
@@ -328,70 +322,146 @@ export function EntityDetailPanel({
     return undefined;
   }, [displayData, run.workflowName]);
 
+  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={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"
-          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',
-              '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" style={{ color: 'var(--ds-gray-900)' }}>
-            Interrupt this sleep call and wake up the run.
-          </p>
+    <div className="flex h-full flex-col">
+      <div
+        className="border-b px-3 py-3"
+        style={{ borderColor: 'var(--ds-gray-200)' }}
+      >
+        <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)',
+                }}
+              >
+                {runStateLabel}
+              </span>
+            </div>
+            <p
+              className="mt-1 truncate font-mono text-[13px]"
+              style={{ color: 'var(--ds-gray-700)' }}
+              title={resourceId}
+            >
+              {resourceId}
+            </p>
+          </div>
         </div>
-      )}
+      </div>
 
-      {/* Resolve hook button for pending hooks */}
-      {resource === 'hook' && canResolveHook && (
-        <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',
-              'disabled:opacity-50 disabled:cursor-not-allowed',
-              'transition-colors',
-              resolvingHook ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
-            )}
+      <div className="flex-1 overflow-y-auto px-3 pt-3 pb-8">
+        {hasPendingActions && (
+          <div
+            className="mb-4 rounded-lg border p-2"
             style={{
-              background: 'var(--ds-gray-1000)',
-              color: 'var(--ds-background-100)',
+              borderColor: 'var(--ds-gray-300)',
+              backgroundColor: 'var(--ds-gray-100)',
             }}
           >
-            <Send className="h-4 w-4" />
-            Resolve Hook
-          </button>
-          <p className="mt-1.5 text-xs" style={{ color: 'var(--ds-gray-900)' }}>
-            Send a JSON payload to resolve this hook.
-          </p>
+            <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}
+            />
+          </section>
+
+          {resource !== 'run' && rawEvents && (
+            <section>
+              <EventsList
+                events={rawEvents}
+                onLoadEventData={onLoadEventData}
+              />
+            </section>
+          )}
         </div>
-      )}
+      </div>
 
       {/* Resolve Hook Modal */}
       <ResolveHookModal
@@ -400,19 +470,6 @@ export function EntityDetailPanel({
         onSubmit={handleResolveHook}
         isSubmitting={resolvingHook}
       />
-
-      {/* Content display */}
-      <AttributePanel
-        data={displayData}
-        moduleSpecifier={moduleSpecifier}
-        expiredAt={run.expiredAt}
-        isLoading={loading}
-        error={error ?? undefined}
-        onStreamClick={onStreamClick}
-      />
-      {resource !== 'run' && rawEvents && (
-        <EventsList events={rawEvents} onLoadEventData={onLoadEventData} />
-      )}
     </div>
   );
 }

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

@@ -2,10 +2,20 @@
 
 import type { Event } from '@workflow/world';
 import { useCallback, useMemo, useState } from 'react';
-import { DataInspector } from '../ui/data-inspector';
+import {
+  ErrorStackBlock,
+  isStructuredErrorWithStack,
+} from '../ui/error-stack-block';
+import { Skeleton } from '../ui/skeleton';
 import { localMillisecondTime } from './attribute-panel';
+import { CopyableDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
 
+/**
+ * Event types whose eventData contains an error field with a StructuredError.
+ */
+const ERROR_EVENT_TYPES = new Set(['step_failed', 'step_retrying']);
+
 /**
  * Event types that carry user-serialized data in their eventData field.
  */
@@ -69,6 +79,7 @@ function EventItem({
 
   return (
     <DetailCard
+      summaryClassName="text-base py-2"
       summary={
         <>
           <span
@@ -100,36 +111,35 @@ function EventItem({
         }}
       >
         <div
-          className="flex items-center justify-between px-2.5 py-1.5"
+          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-[11px] font-medium"
-            style={{ color: 'var(--ds-gray-700)' }}
-          >
+          <span className="text-[14px]" style={{ color: 'var(--ds-gray-700)' }}>
             eventId
           </span>
           <span
-            className="text-[11px] font-mono"
+            className="max-w-[70%] truncate text-right text-[13px] font-mono"
             style={{ color: 'var(--ds-gray-1000)' }}
+            title={event.eventId}
           >
             {event.eventId}
           </span>
         </div>
         {event.correlationId && (
           <div
-            className="flex items-center justify-between px-2.5 py-1.5"
+            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-[11px] font-medium"
+              className="text-[14px]"
               style={{ color: 'var(--ds-gray-700)' }}
             >
               correlationId
             </span>
             <span
-              className="text-[11px] font-mono"
+              className="max-w-[70%] truncate text-right text-[13px] font-mono"
               style={{ color: 'var(--ds-gray-1000)' }}
+              title={event.correlationId}
             >
               {event.correlationId}
             </span>
@@ -140,20 +150,21 @@ function EventItem({
       {/* Loading state */}
       {isLoading && (
         <div
-          className="mt-2 text-xs rounded-md border p-2"
+          className="mt-2 rounded-md border p-3"
           style={{
             borderColor: 'var(--ds-gray-300)',
-            color: 'var(--ds-gray-600)',
           }}
         >
-          Loading event data...
+          <Skeleton className="h-4 w-[35%]" />
+          <Skeleton className="mt-2 h-4 w-[90%]" />
+          <Skeleton className="mt-2 h-4 w-[75%]" />
         </div>
       )}
 
       {/* Error state */}
       {loadError && (
         <div
-          className="mt-2 text-xs rounded-md border p-2"
+          className="mt-2 rounded-md border p-2 text-sm"
           style={{
             borderColor: 'var(--ds-red-300)',
             color: 'var(--ds-red-700)',
@@ -165,17 +176,51 @@ function EventItem({
 
       {/* Event data */}
       {displayData != null && (
-        <div
-          className="mt-2 overflow-x-auto rounded-md border p-3"
-          style={{ borderColor: 'var(--ds-gray-300)' }}
-        >
-          <DataInspector data={displayData} />
+        <div className="mt-2">
+          <EventDataBlock eventType={event.eventType} data={displayData} />
         </div>
       )}
     </DetailCard>
   );
 }
 
+/**
+ * Renders event data, using ErrorStackBlock for error events that contain
+ * a structured error with a stack trace, and CopyableDataBlock otherwise.
+ */
+function EventDataBlock({
+  eventType,
+  data,
+}: {
+  eventType: string;
+  data: unknown;
+}) {
+  // For error events (step_failed, step_retrying), the eventData has the shape
+  // { error: StructuredError, stack?: string, ... }. Check both the top-level
+  // value and the nested `error` field for a stack trace.
+  if (
+    ERROR_EVENT_TYPES.has(eventType) &&
+    data != null &&
+    typeof data === 'object'
+  ) {
+    const record = data as Record<string, unknown>;
+
+    // Check the nested `error` field first (the StructuredError)
+    if (isStructuredErrorWithStack(record.error)) {
+      return <ErrorStackBlock value={record.error} />;
+    }
+
+    // Some error formats put the stack at the top level of eventData
+    if (isStructuredErrorWithStack(record)) {
+      return <ErrorStackBlock value={record} />;
+    }
+  }
+
+  // For non-error events or errors without a stack, fall back to the
+  // generic JSON viewer.
+  return <CopyableDataBlock data={data} />;
+}
+
 export function EventsList({
   events,
   isLoading = false,
@@ -208,12 +253,18 @@ export function EventsList({
       >
         Events {!isLoading && `(${sortedEvents.length})`}
       </h3>
-      {isLoading ? <div>Loading events...</div> : null}
+      {isLoading ? (
+        <div className="flex flex-col gap-3">
+          <Skeleton className="h-[48px] w-full rounded-lg border" />
+          <Skeleton className="h-[48px] w-full rounded-lg border" />
+          <Skeleton className="h-[48px] w-full rounded-lg border" />
+        </div>
+      ) : null}
       {!isLoading && !error && sortedEvents.length === 0 && (
         <div className="text-sm">No events found</div>
       )}
       {sortedEvents.length > 0 && !error ? (
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-4">
           {sortedEvents.map((event) => (
             <EventItem
               key={event.eventId}

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

@@ -0,0 +1,80 @@
+'use client';
+
+import { Copy } from 'lucide-react';
+import { toast } from 'sonner';
+
+/**
+ * Check whether `value` looks like a structured error object with a `stack`
+ * field that we can render as pre-formatted text.
+ */
+export function isStructuredErrorWithStack(
+  value: unknown
+): value is Record<string, unknown> & { stack: string } {
+  return (
+    value != null &&
+    typeof value === 'object' &&
+    'stack' in value &&
+    typeof (value as Record<string, unknown>).stack === 'string'
+  );
+}
+
+/**
+ * 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.
+ */
+export function ErrorStackBlock({
+  value,
+}: {
+  value: Record<string, unknown> & { stack: string };
+}) {
+  const stack = value.stack;
+  const message = typeof value.message === 'string' ? value.message : undefined;
+  const copyText = message ? `${message}\n\n${stack}` : stack;
+
+  return (
+    <div
+      className="relative overflow-x-auto rounded-md border p-3 pt-9"
+      style={{ borderColor: 'var(--ds-gray-300)' }}
+    >
+      <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)' }}
+        onClick={() => {
+          navigator.clipboard
+            .writeText(copyText)
+            .then(() => {
+              toast.success('Copied to clipboard');
+            })
+            .catch(() => {
+              toast.error('Failed to copy');
+            });
+        }}
+      >
+        <Copy size={12} />
+      </button>
+
+      {message && (
+        <p
+          className="pb-2 mb-2 text-xs font-semibold font-mono"
+          style={{
+            color: 'var(--ds-red-900)',
+            borderBottom: '1px solid var(--ds-gray-300)',
+          }}
+        >
+          {message}
+        </p>
+      )}
+      <pre
+        className="text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0"
+        style={{ color: 'var(--ds-gray-1000)' }}
+      >
+        {stack}
+      </pre>
+    </div>
+  );
+}