From 8e36707662a693dade5d24db83bc3de78b11ff7a Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 30 Apr 2026 17:02:48 -0400
Subject: [PATCH 1/3] [trace viewer] better json handling on the detail panel

---
 packages/web-shared/package.json              |    2 +-
 .../components/event-list.tsx                 |   18 +-
 .../middle-truncate/middle-truncate.tsx       |   12 +-
 .../new-trace-viewer/trace-viewer.tsx         |   88 +-
 .../sidebar/copyable-data-block.tsx           |    2 +-
 .../src/components/ui/data-inspector-tree.tsx | 1162 +++++++++++++++++
 .../src/components/ui/data-inspector.tsx      |   27 +-
 .../src/components/ui/inspector-theme.ts      |  110 --
 packages/web-shared/src/styles.css            |  233 ++++
 9 files changed, 1465 insertions(+), 189 deletions(-)
 create mode 100644 packages/web-shared/src/components/ui/data-inspector-tree.tsx
 delete mode 100644 packages/web-shared/src/components/ui/inspector-theme.ts

diff --git a/packages/web-shared/package.json b/packages/web-shared/package.json
index 6b170a37e0..9a5607f6d3 100644
--- a/packages/web-shared/package.json
+++ b/packages/web-shared/package.json
@@ -58,7 +58,7 @@
     "lucide-react": "0.575.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "react-inspector": "9.0.0",
+    "react-json-view-lite": "2.5.0",
     "react-virtuoso": "4.18.1",
     "shiki": "4.0.0",
     "sonner": "2.0.7",
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx b/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx
index 973b27bf4f..5bda8b74aa 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx
@@ -61,24 +61,24 @@ const EventRow = ({
         'relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400',
         ROW_HEIGHT_CLASS
       )}
-      role='treeitem'
+      role="treeitem"
       aria-selected={isSelected}
       aria-expanded={isSelected}
       aria-level={1}
       onClick={() => onSelectSpan(span.spanId)}
     >
-      <div className='h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200'>
-        <div className='flex h-full min-w-0 items-center px-2'>
-          <div className='flex min-w-0 flex-1 items-center gap-2'>
+      <div className="h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200">
+        <div className="flex h-full min-w-0 items-center px-2">
+          <div className="flex min-w-0 flex-1 items-center gap-2">
             <span className={cn('shrink-0', tagClassName)}>
-              <Icon className='w-4 h-4' />
+              <Icon className="w-4 h-4" />
             </span>
-            <span className='min-w-0 text-label-14'>
+            <span className="min-w-0 text-label-14">
               <MiddleTruncate value={span.name} />
             </span>
           </div>
-          <div className='ml-2 shrink-0'>
-            <span className='text-label-14 text-gray-900 tabular-nums'>
+          <div className="ml-2 shrink-0">
+            <span className="text-label-14 text-gray-900 tabular-nums">
               {formatDuration(durationMs)}
             </span>
           </div>
