@workflow/web-shared 5.0.0-beta.1 → 5.0.0-beta.3

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

@@ -5,17 +5,22 @@ import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import type { ModelMessage } from 'ai';
 import { Lock } from 'lucide-react';
 import type { KeyboardEvent, ReactNode } from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
 import { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
-import { StreamClickContext } from '../ui/data-inspector';
+import {
+  DecryptClickContext,
+  RunClickContext,
+  StreamClickContext,
+} from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
 import {
   ErrorStackBlock,
   isStructuredErrorWithStack,
 } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
+import { Spinner } from '../ui/spinner';
 import { TimestampTooltip } from '../ui/timestamp-tooltip';
 import { ConversationView } from './conversation-view';
 import { CopyableDataBlock } from './copyable-data-block';
@@ -180,9 +185,36 @@ function ConversationWithTabs({
  * with the lucide Lock icon matching the title bar Decrypt button.
  */
 function EncryptedFieldBlock() {
+  const ctx = useContext(DecryptClickContext);
+  if (ctx) {
+    return (
+      <button
+        type="button"
+        onClick={ctx.onDecrypt}
+        disabled={ctx.isDecrypting}
+        className="flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs cursor-pointer transition-colors"
+        style={{
+          borderColor: 'var(--ds-gray-400)',
+          backgroundColor: 'var(--ds-gray-100)',
+          color: 'var(--ds-gray-700)',
+          opacity: ctx.isDecrypting ? 0.6 : 1,
+        }}
+        title="Click to decrypt"
+      >
+        {ctx.isDecrypting ? (
+          <Spinner size={12} />
+        ) : (
+          <Lock className="h-3 w-3" />
+        )}
+        <span className="font-medium">
+          {ctx.isDecrypting ? 'Decrypting…' : 'Decrypt'}
+        </span>
+      </button>
+    );
+  }
   return (
     <div
-      className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs"
+      className="flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs"
       style={{
         borderColor: 'var(--ds-gray-300)',
         backgroundColor: 'var(--ds-gray-100)',
@@ -286,8 +318,29 @@ const sortByAttributeOrder = (a: string, b: string): number => {
  * Display names for attributes that should render differently from their key.
  */
 const attributeDisplayNames: Partial<Record<AttributeKey, string>> = {
+  moduleSpecifier: 'Module',
+  workflowName: 'Workflow Name',
+  stepName: 'Step Name',
+  stepId: 'Step ID',
+  hookId: 'Hook ID',
+  attempt: 'Attempts',
+  eventId: 'Event ID',
+  runId: 'Run ID',
+  eventType: 'Event Type',
+  correlationId: 'Correlation ID',
+  deploymentId: 'Deployment ID',
+  specVersion: 'Spec Version',
   workflowCoreVersion: '@workflow/core version',
-  receivedCount: 'times resolved',
+  createdAt: 'Created',
+  startedAt: 'Started',
+  updatedAt: 'Updated',
+  completedAt: 'Completed',
+  expiredAt: 'Expired',
+  retryAfter: 'Retry After',
+  resumeAt: 'Resume',
+  lastReceivedAt: 'Last Received',
+  disposedAt: 'Disposed',
+  receivedCount: 'Times Resolved',
 };
 
 /**
@@ -374,17 +427,16 @@ const attributeToDisplayFn: Record<
   (value: unknown, context?: DisplayContext) => null | string | ReactNode
 > = {
   // Names that need pretty-printing
-  workflowName: (value: unknown) =>
-    parseWorkflowName(String(value))?.shortName ?? '?',
+  workflowName: (_value: unknown) => null,
   moduleSpecifier: (value: unknown) => getModuleSpecifierFromName(value),
-  stepName: (value: unknown) => parseStepName(String(value))?.shortName ?? '?',
+  stepName: (_value: unknown) => null,
   // IDs
-  runId: (value: unknown) => String(value),
-  stepId: (value: unknown) => String(value),
+  runId: (_value: unknown) => null,
+  stepId: (_value: unknown) => null,
   hookId: (value: unknown) => String(value),
   eventId: (value: unknown) => String(value),
   // Run/step details
-  status: (value: unknown) => String(value),
+  status: (_value: unknown) => null,
   attempt: (value: unknown) => String(value),
   // Hook details
   token: (value: unknown) => String(value),
@@ -407,9 +459,9 @@ const attributeToDisplayFn: Record<
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
   createdAt: timestampWithTooltipOrNull,
   startedAt: timestampWithTooltipOrNull,
-  updatedAt: timestampWithTooltipOrNull,
+  updatedAt: (_value: unknown) => null,
   completedAt: timestampWithTooltipOrNull,
-  expiredAt: timestampWithTooltipOrNull,
+  expiredAt: (_value: unknown) => null,
   retryAfter: timestampWithTooltipOrNull,
   resumeAt: timestampWithTooltipOrNull,
   // Resolved attributes, won't actually use this function
@@ -463,7 +515,7 @@ const attributeToDisplayFn: Record<
           <DetailCard
             summary="Input (no data)"
             disabled
-            summaryClassName="text-base py-2"
+            summaryClassName="text-label-14 font-medium py-2"
           />
         );
       }
@@ -472,7 +524,7 @@ const attributeToDisplayFn: Record<
         <>
           <DetailCard
             summary={`Input (${argCount} ${argLabel})`}
-            summaryClassName="text-base py-2"
+            summaryClassName="text-label-14 font-medium py-2"
             contentClassName="mt-0"
           >
             {Array.isArray(args)
@@ -503,14 +555,14 @@ const attributeToDisplayFn: Record<
         <DetailCard
           summary="Input (no data)"
           disabled
-          summaryClassName="text-base py-2"
+          summaryClassName="text-label-14 font-medium py-2"
         />
       );
     }
     return (
       <DetailCard
         summary={`Input (${argCount} ${argLabel})`}
-        summaryClassName="text-base py-2"
+        summaryClassName="text-label-14 font-medium py-2"
         contentClassName="mt-0"
       >
         {Array.isArray(value)
@@ -530,7 +582,7 @@ const attributeToDisplayFn: Record<
     return (
       <DetailCard
         summary="Output"
-        summaryClassName="text-base py-2"
+        summaryClassName="text-label-14 font-medium py-2"
         contentClassName="mt-0"
       >
         {JsonBlock(value)}
@@ -548,7 +600,7 @@ const attributeToDisplayFn: Record<
       return (
         <DetailCard
           summary="Error"
-          summaryClassName="text-base py-2"
+          summaryClassName="text-label-14 font-medium py-2"
           contentClassName="mt-0"
         >
           <ErrorStackBlock value={value} />
@@ -559,7 +611,7 @@ const attributeToDisplayFn: Record<
     return (
       <DetailCard
         summary="Error"
-        summaryClassName="text-base py-2"
+        summaryClassName="text-label-14 font-medium py-2"
         contentClassName="mt-0"
       >
         {JsonBlock(value)}
@@ -609,18 +661,13 @@ export const AttributeBlock = ({
   context?: DisplayContext;
 }) => {
   const isExpandableLoadingTarget =
-    attribute === 'input' ||
-    attribute === 'output' ||
-    attribute === 'eventData';
+    attribute === 'input' || attribute === 'eventData';
   if (isLoading && isExpandableLoadingTarget && !hasDisplayContent(value)) {
     return (
       <div
-        className={`my-2 flex flex-col ${attribute === 'input' || attribute === 'output' ? 'gap-2 my-3.5' : 'gap-0'}`}
+        className={`my-2 flex flex-col ${attribute === 'input' ? 'gap-2 my-3.5' : 'gap-0'}`}
       >
-        <span
-          className={`${attribute === 'input' || attribute === 'output' ? 'text-base' : 'text-xs'} font-medium first-letter:uppercase`}
-          style={{ color: 'var(--ds-gray-700)' }}
-        >
+        <span className="text-label-14 text-gray-1000 font-medium first-letter:uppercase">
           {attribute}
         </span>
         <Skeleton className="h-9 w-full rounded-md" />
@@ -668,10 +715,7 @@ export const AttributeBlock = ({
         key={attribute}
         className={`my-2 flex flex-col ${attribute === 'input' || attribute === 'output' || attribute === 'error' ? 'gap-2 my-3.5' : 'gap-0'}`}
       >
-        <span
-          className={`${attribute === 'input' || attribute === 'output' || attribute === 'error' ? 'text-base' : 'text-xs'} font-medium first-letter:uppercase`}
-          style={{ color: 'var(--ds-gray-700)' }}
-        >
+        <span className="text-label-14 text-gray-1000 font-medium first-letter:uppercase">
           {attribute}
         </span>
         <span className="text-xs" style={{ color: 'var(--ds-gray-1000)' }}>
@@ -689,6 +733,9 @@ export const AttributePanel = ({
   error,
   expiredAt,
   onStreamClick,
+  onRunClick,
+  onDecrypt,
+  isDecrypting = false,
   resource,
 }: {
   data: Record<string, unknown>;
@@ -698,6 +745,12 @@ export const AttributePanel = ({
   expiredAt?: string | Date;
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
+  /** Callback when a run reference is clicked */
+  onRunClick?: (runId: string) => void;
+  /** Callback when an encrypted marker is clicked (triggers decryption) */
+  onDecrypt?: () => void;
+  /** Whether decryption is currently in progress */
+  isDecrypting?: boolean;
   /** Resource type of the selected span — used to show targeted loading skeletons. */
   resource?: string;
 }) => {
@@ -731,9 +784,9 @@ export const AttributePanel = ({
 
     if (!isLoading) return present;
 
-    // During loading, ensure input/output appear so their skeletons render
+    // During loading, ensure input appears so its skeleton renders
     // in the correct position (above the events section).
-    const loadingDefaults = ['input', 'output'];
+    const loadingDefaults = ['input'];
     for (const key of loadingDefaults) {
       if (!present.includes(key)) {
         present.push(key);
@@ -797,117 +850,126 @@ export const AttributePanel = ({
   }, []);
 
   return (
-    <StreamClickContext.Provider value={onStreamClick}>
-      <div>
-        {/* Basic attributes in a vertical layout with border */}
-        {visibleBasicAttributes.length > 0 && (
-          <div
-            className="mb-3 flex flex-col overflow-hidden rounded-lg border"
-            style={{
-              borderColor: 'var(--ds-gray-300)',
-            }}
-          >
-            {orderedBasicAttributes.map((attribute, index) => {
-              const displayValue = attributeToDisplayFn[
-                attribute as keyof typeof attributeToDisplayFn
-              ]?.(displayData[attribute as keyof typeof displayData]);
-              const isModuleSpecifier = attribute === 'moduleSpecifier';
-              const moduleSpecifierValue =
-                typeof displayValue === 'string'
-                  ? displayValue
-                  : String(displayValue ?? displayData.moduleSpecifier ?? '');
-              const shouldCapitalizeLabel = attribute !== 'workflowCoreVersion';
-              const showResumeAtSkeleton =
-                isLoading && resource === 'sleep' && !displayData.resumeAt;
-              const showDivider =
-                index < orderedBasicAttributes.length - 1 ||
-                showResumeAtSkeleton;
-
-              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={
-                        shouldCapitalizeLabel
-                          ? 'text-[14px] first-letter:uppercase'
-                          : 'text-[14px]'
-                      }
-                      style={{ color: 'var(--ds-gray-700)' }}
-                    >
-                      {getAttributeDisplayName(attribute)}
-                    </span>
-                    {isModuleSpecifier ? (
-                      <button
-                        type="button"
-                        className="min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono"
-                        style={{
-                          color: 'var(--ds-gray-1000)',
-                          background: 'transparent',
-                          border: 'none',
-                          padding: 0,
-                        }}
-                        title={moduleSpecifierValue}
-                        onClick={() =>
-                          handleCopyModuleSpecifier(moduleSpecifierValue)
-                        }
-                      >
-                        {moduleSpecifierValue}
-                      </button>
-                    ) : (
+    <RunClickContext.Provider value={onRunClick}>
+      <StreamClickContext.Provider value={onStreamClick}>
+        <DecryptClickContext.Provider
+          value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
+        >
+          <div>
+            {/* Basic attributes in a vertical layout with border */}
+            {visibleBasicAttributes.length > 0 && (
+              <div
+                className="mb-3 flex flex-col overflow-hidden rounded-md border"
+                style={{
+                  borderColor: 'var(--ds-gray-300)',
+                }}
+              >
+                {orderedBasicAttributes.map((attribute, index) => {
+                  const displayValue = attributeToDisplayFn[
+                    attribute as keyof typeof attributeToDisplayFn
+                  ]?.(displayData[attribute as keyof typeof displayData]);
+                  const isModuleSpecifier = attribute === 'moduleSpecifier';
+                  const moduleSpecifierValue =
+                    typeof displayValue === 'string'
+                      ? displayValue
+                      : String(
+                          displayValue ?? displayData.moduleSpecifier ?? ''
+                        );
+                  const shouldCapitalizeLabel =
+                    attribute !== 'workflowCoreVersion';
+                  const showResumeAtSkeleton =
+                    isLoading && resource === 'sleep' && !displayData.resumeAt;
+                  const showDivider =
+                    index < orderedBasicAttributes.length - 1 ||
+                    showResumeAtSkeleton;
+
+                  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={
+                            shouldCapitalizeLabel
+                              ? 'text-[14px] first-letter:uppercase'
+                              : 'text-[14px]'
+                          }
+                          style={{ color: 'var(--ds-gray-700)' }}
+                        >
+                          {getAttributeDisplayName(attribute)}
+                        </span>
+                        {isModuleSpecifier ? (
+                          <button
+                            type="button"
+                            className="min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono"
+                            style={{
+                              color: 'var(--ds-gray-1000)',
+                              background: 'transparent',
+                              border: 'none',
+                              padding: 0,
+                            }}
+                            title={moduleSpecifierValue}
+                            onClick={() =>
+                              handleCopyModuleSpecifier(moduleSpecifierValue)
+                            }
+                          >
+                            {moduleSpecifierValue}
+                          </button>
+                        ) : (
+                          <span
+                            className="min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono"
+                            style={{ color: 'var(--ds-gray-1000)' }}
+                          >
+                            {displayValue}
+                          </span>
+                        )}
+                      </div>
+                      {showDivider ? (
+                        <div
+                          className="mx-2.5 border-b"
+                          style={{ borderColor: 'var(--ds-gray-300)' }}
+                        />
+                      ) : null}
+                    </div>
+                  );
+                })}
+                {isLoading && resource === 'sleep' && !displayData.resumeAt && (
+                  <div className="py-1">
+                    <div className="flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1">
                       <span
-                        className="min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono"
-                        style={{ color: 'var(--ds-gray-1000)' }}
+                        className="text-[14px] first-letter:uppercase"
+                        style={{ color: 'var(--ds-gray-700)' }}
                       >
-                        {displayValue}
+                        resumeAt
                       </span>
-                    )}
+                      <Skeleton className="h-4 w-[55%]" />
+                    </div>
                   </div>
-                  {showDivider ? (
-                    <div
-                      className="mx-2.5 border-b"
-                      style={{ borderColor: 'var(--ds-gray-300)' }}
-                    />
-                  ) : null}
-                </div>
-              );
-            })}
-            {isLoading && resource === 'sleep' && !displayData.resumeAt && (
-              <div 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"
-                    style={{ color: 'var(--ds-gray-700)' }}
-                  >
-                    resumeAt
-                  </span>
-                  <Skeleton className="h-4 w-[55%]" />
-                </div>
+                )}
               </div>
             )}
-          </div>
-        )}
-        {error ? (
-          <ErrorCard
-            title="Failed to load resource details"
-            details={error.message}
-            className="my-4"
-          />
-        ) : hasExpired ? (
-          <ExpiredDataMessage />
-        ) : (
-          <>
-            {resolvedAttributes.map((attribute) => (
-              <AttributeBlock
-                isLoading={isLoading}
-                key={attribute}
-                attribute={attribute}
-                value={displayData[attribute as keyof typeof displayData]}
-                context={displayContext}
+            {error ? (
+              <ErrorCard
+                title="Failed to load resource details"
+                details={error.message}
+                className="my-4"
               />
-            ))}
-          </>
-        )}
-      </div>
-    </StreamClickContext.Provider>
+            ) : hasExpired ? (
+              <ExpiredDataMessage />
+            ) : (
+              <>
+                {resolvedAttributes.map((attribute) => (
+                  <AttributeBlock
+                    isLoading={isLoading}
+                    key={attribute}
+                    attribute={attribute}
+                    value={displayData[attribute as keyof typeof displayData]}
+                    context={displayContext}
+                  />
+                ))}
+              </>
+            )}
+          </div>
+        </DecryptClickContext.Provider>
+      </StreamClickContext.Provider>
+    </RunClickContext.Provider>
   );
 };

package/src/components/sidebar/copyable-data-block.tsx

@@ -24,7 +24,7 @@ export function CopyableDataBlock({ data }: { data: unknown }) {
   const toast = useToast();
   return (
     <div
-      className="relative overflow-x-auto rounded-md border p-3 pt-9"
+      className="relative overflow-x-auto rounded-md border p-3"
       style={{ borderColor: 'var(--ds-gray-300)' }}
     >
       <button

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

@@ -59,25 +59,7 @@ export function DetailCard({
           {summary}
         </span>
       </summary>
-      {/* Expanded content with connecting line */}
-      <div className={`relative pl-6 mt-3 ${contentClassName ?? ''}`}>
-        {/* Curved connecting line - vertical part from summary */}
-        <div
-          className="absolute left-3 -top-3 w-px h-3"
-          style={{ backgroundColor: 'var(--ds-gray-400)' }}
-        />
-        {/* Curved corner */}
-        <div
-          className="absolute left-3 top-0 w-3 h-3 border-l border-b rounded-bl-lg"
-          style={{ borderColor: 'var(--ds-gray-400)' }}
-        />
-        {/* Horizontal part to content */}
-        <div
-          className="absolute left-6 top-3 w-0 h-px -translate-y-px"
-          style={{ backgroundColor: 'var(--ds-gray-400)' }}
-        />
-        <div>{children}</div>
-      </div>
+      <div className={`mt-2 ${contentClassName ?? ''}`}>{children}</div>
     </details>
   );
 }