@workflow/web-shared 5.0.0-beta.6 → 5.0.0-beta.8

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"
-      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,65 +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>
+    );
+  }
+
+  // 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={cn(rowClasses, summaryClassName)}
+          style={{ color: 'var(--ds-gray-700)', cursor: 'not-allowed' }}
+        >
+          <span className="min-w-0 flex-1">{summary}</span>
+        </div>
+      </section>
     );
   }
 
   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>
-      <div className={`mt-2 ${contentClassName ?? ''}`}>{children}</div>
-    </details>
+    <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

@@ -9,6 +9,7 @@ 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 {
@@ -116,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;
@@ -345,9 +349,11 @@ export function EntityDetailPanel({
   return (
     <div className="flex h-full flex-col">
       <DecryptClickContext.Provider
-        value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
+        value={
+          onDecrypt ? { onDecrypt, isDecrypting, hasEncryptedData } : undefined
+        }
       >
-        <div className="flex-1 overflow-y-auto px-3 pt-3 pb-8">
+        <div className="flex-1 overflow-y-auto px-4 pb-8">
           {hasPendingActions && (
             <div
               className="mb-4 rounded-lg border p-2"
@@ -412,32 +418,26 @@ export function EntityDetailPanel({
             </div>
           )}
 
-          <div className="space-y-4">
-            <section>
-              <AttributePanel
-                data={displayData}
-                moduleSpecifier={moduleSpecifier}
-                expiredAt={run.expiredAt}
-                isLoading={loading}
-                error={error ?? undefined}
-                onStreamClick={onStreamClick}
-                onRunClick={onRunClick}
-                onDecrypt={onDecrypt}
-                isDecrypting={isDecrypting}
-                resource={resource}
-              />
-            </section>
-
-            {resource !== 'run' && rawEvents && (
-              <section>
-                <EventsList
-                  events={rawEvents}
-                  onLoadEventData={onLoadEventData}
-                  encryptionKey={encryptionKey}
-                />
-              </section>
-            )}
-          </div>
+          <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 && (
+            <EventsList
+              events={rawEvents}
+              onLoadEventData={onLoadEventData}
+              encryptionKey={encryptionKey}
+            />
+          )}
         </div>
       </DecryptClickContext.Provider>
 

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

@@ -1,16 +1,15 @@
 'use client';
 
 import { EVENT_DATA_REF_FIELDS, type Event } from '@workflow/world';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { isExpiredMarker } from '../../lib/hydration';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { hasEncryptedFields, isExpiredMarker } from '../../lib/hydration';
 import { ErrorCard } from '../ui/error-card';
 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 { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
 
 /**
@@ -94,7 +93,7 @@ function EventItem({
 
   // When the encryption key changes and this event was previously expanded,
   // re-load the data so it gets decrypted
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!encryptionKey || !wasExpandedRef.current) return;
     loadedDataRef.current = null;
     setLoadedData(null);
@@ -102,25 +101,27 @@ function EventItem({
   }, [encryptionKey, loadEventData]);
 
   const createdAt = new Date(event.createdAt);
+  const createdAtTime = createdAt.toLocaleTimeString(undefined, {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+  });
 
   const displayPayload = isLoading ? loadedData : mergedDisplay;
 
   return (
     <DetailCard
-      summaryClassName="text-base py-2"
+      variant="card"
+      summaryClassName="px-3 py-2"
       summary={
-        <>
-          <span
-            className="font-medium"
-            style={{ color: 'var(--ds-gray-1000)' }}
-          >
+        <div className="flex w-full items-center justify-between gap-3">
+          <span className="text-gray-1000 text-label-12 font-mono">
             {event.eventType}
-          </span>{' '}
-          -{' '}
-          <span style={{ color: 'var(--ds-gray-700)' }}>
-            {localMillisecondTime(createdAt.getTime())}
           </span>
-        </>
+          <span className="shrink-0 text-label-13 text-gray-900">
+            {createdAtTime}
+          </span>
+        </div>
       }
       onToggle={
         canHaveData
@@ -131,47 +132,17 @@ function EventItem({
       }
     >
       {/* Event attributes */}
-      <div
-        className="flex flex-col divide-y rounded-md border overflow-hidden"
-        style={{
-          borderColor: 'var(--ds-gray-300)',
-          backgroundColor: 'var(--ds-gray-100)',
-        }}
-      >
-        <div
-          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-[13px] font-medium"
-            style={{ color: 'var(--ds-gray-700)' }}
-          >
-            Event ID
-          </span>
-          <span
-            className="max-w-[70%] truncate text-right text-[13px] font-mono"
-            style={{ color: 'var(--ds-gray-1000)' }}
-            title={event.eventId}
-          >
+      <div className="flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400">
+        <div className="flex items-center justify-between gap-2 py-2 px-3">
+          <span className="text-label-12 text-gray-900">Event ID</span>
+          <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
             {event.eventId}
           </span>
         </div>
         {event.correlationId && (
-          <div
-            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-[13px] font-medium"
-              style={{ color: 'var(--ds-gray-700)' }}
-            >
-              Correlation ID
-            </span>
-            <span
-              className="max-w-[70%] truncate text-right text-[13px] font-mono"
-              style={{ color: 'var(--ds-gray-1000)' }}
-              title={event.correlationId}
-            >
+          <div className="flex items-center justify-between gap-2 py-2 px-3">
+            <span className="text-label-12 text-gray-900">Correlation ID</span>
+            <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
               {event.correlationId}
             </span>
           </div>
@@ -180,12 +151,7 @@ function EventItem({
 
       {/* Loading state */}
       {isLoading && (
-        <div
-          className="mt-2 rounded-md border p-3"
-          style={{
-            borderColor: 'var(--ds-gray-300)',
-          }}
-        >
+        <div className="p-3">
           <Skeleton className="h-4 w-[35%]" />
           <Skeleton className="mt-2 h-4 w-[90%]" />
           <Skeleton className="mt-2 h-4 w-[75%]" />
@@ -203,7 +169,7 @@ function EventItem({
 
       {/* Event data */}
       {displayPayload != null && (
-        <div className="mt-2">
+        <div className="[&>div]:border-none [&>div]:rounded-none">
           <EventDataBlock eventType={event.eventType} data={displayPayload} />
         </div>
       )}
@@ -258,6 +224,10 @@ function EventDataBlock({
     );
   }
 
+  if (hasEncryptedFields({ eventType, eventData: data })) {
+    return <EncryptedDataBlock />;
+  }
+
   // 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.
@@ -311,26 +281,28 @@ export function EventsList({
     [events]
   );
 
+  const hasEvents = sortedEvents.length > 0 && !error;
+
+  if (!hasEvents && !isLoading) {
+    return <DetailCard summary="Events" disabled />;
+  }
+
   return (
-    <div className="mt-2" style={{ color: 'var(--ds-gray-1000)' }}>
-      <h3
-        className="text-label-14 font-medium mt-4 mb-2"
-        style={{ color: 'var(--ds-gray-1000)' }}
-      >
-        Events
-      </h3>
+    <DetailCard summary="Events" contentClassName="mb-0" defaultOpen>
       {isLoading ? (
-        <div className="flex flex-col gap-4">
-          <Skeleton className="h-9 w-full rounded-md" />
-          <Skeleton className="h-9 w-full rounded-md" />
-          <Skeleton className="h-9 w-full rounded-md" />
+        <div className="flex flex-col -mx-4">
+          {[0, 1, 2].map((i) => (
+            <div
+              key={i}
+              className="flex items-center justify-between gap-3 bg-background-200 px-4 py-2"
+            >
+              <Skeleton className="h-4 w-32 rounded" />
+              <Skeleton className="h-3 w-16 rounded" />
+            </div>
+          ))}
         </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-4">
+      ) : (
+        <div className="flex flex-col -mx-4">
           {sortedEvents.map((event) => (
             <EventItem
               key={event.eventId}
@@ -340,7 +312,7 @@ export function EventsList({
             />
           ))}
         </div>
-      ) : null}
-    </div>
+      )}
+    </DetailCard>
   );
 }

package/src/components/ui/button.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  [
+    'outline-none m-0 border-0 align-baseline no-underline group/trigger',
+    'relative cursor-pointer select-none transform translate-z-0',
+    'inline-flex max-w-full items-center justify-center gap-x-1 whitespace-nowrap rounded-md font-medium',
+    '!text-gray-100',
+    'bg-gray-1000',
+    'transition-[border-color,background,color,transform,box-shadow] duration-150 ease-in-out',
+    'hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))] dark-theme:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]',
+    // disabled styles
+    'disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',
+    'disabled:bg-gray-100 disabled:!text-gray-700 disabled:hover:bg-gray-100',
+    'aria-disabled:bg-gray-100 aria-disabled:text-gray-700 aria-disabled:hover:bg-gray-100',
+  ],
+  {
+    variants: {
+      variant: {
+        default: '',
+        secondary:
+          'border border-gray-alpha-400 [--themed-bg:_var(--ds-background-100)] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-200)]',
+        ghost:
+          '[--themed-bg:_transparent] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-100)]',
+      },
+      size: {
+        default: 'h-10 px-4 text-[14px]',
+        sm: 'h-8 px-3 text-[14px]',
+        xs: 'h-6 px-1.5 py-0.5 text-button-12',
+        icon: 'h-8 w-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
+
+export function Button({
+  className,
+  variant,
+  size,
+  type = 'button',
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { buttonVariants };