Use react-inspector for data rendering in o11y sidebar
#1018
Conversation
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
🦋 Changeset detectedLatest commit: 3070d49 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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
🧪 E2E Test Results❌ Some tests failed Summary
❌ Failed Tests🌍 Community Worlds (41 failed)turso (41 failed):
Details by Category✅ ▲ Vercel Production
✅ 💻 Local Development
✅ 📦 Local Production
✅ 🐘 Local Postgres
✅ 🪟 Windows
❌ 🌍 Community Worlds
✅ 📋 Other
|
Contributor
This was referenced Feb 12, 2026
Member
Author
This stack of pull requests is managed by Graphite. Learn more about stacking. |
TooTallNate
force-pushed
the
nate/decouple-panel-from-trace-worker
branch
from
81ebf60 to
3f3fcaa
Compare
TooTallNate
force-pushed
the
nate/object-inspector
branch
from
4dba869 to
d35aa29
Compare
TooTallNate
changed the title
Replace the custom JSON.stringify-based JsonBlock renderer with react-inspector's ObjectInspector component. This properly renders non-plain-object types like Map, Set, URLSearchParams, Date, Error, RegExp, typed arrays, Headers, URL, etc. as expandable tree views (similar to Chrome DevTools console output). Pass data directly to ObjectInspector without pre-transformation to preserve object identity (needed for expand/collapse state) and native type rendering (Map, Set, etc.). Custom theme with transparent background and design system colors for both light and dark modes. StreamRef and ClassInstanceRef objects are rendered as custom components at the top level.
Stream chunks were pre-stringified to text before reaching the StreamViewer, losing type information. Now: - useStreamReader returns raw hydrated values (StreamChunk.data) instead of pre-stringified text - StreamViewer renders each chunk with ObjectInspector for proper display of complex types (Map, Set, Date, custom classes, etc.) - Export StreamChunk type from web-shared for consumers
step_created and step_completed events (which carry user data like step arguments and return values) were filtered out by MARKER_EVENT_TYPES and never shown in the sidebar event list. Pass filterTypes=false to convertEventsToSpanEvents for all span types (step, hook, wait, run) so all correlated events are included. The timeline markers are unaffected — they use the showVerticalLine flag which is only true for hook lifecycle events.
TooTallNate
force-pushed
the
graphite-base/1018
branch
from
6214b15 to
4938b24
Compare
TooTallNate
force-pushed
the
nate/object-inspector
branch
from
f117ae4 to
ad5f591
Compare
…ab, extract shared theme Sidebar events now use raw Event objects from the store (filtered by correlationId) instead of SpanEvent objects from the trace worker pipeline. This means: - All correlated events show (step_created, step_started, step_completed) - eventData is available for lazy-loading when the user expands an event - No data goes through the trace worker's postMessage boundary Also: - Fix eventData hydration to handle both eventData.input (step_created) and eventData.result (step_completed) - Events tab: replace JSON.stringify with ObjectInspector - EventsList: lazy-load eventData on expand via onLoadEventData callback - Extract shared inspector theme to ui/inspector-theme.ts - Wire onLoadEventData from run-detail-view through WorkflowTraceViewer to EntityDetailPanel to EventsList
TooTallNate
force-pushed
the
nate/object-inspector
branch
from
ad5f591 to
3070d49
Compare
Contributor
📊 Benchmark Results
workflow with no steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) workflow with 1 step💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Next.js (Turbopack) | Nitro workflow with 10 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) workflow with 25 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) workflow with 50 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Next.js (Turbopack) | Nitro Promise.all with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Next.js (Turbopack) | Express Promise.all with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) Promise.all with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) Promise.race with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Next.js (Turbopack) | Nitro Promise.race with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) Promise.race with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) Stream Benchmarks (includes TTFB metrics)workflow with stream💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) SummaryFastest Framework by WorldWinner determined by most benchmark wins
Fastest World by FrameworkWinner determined by most benchmark wins
Column Definitions
Worlds:
|
Member
Author
Merge activity
|
karthikscale3
added a commit
that referenced
this pull request
Feb 13, 2026
Bring web-shared o11y rendering files back in sync with main so ObjectInspector-based sidebar rendering and related UI behavior from PR #1018 remain intact on this branch. Co-authored-by: Cursor <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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
Replace the custom
JSON.stringify-based data renderer withreact-inspector'sObjectInspectorcomponent for proper display of all JavaScript types in the o11y sidebar panel.Before
Data was rendered via
JSON.stringify(value, null, 2)in a<pre>block. Non-plain-object types likeMap,Set,URLSearchParams,Date,Error,RegExp, and typed arrays all rendered as{}or lost their type information.After
Uses
react-inspector(the same rendering engine as Chrome DevTools) to display data as expandable tree views with proper type labels:URLSearchParams {size: 12}with entries visibleMap(3)/Set(5)with contentsDate "2026-02-11T..."Error {message: "...", stack: "..."}Uint8Array(32)with byte valuesImplementation
JsonBlockfunction withDataInspectorcomponent usingObjectInspector--ds-gray-*,--font-mono)useDarkModehookStreamRefandClassInstanceRefobjects still render as custom components (clickable stream links and styled class cards)Dependencies
react-inspector@9to@workflow/web-shared