@workflow/web-shared 5.0.0-beta.26 → 5.0.0-beta.28

package/src/components/sidebar/attributes-block.tsx

@@ -4,60 +4,94 @@ import {
   type AttributeChange,
   RESERVED_ATTRIBUTE_KEY_PREFIX,
 } from '@workflow/world';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+import { CopyButton } from '../new-trace-viewer/components/copy-button';
+import { MiddleTruncate } from '../new-trace-viewer/components/middle-truncate/middle-truncate';
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from '../ui/collapsible';
 import { CopyableDataBlock } from './copyable-data-block';
-import { DetailCard } from './detail-card';
-
-/**
- * Check whether an attribute key is in the reserved (`$`-prefixed)
- * namespace used by framework/library code.
- */
-export const isReservedAttributeKey = (key: string): boolean =>
-  key.startsWith(RESERVED_ATTRIBUTE_KEY_PREFIX);
 
-function ReservedBadge() {
-  return (
-    <span
-      className="shrink-0 rounded border px-1 py-px text-[10px] font-medium leading-3"
-      style={{
-        borderColor: 'var(--ds-gray-alpha-400)',
-        backgroundColor: 'var(--ds-gray-100)',
-        color: 'var(--ds-gray-700)',
-      }}
-      title={`Keys prefixed with "${RESERVED_ATTRIBUTE_KEY_PREFIX}" are reserved for framework and library code`}
-    >
-      Reserved
-    </span>
-  );
+function isReservedAttributeKey(key: string): boolean {
+  return key.startsWith(RESERVED_ATTRIBUTE_KEY_PREFIX);
 }
 
-function AttributeRow({
-  attributeKey,
+const rowValueVariants = cva(
+  'max-w-[60%] truncate text-right text-copy-13 text-gray-1000',
+  {
+    variants: {
+      variant: {
+        default: '',
+        mono: 'font-mono',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const rowCopyValueVariants = cva(
+  'flex min-w-0 max-w-[60%] items-center justify-end gap-1 text-copy-13 text-gray-1000',
+  {
+    variants: {
+      variant: {
+        default: '',
+        mono: 'font-mono',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+type DetailKeyValueRowProps = {
+  label: string;
+  value?: ReactNode;
+  copyText?: string;
+  removed?: boolean;
+};
+
+function DetailKeyValueRowBase({
+  label,
   value,
+  copyText,
   removed = false,
-}: {
-  attributeKey: string;
-  value?: string;
-  removed?: boolean;
-}) {
-  const reserved = isReservedAttributeKey(attributeKey);
+  variant,
+}: DetailKeyValueRowProps & VariantProps<typeof rowValueVariants>) {
+  const stringValue = typeof value === 'string' ? value : undefined;
+
   return (
-    <div className="flex items-center justify-between gap-3 py-0.5">
-      <span
-        className="flex min-w-0 items-center gap-1.5 text-label-13 text-gray-900"
-        style={reserved ? { color: 'var(--ds-gray-700)' } : undefined}
-      >
-        <span className="truncate">{attributeKey}</span>
-        {reserved && <ReservedBadge />}
+    <div className="px-1.5 hover:bg-gray-100 flex justify-between gap-3 -mx-1.5 py-0.5 rounded items-center">
+      <span className="flex min-w-0 items-center gap-1.5 truncate text-label-13 text-gray-900">
+        {label}
       </span>
       {removed ? (
         <span className="shrink-0 text-copy-13 italic text-gray-700">
           removed
         </span>
+      ) : copyText ? (
+        <div className={cn(rowCopyValueVariants({ variant }))} title={copyText}>
+          <MiddleTruncate
+            value={copyText}
+            className={cn(
+              rowValueVariants({ variant, className: 'text-right' })
+            )}
+            style={{ gridTemplateColumns: 'minmax(0, 1fr)' }}
+          />
+          <CopyButton
+            copyText={copyText}
+            ariaLabel={`Copy ${label}`}
+            className="shrink-0 -mr-1"
+          />
+        </div>
       ) : (
-        <span
-          className="max-w-[60%] truncate text-copy-13 text-gray-1000"
-          title={value}
-        >
+        <span className={cn(rowValueVariants({ variant }))} title={stringValue}>
           {value}
         </span>
       )}
@@ -65,6 +99,28 @@ function AttributeRow({
   );
 }
 
+export function DetailKeyValueRow(props: DetailKeyValueRowProps) {
+  return <DetailKeyValueRowBase {...props} />;
+}
+
+export function DetailMonoKeyValueRow(props: DetailKeyValueRowProps) {
+  return <DetailKeyValueRowBase {...props} variant="mono" />;
+}
+
+function AttributeRow({
+  attributeKey,
+  value,
+  removed = false,
+}: {
+  attributeKey: string;
+  value?: string;
+  removed?: boolean;
+}) {
+  return (
+    <DetailKeyValueRow label={attributeKey} value={value} removed={removed} />
+  );
+}
+
 /**
  * Sort attribute keys for display: user keys first (alphabetical), then
  * reserved `$`-prefixed keys (alphabetical), so framework metadata doesn't
@@ -81,8 +137,7 @@ export function sortAttributeKeys(keys: string[]): string[] {
 
 /**
  * Collapsible section showing a run's materialized attributes as key-value
- * rows. Reserved (`$`-prefixed) keys are visually de-emphasized with a
- * badge and sorted after user keys.
+ * rows. Reserved (`$`-prefixed) keys are sorted after user keys.
  */
 export function RunAttributesCard({
   attributes,
@@ -93,13 +148,78 @@ export function RunAttributesCard({
   if (keys.length === 0) return null;
 
   return (
-    <DetailCard summary="Attributes" defaultOpen contentClassName="mb-4">
-      <div className="flex flex-col">
-        {keys.map((key) => (
-          <AttributeRow attributeKey={key} key={key} value={attributes[key]} />
-        ))}
-      </div>
-    </DetailCard>
+    <CollapsibleRoot defaultOpen>
+      <CollapsibleTrigger>Attributes</CollapsibleTrigger>
+      <CollapsibleContent className="mb-4">
+        <div className="flex flex-col">
+          {keys.map((key) => (
+            <AttributeRow
+              attributeKey={key}
+              key={key}
+              value={attributes[key]}
+            />
+          ))}
+        </div>
+      </CollapsibleContent>
+    </CollapsibleRoot>
+  );
+}
+
+function formatMetadataValue(value: unknown): string {
+  if (value == null) {
+    return String(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function isMetadataRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+/**
+ * Collapsible section showing hook (or other resource) metadata as key-value
+ * rows, matching the Attributes section styling.
+ */
+export function RunMetadataCard({ metadata }: { metadata: unknown }) {
+  if (!isMetadataRecord(metadata)) {
+    return (
+      <CollapsibleRoot defaultOpen>
+        <CollapsibleTrigger>Metadata</CollapsibleTrigger>
+        <CollapsibleContent className="mb-4">
+          <CopyableDataBlock data={metadata} />
+        </CollapsibleContent>
+      </CollapsibleRoot>
+    );
+  }
+
+  const keys = Object.keys(metadata).sort((a, b) => a.localeCompare(b));
+  if (keys.length === 0) return null;
+
+  return (
+    <CollapsibleRoot defaultOpen>
+      <CollapsibleTrigger>Metadata</CollapsibleTrigger>
+      <CollapsibleContent className="mb-4">
+        <div className="flex flex-col">
+          {keys.map((key) => (
+            <AttributeRow
+              attributeKey={key}
+              key={key}
+              value={formatMetadataValue(metadata[key])}
+            />
+          ))}
+        </div>
+      </CollapsibleContent>
+    </CollapsibleRoot>
   );
 }
 

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

@@ -1,8 +1,18 @@
 'use client';
 
-import { EVENT_DATA_REF_FIELDS, type Event } from '@workflow/world';
+import type { Event } from '@workflow/world';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { hasEncryptedFields, isExpiredMarker } from '../../lib/hydration';
+import {
+  getEventDataRefFields,
+  hasEncryptedFields,
+  isExpiredMarker,
+} from '../../lib/hydration';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from '../ui/collapsible';
 import { RunClickContext, StreamClickContext } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
 import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
@@ -10,7 +20,6 @@ import { Skeleton } from '../ui/skeleton';
 import { TimestampTooltip } from '../ui/timestamp-tooltip';
 import { AttrSetEventBlock } from './attributes-block';
 import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
-import { DetailCard } from './detail-card';
 
 /**
  * Event types whose eventData contains an error field with a StructuredError.
@@ -143,20 +152,9 @@ function EventItem({
   const displayPayload = isLoading ? loadedData : mergedDisplay;
 
   return (
-    <DetailCard
+    <CollapsibleRoot
       variant="card"
-      summaryClassName="px-3 py-2"
-      summary={
-        <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 className="shrink-0 text-label-13 text-gray-900">
-            {displayedCreatedAtTime}
-          </span>
-        </div>
-      }
-      onToggle={
+      onOpenChange={
         canHaveData
           ? (open) => {
               if (open) handleExpand();
@@ -164,65 +162,79 @@ function EventItem({
           : undefined
       }
     >
-      {/* Event attributes */}
-      <div className="flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400">
-        {showSeparateEventOccurrenceTimestamps && occurredAt && (
-          <div className="flex items-center justify-between gap-2 py-2 px-3">
-            <span className="text-label-12 text-gray-900">Occurred</span>
-            <TimestampTooltip date={occurredAt}>
-              <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
-                {formatEventTimestamp(occurredAt)}
-              </span>
-            </TimestampTooltip>
-          </div>
-        )}
-        <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}
+      <CollapsibleTrigger className="px-3 py-2">
+        <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 className="shrink-0 text-label-13 text-gray-900">
+            {displayedCreatedAtTime}
           </span>
         </div>
-        {event.correlationId && (
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        {/* Event attributes */}
+        <div className="flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400">
+          {showSeparateEventOccurrenceTimestamps && occurredAt && (
+            <div className="flex items-center justify-between gap-2 py-2 px-3">
+              <span className="text-label-12 text-gray-900">Occurred</span>
+              <TimestampTooltip date={occurredAt}>
+                <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
+                  {formatEventTimestamp(occurredAt)}
+                </span>
+              </TimestampTooltip>
+            </div>
+          )}
           <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="text-label-12 text-gray-900">Event ID</span>
             <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
-              {event.correlationId}
+              {event.eventId}
             </span>
           </div>
-        )}
-      </div>
-
-      {/* Loading state */}
-      {isLoading && (
-        <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%]" />
+          {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>
+          )}
         </div>
-      )}
 
-      {/* Error state */}
-      {loadError && (
-        <ErrorCard
-          title="Failed to load event data"
-          details={loadError}
-          className="mt-2"
-        />
-      )}
+        {/* Loading state */}
+        {isLoading && (
+          <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%]" />
+          </div>
+        )}
 
-      {/* Event data */}
-      {displayPayload != null && (
-        <div className="[&>div]:border-none [&>div]:rounded-none">
-          <EventDataBlock eventType={event.eventType} data={displayPayload} />
-        </div>
-      )}
-    </DetailCard>
+        {/* Error state */}
+        {loadError && (
+          <ErrorCard
+            title="Failed to load event data"
+            details={loadError}
+            className="mt-2"
+          />
+        )}
+
+        {/* Event data */}
+        {displayPayload != null && (
+          <div className="[&>div]:border-none [&>div]:rounded-none">
+            <EventDataBlock eventType={event.eventType} data={displayPayload} />
+          </div>
+        )}
+      </CollapsibleContent>
+    </CollapsibleRoot>
   );
 }
 
 /**
  * Check if an eventData object has only expired marker values in ref/payload
- * fields for this event type (see {@link EVENT_DATA_REF_FIELDS}). Other keys
+ * fields for this event type (see {@link getEventDataRefFields}). Other keys
  * (e.g. `resumeAt`, `stepName`) are ignored.
  */
 function hasOnlyExpiredFields(data: unknown, eventType: string): boolean {
@@ -230,7 +242,7 @@ function hasOnlyExpiredFields(data: unknown, eventType: string): boolean {
     return false;
   }
   const record = data as Record<string, unknown>;
-  const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+  const refKeys = getEventDataRefFields(eventType);
   const presentKeys = refKeys.filter((k) => k in record);
   return (
     presentKeys.length > 0 &&
@@ -341,41 +353,44 @@ export function EventsList({
   const hasEvents = sortedEvents.length > 0 && !error;
 
   if (!hasEvents && !isLoading) {
-    return <DetailCard summary="Events" disabled />;
+    return <Collapsible label="Events" disabled />;
   }
 
   return (
     <RunClickContext.Provider value={onRunClick}>
       <StreamClickContext.Provider value={onStreamClick}>
-        <DetailCard summary="Events" contentClassName="mb-0" defaultOpen>
-          {isLoading ? (
-            <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>
-          ) : (
-            <div className="flex flex-col -mx-4">
-              {sortedEvents.map((event) => (
-                <EventItem
-                  key={event.eventId}
-                  event={event}
-                  onLoadEventData={onLoadEventData}
-                  encryptionKey={encryptionKey}
-                  showSeparateEventOccurrenceTimestamps={
-                    showSeparateEventOccurrenceTimestamps
-                  }
-                />
-              ))}
-            </div>
-          )}
-        </DetailCard>
+        <CollapsibleRoot defaultOpen>
+          <CollapsibleTrigger>Events</CollapsibleTrigger>
+          <CollapsibleContent className="mb-0">
+            {isLoading ? (
+              <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>
+            ) : (
+              <div className="flex flex-col -mx-4">
+                {sortedEvents.map((event) => (
+                  <EventItem
+                    key={event.eventId}
+                    event={event}
+                    onLoadEventData={onLoadEventData}
+                    encryptionKey={encryptionKey}
+                    showSeparateEventOccurrenceTimestamps={
+                      showSeparateEventOccurrenceTimestamps
+                    }
+                  />
+                ))}
+              </div>
+            )}
+          </CollapsibleContent>
+        </CollapsibleRoot>
       </StreamClickContext.Provider>
     </RunClickContext.Provider>
   );