@workflow/web-shared 5.0.0-beta.15 → 5.0.0-beta.16

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

@@ -3,6 +3,7 @@
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import type { ModelMessage } from 'ai';
+import { format } from 'date-fns';
 import type { KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
@@ -10,6 +11,7 @@ import { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
 import { CopyButton } from '../new-trace-viewer/components/copy-button';
 import { MiddleTruncate } from '../new-trace-viewer/components/middle-truncate/middle-truncate';
+import { ContextCardProvider } from '../ui/context-card';
 import {
   DecryptClickContext,
   RunClickContext,
@@ -19,6 +21,7 @@ import { ErrorCard } from '../ui/error-card';
 import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
 import { TimestampTooltip } from '../ui/timestamp-tooltip';
+import { RunAttributesCard } from './attributes-block';
 import { ConversationView } from './conversation-view';
 import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
@@ -339,15 +342,7 @@ const parseDateValue = (value: unknown): Date | null => {
 };
 
 const formatLocalMillisecondTime = (date: Date): string =>
-  date.toLocaleString(undefined, {
-    year: 'numeric',
-    month: 'numeric',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
-    fractionalSecondDigits: 3,
-  });
+  format(date, 'MMM dd HH:mm:ss.SS OO').toUpperCase();
 
 export const localMillisecondTime = (value: unknown): string => {
   const date = parseDateValue(value);
@@ -355,7 +350,6 @@ export const localMillisecondTime = (value: unknown): string => {
     return '-';
   }
 
-  // e.g. 12/17/2025, 9:08:55.182 AM
   return formatLocalMillisecondTime(date);
 };
 
@@ -416,12 +410,12 @@ const attributeToDisplayFn: Record<
   projectId: (_value: unknown) => null,
   environment: (_value: unknown) => null,
   executionContext: (_value: unknown) => null,
-  // Attributes MVP — string-string metadata attached to the run.
-  // Rendered in its own collapsible DetailCard; if empty/missing, hidden
-  // by the hasDisplayContent gate.
+  // Attributes — string-string metadata attached to the run.
+  // Rendered as key-value rows in its own collapsible DetailCard;
+  // if empty/missing, hidden by the hasDisplayContent gate.
   attributes: (value: unknown) => {
     if (!hasDisplayContent(value)) return null;
-    return <DetailCard summary="Attributes">{JsonBlock(value)}</DetailCard>;
+    return <RunAttributesCard attributes={value as Record<string, string>} />;
   },
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
   createdAt: timestampWithTooltipOrNull,
@@ -846,113 +840,117 @@ export const AttributePanel = ({
     : outerDecryptCtx;
 
   return (
-    <RunClickContext.Provider value={onRunClick}>
-      <StreamClickContext.Provider value={onStreamClick}>
-        <DecryptClickContext.Provider value={decryptValue}>
-          {visibleBasicAttributes.length > 0 && (
-            <div className="flex flex-col overflow-hidden divide-y divide-gray-alpha-400 mb-3">
-              {orderedBasicAttributes.map((attribute) => {
-                const displayValue = attributeToDisplayFn[
-                  attribute as keyof typeof attributeToDisplayFn
-                ]?.(displayData[attribute as keyof typeof displayData]);
-                const isModuleSpecifier = attribute === 'moduleSpecifier';
-                const isCopyableBasicAttribute =
-                  copyableBasicAttributes.has(attribute as AttributeKey) &&
-                  typeof displayValue === 'string';
-                const moduleSpecifierValue =
-                  typeof displayValue === 'string'
-                    ? displayValue
-                    : String(displayValue ?? displayData.moduleSpecifier ?? '');
-
-                return (
-                  <div
-                    className="flex items-center justify-between py-2"
-                    key={attribute}
-                  >
-                    <span className="text-label-14 text-gray-900">
-                      {getAttributeDisplayName(attribute)}
-                    </span>
-                    {isModuleSpecifier ? (
-                      <button
-                        type="button"
-                        className="min-w-0 max-w-[70%] truncate text-right text-label-13 font-mono"
-                        style={{
-                          color: 'var(--ds-gray-1000)',
-                          background: 'transparent',
-                          border: 'none',
-                          padding: 0,
-                        }}
-                        title={moduleSpecifierValue}
-                        onClick={() =>
-                          handleCopyModuleSpecifier(moduleSpecifierValue)
-                        }
-                      >
-                        {moduleSpecifierValue}
-                      </button>
-                    ) : isCopyableBasicAttribute ? (
-                      <div
-                        className="flex min-w-0 max-w-[70%] items-center justify-end gap-1 text-right text-[13px] font-mono"
-                        style={{
-                          color: 'var(--ds-gray-1000)',
-                        }}
-                        title={displayValue}
+    <ContextCardProvider>
+      <RunClickContext.Provider value={onRunClick}>
+        <StreamClickContext.Provider value={onStreamClick}>
+          <DecryptClickContext.Provider value={decryptValue}>
+            {visibleBasicAttributes.length > 0 && (
+              <div className="flex flex-col overflow-hidden divide-y divide-gray-alpha-400 mb-3">
+                {orderedBasicAttributes.map((attribute) => {
+                  const displayValue = attributeToDisplayFn[
+                    attribute as keyof typeof attributeToDisplayFn
+                  ]?.(displayData[attribute as keyof typeof displayData]);
+                  const isModuleSpecifier = attribute === 'moduleSpecifier';
+                  const isCopyableBasicAttribute =
+                    copyableBasicAttributes.has(attribute as AttributeKey) &&
+                    typeof displayValue === 'string';
+                  const moduleSpecifierValue =
+                    typeof displayValue === 'string'
+                      ? displayValue
+                      : String(
+                          displayValue ?? displayData.moduleSpecifier ?? ''
+                        );
+
+                  return (
+                    <div
+                      className="flex items-center justify-between py-2"
+                      key={attribute}
+                    >
+                      <span className="text-label-14 text-gray-900">
+                        {getAttributeDisplayName(attribute)}
+                      </span>
+                      {isModuleSpecifier ? (
+                        <button
+                          type="button"
+                          className="min-w-0 max-w-[70%] truncate text-right text-label-13 font-mono"
+                          style={{
+                            color: 'var(--ds-gray-1000)',
+                            background: 'transparent',
+                            border: 'none',
+                            padding: 0,
+                          }}
+                          title={moduleSpecifierValue}
+                          onClick={() =>
+                            handleCopyModuleSpecifier(moduleSpecifierValue)
+                          }
+                        >
+                          {moduleSpecifierValue}
+                        </button>
+                      ) : isCopyableBasicAttribute ? (
+                        <div
+                          className="flex min-w-0 max-w-[70%] items-center justify-end gap-1 text-right text-[13px] font-mono"
+                          style={{
+                            color: 'var(--ds-gray-1000)',
+                          }}
+                          title={displayValue}
+                        >
+                          <MiddleTruncate
+                            value={displayValue}
+                            className="flex-1"
+                          />
+                          <CopyButton
+                            copyText={displayValue}
+                            ariaLabel={`Copy ${getAttributeDisplayName(attribute)}`}
+                            className="shrink-0 -mr-1"
+                          />
+                        </div>
+                      ) : (
+                        <span className="text-right text-label-13 font-mono">
+                          {displayValue}
+                        </span>
+                      )}
+                    </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)' }}
                       >
-                        <MiddleTruncate
-                          value={displayValue}
-                          className="flex-1"
-                        />
-                        <CopyButton
-                          copyText={displayValue}
-                          ariaLabel={`Copy ${getAttributeDisplayName(attribute)}`}
-                          className="shrink-0 -mr-1"
-                        />
-                      </div>
-                    ) : (
-                      <span className="text-right text-label-13 font-mono">
-                        {displayValue}
+                        resumeAt
                       </span>
-                    )}
-                  </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%]" />
+                      <Skeleton className="h-4 w-[55%]" />
+                    </div>
                   </div>
-                </div>
-              )}
-            </div>
-          )}
-          {error ? (
-            <ErrorCard
-              title="Failed to load resource details"
-              details={error.message}
-              className="my-4"
-            />
-          ) : hasExpired ? (
-            <ExpiredDataMessage />
-          ) : resolvedAttributes.length > 0 ? (
-            <>
-              {resolvedAttributes.map((attribute) => (
-                <AttributeBlock
-                  isLoading={isLoading}
-                  key={attribute}
-                  attribute={attribute}
-                  value={displayData[attribute as keyof typeof displayData]}
-                  context={displayContext}
-                />
-              ))}
-            </>
-          ) : null}
-        </DecryptClickContext.Provider>
-      </StreamClickContext.Provider>
-    </RunClickContext.Provider>
+                )}
+              </div>
+            )}
+            {error ? (
+              <ErrorCard
+                title="Failed to load resource details"
+                details={error.message}
+                className="my-4"
+              />
+            ) : hasExpired ? (
+              <ExpiredDataMessage />
+            ) : resolvedAttributes.length > 0 ? (
+              <>
+                {resolvedAttributes.map((attribute) => (
+                  <AttributeBlock
+                    isLoading={isLoading}
+                    key={attribute}
+                    attribute={attribute}
+                    value={displayData[attribute as keyof typeof displayData]}
+                    context={displayContext}
+                  />
+                ))}
+              </>
+            ) : null}
+          </DecryptClickContext.Provider>
+        </StreamClickContext.Provider>
+      </RunClickContext.Provider>
+    </ContextCardProvider>
   );
 };

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

@@ -0,0 +1,182 @@
+'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-1.5">
+      <span
+        className="flex min-w-0 items-center gap-1.5 text-label-12 font-mono"
+        style={{
+          color: reserved ? 'var(--ds-gray-700)' : 'var(--ds-gray-900)',
+        }}
+      >
+        <span className="truncate">{attributeKey}</span>
+        {reserved && <ReservedBadge />}
+      </span>
+      {removed ? (
+        <span
+          className="shrink-0 text-label-12 italic"
+          style={{ color: 'var(--ds-gray-700)' }}
+        >
+          removed
+        </span>
+      ) : (
+        <span
+          className="max-w-[60%] truncate text-right text-label-12 font-mono 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 card 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 (${keys.length})`}
+      defaultOpen
+      contentClassName="mb-0"
+    >
+      <div className="flex flex-col divide-y divide-gray-alpha-400">
+        {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 divide-y divide-gray-alpha-400">
+        {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/entity-detail-panel.tsx

@@ -444,7 +444,7 @@ export function EntityDetailPanel({
             resource={resource}
           />
 
-          {resource !== 'run' && rawEvents && (
+          {rawEvents && (
             <EventsList
               events={rawEvents}
               onLoadEventData={onLoadEventData}

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

@@ -7,6 +7,7 @@ import { RunClickContext, StreamClickContext } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
 import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
+import { AttrSetEventBlock } from './attributes-block';
 import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
 
@@ -30,6 +31,7 @@ const DATA_EVENT_TYPES = new Set([
   'run_failed',
   'wait_created',
   'wait_completed',
+  'attr_set',
 ]);
 
 /**
@@ -226,6 +228,12 @@ function EventDataBlock({
     return <EncryptedDataBlock />;
   }
 
+  // Attribute changes — render the changed keys and the writer instead of
+  // the raw JSON payload.
+  if (eventType === 'attr_set') {
+    return <AttrSetEventBlock data={data} />;
+  }
+
   // 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.

package/src/components/trace-viewer/components/node.tsx

@@ -18,10 +18,10 @@ import { formatDuration, getHighResInMs } from '../util/timing';
 import { SpanContent } from './span-content';
 import { computeSegments } from './span-segments';
 import {
-  type ResourceType,
-  type SpanLayout,
   getResourceType,
   getSpanLayout,
+  type ResourceType,
+  type SpanLayout,
 } from './span-strategies';
 
 export const getSpanColorClassName = (node: SpanNode): string => {
@@ -362,6 +362,7 @@ const BOUNDARY_LABELS: Record<string, string> = {
   run_completed: 'Completed',
   run_failed: 'Run failed',
   step_completed: 'Completed',
+  attr_set: 'Attributes set',
 };
 
 export const SpanEventComponent = memo(function SpanEventComponent({