feat: add clickable Run reference rendering in observability UI#1681
Merged
TooTallNate merged 4 commits intomainfrom Apr 14, 2026
Merged
feat: add clickable Run reference rendering in observability UI#1681TooTallNate merged 4 commits intomainfrom
TooTallNate merged 4 commits intomainfrom
Conversation
🦋 Changeset detectedLatest commit: 13b4ed3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 17 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
📊 Benchmark Results
workflow with no steps💻 Local Development
▲ Production (Vercel)
workflow with 1 step💻 Local Development
▲ Production (Vercel)
workflow with 10 sequential steps💻 Local Development
▲ Production (Vercel)
workflow with 25 sequential steps💻 Local Development
▲ Production (Vercel)
workflow with 50 sequential steps💻 Local Development
▲ Production (Vercel)
Promise.all with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
Promise.all with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
Promise.all with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
Promise.race with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
Promise.race with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
Promise.race with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
workflow with 10 sequential data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
workflow with 25 sequential data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
workflow with 50 sequential data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
workflow with 10 concurrent data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
workflow with 25 concurrent data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
workflow with 50 concurrent data payload steps (10KB)💻 Local Development
▲ Production (Vercel)
Stream Benchmarks (includes TTFB metrics)workflow with stream💻 Local Development
▲ Production (Vercel)
stream pipeline with 5 transform steps (1MB)💻 Local Development
▲ Production (Vercel)
10 parallel streams (1MB each)💻 Local Development
▲ Production (Vercel)
fan-out fan-in 10 streams (1MB each)💻 Local Development
▲ Production (Vercel)
SummaryFastest Framework by WorldWinner determined by most benchmark wins
Fastest World by FrameworkWinner determined by most benchmark wins
Column Definitions
Worlds:
❌ Some benchmark jobs failed:
Check the workflow run for details. |
Contributor
🧪 E2E Test Results❌ Some tests failed Summary
❌ Failed Tests🌍 Community Worlds (74 failed)mongodb (7 failed):
redis (7 failed):
turso (60 failed):
Details by Category✅ ▲ Vercel Production
✅ 💻 Local Development
✅ 📦 Local Production
✅ 🐘 Local Postgres
✅ 🪟 Windows
❌ 🌍 Community Worlds
✅ 📋 Other
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a UI-friendly RunRef marker to hydrated observability data so serialized Run values can render as clickable run-id badges that navigate to the referenced run detail page.
Changes:
- Introduce
RunRefin core serialization format and revive serializedRunvalues intoRunReffor o11y hydration. - Render
RunRefinline in the sharedDataInspectorand threadonRunClickthrough trace/detail panels to enable navigation. - Improve fallback naming for steps (built-in steps now show a non-empty name).
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/core/src/serialization-format.ts | Adds RunRef marker/type + reviver so o11y hydration converts serialized Run to display-friendly references. |
| packages/web-shared/src/lib/hydration.ts | Re-exports RunRef utilities/types for web consumers. |
| packages/web-shared/src/components/ui/data-inspector.tsx | Adds inline RunRef rendering + ref-collapsing utilities and click context plumbing. |
| packages/web-shared/src/components/sidebar/attribute-panel.tsx | Provides RunClickContext to sidebar attribute rendering and improves step name fallback display. |
| packages/web-shared/src/components/sidebar/entity-detail-panel.tsx | Threads onRunClick into the sidebar attribute panel. |
| packages/web-shared/src/components/workflow-trace-view.tsx | Threads onRunClick to entity panel and resets selected span when run changes. |
| packages/web-shared/src/components/run-trace-view.tsx | Threads onRunClick into WorkflowTraceViewer. |
| packages/web-shared/src/components/workflow-traces/trace-span-construction.ts | Uses a better step name fallback for span names. |
| packages/web/app/components/run-detail-view.tsx | Implements run-ref click handler that navigates to /run/{runId}. |
| .changeset/o11y-run-ref-rendering.md | Publishes patch bumps for core/web-shared/web for the new o11y behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+303
to
+312
| function collapseRefs(data: unknown): unknown { | ||
| if (data === null || typeof data !== 'object') return data; | ||
| if (isRunRef(data) || isStreamRef(data)) | ||
| return makeOpaqueRef(data as unknown as Record<string, unknown>); | ||
| if (Array.isArray(data)) return data.map(collapseRefs); | ||
| const result: Record<string, unknown> = {}; | ||
| for (const [key, value] of Object.entries(data)) { | ||
| result[key] = collapseRefs(value); | ||
| } | ||
| return result; |
There was a problem hiding this comment.
collapseRefs() rebuilds every non-array object via Object.entries and a new {}. This will strip/flatten non-plain instances that getWebRevivers() explicitly revives (e.g. Date, Error, Map, Set, URL, Headers), often turning them into {} and breaking the existing Date/Error rendering in NodeRenderer. Consider only collapsing refs within plain objects/arrays (e.g., guard on Object.getPrototypeOf(data) being Object.prototype/null) and returning other object instances unchanged; also memoize the collapsed result so it isn’t recomputed (and deep-compared) on every render.
Member
Author
There was a problem hiding this comment.
Fixed. collapseRefs() now checks Object.getPrototypeOf(data) and only recurses into plain objects (Object.prototype or null prototype). Class instances like Date, Error, Map, Set, URL, Headers, etc. are returned unchanged. Also memoized the collapsed result with useMemo to avoid recomputing on every render.
VaguelySerious
approved these changes
Apr 10, 2026
TooTallNate
force-pushed
the
fix/o11y-run-ref-rendering
branch
from
4a71ef7 to
96f8b09
Compare
Both the web and CLI hydration layers override the observabilityRevivers Instance handler with their own implementation (for react-inspector named constructors and CLI inspect.custom respectively), bypassing the RunRef detection in serializedInstanceToRef. Fix by calling serializedInstanceToRef first and returning a RunRef when detected.
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 free
to 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
When a serialized
Runobject appears in step input/output data in the observability UI, it is now rendered as a clickable purple badge showing therunId. Clicking the badge navigates to the target run's detail page.This was extracted from PR #1491 as a standalone o11y feature.
Example: https://workflow-web-git-fix-o11y-run-ref-rendering.labs.vercel.dev/run/wrun_01KP6TB96A83ZJE5PW7Q3H6SX9
Changes
Core
serialization-format.ts: AddRunReftype,isRunRef(),serializedRunToRunRef(), andRunentry inobservabilityReviversWeb Shared
data-inspector.tsx: AddRunRefInlinecomponent (purple clickable badge),RunClickContext,makeOpaqueRef()/collapseRefs()utilities to prevent ObjectInspector from expanding ref objectsattribute-panel.tsx: ThreadonRunClickprop, wrap content inRunClickContext.Provider, improvestepNamedisplay fallbackentity-detail-panel.tsx: ThreadonRunClickproprun-trace-view.tsx: ThreadonRunClickpropworkflow-trace-view.tsx: ThreadonRunClickprop, reset selected span when navigating to a different runtrace-span-construction.ts: Show step name for builtin steps instead of empty stringhydration.ts: Re-exportRunRef,RUN_REF_TYPE,isRunRefWeb
run-detail-view.tsx: AddhandleRunRefClickcallback that navigates to/run/{targetRunId}