@workflow/web-shared 5.0.0-beta.2 → 5.0.0-beta.21

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

@@ -0,0 +1,173 @@
+'use client';
+
+import {
+  type AttributeChange,
+  RESERVED_ATTRIBUTE_KEY_PREFIX,
+} from '@workflow/world';
+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 AttributeRow({
+  attributeKey,
+  value,
+  removed = false,
+}: {
+  attributeKey: string;
+  value?: string;
+  removed?: boolean;
+}) {
+  const reserved = isReservedAttributeKey(attributeKey);
+  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 />}
+      </span>
+      {removed ? (
+        <span className="shrink-0 text-copy-13 italic text-gray-700">
+          removed
+        </span>
+      ) : (
+        <span
+          className="max-w-[60%] truncate text-copy-13 text-gray-1000"
+          title={value}
+        >
+          {value}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Sort attribute keys for display: user keys first (alphabetical), then
+ * reserved `$`-prefixed keys (alphabetical), so framework metadata doesn't
+ * crowd out user-set attributes.
+ */
+export function sortAttributeKeys(keys: string[]): string[] {
+  return [...keys].sort((a, b) => {
+    const aReserved = isReservedAttributeKey(a);
+    const bReserved = isReservedAttributeKey(b);
+    if (aReserved !== bReserved) return aReserved ? 1 : -1;
+    return a.localeCompare(b);
+  });
+}
+
+/**
+ * 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.
+ */
+export function RunAttributesCard({
+  attributes,
+}: {
+  attributes: Record<string, string>;
+}) {
+  const keys = sortAttributeKeys(Object.keys(attributes));
+  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>
+  );
+}
+
+interface AttrSetEventData {
+  changes: AttributeChange[];
+  writer?:
+    | { type: 'workflow' }
+    | { type: 'step'; stepId: string; attempt: number };
+}
+
+function isAttrSetEventData(data: unknown): data is AttrSetEventData {
+  if (data === null || typeof data !== 'object') return false;
+  const record = data as Record<string, unknown>;
+  return (
+    Array.isArray(record.changes) &&
+    record.changes.every(
+      (c) =>
+        c !== null &&
+        typeof c === 'object' &&
+        typeof (c as Record<string, unknown>).key === 'string'
+    )
+  );
+}
+
+function describeWriter(writer: AttrSetEventData['writer']): string | null {
+  if (!writer) return null;
+  if (writer.type === 'workflow') return 'Set by workflow';
+  if (writer.type === 'step') {
+    return `Set by step ${writer.stepId} (attempt ${writer.attempt})`;
+  }
+  return null;
+}
+
+/**
+ * Renders the payload of an `attr_set` event: the list of attribute
+ * changes (sets and removals) plus which writer (workflow or step)
+ * made them. Falls back to the generic JSON block for unexpected shapes.
+ */
+export function AttrSetEventBlock({ data }: { data: unknown }) {
+  if (!isAttrSetEventData(data)) {
+    return <CopyableDataBlock data={data} />;
+  }
+
+  const writerLabel = describeWriter(data.writer);
+
+  return (
+    <div className="flex flex-col px-3 py-1">
+      <div className="flex flex-col">
+        {data.changes.map((change, index) => (
+          <AttributeRow
+            attributeKey={change.key}
+            key={`${change.key}:${index}`}
+            removed={change.value === null}
+            value={change.value ?? undefined}
+          />
+        ))}
+      </div>
+      {writerLabel && (
+        <div
+          className="border-t py-1.5 text-label-12"
+          style={{
+            borderColor: 'var(--ds-gray-alpha-400)',
+            color: 'var(--ds-gray-700)',
+          }}
+        >
+          {writerLabel}
+        </div>
+      )}
+    </div>
+  );
+}

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>
   );
 }