diff --git a/.changeset/data-inspector-expanded-brackets.md b/.changeset/data-inspector-expanded-brackets.md
new file mode 100644
index 0000000000..98128f03af
--- /dev/null
+++ b/.changeset/data-inspector-expanded-brackets.md
@@ -0,0 +1,5 @@
+---
+'@workflow/web-shared': patch
+---
+
+Rework the data inspector's JSON rendering: bracket notation (`{ … }` / `[ … ]`), colored keys, typed value colors, `▸`/`▾` disclosure icons, trailing commas, and a `...` collapsed indicator. Replaces the `react-inspector` engine with an in-house tree renderer while keeping the workflow-specific value handling (StreamRef/RunRef badges, encrypted markers, decoded byte streams, dates, class instances).
diff --git a/packages/web-shared/package.json b/packages/web-shared/package.json
index 27879eacc8..df7f3bdb59 100644
--- a/packages/web-shared/package.json
+++ b/packages/web-shared/package.json
@@ -59,7 +59,6 @@
     "lucide-react": "0.575.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "react-inspector": "9.0.0",
     "react-use-measure": "2.1.1",
     "react-virtuoso": "4.18.1",
     "shiki": "4.0.0",
diff --git a/packages/web-shared/src/components/ui/data-inspector.styles.ts b/packages/web-shared/src/components/ui/data-inspector.styles.ts
new file mode 100644
index 0000000000..5af1224455
--- /dev/null
+++ b/packages/web-shared/src/components/ui/data-inspector.styles.ts
@@ -0,0 +1,96 @@
+/**
+ * Class names and styles for the data inspector tree.
+ *
+ * Kept out of the component module for readability. The CSS is injected via a
+ * React 19 hoistable `<style>` (see DataInspector), so it stays bundler-agnostic
+ * for every consumer. Colors use theme-aware `--ds-*` tokens that adapt to
+ * light/dark automatically, so no per-theme overrides are needed.
+ */
+
+export const CLS = {
+  container: 'wf-json-view',
+  child: 'wf-json-child',
+  childFields: 'wf-json-child-fields',
+  label: 'wf-json-label',
+  clickableLabel: 'wf-json-clickable-label',
+  punctuation: 'wf-json-punctuation',
+  className: 'wf-json-classname',
+  expandIcon: 'wf-json-expand-icon',
+  collapseIcon: 'wf-json-collapse-icon',
+  collapsedContent: 'wf-json-collapsed-content',
+  string: 'wf-json-string',
+  number: 'wf-json-number',
+  boolean: 'wf-json-boolean',
+  null: 'wf-json-null',
+  undefined: 'wf-json-undefined',
+  date: 'wf-json-date',
+  regexp: 'wf-json-regexp',
+} as const;
+
+export const JSON_VIEW_STYLES = `
+.${CLS.container} {
+  display: inline;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 20px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--ds-gray-1000);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.${CLS.container} > .${CLS.child} > ul { padding-left: 0ch; }
+.${CLS.container} > .${CLS.child} { padding-left: 1.5ch; }
+.${CLS.child} { display: block; margin: 0; padding: 0 0 0 2ch; }
+.${CLS.child}:hover:not(:has(.${CLS.child}:hover)):not(:has(.${CLS.child} ~ .${CLS.child})) {
+  background-color: var(--ds-gray-alpha-100);
+  border-radius: 4px;
+}
+.${CLS.childFields} { margin: 0; padding: 0; list-style: none; }
+.${CLS.label}, .${CLS.clickableLabel} {
+  color: var(--ds-pink-900);
+  font-weight: 400;
+  margin-right: 1ch;
+}
+.${CLS.clickableLabel} { cursor: pointer; }
+.${CLS.punctuation} { color: var(--ds-gray-1000); }
+.${CLS.className} { font-style: italic; color: var(--ds-gray-900); margin-right: 1ch; }
+.${CLS.string} { color: var(--ds-green-900); }
+.${CLS.number} { color: var(--ds-blue-900); }
+.${CLS.boolean} { color: var(--ds-amber-900); }
+.${CLS.null}, .${CLS.undefined} { color: var(--ds-gray-900); }
+.${CLS.date} { color: var(--ds-pink-900); }
+.${CLS.regexp} { color: var(--ds-purple-900); }
+.${CLS.container} > .${CLS.child} > .${CLS.expandIcon},
+.${CLS.container} > .${CLS.child} > .${CLS.collapseIcon} { margin-left: -1.5ch; }
+.${CLS.expandIcon}, .${CLS.collapseIcon} {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  vertical-align: baseline;
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 0ch;
+  margin-left: -1.5ch;
+  color: var(--ds-gray-500);
+  user-select: none;
+  outline: none;
+}
+.${CLS.expandIcon}::after {
+  content: '\\25B8';
+  margin-right: 0.5ch;
+  transform: translateY(-0.5px);
+  display: block;
+}
+.${CLS.collapseIcon}::after { content: '\\25BE'; margin-right: 0.5ch; }
+.${CLS.expandIcon}:hover, .${CLS.collapseIcon}:hover,
+.${CLS.child}:has(> .${CLS.clickableLabel}:hover) > .${CLS.expandIcon},
+.${CLS.child}:has(> .${CLS.clickableLabel}:hover) > .${CLS.collapseIcon} {
+  color: var(--ds-gray-1000);
+}
+.${CLS.collapsedContent} { color: var(--ds-gray-900); }
+.${CLS.collapsedContent}::after { content: '...'; }
+`;
diff --git a/packages/web-shared/src/components/ui/data-inspector.tsx b/packages/web-shared/src/components/ui/data-inspector.tsx
index 3ad40d5d42..013e4c1fb1 100644
--- a/packages/web-shared/src/components/ui/data-inspector.tsx
+++ b/packages/web-shared/src/components/ui/data-inspector.tsx
@@ -1,44 +1,38 @@
 'use client';
 
 /**
- * Reusable data inspector component built on react-inspector.
+ * Reusable data inspector for the o11y UI.
  *
- * All data rendering in the o11y UI should use this component to ensure
- * consistent theming, custom type handling (StreamRef, ClassInstanceRef),
- * and expand behavior.
+ * Renders JSON as a collapsible tree: bracket notation (`{ … }` / `[ … ]`),
+ * colored keys, typed value colors, `▸`/`▾` disclosure icons, and a `...`
+ * collapsed indicator.
+ *
+ * On top of plain JSON it handles the workflow-specific value types: StreamRef /
+ * RunRef badges, encrypted markers, decoded byte streams, Dates, and named
+ * class instances.
  */
 
 import { Lock } from 'lucide-react';
 import {
   createContext,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+  type RefObject,
   useContext,
-  useEffect,
+  useId,
   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 { Button } from './button';
+import { CLS, JSON_VIEW_STYLES } from './data-inspector.styles';
 import { Spinner } from './spinner';
 
 // ---------------------------------------------------------------------------
@@ -67,6 +61,13 @@ interface BytesDisplay {
   decodedFrom?: DecodedStreamChunkSource;
 }
 
+interface ClassInstanceRef {
+  __type: typeof CLASS_INSTANCE_REF_TYPE;
+  className: string;
+  classId: string;
+  data: unknown;
+}
+
 function deserializeChunkText(text: string): string {
   try {
     const parsed = JSON.parse(text);
@@ -106,12 +107,7 @@ export function isBytesDisplay(value: unknown): value is BytesDisplay {
   return desc?.value === BYTES_DISPLAY_TYPE;
 }
 
-function isClassInstanceRef(value: unknown): value is {
-  __type: string;
-  className: string;
-  classId: string;
-  data: unknown;
-} {
+function isClassInstanceRef(value: unknown): value is ClassInstanceRef {
   return (
     value !== null &&
     typeof value === 'object' &&
@@ -120,6 +116,15 @@ function isClassInstanceRef(value: unknown): value is {
   );
 }
 
+function isEncryptedMarker(value: unknown): boolean {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    (value as { constructor?: { name?: string } }).constructor?.name ===
+      ENCRYPTED_DISPLAY_NAME
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Stream click context (passed through from the panel)
 // ---------------------------------------------------------------------------
@@ -150,6 +155,10 @@ export const RunClickContext = createContext<
   ((runId: string) => void) | undefined
 >(undefined);
 
+// ---------------------------------------------------------------------------
+// Workflow-specific value renderers (badges, encrypted markers, byte streams)
+// ---------------------------------------------------------------------------
+
 function EncryptedInlineLabel() {
   const ctx = useContext(DecryptClickContext);
   if (ctx) {
@@ -187,6 +196,7 @@ function EncryptedInlineLabel() {
     </span>
   );
 }
+
 function StreamRefInline({ streamRef }: { streamRef: StreamRef }) {
   const onStreamClick = useContext(StreamClickContext);
   const [hovered, setHovered] = useState(false);
@@ -240,14 +250,6 @@ function RunRefInline({ runRef }: { runRef: RunRef }) {
   );
 }
 
-// ---------------------------------------------------------------------------
-// Extended theme context (for colors react-inspector doesn't support natively)
-// ---------------------------------------------------------------------------
-
-const ExtendedThemeContext = createContext<InspectorThemeExtended>(
-  inspectorThemeExtendedLight
-);
-
 function DecodedBytesChunk({
   decodedText,
   source,
@@ -361,162 +363,474 @@ function DecodedBytesInspector({
   );
 }
 
-function BytesDisplayLabel({
-  name,
-  display,
-}: {
-  name?: string;
-  display: BytesDisplay;
-}) {
+function BytesDisplayValue({ display }: { display: BytesDisplay }) {
+  if (display.decodedFrom) {
+    return (
+      <DecodedBytesChunk
+        decodedText={display.text}
+        source={display.decodedFrom}
+      />
+    );
+  }
   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>
+    <span
+      className="whitespace-pre-wrap break-words"
+      style={{ color: 'var(--ds-gray-1000)' }}
+    >
+      {display.text}
+    </span>
   );
 }
 
 // ---------------------------------------------------------------------------
-// Custom nodeRenderer
+// Tree renderer
 // ---------------------------------------------------------------------------
 
+type Entry = [field: string | undefined, value: unknown];
+
+interface NodeContext {
+  level: number;
+  shouldExpand: (level: number) => boolean;
+  outerRef: RefObject<HTMLDivElement | null>;
+}
+
+/** Field names are rendered unquoted (empty string shows as `""`). */
+function formatField(field: string): string {
+  return field === '' ? '""' : field;
+}
+
 /**
- * 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
+ * Describe an object/array/map/set as an expandable container. Returns null for
+ * values that should render as a primitive. `prefix` carries a class name shown
+ * before the opening bracket (Map/Set and named class instances).
  */
-function NodeRenderer({
-  depth,
-  name,
-  data,
-  isNonenumerable,
+function describeContainer(
+  value: unknown
+): { entries: Entry[]; open: string; close: string; prefix?: string } | null {
+  if (Array.isArray(value)) {
+    return {
+      entries: value.map((item) => [undefined, item] as Entry),
+      open: '[',
+      close: ']',
+    };
+  }
+  if (value instanceof Map) {
+    return {
+      entries: Array.from(value.entries(), ([key, val]) => [
+        String(key),
+        val,
+      ]) as Entry[],
+      open: '{',
+      close: '}',
+      prefix: 'Map',
+    };
+  }
+  if (value instanceof Set) {
+    return {
+      entries: Array.from(value.values(), (item) => [undefined, item] as Entry),
+      open: '[',
+      close: ']',
+      prefix: 'Set',
+    };
+  }
+  if (value !== null && typeof value === 'object') {
+    const name = (value as { constructor?: { name?: string } }).constructor
+      ?.name;
+    return {
+      entries: Object.entries(value) as Entry[],
+      open: '{',
+      close: '}',
+      prefix: name && name !== 'Object' ? name : undefined,
+    };
+  }
+  return null;
+}
+
+function describePrimitive(value: unknown): { text: string; cls: string } {
+  if (value === null) return { text: 'null', cls: CLS.null };
+  if (value === undefined) return { text: 'undefined', cls: CLS.undefined };
+  if (typeof value === 'string' || value instanceof String) {
+    return { text: `"${String(value)}"`, cls: CLS.string };
+  }
+  if (typeof value === 'boolean' || value instanceof Boolean) {
+    return { text: String(value), cls: CLS.boolean };
+  }
+  if (typeof value === 'number' || value instanceof Number) {
+    return { text: String(value), cls: CLS.number };
+  }
+  if (typeof value === 'bigint') {
+    return { text: `${value.toString()}n`, cls: CLS.number };
+  }
+  return { text: String(value), cls: CLS.punctuation };
+}
+
+function Label({ field, clickable }: { field?: string; clickable?: boolean }) {
+  if (field === undefined) return null;
+  return (
+    <span className={clickable ? CLS.clickableLabel : CLS.label}>
+      {`${formatField(field)}:`}
+    </span>
+  );
+}
+
+function Comma({ isLast }: { isLast: boolean }) {
+  if (isLast) return null;
+  return <span className={CLS.punctuation}>,</span>;
+}
+
+/** A non-expandable row: `field: <value>`. */
+function LeafRow({
+  field,
+  isLast,
+  children,
 }: {
-  depth: number;
-  name?: string;
-  data: unknown;
-  isNonenumerable?: boolean;
-  expanded?: boolean;
+  field?: string;
+  isLast: boolean;
+  children: ReactNode;
 }) {
-  const extendedTheme = useContext(ExtendedThemeContext);
+  return (
+    <div className={CLS.child} role="treeitem" tabIndex={-1}>
+      <Label field={field} />
+      {children}
+      <Comma isLast={isLast} />
+    </div>
+  );
+}
 
-  if (isBytesDisplay(data)) {
-    return <BytesDisplayLabel name={name} display={data} />;
-  }
+function PrimitiveValue({ field, value, isLast }: NodeProps) {
+  const { text, cls } = describePrimitive(value);
+  return (
+    <LeafRow field={field} isLast={isLast}>
+      <span className={cls}>{text}</span>
+    </LeafRow>
+  );
+}
 
-  // 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;
+function EmptyContainer({
+  field,
+  prefix,
+  open,
+  close,
+  isLast,
+}: {
+  field?: string;
+  prefix?: string;
+  open: string;
+  close: string;
+  isLast: boolean;
+}) {
+  return (
+    <div className={CLS.child} role="treeitem" tabIndex={-1}>
+      <Label field={field} />
+      {prefix ? <span className={CLS.className}>{prefix}</span> : null}
+      <span className={CLS.punctuation}>{open}</span>
+      <span className={CLS.punctuation}>{close}</span>
+      <Comma isLast={isLast} />
+    </div>
+  );
+}
+
+function focusExpander(
+  button: HTMLElement,
+  outerRef: RefObject<HTMLDivElement | null>
+) {
+  const previous = outerRef.current?.querySelector<HTMLElement>(
+    '[data-json-expander][tabindex="0"]'
+  );
+  if (previous) previous.tabIndex = -1;
+  button.tabIndex = 0;
+  button.focus();
+}
+
+function moveExpanderFocus(
+  outerRef: RefObject<HTMLDivElement | null>,
+  direction: 1 | -1
+) {
+  const root = outerRef.current;
+  if (!root) return;
+  const buttons = root.querySelectorAll<HTMLElement>('[data-json-expander]');
+  let current = -1;
+  for (let i = 0; i < buttons.length; i += 1) {
+    if (buttons[i].tabIndex === 0) {
+      current = i;
+      break;
     }
+  }
+  if (current < 0) return;
+  const next = (current + direction + buttons.length) % buttons.length;
+  buttons[current].tabIndex = -1;
+  buttons[next].tabIndex = 0;
+  buttons[next].focus();
+}
+
+function ExpandableContainer({
+  field,
+  entries,
+  open,
+  close,
+  prefix,
+  ctx,
+  isLast,
+}: {
+  field?: string;
+  entries: Entry[];
+  open: string;
+  close: string;
+  prefix?: string;
+  ctx: NodeContext;
+  isLast: boolean;
+}) {
+  const { level, shouldExpand, outerRef } = ctx;
+  const [expanded, setExpanded] = useState(() => shouldExpand(level));
+  const rowRef = useRef<HTMLDivElement>(null);
+  const contentsId = useId();
+
+  if (entries.length === 0) {
     return (
-      <span>
-        {name != null && <ObjectName name={name} />}
-        {name != null && <span>: </span>}
-        {label}
-      </span>
+      <EmptyContainer
+        field={field}
+        prefix={prefix}
+        open={open}
+        close={close}
+        isLast={isLast}
+      />
     );
   }
 
-  // StreamRef → inline clickable badge
-  if (isStreamRef(data)) {
+  const toggle = () => {
+    setExpanded((value) => !value);
+    if (rowRef.current) focusExpander(rowRef.current, outerRef);
+  };
+
+  // Toggle only for clicks that land on this row itself; clicks bubbling up out
+  // of a nested treeitem are handled by that descendant's own row.
+  const onClick = (event: ReactMouseEvent) => {
+    if (
+      (event.target as HTMLElement).closest('[role="treeitem"]') !==
+      event.currentTarget
+    ) {
+      return;
+    }
+    toggle();
+  };
+
+  const onKeyDown = (event: ReactKeyboardEvent) => {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      setExpanded(true);
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      setExpanded(false);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      moveExpanderFocus(outerRef, -1);
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      moveExpanderFocus(outerRef, 1);
+    }
+  };
+
+  const lastIndex = entries.length - 1;
+
+  return (
+    // The treeitem row is the focusable, keyboard-operable control (roving
+    // tabindex + arrow keys); the disclosure marker below is purely decorative.
+    <div
+      className={CLS.child}
+      role="treeitem"
+      aria-expanded={expanded}
+      aria-controls={expanded ? contentsId : undefined}
+      data-json-expander
+      ref={rowRef}
+      tabIndex={level === 0 ? 0 : -1}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+    >
+      <span
+        className={expanded ? CLS.collapseIcon : CLS.expandIcon}
+        aria-hidden="true"
+      />
+      {field !== undefined && (
+        <span className={CLS.clickableLabel}>{`${formatField(field)}:`}</span>
+      )}
+      {prefix ? <span className={CLS.className}>{prefix}</span> : null}
+      <span className={CLS.punctuation}>{open}</span>
+      {expanded ? (
+        // biome-ignore lint/a11y/useSemanticElements: ARIA tree group is the correct role here
+        <ul id={contentsId} className={CLS.childFields} role="group">
+          {entries.map(([childField, childValue], index) => (
+            <DataRender
+              key={childField ?? index}
+              field={childField}
+              value={childValue}
+              isLast={index === lastIndex}
+              ctx={{ ...ctx, level: level + 1 }}
+            />
+          ))}
+        </ul>
+      ) : (
+        <span className={CLS.collapsedContent} aria-hidden="true" />
+      )}
+      <span className={CLS.punctuation}>{close}</span>
+      <Comma isLast={isLast} />
+    </div>
+  );
+}
+
+interface NodeProps {
+  field?: string;
+  value: unknown;
+  isLast: boolean;
+  ctx: NodeContext;
+}
+
+function DataRender({ field, value, isLast, ctx }: NodeProps) {
+  if (isBytesDisplay(value)) {
     return (
-      <span>
-        {name != null && <ObjectName name={name} />}
-        {name != null && <span>: </span>}
-        <StreamRefInline streamRef={data} />
-      </span>
+      <LeafRow field={field} isLast={isLast}>
+        <BytesDisplayValue display={value} />
+      </LeafRow>
     );
   }
-
-  // RunRef → inline clickable badge linking to the target run
-  if (isRunRef(data)) {
+  if (isEncryptedMarker(value)) {
     return (
-      <span>
-        {name != null && <ObjectName name={name} />}
-        {name != null && <span>: </span>}
-        <RunRefInline runRef={data} />
-      </span>
+      <LeafRow field={field} isLast={isLast}>
+        <EncryptedInlineLabel />
+      </LeafRow>
     );
   }
-
-  // ClassInstanceRef → show className as type, data as the inspectable value
-  if (isClassInstanceRef(data)) {
-    if (depth === 0) {
-      return <ObjectRootLabel name={data.className} data={data.data} />;
-    }
+  if (isStreamRef(value)) {
     return (
-      <span>
-        {name != null && <ObjectName name={name} />}
-        {name != null && <span>: </span>}
-        <span style={{ fontStyle: 'italic' }}>{data.className} </span>
-        <ObjectValue object={data.data} />
-      </span>
+      <LeafRow field={field} isLast={isLast}>
+        <StreamRefInline streamRef={value} />
+      </LeafRow>
+    );
+  }
+  if (isRunRef(value)) {
+    return (
+      <LeafRow field={field} isLast={isLast}>
+        <RunRefInline runRef={value} />
+      </LeafRow>
+    );
+  }
+  if (value instanceof Date) {
+    return (
+      <LeafRow field={field} isLast={isLast}>
+        <span className={CLS.date}>{value.toISOString()}</span>
+      </LeafRow>
+    );
+  }
+  if (value instanceof RegExp) {
+    return (
+      <LeafRow field={field} isLast={isLast}>
+        <span className={CLS.regexp}>{value.toString()}</span>
+      </LeafRow>
+    );
+  }
+  if (isClassInstanceRef(value)) {
+    return (
+      <ClassInstanceNode
+        field={field}
+        instance={value}
+        isLast={isLast}
+        ctx={ctx}
+      />
     );
   }
 
-  // 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>
-      );
-    }
+  const container = describeContainer(value);
+  if (container) {
     return (
-      <span>
-        {name != null && <ObjectName name={name} />}
-        {name != null && <span>: </span>}
-        <span style={{ color: extendedTheme.OBJECT_VALUE_DATE_COLOR }}>
-          {dateStr}
-        </span>
-      </span>
+      <ExpandableContainer
+        field={field}
+        entries={container.entries}
+        open={container.open}
+        close={container.close}
+        prefix={container.prefix}
+        ctx={ctx}
+        isLast={isLast}
+      />
     );
   }
 
-  // Default rendering (same as react-inspector's built-in)
-  if (depth === 0) {
-    return <ObjectRootLabel name={name} data={data} />;
+  return (
+    <PrimitiveValue field={field} value={value} isLast={isLast} ctx={ctx} />
+  );
+}
+
+function ClassInstanceNode({
+  field,
+  instance,
+  isLast,
+  ctx,
+}: {
+  field?: string;
+  instance: ClassInstanceRef;
+  isLast: boolean;
+  ctx: NodeContext;
+}) {
+  const container = describeContainer(instance.data);
+  if (container) {
+    return (
+      <ExpandableContainer
+        field={field}
+        entries={container.entries}
+        open={container.open}
+        close={container.close}
+        prefix={instance.className}
+        ctx={ctx}
+        isLast={isLast}
+      />
+    );
   }
+  const { text, cls } = describePrimitive(instance.data);
   return (
-    <ObjectLabel name={name} data={data} isNonenumerable={isNonenumerable} />
+    <LeafRow field={field} isLast={isLast}>
+      <span className={CLS.className}>{instance.className}</span>
+      <span className={cls}>{text}</span>
+    </LeafRow>
+  );
+}
+
+function JsonTree({
+  data,
+  name,
+  expandLevel,
+}: {
+  data: unknown;
+  name?: string;
+  expandLevel: number;
+}) {
+  const outerRef = useRef<HTMLDivElement>(null);
+  const shouldExpand = useMemo(
+    () => (level: number) => level < expandLevel,
+    [expandLevel]
+  );
+  return (
+    <div
+      ref={outerRef}
+      className={CLS.container}
+      role="tree"
+      aria-label="JSON view"
+    >
+      <DataRender
+        field={name}
+        value={data}
+        isLast
+        ctx={{ level: 0, shouldExpand, outerRef }}
+      />
+    </div>
   );
 }
 
 // ---------------------------------------------------------------------------
-// Public component
+// Ref / typed-array collapsing (preprocessing before render)
 // ---------------------------------------------------------------------------
 
 /**
  * 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.
+ * properties so the renderer can detect StreamRef/RunRef without exposing
+ * their internals as object fields.
  */
 function makeOpaqueRef(ref: Record<string, unknown>): unknown {
   const opaque = Object.create(null);
@@ -545,11 +859,11 @@ function makeBytesDisplay(display: FormattedStreamChunkDisplay): unknown {
 
 /**
  * Recursively walk data and replace RunRef/StreamRef/typed array objects with
- * non-expandable versions so ObjectInspector doesn't show their internals.
+ * non-expandable versions so the renderer 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.
+ * instances (Date, Error, URL, Headers, etc.) that have their own rendering.
+ * 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(...) }`).
@@ -583,10 +897,14 @@ export function collapseRefs(data: unknown): unknown {
   return result;
 }
 
+// ---------------------------------------------------------------------------
+// Public component
+// ---------------------------------------------------------------------------
+
 export interface DataInspectorProps {
   /** The data to inspect */
   data: unknown;
-  /** Initial expand depth (default: 2) */
+  /** Levels strictly below this number auto-expand (default: 2) */
   expandLevel?: number;
   /** Optional name for the root node */
   name?: string;
@@ -611,59 +929,47 @@ export function DataInspector({
 }: 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;
+  let content: ReactNode = (
+    <>
+      {/* React 19 hoists & dedupes this <style> by href, so it is emitted once
+          regardless of how many inspectors are mounted. */}
+      <style href="wf-json-view" precedence="default">
+        {JSON_VIEW_STYLES}
+      </style>
+      <JsonTree data={stableData} name={name} expandLevel={expandLevel} />
+    </>
+  );
 
   if (onStreamClick) {
-    wrapped = (
+    content = (
       <StreamClickContext.Provider value={onStreamClick}>
-        {wrapped}
+        {content}
       </StreamClickContext.Provider>
     );
   }
   if (onRunClick) {
-    wrapped = (
+    content = (
       <RunClickContext.Provider value={onRunClick}>
-        {wrapped}
+        {content}
       </RunClickContext.Provider>
     );
   }
   if (onDecrypt) {
-    wrapped = (
+    content = (
       <DecryptClickContext.Provider value={{ onDecrypt, isDecrypting }}>
-        {wrapped}
+        {content}
       </DecryptClickContext.Provider>
     );
   }
 
-  return wrapped;
+  return content;
 }
 
+// ---------------------------------------------------------------------------
+// Render stabilization (avoid re-renders when data is deeply equal)
+// ---------------------------------------------------------------------------
+
 function useStableInspectorData<T>(next: T): T {
   const previousRef = useRef<T>(next);
   if (!isDeepEqual(previousRef.current, next)) {
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/lib/hydration.ts b/packages/web-shared/src/lib/hydration.ts
index 936c35c1fb..2caf2cf0c7 100644
--- a/packages/web-shared/src/lib/hydration.ts
+++ b/packages/web-shared/src/lib/hydration.ts
@@ -298,7 +298,7 @@ export function getWebRevivers(): Revivers {
 
     // Web-specific overrides for class instances.
     // Create objects with a dynamically-named constructor so that
-    // react-inspector shows the class name (it reads constructor.name).
+    // the data inspector shows the class name (it reads constructor.name).
     Class: (value) => `<class:${extractClassName(value.classId)}>`,
     Instance: (value) => {
       // Run instances are rendered as clickable RunRef badges
@@ -311,7 +311,7 @@ export function getWebRevivers(): Revivers {
       const props =
         data && typeof data === 'object' ? { ...data } : { value: data };
       // Create a constructor with the right name using computed property
-      // so react-inspector's `object.constructor.name` shows the class name.
+      // so the data inspector's `object.constructor.name` shows the class name.
       // Must use `function` (not arrow) because arrow functions have no .prototype.
       // biome-ignore lint/complexity/useArrowFunction: arrow functions have no .prototype
       const ctor = { [className]: function () {} }[className]!;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94ed2b11a2..6bfef0f6c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1215,9 +1215,6 @@ 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-use-measure:
         specifier: 2.1.1
         version: 2.1.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -15272,11 +15269,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==}
 
@@ -26050,14 +26042,6 @@ snapshots:
     optionalDependencies:
       vite: 7.3.2(@types/node@22.19.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.9.0)
 
-  '@vitest/mocker@4.0.18(vite@7.3.2(@types/node@22.19.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.9.0))':
-    dependencies:
-      '@vitest/spy': 4.0.18
-      estree-walker: 3.0.3
-      magic-string: 0.30.21
-    optionalDependencies:
-      vite: 7.3.2(@types/node@22.19.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.9.0)
-
   '@vitest/mocker@4.0.18(vite@7.3.2(@types/node@24.6.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.9.0))':
     dependencies:
       '@vitest/spy': 4.0.18
@@ -33817,10 +33801,6 @@ 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: {}
@@ -36417,7 +36397,7 @@ snapshots:
   vitest@4.0.18(@opentelemetry/api@1.9.1)(@types/node@22.19.0)(jiti@2.7.0)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.9.0):
     dependencies:
       '@vitest/expect': 4.0.18
-      '@vitest/mocker': 4.0.18(vite@7.3.2(@types/node@22.19.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.9.0))
+      '@vitest/mocker': 4.0.18(vite@7.3.2(@types/node@24.6.2)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.44.0)(tsx@4.20.6)(yaml@2.9.0))
       '@vitest/pretty-format': 4.0.18
       '@vitest/runner': 4.0.18
       '@vitest/snapshot': 4.0.18