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

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

@@ -1,8 +1,48 @@
 'use client';
 
-import { Copy } from 'lucide-react';
-import { useToast } from '../../lib/toast';
-import { DataInspector } from '../ui/data-inspector';
+import { Lock } from 'lucide-react';
+import { useContext } from 'react';
+import { CopyButton } from '../new-trace-viewer/components/copy-button';
+import { Button } from '../ui/button';
+import { DataInspector, DecryptClickContext } from '../ui/data-inspector';
+import { Spinner } from '../ui/spinner';
+
+const encryptedPlaceholderPreview = `{
+  "input": "[encrypted]",
+  "result": "[encrypted]"
+}`;
+
+export function EncryptedDataBlock() {
+  const ctx = useContext(DecryptClickContext);
+
+  return (
+    <div className="relative min-h-20 overflow-hidden rounded-md border border-gray-alpha-400 bg-background-100">
+      <pre
+        aria-hidden="true"
+        className="pointer-events-none m-0 select-none p-3 font-mono text-label-12 text-gray-900 blur-[4px]"
+      >
+        {encryptedPlaceholderPreview}
+      </pre>
+      <div className="absolute inset-0 flex items-center justify-center">
+        {ctx ? (
+          <Button onClick={ctx.onDecrypt} disabled={ctx.isDecrypting} size="xs">
+            {ctx.isDecrypting ? (
+              <Spinner size={10} />
+            ) : (
+              <Lock className="h-3 w-3" />
+            )}
+            <span>Decrypt</span>
+          </Button>
+        ) : (
+          <span className="inline-flex items-center gap-1 rounded border border-gray-alpha-400 bg-gray-100 px-1.5 py-0.5 text-button-12 font-medium text-gray-700">
+            <Lock className="h-3 w-3" />
+            Encrypted
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
 
 const serializeForClipboard = (value: unknown): string => {
   if (typeof value === 'string') return value;
@@ -21,31 +61,13 @@ const serializeForClipboard = (value: unknown): string => {
 };
 
 export function CopyableDataBlock({ data }: { data: unknown }) {
-  const toast = useToast();
   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 data"
-        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(serializeForClipboard(data))
-            .then(() => {
-              toast.success('Copied to clipboard');
-            })
-            .catch(() => {
-              toast.error('Failed to copy');
-            });
-        }}
-      >
-        <Copy size={12} />
-      </button>
+    <div className="relative overflow-x-auto rounded-md border border-gray-alpha-400 p-3">
+      <CopyButton
+        copyText={serializeForClipboard(data)}
+        ariaLabel="Copy data"
+        className="absolute right-2 top-2 z-10 flex h-6 w-6 items-center justify-center rounded-md border border-gray-alpha-400 !bg-background-100 p-0 text-gray-900 transition-transform transition-colors duration-100 hover:bg-gray-200 active:scale-95 active:bg-gray-300"
+      />
       <DataInspector data={data} />
     </div>
   );

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

@@ -1,83 +1,143 @@
-import { ChevronRight } from 'lucide-react';
-import type { ReactNode } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { type ReactNode, useState } from 'react';
+import { cn } from '../../lib/utils';
 
 export function DetailCard({
   summary,
   children,
   onToggle,
   disabled = false,
+  defaultOpen = false,
+  variant = 'section',
+  trailing,
   summaryClassName,
   contentClassName,
 }: {
   summary: ReactNode;
   children?: ReactNode;
-  /** Called when the detail card is expanded/collapsed */
   onToggle?: (open: boolean) => void;
-  /** Renders a non-expandable summary card when true. */
   disabled?: boolean;
-  /** Extra classes for the summary row. */
+  defaultOpen?: boolean;
+  variant?: 'section' | 'card';
+  trailing?: ReactNode;
   summaryClassName?: string;
-  /** Extra classes for expanded content wrapper. */
   contentClassName?: string;
 }) {
-  if (disabled) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  const handleToggle = (e: React.SyntheticEvent<HTMLDetailsElement>) => {
+    // React surfaces `toggle` as a bubbling synthetic event even though the
+    // native event doesn't bubble. Without this guard, a nested <details>
+    // (e.g. an event card inside the Events section) collapsing would flip
+    // the outer DetailCard's state. Only react to direct toggles.
+    if (e.target !== e.currentTarget) return;
+    const next = e.currentTarget.open;
+    setOpen(next);
+    onToggle?.(next);
+  };
+
+  if (variant === 'card') {
+    if (disabled) {
+      return (
+        <div
+          className={cn(
+            'list-none px-3 py-4 bg-background-200 [&::-webkit-details-marker]:hidden',
+            summaryClassName
+          )}
+          style={{ cursor: 'not-allowed', opacity: 0.8 }}
+        >
+          {summary}
+        </div>
+      );
+    }
     return (
-      <div
-        className={`rounded-md border px-2.5 py-1.5 text-xs ${summaryClassName ?? ''}`}
-        style={{
-          borderColor: 'var(--ds-gray-300)',
-          backgroundColor: 'var(--ds-gray-100)',
-          color: 'var(--ds-gray-700)',
-          cursor: 'not-allowed',
-          opacity: 0.8,
-        }}
+      <details
+        className="group/card last:border-b border-gray-alpha-400"
+        open={open}
+        onToggle={handleToggle}
       >
-        {summary}
-      </div>
+        <summary
+          className={cn(
+            'list-none cursor-pointer px-3 py-4 border-t border-gray-alpha-400 bg-background-200 hover:bg-gray-100 [&::-webkit-details-marker]:hidden',
+            summaryClassName
+          )}
+        >
+          <span className="flex items-center gap-1.5">
+            <ChevronRight
+              size={14}
+              className={cn(
+                'shrink-0 text-gray-700 group-hover/card:text-gray-1000',
+                open && 'rotate-90'
+              )}
+            />
+            {summary}
+          </span>
+        </summary>
+        <div className={contentClassName}>{children}</div>
+      </details>
     );
   }
 
-  return (
-    <details
-      className="group"
-      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 [&::-webkit-details-marker]:hidden ${summaryClassName ?? ''}`}
-        style={{
-          borderColor: 'var(--ds-gray-300)',
-          backgroundColor: 'var(--ds-gray-100)',
-          color: 'var(--ds-gray-900)',
-          listStyle: 'none',
-        }}
-      >
-        <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 ?? ''}`}>
-        {/* 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 */}
+  // Shared height with the expandable summary row. Keeps the trailing /
+  // disabled / chevron variants visually identical in height regardless of
+  // what's in the trailing slot.
+  const rowClasses =
+    'flex h-9 items-center gap-2 px-2 -mx-2 text-heading-14 font-medium my-2';
+
+  if (trailing) {
+    return (
+      <section className="-mx-4 border-t px-4 border-gray-alpha-400">
+        <div className={cn(rowClasses, summaryClassName)}>
+          <div className="isolate relative shrink-0 w-3.5 h-3.5 text-gray-700">
+            <ChevronRight
+              size={14}
+              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+            />
+          </div>
+          <span className="min-w-0 flex-1">{summary}</span>
+          <div className="shrink-0 pr-1">{trailing}</div>
+        </div>
+      </section>
+    );
+  }
+
+  if (disabled) {
+    return (
+      <section className="-mx-4 border-t px-4 border-gray-alpha-400">
         <div
-          className="absolute left-6 top-3 w-0 h-px -translate-y-px"
-          style={{ backgroundColor: 'var(--ds-gray-400)' }}
-        />
-        <div>{children}</div>
-      </div>
-    </details>
+          className={cn(rowClasses, summaryClassName)}
+          style={{ color: 'var(--ds-gray-700)', cursor: 'not-allowed' }}
+        >
+          <span className="min-w-0 flex-1">{summary}</span>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="-mx-4 border-t px-4 border-gray-alpha-400">
+      <details className="group" open={open} onToggle={handleToggle}>
+        <summary
+          className={cn(
+            'group/trigger list-none cursor-pointer rounded hover:bg-gray-alpha-100 [&::-webkit-details-marker]:hidden',
+            rowClasses,
+            summaryClassName
+          )}
+        >
+          <div className="isolate relative shrink-0 text-gray-700 group-hover/trigger:text-gray-1000 w-3.5 h-3.5">
+            <ChevronRight
+              size={14}
+              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-open:opacity-0"
+            />
+            <ChevronDown
+              size={14}
+              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 group-open:opacity-100"
+            />
+          </div>
+          <span className="min-w-0 flex-1">{summary}</span>
+        </summary>
+        <div className={cn('mb-3', contentClassName)}>{children}</div>
+      </details>
+    </section>
   );
 }

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

@@ -5,11 +5,11 @@ import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useToast } from '../../lib/toast';
-import { isEncryptedMarker } from '../../lib/hydration';
-import { DecryptButton } from '../ui/decrypt-button';
+import { DecryptClickContext } from '../ui/data-inspector';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
+import { useSidebarDataOptional } from './sidebar-data-context';
 
 // Type guards for runtime validation of span attribute data
 function isStep(data: unknown): data is Step {
@@ -56,6 +56,7 @@ export interface SelectedSpanInfo {
 export function EntityDetailPanel({
   run,
   onStreamClick,
+  onRunClick,
   spanDetailData,
   spanDetailError,
   spanDetailLoading,
@@ -71,6 +72,8 @@ export function EntityDetailPanel({
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
+  /** Callback when a run reference is clicked */
+  onRunClick?: (runId: string) => void;
   /** Pre-fetched span detail data for the selected span. */
   spanDetailData: WorkflowRun | Step | Hook | Event | null;
   /** Error from external span detail fetch. */
@@ -114,6 +117,9 @@ export function EntityDetailPanel({
     new Set()
   );
 
+  const sidebar = useSidebarDataOptional();
+  const hasEncryptedData = Boolean(sidebar?.hasEncryptedData && !encryptionKey);
+
   const data = selectedSpan?.data;
   const rawEvents = selectedSpan?.rawEvents;
   const rawEventsLength = rawEvents?.length ?? 0;
@@ -209,17 +215,6 @@ 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;
@@ -347,155 +342,104 @@ export function EntityDetailPanel({
     return null;
   }
 
-  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="flex h-full flex-col">
-      <div
-        className="border-b px-3 py-3"
-        style={{ borderColor: 'var(--ds-gray-200)' }}
+      <DecryptClickContext.Provider
+        value={
+          onDecrypt ? { onDecrypt, isDecrypting, hasEncryptedData } : undefined
+        }
       >
-        <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)',
-                }}
+        <div className="flex-1 overflow-y-auto px-4 pb-8">
+          {hasPendingActions && (
+            <div
+              className="mb-4 rounded-lg border p-2"
+              style={{
+                borderColor: 'var(--ds-gray-300)',
+                backgroundColor: 'var(--ds-gray-100)',
+              }}
+            >
+              <p
+                className="mb-2 px-1 text-[13px] font-medium uppercase tracking-wide"
+                style={{ color: 'var(--ds-gray-700)' }}
               >
-                {runStateLabel}
-              </span>
+                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>
-            <p
-              className="mt-1 truncate font-mono text-[13px]"
-              style={{ color: 'var(--ds-gray-700)' }}
-              title={resourceId}
-            >
-              {resourceId}
-            </p>
-          </div>
-          {(hasEncryptedFields || encryptionKey) && onDecrypt && (
-            <DecryptButton
-              decrypted={!!encryptionKey}
-              loading={isDecrypting}
-              onClick={onDecrypt}
-            />
           )}
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto px-3 pt-3 pb-8">
-        {hasPendingActions && (
-          <div
-            className="mb-4 rounded-lg border p-2"
-            style={{
-              borderColor: 'var(--ds-gray-300)',
-              backgroundColor: 'var(--ds-gray-100)',
-            }}
-          >
-            <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}
-              resource={resource}
-            />
-          </section>
+
+          <AttributePanel
+            data={displayData}
+            moduleSpecifier={moduleSpecifier}
+            expiredAt={run.expiredAt}
+            isLoading={loading}
+            error={error ?? undefined}
+            onStreamClick={onStreamClick}
+            onRunClick={onRunClick}
+            onDecrypt={onDecrypt}
+            isDecrypting={isDecrypting}
+            resource={resource}
+          />
 
           {resource !== 'run' && rawEvents && (
-            <section>
-              <EventsList
-                events={rawEvents}
-                onLoadEventData={onLoadEventData}
-                encryptionKey={encryptionKey}
-              />
-            </section>
+            <EventsList
+              events={rawEvents}
+              onLoadEventData={onLoadEventData}
+              encryptionKey={encryptionKey}
+            />
           )}
         </div>
-      </div>
+      </DecryptClickContext.Provider>
 
       {/* Resolve Hook Modal */}
       <ResolveHookModal