@workflow/web-shared 5.0.0-beta.20 → 5.0.0-beta.22

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

@@ -39,6 +39,7 @@ import {
   TooltipTrigger,
 } from '../ui/tooltip';
 import EventList from './components/event-list';
+import { TraceShortcutHelper } from './components/trace-shortcut-helper';
 import { ROW_HEIGHT_PX, scrollRowIntoView } from './components/use-row-window';
 import { SplitPane } from './components/split-pane';
 import {
@@ -460,7 +461,6 @@ function NewTraceViewerContent({
       if (e.key === 'Escape') {
         handleClearActiveSpan();
       } else if (e.key === 'Alt') {
-        e.preventDefault();
         setAltHeld(true);
       } else if (e.key === 'j' || e.key === 'k') {
         handleSidebarNavKey(e);
@@ -648,7 +648,7 @@ function NewTraceViewerContent({
     <div
       data-pane="pane-root"
       data-has-detail={activeSpan ? '' : undefined}
-      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,360px,100%)]"
+      className="relative grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,360px,100%)]"
     >
       <div
         id="trace-parent"
@@ -683,9 +683,9 @@ function NewTraceViewerContent({
                   onClick={() => setSearchQuery('')}
                   className="-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex"
                 >
-                  <kbd className="inline-flex h-5 min-h-5 min-w-5 items-center justify-center rounded border border-gray-alpha-400 bg-background-100 px-1 font-sans text-[13px] font-medium leading-[1.7em] text-gray-900">
+                  <Kbd variant="outline" size="search">
                     Esc
-                  </kbd>
+                  </Kbd>
                 </button>
               )}
             </div>
@@ -838,6 +838,11 @@ function NewTraceViewerContent({
           </div>
         </aside>
       ) : null}
+
+      <TraceShortcutHelper
+        hasMultipleSpans={trace.spans.length > 1}
+        reducedMotion={reducedMotion}
+      />
     </div>
   );
 }

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

@@ -218,6 +218,7 @@ type AttributeKey =
   | keyof WorkflowRun
   | keyof Hook
   | keyof Event
+  | 'occurredAt'
   | 'moduleSpecifier'
   | 'eventData'
   | 'resumeAt'
@@ -252,6 +253,7 @@ const attributeOrder: AttributeKey[] = [
   'projectId',
   'environment',
   'executionContext',
+  'occurredAt',
   'createdAt',
   'startedAt',
   'updatedAt',
@@ -292,6 +294,7 @@ const attributeDisplayNames: Partial<Record<AttributeKey, string>> = {
   deploymentId: 'Deployment ID',
   specVersion: 'Spec Version',
   workflowCoreVersion: '@workflow/core version',
+  occurredAt: 'Occurred',
   createdAt: 'Created',
   startedAt: 'Started',
   updatedAt: 'Updated',
@@ -417,6 +420,7 @@ const attributeToDisplayFn: Record<
     return <RunAttributesCard attributes={value as Record<string, string>} />;
   },
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
+  occurredAt: timestampWithTooltipOrNull,
   createdAt: timestampWithTooltipOrNull,
   startedAt: timestampWithTooltipOrNull,
   updatedAt: (_value: unknown) => null,

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

@@ -44,7 +44,7 @@ export function EncryptedDataBlock() {
   );
 }
 
-const serializeForClipboard = (value: unknown): string => {
+export const serializeForClipboard = (value: unknown): string => {
   if (typeof value === 'string') return value;
   if (
     typeof value === 'number' ||

package/src/components/ui/data-inspector.styles.ts

@@ -0,0 +1,96 @@
+/**
+ * Class names and styles for the data inspector tree.
+ *
+ * Kept out of the component module for readability. The CSS is injected via a
+ * React 19 hoistable `<style>` (see DataInspector), so it stays bundler-agnostic
+ * for every consumer. Colors use theme-aware `--ds-*` tokens that adapt to
+ * light/dark automatically, so no per-theme overrides are needed.
+ */
+
+export const CLS = {
+  container: 'wf-json-view',
+  child: 'wf-json-child',
+  childFields: 'wf-json-child-fields',
+  label: 'wf-json-label',
+  clickableLabel: 'wf-json-clickable-label',
+  punctuation: 'wf-json-punctuation',
+  className: 'wf-json-classname',
+  expandIcon: 'wf-json-expand-icon',
+  collapseIcon: 'wf-json-collapse-icon',
+  collapsedContent: 'wf-json-collapsed-content',
+  string: 'wf-json-string',
+  number: 'wf-json-number',
+  boolean: 'wf-json-boolean',
+  null: 'wf-json-null',
+  undefined: 'wf-json-undefined',
+  date: 'wf-json-date',
+  regexp: 'wf-json-regexp',
+} as const;
+
+export const JSON_VIEW_STYLES = `
+.${CLS.container} {
+  display: inline;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 20px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--ds-gray-1000);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.${CLS.container} > .${CLS.child} > ul { padding-left: 0ch; }
+.${CLS.container} > .${CLS.child} { padding-left: 1.5ch; }
+.${CLS.child} { display: block; margin: 0; padding: 0 0 0 2ch; }
+.${CLS.child}:hover:not(:has(.${CLS.child}:hover)):not(:has(.${CLS.child} ~ .${CLS.child})) {
+  background-color: var(--ds-gray-alpha-100);
+  border-radius: 4px;
+}
+.${CLS.childFields} { margin: 0; padding: 0; list-style: none; }
+.${CLS.label}, .${CLS.clickableLabel} {
+  color: var(--ds-pink-900);
+  font-weight: 400;
+  margin-right: 1ch;
+}
+.${CLS.clickableLabel} { cursor: pointer; }
+.${CLS.punctuation} { color: var(--ds-gray-1000); }
+.${CLS.className} { font-style: italic; color: var(--ds-gray-900); margin-right: 1ch; }
+.${CLS.string} { color: var(--ds-green-900); }
+.${CLS.number} { color: var(--ds-blue-900); }
+.${CLS.boolean} { color: var(--ds-amber-900); }
+.${CLS.null}, .${CLS.undefined} { color: var(--ds-gray-900); }
+.${CLS.date} { color: var(--ds-pink-900); }
+.${CLS.regexp} { color: var(--ds-purple-900); }
+.${CLS.container} > .${CLS.child} > .${CLS.expandIcon},
+.${CLS.container} > .${CLS.child} > .${CLS.collapseIcon} { margin-left: -1.5ch; }
+.${CLS.expandIcon}, .${CLS.collapseIcon} {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  vertical-align: baseline;
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 0ch;
+  margin-left: -1.5ch;
+  color: var(--ds-gray-500);
+  user-select: none;
+  outline: none;
+}
+.${CLS.expandIcon}::after {
+  content: '\\25B8';
+  margin-right: 0.5ch;
+  transform: translateY(-0.5px);
+  display: block;
+}
+.${CLS.collapseIcon}::after { content: '\\25BE'; margin-right: 0.5ch; }
+.${CLS.expandIcon}:hover, .${CLS.collapseIcon}:hover,
+.${CLS.child}:has(> .${CLS.clickableLabel}:hover) > .${CLS.expandIcon},
+.${CLS.child}:has(> .${CLS.clickableLabel}:hover) > .${CLS.collapseIcon} {
+  color: var(--ds-gray-1000);
+}
+.${CLS.collapsedContent} { color: var(--ds-gray-900); }
+.${CLS.collapsedContent}::after { content: '...'; }
+`;