@@ -98,7 +98,7 @@ const EventList = ({
   onSelectSpan: (spanId: string) => void;
 }) => {
   return (
-    <ul id='event-list' role='tree' className='block min-h-0 overflow-visible'>
+    <ul id="event-list" role="tree" className="block min-h-0 overflow-visible">
       {spans.map((span) => {
         return (
           <EventRow
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/middle-truncate.tsx b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/middle-truncate.tsx
index c17b5ab173..9f2ac3b4b9 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/middle-truncate.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/middle-truncate.tsx
@@ -122,16 +122,16 @@ function MiddleTruncate({
       )}
       onCopy={handleCopy}
     >
-      {isTruncated && <span className='sr-only select-none'>{value}</span>}
+      {isTruncated && <span className="sr-only select-none">{value}</span>}
       <span
-        aria-hidden='true'
-        className='pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap'
+        aria-hidden="true"
+        className="pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap"
       >
         {value}
       </span>
       <span
         aria-hidden={isTruncated || undefined}
-        className='col-start-1 row-start-1 min-w-0 overflow-hidden'
+        className="col-start-1 row-start-1 min-w-0 overflow-hidden"
         ref={visibleRef}
       >
         {isTruncated ? (
@@ -145,8 +145,8 @@ function MiddleTruncate({
         )}
       </span>
       <span
-        aria-hidden='true'
-        className='pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap'
+        aria-hidden="true"
+        className="pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap"
         ref={measureRef}
       />
     </span>
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 3332994d4c..abccaa574e 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
@@ -469,35 +469,35 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   return (
     <div
-      data-pane='pane-root'
+      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,420px,100%)]'
+      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]"
     >
       <div
-        id='trace-parent'
-        className='grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100'
+        id="trace-parent"
+        className="grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
       >
         <SplitPane
           startHeader={
-            <div className='bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5'>
-              <Search className='w-3.5 h-3.5 shrink-0 text-gray-800' />
+            <div className="bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5">
+              <Search className="w-3.5 h-3.5 shrink-0 text-gray-800" />
               <input
-                id='trace-viewer-search'
-                name='trace-viewer-search'
-                type='text'
+                id="trace-viewer-search"
+                name="trace-viewer-search"
+                type="text"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder='Search spans...'
-                aria-label='Search spans'
-                className='flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none'
+                placeholder="Search spans..."
+                aria-label="Search spans"
+                className="flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none"
               />
               {searchQuery && (
                 <button
-                  type='button'
+                  type="button"
                   onClick={() => setSearchQuery('')}
-                  className='shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors'
+                  className="shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors"
                 >
-                  <X className='w-3 h-3' />
+                  <X className="w-3 h-3" />
                 </button>
               )}
             </div>
@@ -506,7 +506,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             <TimelineHeader markers={timeMarkers} hoverInfo={hoverInfo} />
           }
         >
-          <div className='block overflow-visible'>
+          <div className="block overflow-visible">
             <EventList
               spans={filteredSpans}
               activeSpanId={activeSpanId}
@@ -515,7 +515,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           </div>
           <div
             ref={timelineRef}
-            className='block min-h-0 overflow-visible relative'
+            className="block min-h-0 overflow-visible relative"
             onDoubleClick={resetZoom}
             onMouseMove={handleTimelineMouseMove}
             onMouseLeave={handleTimelineMouseLeave}
@@ -532,46 +532,46 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             />
           </div>
         </SplitPane>
-        <div className='absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400'>
+        <div className="absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400">
           <button
-            type='button'
-            className='flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100'
+            type="button"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
             onClick={zoomOut}
-            aria-label='Zoom out'
+            aria-label="Zoom out"
           >
-            <ZoomOut className='w-4 h-4' />
+            <ZoomOut className="w-4 h-4" />
           </button>
           <button
-            type='button'
-            className='flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100'
+            type="button"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
             onClick={resetZoom}
-            aria-label='Reset zoom'
+            aria-label="Reset zoom"
           >
-            <RotateCcw className='w-3.5 h-3.5' />
+            <RotateCcw className="w-3.5 h-3.5" />
           </button>
           <button
-            type='button'
-            className='flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100'
+            type="button"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
             onClick={zoomIn}
-            aria-label='Zoom in'
+            aria-label="Zoom in"
           >
-            <ZoomIn className='w-4 h-4' />
+            <ZoomIn className="w-4 h-4" />
           </button>
         </div>
       </div>
 
       {/* Detail panel */}
       {activeSpan && sidebar ? (
-        <aside className='flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto'>
+        <aside className="flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto">
           {/* Panel header */}
-          <div className='flex-shrink-0 px-4 pt-4 pb-3'>
-            <div className='flex items-start justify-between gap-2'>
-              <div className='min-w-0 flex-1'>
-                <span className='text-[15px] font-semibold text-gray-1000 truncate block'>
+          <div className="flex-shrink-0 px-4 pt-4 pb-3">
+            <div className="flex items-start justify-between gap-2">
+              <div className="min-w-0 flex-1">
+                <span className="text-[15px] font-semibold text-gray-1000 truncate block">
                   {selectedSpanName}
                 </span>
                 {selectedResourceId && (
-                  <div className='mt-1 flex items-center gap-2'>
+                  <div className="mt-1 flex items-center gap-2">
                     {selectedResource && (
                       <span
                         className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none shrink-0 ${
@@ -589,30 +589,30 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
                       </span>
                     )}
                     <div
-                      className='flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0'
+                      className="flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0"
                       title={selectedResourceId}
                     >
-                      <span className='truncate'>{selectedResourceId}</span>
+                      <span className="truncate">{selectedResourceId}</span>
                       <CopyButton
                         copyText={selectedResourceId}
-                        ariaLabel='Copy ID'
-                        className='shrink-0'
+                        ariaLabel="Copy ID"
+                        className="shrink-0"
                       />
                     </div>
                   </div>
                 )}
               </div>
               <button
-                type='button'
-                className='p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0'
+                type="button"
+                className="p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0"
                 onClick={clearActiveSpan}
               >
-                <X className='w-4 h-4' />
+                <X className="w-4 h-4" />
               </button>
             </div>
           </div>
           {/* Panel body */}
-          <div className='flex-1 overflow-y-auto'>
+          <div className="flex-1 overflow-y-auto">
             <ErrorBoundary>
               <EntityDetailPanel
                 run={sidebar.run}
diff --git a/packages/web-shared/src/components/sidebar/copyable-data-block.tsx b/packages/web-shared/src/components/sidebar/copyable-data-block.tsx
index d77f4376f9..bc2aa2a9f6 100644
--- a/packages/web-shared/src/components/sidebar/copyable-data-block.tsx
+++ b/packages/web-shared/src/components/sidebar/copyable-data-block.tsx
@@ -31,7 +31,7 @@ export function CopyableDataBlock({ data }: { data: unknown }) {
         type="button"
         aria-label="Copy data"
         title="Copy"
-        className="!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border !bg-[var(--ds-background-100)] !text-[var(--ds-gray-800)] transition-transform transition-colors duration-100 hover:!bg-[var(--ds-gray-alpha-200)] active:!scale-95 active:!bg-[var(--ds-gray-alpha-300)]"
+        className="!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border !bg-[var(--ds-background-100)] !text-[var(--ds-gray-800)] transition duration-100 hover:!bg-[var(--ds-gray-alpha-200)] active:!scale-95 active:!bg-[var(--ds-gray-alpha-300)]"
         style={{ borderColor: 'var(--ds-gray-300)' }}
         onClick={() => {
           navigator.clipboard
diff --git a/packages/web-shared/src/components/ui/data-inspector-tree.tsx b/packages/web-shared/src/components/ui/data-inspector-tree.tsx
new file mode 100644
index 0000000000..ac2146e1f7
--- /dev/null
+++ b/packages/web-shared/src/components/ui/data-inspector-tree.tsx
@@ -0,0 +1,1162 @@
+'use client';
+
+/**
+ * Reusable data inspector component with a compact JSON tree renderer.
+ *
+ * The tree presentation is intentionally closer to Vercel's newer JSON
+ * rendering pattern: tighter spacing, click-to-expand labels, explicit
+ * collapsed previews, and syntax-colored keys/values. Workflow-specific
+ * badges (stream refs, run refs, decrypt actions) are preserved.
+ */
+
+import { Lock } from 'lucide-react';
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { useDarkMode } from '../../hooks/use-dark-mode';
+import { ENCRYPTED_DISPLAY_NAME } from '../../lib/hydration';
+import { Spinner } from './spinner';
+
+// ---------------------------------------------------------------------------
+// StreamRef / ClassInstanceRef type detection
+// (inline to avoid circular deps with hydration module)
+// ---------------------------------------------------------------------------
+
+const STREAM_REF_TYPE = '__workflow_stream_ref__';
+const CLASS_INSTANCE_REF_TYPE = '__workflow_class_instance_ref__';
+const RUN_REF_TYPE = '__workflow_run_ref__';
+
+interface StreamRef {
+  __type: typeof STREAM_REF_TYPE;
+  streamId: string;
+}
+
+interface RunRef {
+  __type: typeof RUN_REF_TYPE;
+  runId: string;
+}
+
+type TypedArrayValue =
+  | BigInt64Array
+  | BigUint64Array
+  | Float32Array
+  | Float64Array
+  | Int8Array
+  | Int16Array
+  | Int32Array
+  | Uint8Array
+  | Uint8ClampedArray
+  | Uint16Array
+  | Uint32Array;
+
+function isStreamRef(value: unknown): value is StreamRef {
+  if (value === null || typeof value !== 'object') return false;
+  // Check both enumerable and non-enumerable __type (opaque refs use non-enumerable)
+  const desc = Object.getOwnPropertyDescriptor(value, '__type');
+  return desc?.value === STREAM_REF_TYPE;
+}
+
+function isRunRef(value: unknown): value is RunRef {
+  if (value === null || typeof value !== 'object') return false;
+  const desc = Object.getOwnPropertyDescriptor(value, '__type');
+  return desc?.value === RUN_REF_TYPE;
+}
+
+function isClassInstanceRef(value: unknown): value is {
+  __type: string;
+  className: string;
+  classId: string;
+  data: unknown;
+} {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    '__type' in value &&
+    (value as Record<string, unknown>).__type === CLASS_INSTANCE_REF_TYPE
+  );
+}
+
+function isTypedArray(value: unknown): value is TypedArrayValue {
+  return ArrayBuffer.isView(value) && !(value instanceof DataView);
+}
+
+function isEncryptedDisplay(value: unknown): boolean {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    value.constructor?.name === ENCRYPTED_DISPLAY_NAME
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Stream / decrypt contexts
+// ---------------------------------------------------------------------------
+
+/**
+ * Context for passing stream click handlers down to DataInspector instances.
+ * Exported so that parent components (e.g., AttributePanel) can provide the handler.
+ */
+export const StreamClickContext = createContext<
+  ((streamId: string) => void) | undefined
+>(undefined);
+
+/**
+ * Context for passing a decrypt handler down to DataInspector instances.
+ * When provided, encrypted markers become clickable buttons that trigger decryption.
+ */
+export type DecryptClickContextValue = {
+  onDecrypt: () => void;
+  isDecrypting: boolean;
+};
+
+export const DecryptClickContext = createContext<
+  DecryptClickContextValue | undefined
+>(undefined);
+
+export const RunClickContext = createContext<
+  ((runId: string) => void) | undefined
+>(undefined);
+
+function EncryptedInlineLabel() {
+  const ctx = useContext(DecryptClickContext);
+  if (ctx) {
+    return (
+      <button
+        type="button"
+        className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px]"
+        style={{
+          backgroundColor: 'var(--ds-gray-100)',
+          color: 'var(--ds-gray-700)',
+          border: '1px solid var(--ds-gray-400)',
+          fontStyle: 'italic',
+          opacity: ctx.isDecrypting ? 0.6 : 1,
+        }}
+        disabled={ctx.isDecrypting}
+        onClick={(event) => {
+          event.stopPropagation();
+          ctx.onDecrypt();
+        }}
+        title="Click to decrypt"
+      >
+        {ctx.isDecrypting ? (
+          <Spinner size={12} />
+        ) : (
+          <Lock
+            className="h-3 w-3"
+            style={{ display: 'inline', flexShrink: 0 }}
+          />
+        )}
+        <span>{ctx.isDecrypting ? 'Decrypting...' : 'Decrypt'}</span>
+      </button>
+    );
+  }
+
+  return (
+    <span style={{ color: 'var(--ds-gray-600)', fontStyle: 'italic' }}>
+      <Lock
+        className="h-3 w-3"
+        style={{
+          display: 'inline',
+          verticalAlign: 'middle',
+          marginRight: '3px',
+          marginTop: '-1px',
+        }}
+      />
+      Encrypted
+    </span>
+  );
+}
+
+function StreamRefInline({ streamRef }: { streamRef: StreamRef }) {
+  const onStreamClick = useContext(StreamClickContext);
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <button
+      type="button"
+      className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-mono underline decoration-transparent transition-colors"
+      style={{
+        backgroundColor: hovered ? 'var(--ds-blue-200)' : 'var(--ds-blue-100)',
+        color: 'var(--ds-blue-900)',
+        border: '1px solid var(--ds-blue-300)',
+      }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={(event) => {
+        event.stopPropagation();
+        onStreamClick?.(streamRef.streamId);
+      }}
+      title={`View stream: ${streamRef.streamId}`}
+    >
+      <span>📡</span>
+      <span>{streamRef.streamId}</span>
+    </button>
+  );
+}
+
+function RunRefInline({ runRef }: { runRef: RunRef }) {
+  const onRunClick = useContext(RunClickContext);
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <button
+      type="button"
+      className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-mono underline decoration-transparent transition-colors"
+      style={{
+        backgroundColor: hovered
+          ? 'var(--ds-purple-200)'
+          : 'var(--ds-purple-100)',
+        color: 'var(--ds-purple-900)',
+        border: '1px solid var(--ds-purple-300)',
+      }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={(event) => {
+        event.stopPropagation();
+        onRunClick?.(runRef.runId);
+      }}
+      title={`View run: ${runRef.runId}`}
+    >
+      <span>{runRef.runId}</span>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// JSON tree rendering
+// ---------------------------------------------------------------------------
+
+type JsonPathSegment = number | string;
+
+interface TreeEntry {
+  key: string;
+  pathSegment: JsonPathSegment;
+  value: unknown;
+}
+
+interface TreePrefix {
+  text: string;
+  italic?: boolean;
+}
+
+interface CompositeDescriptor {
+  close: ']' | '}';
+  entries: TreeEntry[];
+  open: '[' | '{';
+  prefix?: TreePrefix;
+}
+
+interface JsonTreeStyles {
+  boolean: CSSProperties;
+  childContainer: CSSProperties;
+  circular: CSSProperties;
+  clickableKey: CSSProperties;
+  collapsed: CSSProperties;
+  container: CSSProperties;
+  date: CSSProperties;
+  iconButton: CSSProperties;
+  key: CSSProperties;
+  meta: CSSProperties;
+  nullish: CSSProperties;
+  number: CSSProperties;
+  punctuation: CSSProperties;
+  row: CSSProperties;
+  string: CSSProperties;
+}
+
+interface JsonNodeProps {
+  ancestors: object[];
+  data: unknown;
+  depth: number;
+  expandLevel: number;
+  expandedPaths: Record<string, boolean>;
+  isLast: boolean;
+  name?: string;
+  onToggle: (pathKey: string, defaultExpanded: boolean) => void;
+  path: JsonPathSegment[];
+  styles: JsonTreeStyles;
+}
+
+interface JsonLeafRowProps {
+  isLast: boolean;
+  name?: string;
+  prefix?: TreePrefix;
+  styles: JsonTreeStyles;
+  value: ReactNode;
+}
+
+interface JsonCompositeRowProps {
+  ancestors: object[];
+  depth: number;
+  descriptor: CompositeDescriptor;
+  expandLevel: number;
+  expandedPaths: Record<string, boolean>;
+  isLast: boolean;
+  name?: string;
+  onToggle: (pathKey: string, defaultExpanded: boolean) => void;
+  path: JsonPathSegment[];
+  styles: JsonTreeStyles;
+}
+
+function createTreeStyles(isDark: boolean): JsonTreeStyles {
+  return {
+    container: {
+      color: 'var(--ds-gray-1000)',
+      fontFamily: 'var(--font-mono)',
+      fontSize: '11px',
+      lineHeight: '20px',
+      overflowWrap: 'anywhere',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+    },
+    row: {
+      display: 'block',
+      margin: 0,
+      padding: 0,
+    },
+    childContainer: {
+      margin: 0,
+      padding: 0,
+      paddingLeft: '2ch',
+    },
+    key: {
+      color: isDark ? 'var(--ds-pink-700)' : 'var(--ds-pink-900)',
+      fontWeight: 400,
+    },
+    clickableKey: {
+      background: 'transparent',
+      border: 0,
+      color: isDark ? 'var(--ds-pink-700)' : 'var(--ds-pink-900)',
+      cursor: 'pointer',
+      font: 'inherit',
+      fontWeight: 400,
+      lineHeight: 'inherit',
+      margin: 0,
+      padding: 0,
+      textAlign: 'left',
+    },
+    punctuation: {
+      color: 'var(--ds-gray-1000)',
+    },
+    string: {
+      color: isDark ? 'var(--ds-blue-700)' : 'var(--ds-green-900)',
+    },
+    number: {
+      color: isDark ? 'var(--ds-blue-700)' : 'var(--ds-blue-900)',
+    },
+    boolean: {
+      color: isDark ? 'var(--ds-amber-700)' : 'var(--ds-amber-900)',
+    },
+    nullish: {
+      color: isDark ? 'var(--ds-gray-700)' : 'var(--ds-gray-900)',
+    },
+    date: {
+      color: isDark ? 'var(--ds-pink-700)' : 'var(--ds-pink-900)',
+    },
+    meta: {
+      color: isDark ? 'var(--ds-gray-700)' : 'var(--ds-gray-900)',
+    },
+    iconButton: {
+      alignItems: 'center',
+      background: 'transparent',
+      border: 0,
+      borderRadius: '4px',
+      boxSizing: 'border-box',
+      color: isDark ? '#fff' : 'var(--ds-gray-900)',
+      cursor: 'pointer',
+      display: 'inline-flex',
+      fontFamily: 'inherit',
+      fontSize: '14px',
+      fontWeight: 600,
+      justifyContent: 'center',
+      lineHeight: 1,
+      margin: 0,
+      marginRight: '0.25ch',
+      minHeight: '18px',
+      minWidth: '18px',
+      padding: 0,
+      userSelect: 'none',
+      verticalAlign: 'middle',
+    },
+    collapsed: {
+      color: isDark ? 'var(--ds-gray-700)' : 'var(--ds-gray-900)',
+    },
+    circular: {
+      color: isDark ? 'var(--ds-gray-700)' : 'var(--ds-gray-900)',
+      fontStyle: 'italic',
+    },
+  };
+}
+
+function DisclosureChevron({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      aria-hidden="true"
+      data-slot="geist-icon"
+      height="14"
+      viewBox="0 0 16 16"
+      width="14"
+      style={{
+        color: 'currentcolor',
+        display: 'block',
+        transform: expanded ? 'rotate(90deg)' : 'none',
+        transformOrigin: '50% 50%',
+        transition: 'transform 120ms ease',
+      }}
+    >
+      <path
+        d="M10.1016 7.29297C10.4921 7.68349 10.4921 8.31651 10.1016 8.70703L6.74805 12.0605L5.6875 11L8.6875 8L5.6875 5L6.74805 3.93945L10.1016 7.29297Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function JsonTree({
+  data,
+  expandLevel,
+  name,
+}: {
+  data: unknown;
+  expandLevel: number;
+  name?: string;
+}) {
+  const [expandedPaths, setExpandedPaths] = useState<Record<string, boolean>>(
+    {}
+  );
+  const isDark = useDarkMode();
+  const styles = useMemo(() => createTreeStyles(isDark), [isDark]);
+
+  return (
+    <div style={styles.container}>
+      <JsonNode
+        ancestors={[]}
+        data={data}
+        depth={0}
+        expandLevel={expandLevel}
+        expandedPaths={expandedPaths}
+        isLast
+        name={name}
+        onToggle={(pathKey, defaultExpanded) => {
+          setExpandedPaths((current) => ({
+            ...current,
+            [pathKey]: !(current[pathKey] ?? defaultExpanded),
+          }));
+        }}
+        path={[]}
+        styles={styles}
+      />
+    </div>
+  );
+}
+
+function JsonNode({
+  ancestors,
+  data,
+  depth,
+  expandLevel,
+  expandedPaths,
+  isLast,
+  name,
+  onToggle,
+  path,
+  styles,
+}: JsonNodeProps) {
+  if (isEncryptedDisplay(data)) {
+    return (
+      <JsonLeafRow
+        isLast={isLast}
+        name={name}
+        styles={styles}
+        value={<EncryptedInlineLabel />}
+      />
+    );
+  }
+
+  if (isStreamRef(data)) {
+    return (
+      <JsonLeafRow
+        isLast={isLast}
+        name={name}
+        styles={styles}
+        value={<StreamRefInline streamRef={data} />}
+      />
+    );
+  }
+
+  if (isRunRef(data)) {
+    return (
+      <JsonLeafRow
+        isLast={isLast}
+        name={name}
+        styles={styles}
+        value={<RunRefInline runRef={data} />}
+      />
+    );
+  }
+
+  if (isClassInstanceRef(data)) {
+    const prefix = { italic: true, text: data.className } satisfies TreePrefix;
+    const innerValue = data.data;
+
+    if (isObjectLike(innerValue) && ancestors.includes(innerValue)) {
+      return (
+        <JsonLeafRow
+          isLast={isLast}
+          name={name}
+          prefix={prefix}
+          styles={styles}
+          value={<span style={styles.circular}>[Circular]</span>}
+        />
+      );
+    }
+
+    const descriptor = getCompositeDescriptor(innerValue);
+    if (descriptor) {
+      return (
+        <JsonCompositeRow
+          ancestors={
+            isObjectLike(innerValue) ? [...ancestors, innerValue] : ancestors
+          }
+          depth={depth}
+          descriptor={{ ...descriptor, prefix }}
+          expandLevel={expandLevel}
+          expandedPaths={expandedPaths}
+          isLast={isLast}
+          name={name}
+          onToggle={onToggle}
+          path={path}
+          styles={styles}
+        />
+      );
+    }
+
+    return (
+      <JsonLeafRow
+        isLast={isLast}
+        name={name}
+        prefix={prefix}
+        styles={styles}
+        value={formatInlineValue(innerValue, styles)}
+      />
+    );
+  }
+
+  if (isObjectLike(data) && ancestors.includes(data)) {
+    return (
+      <JsonLeafRow
+        isLast={isLast}
+        name={name}
+        styles={styles}
+        value={<span style={styles.circular}>[Circular]</span>}
+      />
+    );
+  }
+
+  const descriptor = getCompositeDescriptor(data);
+  if (descriptor) {
+    return (
+      <JsonCompositeRow
+        ancestors={isObjectLike(data) ? [...ancestors, data] : ancestors}
+        depth={depth}
+        descriptor={descriptor}
+        expandLevel={expandLevel}
+        expandedPaths={expandedPaths}
+        isLast={isLast}
+        name={name}
+        onToggle={onToggle}
+        path={path}
+        styles={styles}
+      />
+    );
+  }
+
+  return (
+    <JsonLeafRow
+      isLast={isLast}
+      name={name}
+      styles={styles}
+      value={formatInlineValue(data, styles)}
+    />
+  );
+}
+
+function JsonLeafRow({
+  isLast,
+  name,
+  prefix,
+  styles,
+  value,
+}: JsonLeafRowProps) {
+  return (
+    <div style={styles.row}>
+      {name != null ? <span style={styles.key}>{name}</span> : null}
+      {name != null ? <span style={styles.punctuation}>: </span> : null}
+      {prefix ? (
+        <span style={getPrefixStyle(prefix, styles)}>{prefix.text} </span>
+      ) : null}
+      {value}
+      {!isLast ? <span style={styles.punctuation}>,</span> : null}
+    </div>
+  );
+}
+
+function JsonCompositeRow({
+  ancestors,
+  depth,
+  descriptor,
+  expandLevel,
+  expandedPaths,
+  isLast,
+  name,
+  onToggle,
+  path,
+  styles,
+}: JsonCompositeRowProps) {
+  if (descriptor.entries.length === 0) {
+    return (
+      <JsonLeafRow
+        isLast={isLast}
+        name={name}
+        prefix={descriptor.prefix}
+        styles={styles}
+        value={
+          <span style={styles.punctuation}>
+            {descriptor.open}
+            {descriptor.close}
+          </span>
+        }
+      />
+    );
+  }
+
+  const pathKey = JSON.stringify(path);
+  const defaultExpanded = depth < expandLevel;
+  const isExpanded = expandedPaths[pathKey] ?? defaultExpanded;
+
+  const toggle = () => {
+    onToggle(pathKey, defaultExpanded);
+  };
+
+  return (
+    <>
+      <div style={styles.row}>
+        <button
+          aria-expanded={isExpanded}
+          aria-label={isExpanded ? 'Collapse node' : 'Expand node'}
+          onClick={toggle}
+          style={styles.iconButton}
+          type="button"
+        >
+          <DisclosureChevron expanded={isExpanded} />
+        </button>
+        {name != null ? (
+          <>
+            <button onClick={toggle} style={styles.clickableKey} type="button">
+              {name}
+            </button>
+            <span style={styles.punctuation}>: </span>
+          </>
+        ) : null}
+        {descriptor.prefix ? (
+          <span style={getPrefixStyle(descriptor.prefix, styles)}>
+            {descriptor.prefix.text}{' '}
+          </span>
+        ) : null}
+        <span style={styles.punctuation}>{descriptor.open}</span>
+        {!isExpanded ? (
+          <>
+            <span style={styles.collapsed}>...</span>
+            <span style={styles.punctuation}>{descriptor.close}</span>
+            {!isLast ? <span style={styles.punctuation}>,</span> : null}
+          </>
+        ) : null}
+      </div>
+      {isExpanded ? (
+        <>
+          <div style={styles.childContainer}>
+            {descriptor.entries.map((entry, index) => (
+              <JsonNode
+                key={JSON.stringify([...path, entry.pathSegment])}
+                ancestors={ancestors}
+                data={entry.value}
+                depth={depth + 1}
+                expandLevel={expandLevel}
+                expandedPaths={expandedPaths}
+                isLast={index === descriptor.entries.length - 1}
+                name={entry.key}
+                onToggle={onToggle}
+                path={[...path, entry.pathSegment]}
+                styles={styles}
+              />
+            ))}
+          </div>
+          <div style={styles.row}>
+            <span style={styles.punctuation}>{descriptor.close}</span>
+            {!isLast ? <span style={styles.punctuation}>,</span> : null}
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}
+
+function getCompositeDescriptor(value: unknown): CompositeDescriptor | null {
+  if (Array.isArray(value)) {
+    return {
+      close: ']',
+      entries: Array.from({ length: value.length }, (_, index) => ({
+        key: String(index),
+        pathSegment: index,
+        value: value[index],
+      })),
+      open: '[',
+    };
+  }
+
+  if (value instanceof Map) {
+    return {
+      close: '}',
+      entries: Array.from(value.entries(), ([entryKey, entryValue], index) => ({
+        key: formatMapKey(entryKey, index),
+        pathSegment: index,
+        value: entryValue,
+      })),
+      open: '{',
+      prefix: { text: `Map(${value.size})` },
+    };
+  }
+
+  if (value instanceof Set) {
+    return {
+      close: ']',
+      entries: Array.from(value.values(), (entryValue, index) => ({
+        key: String(index),
+        pathSegment: index,
+        value: entryValue,
+      })),
+      open: '[',
+      prefix: { text: `Set(${value.size})` },
+    };
+  }
+
+  if (isTypedArray(value)) {
+    return {
+      close: ']',
+      entries: getTypedArrayEntries(value),
+      open: '[',
+      prefix: { text: `${value.constructor.name}(${value.length})` },
+    };
+  }
+
+  if (value instanceof Headers) {
+    return {
+      close: '}',
+      entries: Array.from(value.entries(), ([entryKey, entryValue], index) => ({
+        key: entryKey,
+        pathSegment: `${entryKey}-${index}`,
+        value: entryValue,
+      })),
+      open: '{',
+      prefix: { text: 'Headers' },
+    };
+  }
+
+  if (value instanceof URLSearchParams) {
+    return {
+      close: '}',
+      entries: Array.from(value.entries(), ([entryKey, entryValue], index) => ({
+        key: entryKey,
+        pathSegment: `${entryKey}-${index}`,
+        value: entryValue,
+      })),
+      open: '{',
+      prefix: { text: 'URLSearchParams' },
+    };
+  }
+
+  if (value instanceof Error) {
+    return {
+      close: '}',
+      entries: getErrorEntries(value).map(([entryKey, entryValue]) => ({
+        key: entryKey,
+        pathSegment: entryKey,
+        value: entryValue,
+      })),
+      open: '{',
+      prefix: { text: value.name || 'Error' },
+    };
+  }
+
+  if (
+    value instanceof ArrayBuffer ||
+    value instanceof DataView ||
+    value instanceof Date ||
+    value instanceof Promise ||
+    value instanceof RegExp ||
+    value instanceof URL ||
+    value instanceof WeakMap ||
+    value instanceof WeakSet
+  ) {
+    return null;
+  }
+
+  if (!isObjectLike(value)) {
+    return null;
+  }
+
+  const constructorName = getConstructorName(value);
+  return {
+    close: '}',
+    entries: Object.entries(value).map(([entryKey, entryValue]) => ({
+      key: entryKey,
+      pathSegment: entryKey,
+      value: entryValue,
+    })),
+    open: '{',
+    prefix:
+      constructorName && constructorName !== 'Object'
+        ? { text: constructorName }
+        : undefined,
+  };
+}
+
+function getErrorEntries(error: Error): Array<[string, unknown]> {
+  const entries: Array<[string, unknown]> = [];
+
+  if (error.message) {
+    entries.push(['message', error.message]);
+  }
+  if (error.stack) {
+    entries.push(['stack', error.stack]);
+  }
+
+  const errorWithCause = error as Error & { cause?: unknown };
+  if ('cause' in errorWithCause && errorWithCause.cause !== undefined) {
+    entries.push(['cause', errorWithCause.cause]);
+  }
+
+  for (const [key, value] of Object.entries(error)) {
+    if (!entries.some(([existingKey]) => existingKey === key)) {
+      entries.push([key, value]);
+    }
+  }
+
+  return entries;
+}
+
+function getTypedArrayEntries(value: TypedArrayValue): TreeEntry[] {
+  const entries: TreeEntry[] = [];
+  for (let index = 0; index < value.length; index += 1) {
+    entries.push({
+      key: String(index),
+      pathSegment: index,
+      value: value[index],
+    });
+  }
+  return entries;
+}
+
+function formatInlineValue(value: unknown, styles: JsonTreeStyles): ReactNode {
+  if (value === null) {
+    return <span style={styles.nullish}>null</span>;
+  }
+
+  if (value === undefined) {
+    return <span style={styles.nullish}>undefined</span>;
+  }
+
+  if (typeof value === 'string') {
+    return <span style={styles.string}>{JSON.stringify(value)}</span>;
+  }
+
+  if (typeof value === 'number') {
+    return <span style={styles.number}>{String(value)}</span>;
+  }
+
+  if (typeof value === 'bigint') {
+    return <span style={styles.number}>{`${value}n`}</span>;
+  }
+
+  if (typeof value === 'boolean') {
+    return <span style={styles.boolean}>{String(value)}</span>;
+  }
+
+  if (value instanceof Date) {
+    return <span style={styles.date}>{value.toISOString()}</span>;
+  }
+
+  if (value instanceof RegExp) {
+    return <span style={styles.meta}>{String(value)}</span>;
+  }
+
+  if (value instanceof URL) {
+    return (
+      <span style={styles.string}>{JSON.stringify(value.toString())}</span>
+    );
+  }
+
+  if (value instanceof ArrayBuffer) {
+    return (
+      <span style={styles.meta}>{`ArrayBuffer(${value.byteLength})`}</span>
+    );
+  }
+
+  if (value instanceof DataView) {
+    return <span style={styles.meta}>{`DataView(${value.byteLength})`}</span>;
+  }
+
+  if (value instanceof WeakMap) {
+    return <span style={styles.meta}>WeakMap</span>;
+  }
+
+  if (value instanceof WeakSet) {
+    return <span style={styles.meta}>WeakSet</span>;
+  }
+
+  if (value instanceof Promise) {
+    return <span style={styles.meta}>Promise</span>;
+  }
+
+  if (typeof value === 'function') {
+    return (
+      <span style={styles.meta}>
+        [Function
+        {value.name ? ` ${value.name}` : ''}]
+      </span>
+    );
+  }
+
+  if (typeof value === 'symbol') {
+    return <span style={styles.meta}>{String(value)}</span>;
+  }
+
+  if (value instanceof Error) {
+    return (
+      <span
+        style={styles.meta}
+      >{`${value.name}${value.message ? `: ${value.message}` : ''}`}</span>
+    );
+  }
+
+  if (isObjectLike(value)) {
+    const constructorName = getConstructorName(value);
+    return (
+      <span style={styles.meta}>
+        {constructorName && constructorName !== 'Object'
+          ? constructorName
+          : '{}'}
+      </span>
+    );
+  }
+
+  return <span style={styles.meta}>{String(value)}</span>;
+}
+
+function formatMapKey(key: unknown, index: number): string {
+  if (typeof key === 'string') return key;
+  if (
+    typeof key === 'number' ||
+    typeof key === 'boolean' ||
+    typeof key === 'bigint'
+  ) {
+    return String(key);
+  }
+  if (key === null) return 'null';
+  if (key === undefined) return 'undefined';
+  if (key instanceof Date) return key.toISOString();
+  if (key instanceof RegExp || key instanceof URL) return String(key);
+  if (typeof key === 'symbol') return key.toString();
+  return `entry ${index}`;
+}
+
+function getConstructorName(value: object): string | undefined {
+  const prototype = Object.getPrototypeOf(value);
+  const constructor = prototype?.constructor;
+  if (typeof constructor !== 'function') return undefined;
+  return constructor.name || undefined;
+}
+
+function getPrefixStyle(
+  prefix: TreePrefix,
+  styles: JsonTreeStyles
+): CSSProperties {
+  return prefix.italic ? { ...styles.meta, fontStyle: 'italic' } : styles.meta;
+}
+
+// ---------------------------------------------------------------------------
+// Public component
+// ---------------------------------------------------------------------------
+
+export interface DataInspectorProps {
+  /** The data to inspect */
+  data: unknown;
+  /** Initial expand depth (default: 3) */
+  expandLevel?: number;
+  /** Optional name for the root node */
+  name?: string;
+  /** Callback when a stream reference is clicked */
+  onStreamClick?: (streamId: string) => void;
+  /** Callback when a run reference is clicked */
+  onRunClick?: (runId: string) => void;
+  /** Callback when an encrypted marker is clicked (triggers decryption) */
+  onDecrypt?: () => void;
+  /** Whether decryption is currently in progress */
+  isDecrypting?: boolean;
+}
+
+export function DataInspector({
+  data,
+  expandLevel = 3,
+  name,
+  onStreamClick,
+  onRunClick,
+  onDecrypt,
+  isDecrypting = false,
+}: DataInspectorProps) {
+  const stableData = useStableInspectorData(data);
+  let wrapped = (
+    <JsonTree data={stableData} expandLevel={expandLevel} name={name} />
+  );
+
+  if (onStreamClick) {
+    wrapped = (
+      <StreamClickContext.Provider value={onStreamClick}>
+        {wrapped}
+      </StreamClickContext.Provider>
+    );
+  }
+
+  if (onRunClick) {
+    wrapped = (
+      <RunClickContext.Provider value={onRunClick}>
+        {wrapped}
+      </RunClickContext.Provider>
+    );
+  }
+
+  if (onDecrypt) {
+    wrapped = (
+      <DecryptClickContext.Provider value={{ isDecrypting, onDecrypt }}>
+        {wrapped}
+      </DecryptClickContext.Provider>
+    );
+  }
+
+  return wrapped;
+}
+
+function useStableInspectorData<T>(next: T): T {
+  const previousRef = useRef<T>(next);
+  if (!isDeepEqual(previousRef.current, next)) {
+    previousRef.current = next;
+  }
+  return previousRef.current;
+}
+
+function isObjectLike(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function isDeepEqual(a: unknown, b: unknown, seen = new WeakMap()): boolean {
+  if (Object.is(a, b)) return true;
+
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+
+  if (a instanceof RegExp && b instanceof RegExp) {
+    return a.source === b.source && a.flags === b.flags;
+  }
+
+  if (a instanceof URL && b instanceof URL) {
+    return a.toString() === b.toString();
+  }
+
+  if (a instanceof Map && b instanceof Map) {
+    if (a.size !== b.size) return false;
+    for (const [key, value] of a.entries()) {
+      if (!b.has(key) || !isDeepEqual(value, b.get(key), seen)) return false;
+    }
+    return true;
+  }
+
+  if (a instanceof Set && b instanceof Set) {
+    if (a.size !== b.size) return false;
+    for (const value of a.values()) {
+      if (!b.has(value)) return false;
+    }
+    return true;
+  }
+
+  if (isTypedArray(a) && isTypedArray(b)) {
+    if (a.constructor !== b.constructor || a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i += 1) {
+      if (!Object.is(a[i], b[i])) return false;
+    }
+    return true;
+  }
+
+  if (a instanceof ArrayBuffer && b instanceof ArrayBuffer) {
+    if (a.byteLength !== b.byteLength) return false;
+    const left = new Uint8Array(a);
+    const right = new Uint8Array(b);
+    for (let i = 0; i < left.length; i += 1) {
+      if (left[i] !== right[i]) return false;
+    }
+    return true;
+  }
+
+  if (a instanceof Headers && b instanceof Headers) {
+    return isDeepEqual(Array.from(a.entries()), Array.from(b.entries()), seen);
+  }
+
+  if (a instanceof URLSearchParams && b instanceof URLSearchParams) {
+    return a.toString() === b.toString();
+  }
+
+  if (a instanceof Error && b instanceof Error) {
+    return (
+      a.name === b.name &&
+      a.message === b.message &&
+      a.stack === b.stack &&
+      isDeepEqual(Object.entries(a), Object.entries(b), seen)
+    );
+  }
+
+  if (!isObjectLike(a) || !isObjectLike(b)) {
+    return false;
+  }
+
+  if (seen.get(a) === b) return true;
+  seen.set(a, b);
+
+  const aIsArray = Array.isArray(a);
+  const bIsArray = Array.isArray(b);
+  if (aIsArray !== bIsArray) return false;
+
+  if (aIsArray && bIsArray) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i += 1) {
+      if (!isDeepEqual(a[i], b[i], seen)) return false;
+    }
+    return true;
+  }
+
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+
+  for (const key of aKeys) {
+    if (!Object.hasOwn(b, key)) return false;
+    if (!isDeepEqual(a[key], b[key], seen)) return false;
+  }
+
+  return true;
+}
diff --git a/packages/web-shared/src/components/ui/data-inspector.tsx b/packages/web-shared/src/components/ui/data-inspector.tsx
index 621fdad33a..ef16fce7a5 100644
--- a/packages/web-shared/src/components/ui/data-inspector.tsx
+++ b/packages/web-shared/src/components/ui/data-inspector.tsx
@@ -1,14 +1,7 @@
 'use client';
 
-/**
- * Reusable data inspector component built on react-inspector.
- *
- * All data rendering in the o11y UI should use this component to ensure
- * consistent theming, custom type handling (StreamRef, ClassInstanceRef),
- * and expand behavior.
- */
-
-import { Lock } from 'lucide-react';
+import { JsonView, type Props as JsonViewProps } from 'react-json-view-lite';
+import { useCallback, useMemo } from 'react';
 import {
   createContext,
   useContext,
@@ -87,16 +80,15 @@ function parseChunkData(text: string): unknown {
 }
 
 function isStreamRef(value: unknown): value is StreamRef {
-  if (value === null || typeof value !== 'object') return false;
-  // Check both enumerable and non-enumerable __type (opaque refs use non-enumerable)
-  const desc = Object.getOwnPropertyDescriptor(value, '__type');
-  return desc?.value === STREAM_REF_TYPE;
+  if (!isObjectLike(value)) return false;
+  const descriptor = Object.getOwnPropertyDescriptor(value, '__type');
+  return descriptor?.value === STREAM_REF_TYPE;
 }
 
 function isRunRef(value: unknown): value is RunRef {
-  if (value === null || typeof value !== 'object') return false;
-  const desc = Object.getOwnPropertyDescriptor(value, '__type');
-  return desc?.value === RUN_REF_TYPE;
+  if (!isObjectLike(value)) return false;
+  const descriptor = Object.getOwnPropertyDescriptor(value, '__type');
+  return descriptor?.value === RUN_REF_TYPE;
 }
 
 export function isBytesDisplay(value: unknown): value is BytesDisplay {
@@ -112,8 +104,7 @@ function isClassInstanceRef(value: unknown): value is {
   data: unknown;
 } {
   return (
-    value !== null &&
-    typeof value === 'object' &&
+    isObjectLike(value) &&
     '__type' in value &&
     (value as Record<string, unknown>).__type === CLASS_INSTANCE_REF_TYPE
   );
diff --git a/packages/web-shared/src/components/ui/inspector-theme.ts b/packages/web-shared/src/components/ui/inspector-theme.ts
deleted file mode 100644
index 5d04188082..0000000000
--- a/packages/web-shared/src/components/ui/inspector-theme.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Shared theme configuration for react-inspector's ObjectInspector.
- *
- * Colors follow Geist's Shiki JSON palette so the inspector reads the same
- * as highlighted code blocks across the product:
- *   - property names / punctuation: --ds-gray-1000 (default foreground)
- *   - strings / numbers / booleans: --ds-green-900
- *   - null / undefined: --ds-gray-900 (muted)
- *   - regexp / function: --ds-purple-900
- *   - date: --ds-pink-900
- *
- * Because the `--ds-*` tokens adapt to theme automatically, the light and
- * dark objects are intentionally identical.
- */
-
-// ---------------------------------------------------------------------------
-// Extended color tokens not supported by react-inspector's built-in theme
-// system, applied via our custom nodeRenderer in data-inspector.tsx.
-// ---------------------------------------------------------------------------
-
-export interface InspectorThemeExtended {
-  /** Color for Date values (Node: 'magenta') */
-  OBJECT_VALUE_DATE_COLOR: string;
-}
-
-export const inspectorThemeExtendedLight: InspectorThemeExtended = {
-  OBJECT_VALUE_DATE_COLOR: 'var(--ds-pink-900)',
-};
-
-export const inspectorThemeExtendedDark: InspectorThemeExtended = {
-  OBJECT_VALUE_DATE_COLOR: 'var(--ds-pink-900)',
-};
-
-// ---------------------------------------------------------------------------
-// Shared structural values (same in both themes)
-// ---------------------------------------------------------------------------
-
-const shared = {
-  BASE_FONT_SIZE: '11px',
-  BASE_LINE_HEIGHT: 1.4,
-  BASE_BACKGROUND_COLOR: 'transparent',
-  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
-  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
-  HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase' as const,
-  ARROW_MARGIN_RIGHT: 3,
-  ARROW_FONT_SIZE: 12,
-  TREENODE_FONT_FAMILY: 'var(--font-mono)',
-  TREENODE_FONT_SIZE: '11px',
-  TREENODE_LINE_HEIGHT: 1.4,
-  TREENODE_PADDING_LEFT: 12,
-  TABLE_DATA_BACKGROUND_IMAGE: 'none',
-  TABLE_DATA_BACKGROUND_SIZE: '0',
-};
-
-// ---------------------------------------------------------------------------
-// Light theme
-// ---------------------------------------------------------------------------
-
-const geistTheme = {
-  ...shared,
-
-  // Base text
-  BASE_COLOR: 'var(--ds-gray-1000)',
-
-  // Property names — default foreground (matches JSON key color in Geist Shiki)
-  OBJECT_NAME_COLOR: 'var(--ds-gray-1000)',
-
-  // Strings & symbols — green
-  OBJECT_VALUE_STRING_COLOR: 'var(--ds-green-900)',
-  OBJECT_VALUE_SYMBOL_COLOR: 'var(--ds-green-900)',
-
-  // Numbers & booleans — green (Geist JSON tokens)
-  OBJECT_VALUE_NUMBER_COLOR: 'var(--ds-green-900)',
-  OBJECT_VALUE_BOOLEAN_COLOR: 'var(--ds-green-900)',
-
-  // null — muted foreground
-  OBJECT_VALUE_NULL_COLOR: 'var(--ds-gray-900)',
-
-  // undefined — muted foreground
-  OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-900)',
-
-  // RegExp — purple
-  OBJECT_VALUE_REGEXP_COLOR: 'var(--ds-purple-900)',
-
-  // Functions — purple
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'var(--ds-purple-900)',
-
-  // HTML (rarely used here, kept consistent with the palette)
-  HTML_TAG_COLOR: 'var(--ds-gray-900)',
-  HTML_TAGNAME_COLOR: 'var(--ds-blue-900)',
-  HTML_ATTRIBUTE_NAME_COLOR: 'var(--ds-amber-900)',
-  HTML_ATTRIBUTE_VALUE_COLOR: 'var(--ds-green-900)',
-  HTML_COMMENT_COLOR: 'var(--ds-gray-700)',
-  HTML_DOCTYPE_COLOR: 'var(--ds-gray-700)',
-
-  // Structural
-  ARROW_COLOR: 'var(--ds-gray-700)',
-  TABLE_BORDER_COLOR: 'var(--ds-gray-300)',
-  TABLE_TH_BACKGROUND_COLOR: 'var(--ds-gray-100)',
-  TABLE_TH_HOVER_COLOR: 'var(--ds-gray-200)',
-  TABLE_SORT_ICON_COLOR: 'var(--ds-gray-700)',
-};
-
-export const inspectorThemeLight = geistTheme;
-
-// ---------------------------------------------------------------------------
-// Dark theme
-// ---------------------------------------------------------------------------
-
-export const inspectorThemeDark = geistTheme;
diff --git a/packages/web-shared/src/styles.css b/packages/web-shared/src/styles.css
index 23adb5f578..eacb84587c 100644
--- a/packages/web-shared/src/styles.css
+++ b/packages/web-shared/src/styles.css
@@ -653,3 +653,236 @@
     transform: scale(1);
   }
 }
+
+/* Compact JSON tree */
+
+.wf-json-view-container {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--ds-gray-1000);
+  font-family:
+    var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+  font-size: 11px;
+  line-height: 20px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+}
+
+.wf-json-view-container > .wf-json-view-row {
+  padding-left: 1.5ch;
+}
+
+.wf-json-view-container > .wf-json-view-row > .wf-json-view-expand-icon,
+.wf-json-view-container > .wf-json-view-row > .wf-json-view-collapse-icon {
+  margin-left: -1.5ch;
+}
+
+.wf-json-view-children {
+  margin: 0;
+  padding: 0;
+}
+
+.wf-json-view-row {
+  display: block;
+  margin: 0;
+  padding: 0 0 0 2ch;
+}
+
+.wf-json-view-row:hover:not(:has(.wf-json-view-row:hover)):not(
+    :has(.wf-json-view-row ~ .wf-json-view-row)
+  ) {
+  background-color: var(--ds-gray-alpha-100);
+}
+
+.wf-json-view-label {
+  margin-right: 1ch;
+  color: var(--ds-pink-900);
+  font-weight: 400;
+}
+
+.wf-json-view-clickable-label {
+  margin-right: 1ch;
+  cursor: pointer;
+  color: var(--ds-pink-900);
+  font-weight: 400;
+}
+
+.wf-json-view-string {
+  color: var(--ds-green-900);
+}
+
+.wf-json-view-number {
+  color: var(--ds-blue-900);
+}
+
+.wf-json-view-boolean {
+  color: var(--ds-amber-900);
+}
+
+.wf-json-view-null,
+.wf-json-view-undefined,
+.wf-json-view-other {
+  color: var(--ds-gray-900);
+}
+
+.wf-json-view-punctuation {
+  margin-right: 0;
+  color: var(--ds-gray-1000);
+  font-weight: 400;
+}
+
+.wf-json-view-expand-icon,
+.wf-json-view-collapse-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  min-width: 18px;
+  min-height: 18px;
+  margin-right: 0;
+  margin-left: -1.5ch;
+  padding: 2px 4px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  color: var(--ds-gray-900);
+  user-select: none;
+  outline: none;
+  vertical-align: middle;
+}
+
+.wf-json-view-expand-icon::after,
+.wf-json-view-collapse-icon::after {
+  content: '';
+  display: block;
+  width: 14px;
+  height: 14px;
+  margin-right: 0;
+  background-color: currentColor;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 14px 14px;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1016 7.29297C10.4921 7.68349 10.4921 8.31651 10.1016 8.70703L6.74805 12.0605L5.6875 11L8.6875 8L5.6875 5L6.74805 3.93945L10.1016 7.29297Z' fill='black'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: 14px 14px;
+  mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1016 7.29297C10.4921 7.68349 10.4921 8.31651 10.1016 8.70703L6.74805 12.0605L5.6875 11L8.6875 8L5.6875 5L6.74805 3.93945L10.1016 7.29297Z' fill='black'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 14px 14px;
+  transition: transform 120ms ease;
+}
+
+.wf-json-view-expand-icon::after {
+  transform: none;
+}
+
+.wf-json-view-collapse-icon::after {
+  transform: rotate(90deg);
+}
+
+.wf-json-view-expand-icon:hover,
+.wf-json-view-collapse-icon:hover,
+.wf-json-view-row:has(> .wf-json-view-clickable-label:hover)
+  > .wf-json-view-expand-icon,
+.wf-json-view-row:has(> .wf-json-view-clickable-label:hover)
+  > .wf-json-view-collapse-icon {
+  background-color: var(--ds-gray-alpha-100);
+  color: var(--ds-gray-900);
+}
+
+.wf-json-view-collapsed {
+  color: var(--ds-gray-900);
+}
+
+.wf-json-view-collapsed::after {
+  content: '...';
+}
+
+.dark-theme .wf-json-view-label,
+.dark .wf-json-view-label,
+[data-theme='dark'] .wf-json-view-label {
+  color: var(--ds-pink-700, var(--ds-pink-900));
+}
+
+.dark-theme .wf-json-view-clickable-label,
+.dark .wf-json-view-clickable-label,
+[data-theme='dark'] .wf-json-view-clickable-label {
+  color: var(--ds-pink-700, var(--ds-pink-900));
+}
+
+.dark-theme .wf-json-view-string,
+.dark .wf-json-view-string,
+[data-theme='dark'] .wf-json-view-string {
+  color: var(--ds-blue-700);
+}
+
+.dark-theme .wf-json-view-number,
+.dark .wf-json-view-number,
+[data-theme='dark'] .wf-json-view-number {
+  color: var(--ds-blue-700);
+}
+
+.dark-theme .wf-json-view-boolean,
+.dark .wf-json-view-boolean,
+[data-theme='dark'] .wf-json-view-boolean {
+  color: var(--ds-amber-700);
+}
+
+.dark-theme .wf-json-view-null,
+.dark-theme .wf-json-view-undefined,
+.dark-theme .wf-json-view-other,
+.dark .wf-json-view-null,
+.dark .wf-json-view-undefined,
+.dark .wf-json-view-other,
+[data-theme='dark'] .wf-json-view-null,
+[data-theme='dark'] .wf-json-view-undefined,
+[data-theme='dark'] .wf-json-view-other {
+  color: var(--ds-gray-700);
+}
+
+.dark-theme .wf-json-view-expand-icon,
+.dark-theme .wf-json-view-collapse-icon,
+.dark .wf-json-view-expand-icon,
+.dark .wf-json-view-collapse-icon,
+[data-theme='dark'] .wf-json-view-expand-icon,
+[data-theme='dark'] .wf-json-view-collapse-icon {
+  color: #fff;
+}
+
+.dark-theme .wf-json-view-expand-icon:hover,
+.dark-theme .wf-json-view-collapse-icon:hover,
+.dark-theme
+  .wf-json-view-row:has(> .wf-json-view-clickable-label:hover)
+  > .wf-json-view-expand-icon,
+.dark-theme
+  .wf-json-view-row:has(> .wf-json-view-clickable-label:hover)
+  > .wf-json-view-collapse-icon,
+.dark .wf-json-view-expand-icon:hover,
+.dark .wf-json-view-collapse-icon:hover,
+.dark .wf-json-view-row:has(> .wf-json-view-clickable-label:hover)
+  > .wf-json-view-expand-icon,
+.dark .wf-json-view-row:has(> .wf-json-view-clickable-label:hover)
+  > .wf-json-view-collapse-icon,
+[data-theme='dark'] .wf-json-view-expand-icon:hover,
+[data-theme='dark'] .wf-json-view-collapse-icon:hover,
+[data-theme='dark']
+  .wf-json-view-row:has(> .wf-json-view-clickable-label:hover)
+  > .wf-json-view-expand-icon,
+[data-theme='dark']
+  .wf-json-view-row:has(> .wf-json-view-clickable-label:hover)
+  > .wf-json-view-collapse-icon {
+  background-color: var(--ds-gray-alpha-100);
+  color: #fff;
+}
+
+.dark-theme .wf-json-view-collapsed,
+.dark .wf-json-view-collapsed,
+[data-theme='dark'] .wf-json-view-collapsed {
+  color: var(--ds-gray-700);
+}

From ca2cffa550b9304cf7cd7add41a046229b9d722b Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 30 Apr 2026 17:04:57 -0400
Subject: [PATCH 2/3] Update pnpm-lock.yaml

---
 pnpm-lock.yaml | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0429931d3..431b5a7fbe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1188,9 +1188,9 @@ importers:
       react-dom:
         specifier: 19.1.0
         version: 19.1.0(react@19.1.0)
-      react-inspector:
-        specifier: 9.0.0
-        version: 9.0.0(react@19.1.0)
+      react-json-view-lite:
+        specifier: 2.5.0
+        version: 2.5.0(react@19.1.0)
       react-virtuoso:
         specifier: 4.18.1
         version: 4.18.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -13313,11 +13313,6 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
-  react-inspector@9.0.0:
-    resolution: {integrity: sha512-w/VJucSeHxlwRa2nfM2k7YhpT1r5EtlDOClSR+L7DyQP91QMdfFEDXDs9bPYN4kzP7umFtom7L0b2GGjph4Kow==}
-    peerDependencies:
-      react: ^18.0.0 || ^19.0.0
-
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -13327,6 +13322,12 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-json-view-lite@2.5.0:
+    resolution: {integrity: sha512-tk7o7QG9oYyELWHL8xiMQ8x4WzjCzbWNyig3uexmkLb54r8jO0yH3WCWx8UZS0c49eSA4QUmG5caiRJ8fAn58g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+
   react-medium-image-zoom@5.4.0:
     resolution: {integrity: sha512-BsE+EnFVQzFIlyuuQrZ9iTwyKpKkqdFZV1ImEQN573QPqGrIUuNni7aF+sZwDcxlsuOMayCr6oO/PZR/yJnbRg==}
     peerDependencies:
@@ -29529,16 +29530,16 @@ snapshots:
     dependencies:
       react: 19.2.3
 
-  react-inspector@9.0.0(react@19.1.0):
-    dependencies:
-      react: 19.1.0
-
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
 
   react-is@18.3.1: {}
 
+  react-json-view-lite@2.5.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   react-medium-image-zoom@5.4.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       react: 19.2.3

From 7337c672e9bf52cd4bd42cc84c4acd63d33bd2f6 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 30 Apr 2026 17:23:27 -0400
Subject: [PATCH 3/3] fix indenting

---
 .../src/components/ui/data-inspector-tree.tsx |  14 +-
 .../src/components/ui/data-inspector.tsx      | 758 +-----------------
 packages/web-shared/src/styles.css            |  12 +-
 3 files changed, 23 insertions(+), 761 deletions(-)

diff --git a/packages/web-shared/src/components/ui/data-inspector-tree.tsx b/packages/web-shared/src/components/ui/data-inspector-tree.tsx
index ac2146e1f7..1f08f8d209 100644
--- a/packages/web-shared/src/components/ui/data-inspector-tree.tsx
+++ b/packages/web-shared/src/components/ui/data-inspector-tree.tsx
@@ -11,13 +11,13 @@
 
 import { Lock } from 'lucide-react';
 import {
+  type CSSProperties,
   createContext,
+  type ReactNode,
   useContext,
   useMemo,
   useRef,
   useState,
-  type CSSProperties,
-  type ReactNode,
 } from 'react';
 import { useDarkMode } from '../../hooks/use-dark-mode';
 import { ENCRYPTED_DISPLAY_NAME } from '../../lib/hydration';
@@ -318,7 +318,7 @@ function createTreeStyles(isDark: boolean): JsonTreeStyles {
     row: {
       display: 'block',
       margin: 0,
-      padding: 0,
+      padding: '0 0 0 18px',
     },
     childContainer: {
       margin: 0,
@@ -377,7 +377,7 @@ function createTreeStyles(isDark: boolean): JsonTreeStyles {
       justifyContent: 'center',
       lineHeight: 1,
       margin: 0,
-      marginRight: '0.25ch',
+      marginLeft: '-18px',
       minHeight: '18px',
       minWidth: '18px',
       padding: 0,
@@ -978,9 +978,9 @@ function formatMapKey(key: unknown, index: number): string {
 
 function getConstructorName(value: object): string | undefined {
   const prototype = Object.getPrototypeOf(value);
-  const constructor = prototype?.constructor;
-  if (typeof constructor !== 'function') return undefined;
-  return constructor.name || undefined;
+  const ctor = prototype?.constructor;
+  if (typeof ctor !== 'function') return undefined;
+  return ctor.name || undefined;
 }
 
 function getPrefixStyle(
diff --git a/packages/web-shared/src/components/ui/data-inspector.tsx b/packages/web-shared/src/components/ui/data-inspector.tsx
index ef16fce7a5..c29ed5ffe7 100644
--- a/packages/web-shared/src/components/ui/data-inspector.tsx
+++ b/packages/web-shared/src/components/ui/data-inspector.tsx
@@ -1,748 +1,10 @@
-'use client';
-
-import { JsonView, type Props as JsonViewProps } from 'react-json-view-lite';
-import { useCallback, useMemo } from 'react';
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  ObjectInspector,
-  ObjectLabel,
-  ObjectName,
-  ObjectRootLabel,
-  ObjectValue,
-} from 'react-inspector';
-import { useDarkMode } from '../../hooks/use-dark-mode';
-import { ENCRYPTED_DISPLAY_NAME } from '../../lib/hydration';
-import {
-  type DecodedStreamChunkSource,
-  type FormattedStreamChunkDisplay,
-  formatArrayBufferViewForDisplay,
-} from '../../lib/stream-display';
-import {
-  type InspectorThemeExtended,
-  inspectorThemeDark,
-  inspectorThemeExtendedDark,
-  inspectorThemeExtendedLight,
-  inspectorThemeLight,
-} from './inspector-theme';
-import { Spinner } from './spinner';
-
-// ---------------------------------------------------------------------------
-// StreamRef / ClassInstanceRef type detection
-// (inline to avoid circular deps with hydration module)
-// ---------------------------------------------------------------------------
-
-const STREAM_REF_TYPE = '__workflow_stream_ref__';
-const CLASS_INSTANCE_REF_TYPE = '__workflow_class_instance_ref__';
-const RUN_REF_TYPE = '__workflow_run_ref__';
-const BYTES_DISPLAY_TYPE = '__workflow_bytes_display__';
-
-interface StreamRef {
-  __type: typeof STREAM_REF_TYPE;
-  streamId: string;
-}
-
-interface RunRef {
-  __type: typeof RUN_REF_TYPE;
-  runId: string;
-}
-
-interface BytesDisplay {
-  __type: typeof BYTES_DISPLAY_TYPE;
-  text: string;
-  decodedFrom?: DecodedStreamChunkSource;
-}
-
-function deserializeChunkText(text: string): string {
-  try {
-    const parsed = JSON.parse(text);
-    if (typeof parsed === 'string') {
-      return parsed;
-    }
-    return JSON.stringify(parsed, null, 2);
-  } catch {
-    return text;
-  }
-}
-
-function parseChunkData(text: string): unknown {
-  try {
-    return JSON.parse(text);
-  } catch {
-    return text;
-  }
-}
-
-function isStreamRef(value: unknown): value is StreamRef {
-  if (!isObjectLike(value)) return false;
-  const descriptor = Object.getOwnPropertyDescriptor(value, '__type');
-  return descriptor?.value === STREAM_REF_TYPE;
-}
-
-function isRunRef(value: unknown): value is RunRef {
-  if (!isObjectLike(value)) return false;
-  const descriptor = Object.getOwnPropertyDescriptor(value, '__type');
-  return descriptor?.value === RUN_REF_TYPE;
-}
-
-export function isBytesDisplay(value: unknown): value is BytesDisplay {
-  if (value === null || typeof value !== 'object') return false;
-  const desc = Object.getOwnPropertyDescriptor(value, '__type');
-  return desc?.value === BYTES_DISPLAY_TYPE;
-}
-
-function isClassInstanceRef(value: unknown): value is {
-  __type: string;
-  className: string;
-  classId: string;
-  data: unknown;
-} {
-  return (
-    isObjectLike(value) &&
-    '__type' in value &&
-    (value as Record<string, unknown>).__type === CLASS_INSTANCE_REF_TYPE
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Stream click context (passed through from the panel)
-// ---------------------------------------------------------------------------
-
-/**
- * Context for passing stream click handlers down to DataInspector instances.
- * Exported so that parent components (e.g., AttributePanel) can provide the handler.
- */
-export const StreamClickContext = createContext<
-  ((streamId: string) => void) | undefined
->(undefined);
-
-/**
- * Context for passing a decrypt handler down to DataInspector instances.
- * When provided, encrypted markers become clickable buttons that trigger decryption.
- */
-export type DecryptClickContextValue = {
-  onDecrypt: () => void;
-  isDecrypting: boolean;
-};
-
-export const DecryptClickContext = createContext<
-  DecryptClickContextValue | undefined
->(undefined);
-
-export const RunClickContext = createContext<
-  ((runId: string) => void) | undefined
->(undefined);
-
-function EncryptedInlineLabel() {
-  const ctx = useContext(DecryptClickContext);
-  if (ctx) {
-    return (
-      <button
-        type="button"
-        className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] cursor-pointer"
-        style={{
-          backgroundColor: 'var(--ds-gray-100)',
-          color: 'var(--ds-gray-700)',
-          border: '1px solid var(--ds-gray-400)',
-          fontStyle: 'italic',
-          opacity: ctx.isDecrypting ? 0.6 : 1,
-        }}
-        disabled={ctx.isDecrypting}
-        onClick={(e) => {
-          e.stopPropagation();
-          ctx.onDecrypt();
-        }}
-        title="Click to decrypt"
-      >
-        {ctx.isDecrypting ? (
-          <Spinner size={12} />
-        ) : (
-          <Lock
-            className="h-3 w-3"
-            style={{ display: 'inline', flexShrink: 0 }}
-          />
-        )}
-        <span>{ctx.isDecrypting ? 'Decrypting…' : 'Decrypt'}</span>
-      </button>
-    );
-  }
-  return (
-    <span style={{ color: 'var(--ds-gray-600)', fontStyle: 'italic' }}>
-      <Lock
-        className="h-3 w-3"
-        style={{
-          display: 'inline',
-          verticalAlign: 'middle',
-          marginRight: '3px',
-          marginTop: '-1px',
-        }}
-      />
-      Encrypted
-    </span>
-  );
-}
-function StreamRefInline({ streamRef }: { streamRef: StreamRef }) {
-  const onStreamClick = useContext(StreamClickContext);
-  const [hovered, setHovered] = useState(false);
-  return (
-    <button
-      type="button"
-      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono cursor-pointer underline decoration-transparent transition-colors"
-      style={{
-        backgroundColor: hovered ? 'var(--ds-blue-200)' : 'var(--ds-blue-100)',
-        color: 'var(--ds-blue-900)',
-        border: '1px solid var(--ds-blue-300)',
-      }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      onClick={(e) => {
-        e.stopPropagation();
-        onStreamClick?.(streamRef.streamId);
-      }}
-      title={`View stream: ${streamRef.streamId}`}
-    >
-      <span>📡</span>
-      <span>{streamRef.streamId}</span>
-    </button>
-  );
-}
-
-function RunRefInline({ runRef }: { runRef: RunRef }) {
-  const onRunClick = useContext(RunClickContext);
-  const [hovered, setHovered] = useState(false);
-  return (
-    <button
-      type="button"
-      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono cursor-pointer underline decoration-transparent transition-colors"
-      style={{
-        backgroundColor: hovered
-          ? 'var(--ds-purple-200)'
-          : 'var(--ds-purple-100)',
-        color: 'var(--ds-purple-900)',
-        border: '1px solid var(--ds-purple-300)',
-      }}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      onClick={(e) => {
-        e.stopPropagation();
-        onRunClick?.(runRef.runId);
-      }}
-      title={`View run: ${runRef.runId}`}
-    >
-      <span>{runRef.runId}</span>
-    </button>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Extended theme context (for colors react-inspector doesn't support natively)
-// ---------------------------------------------------------------------------
-
-const ExtendedThemeContext = createContext<InspectorThemeExtended>(
-  inspectorThemeExtendedLight
-);
-
-function DecodedBytesChunk({
-  decodedText,
-  source,
-}: {
-  decodedText: string;
-  source: DecodedStreamChunkSource;
-}) {
-  const [selectedView, setSelectedView] = useState<'decoded' | 'bytes'>(
-    'decoded'
-  );
-  const parsed = parseChunkData(decodedText);
-
-  return (
-    <div className="min-w-0">
-      {selectedView === 'decoded' ? (
-        <div className="min-w-0">
-          {typeof parsed === 'string' ? (
-            <span
-              className="whitespace-pre-wrap break-words"
-              style={{ color: 'var(--ds-gray-1000)' }}
-            >
-              {deserializeChunkText(parsed)}
-            </span>
-          ) : (
-            <DataInspector data={parsed} expandLevel={1} />
-          )}
-        </div>
-      ) : (
-        <DecodedBytesInspector decodedText={decodedText} source={source} />
-      )}
-      <div className="mt-2 flex">
-        <div
-          className="inline-flex overflow-hidden rounded border"
-          style={{ borderColor: 'var(--ds-gray-400)' }}
-          title={`${source.type} decoded as ${source.encoding.toUpperCase()} text. Switch to Bytes to inspect the summarized raw value.`}
-        >
-          <button
-            type="button"
-            className="h-5 px-1.5 text-[10px] font-medium"
-            style={{
-              backgroundColor:
-                selectedView === 'decoded'
-                  ? 'var(--ds-gray-200)'
-                  : 'var(--ds-gray-100)',
-              color: 'var(--ds-gray-900)',
-            }}
-            onClick={() => setSelectedView('decoded')}
-            aria-pressed={selectedView === 'decoded'}
-            aria-label="Show decoded text"
-          >
-            Decoded
-          </button>
-          <button
-            type="button"
-            className="h-5 border-l px-1.5 text-[10px] font-medium"
-            style={{
-              borderColor: 'var(--ds-gray-400)',
-              backgroundColor:
-                selectedView === 'bytes'
-                  ? 'var(--ds-gray-200)'
-                  : 'var(--ds-gray-100)',
-              color: 'var(--ds-gray-900)',
-            }}
-            onClick={() => setSelectedView('bytes')}
-            aria-pressed={selectedView === 'bytes'}
-            aria-label="Show raw bytes summary"
-          >
-            Bytes
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function DecodedBytesInspector({
-  decodedText,
-  source,
-}: {
-  decodedText: string;
-  source: DecodedStreamChunkSource;
-}) {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <div className="font-mono">
-      <button
-        type="button"
-        className="flex max-w-full items-start gap-1 text-left"
-        style={{ color: 'var(--ds-gray-1000)' }}
-        onClick={() => setExpanded((value) => !value)}
-        title={`${source.type} decoded as ${source.encoding.toUpperCase()} text`}
-      >
-        <span className="select-none" style={{ color: 'var(--ds-gray-700)' }}>
-          {expanded ? '▼' : '▶'}
-        </span>
-        <span className="min-w-0 break-words">{source.rawSummary}</span>
-      </button>
-      {expanded && (
-        <div className="mt-1 pl-5">
-          <span style={{ color: 'var(--ds-gray-700)' }}>decoded: </span>
-          <span
-            className="whitespace-pre-wrap break-words"
-            style={{ color: 'var(--ds-green-900)' }}
-          >
-            {JSON.stringify(decodedText)}
-          </span>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function BytesDisplayLabel({
-  name,
-  display,
-}: {
-  name?: string;
-  display: BytesDisplay;
-}) {
-  return (
-    <div className="inline-block min-w-0 align-top">
-      {name != null && <ObjectName name={name} />}
-      {name != null && <span>: </span>}
-      {display.decodedFrom ? (
-        <DecodedBytesChunk
-          decodedText={display.text}
-          source={display.decodedFrom}
-        />
-      ) : (
-        <span
-          className="whitespace-pre-wrap break-words"
-          style={{ color: 'var(--ds-gray-1000)' }}
-        >
-          {display.text}
-        </span>
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Custom nodeRenderer
-// ---------------------------------------------------------------------------
-
-/**
- * Extends the default react-inspector nodeRenderer with special handling
- * for ClassInstanceRef, StreamRef, and Date types.
- *
- * react-inspector renders Date instances as unstyled plain text (no theme
- * key exists for them), so we intercept here and apply the magenta color
- * from our extended theme — matching Node.js util.inspect()'s date style.
- *
- * Default nodeRenderer reference:
- * https://github.com/storybookjs/react-inspector/blob/main/README.md#noderenderer
- */
-function NodeRenderer({
-  depth,
-  name,
-  data,
-  isNonenumerable,
-}: {
-  depth: number;
-  name?: string;
-  data: unknown;
-  isNonenumerable?: boolean;
-  expanded?: boolean;
-}) {
-  const extendedTheme = useContext(ExtendedThemeContext);
-
-  if (isBytesDisplay(data)) {
-    return <BytesDisplayLabel name={name} display={data} />;
-  }
-
-  // Encrypted marker → flat label with Lock icon, clickable when onDecrypt is available
-  if (
-    data !== null &&
-    typeof data === 'object' &&
-    data.constructor?.name === ENCRYPTED_DISPLAY_NAME
-  ) {
-    const label = <EncryptedInlineLabel />;
-    if (depth === 0) {
-      return label;
-    }
-    return (
-      <span>
-        {name != null && <ObjectName name={name} />}
-        {name != null && <span>: </span>}
-        {label}
-      </span>
-    );
-  }
-
-  // StreamRef → inline clickable badge
-  if (isStreamRef(data)) {
-    return (
-      <span>
-        {name != null && <ObjectName name={name} />}
-        {name != null && <span>: </span>}
-        <StreamRefInline streamRef={data} />
-      </span>
-    );
-  }
-
-  // RunRef → inline clickable badge linking to the target run
-  if (isRunRef(data)) {
-    return (
-      <span>
-        {name != null && <ObjectName name={name} />}
-        {name != null && <span>: </span>}
-        <RunRefInline runRef={data} />
-      </span>
-    );
-  }
-
-  // ClassInstanceRef → show className as type, data as the inspectable value
-  if (isClassInstanceRef(data)) {
-    if (depth === 0) {
-      return <ObjectRootLabel name={data.className} data={data.data} />;
-    }
-    return (
-      <span>
-        {name != null && <ObjectName name={name} />}
-        {name != null && <span>: </span>}
-        <span style={{ fontStyle: 'italic' }}>{data.className} </span>
-        <ObjectValue object={data.data} />
-      </span>
-    );
-  }
-
-  // Date → magenta color (Node.js: 'date' → 'magenta')
-  // react-inspector has no OBJECT_VALUE_DATE_COLOR theme key, so we handle it here.
-  if (data instanceof Date) {
-    const dateStr = data.toISOString();
-    if (depth === 0) {
-      return (
-        <span style={{ color: extendedTheme.OBJECT_VALUE_DATE_COLOR }}>
-          {dateStr}
-        </span>
-      );
-    }
-    return (
-      <span>
-        {name != null && <ObjectName name={name} />}
-        {name != null && <span>: </span>}
-        <span style={{ color: extendedTheme.OBJECT_VALUE_DATE_COLOR }}>
-          {dateStr}
-        </span>
-      </span>
-    );
-  }
-
-  // Default rendering (same as react-inspector's built-in)
-  if (depth === 0) {
-    return <ObjectRootLabel name={name} data={data} />;
-  }
-  return (
-    <ObjectLabel name={name} data={data} isNonenumerable={isNonenumerable} />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Public component
-// ---------------------------------------------------------------------------
-
-/**
- * Create a non-expandable wrapper that carries ref data as non-enumerable
- * properties. ObjectInspector won't render children for objects with no
- * enumerable keys, but our NodeRenderer can still detect them.
- */
-function makeOpaqueRef(ref: Record<string, unknown>): unknown {
-  const opaque = Object.create(null);
-  for (const [key, value] of Object.entries(ref)) {
-    Object.defineProperty(opaque, key, { value, enumerable: false });
-  }
-  return opaque;
-}
-
-function makeBytesDisplay(display: FormattedStreamChunkDisplay): unknown {
-  const opaque = Object.create(null);
-  Object.defineProperty(opaque, '__type', {
-    value: BYTES_DISPLAY_TYPE,
-    enumerable: false,
-  });
-  Object.defineProperty(opaque, 'text', {
-    value: display.text,
-    enumerable: false,
-  });
-  Object.defineProperty(opaque, 'decodedFrom', {
-    value: display.decodedFrom,
-    enumerable: false,
-  });
-  return opaque;
-}
-
-/**
- * Recursively walk data and replace RunRef/StreamRef/typed array objects with
- * non-expandable versions so ObjectInspector doesn't show their internals.
- * Only recurses into plain objects and arrays to avoid stripping class
- * instances (Date, Error, URL, Headers, etc.) that have their own rendering in
- * NodeRenderer. Map and Set containers are preserved while their contents are
- * prepared for display.
- *
- * Exported for testing the typed-array detection path used by hydrated
- * AI agent stream chunks (e.g. `{ delta: new Uint8Array(...) }`).
- */
-export function collapseRefs(data: unknown): unknown {
-  if (data === null || typeof data !== 'object') return data;
-  if (ArrayBuffer.isView(data) && !(data instanceof DataView)) {
-    return makeBytesDisplay(formatArrayBufferViewForDisplay(data));
-  }
-  if (isRunRef(data) || isStreamRef(data))
-    return makeOpaqueRef(data as unknown as Record<string, unknown>);
-  if (Array.isArray(data)) return data.map(collapseRefs);
-  if (data instanceof Map) {
-    return new Map(
-      Array.from(data.entries(), ([key, value]) => [
-        collapseRefs(key),
-        collapseRefs(value),
-      ])
-    );
-  }
-  if (data instanceof Set) {
-    return new Set(Array.from(data.values(), collapseRefs));
-  }
-  // Only recurse into plain objects — leave class instances untouched
-  const proto = Object.getPrototypeOf(data);
-  if (proto !== Object.prototype && proto !== null) return data;
-  const result: Record<string, unknown> = {};
-  for (const [key, value] of Object.entries(data)) {
-    result[key] = collapseRefs(value);
-  }
-  return result;
-}
-
-export interface DataInspectorProps {
-  /** The data to inspect */
-  data: unknown;
-  /** Initial expand depth (default: 2) */
-  expandLevel?: number;
-  /** Optional name for the root node */
-  name?: string;
-  /** Callback when a stream reference is clicked */
-  onStreamClick?: (streamId: string) => void;
-  /** Callback when a run reference is clicked */
-  onRunClick?: (runId: string) => void;
-  /** Callback when an encrypted marker is clicked (triggers decryption) */
-  onDecrypt?: () => void;
-  /** Whether decryption is currently in progress */
-  isDecrypting?: boolean;
-}
-
-export function DataInspector({
-  data,
-  expandLevel = 2,
-  name,
-  onStreamClick,
-  onRunClick,
-  onDecrypt,
-  isDecrypting = false,
-}: DataInspectorProps) {
-  const collapsedData = useMemo(() => collapseRefs(data), [data]);
-  const stableData = useStableInspectorData(collapsedData);
-  const [initialExpandLevel, setInitialExpandLevel] = useState(expandLevel);
-  const isDark = useDarkMode();
-  const extendedTheme = isDark
-    ? inspectorThemeExtendedDark
-    : inspectorThemeExtendedLight;
-
-  useEffect(() => {
-    // react-inspector reapplies expandLevel on every data change, which can
-    // reopen paths the user manually collapsed. Apply it only on mount.
-    setInitialExpandLevel(0);
-  }, []);
-
-  const content = (
-    <ExtendedThemeContext.Provider value={extendedTheme}>
-      <ObjectInspector
-        data={stableData}
-        name={name}
-        // @ts-expect-error react-inspector accepts theme objects at runtime despite
-        // types declaring string only — see https://github.com/storybookjs/react-inspector/blob/main/README.md#theme
-        theme={isDark ? inspectorThemeDark : inspectorThemeLight}
-        expandLevel={initialExpandLevel}
-        nodeRenderer={NodeRenderer}
-      />
-    </ExtendedThemeContext.Provider>
-  );
-
-  let wrapped = content;
-
-  if (onStreamClick) {
-    wrapped = (
-      <StreamClickContext.Provider value={onStreamClick}>
-        {wrapped}
-      </StreamClickContext.Provider>
-    );
-  }
-  if (onRunClick) {
-    wrapped = (
-      <RunClickContext.Provider value={onRunClick}>
-        {wrapped}
-      </RunClickContext.Provider>
-    );
-  }
-  if (onDecrypt) {
-    wrapped = (
-      <DecryptClickContext.Provider value={{ onDecrypt, isDecrypting }}>
-        {wrapped}
-      </DecryptClickContext.Provider>
-    );
-  }
-
-  return wrapped;
-}
-
-function useStableInspectorData<T>(next: T): T {
-  const previousRef = useRef<T>(next);
-  if (!isDeepEqual(previousRef.current, next)) {
-    previousRef.current = next;
-  }
-  return previousRef.current;
-}
-
-function isObjectLike(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null;
-}
-
-function isSameBytesDisplay(a: BytesDisplay, b: BytesDisplay): boolean {
-  return (
-    a.text === b.text &&
-    a.decodedFrom?.type === b.decodedFrom?.type &&
-    a.decodedFrom?.encoding === b.decodedFrom?.encoding &&
-    a.decodedFrom?.rawSummary === b.decodedFrom?.rawSummary
-  );
-}
-
-function isDeepEqual(a: unknown, b: unknown, seen = new WeakMap()): boolean {
-  if (Object.is(a, b)) return true;
-
-  if (isBytesDisplay(a) || isBytesDisplay(b)) {
-    return isBytesDisplay(a) && isBytesDisplay(b) && isSameBytesDisplay(a, b);
-  }
-
-  if (a instanceof Date && b instanceof Date) {
-    return a.getTime() === b.getTime();
-  }
-
-  if (a instanceof RegExp && b instanceof RegExp) {
-    return a.source === b.source && a.flags === b.flags;
-  }
-
-  if (a instanceof Map && b instanceof Map) {
-    if (a.size !== b.size) return false;
-    for (const [key, value] of a.entries()) {
-      if (!b.has(key) || !isDeepEqual(value, b.get(key), seen)) return false;
-    }
-    return true;
-  }
-
-  if (a instanceof Set && b instanceof Set) {
-    if (a.size !== b.size) return false;
-    for (const value of a.values()) {
-      if (!b.has(value)) return false;
-    }
-    return true;
-  }
-
-  if (!isObjectLike(a) || !isObjectLike(b)) {
-    return false;
-  }
-
-  if (seen.get(a) === b) return true;
-  seen.set(a, b);
-
-  const aIsArray = Array.isArray(a);
-  const bIsArray = Array.isArray(b);
-  if (aIsArray !== bIsArray) return false;
-
-  if (aIsArray && bIsArray) {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i += 1) {
-      if (!isDeepEqual(a[i], b[i], seen)) return false;
-    }
-    return true;
-  }
-
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) return false;
-
-  for (const key of aKeys) {
-    if (!Object.hasOwn(b, key)) return false;
-    if (!isDeepEqual(a[key], b[key], seen)) return false;
-  }
-
-  return true;
-}
+export {
+  DataInspector,
+  DecryptClickContext,
+  RunClickContext,
+  StreamClickContext,
+} from './data-inspector-tree';
+export type {
+  DataInspectorProps,
+  DecryptClickContextValue,
+} from './data-inspector-tree';
diff --git a/packages/web-shared/src/styles.css b/packages/web-shared/src/styles.css
index eacb84587c..a01f1d5570 100644
--- a/packages/web-shared/src/styles.css
+++ b/packages/web-shared/src/styles.css
@@ -673,23 +673,23 @@
 }
 
 .wf-json-view-container > .wf-json-view-row {
-  padding-left: 1.5ch;
+  padding-left: 18px;
 }
 
 .wf-json-view-container > .wf-json-view-row > .wf-json-view-expand-icon,
 .wf-json-view-container > .wf-json-view-row > .wf-json-view-collapse-icon {
-  margin-left: -1.5ch;
+  margin-left: -18px;
 }
 
 .wf-json-view-children {
   margin: 0;
-  padding: 0;
+  padding: 0 0 0 2ch;
 }
 
 .wf-json-view-row {
   display: block;
   margin: 0;
-  padding: 0 0 0 2ch;
+  padding: 0 0 0 18px;
 }
 
 .wf-json-view-row:hover:not(:has(.wf-json-view-row:hover)):not(
@@ -745,8 +745,8 @@
   min-width: 18px;
   min-height: 18px;
   margin-right: 0;
-  margin-left: -1.5ch;
-  padding: 2px 4px;
+  margin-left: -18px;
+  padding: 0;
   border-radius: 4px;
   box-sizing: border-box;
   cursor: pointer;