Uh oh!
There was an error while loading. Please reload this page.
Extract reusable <DataInspector> component and fix class instance rendering - #1032
Conversation
🦋 Changeset detectedLatest commit: 5493314 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 |
📊 Benchmark Results
workflow with no steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) workflow with 1 step💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Next.js (Turbopack) | Express workflow with 10 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) workflow with 25 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) workflow with 50 sequential steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) Promise.all with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) Promise.all with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express Promise.all with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) Promise.race with 10 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Express | Nitro | Next.js (Turbopack) Promise.race with 25 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express Promise.race with 50 concurrent steps💻 Local Development
▲ Production (Vercel)
🔍 Observability: Next.js (Turbopack) | Nitro | Express Stream Benchmarks(includes TTFB metrics)workflow with stream💻 Local Development
▲ Production (Vercel)
🔍 Observability: Nitro | Express | Next.js (Turbopack) SummaryFastest Framework by WorldWinner determined by most benchmark wins
Fastest World by FrameworkWinner determined by most benchmark wins
Column Definitions
Worlds:
|
🧪 E2E Test Results❌ Some tests failed Summary
❌ Failed Tests📦 Local Production (45 failed)nextjs-turbopack-canary (45 failed):
🐘 Local Postgres (45 failed)nextjs-turbopack-canary (45 failed):
🌍 Community Worlds (42 failed)turso (42 failed):
Details by Category✅ ▲ Vercel Production
✅ 💻 Local Development
❌ 📦 Local Production
❌ 🐘 Local Postgres
✅ 🪟 Windows
❌ 🌍 Community Worlds
✅ 📋 Other
❌ Some E2E test jobs failed:
Check the workflow run for details. |
This stack of pull requests is managed by Graphite. Learn more about stacking. |
There was a problem hiding this comment.
Pull request overview
This PR consolidates data inspection functionality by extracting a reusable <DataInspector> component and improving class instance rendering. The changes replace direct ObjectInspector usage across multiple components with a unified component that provides consistent theming, custom type handling for StreamRef and ClassInstanceRef, and improved class name display in the inspector.
Changes:
- Created a new
<DataInspector>component with custom node rendering and theme support - Updated class instance hydration to use dynamically-named constructors for proper display
- Replaced all
ObjectInspectorusage across 5 components with the newDataInspector
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
packages/web-shared/src/lib/hydration.ts | Modified Instance reviver to create objects with dynamically-named constructors instead of ClassInstanceRef objects |
packages/web-shared/src/components/ui/data-inspector.tsx | New reusable component consolidating ObjectInspector with custom rendering and theming |
packages/web-shared/src/components/stream-viewer.tsx | Replaced ObjectInspector with DataInspector |
packages/web-shared/src/components/sidebar/events-list.tsx | Replaced ObjectInspector with DataInspector |
packages/web-shared/src/components/sidebar/conversation-view.tsx | Replaced JSON.stringify with DataInspector for tool inputs/outputs |
packages/web-shared/src/components/sidebar/attribute-panel.tsx | Removed local StreamRef/ClassInstanceRef handling and adopted DataInspector |
packages/web-shared/src/components/index.ts | Exported DataInspector component |
packages/web-shared/src/components/event-list-view.tsx | Replaced ObjectInspector with DataInspector |
packages/web-shared/package.json | Removed unused color-hash dependencies |
.changeset/new-oranges-joke.md | Added changeset for this patch |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
7a0dc49 to
b1a1c05Compare…endering Consolidate all ObjectInspector usage into a single DataInspector component with shared theming, custom nodeRenderer for StreamRef/ClassInstanceRef, and stream click context. Update all consumers (attribute-panel, events-list, event-list-view, stream-viewer, conversation-view) to use DataInspector instead of direct ObjectInspector or JSON.stringify. Fix class instance hydration to create objects with dynamically-named constructors so react-inspector shows proper class names via constructor.name.
b1a1c05 to
5493314Compare
karthikscale3
left a comment
There was a problem hiding this comment.
Tested it locally and everything looks good.
Uh oh!
There was an error while loading. Please reload this page.

Consolidate all ObjectInspector usage into a single DataInspector component
with shared theming, custom nodeRenderer for StreamRef/ClassInstanceRef, and
stream click context. Update all consumers (attribute-panel, events-list,
event-list-view, stream-viewer, conversation-view) to use DataInspector
instead of direct ObjectInspector or JSON.stringify. Fix class instance
hydration to create objects with dynamically-named constructors so
react-inspector shows proper class names via constructor.name.