Uh oh!
There was an error while loading. Please reload this page.
Render attr_set events and run attributes in the observability UI - #2393
Merged
Conversation
- Teal diamond markers for attr_set events on the trace timeline with time tooltips (new trace viewer) - attr_set payloads render changed/removed keys and the writer (workflow vs step + attempt) in the run sidebar and Events tab - Run root span selection now shows run-level events (run lifecycle + attr_set) in the sidebar - Attributes card on run details renders key-value rows with reserved $-prefixed keys badged and sorted after user keys - attr_set added to MARKER_EVENT_TYPES, BOUNDARY_LABELS, event colors (teal), and the flat events list run-level grouping - Docs: screenshots on the attributes page, served from docs/public Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 6b82ecf The changes in this PR will be included in the next version bump. This PR includes changesets to release 16 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
Contributor
There was a problem hiding this comment.
Pull request overview
This PR makes workflow attributes (materialized run.attributes plus the event-sourced attr_set events) visible and readable across the observability UI surfaces in @workflow/web-shared, including both the old and new trace viewers, the run sidebar, and the Events tab.
Changes:
- Add run-level event selection support so
attr_set(and other run-level events) are reachable from the run root span sidebar. - Render
attr_setas point-in-time markers in the new trace timeline and add consistent coloring/labels forattr_setmarkers in trace viewers. - Introduce shared UI blocks to render run attributes as key/value rows (reserved
$keys badged + sorted last) and renderattr_setpayloads as human-friendly change lists; update docs + changeset accordingly.
Reviewed changes
Copilot reviewed 14 out of 20 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/web-shared/src/lib/trace-builder.ts | Adds isRunLevelEvent + filterSpanRawEvents to consistently map raw events to the selected span (including run root). |
| packages/web-shared/src/components/workflow-traces/trace-span-construction.ts | Adds attr_set to marker event types so it can be represented in span events. |
| packages/web-shared/src/components/workflow-traces/event-colors.ts | Adds a teal palette for attr_set markers. |
| packages/web-shared/src/components/workflow-trace-view.tsx | Uses filterSpanRawEvents so run root selection shows run-level events, not only correlationId-matched child events. |
| packages/web-shared/src/components/trace-viewer/components/node.tsx | Adds attr_set to boundary labels (“Attributes set”) for marker display in the old trace viewer. |
| packages/web-shared/src/components/sidebar/events-list.tsx | Enables lazy-loading and custom payload rendering for attr_set via AttrSetEventBlock. |
| packages/web-shared/src/components/sidebar/entity-detail-panel.tsx | Allows the Events list to render for the run resource (run root span) as well. |
| packages/web-shared/src/components/sidebar/attributes-block.tsx | New shared components: RunAttributesCard and AttrSetEventBlock (+ reserved-key handling/sorting). |
| packages/web-shared/src/components/sidebar/attribute-panel.tsx | Switches run attributes rendering from raw JSON to RunAttributesCard. |
| packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx | Uses filterSpanRawEvents for sidebar raw event selection in the new trace viewer; minor math refactor. |
| packages/web-shared/src/components/new-trace-viewer/components/timeline.tsx | Renders diamond markers for attr_set events on the timeline row with tooltip timestamps. |
| packages/web-shared/src/components/event-list-view.tsx | Adds teal status dot + run-level grouping and expanded payload rendering for attr_set in the Events tab. |
| docs/content/docs/v5/observability/attributes.mdx | Documents how attributes and attr_set events appear in the UI with embedded screenshots. |
| .changeset/witty-pugs-applaud.md | Publishes a patch changeset for the @workflow/web-shared UI enhancements. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+358
to
+371
| <div | ||
| aria-label="Attributes set" | ||
| className="absolute top-1/2 z-10 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center" | ||
| style={{ left: `${frac * 100}%` }} | ||
| > | ||
| <div | ||
| className="h-2 w-2 rotate-45 rounded-[1px] border" | ||
| style={{ | ||
| backgroundColor: 'var(--ds-teal-400)', | ||
| borderColor: 'var(--ds-teal-900)', | ||
| }} | ||
| /> | ||
| </div> | ||
| </TooltipTrigger> |
VaguelySerious
approved these changes
Jun 13, 2026
VaguelySerious
left a comment
Member
There was a problem hiding this comment.
LGTM, nice info here too for the step 👌
|  | ||
| Each `experimental_setAttributes` call appears on the trace timeline as a diamond marker at the moment the attributes were written: |
There was a problem hiding this comment.
I guess we can move it to be setAttributes soon? But not in this PR, since it's also a core method rename, etc.
Uh oh!
There was an error while loading. Please reload this page.
Contributor
Backport to This is usually an infrastructure problem (e.g. the configured AI model could not be found, an AI Gateway error, or an opencode crash) rather than a merge conflict. Check the job logs linked above for details. Once the underlying issue is fixed, re-run the Backport to stable workflow manually via |
This was referenced Jun 13, 2026
pranaygp added a commit
that referenced
this pull request
Jun 14, 2026
* origin/main: docs: document run idempotency (#2011) Render attr_set events and run attributes in observability UI (#2393) [ci] Fix backport job model slug (#2403) [ci] Comment on PR when backport fails, revert to use opus 4.8 (#2400) Update queue client to 0.3.1 (#2399) fix(deps): upgrade esbuild to 0.28.1 (GHSA-gv7w-rqvm-qjhr) (#2395)
pranaygp added a commit
that referenced
this pull request
Jun 16, 2026
* origin/main: Small detail panel cleanup (#2459) Fix lazy Next workflow HMR (#2438) Prevent peer dependency-only major bumps (#2437) fix(changesets): only major-bump peer dependents when out of range (#2439) Version Packages (beta) (#2428) otel: explicit traceparent injection + linked-trace mode for bounded per-invocation traces (#2363) [next] Clarify `serverExternalPackages` warning (#2417) Add .swc gitignore handling to builder (#2427) Version Packages (beta) (#2390) [ci] Increase dev.test.ts cleanup hook timeout (#2416) [world-vercel] Switch event endpoints to v4 wire format (#2055) docs: document run idempotency (#2011) Render attr_set events and run attributes in observability UI (#2393) [ci] Fix backport job model slug (#2403) [ci] Comment on PR when backport fails, revert to use opus 4.8 (#2400) Update queue client to 0.3.1 (#2399) fix(deps): upgrade esbuild to 0.28.1 (GHSA-gv7w-rqvm-qjhr) (#2395) test: e2e coverage for run-idempotency conflict-handling strategies (#2387) # Conflicts: # pnpm-lock.yaml
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Workflow Attributes shipped in v5 (
experimental_setAttributes, initial attributes onstart(), and the event-sourcedattr_setevent), but the observability surfaces never learned how to display them:attr_setevents rendered as opaque rows with no payload, had no presence on the trace timeline, run-level events (includingattr_set) were unreachable from the trace sidebar, and run attributes were dumped as a raw JSON blob with no treatment for reserved$-prefixed keys.This PR makes attributes a first-class citizen across the observability UI (
@workflow/web-shared, used by both the localworkflow webdashboard and the hosted dashboard):attr_setevents render as teal diamond markers on the span row at the moment the write happened, with a tooltip showing the time. (The new trace viewer previously had no per-event rendering at all —attr_setis the only workflow event with no duration/segment representation, so it gets point markers.)attr_set); previously the events list was hidden entirely for runs andattr_setevents were unreachable (their correlationId is a dedup token, not a child-entity ID, so they matched no step/hook/sleep span).attr_setpayload rendering: expanding anattr_setevent (run sidebar or Events tab) renders the changed keys, removed keys (shown as removed), and the writer —Set by workfloworSet by step <stepId> (attempt N)— instead of raw JSON. Added toDATA_EVENT_TYPESso the payload lazy-loads like other event types.$-prefixed keys get aReservedbadge, are de-emphasized, and sort after user keys. The card header shows the count.attr_setrows get a teal status dot, group/label with the run (instead of an orphaned-name), and render the nice payload block when expanded.attr_setadded toMARKER_EVENT_TYPES,BOUNDARY_LABELS(Attributes set), andgetEventColor(teal palette).Attributes set at
start()time (including reserved keys viaallowReservedAttributes, #2385) need no special UI path — they materialize ontorun.attributesat creation and appear in the Attributes card; verified end-to-end below.Screenshots
All screenshots are committed under
docs/public/screenshots/attributes/, so after merge they are statically served by the docs site (https://workflow-sdk.dev/screenshots/attributes/<name>.png) and can be reused in docs pages and public changelogs. The attributes docs page now embeds three of them.The demo run was started with
start(processOrder, ['ord_42'], { attributes: { 'customer.tier': 'pro', region: 'iad1', '$workflow.source': 'checkout-api' }, allowReservedAttributes: true }), then set attributes from the workflow body (including a reserved key and a key removal) and from two steps.Trace timeline —
attr_setdiamond markers on the run rowMarker tooltip on hover
Run details — Attributes card (reserved keys badged + sorted last) and run-level events
Expanded
attr_setevents — step writer with attempt, and key removalEvents tab — teal dots, run-level grouping, expanded payload
CLI
workflow inspect run <id>already surfaces materialized attributes (no change needed):Implementation notes
filterSpanRawEvents(new, inlib/trace-builder.ts) centralizes the sidebar's raw-event filtering for both trace viewers; run-level classification mirrorsgroupEventsByCorrelation's fallthrough.AttrSetEventBlock/RunAttributesCardcomponents live insidebar/attributes-block.tsxand useRESERVED_ATTRIBUTE_KEY_PREFIXfrom@workflow/world.pnpm testin web-shared passes (73 tests);tscbuild clean; biome error count reduced vs. base (import organization in touched files).Docs Preview
Hosted screenshot example (served by the docs deployment): /screenshots/attributes/trace-timeline.png
🤖 Generated with Claude Code