diff --git a/packages/apollo-react/package.json b/packages/apollo-react/package.json
index b046bcd32..465cfb170 100644
--- a/packages/apollo-react/package.json
+++ b/packages/apollo-react/package.json
@@ -186,6 +186,7 @@
     "@lexical/table": "0.42.0",
     "@lexical/utils": "0.42.0",
     "@lingui/core": "^5.6.1",
+    "@lingui/message-utils": "^5.6.1",
     "@lingui/react": "^5.6.1",
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.18.0",
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/DecorationChip.tsx b/packages/apollo-react/src/canvas/components/JsonTree/DecorationChip.tsx
new file mode 100644
index 000000000..8bb48842b
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/DecorationChip.tsx
@@ -0,0 +1,53 @@
+import { cn } from '@uipath/apollo-wind';
+import { CanvasTooltip } from '../CanvasTooltip';
+import type { NodeDecoration, NodeDecorationTone } from './JsonTree.types';
+
+const CHIP_TONE_TEXT_CLASS: Record<NodeDecorationTone, string> = {
+  neutral: 'text-foreground-subtle',
+  info: 'text-info',
+  warning: 'text-warning',
+  error: 'text-error',
+};
+
+const CHIP_TONE_BORDER_CLASS: Record<NodeDecorationTone, string> = {
+  neutral: 'border-border',
+  info: 'border-info/40',
+  warning: 'border-warning/40',
+  error: 'border-error/40',
+};
+
+export function DecorationChip({ decoration }: { decoration?: NodeDecoration }) {
+  const chip = decoration?.chip;
+  if (!chip || (chip.label == null && chip.icon == null)) return null;
+  const tone = chip.tone ?? 'neutral';
+
+  // A label gets the pill treatment; a bare icon renders unboxed.
+  const content = chip.label ? (
+    <span
+      className={cn(
+        'flex min-w-0 items-center gap-1 truncate rounded-full border px-1.5 py-px text-[10px] font-medium leading-none',
+        CHIP_TONE_BORDER_CLASS[tone],
+        CHIP_TONE_TEXT_CLASS[tone]
+      )}
+    >
+      {chip.icon && <span className="shrink-0">{chip.icon}</span>}
+      {chip.label}
+    </span>
+  ) : (
+    <span
+      className={cn('flex shrink-0 items-center', CHIP_TONE_TEXT_CLASS[tone])}
+      // Only an element with an explicit role supports aria-label, so pair
+      // them: a bare icon with a tooltip becomes a labelled `img`.
+      {...(chip.tooltip ? { role: 'img' as const, 'aria-label': chip.tooltip } : {})}
+    >
+      {chip.icon}
+    </span>
+  );
+
+  if (!chip.tooltip) return content;
+  return (
+    <CanvasTooltip placement="top" content={<span className="text-xs">{chip.tooltip}</span>}>
+      {content}
+    </CanvasTooltip>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/EditorChrome.tsx b/packages/apollo-react/src/canvas/components/JsonTree/EditorChrome.tsx
new file mode 100644
index 000000000..c72cb045a
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/EditorChrome.tsx
@@ -0,0 +1,91 @@
+import { Button, cn } from '@uipath/apollo-wind';
+import { useEffect, useRef } from 'react';
+import { useSafeLingui } from '../../../i18n';
+
+/** Apply/Cancel row shared by the multiline editors. */
+export function EditorActions({
+  onApply,
+  onCancel,
+  applyDisabled = false,
+}: {
+  onApply: () => void;
+  onCancel: () => void;
+  applyDisabled?: boolean;
+}) {
+  const { _ } = useSafeLingui();
+  return (
+    <div className="flex items-center gap-1.5">
+      <Button size="3xs" onClick={onApply} disabled={applyDisabled}>
+        {_({ id: 'canvas.json_value_panel.apply', message: 'Apply' })}
+      </Button>
+      <Button size="3xs" variant="ghost" onClick={onCancel}>
+        {_({ id: 'canvas.json_value_panel.cancel', message: 'Cancel' })}
+      </Button>
+    </div>
+  );
+}
+
+export interface EditorTextareaProps {
+  value: string;
+  onChange: (value: string) => void;
+  /** Bound to Ctrl/Cmd+Enter. */
+  onApply: () => void;
+  /** Bound to Escape (contained so a host dialog does not also close). */
+  onCancel: () => void;
+  invalid: boolean;
+  rows: number;
+  ariaLabel: string;
+  placeholder?: string;
+  className?: string;
+}
+
+/** Multiline editing surface shared by the leaf and container editors. */
+export function EditorTextarea({
+  value,
+  onChange,
+  onApply,
+  onCancel,
+  invalid,
+  rows,
+  ariaLabel,
+  placeholder,
+  className,
+}: EditorTextareaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Mounted in response to the user's edit action; focus follows it (the
+  // attribute form trips a11y linting).
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  return (
+    <textarea
+      ref={textareaRef}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          // preventDefault (not just stopPropagation): a host that closes on
+          // Escape via a document-level listener (e.g. Radix Dialog) reads the
+          // native event's defaultPrevented flag, which crosses the portal
+          // boundary reliably — React synthetic stopPropagation does not.
+          e.preventDefault();
+          e.stopPropagation();
+          onCancel();
+        }
+        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) onApply();
+      }}
+      rows={rows}
+      spellCheck={false}
+      aria-label={ariaLabel}
+      aria-invalid={invalid || undefined}
+      placeholder={placeholder}
+      className={cn(
+        'w-full resize-y rounded-lg border bg-surface p-2 font-mono text-xs leading-5 text-foreground outline-none',
+        invalid ? 'border-error' : 'border-border-subtle focus:border-brand',
+        className
+      )}
+    />
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/JsonContainerEditor.tsx b/packages/apollo-react/src/canvas/components/JsonTree/JsonContainerEditor.tsx
new file mode 100644
index 000000000..7fb2baf61
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/JsonContainerEditor.tsx
@@ -0,0 +1,96 @@
+import { cn } from '@uipath/apollo-wind';
+import { useState } from 'react';
+import { useSafeLingui } from '../../../i18n';
+import { EditorActions, EditorTextarea } from './EditorChrome';
+import type { JsonTreeNode, JsonValue, RenderCodeEditor } from './JsonTree.types';
+
+export interface JsonContainerEditorProps {
+  node: JsonTreeNode;
+  onCommit: (value: JsonValue) => void;
+  onCancel: () => void;
+  /**
+   * Renders the editing surface as a code editor instead of the plain
+   * textarea. The Apply/Cancel chrome and error message stay owned here.
+   */
+  renderCodeEditor?: RenderCodeEditor;
+  className?: string;
+}
+
+function isValidJson(raw: string): boolean {
+  try {
+    JSON.parse(raw);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Multiline JSON editor for object/array nodes. Applies with the Apply button
+ * or Ctrl/Cmd+Enter; Escape cancels. Parse errors block the commit. Consumers
+ * can swap the textarea for a real code editor via `renderCodeEditor`.
+ */
+export function JsonContainerEditor({
+  node,
+  onCommit,
+  onCancel,
+  renderCodeEditor,
+  className,
+}: JsonContainerEditorProps) {
+  const { _ } = useSafeLingui();
+  const initialValue = node.value ?? (node.type === 'array' ? [] : {});
+  const [raw, setRaw] = useState(() => JSON.stringify(initialValue, null, 2));
+  const [error, setError] = useState<string | null>(null);
+
+  const handleChange = (value: string) => {
+    setRaw(value);
+    setError(null);
+  };
+
+  const apply = () => {
+    try {
+      onCommit(JSON.parse(raw) as JsonValue);
+    } catch (e) {
+      setError(
+        e instanceof Error
+          ? e.message
+          : _({
+              id: 'canvas.json_value_panel.invalid_json',
+              message: 'Invalid JSON',
+            })
+      );
+    }
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-1.5', className)}>
+      {renderCodeEditor ? (
+        renderCodeEditor({
+          value: raw,
+          onChange: handleChange,
+          onApply: apply,
+          onCancel,
+          invalid: !isValidJson(raw),
+          language: 'json',
+          autoFocus: true,
+        })
+      ) : (
+        <EditorTextarea
+          value={raw}
+          onChange={handleChange}
+          onApply={apply}
+          onCancel={onCancel}
+          invalid={!!error}
+          rows={Math.min(12, Math.max(3, raw.split('\n').length))}
+          ariaLabel={_({
+            id: 'canvas.json_value_panel.edit_json_of',
+            message: 'Edit JSON of {key}',
+            values: { key: node.key },
+          })}
+        />
+      )}
+      {error && <p className="text-xs leading-4 text-error">{error}</p>}
+      <EditorActions onApply={apply} onCancel={onCancel} />
+    </div>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/JsonLeafValueEditor.tsx b/packages/apollo-react/src/canvas/components/JsonTree/JsonLeafValueEditor.tsx
new file mode 100644
index 000000000..eb82fbee5
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/JsonLeafValueEditor.tsx
@@ -0,0 +1,101 @@
+import { cn } from '@uipath/apollo-wind';
+import { useEffect, useRef, useState } from 'react';
+import { useSafeLingui } from '../../../i18n';
+import type { JsonTreeNode, JsonValue } from './JsonTree.types';
+import { isNumericEdit, parseLeafValue, resolveLeafEditType } from './leafEditTypes';
+
+export interface JsonLeafValueEditorProps {
+  node: JsonTreeNode;
+  onCommit: (value: JsonValue) => void;
+  onCancel: () => void;
+  className?: string;
+}
+
+/**
+ * Inline editor for scalar leaves (string, number, null). Commits on Enter or
+ * blur, cancels on Escape. Invalid numbers are flagged and never committed.
+ */
+export function JsonLeafValueEditor({
+  node,
+  onCommit,
+  onCancel,
+  className,
+}: JsonLeafValueEditorProps) {
+  const { _ } = useSafeLingui();
+  const editType = resolveLeafEditType(node.type, node.schema);
+  const initial =
+    node.value === undefined || node.value === null
+      ? String(node.schema?.default ?? '')
+      : String(node.value);
+  const [raw, setRaw] = useState(initial);
+  const cancelledRef = useRef(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const invalid = parseLeafValue(raw, editType) === undefined;
+
+  // The editor mounts in response to the user clicking the value, so focus
+  // follows that action (the attribute form trips a11y linting).
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const commit = () => {
+    const parsed = parseLeafValue(raw, editType);
+    if (parsed === undefined) return;
+    onCommit(parsed);
+  };
+
+  return (
+    <input
+      ref={inputRef}
+      type="text"
+      value={raw}
+      inputMode={editType === 'integer' ? 'numeric' : editType === 'number' ? 'decimal' : undefined}
+      onChange={(e) => setRaw(e.target.value)}
+      onFocus={(e) => e.target.select()}
+      onBlur={() => {
+        if (cancelledRef.current) {
+          cancelledRef.current = false;
+          return;
+        }
+        if (invalid) onCancel();
+        else commit();
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') commit();
+        if (e.key === 'Escape') {
+          // Contain Escape here so it cancels the edit without also bubbling
+          // to a host that closes on Escape (e.g. a dialog or the panel).
+          // preventDefault sets the native event's defaultPrevented flag, which
+          // a document-level host listener (Radix Dialog) reads across the
+          // portal boundary — synthetic stopPropagation alone does not stop it.
+          e.preventDefault();
+          e.stopPropagation();
+          cancelledRef.current = true;
+          onCancel();
+        }
+      }}
+      aria-label={_({
+        id: 'canvas.json_value_panel.edit_value_of',
+        message: 'Edit value of {key}',
+        values: { key: node.key },
+      })}
+      aria-invalid={invalid || undefined}
+      placeholder={
+        isNumericEdit(editType)
+          ? _({
+              id: 'canvas.json_value_panel.enter_number',
+              message: 'Enter a number',
+            })
+          : _({
+              id: 'canvas.json_value_panel.enter_value',
+              message: 'Enter a value',
+            })
+      }
+      className={cn(
+        'min-w-0 flex-1 rounded bg-transparent font-mono text-xs text-foreground outline-none ring-1',
+        invalid ? 'ring-error' : 'ring-brand',
+        className
+      )}
+    />
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/JsonMultilineLeafEditor.tsx b/packages/apollo-react/src/canvas/components/JsonTree/JsonMultilineLeafEditor.tsx
new file mode 100644
index 000000000..77a7a406e
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/JsonMultilineLeafEditor.tsx
@@ -0,0 +1,71 @@
+import { cn } from '@uipath/apollo-wind';
+import { useState } from 'react';
+import { useSafeLingui } from '../../../i18n';
+import { EditorActions, EditorTextarea } from './EditorChrome';
+import type { JsonTreeNode, JsonValue } from './JsonTree.types';
+import { isNumericEdit, parseLeafValue, resolveLeafEditType } from './leafEditTypes';
+
+export interface JsonMultilineLeafEditorProps {
+  node: JsonTreeNode;
+  onCommit: (value: JsonValue) => void;
+  onCancel: () => void;
+  className?: string;
+}
+
+/**
+ * Multiline editor for scalar leaves, used by the expanded row view so long
+ * values can wrap. Applies with the Apply button or Ctrl/Cmd+Enter; Escape
+ * cancels. Commits with the same type rules as the inline leaf editor.
+ */
+export function JsonMultilineLeafEditor({
+  node,
+  onCommit,
+  onCancel,
+  className,
+}: JsonMultilineLeafEditorProps) {
+  const { _ } = useSafeLingui();
+  const editType = resolveLeafEditType(node.type, node.schema);
+  const initial =
+    node.value === undefined || node.value === null
+      ? String(node.schema?.default ?? '')
+      : String(node.value);
+  const [raw, setRaw] = useState(initial);
+  const invalid = parseLeafValue(raw, editType) === undefined;
+
+  const apply = () => {
+    const parsed = parseLeafValue(raw, editType);
+    if (parsed === undefined) return;
+    onCommit(parsed);
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-1.5', className)}>
+      <EditorTextarea
+        value={raw}
+        onChange={setRaw}
+        onApply={apply}
+        onCancel={onCancel}
+        invalid={invalid}
+        rows={Math.min(10, Math.max(3, raw.split('\n').length + 1))}
+        ariaLabel={_({
+          id: 'canvas.json_value_panel.edit_value_of',
+          message: 'Edit value of {key}',
+          values: { key: node.key },
+        })}
+        placeholder={
+          isNumericEdit(editType)
+            ? _({
+                id: 'canvas.json_value_panel.enter_number',
+                message: 'Enter a number',
+              })
+            : _({
+                id: 'canvas.json_value_panel.enter_value',
+                message: 'Enter a value',
+              })
+        }
+        className="whitespace-pre-wrap"
+      />
+      <EditorActions onApply={apply} onCancel={onCancel} applyDisabled={invalid} />
+    </div>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/JsonTree.tsx b/packages/apollo-react/src/canvas/components/JsonTree/JsonTree.tsx
new file mode 100644
index 000000000..146ba3f48
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/JsonTree.tsx
@@ -0,0 +1,236 @@
+import { cn } from '@uipath/apollo-wind';
+import { TooltipProvider } from '@uipath/apollo-wind/components/ui/tooltip';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useSafeLingui } from '../../../i18n';
+import { CanvasTooltipProviderMarker } from '../CanvasTooltip';
+import { flattenJsonTree } from './buildJsonTree';
+import { copyTextToClipboard } from './clipboard';
+import type {
+  CopyEvent,
+  DeriveTypeIcon,
+  JsonTreeNode,
+  JsonTreeRowWrapper,
+  JsonValue,
+  NodeActionsResolver,
+  NodeDecoration,
+  RenderCodeEditor,
+  RenderValueCell,
+} from './JsonTree.types';
+import {
+  JsonTreeRow,
+  JsonTreeRowContextProvider,
+  type JsonTreeRowContextValue,
+} from './JsonTreeRow';
+
+export interface JsonTreeProps {
+  /** Tree built with `buildJsonTree`. */
+  nodes: JsonTreeNode[];
+  /** Collapsed container paths. */
+  collapsed?: Record<string, boolean>;
+  onToggleCollapsed?: (path: string) => void;
+  /** Search query matched against keys and scalar values. */
+  query?: string;
+  /**
+   * Rows are kept when the node (or any descendant) matches; a node that
+   * matches directly shows its whole subtree.
+   */
+  filterPredicate?: (node: JsonTreeNode) => boolean;
+  /** Hides all editing affordances. */
+  readOnly?: boolean;
+  /** Called with the node and its new value after an inline edit. Undefined removes the value. */
+  onEdit?: (node: JsonTreeNode, value: JsonValue | undefined) => void;
+  /**
+   * Custom row container (e.g. to make rows drag sources). Renders `children`
+   * inside a single element applying `className`/`style`. Must be a stable
+   * component reference (module scope or memoized), not an inline arrow.
+   */
+  rowWrapper?: JsonTreeRowWrapper;
+  /** Per-node visual annotations (labels, chips, badge overrides). None by default. */
+  decorateNode?: (node: JsonTreeNode) => NodeDecoration | undefined;
+  /** Custom type-badge icons per node. Return undefined to keep the default type icon. */
+  deriveTypeIcon?: DeriveTypeIcon;
+  /** Custom value cell renderer; return undefined to keep the default cell. */
+  renderValue?: RenderValueCell;
+  /**
+   * Customizes the trailing row actions per node: compose with the built-ins
+   * via `ctx.defaultActions`, return `[]` to omit them, or `undefined` to keep
+   * the defaults.
+   */
+  nodeActions?: NodeActionsResolver;
+  /**
+   * Maximum row actions shown inline before the surplus collapses into an
+   * overflow menu. Default 3.
+   */
+  maxInlineActions?: number;
+  /** Renders the object/array editing surface as a code editor (defaults to a textarea). */
+  renderCodeEditor?: RenderCodeEditor;
+  /** Builds the text copied when a field name is clicked. Defaults to the path itself. */
+  pathForCopy?: (path: string) => string;
+  /** Called after something is copied to the clipboard. */
+  onCopy?: (event: CopyEvent) => void;
+  emptyMessage?: string;
+  className?: string;
+}
+
+function valueAsText(node: JsonTreeNode): string {
+  if (typeof node.value === 'string') return node.value;
+  if (node.value === undefined) return 'null';
+  return JSON.stringify(node.value, null, 2);
+}
+
+const DefaultRowWrapper: JsonTreeRowWrapper = ({ className, style, onClick, children }) => (
+  <div className={className} style={style} onClick={onClick}>
+    {children}
+  </div>
+);
+
+/**
+ * Interactive tree of a JSON value merged with its schema. Containers
+ * collapse, leaves edit inline (all JSON types), field names copy their
+ * path, and the row actions copy the value or wrap long scalars
+ * into a full-width block with a multiline editor.
+ */
+export function JsonTree({
+  nodes,
+  collapsed = {},
+  onToggleCollapsed,
+  query,
+  filterPredicate,
+  readOnly = false,
+  onEdit,
+  rowWrapper,
+  decorateNode,
+  deriveTypeIcon,
+  renderValue,
+  nodeActions,
+  maxInlineActions = 3,
+  renderCodeEditor,
+  pathForCopy,
+  onCopy,
+  emptyMessage,
+  className,
+}: JsonTreeProps) {
+  const { _ } = useSafeLingui();
+  const RowWrapper = rowWrapper ?? DefaultRowWrapper;
+  const [editingPath, setEditingPath] = useState<string | null>(null);
+  const [jsonEditingPath, setJsonEditingPath] = useState<string | null>(null);
+  const [wrappedPaths, setWrappedPaths] = useState<Record<string, boolean>>({});
+  const [copied, setCopied] = useState<{
+    path: string;
+    kind: CopyEvent['kind'];
+  } | null>(null);
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+    },
+    []
+  );
+
+  const copy = (node: JsonTreeNode, kind: CopyEvent['kind'], text: string) => {
+    void copyTextToClipboard(text).then((ok) => {
+      // Both fallback paths failed: nothing reached the clipboard, so neither
+      // the inline confirmation nor the consumer callback should fire.
+      if (!ok) return;
+      setCopied({ path: node.path, kind });
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+      copyTimerRef.current = setTimeout(() => setCopied(null), 1500);
+      onCopy?.({ kind, path: node.path, text });
+    });
+  };
+
+  const copyPath = (node: JsonTreeNode) =>
+    copy(node, 'path', pathForCopy?.(node.path) ?? node.path);
+  const copyValue = (node: JsonTreeNode) => copy(node, 'value', valueAsText(node));
+
+  const toggleWrapped = (node: JsonTreeNode) => {
+    setWrappedPaths((prev) => ({ ...prev, [node.path]: !prev[node.path] }));
+    if (editingPath === node.path) setEditingPath(null);
+  };
+
+  const commitEdit = (node: JsonTreeNode, value: JsonValue | undefined) => onEdit?.(node, value);
+
+  // Editability is row-invariant (props only), so resolve it once.
+  const canEdit = !readOnly && !!onEdit;
+
+  // Flattening walks the whole tree (and search re-checks descendants per
+  // node), so gate it on its actual inputs instead of re-running on every
+  // hover/copy/edit state tick.
+  const rows = useMemo(
+    () =>
+      flattenJsonTree(nodes, {
+        collapsed,
+        query,
+        filterPredicate,
+        displayTexts: decorateNode,
+      }),
+    [nodes, collapsed, query, filterPredicate, decorateNode]
+  );
+  // Label for the synthesized array-item preview row (shown instead of an
+  // index, since it is not a real element).
+  const templateItemLabel = _({
+    id: 'canvas.json_value_panel.array_item',
+    message: 'item',
+  });
+  const filtering = !!query?.trim() || !!filterPredicate;
+  const resolvedEmptyMessage = filtering
+    ? _({
+        id: 'canvas.json_value_panel.empty_search',
+        message: 'No fields match your search.',
+      })
+    : (emptyMessage ??
+      _({
+        id: 'canvas.json_value_panel.empty_default',
+        message: 'No fields to display.',
+      }));
+
+  // Every row shares this state and these handlers; holding it once here keeps
+  // each JsonTreeRow to just its own node/depth.
+  const rowContext: JsonTreeRowContextValue = {
+    collapsed,
+    onToggleCollapsed,
+    readOnly,
+    decorateNode,
+    deriveTypeIcon,
+    renderValue,
+    nodeActions,
+    maxInlineActions,
+    renderCodeEditor,
+    pathForCopy,
+    canEdit,
+    RowWrapper,
+    templateItemLabel,
+    editingPath,
+    jsonEditingPath,
+    wrappedPaths,
+    copied,
+    setEditingPath,
+    setJsonEditingPath,
+    copyPath,
+    copyValue,
+    toggleWrapped,
+    commitEdit,
+  };
+
+  return (
+    // One shared tooltip provider for all field-name tooltips; the marker
+    // stops each CanvasTooltip from mounting its own fallback provider.
+    <TooltipProvider delayDuration={300} skipDelayDuration={100}>
+      <CanvasTooltipProviderMarker>
+        <JsonTreeRowContextProvider value={rowContext}>
+          <div className={cn('h-full overflow-y-auto overflow-x-hidden', className)}>
+            {rows.map(({ node, depth }) => (
+              <JsonTreeRow key={node.path} node={node} depth={depth} />
+            ))}
+            {rows.length === 0 && (
+              <span className="py-4 text-center text-xs text-foreground-subtle">
+                {resolvedEmptyMessage}
+              </span>
+            )}
+          </div>
+        </JsonTreeRowContextProvider>
+      </CanvasTooltipProviderMarker>
+    </TooltipProvider>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/JsonTree.types.ts b/packages/apollo-react/src/canvas/components/JsonTree/JsonTree.types.ts
new file mode 100644
index 000000000..b2668e9e9
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/JsonTree.types.ts
@@ -0,0 +1,288 @@
+import type { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
+
+/** Any JSON-serializable value. */
+export type JsonValue = string | number | boolean | null | JsonValue[] | JsonObject;
+
+/** A JSON object (string keys, JSON values). */
+export interface JsonObject {
+  [key: string]: JsonValue;
+}
+
+/**
+ * A JSON container: object or array. The value tree renders fields of a
+ * container, so its root value must be one of these (a scalar root has no
+ * fields to show).
+ */
+export type JsonContainer = JsonObject | JsonValue[];
+
+/** JSON Schema `type` keyword values supported by the value tree. */
+export type JsonSchemaTypeName =
+  | 'string'
+  | 'number'
+  | 'integer'
+  | 'boolean'
+  | 'object'
+  | 'array'
+  | 'null';
+
+/**
+ * The subset of JSON Schema the value tree understands. Unknown keywords are
+ * ignored, so a full draft schema can be passed as-is.
+ */
+export interface JsonSchema {
+  type?: JsonSchemaTypeName | JsonSchemaTypeName[];
+  title?: string;
+  description?: string;
+  /** Semantic format marker (e.g. `file`). Useful for custom value rendering. */
+  format?: string;
+  enum?: Array<string | number | boolean | null>;
+  default?: JsonValue;
+  properties?: Record<string, JsonSchema>;
+  required?: string[];
+  items?: JsonSchema;
+  additionalProperties?: boolean | JsonSchema;
+}
+
+/** Effective display type of a tree node (JSON value types). */
+export type JsonTreeNodeType = 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null';
+
+/** One step into a JSON value: an object key or an array index. */
+export type PathSegment = string | number;
+
+/** A node of the merged schema + value tree. */
+export interface JsonTreeNode {
+  /** Display key (object key or array index as text). */
+  key: string;
+  /** Expression path, e.g. `httpRequest1.responseBody.items[0].id`. */
+  path: string;
+  /** Path as raw segments, usable with `setValueAtPath`/`getValueAtPath`. */
+  segments: PathSegment[];
+  /** Effective type: from the value when present, else from the schema. */
+  type: JsonTreeNodeType;
+  /**
+   * The value at this node. Undefined when the schema declares this node but
+   * the value does not set it (rendered as "unset").
+   */
+  value?: JsonValue;
+  /** The schema node describing this position, when one exists. */
+  schema?: JsonSchema;
+  /** True when the schema lists this key in the parent's `required`. */
+  required?: boolean;
+  /** Present on object/array nodes (may be empty). */
+  children?: JsonTreeNode[];
+  /**
+   * True when this node belongs to a synthesized, read-only preview of an
+   * array's `items` schema. When an array has no real items, the tree surfaces
+   * the expected item shape by building one preview item from `items`; the flag
+   * is set on that item and every node beneath it. The preview is illustrative,
+   * so these nodes are not editable and the preview item is left out of the
+   * parent array's item count.
+   */
+  isArrayItemTemplate?: boolean;
+}
+
+/** A consumer-provided row filter, offered in the toolbar's filter dropdown. */
+export interface JsonTreeFilterOption {
+  id: string;
+  /** Label shown in the dropdown and on the trigger when active. */
+  label: string;
+  /**
+   * Rows are kept when the node (or any descendant) matches; a node that
+   * matches directly shows its whole subtree.
+   */
+  predicate: (node: JsonTreeNode) => boolean;
+  /** Optional count shown next to the label. */
+  count?: number;
+}
+
+/** Visual tone for decoration chips. */
+export type NodeDecorationTone = 'neutral' | 'info' | 'warning' | 'error';
+
+/**
+ * Derives a custom type-badge icon for a node (e.g. a paperclip for
+ * `format: 'file'` schemas). Return undefined to keep the default type icon.
+ */
+export type DeriveTypeIcon = (node: JsonTreeNode) => ReactNode;
+
+/** Chip annotation next to a node's key. Provide a label, an icon, or both. */
+export interface NodeDecorationChip {
+  /** Pill text. Omit for a bare icon-only annotation. */
+  label?: string;
+  /** Icon rendered before the label (or alone when there is no label). */
+  icon?: ReactNode;
+  /** Tooltip shown on hover. */
+  tooltip?: string;
+  tone?: NodeDecorationTone;
+}
+
+/** Overrides for the row's type badge (the leading icon-in-a-box). */
+export interface NodeDecorationBadge {
+  /** Replaces the type icon (wins over `deriveTypeIcon`). */
+  icon?: ReactNode;
+  /**
+   * Color classes for the badge chrome (border/bg/text), replacing the
+   * neutral default, e.g. `'border-info/30 bg-info/10 text-info'`.
+   */
+  className?: string;
+}
+
+/** Consumer-provided visual annotation for a tree node. */
+export interface NodeDecoration {
+  /**
+   * Display label rendered in place of the raw key. The raw key still drives
+   * paths, copying, and edits; search matches both.
+   */
+  label?: string;
+  /** Small muted text after the key label (e.g. an identifier). */
+  sublabel?: string;
+  /** Replaces the type badge's icon and/or color. */
+  badge?: NodeDecorationBadge;
+  /** Small pill rendered next to the key (e.g. "mocked"). */
+  chip?: NodeDecorationChip;
+  /**
+   * Hides the built-in keys/items count on a container row.
+   */
+  hideCount?: boolean;
+}
+
+/** Context passed to a custom value cell renderer. */
+export interface RenderValueContext {
+  readOnly: boolean;
+  /** Commits a new value for the node (routed through `onValueChange`). */
+  commit: (value: JsonValue) => void;
+  /**
+   * Removes the value at the node's path (the key is deleted from its parent
+   * container). Routed through `onValueChange` with a `JsonTreeChange` whose
+   * `value` is undefined. Schema-declared nodes render as "unset" afterwards.
+   */
+  clear: () => void;
+}
+
+/**
+ * Custom value cell renderer. Return a ReactNode to replace the default value
+ * cell for that node (for containers it renders next to the key); return
+ * undefined to keep the default rendering.
+ */
+export type RenderValueCell = (node: JsonTreeNode, ctx: RenderValueContext) => ReactNode;
+
+/**
+ * A trailing row action rendered in a node's action group (the icon buttons
+ * revealed on row hover). Built-ins use the ids `wrap` | `edit-json` |
+ * `copy-value`; consumer actions supply their own stable id.
+ */
+export interface NodeAction {
+  /** Stable identifier (also the React key). */
+  id: string;
+  /** Icon element (e.g. a lucide icon). The tree sizes it — no explicit size needed. */
+  icon: ReactNode;
+  /** Accessible name (aria-label). Also the hover tooltip unless `tooltip` is set. */
+  label: string;
+  /** Hover tooltip text; defaults to `label`. */
+  tooltip?: string;
+  /** Invoked when the action is triggered, with the row's node. */
+  onSelect: (node: JsonTreeNode) => void;
+  /** Renders in an active/highlighted state (e.g. wrap while a row is wrapped). */
+  active?: boolean;
+  /** Disables the control. */
+  disabled?: boolean;
+  /** Color tone; `error` tints a destructive action. Defaults to neutral. */
+  tone?: NodeDecorationTone;
+}
+
+/** Context passed to `nodeActions`, mirroring the value-cell edit context. */
+export interface NodeActionContext {
+  readOnly: boolean;
+  /**
+   * The actions the tree would render by default for this node (wrap,
+   * edit-as-JSON, copy-value), in display order. Spread these to keep the
+   * built-ins while adding or reordering your own.
+   */
+  defaultActions: NodeAction[];
+  /** Commits a new value for the node (routed through `onEdit`/`onValueChange`). */
+  commit: (value: JsonValue) => void;
+  /** Removes the node's value (the key is deleted from its parent container). */
+  clear: () => void;
+}
+
+/**
+ * Customizes the trailing row actions per node. Return a new list (typically
+ * composed with `ctx.defaultActions`), an empty array to show no actions for
+ * that node, or `undefined` to keep the defaults. The tree owns the rendering,
+ * the hover reveal, the overflow menu, and a11y.
+ */
+export type NodeActionsResolver = (
+  node: JsonTreeNode,
+  ctx: NodeActionContext
+) => NodeAction[] | undefined;
+
+/** Payload for copy events. */
+export interface CopyEvent {
+  /** What was copied: the node's path or its value. */
+  kind: 'path' | 'value';
+  path: string;
+  /** The text placed on the clipboard. */
+  text: string;
+}
+
+/** Details about a single value edit. */
+export interface JsonTreeChange {
+  path: string;
+  segments: PathSegment[];
+  /** The newly committed value at `path`. Undefined when the value was removed. */
+  value?: JsonValue;
+  /** The previous value at `path` (undefined when it did not exist). */
+  previous?: JsonValue;
+}
+
+/**
+ * Props passed to a custom row container. The wrapper IS the row element:
+ * render a single container applying `className`/`style` and `children`
+ * verbatim, plus whatever behavior you attach (e.g. dnd-kit drag listeners).
+ */
+export interface JsonTreeRowWrapperProps {
+  node: JsonTreeNode;
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * Row click handler (used to expand/collapse containers by clicking the row).
+   * Custom wrappers should forward it to their root element so the behavior
+   * survives; the handler already ignores clicks on interactive descendants.
+   */
+  onClick?: (event: MouseEvent) => void;
+  children: ReactNode;
+}
+
+/**
+ * Custom row container component (e.g. to make rows drag sources).
+ *
+ * Must be a stable component reference (module scope or memoized), not an
+ * inline arrow: a new identity on each render is a new component type to
+ * React, which remounts every row and drops in-progress editor DOM state.
+ */
+export type JsonTreeRowWrapper = ComponentType<JsonTreeRowWrapperProps>;
+
+/** Props handed to a consumer-supplied code editor for object/array values. */
+export interface JsonCodeEditorRenderProps {
+  /** Current editor text (controlled). */
+  value: string;
+  /** Called with the new text on every keystroke. */
+  onChange: (value: string) => void;
+  /** Commit the value (bind to Ctrl/Cmd+Enter). */
+  onApply: () => void;
+  /** Discard the edit (bind to Escape). */
+  onCancel: () => void;
+  /** True when `value` does not parse as JSON. */
+  invalid: boolean;
+  /** Editor content language (currently always JSON). */
+  language: 'json';
+  /** Whether the editor should take focus on mount. */
+  autoFocus: boolean;
+}
+
+/**
+ * Renders the text surface for editing an object/array value as code. Omit to
+ * fall back to a plain textarea. The surrounding chrome — the parse-error
+ * message and the Apply/Cancel actions — is supplied by the tree, so the
+ * editor only needs to render the input and wire the callbacks.
+ */
+export type RenderCodeEditor = (props: JsonCodeEditorRenderProps) => ReactNode;
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/JsonTreeRow.tsx b/packages/apollo-react/src/canvas/components/JsonTree/JsonTreeRow.tsx
new file mode 100644
index 000000000..0ee769db4
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/JsonTreeRow.tsx
@@ -0,0 +1,464 @@
+import { cn } from '@uipath/apollo-wind';
+import { ChevronDown, CircleCheck, Copy, Pencil, WrapText } from 'lucide-react';
+import { createContext, type MouseEvent, type ReactNode, useContext } from 'react';
+import { useSafeLingui } from '../../../i18n';
+import { formatLeafValue, isArrayItemTemplateRoot } from './buildJsonTree';
+import { DecorationChip } from './DecorationChip';
+import { JsonContainerEditor } from './JsonContainerEditor';
+import { JsonMultilineLeafEditor } from './JsonMultilineLeafEditor';
+import type {
+  CopyEvent,
+  DeriveTypeIcon,
+  JsonTreeNode,
+  JsonTreeRowWrapper,
+  JsonValue,
+  NodeAction,
+  NodeActionsResolver,
+  NodeDecoration,
+  RenderCodeEditor,
+  RenderValueCell,
+} from './JsonTree.types';
+import { JsonTypeBadge } from './JsonTypeBadge';
+import { NodeKey } from './NodeKey';
+import { RowActions } from './RowActions';
+import { ScalarValueCell, valueColorClass } from './ScalarValueCell';
+
+// min-h keeps the row height constant between view and edit: the row actions
+// occupy layout (at opacity-0) in the view state but are unmounted while
+// editing, which would otherwise let the row collapse to the badge height.
+const ROW_CLASS =
+  'group flex min-h-7 cursor-default items-center gap-1.5 py-1 pr-1 transition hover:bg-surface-overlay';
+
+// Wrapper for a consumer-supplied value cell. `flex-1 min-w-0` lets it fill
+// the space between the key and the row actions and collapse when squeezed;
+// `overflow-hidden` clips consumer content that doesn't truncate itself so it
+// can never paint over the trailing row actions.
+const CUSTOM_CELL_CLASS = 'flex min-w-0 flex-1 items-center overflow-hidden';
+
+// Rows have no right padding of their own: the trailing icon buttons carry
+// enough internal padding to keep their glyphs off the edge.
+function rowIndent(depth: number, extra = 0) {
+  return { paddingLeft: `${6 + depth * 12 + extra}px` };
+}
+
+// Chevron slot (10) + gap (8) + badge (18) + gap (8): aligns nested blocks
+// with the key text of their row.
+const KEY_ALIGN_OFFSET = 44;
+
+/**
+ * Shared, node-invariant context every row needs: the tree config, the mutable
+ * edit/copy state, and the handlers that mutate it. Held once by `JsonTree` so
+ * each `JsonTreeRow` only takes its own `node`/`depth`.
+ */
+export interface JsonTreeRowContextValue {
+  collapsed: Record<string, boolean>;
+  onToggleCollapsed?: (path: string) => void;
+  readOnly: boolean;
+  decorateNode?: (node: JsonTreeNode) => NodeDecoration | undefined;
+  deriveTypeIcon?: DeriveTypeIcon;
+  renderValue?: RenderValueCell;
+  nodeActions?: NodeActionsResolver;
+  maxInlineActions: number;
+  renderCodeEditor?: RenderCodeEditor;
+  pathForCopy?: (path: string) => string;
+  /** Editability is row-invariant (props only), so it is resolved once. */
+  canEdit: boolean;
+  RowWrapper: JsonTreeRowWrapper;
+  /** Localized label for the synthesized array-item preview row. */
+  templateItemLabel: string;
+  editingPath: string | null;
+  jsonEditingPath: string | null;
+  wrappedPaths: Record<string, boolean>;
+  copied: { path: string; kind: CopyEvent['kind'] } | null;
+  setEditingPath: (path: string | null) => void;
+  setJsonEditingPath: (path: string | null) => void;
+  copyPath: (node: JsonTreeNode) => void;
+  copyValue: (node: JsonTreeNode) => void;
+  toggleWrapped: (node: JsonTreeNode) => void;
+  commitEdit: (node: JsonTreeNode, value: JsonValue | undefined) => void;
+}
+
+const JsonTreeRowContext = createContext<JsonTreeRowContextValue | null>(null);
+
+export const JsonTreeRowContextProvider = JsonTreeRowContext.Provider;
+
+function useJsonTreeRowContext(): JsonTreeRowContextValue {
+  const ctx = useContext(JsonTreeRowContext);
+  if (!ctx) {
+    throw new Error('JsonTreeRow must be rendered inside a JsonTreeRowContext provider');
+  }
+  return ctx;
+}
+
+/**
+ * A single flattened tree row: the collapse chevron, type badge, field name,
+ * decorations, and either the value cell (leaf) or key/item count (container),
+ * plus the expanded wrapped-scalar and edit-as-JSON surfaces below it. All
+ * shared state and handlers come from `JsonTreeRowContext`.
+ */
+export function JsonTreeRow({ node, depth }: { node: JsonTreeNode; depth: number }) {
+  const { _ } = useSafeLingui();
+  const {
+    collapsed,
+    onToggleCollapsed,
+    readOnly,
+    decorateNode,
+    deriveTypeIcon,
+    renderValue,
+    nodeActions,
+    maxInlineActions,
+    renderCodeEditor,
+    pathForCopy,
+    canEdit,
+    RowWrapper,
+    templateItemLabel,
+    editingPath,
+    jsonEditingPath,
+    wrappedPaths,
+    copied,
+    setEditingPath,
+    setJsonEditingPath,
+    copyPath,
+    copyValue,
+    toggleWrapped,
+    commitEdit,
+  } = useJsonTreeRowContext();
+
+  // Assembles the built-in trailing actions for a row (wrap / edit-as-JSON /
+  // copy-value), in display order. A consumer's `nodeActions` composes with,
+  // reorders, or replaces these. Kept out of the row JSX so the render body
+  // reads as layout, not action wiring.
+  const buildDefaultActions = (
+    node: JsonTreeNode,
+    flags: {
+      isContainer: boolean;
+      wrappable: boolean;
+      wrapped: boolean;
+      canCopyValue: boolean;
+      copiedValue: boolean;
+    }
+  ): NodeAction[] => {
+    const actions: NodeAction[] = [];
+    if (flags.wrappable) {
+      actions.push({
+        id: 'wrap',
+        icon: <WrapText />,
+        active: flags.wrapped,
+        tooltip: flags.wrapped
+          ? _({
+              id: 'canvas.json_value_panel.unwrap_value',
+              message: 'Unwrap value',
+            })
+          : _({
+              id: 'canvas.json_value_panel.wrap_value',
+              message: 'Wrap value',
+            }),
+        label: flags.wrapped
+          ? _({
+              id: 'canvas.json_value_panel.unwrap_value_of',
+              message: 'Unwrap value of {key}',
+              values: { key: node.key },
+            })
+          : _({
+              id: 'canvas.json_value_panel.wrap_value_of',
+              message: 'Wrap value of {key}',
+              values: { key: node.key },
+            }),
+        onSelect: () => toggleWrapped(node),
+      });
+    }
+    if (flags.isContainer && canEdit && !node.isArrayItemTemplate) {
+      actions.push({
+        id: 'edit-json',
+        icon: <Pencil />,
+        tooltip: _({
+          id: 'canvas.json_value_panel.edit_as_json',
+          message: 'Edit as JSON',
+        }),
+        label: _({
+          id: 'canvas.json_value_panel.edit_key_as_json',
+          message: 'Edit {key} as JSON',
+          values: { key: node.key },
+        }),
+        onSelect: () => setJsonEditingPath(node.path),
+      });
+    }
+    if (flags.canCopyValue) {
+      actions.push({
+        id: 'copy-value',
+        // The copied confirmation rides on the icon, not an active button
+        // state, matching the pre-descriptor behavior.
+        icon: flags.copiedValue ? <CircleCheck className="text-brand" /> : <Copy />,
+        tooltip: _({
+          id: 'canvas.json_value_panel.copy_value',
+          message: 'Copy value',
+        }),
+        label: _({
+          id: 'canvas.json_value_panel.copy_value_of',
+          message: 'Copy value of {key}',
+          values: { key: node.key },
+        }),
+        onSelect: () => copyValue(node),
+      });
+    }
+    return actions;
+  };
+
+  const isContainer = node.children !== undefined;
+  // Preview nodes (array-item templates) illustrate the item shape;
+  // they are never editable, even in an editable tree.
+  const isTemplate = !!node.isArrayItemTemplate;
+  const isTemplateItem = isArrayItemTemplateRoot(node);
+  // The synthesized preview item is not a real element, so it stays
+  // out of the array's item count (an empty array still reads "0").
+  const childCount = node.children?.filter((c) => !isArrayItemTemplateRoot(c)).length ?? 0;
+  const decoration = decorateNode?.(node);
+  const customCell: ReactNode = renderValue?.(node, {
+    readOnly,
+    commit: (value) => commitEdit(node, value),
+    clear: () => commitEdit(node, undefined),
+  });
+  const canCopyValue = node.value !== undefined;
+  const wrappable =
+    !isContainer &&
+    customCell == null &&
+    node.value !== undefined &&
+    node.type !== 'boolean' &&
+    !node.schema?.enum?.length;
+  const wrapped = wrappable && !!wrappedPaths[node.path];
+  const copiedValue = copied?.path === node.path && copied.kind === 'value';
+
+  // Built-ins are assembled lazily: a consumer's `nodeActions` may
+  // ignore `ctx.defaultActions` entirely (a fully custom list or
+  // `[]`), so we only pay for the assembly when it is actually read —
+  // or when there is no resolver. Memoized so repeated reads in one
+  // resolver don't rebuild.
+  let builtDefaults: NodeAction[] | undefined;
+  const getDefaultActions = () => {
+    builtDefaults ??= buildDefaultActions(node, {
+      isContainer,
+      wrappable,
+      wrapped,
+      canCopyValue,
+      copiedValue,
+    });
+    return builtDefaults;
+  };
+  const actions =
+    nodeActions?.(node, {
+      readOnly,
+      get defaultActions() {
+        return getDefaultActions();
+      },
+      commit: (value) => commitEdit(node, value),
+      clear: () => commitEdit(node, undefined),
+    }) ?? getDefaultActions();
+
+  // Container rows collapse/expand on a click anywhere in the row,
+  // except on an interactive control (the chevron, the row actions,
+  // an inline editor, or a dropdown trigger).
+  const rowClickable = isContainer && !!onToggleCollapsed;
+  const handleRowClick = (event: MouseEvent) => {
+    if (
+      (event.target as HTMLElement).closest(
+        'button, a, input, textarea, select, [contenteditable="true"]'
+      )
+    ) {
+      return;
+    }
+    onToggleCollapsed?.(node.path);
+  };
+
+  return (
+    <div>
+      <RowWrapper
+        node={node}
+        className={cn(ROW_CLASS, rowClickable && 'cursor-pointer')}
+        style={rowIndent(depth)}
+        onClick={rowClickable ? handleRowClick : undefined}
+      >
+        {isContainer ? (
+          <button
+            type="button"
+            onClick={() => onToggleCollapsed?.(node.path)}
+            aria-label={
+              collapsed[node.path]
+                ? _({
+                    id: 'canvas.json_value_panel.expand_key',
+                    message: 'Expand {key}',
+                    values: { key: node.key },
+                  })
+                : _({
+                    id: 'canvas.json_value_panel.collapse_key',
+                    message: 'Collapse {key}',
+                    values: { key: node.key },
+                  })
+            }
+            aria-expanded={!collapsed[node.path]}
+            className="grid size-2.5 shrink-0 cursor-pointer place-items-center text-foreground-subtle transition hover:text-foreground"
+          >
+            <ChevronDown
+              size={10}
+              className={cn(
+                'transition-transform duration-100',
+                collapsed[node.path] && '-rotate-90'
+              )}
+            />
+          </button>
+        ) : (
+          <div className="size-2.5 shrink-0" />
+        )}
+        <JsonTypeBadge
+          type={node.type}
+          icon={decoration?.badge?.icon ?? deriveTypeIcon?.(node)}
+          className={decoration?.badge?.className}
+        />
+        <NodeKey
+          node={node}
+          label={isTemplateItem ? templateItemLabel : decoration?.label}
+          displayPath={pathForCopy?.(node.path) ?? node.path}
+          onCopyPath={copyPath}
+          className={isTemplateItem ? 'font-normal italic text-foreground-subtle' : undefined}
+        />
+        {/* Clicking the key copies its path but dismisses the tooltip,
+            so confirm the copy with an inline check (like copy-value). */}
+        {copied?.path === node.path && copied.kind === 'path' && (
+          <CircleCheck
+            size={11}
+            className="shrink-0 text-brand"
+            role="img"
+            aria-label={_({
+              id: 'canvas.json_value_panel.path_copied',
+              message: 'Path copied',
+            })}
+          />
+        )}
+        {decoration?.sublabel && (
+          <span className="min-w-0 truncate font-mono text-[10px] text-foreground-subtle leading-4">
+            {decoration.sublabel}
+          </span>
+        )}
+        {/* `*` is presentational; the sr-only span carries the semantic so
+            screen readers don't announce a bare asterisk. */}
+        {node.required && (
+          <span className="shrink-0 text-[10px] text-error">
+            <span aria-hidden="true">*</span>
+            <span className="sr-only">
+              {_({
+                id: 'canvas.json_value_panel.required_marker',
+                message: 'required',
+              })}
+            </span>
+          </span>
+        )}
+        {isContainer ? (
+          <>
+            {!decoration?.hideCount && (
+              <span className="shrink-0 whitespace-nowrap font-mono italic text-[10px] text-foreground-subtle">
+                {node.type === 'array'
+                  ? _({
+                      id: 'canvas.json_value_panel.item_count',
+                      message: '{count, plural, one {# item} other {# items}}',
+                      values: { count: childCount },
+                    })
+                  : _({
+                      id: 'canvas.json_value_panel.key_count',
+                      message: '{count, plural, one {# key} other {# keys}}',
+                      values: { count: childCount },
+                    })}
+              </span>
+            )}
+            {customCell != null && <span className={CUSTOM_CELL_CLASS}>{customCell}</span>}
+            <DecorationChip decoration={decoration} />
+            <RowActions node={node} actions={actions} maxInline={maxInlineActions} />
+          </>
+        ) : (
+          <>
+            {!wrapped &&
+              (customCell != null ? (
+                <span className={CUSTOM_CELL_CLASS}>{customCell}</span>
+              ) : (
+                !((readOnly && node.value === undefined) || isTemplate) && (
+                  <>
+                    <span className="shrink-0 font-mono text-xs text-foreground-subtle">=</span>
+                    <ScalarValueCell
+                      node={node}
+                      readOnly={readOnly}
+                      editing={editingPath === node.path}
+                      onStartEdit={(n) => setEditingPath(n.path)}
+                      onStopEdit={() => setEditingPath(null)}
+                      onEdit={canEdit ? commitEdit : undefined}
+                    />
+                  </>
+                )
+              ))}
+            {editingPath !== node.path && (
+              <>
+                <DecorationChip decoration={decoration} />
+                <RowActions node={node} actions={actions} maxInline={maxInlineActions} />
+              </>
+            )}
+          </>
+        )}
+      </RowWrapper>
+
+      {/* Wrapped scalar: full value below the field name, wrapping. */}
+      {wrapped && (
+        <div className="pb-1.5 pr-3.5" style={rowIndent(depth, KEY_ALIGN_OFFSET)}>
+          {editingPath === node.path && canEdit ? (
+            <JsonMultilineLeafEditor
+              node={node}
+              onCommit={(value) => {
+                setEditingPath(null);
+                commitEdit(node, value);
+              }}
+              onCancel={() => setEditingPath(null)}
+            />
+          ) : (
+            <button
+              type="button"
+              disabled={!canEdit}
+              onClick={() => setEditingPath(node.path)}
+              aria-label={_({
+                id: 'canvas.json_value_panel.edit_value_of',
+                message: 'Edit value of {key}',
+                values: { key: node.key },
+              })}
+              title={
+                canEdit
+                  ? _({
+                      id: 'canvas.json_value_panel.edit_hint',
+                      message: 'Click to edit',
+                    })
+                  : undefined
+              }
+              className={cn(
+                'w-full whitespace-pre-wrap break-all rounded text-left font-mono text-xs leading-5',
+                canEdit && 'cursor-text',
+                valueColorClass(node.type, node.value)
+              )}
+            >
+              {/* Strings render raw (real line breaks, no quotes),
+                  matching what the multiline editor shows. */}
+              {typeof node.value === 'string' ? node.value : formatLeafValue(node.type, node.value)}
+            </button>
+          )}
+        </div>
+      )}
+
+      {isContainer && jsonEditingPath === node.path && (
+        <div className="py-1.5 pr-3.5" style={rowIndent(depth, KEY_ALIGN_OFFSET)}>
+          <JsonContainerEditor
+            node={node}
+            onCommit={(value) => {
+              setJsonEditingPath(null);
+              commitEdit(node, value);
+            }}
+            onCancel={() => setJsonEditingPath(null)}
+            renderCodeEditor={renderCodeEditor}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/JsonTreeToolbar.tsx b/packages/apollo-react/src/canvas/components/JsonTree/JsonTreeToolbar.tsx
new file mode 100644
index 000000000..5792760a2
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/JsonTreeToolbar.tsx
@@ -0,0 +1,232 @@
+import {
+  Button,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  Input,
+} from '@uipath/apollo-wind';
+import { ChevronsDownUp, ChevronsUpDown, Filter, Search, X } from 'lucide-react';
+import { type ReactNode, useState } from 'react';
+import { useSafeLingui } from '../../../i18n';
+import { CanvasTooltip } from '../CanvasTooltip';
+import type { JsonTreeFilterOption } from './JsonTree.types';
+
+// Radio values must be strings; this stands in for the "no filter" (null) state.
+const ALL_FILTER_VALUE = '__all__';
+
+export interface JsonTreeToolbarProps {
+  /** Current search query (controlled). */
+  query: string;
+  onQueryChange: (query: string) => void;
+  searchPlaceholder?: string;
+  /** Consumer-provided filter options. Omit or pass empty to hide the filter control. */
+  filters?: JsonTreeFilterOption[];
+  /** Id of the active filter, or null for "All". */
+  activeFilterId?: string | null;
+  onFilterChange?: (id: string | null) => void;
+  /** Collapse-all toggle state. Omit `onToggleAll` to hide the control. */
+  allCollapsed?: boolean;
+  onToggleAll?: () => void;
+  /**
+   * Content rendered at the start of the row, before the flexible spacer (e.g.
+   * a tab switcher). The tree controls (search / filter / collapse) stay pinned
+   * to the end.
+   */
+  leading?: ReactNode;
+  /**
+   * Hides the search / filter / collapse controls, keeping only `leading`.
+   * Use when a non-tree tab is active and the controls would be inert.
+   */
+  controlsHidden?: boolean;
+  className?: string;
+}
+
+/** Leading slot + search, filter, and collapse-all controls for a `JsonTree`. */
+export function JsonTreeToolbar({
+  query,
+  onQueryChange,
+  searchPlaceholder,
+  filters,
+  activeFilterId = null,
+  onFilterChange,
+  allCollapsed = false,
+  onToggleAll,
+  leading,
+  controlsHidden = false,
+  className,
+}: JsonTreeToolbarProps) {
+  const { _ } = useSafeLingui();
+  const [searchOpen, setSearchOpen] = useState(false);
+  const activeFilter = filters?.find((f) => f.id === activeFilterId);
+  const resolvedSearchPlaceholder =
+    searchPlaceholder ??
+    _({
+      id: 'canvas.json_value_panel.search_fields',
+      message: 'Search fields and values...',
+    });
+  const filterLabel = activeFilter
+    ? _({
+        id: 'canvas.json_value_panel.filter_active',
+        message: 'Filter: {label}',
+        values: { label: activeFilter.label },
+      })
+    : _({
+        id: 'canvas.json_value_panel.filter',
+        message: 'Filter',
+      });
+  const searchActionLabel = _({
+    id: 'canvas.json_value_panel.search_fields_action',
+    message: 'Search fields and values',
+  });
+  const toggleAllLabel = allCollapsed
+    ? _({ id: 'canvas.json_value_panel.expand_all', message: 'Expand all' })
+    : _({ id: 'canvas.json_value_panel.collapse_all', message: 'Collapse all' });
+
+  const closeSearch = () => {
+    onQueryChange('');
+    setSearchOpen(false);
+  };
+
+  return (
+    <div className={cn('flex items-center gap-1.5', className)}>
+      {leading}
+      {!controlsHidden && (
+        <>
+          {searchOpen ? (
+            // Expanded search flexes to fill the row and shrinks with the
+            // container (min-w-0) instead of taking a fixed width, so it never
+            // pushes the filter / collapse controls out of a narrow panel.
+            <div className="relative flex min-w-0 flex-1 items-center overflow-hidden">
+              <Search
+                size={13}
+                className="pointer-events-none absolute left-2 text-foreground-subtle"
+              />
+              <Input
+                autoFocus
+                type="text"
+                variant="ghost"
+                size="xs"
+                value={query}
+                onChange={(e) => onQueryChange(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Escape') closeSearch();
+                }}
+                aria-label={resolvedSearchPlaceholder}
+                placeholder={resolvedSearchPlaceholder}
+                // Match the h-6 toolbar buttons so opening/closing search does
+                // not change the toolbar height and shift the tree below it.
+                // Inline padding to clear the leading icon / trailing clear
+                // button: the `xs` variant's `px-2` outranks a `pl-*` class
+                // under Tailwind v4's utility ordering, so a class would lose.
+                style={{ paddingLeft: '1.75rem', paddingRight: '1.5rem' }}
+                className="h-6 w-full text-foreground placeholder:text-foreground-subtle focus-visible:ring-0"
+              />
+              <button
+                type="button"
+                onClick={closeSearch}
+                aria-label={_({
+                  id: 'canvas.json_value_panel.clear_search',
+                  message: 'Clear search',
+                })}
+                className="absolute right-1.5 grid size-4 place-items-center text-foreground-subtle transition hover:text-foreground"
+              >
+                <X size={12} />
+              </button>
+            </div>
+          ) : (
+            // Spacer only when the search is collapsed — it right-aligns the
+            // icon controls. When expanded, the search itself fills the gap.
+            <>
+              <div className="flex-1" />
+              <CanvasTooltip content={searchActionLabel} placement="top" delay>
+                <Button
+                  variant="ghost"
+                  size="3xs"
+                  icon
+                  onClick={() => setSearchOpen(true)}
+                  aria-label={searchActionLabel}
+                  className="rounded text-foreground-subtle hover:bg-surface-overlay hover:text-foreground"
+                >
+                  <Search size={14} />
+                </Button>
+              </CanvasTooltip>
+            </>
+          )}
+          {!!filters?.length && onFilterChange && (
+            <DropdownMenu>
+              {/* The active filter is surfaced as a dot on the icon rather than
+                  an inline label; the tooltip carries "Filter: <label>". */}
+              <CanvasTooltip content={filterLabel} placement="top" delay>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="3xs"
+                    icon
+                    aria-label={filterLabel}
+                    className="relative rounded text-foreground-subtle hover:bg-surface-overlay hover:text-foreground"
+                  >
+                    <Filter size={14} />
+                    {activeFilter && (
+                      <span className="absolute right-0.5 top-0.5 size-1.5 rounded-full bg-primary ring-1 ring-surface" />
+                    )}
+                  </Button>
+                </DropdownMenuTrigger>
+              </CanvasTooltip>
+              <DropdownMenuContent align="end" className="w-52">
+                {/* Radio semantics so the selected filter carries a menu
+                    indicator (and is announced), matching the view switcher. */}
+                <DropdownMenuRadioGroup
+                  value={activeFilterId ?? ALL_FILTER_VALUE}
+                  onValueChange={(value) =>
+                    onFilterChange(value === ALL_FILTER_VALUE ? null : value)
+                  }
+                >
+                  <DropdownMenuRadioItem
+                    value={ALL_FILTER_VALUE}
+                    className="text-[11px] [&>span:first-child]:text-foreground-accent"
+                  >
+                    {_({
+                      id: 'canvas.json_value_panel.filter_all',
+                      message: 'All',
+                    })}
+                  </DropdownMenuRadioItem>
+                  {filters.map((filter) => (
+                    <DropdownMenuRadioItem
+                      key={filter.id}
+                      value={filter.id}
+                      className="text-[11px] [&>span:first-child]:text-foreground-accent"
+                    >
+                      <span className="flex-1 truncate">{filter.label}</span>
+                      {filter.count !== undefined && (
+                        <span className="ml-3 rounded bg-surface-overlay px-1.5 py-0.5 font-mono text-[10px] font-medium leading-none text-foreground-muted">
+                          {filter.count}
+                        </span>
+                      )}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+          {onToggleAll && (
+            <CanvasTooltip content={toggleAllLabel} placement="top" delay>
+              <Button
+                variant="ghost"
+                size="3xs"
+                icon
+                onClick={onToggleAll}
+                aria-label={toggleAllLabel}
+                className="rounded text-foreground-subtle hover:bg-surface-overlay hover:text-foreground"
+              >
+                {allCollapsed ? <ChevronsUpDown size={14} /> : <ChevronsDownUp size={14} />}
+              </Button>
+            </CanvasTooltip>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/JsonTypeBadge.tsx b/packages/apollo-react/src/canvas/components/JsonTree/JsonTypeBadge.tsx
new file mode 100644
index 000000000..b4f136351
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/JsonTypeBadge.tsx
@@ -0,0 +1,65 @@
+import { cn } from '@uipath/apollo-wind';
+import type { LucideIcon } from 'lucide-react';
+import { Braces, Brackets, CircleSlash2, Hash, ToggleLeft, Type } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { CanvasTooltip } from '../CanvasTooltip';
+import type { JsonTreeNodeType } from './JsonTree.types';
+
+const TYPE_ICON: Record<JsonTreeNodeType, LucideIcon> = {
+  string: Type,
+  number: Hash,
+  boolean: ToggleLeft,
+  object: Braces,
+  array: Brackets,
+  null: CircleSlash2,
+};
+
+// Capitalized JSON type name shown in the badge tooltip. A technical token
+// (like the monospace paths/ids), so it is intentionally not localized.
+const TYPE_LABEL: Record<JsonTreeNodeType, string> = {
+  string: 'String',
+  number: 'Number',
+  boolean: 'Boolean',
+  object: 'Object',
+  array: 'Array',
+  null: 'Null',
+};
+
+export interface JsonTypeBadgeProps {
+  type: JsonTreeNodeType;
+  /** Replaces the default type icon (e.g. a paperclip for file nodes). */
+  icon?: ReactNode;
+  /** Color/chrome overrides (e.g. from a node decoration). */
+  className?: string;
+  /** Tooltip content on hover. Defaults to the capitalized type name. */
+  tooltip?: ReactNode;
+}
+
+/**
+ * Compact badge for a JSON value type. Deliberately neutral: the value text
+ * carries the color coding, the badge only carries the type icon. Hovering it
+ * shows the type name (override via `tooltip`).
+ */
+export function JsonTypeBadge({ type, icon, className, tooltip }: JsonTypeBadgeProps) {
+  const DefaultIcon = TYPE_ICON[type];
+  return (
+    <CanvasTooltip
+      content={
+        <span className="break-all font-mono text-xs font-semibold leading-4">
+          {tooltip ?? TYPE_LABEL[type]}
+        </span>
+      }
+      placement="top"
+      delay
+    >
+      <span
+        className={cn(
+          'inline-flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded border border-border bg-surface-overlay px-0.5 text-foreground-muted [&_svg]:size-2.75',
+          className
+        )}
+      >
+        {icon ?? <DefaultIcon />}
+      </span>
+    </CanvasTooltip>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/NodeKey.tsx b/packages/apollo-react/src/canvas/components/JsonTree/NodeKey.tsx
new file mode 100644
index 000000000..b8f063a61
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/NodeKey.tsx
@@ -0,0 +1,76 @@
+import { cn } from '@uipath/apollo-wind';
+import { useSafeLingui } from '../../../i18n';
+import { CanvasTooltip } from '../CanvasTooltip';
+import type { JsonTreeNode } from './JsonTree.types';
+
+export interface NodeKeyProps {
+  node: JsonTreeNode;
+  /** Display text overriding the raw key (decoration label). */
+  label?: string;
+  /** The path as it will be copied (after `pathForCopy`); shown in the tooltip. */
+  displayPath?: string;
+  onCopyPath?: (node: JsonTreeNode) => void;
+  className?: string;
+}
+
+/**
+ * The field name. Hovering underlines it and (after a short delay) shows a
+ * popover titled with the node's full tree path, plus the schema description
+ * and a copy hint; clicking copies the path.
+ */
+export function NodeKey({ node, label, displayPath, onCopyPath, className }: NodeKeyProps) {
+  const { _ } = useSafeLingui();
+  const text = label ?? node.key;
+  // The tooltip/aria surface the exact string that gets copied so it matches
+  // consumer path transforms (e.g. a `$vars.` prefix), not the raw tree path.
+  const copyPathText = displayPath ?? node.path;
+  // The key never shrinks (the value gives way first) but is capped so a
+  // pathologically long key truncates instead of pushing the actions out.
+  // Display labels render in the UI font to set them apart from raw keys.
+  const keyClass = cn(
+    'max-w-[45%] shrink-0 truncate text-xs text-foreground',
+    label != null ? 'font-medium' : 'font-mono',
+    node.value === undefined && 'text-foreground-muted',
+    className
+  );
+  if (!onCopyPath) return <span className={keyClass}>{text}</span>;
+
+  return (
+    <CanvasTooltip
+      placement="top"
+      delay
+      content={
+        <div className="flex max-w-60 flex-col gap-1">
+          <span className="break-all font-mono text-xs font-semibold leading-4">
+            {copyPathText}
+          </span>
+          {node.schema?.description && (
+            <span className="text-xs leading-4">{node.schema.description}</span>
+          )}
+          <span className="text-[11px] leading-4 opacity-70">
+            {_({
+              id: 'canvas.json_value_panel.copy_path_hint',
+              message: 'Click to copy this path',
+            })}
+          </span>
+        </div>
+      }
+    >
+      <button
+        type="button"
+        onClick={() => onCopyPath(node)}
+        aria-label={_({
+          id: 'canvas.json_value_panel.copy_path_for',
+          message: 'Copy path for {path}',
+          values: { path: copyPathText },
+        })}
+        className={cn(
+          keyClass,
+          'cursor-pointer decoration-foreground-subtle underline-offset-2 hover:underline'
+        )}
+      >
+        {text}
+      </button>
+    </CanvasTooltip>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/RowActions.tsx b/packages/apollo-react/src/canvas/components/JsonTree/RowActions.tsx
new file mode 100644
index 000000000..90064477e
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/RowActions.tsx
@@ -0,0 +1,114 @@
+import {
+  Button,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@uipath/apollo-wind';
+import { MoreHorizontal } from 'lucide-react';
+import { useSafeLingui } from '../../../i18n';
+import { CanvasTooltip } from '../CanvasTooltip';
+import type { JsonTreeNode, NodeAction, NodeDecorationTone } from './JsonTree.types';
+
+const ACTION_BUTTON_CLASS =
+  'shrink-0 rounded text-foreground-subtle opacity-0 hover:text-foreground hover:bg-surface-raised group-hover:opacity-100 focus-visible:opacity-100';
+
+const ACTION_TONE_CLASS: Record<NodeDecorationTone, string> = {
+  neutral: '',
+  info: 'text-info hover:text-info',
+  warning: 'text-warning hover:text-warning',
+  error: 'text-error hover:text-error',
+};
+
+export interface RowActionsProps {
+  node: JsonTreeNode;
+  /** Resolved actions for the row, in display order. */
+  actions: NodeAction[];
+  /** Actions past this count collapse into an overflow menu. */
+  maxInline: number;
+}
+
+/**
+ * The trailing icon-button group for a row. Renders `actions` uniformly (icon,
+ * tooltip, aria, tone, active highlight); when there are more than `maxInline`,
+ * keeps the first `maxInline - 1` inline and rolls the rest into a menu so a
+ * consumer adding actions can never blow out a narrow panel.
+ */
+export function RowActions({ node, actions, maxInline }: RowActionsProps) {
+  const { _ } = useSafeLingui();
+  if (actions.length === 0) return null;
+
+  const overflowing = actions.length > maxInline;
+  const inline = overflowing ? actions.slice(0, maxInline - 1) : actions;
+  const overflow = overflowing ? actions.slice(maxInline - 1) : [];
+  const moreLabel = _({
+    id: 'canvas.json_value_panel.more_actions',
+    message: 'More actions',
+  });
+
+  return (
+    // Own wrapper with a tight gap: the buttons group together instead of
+    // each picking up the row's wider item gap. ml-auto pins the group to the
+    // right edge without a spacer div (which would cost two extra row gaps).
+    <span className="ml-auto flex shrink-0 items-center gap-0.5">
+      {inline.map((action) => (
+        <CanvasTooltip
+          key={action.id}
+          content={action.tooltip ?? action.label}
+          placement="top"
+          delay
+        >
+          <Button
+            variant="ghost"
+            size="4xs"
+            icon
+            disabled={action.disabled}
+            onClick={() => action.onSelect(node)}
+            aria-label={action.label}
+            className={cn(
+              ACTION_BUTTON_CLASS,
+              '[&_svg]:size-2.75',
+              action.tone && ACTION_TONE_CLASS[action.tone],
+              action.active && 'text-brand opacity-100 hover:text-brand'
+            )}
+          >
+            {action.icon}
+          </Button>
+        </CanvasTooltip>
+      ))}
+      {overflow.length > 0 && (
+        <DropdownMenu>
+          <CanvasTooltip content={moreLabel} placement="top" delay>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="4xs"
+                icon
+                aria-label={moreLabel}
+                className={cn(ACTION_BUTTON_CLASS, '[&_svg]:size-2.75')}
+              >
+                <MoreHorizontal />
+              </Button>
+            </DropdownMenuTrigger>
+          </CanvasTooltip>
+          <DropdownMenuContent align="end" className="min-w-40">
+            {overflow.map((action) => (
+              <DropdownMenuItem
+                key={action.id}
+                disabled={action.disabled}
+                onClick={() => action.onSelect(node)}
+                className={cn('gap-2 text-xs', action.tone === 'error' && 'text-error')}
+              >
+                <span className="grid size-3.5 shrink-0 place-items-center [&_svg]:size-3.5">
+                  {action.icon}
+                </span>
+                {action.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </span>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/ScalarValueCell.tsx b/packages/apollo-react/src/canvas/components/JsonTree/ScalarValueCell.tsx
new file mode 100644
index 000000000..b48199466
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/ScalarValueCell.tsx
@@ -0,0 +1,167 @@
+import {
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@uipath/apollo-wind';
+import { useSafeLingui } from '../../../i18n';
+import { formatLeafValue, inferValueType } from './buildJsonTree';
+import { JsonLeafValueEditor } from './JsonLeafValueEditor';
+import type { JsonTreeNode, JsonTreeNodeType, JsonValue } from './JsonTree.types';
+
+/** Semantic color for a rendered leaf value (also used by the wrapped-row view). */
+export function valueColorClass(type: JsonTreeNodeType, value: JsonValue | undefined): string {
+  if (value === null || value === undefined) return 'text-foreground-subtle';
+  if (type === 'string') return 'text-success';
+  if (type === 'number') return 'text-info';
+  if (type === 'boolean') return value ? 'text-success' : 'text-error';
+  return 'text-foreground';
+}
+
+// Editable scalar value cell: the read-only footprint plus a rounded hover
+// background that signals the value is clickable. Callers add the cursor.
+const VALUE_CELL_CLASS =
+  'min-w-0 shrink-3 truncate rounded font-mono text-xs transition hover:bg-surface-raised';
+
+export interface ScalarValueCellProps {
+  node: JsonTreeNode;
+  readOnly: boolean;
+  editing: boolean;
+  onStartEdit: (node: JsonTreeNode) => void;
+  onStopEdit: () => void;
+  onEdit?: (node: JsonTreeNode, value: JsonValue) => void;
+}
+
+/**
+ * The value slot of a leaf row. Booleans toggle on a single click; schema
+ * enums edit through a dropdown; strings, numbers, and null values edit
+ * through an inline input. Missing values render as "unset" and editing them
+ * creates the value.
+ */
+export function ScalarValueCell({
+  node,
+  readOnly,
+  editing,
+  onStartEdit,
+  onStopEdit,
+  onEdit,
+}: ScalarValueCellProps) {
+  const { _ } = useSafeLingui();
+  const missing = node.value === undefined;
+  const display = missing
+    ? _({ id: 'canvas.json_value_panel.unset_value', message: 'unset' })
+    : formatLeafValue(node.type, node.value);
+  const colorClass = missing
+    ? 'italic text-foreground-subtle'
+    : valueColorClass(node.type, node.value);
+  const enumOptions = node.schema?.enum;
+  // Unset nodes already display as their schema type, so this also covers
+  // unset booleans declared by the schema.
+  const isBoolean = node.type === 'boolean';
+
+  if (editing) {
+    return (
+      <JsonLeafValueEditor
+        node={node}
+        onCommit={(value) => {
+          onStopEdit();
+          onEdit?.(node, value);
+        }}
+        onCancel={onStopEdit}
+      />
+    );
+  }
+
+  // The value shrinks before the key (shrink-[3]) and truncates, so the row
+  // actions stay pinned to the right edge without horizontal overflow.
+  if (readOnly || !onEdit) {
+    return (
+      <span className={cn('min-w-0 shrink-3 truncate font-mono text-xs', colorClass)}>
+        {display}
+      </span>
+    );
+  }
+
+  const editTitle = _({
+    id: 'canvas.json_value_panel.edit_value_of',
+    message: 'Edit value of {key}',
+    values: { key: node.key },
+  });
+
+  // Booleans toggle on a single click (unset/false become true, true becomes
+  // false). Enum-constrained booleans fall through to the dropdown below.
+  if (isBoolean && !enumOptions?.length) {
+    return (
+      <button
+        type="button"
+        onClick={() => onEdit(node, node.value !== true)}
+        aria-label={editTitle}
+        title={_({
+          id: 'canvas.json_value_panel.toggle_hint',
+          message: 'Click to toggle',
+        })}
+        className={cn(VALUE_CELL_CLASS, 'cursor-pointer', colorClass)}
+      >
+        {display}
+      </button>
+    );
+  }
+
+  // Dropdown editing for closed value sets (schema enums).
+  if (enumOptions?.length) {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            aria-label={editTitle}
+            title={_({
+              id: 'canvas.json_value_panel.edit_hint',
+              message: 'Click to edit',
+            })}
+            className={cn(VALUE_CELL_CLASS, 'cursor-pointer', colorClass)}
+          >
+            {display}
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="min-w-32">
+          {enumOptions.map((option) => (
+            <DropdownMenuItem
+              key={String(option)}
+              onClick={() => onEdit(node, option)}
+              className={cn(
+                'font-mono text-xs',
+                option === node.value ? 'text-foreground' : 'text-foreground-muted'
+              )}
+            >
+              {formatLeafValue(inferValueType(option), option)}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => onStartEdit(node)}
+      aria-label={editTitle}
+      title={
+        missing
+          ? _({
+              id: 'canvas.json_value_panel.unset_edit_hint',
+              message: 'Click to set a value',
+            })
+          : _({
+              id: 'canvas.json_value_panel.edit_hint',
+              message: 'Click to edit',
+            })
+      }
+      className={cn(VALUE_CELL_CLASS, 'cursor-text', colorClass)}
+    >
+      {display}
+    </button>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/buildJsonTree.test.ts b/packages/apollo-react/src/canvas/components/JsonTree/buildJsonTree.test.ts
new file mode 100644
index 000000000..c6c4d1992
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/buildJsonTree.test.ts
@@ -0,0 +1,376 @@
+import { describe, expect, it } from 'vitest';
+import {
+  appendPathSegment,
+  buildJsonTree,
+  collectContainerPaths,
+  flattenJsonTree,
+  formatLeafValue,
+  getValueAtPath,
+  isArrayItemTemplateRoot,
+  removeValueAtPath,
+  setValueAtPath,
+} from './buildJsonTree';
+import type { JsonSchema, JsonTreeNode } from './JsonTree.types';
+
+const SCHEMA: JsonSchema = {
+  type: 'object',
+  required: ['statusCode'],
+  properties: {
+    statusCode: { type: 'integer' },
+    responseBody: {
+      type: 'object',
+      properties: {
+        id: { type: 'string' },
+        amount: { type: 'number' },
+        currency: { type: 'string', enum: ['USD', 'EUR'] },
+      },
+    },
+    errorMessage: { type: ['string', 'null'] },
+    cached: { type: 'boolean' },
+  },
+};
+
+function byKey(nodes: JsonTreeNode[] | undefined, key: string): JsonTreeNode {
+  const node = nodes?.find((n) => n.key === key);
+  if (!node) throw new Error(`node ${key} not found`);
+  return node;
+}
+
+describe('appendPathSegment', () => {
+  it('joins identifier keys with dots', () => {
+    expect(appendPathSegment('a', 'b')).toBe('a.b');
+    expect(appendPathSegment('', 'root')).toBe('root');
+  });
+
+  it('bracket-quotes non-identifier keys', () => {
+    expect(appendPathSegment('headers', 'content-type')).toBe('headers["content-type"]');
+  });
+
+  it('brackets array indices', () => {
+    expect(appendPathSegment('items', 2)).toBe('items[2]');
+  });
+});
+
+describe('buildJsonTree', () => {
+  it('builds nodes from the value with their schema attached', () => {
+    const tree = buildJsonTree({
+      schema: SCHEMA,
+      value: { statusCode: 200, errorMessage: null, cached: false },
+    });
+    const statusCode = byKey(tree, 'statusCode');
+    expect(statusCode.type).toBe('number');
+    expect(statusCode.value).toBe(200);
+    expect(statusCode.schema).toEqual({ type: 'integer' });
+    expect(statusCode.required).toBe(true);
+    expect(byKey(tree, 'errorMessage').type).toBe('null');
+    expect(byKey(tree, 'cached').value).toBe(false);
+  });
+
+  it('renders schema-declared keys absent from the value as unset', () => {
+    const tree = buildJsonTree({ schema: SCHEMA, value: { statusCode: 200 } });
+    const unset = byKey(tree, 'responseBody');
+    expect(unset.value).toBeUndefined();
+    expect(unset.type).toBe('object');
+    // Structure keeps extending from the schema below the unset branch.
+    expect(byKey(unset.children, 'id').value).toBeUndefined();
+    expect(byKey(unset.children, 'id').type).toBe('string');
+  });
+
+  it('renders value keys the schema does not declare', () => {
+    const tree = buildJsonTree({
+      schema: SCHEMA,
+      value: { statusCode: 200, debugInfo: { attempt: 1 } },
+    });
+    const undeclared = byKey(tree, 'debugInfo');
+    expect(undeclared.schema).toBeUndefined();
+    expect(byKey(undeclared.children, 'attempt').value).toBe(1);
+  });
+
+  it('attaches an additionalProperties schema to undeclared keys', () => {
+    const schema: JsonSchema = {
+      type: 'object',
+      properties: {},
+      additionalProperties: { type: 'string', enum: ['yes', 'no'] },
+    };
+    const tree = buildJsonTree({ schema, value: { ok: 'yes' } });
+    expect(byKey(tree, 'ok').schema).toEqual({ type: 'string', enum: ['yes', 'no'] });
+  });
+
+  it('paths array items by index and attaches the items schema', () => {
+    const schema: JsonSchema = {
+      type: 'object',
+      properties: { tags: { type: 'array', items: { type: 'string' } } },
+    };
+    const tree = buildJsonTree({ schema, value: { tags: ['a', 'b'] } });
+    const tags = byKey(tree, 'tags');
+    expect(tags.children?.map((c) => c.path)).toEqual(['tags[0]', 'tags[1]']);
+    expect(tags.children?.[0]?.schema).toEqual({ type: 'string' });
+  });
+
+  it('previews a scalar array item shape from the schema when there is no value', () => {
+    const schema: JsonSchema = {
+      type: 'object',
+      properties: { tags: { type: 'array', items: { type: 'string' } } },
+    };
+    const tree = buildJsonTree({ schema });
+    const tags = byKey(tree, 'tags');
+    expect(tags.type).toBe('array');
+    expect(tags.value).toBeUndefined();
+    expect(tags.children).toHaveLength(1);
+    const [preview] = tags.children!;
+    expect(preview?.isArrayItemTemplate).toBe(true);
+    expect(preview?.type).toBe('string');
+    expect(preview?.value).toBeUndefined();
+    expect(preview?.path).toBe('tags[0]');
+  });
+
+  it('previews an object array item shape, flagging the whole subtree', () => {
+    const schema: JsonSchema = {
+      type: 'object',
+      properties: {
+        rows: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: { name: { type: 'string' }, count: { type: 'integer' } },
+          },
+        },
+      },
+    };
+    const tree = buildJsonTree({ schema });
+    const [preview] = byKey(tree, 'rows').children!;
+    expect(preview?.isArrayItemTemplate).toBe(true);
+    expect(preview?.type).toBe('object');
+    expect(byKey(preview?.children, 'name')?.isArrayItemTemplate).toBe(true);
+    expect(byKey(preview?.children, 'name')?.type).toBe('string');
+    expect(byKey(preview?.children, 'count')?.type).toBe('number');
+  });
+
+  it('previews the item shape for a present-but-empty array', () => {
+    const schema: JsonSchema = {
+      type: 'object',
+      properties: { tags: { type: 'array', items: { type: 'string' } } },
+    };
+    const tree = buildJsonTree({ schema, value: { tags: [] } });
+    const [preview] = byKey(tree, 'tags').children!;
+    expect(preview?.isArrayItemTemplate).toBe(true);
+    expect(preview?.type).toBe('string');
+  });
+
+  it('does not add a preview item once the array has real items', () => {
+    const schema: JsonSchema = {
+      type: 'object',
+      properties: { tags: { type: 'array', items: { type: 'string' } } },
+    };
+    const tree = buildJsonTree({ schema, value: { tags: ['a'] } });
+    const tags = byKey(tree, 'tags');
+    expect(tags.children).toHaveLength(1);
+    expect(tags.children?.[0]?.isArrayItemTemplate).toBeUndefined();
+    expect(tags.children?.[0]?.value).toBe('a');
+  });
+
+  it('adds no preview item when the schema declares no items', () => {
+    const schema: JsonSchema = {
+      type: 'object',
+      properties: { tags: { type: 'array' } },
+    };
+    const tree = buildJsonTree({ schema });
+    expect(byKey(tree, 'tags').children).toHaveLength(0);
+  });
+
+  it('previews the item shape for a schema-only root array', () => {
+    const tree = buildJsonTree({ schema: { type: 'array', items: { type: 'string' } } });
+    expect(tree).toHaveLength(1);
+    expect(tree[0]?.isArrayItemTemplate).toBe(true);
+    expect(tree[0]?.type).toBe('string');
+    expect(tree[0]?.path).toBe('[0]');
+  });
+
+  it('marks only the preview item itself as the template root, not its fields', () => {
+    const schema: JsonSchema = {
+      type: 'object',
+      properties: {
+        rows: {
+          type: 'array',
+          items: { type: 'object', properties: { name: { type: 'string' } } },
+        },
+      },
+    };
+    const [preview] = byKey(buildJsonTree({ schema }), 'rows').children!;
+    // The preview item (an array element) is the "item" row; its object fields
+    // are template nodes but not the root, so they keep their own key/label.
+    expect(isArrayItemTemplateRoot(preview!)).toBe(true);
+    expect(isArrayItemTemplateRoot(byKey(preview?.children, 'name'))).toBe(false);
+  });
+
+  it('builds a value-driven tree when no schema is given', () => {
+    const tree = buildJsonTree({ value: { anything: { nested: true } } });
+    const anything = byKey(tree, 'anything');
+    expect(anything.type).toBe('object');
+    expect(byKey(anything.children, 'nested').value).toBe(true);
+  });
+
+  it('prefixes paths with basePath', () => {
+    const tree = buildJsonTree({ value: { a: 1 }, basePath: 'node1' });
+    expect(byKey(tree, 'a').path).toBe('node1.a');
+  });
+
+  it('keeps value keys named after Object.prototype members', () => {
+    // JSON.parse gives these as own data properties, not prototype members.
+    const value = JSON.parse('{"constructor":1,"toString":"x","__proto__":{"a":2}}') as Record<
+      string,
+      unknown
+    >;
+    const tree = buildJsonTree({ value: value as never });
+    const keys = tree.map((n) => n.key);
+    expect(keys).toEqual(expect.arrayContaining(['constructor', 'toString', '__proto__']));
+    expect(byKey(tree, 'constructor').value).toBe(1);
+  });
+
+  it('lets the value shape win over a mismatched root schema', () => {
+    // A stale array schema must not hide an object value.
+    const tree = buildJsonTree({
+      schema: { type: 'array', items: { type: 'string' } },
+      value: { a: 1 },
+    });
+    expect(byKey(tree, 'a').value).toBe(1);
+  });
+});
+
+describe('flattenJsonTree', () => {
+  const tree = buildJsonTree({
+    schema: SCHEMA,
+    value: {
+      statusCode: 200,
+      responseBody: { id: 'inv-001', amount: 1500, currency: 'USD' },
+      debugInfo: { attempt: 1 },
+    },
+  });
+
+  it('respects collapsed containers', () => {
+    const open = flattenJsonTree(tree);
+    const closed = flattenJsonTree(tree, { collapsed: { responseBody: true, debugInfo: true } });
+    expect(open.length).toBeGreaterThan(closed.length);
+    expect(closed.some((r) => r.node.key === 'id')).toBe(false);
+  });
+
+  it('filters by search query, keeping matching ancestors', () => {
+    const rows = flattenJsonTree(tree, { query: 'currency' });
+    expect(rows.some((r) => r.node.key === 'responseBody')).toBe(true);
+    expect(rows.some((r) => r.node.key === 'currency')).toBe(true);
+    expect(rows.some((r) => r.node.key === 'statusCode')).toBe(false);
+  });
+
+  it('shows the whole subtree when the query matches a container itself', () => {
+    const rows = flattenJsonTree(tree, { query: 'responsebody' });
+    const keys = rows.map((r) => r.node.key);
+    // The container matched by its own key renders all of its children,
+    // not just the ones that also match the query.
+    expect(keys).toEqual(expect.arrayContaining(['responseBody', 'id', 'amount', 'currency']));
+    expect(keys).not.toContain('statusCode');
+  });
+
+  it('still honors collapse state under a query-matched container', () => {
+    const rows = flattenJsonTree(tree, {
+      query: 'responsebody',
+      collapsed: { responseBody: true },
+    });
+    expect(rows.map((r) => r.node.key)).toEqual(['responseBody']);
+  });
+
+  it('filters rows with a consumer predicate, keeping matching subtrees', () => {
+    const rows = flattenJsonTree(tree, {
+      filterPredicate: (node) => node.value === undefined,
+    });
+    const keys = rows.map((r) => r.node.key);
+    expect(keys).toContain('errorMessage');
+    expect(keys).toContain('cached');
+    expect(keys).not.toContain('statusCode');
+    expect(keys).not.toContain('debugInfo');
+  });
+
+  it('shows the whole subtree when the predicate matches a container itself', () => {
+    const rows = flattenJsonTree(tree, {
+      filterPredicate: (node) => node.key === 'responseBody',
+    });
+    const keys = rows.map((r) => r.node.key);
+    expect(keys).toEqual(expect.arrayContaining(['responseBody', 'id', 'amount', 'currency']));
+    expect(keys).not.toContain('statusCode');
+  });
+});
+
+describe('value path helpers', () => {
+  it('collects container paths with depth', () => {
+    const tree = buildJsonTree({ value: { a: { b: { c: 1 } } } });
+    expect(collectContainerPaths(tree)).toEqual([
+      { path: 'a', depth: 0 },
+      { path: 'a.b', depth: 1 },
+    ]);
+  });
+
+  it('sets values immutably', () => {
+    const original = { a: { b: 1 }, keep: true };
+    const next = setValueAtPath(original, ['a', 'b'], 2);
+    expect(next).toEqual({ a: { b: 2 }, keep: true });
+    expect(original.a.b).toBe(1);
+  });
+
+  it('creates missing containers along the path', () => {
+    expect(setValueAtPath({}, ['a', 0, 'b'], 'x')).toEqual({ a: [{ b: 'x' }] });
+    expect(setValueAtPath(undefined, ['a'], 1)).toEqual({ a: 1 });
+  });
+
+  it('reads values back', () => {
+    expect(getValueAtPath({ a: [{ b: 'x' }] }, ['a', 0, 'b'])).toBe('x');
+    expect(getValueAtPath({ a: 1 }, ['missing'])).toBeUndefined();
+  });
+
+  it('removes object keys immutably', () => {
+    const original = { a: { b: 1, c: 2 }, keep: true };
+    const next = removeValueAtPath(original, ['a', 'b']);
+    expect(next).toEqual({ a: { c: 2 }, keep: true });
+    expect(original.a.b).toBe(1);
+  });
+
+  it('splices removed array items', () => {
+    expect(removeValueAtPath({ a: [1, 2, 3] }, ['a', 1])).toEqual({ a: [1, 3] });
+  });
+
+  it('returns the root unchanged when the path does not resolve', () => {
+    const original = { a: 1 };
+    expect(removeValueAtPath(original, ['missing'])).toBe(original);
+    expect(removeValueAtPath(original, ['a', 'deep'])).toBe(original);
+  });
+
+  it('removes the root itself when given no segments', () => {
+    expect(removeValueAtPath({ a: 1 }, [])).toBeUndefined();
+  });
+
+  it('sets a prototype-name key as own, JSON-serializable data', () => {
+    // Assignment would hit the `__proto__` setter and drop the value; the
+    // helper must store an own data property that survives JSON.stringify.
+    const next = setValueAtPath({}, ['__proto__'], { a: 1 });
+    // A string compare avoids the `{ __proto__: … }` object-literal trap (which
+    // would set the prototype rather than an own key).
+    expect(JSON.stringify(next)).toBe('{"__proto__":{"a":1}}');
+    expect(Object.hasOwn(next as object, '__proto__')).toBe(true);
+    expect(Object.getPrototypeOf(next)).toBe(Object.prototype);
+  });
+
+  it('reads and removes prototype-name keys as own data', () => {
+    const root = JSON.parse('{"toString":"x"}') as Record<string, unknown>;
+    expect(getValueAtPath(root as never, ['toString'])).toBe('x');
+    // A non-own inherited name resolves to undefined, not the prototype method.
+    expect(getValueAtPath({ a: 1 }, ['toString'])).toBeUndefined();
+    expect(removeValueAtPath(root as never, ['toString'])).toEqual({});
+  });
+});
+
+describe('formatLeafValue', () => {
+  it('quotes strings and passes scalars through', () => {
+    expect(formatLeafValue('string', 'hi')).toBe('"hi"');
+    expect(formatLeafValue('number', 42)).toBe('42');
+    expect(formatLeafValue('boolean', false)).toBe('false');
+    expect(formatLeafValue('null', null)).toBe('null');
+  });
+});
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/buildJsonTree.ts b/packages/apollo-react/src/canvas/components/JsonTree/buildJsonTree.ts
new file mode 100644
index 000000000..5d7661fa0
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/buildJsonTree.ts
@@ -0,0 +1,456 @@
+import type {
+  JsonContainer,
+  JsonObject,
+  JsonSchema,
+  JsonSchemaTypeName,
+  JsonTreeNode,
+  JsonTreeNodeType,
+  JsonValue,
+  PathSegment,
+} from './JsonTree.types';
+
+const IDENTIFIER_RE = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+
+export function isJsonObject(value: JsonValue | undefined): value is JsonObject {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/** Appends a segment to an expression path (`a.b`, `a["x-y"]`, `a[0]`). */
+export function appendPathSegment(path: string, segment: PathSegment): string {
+  if (typeof segment === 'number') return `${path}[${segment}]`;
+  if (IDENTIFIER_RE.test(segment)) return path ? `${path}.${segment}` : segment;
+  return `${path}[${JSON.stringify(segment)}]`;
+}
+
+export function inferValueType(value: JsonValue): JsonTreeNodeType {
+  if (value === null) return 'null';
+  if (Array.isArray(value)) return 'array';
+  switch (typeof value) {
+    case 'string':
+      return 'string';
+    case 'number':
+      return 'number';
+    case 'boolean':
+      return 'boolean';
+    default:
+      return 'object';
+  }
+}
+
+function declaredTypes(schema: JsonSchema | undefined): JsonSchemaTypeName[] | undefined {
+  if (!schema?.type) return undefined;
+  return Array.isArray(schema.type) ? schema.type : [schema.type];
+}
+
+/** The type a schema-only (unset) node should display as. */
+export function schemaDisplayType(schema: JsonSchema | undefined): JsonTreeNodeType {
+  const types = declaredTypes(schema);
+  const first = types?.find((t) => t !== 'null') ?? types?.[0];
+  if (first) return first === 'integer' ? 'number' : first;
+  if (schema?.properties) return 'object';
+  if (schema?.items) return 'array';
+  const enumSample = schema?.enum?.find((v) => v !== null);
+  if (enumSample !== undefined) return inferValueType(enumSample);
+  return 'null';
+}
+
+interface BuildNodeInput {
+  key: string;
+  segments: PathSegment[];
+  path: string;
+  schema?: JsonSchema;
+  value?: JsonValue;
+  hasValue: boolean;
+  required?: boolean;
+  /** Node belongs to a schema-only array-item preview (see `isArrayItemTemplate`). */
+  isTemplate?: boolean;
+}
+
+function buildNode(input: BuildNodeInput): JsonTreeNode {
+  const type = input.hasValue
+    ? inferValueType(input.value as JsonValue)
+    : schemaDisplayType(input.schema);
+
+  const node: JsonTreeNode = {
+    key: input.key,
+    path: input.path,
+    segments: input.segments,
+    type,
+    required: input.required,
+    schema: input.schema,
+  };
+  if (input.hasValue) node.value = input.value;
+  if (input.isTemplate) node.isArrayItemTemplate = true;
+
+  if (type === 'object') {
+    node.children = buildObjectChildren(
+      input.hasValue ? (input.value as JsonObject) : undefined,
+      input.schema,
+      input.segments,
+      input.path,
+      input.isTemplate
+    );
+  } else if (type === 'array') {
+    node.children = buildArrayChildren(
+      input.schema,
+      input.value,
+      input.hasValue,
+      input.segments,
+      input.path,
+      input.isTemplate
+    );
+  }
+
+  return node;
+}
+
+/**
+ * Children for an array node. Real items map one-to-one to child nodes. When
+ * there are no items but the schema declares `items`, synthesize a single
+ * read-only preview child so the expected item shape stays visible from the
+ * schema alone. This applies to both schema-only (value-less) arrays and
+ * present-but-empty ones. The preview subtree is flagged `isArrayItemTemplate`
+ * throughout via `isTemplate`.
+ */
+function buildArrayChildren(
+  schema: JsonSchema | undefined,
+  value: JsonValue | undefined,
+  hasValue: boolean,
+  segments: PathSegment[],
+  path: string,
+  isTemplate?: boolean
+): JsonTreeNode[] {
+  const items = hasValue && Array.isArray(value) ? value : [];
+  if (items.length > 0) {
+    return items.map((item, index) =>
+      buildNode({
+        key: String(index),
+        segments: [...segments, index],
+        path: appendPathSegment(path, index),
+        schema: schema?.items,
+        value: item,
+        hasValue: true,
+        isTemplate,
+      })
+    );
+  }
+  if (schema?.items) {
+    return [
+      buildNode({
+        key: '0',
+        segments: [...segments, 0],
+        path: appendPathSegment(path, 0),
+        schema: schema.items,
+        hasValue: false,
+        isTemplate: true,
+      }),
+    ];
+  }
+  return [];
+}
+
+function buildObjectChildren(
+  value: JsonObject | undefined,
+  schema: JsonSchema | undefined,
+  segments: PathSegment[],
+  path: string,
+  isTemplate?: boolean
+): JsonTreeNode[] {
+  const properties = schema?.properties ?? {};
+  const required = new Set(schema?.required ?? []);
+  const additional =
+    typeof schema?.additionalProperties === 'object' ? schema.additionalProperties : undefined;
+
+  const children: JsonTreeNode[] = [];
+
+  // Schema-declared keys first (in schema order), present or not. Own-property
+  // checks throughout so keys named after Object.prototype members
+  // (`constructor`, `toString`, `__proto__`, …) are treated as real data.
+  for (const [key, childSchema] of Object.entries(properties)) {
+    const hasValue = value !== undefined && Object.hasOwn(value, key);
+    children.push(
+      buildNode({
+        key,
+        segments: [...segments, key],
+        path: appendPathSegment(path, key),
+        schema: childSchema,
+        value: hasValue ? value?.[key] : undefined,
+        hasValue,
+        required: required.has(key),
+        isTemplate,
+      })
+    );
+  }
+
+  // Then value keys the schema does not declare. When `additionalProperties`
+  // is itself a schema it describes those keys (descriptions, enum editing).
+  if (value !== undefined) {
+    for (const [key, childValue] of Object.entries(value)) {
+      if (Object.hasOwn(properties, key)) continue;
+      children.push(
+        buildNode({
+          key,
+          segments: [...segments, key],
+          path: appendPathSegment(path, key),
+          schema: additional,
+          value: childValue,
+          hasValue: true,
+        })
+      );
+    }
+  }
+
+  return children;
+}
+
+export interface BuildJsonTreeOptions {
+  schema?: JsonSchema;
+  /** Root value to render. Must be an object or array (fields of a container). */
+  value?: JsonContainer;
+  /** Prefix prepended to every path (e.g. a node id). Default: none. */
+  basePath?: string;
+}
+
+/**
+ * Merges a JSON Schema with a JSON value into a tree.
+ *
+ * Returns the children of the root: schema-declared entries first (rendered
+ * even when the value omits them, as "unset"), then value entries the schema
+ * does not declare. Without a schema the tree is value-driven.
+ */
+export function buildJsonTree(options: BuildJsonTreeOptions): JsonTreeNode[] {
+  const { schema, value, basePath = '' } = options;
+
+  // The runtime value decides the root shape whenever one exists; the schema is
+  // only consulted when the value is absent. Otherwise a stale array schema
+  // would hide an object value (and vice versa).
+  const rootIsArray =
+    value !== undefined ? Array.isArray(value) : !!schema && schemaDisplayType(schema) === 'array';
+
+  if (rootIsArray) {
+    return buildArrayChildren(schema, value, value !== undefined, [], basePath);
+  }
+
+  return buildObjectChildren(isJsonObject(value) ? value : undefined, schema, [], basePath);
+}
+
+/**
+ * True for the synthesized array-item preview node itself (the "item" row), as
+ * opposed to its descendant fields. Only array elements carry a numeric final
+ * segment, and a preview subtree has no real elements, so a numeric tail marks
+ * the preview item at any nesting depth. Used to label the row and to keep it
+ * out of the parent array's item count.
+ */
+export function isArrayItemTemplateRoot(node: JsonTreeNode): boolean {
+  return !!node.isArrayItemTemplate && typeof node.segments[node.segments.length - 1] === 'number';
+}
+
+export interface FlatJsonTreeRow {
+  node: JsonTreeNode;
+  depth: number;
+}
+
+/** Consumer display texts for a node, so search can match them alongside the raw key. */
+export type NodeDisplayTexts = (
+  node: JsonTreeNode
+) => { label?: string; sublabel?: string } | undefined;
+
+function nodeSelfMatchesQuery(
+  node: JsonTreeNode,
+  query: string,
+  displayTexts?: NodeDisplayTexts
+): boolean {
+  if (node.key.toLowerCase().includes(query)) return true;
+  const display = displayTexts?.(node);
+  if (display?.label?.toLowerCase().includes(query)) return true;
+  if (display?.sublabel?.toLowerCase().includes(query)) return true;
+  return (
+    node.value !== undefined &&
+    node.value !== null &&
+    typeof node.value !== 'object' &&
+    String(node.value).toLowerCase().includes(query)
+  );
+}
+
+function nodeMatchesQuery(
+  node: JsonTreeNode,
+  query: string,
+  displayTexts?: NodeDisplayTexts
+): boolean {
+  if (nodeSelfMatchesQuery(node, query, displayTexts)) return true;
+  return node.children?.some((c) => nodeMatchesQuery(c, query, displayTexts)) ?? false;
+}
+
+function nodeOrDescendantMatches(
+  node: JsonTreeNode,
+  predicate: (node: JsonTreeNode) => boolean
+): boolean {
+  if (predicate(node)) return true;
+  return node.children?.some((c) => nodeOrDescendantMatches(c, predicate)) ?? false;
+}
+
+export interface FlattenOptions {
+  collapsed?: Record<string, boolean>;
+  query?: string;
+  /**
+   * Rows are kept when the node (or any descendant) matches; a node that
+   * matches directly shows its whole subtree.
+   */
+  filterPredicate?: (node: JsonTreeNode) => boolean;
+  /** Lets search also match consumer display labels (e.g. decoration labels). */
+  displayTexts?: NodeDisplayTexts;
+}
+
+/** Flattens the tree to visible rows, honoring collapse state, search, and filter. */
+export function flattenJsonTree(
+  nodes: JsonTreeNode[],
+  options: FlattenOptions = {},
+  depth = 0
+): FlatJsonTreeRow[] {
+  const { collapsed = {}, filterPredicate } = options;
+  const query = options.query?.trim().toLowerCase() ?? '';
+  const rows: FlatJsonTreeRow[] = [];
+
+  for (const node of nodes) {
+    const selfQueryMatch = !!query && nodeSelfMatchesQuery(node, query, options.displayTexts);
+    if (
+      query &&
+      !selfQueryMatch &&
+      !(node.children?.some((c) => nodeMatchesQuery(c, query, options.displayTexts)) ?? false)
+    ) {
+      continue;
+    }
+    const selfPredicateMatch = !!filterPredicate && filterPredicate(node);
+    if (
+      filterPredicate &&
+      !selfPredicateMatch &&
+      !(node.children?.some((c) => nodeOrDescendantMatches(c, filterPredicate)) ?? false)
+    ) {
+      continue;
+    }
+    rows.push({ node, depth });
+    if (node.children && !collapsed[node.path]) {
+      // A node that matches the query or filter itself shows its whole
+      // subtree; descendant-driven matches keep filtering the children.
+      const childOptions =
+        selfQueryMatch || selfPredicateMatch
+          ? {
+              ...options,
+              query: selfQueryMatch ? '' : options.query,
+              filterPredicate: selfPredicateMatch ? undefined : filterPredicate,
+            }
+          : options;
+      rows.push(...flattenJsonTree(node.children, childOptions, depth + 1));
+    }
+  }
+  return rows;
+}
+
+export interface ContainerPath {
+  path: string;
+  depth: number;
+}
+
+/** All container (object/array) paths in the tree, with their depth. */
+export function collectContainerPaths(nodes: JsonTreeNode[], depth = 0): ContainerPath[] {
+  const paths: ContainerPath[] = [];
+  for (const node of nodes) {
+    if (node.children) {
+      paths.push({ path: node.path, depth });
+      paths.push(...collectContainerPaths(node.children, depth + 1));
+    }
+  }
+  return paths;
+}
+
+export function getValueAtPath(
+  root: JsonValue | undefined,
+  segments: PathSegment[]
+): JsonValue | undefined {
+  let current: JsonValue | undefined = root;
+  for (const segment of segments) {
+    if (typeof segment === 'number') {
+      if (!Array.isArray(current)) return undefined;
+      current = current[segment];
+    } else {
+      // Own-property read: `current['__proto__']` would otherwise return the
+      // prototype rather than a data value.
+      if (!isJsonObject(current) || !Object.hasOwn(current, segment)) return undefined;
+      current = current[segment];
+    }
+  }
+  return current;
+}
+
+/**
+ * Returns a copy of `root` with `value` set at `segments`, creating missing
+ * containers along the way (arrays for numeric segments, objects otherwise).
+ * This is how edits on schema-declared but absent branches extend the value.
+ */
+export function setValueAtPath(
+  root: JsonValue | undefined,
+  segments: PathSegment[],
+  value: JsonValue
+): JsonValue {
+  const [head, ...rest] = segments;
+  if (head === undefined) return value;
+  if (typeof head === 'number') {
+    const array = Array.isArray(root) ? [...root] : [];
+    array[head] = setValueAtPath(array[head], rest, value);
+    return array;
+  }
+  const object: JsonObject = isJsonObject(root) ? { ...root } : {};
+  // Define the property rather than assign it: `object['__proto__'] = …` hits
+  // the prototype setter (dropping the data / mutating the prototype), while a
+  // data-property definition stores an own, JSON-serializable value for any key.
+  const previous = Object.hasOwn(object, head) ? object[head] : undefined;
+  Object.defineProperty(object, head, {
+    value: setValueAtPath(previous, rest, value),
+    enumerable: true,
+    configurable: true,
+    writable: true,
+  });
+  return object;
+}
+
+/**
+ * Returns a copy of `root` with the entry at `segments` removed (object keys
+ * are deleted, array items spliced out). Removing the root itself (`segments`
+ * empty) returns undefined. Paths that don't resolve return `root` unchanged.
+ */
+export function removeValueAtPath(
+  root: JsonValue | undefined,
+  segments: PathSegment[]
+): JsonValue | undefined {
+  const [head, ...rest] = segments;
+  if (head === undefined) return undefined;
+  if (typeof head === 'number') {
+    if (!Array.isArray(root) || head >= root.length) return root;
+    if (rest.length === 0) {
+      const array = [...root];
+      array.splice(head, 1);
+      return array;
+    }
+    const child = removeValueAtPath(root[head], rest) as JsonValue;
+    if (child === root[head]) return root;
+    const array = [...root];
+    array[head] = child;
+    return array;
+  }
+  if (!isJsonObject(root) || !Object.hasOwn(root, head)) return root;
+  if (rest.length === 0) {
+    const object = { ...root };
+    delete object[head];
+    return object;
+  }
+  const child = removeValueAtPath(root[head], rest) as JsonValue;
+  if (child === root[head]) return root;
+  return { ...root, [head]: child };
+}
+
+/** Formats a leaf value for display (`"text"`, `42`, `true`, `null`). */
+export function formatLeafValue(type: JsonTreeNodeType, value: JsonValue | undefined): string {
+  if (value === undefined || value === null) return 'null';
+  if (type === 'string') return JSON.stringify(value);
+  return String(value);
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/clipboard.ts b/packages/apollo-react/src/canvas/components/JsonTree/clipboard.ts
new file mode 100644
index 000000000..8a889174a
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/clipboard.ts
@@ -0,0 +1,37 @@
+/**
+ * Copies text to the clipboard, falling back to a hidden textarea +
+ * `execCommand` when the async Clipboard API is unavailable or rejected
+ * (e.g. cross-origin iframes such as the Storybook preview).
+ */
+export async function copyTextToClipboard(text: string): Promise<boolean> {
+  if (typeof navigator !== 'undefined' && navigator.clipboard) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      // Fall through to the legacy path.
+    }
+  }
+  if (typeof document === 'undefined') return false;
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.setAttribute('readonly', '');
+  textarea.style.position = 'fixed';
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+  const selection = document.getSelection();
+  const previousRange = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+  textarea.select();
+  let copied = false;
+  try {
+    copied = document.execCommand('copy');
+  } catch {
+    copied = false;
+  }
+  textarea.remove();
+  if (previousRange && selection) {
+    selection.removeAllRanges();
+    selection.addRange(previousRange);
+  }
+  return copied;
+}
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/index.ts b/packages/apollo-react/src/canvas/components/JsonTree/index.ts
new file mode 100644
index 000000000..8174089ce
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/index.ts
@@ -0,0 +1,9 @@
+export * from './buildJsonTree';
+export * from './clipboard';
+export * from './JsonContainerEditor';
+export * from './JsonLeafValueEditor';
+export * from './JsonMultilineLeafEditor';
+export * from './JsonTree';
+export * from './JsonTree.types';
+export * from './JsonTreeToolbar';
+export * from './JsonTypeBadge';
diff --git a/packages/apollo-react/src/canvas/components/JsonTree/leafEditTypes.ts b/packages/apollo-react/src/canvas/components/JsonTree/leafEditTypes.ts
new file mode 100644
index 000000000..251fcec48
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/JsonTree/leafEditTypes.ts
@@ -0,0 +1,50 @@
+import type { JsonSchema, JsonTreeNodeType, JsonValue } from './JsonTree.types';
+
+export type LeafEditType = 'string' | 'number' | 'integer' | 'auto';
+
+/** Whether an edit type commits a number (integer is a stricter number). */
+export function isNumericEdit(editType: LeafEditType): boolean {
+  return editType === 'number' || editType === 'integer';
+}
+
+/**
+ * The type a leaf edit should commit as. A schema declaring exactly one
+ * non-null scalar type wins (`integer` stays distinct so fractional input is
+ * rejected); otherwise the current value's type; `auto` (JSON-scalar parsing
+ * with string fallback) when neither pins it down.
+ */
+export function resolveLeafEditType(
+  type: JsonTreeNodeType,
+  schema: JsonSchema | undefined
+): LeafEditType {
+  const declared = schema?.type === undefined ? [] : [schema.type].flat();
+  const scalars = declared.filter((t) => t === 'string' || t === 'number' || t === 'integer');
+  if (scalars.length === 1) {
+    const only = scalars[0];
+    return only === 'string' ? 'string' : only === 'integer' ? 'integer' : 'number';
+  }
+  if (type === 'string') return 'string';
+  if (type === 'number') return 'number';
+  return 'auto';
+}
+
+export function parseLeafValue(raw: string, editType: LeafEditType): JsonValue | undefined {
+  if (editType === 'string') return raw;
+  if (isNumericEdit(editType)) {
+    if (raw.trim() === '') return undefined;
+    const parsed = Number(raw);
+    // Reject Infinity/NaN (JSON.stringify would turn them into null) and
+    // fractional values for an integer schema, so the committed value always
+    // round-trips through JSON and matches its declared type.
+    if (!Number.isFinite(parsed)) return undefined;
+    if (editType === 'integer' && !Number.isInteger(parsed)) return undefined;
+    return parsed;
+  }
+  const trimmed = raw.trim();
+  if (trimmed === '') return null;
+  try {
+    return JSON.parse(trimmed) as JsonValue;
+  } catch {
+    return raw;
+  }
+}
diff --git a/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.stories.tsx b/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.stories.tsx
new file mode 100644
index 000000000..b4bf55eef
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.stories.tsx
@@ -0,0 +1,925 @@
+import type { EditorProps } from '@monaco-editor/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  cn,
+  type FormSchema,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@uipath/apollo-wind';
+import {
+  apolloCoreDarkHCMonaco,
+  apolloCoreDarkMonaco,
+  apolloCoreLightHCMonaco,
+  apolloCoreLightMonaco,
+  apolloFutureDarkMonaco,
+  apolloFutureLightMonaco,
+} from '@uipath/apollo-wind/editor-themes';
+import { Eye, File, HardDrive, ScanText, Trash2, Upload, Zap } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { NodeOutputModeSelect } from '../../controls';
+import type {
+  DeriveTypeIcon,
+  JsonCodeEditorRenderProps,
+  JsonContainer,
+  JsonSchema,
+  JsonTreeFilterOption,
+  JsonTreeNode,
+  JsonValue,
+  NodeAction,
+  NodeActionsResolver,
+  NodeDecoration,
+  RenderValueCell,
+} from '../JsonTree';
+import { isJsonObject } from '../JsonTree';
+import { NodePropertyPanel } from '../NodePropertyPanel';
+import { NodeIOView } from './NodeIOView';
+import type { NodeIOViewTab } from './NodeIOView.types';
+
+// ============================================================================
+// Monaco JSON viewer (used for the NodeIOView JSON tab)
+//
+// @monaco-editor/react ships a CJS build without an `exports` field, so the
+// production bundler resolves the default import as undefined. Lazy-loading via
+// dynamic import routes through an interop path that extracts it correctly.
+// ============================================================================
+
+const _LazyMonaco = lazy(() => import('@monaco-editor/react'));
+function MonacoEditor(props: EditorProps) {
+  return (
+    <Suspense fallback={<div className="min-h-[200px] flex-1" />}>
+      <_LazyMonaco {...props} />
+    </Suspense>
+  );
+}
+
+let _monacoThemesRegistered = false;
+// biome-ignore lint/suspicious/noExplicitAny: Monaco types not available at story level
+function registerMonacoThemes(monaco: any) {
+  if (_monacoThemesRegistered) return;
+  monaco.editor.defineTheme('apollo-future-dark', apolloFutureDarkMonaco);
+  monaco.editor.defineTheme('apollo-future-light', apolloFutureLightMonaco);
+  monaco.editor.defineTheme('apollo-core-dark', apolloCoreDarkMonaco);
+  monaco.editor.defineTheme('apollo-core-light', apolloCoreLightMonaco);
+  monaco.editor.defineTheme('apollo-core-dark-hc', apolloCoreDarkHCMonaco);
+  monaco.editor.defineTheme('apollo-core-light-hc', apolloCoreLightHCMonaco);
+  _monacoThemesRegistered = true;
+}
+
+const THEME_CLASS_MAP: Record<string, string> = {
+  'future-dark': 'apollo-future-dark',
+  'future-light': 'apollo-future-light',
+  dark: 'apollo-core-dark',
+  light: 'apollo-core-light',
+  'dark-hc': 'apollo-core-dark-hc',
+  'light-hc': 'apollo-core-light-hc',
+};
+
+function getMonacoThemeName(): string {
+  if (typeof document === 'undefined') return 'apollo-future-dark';
+  const match = Array.from(document.body.classList).find((c) => c in THEME_CLASS_MAP);
+  return match ? THEME_CLASS_MAP[match]! : 'apollo-future-dark';
+}
+
+function useMonacoTheme(): string {
+  const [themeName, setThemeName] = useState(getMonacoThemeName);
+  useEffect(() => {
+    const observer = new MutationObserver(() => setThemeName(getMonacoThemeName()));
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+    return () => observer.disconnect();
+  }, []);
+  return themeName;
+}
+
+const JSON_VIEWER_OPTIONS = {
+  readOnly: true,
+  fontSize: 12,
+  lineHeight: 18,
+  minimap: { enabled: false },
+  scrollBeyondLastLine: false,
+  wordWrap: 'off',
+  fontFamily:
+    'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+  padding: { top: 8, bottom: 8 },
+  lineNumbers: 'off' as const,
+  lineDecorationsWidth: 0,
+  glyphMargin: false,
+  folding: true,
+  renderLineHighlight: 'none' as const,
+  hideCursorInOverviewRuler: true,
+  overviewRulerBorder: false,
+  overviewRulerLanes: 0,
+  scrollbar: {
+    vertical: 'auto' as const,
+    horizontal: 'auto' as const,
+    alwaysConsumeMouseWheel: false,
+  },
+  automaticLayout: true,
+} as const;
+
+function MonacoJsonView({ value }: { value: JsonValue | undefined }) {
+  const monacoTheme = useMonacoTheme();
+  return (
+    <MonacoEditor
+      height="100%"
+      language="json"
+      value={JSON.stringify(value ?? null, null, 2)}
+      theme={monacoTheme}
+      beforeMount={registerMonacoThemes}
+      options={JSON_VIEWER_OPTIONS}
+    />
+  );
+}
+
+// Editable Monaco variant wired into NodeIOView's `renderCodeEditor` so that
+// editing an object/array value uses a real code editor instead of a textarea.
+const CODE_EDITOR_OPTIONS = {
+  ...JSON_VIEWER_OPTIONS,
+  readOnly: false,
+  lineNumbers: 'off' as const,
+  lineDecorationsWidth: 8,
+  renderLineHighlight: 'line' as const,
+} as const;
+
+function MonacoCodeEditor({
+  value,
+  onChange,
+  onApply,
+  onCancel,
+  invalid,
+  autoFocus,
+}: JsonCodeEditorRenderProps) {
+  const monacoTheme = useMonacoTheme();
+  return (
+    // Monaco owns most keys; the wrapper only needs Escape (cancel) and
+    // Cmd/Ctrl+Enter (apply), matching the textarea fallback's shortcuts.
+    <div
+      className={cn(
+        'overflow-hidden rounded-lg border',
+        invalid ? 'border-error' : 'border-border-subtle'
+      )}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          e.stopPropagation();
+          onCancel();
+        }
+        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          onApply();
+        }
+      }}
+    >
+      <MonacoEditor
+        height="160px"
+        language="json"
+        value={value}
+        theme={monacoTheme}
+        beforeMount={registerMonacoThemes}
+        onChange={(next) => onChange(next ?? '')}
+        onMount={(editor) => {
+          if (autoFocus) editor.focus();
+        }}
+        options={CODE_EDITOR_OPTIONS}
+      />
+    </div>
+  );
+}
+
+const renderJsonCodeEditor = (props: JsonCodeEditorRenderProps) => <MonacoCodeEditor {...props} />;
+
+// ============================================================================
+// Custom file value cell + type badge (shared by Input / Output trees)
+// ============================================================================
+
+const deriveFileTypeIcon: DeriveTypeIcon = (node) =>
+  node.schema?.format === 'file' ? <File /> : undefined;
+
+const MOCK_FILES = [
+  { FullName: 'statement-scan.png', MimeType: 'image/png' },
+  { FullName: 'amendment.pdf', MimeType: 'application/pdf' },
+];
+
+// The file value cell is display-only; the file affordances live in the row's
+// action group (see useFileNodeActions), matching how a real host surfaces
+// Upload / Preview / Delete rather than crowding the value cell.
+const renderFileValueCell: RenderValueCell = (node) => {
+  if (node.schema?.format !== 'file') return undefined;
+  const file = isJsonObject(node.value) ? node.value : undefined;
+  return (
+    <span
+      className={cn(
+        'truncate font-mono italic text-xs',
+        file ? 'text-foreground' : 'italic text-foreground-subtle'
+      )}
+    >
+      {typeof file?.FullName === 'string' ? file.FullName : 'no file'}
+    </span>
+  );
+};
+
+interface PreviewedFile {
+  FullName: string;
+  MimeType?: string;
+}
+
+/**
+ * Surfaces file affordances as per-node row actions:
+ *   • Upload — always offered on a file row (mock population, no real FS).
+ *   • Preview / Delete — only once a file is present.
+ * Non-file rows return `undefined` (keep their built-in actions); read-only
+ * file rows return `[]`, demonstrating omitting actions for a node.
+ */
+function useFileNodeActions(): {
+  nodeActions: NodeActionsResolver;
+  preview: PreviewedFile | null;
+  clearPreview: () => void;
+} {
+  const pickCountRef = useRef(0);
+  const [preview, setPreview] = useState<PreviewedFile | null>(null);
+
+  const nodeActions = useCallback<NodeActionsResolver>((node, ctx) => {
+    if (node.schema?.format !== 'file') return undefined;
+    if (ctx.readOnly) return [];
+
+    const file = isJsonObject(node.value) ? node.value : undefined;
+    const actions: NodeAction[] = [
+      {
+        id: 'upload',
+        icon: <Upload />,
+        label: file ? `Replace ${node.key}` : `Upload ${node.key}`,
+        tooltip: file ? 'Replace file' : 'Upload file',
+        onSelect: () => {
+          const mock = MOCK_FILES[pickCountRef.current++ % MOCK_FILES.length]!;
+          ctx.commit({
+            ID: `file-${Math.random().toString(16).slice(2, 6)}`,
+            FullName: mock.FullName,
+            MimeType: mock.MimeType,
+            SizeBytes: Math.floor(Math.random() * 90000) + 1000,
+          });
+        },
+      },
+    ];
+
+    if (file) {
+      actions.push({
+        id: 'preview',
+        icon: <Eye />,
+        label: `Preview ${node.key}`,
+        tooltip: 'Preview file',
+        onSelect: () =>
+          setPreview({
+            FullName: typeof file.FullName === 'string' ? file.FullName : node.key,
+            MimeType: typeof file.MimeType === 'string' ? file.MimeType : undefined,
+          }),
+      });
+      actions.push({
+        id: 'delete',
+        icon: <Trash2 />,
+        label: `Delete ${node.key}`,
+        tooltip: 'Delete file',
+        tone: 'error',
+        onSelect: () => ctx.clear(),
+      });
+    }
+
+    return actions;
+  }, []);
+
+  return { nodeActions, preview, clearPreview: () => setPreview(null) };
+}
+
+function FilePreviewBanner({ file, onClose }: { file: PreviewedFile; onClose: () => void }) {
+  return (
+    <div className="mb-2 flex shrink-0 items-center gap-2 rounded-lg border border-info/40 bg-info/10 px-2.5 py-1.5 text-xs">
+      <Eye size={13} className="shrink-0 text-info" />
+      <span className="min-w-0 flex-1 truncate">
+        Previewing <span className="font-mono text-foreground">{file.FullName}</span>
+        {file.MimeType && <span className="text-foreground-subtle"> · {file.MimeType}</span>}
+      </span>
+      <button
+        type="button"
+        onClick={onClose}
+        className="shrink-0 rounded px-1 text-foreground-subtle transition hover:text-foreground"
+      >
+        Close
+      </button>
+    </div>
+  );
+}
+
+// ============================================================================
+// Scenario: a Document Extraction node
+// ============================================================================
+
+const NODE_ID = 'documentExtraction1';
+const NODE_LABEL = 'Document Extraction';
+
+const FILE_TYPE_SCHEMA: JsonSchema = {
+  type: 'object',
+  format: 'file',
+  properties: {
+    ID: { type: 'string' },
+    FullName: { type: 'string' },
+    MimeType: { type: 'string' },
+    SizeBytes: { type: 'integer' },
+  },
+  required: ['ID', 'FullName'],
+};
+
+// ── Input: upstream execution data available to the node. Keyed by source node
+// id, with each node's fields nested under `output` — matching how the canvas
+// exposes upstream data (`$vars.<nodeId>.output.<field>`).
+const INPUT_SCHEMA: JsonSchema = {
+  type: 'object',
+  properties: {
+    trigger: {
+      type: 'object',
+      title: 'Trigger',
+      properties: {
+        output: {
+          type: 'object',
+          properties: {
+            fileName: { type: 'string' },
+            receivedAt: { type: 'string' },
+            source: { type: 'string', enum: ['email', 'upload', 'api'] },
+            priority: { type: 'integer' },
+            isReprocess: { type: 'boolean' },
+          },
+        },
+      },
+    },
+    readStorageFile1: {
+      type: 'object',
+      title: 'Read Storage File',
+      properties: {
+        output: {
+          type: 'object',
+          properties: {
+            document: {
+              ...FILE_TYPE_SCHEMA,
+              description: 'The source document.',
+            },
+            pageCount: { type: 'integer' },
+            bucket: { type: 'string' },
+            checksum: { type: 'string' },
+            lastModifiedBy: { type: ['string', 'null'] },
+            tags: { type: 'array', items: { type: 'string' } },
+            permissions: {
+              type: 'array',
+              items: {
+                type: 'object',
+                properties: {
+                  principal: { type: 'string' },
+                  access: { type: 'string', enum: ['read', 'read-write'] },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+const INPUT_VALUE: JsonContainer = {
+  trigger: {
+    output: {
+      fileName: 'invoice-2025-014.pdf',
+      receivedAt: '2025-07-14T09:32:00Z',
+      source: 'email',
+      priority: 2,
+      isReprocess: false,
+    },
+  },
+  readStorageFile1: {
+    output: {
+      document: {
+        ID: 'file-inv-014',
+        FullName: 'invoice-2025-014.pdf',
+        MimeType: 'application/pdf',
+        SizeBytes: 218734,
+      },
+      pageCount: 3,
+      bucket: 'incoming-invoices',
+      checksum: 'sha256:9f2a7ce5b1d3f4a6c8e7b9d2f1a3c4e5f6a7b8c9d0e1f2a3b4c5d6e7f8g9h0i1j2',
+      lastModifiedBy: null,
+      tags: ['invoice', 'vendor', 'q3'],
+      permissions: [],
+    },
+  },
+};
+
+// ── Output: a believable Document Extraction result.
+const OUTPUT_NODE_SCHEMA: JsonSchema = {
+  type: 'object',
+  required: ['documentType', 'confidence', 'success'],
+  properties: {
+    documentType: { type: 'string', enum: ['invoice', 'receipt', 'contract'] },
+    confidence: {
+      type: 'number',
+      description: 'Overall extraction confidence.',
+    },
+    success: { type: 'boolean' },
+    pageCount: { type: 'integer' },
+    extractionId: { type: 'string' },
+    processedAt: { type: 'string' },
+    fields: {
+      type: 'array',
+      description: 'Extracted fields.',
+      items: {
+        type: 'object',
+        properties: {
+          name: { type: 'string' },
+          value: { type: 'string' },
+          confidence: { type: 'number' },
+          page: { type: 'integer' },
+        },
+      },
+    },
+    tables: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          name: { type: 'string' },
+          rowCount: { type: 'integer' },
+        },
+      },
+    },
+    warnings: { type: 'array', items: { type: 'string' } },
+  },
+};
+
+interface ExtractionField {
+  name: string;
+  value: string;
+  confidence: number;
+  page: number;
+}
+
+const EXTRACTION_FIELDS: ExtractionField[] = [
+  { name: 'VendorName', value: 'Contoso Ltd', confidence: 0.98, page: 1 },
+  { name: 'InvoiceTotal', value: '12,480.00', confidence: 0.95, page: 1 },
+  { name: 'InvoiceDate', value: '2025-07-01', confidence: 0.99, page: 1 },
+  { name: 'DueDate', value: '2025-07-31', confidence: 0.88, page: 1 },
+  { name: 'PONumber', value: 'PO-55871', confidence: 0.72, page: 2 },
+];
+
+const OUTPUT_NODE_VALUE: JsonValue = {
+  documentType: 'invoice',
+  confidence: 0.972,
+  success: true,
+  pageCount: 3,
+  extractionId: 'ext-7b3d',
+  processedAt: '2025-07-14T09:32:07Z',
+  fields: EXTRACTION_FIELDS,
+  tables: [{ name: 'LineItems', rowCount: 5 }],
+  warnings: [],
+};
+
+// Output is wrapped under the node id (title = node label), mirroring
+// flow-workbench's buildWrappedOutputSchema — so it renders nested beneath a
+// node header, same as the Input source groups.
+const OUTPUT_SCHEMA: JsonSchema = {
+  type: 'object',
+  properties: {
+    [NODE_ID]: {
+      type: 'object',
+      title: NODE_LABEL,
+      properties: { output: OUTPUT_NODE_SCHEMA },
+    },
+  },
+};
+
+const OUTPUT_VALUE: JsonContainer = {
+  [NODE_ID]: { output: OUTPUT_NODE_VALUE },
+};
+
+// Node-style header decorations for the top-level source/self group rows —
+// mirrors the flow-workbench Input/Output panels: the source label replaces the
+// raw key, the node id shows as a sublabel, and the node icon replaces the type
+// badge. Keyed by the top-level path (source node id).
+const NODE_HEADERS: Record<string, { label: string; icon: ReactNode }> = {
+  trigger: { label: 'Trigger', icon: <Zap /> },
+  readStorageFile1: { label: 'Read Storage File', icon: <HardDrive /> },
+  [NODE_ID]: { label: NODE_LABEL, icon: <ScanText /> },
+};
+
+const decorateNodeHeader = (node: JsonTreeNode): NodeDecoration | undefined => {
+  // File containers surface their name through the custom value cell, so the
+  // key count (ID / FullName / MimeType / ...) is just noise.
+  if (node.schema?.format === 'file') return { hideCount: true };
+  if (node.path.includes('.')) return undefined; // top-level group rows only
+  const header = NODE_HEADERS[node.path];
+  return header
+    ? {
+        label: header.label,
+        sublabel: node.path,
+        badge: { icon: header.icon },
+        hideCount: true,
+      }
+    : undefined;
+};
+
+// Input fields this node's configuration references (e.g. in expressions);
+// drives the toolbar's "Referenced in this node" filter. A referenced
+// container shows its whole subtree.
+const REFERENCED_PATHS = new Set(['readStorageFile1.output.document', 'trigger.output.fileName']);
+
+const INPUT_FILTERS: JsonTreeFilterOption[] = [
+  {
+    id: 'referenced',
+    label: 'Referenced in this node',
+    predicate: (node) => REFERENCED_PATHS.has(node.path),
+  },
+];
+
+// ── Properties: the node's config form (standard MetadataForm).
+const PROPERTIES_FORM: FormSchema = {
+  id: 'document-extraction',
+  title: NODE_LABEL,
+  mode: 'onChange',
+  steps: [
+    {
+      id: 'extraction',
+      title: 'Extraction',
+      sections: [
+        {
+          id: 'main',
+          fields: [
+            {
+              type: 'select',
+              name: 'model',
+              label: 'Extractor',
+              defaultValue: 'prebuilt-invoice',
+              dataSource: {
+                type: 'static',
+                options: [
+                  { label: 'Invoice (prebuilt)', value: 'prebuilt-invoice' },
+                  { label: 'Receipt (prebuilt)', value: 'prebuilt-receipt' },
+                  { label: 'Custom taxonomy', value: 'custom' },
+                ],
+              },
+            },
+            {
+              type: 'text',
+              name: 'taxonomyFile',
+              label: 'Custom taxonomy',
+            },
+            {
+              type: 'multiselect',
+              name: 'fields',
+              label: 'Fields to extract',
+              defaultValue: ['vendor', 'total', 'date'],
+              dataSource: {
+                type: 'static',
+                options: [
+                  { label: 'Vendor', value: 'vendor' },
+                  { label: 'Total', value: 'total' },
+                  { label: 'Date', value: 'date' },
+                  { label: 'Line items', value: 'lineItems' },
+                  { label: 'PO number', value: 'po' },
+                ],
+              },
+            },
+            {
+              type: 'number',
+              name: 'minConfidence',
+              label: 'Minimum confidence',
+              defaultValue: 0.8,
+            },
+            {
+              type: 'switch',
+              name: 'autoValidate',
+              label: 'Auto-validate high-confidence fields',
+              defaultValue: true,
+            },
+            {
+              type: 'switch',
+              name: 'extractTables',
+              label: 'Extract tables',
+              defaultValue: true,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: 'advanced',
+      title: 'Advanced',
+      sections: [
+        {
+          id: 'adv',
+          fields: [
+            {
+              type: 'text',
+              name: 'node_id',
+              label: 'ID',
+              defaultValue: NODE_ID,
+            },
+            {
+              type: 'text',
+              name: 'label',
+              label: 'Label',
+              defaultValue: 'Extract invoice fields',
+            },
+            { type: 'textarea', name: 'description', label: 'Description' },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+// ============================================================================
+// Custom extra tab: a table view of the extraction results
+// ============================================================================
+
+function ExtractionTable({ fields }: { fields: ExtractionField[] }) {
+  return (
+    <div className="h-full overflow-auto px-(--mf-content-inset,0.875rem) py-2">
+      <table className="w-full border-collapse text-xs">
+        <thead>
+          <tr className="text-left text-foreground-subtle">
+            <th className="border-b border-border-subtle py-1.5 pr-2 font-medium">Field</th>
+            <th className="border-b border-border-subtle py-1.5 pr-2 font-medium">Value</th>
+            <th className="border-b border-border-subtle py-1.5 pr-2 text-right font-medium">
+              Confidence
+            </th>
+            <th className="border-b border-border-subtle py-1.5 text-right font-medium">Page</th>
+          </tr>
+        </thead>
+        <tbody>
+          {fields.map((f) => (
+            <tr key={f.name} className="align-top">
+              <td className="border-b border-border-subtle/50 py-1.5 pr-2 font-mono">{f.name}</td>
+              <td className="border-b border-border-subtle/50 py-1.5 pr-2">{f.value}</td>
+              <td
+                className={cn(
+                  'border-b border-border-subtle/50 py-1.5 pr-2 text-right tabular-nums',
+                  f.confidence < 0.8 ? 'text-warning' : 'text-foreground-muted'
+                )}
+              >
+                {(f.confidence * 100).toFixed(0)}%
+              </td>
+              <td className="border-b border-border-subtle/50 py-1.5 text-right tabular-nums text-foreground-muted">
+                {f.page}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// ============================================================================
+// Panels
+// ============================================================================
+
+// Fills its ResizablePanel; the group carries the card chrome (rounded border
+// + shadow) and clips the flush panels. `overflow-hidden` keeps panel content
+// from spilling across the resize handles.
+const PanelFrame = ({ children }: { children: ReactNode }) => (
+  <div className="h-full w-full overflow-hidden">{children}</div>
+);
+
+const APOLLO_MODES = ['live', 'static', 'simulated'] as const;
+
+function InputPanel({
+  schema,
+  initialValue,
+  readOnly,
+}: {
+  schema?: JsonSchema;
+  initialValue?: JsonContainer;
+  readOnly: boolean;
+}) {
+  const [value, setValue] = useState<JsonContainer | undefined>(initialValue);
+  const { nodeActions, preview, clearPreview } = useFileNodeActions();
+  return (
+    <PanelFrame>
+      <NodePropertyPanel panelTitle="Input" onClose={() => {}} className="h-full">
+        <div className="flex h-full flex-col p-6 pt-4">
+          {preview && <FilePreviewBanner file={preview} onClose={clearPreview} />}
+          <NodeIOView
+            className="min-h-0 flex-1"
+            schema={schema}
+            value={value}
+            onValueChange={setValue}
+            readOnly={readOnly}
+            searchPlaceholder="Search inputs..."
+            filters={INPUT_FILTERS}
+            decorateNode={decorateNodeHeader}
+            deriveTypeIcon={deriveFileTypeIcon}
+            renderValue={renderFileValueCell}
+            nodeActions={nodeActions}
+            renderCodeEditor={renderJsonCodeEditor}
+            pathForCopy={(path) => `$vars.${path}`}
+            jsonView={<MonacoJsonView value={value} />}
+          />
+        </div>
+      </NodePropertyPanel>
+    </PanelFrame>
+  );
+}
+
+function PropertiesPanel() {
+  return (
+    <PanelFrame>
+      <NodePropertyPanel
+        panelTitle="Properties"
+        onClose={() => {}}
+        nodeIcon={<ScanText />}
+        nodeLabel="Extract invoice fields"
+        nodeCategory={NODE_LABEL}
+        contentInset="1.5rem"
+        className="h-full"
+        schema={PROPERTIES_FORM}
+      />
+    </PanelFrame>
+  );
+}
+
+function OutputPanel({
+  showExtractionTab,
+  readOnly,
+}: {
+  showExtractionTab: boolean;
+  readOnly: boolean;
+}) {
+  const [mode, setMode] = useState<(typeof APOLLO_MODES)[number]>('live');
+  const [value, setValue] = useState<JsonContainer | undefined>(OUTPUT_VALUE);
+  const { nodeActions, preview, clearPreview } = useFileNodeActions();
+  // The mocked output is editable only in Static mode (and never when the
+  // story forces read-only).
+  const isStatic = !readOnly && mode === 'static';
+
+  const extraTabs = useMemo<NodeIOViewTab[] | undefined>(() => {
+    if (!showExtractionTab) return undefined;
+    return [
+      {
+        id: 'extraction',
+        label: 'Extraction',
+        content: <ExtractionTable fields={EXTRACTION_FIELDS} />,
+      },
+    ];
+  }, [showExtractionTab]);
+
+  return (
+    <PanelFrame>
+      <NodePropertyPanel panelTitle="Output" onClose={() => {}} className="h-full">
+        <div className="flex h-full flex-col p-6 pt-4">
+          {preview && <FilePreviewBanner file={preview} onClose={clearPreview} />}
+          <NodeIOView
+            className="min-h-0 flex-1"
+            title={NODE_LABEL}
+            titleIcon={<ScanText />}
+            titleBadge={NODE_ID}
+            titleTrailing={
+              <NodeOutputModeSelect
+                value={mode}
+                onChange={(m) => setMode(m as (typeof APOLLO_MODES)[number])}
+                disabled={readOnly}
+              />
+            }
+            schema={OUTPUT_SCHEMA}
+            value={value}
+            readOnly={!isStatic}
+            onValueChange={isStatic ? setValue : undefined}
+            searchPlaceholder="Search output..."
+            decorateNode={decorateNodeHeader}
+            deriveTypeIcon={deriveFileTypeIcon}
+            renderValue={renderFileValueCell}
+            nodeActions={nodeActions}
+            renderCodeEditor={renderJsonCodeEditor}
+            pathForCopy={(path) => `$vars.${path}`}
+            extraTabs={extraTabs}
+            jsonView={<MonacoJsonView value={value} />}
+          />
+        </div>
+      </NodePropertyPanel>
+    </PanelFrame>
+  );
+}
+
+// ============================================================================
+// Meta + story
+// ============================================================================
+
+// Input panel data variants selectable from the story controls.
+const INPUT_DATA = {
+  'schema-and-value': { schema: INPUT_SCHEMA, initialValue: INPUT_VALUE },
+  'schema-only': { schema: INPUT_SCHEMA, initialValue: undefined },
+  'value-only': { schema: undefined, initialValue: INPUT_VALUE },
+} as const;
+
+interface StoryArgs {
+  showExtractionTab: boolean;
+  readOnly: boolean;
+  inputData: keyof typeof INPUT_DATA;
+}
+
+const meta: Meta<StoryArgs> = {
+  // Storybook splits titles on '/', so the leaf must not contain one (quotes
+  // don't escape it) — "Node IO" instead of "Node I/O".
+  title: 'Components/Panels/Node IO',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+\`NodeIOView\` is the composed node input/output panel body used in the flow
+builder: a schema-aware value tree with Schema / JSON tabs, inline editing,
+custom value cells, and consumer-provided extra tabs. It is a panel *body*,
+composed inside \`NodePropertyPanel\`, which owns the chrome.
+
+This story pieces together the three panels a user sees while working a
+**Document Extraction** node (**Input**, **Properties**, **Output**) to show
+how they read as a set. Input is driven by upstream execution data; Properties
+is a standard \`MetadataForm\` (with a file field); Output is a believable
+extraction result with an optional custom **Extraction** table tab (toggle it
+with the control below). Switch the Output mode to **Static** to edit the
+mocked output inline.
+
+File rows (e.g. the source **document**) surface their affordances as custom
+**row actions** via \`nodeActions\`: **Upload** is always offered, while
+**Preview** and **Delete** appear only once a file is present — with the
+built-in copy/wrap actions omitted for those rows. Preview opens a banner atop
+the panel; Upload mock-populates a file.
+
+Use the controls to force read-only mode or swap the Input panel's data:
+schema only renders every row as unset, value only drops the schema. The
+Input toolbar's filter narrows the tree to fields referenced by this node.
+
+The three panels sit in a resizable split: drag a handle between them to grow
+one panel and shrink its neighbor, testing how the tree rows behave at
+different widths (truncation, action-button visibility).
+        `,
+      },
+    },
+  },
+  args: {
+    showExtractionTab: true,
+    readOnly: false,
+    inputData: 'schema-and-value',
+  },
+  argTypes: {
+    showExtractionTab: {
+      control: 'boolean',
+      description: 'Show the custom Extraction table tab on the Output panel.',
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Force the Input and Output panels read-only.',
+    },
+    inputData: {
+      control: 'select',
+      options: Object.keys(INPUT_DATA),
+      description:
+        'Input panel data: schema and value, schema only (all rows unset), or value only (no schema).',
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+export const DocumentExtraction: Story = {
+  name: 'Document Extraction (Input / Properties / Output)',
+  render: (args) => (
+    <div className="flex min-h-screen items-start justify-center p-10">
+      {/* ResizablePanelGroup sets an inline height:100%, so the panels' fixed
+          height comes from this wrapper's definite height (a height class on
+          the group itself would lose to that inline style). */}
+      <div className="h-155 w-full max-w-350">
+        {/* Split-pane docked panels: drag a handle to grow one panel and shrink
+            its neighbor in tandem, exercising the width-sensitive tree layout. */}
+        <ResizablePanelGroup
+          orientation="horizontal"
+          className="overflow-hidden rounded-2xl border border-border-subtle shadow-lg"
+        >
+          <ResizablePanel defaultSize="33%" minSize="15%">
+            {/* Keyed so switching the data variant remounts with fresh edit state. */}
+            <InputPanel
+              key={args.inputData}
+              readOnly={args.readOnly}
+              {...INPUT_DATA[args.inputData]}
+            />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize="34%" minSize="15%">
+            <PropertiesPanel />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize="33%" minSize="15%">
+            <OutputPanel showExtractionTab={args.showExtractionTab} readOnly={args.readOnly} />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.test.tsx b/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.test.tsx
new file mode 100644
index 000000000..3bd3e194e
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.test.tsx
@@ -0,0 +1,849 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen, userEvent } from '../../utils/testing';
+import type { JsonSchema, JsonTreeChange, JsonValue } from '../JsonTree';
+import { NodeIOView } from './NodeIOView';
+
+const SCHEMA: JsonSchema = {
+  type: 'object',
+  properties: {
+    statusCode: { type: 'integer' },
+    responseBody: {
+      type: 'object',
+      properties: {
+        currency: { type: 'string', enum: ['USD', 'EUR'] },
+      },
+    },
+    cached: { type: 'boolean' },
+    errorMessage: { type: ['string', 'null'] },
+  },
+};
+
+const VALUE: JsonValue = {
+  statusCode: 200,
+  responseBody: { currency: 'USD' },
+  cached: false,
+  debugInfo: { attempt: 1 },
+};
+
+const UNSET_FILTERS = [
+  {
+    id: 'unset',
+    label: 'Unset fields',
+    predicate: (node: { value?: JsonValue }) => node.value === undefined,
+  },
+];
+
+describe('NodeIOView', () => {
+  it('renders schema-declared and value-only keys', () => {
+    render(<NodeIOView schema={SCHEMA} value={VALUE} />);
+    expect(screen.getByText('statusCode')).toBeInTheDocument();
+    expect(screen.getByText('responseBody')).toBeInTheDocument();
+    expect(screen.getByText('debugInfo')).toBeInTheDocument();
+  });
+
+  it('marks keys missing from the value as unset', () => {
+    // "unset" placeholders are an editing affordance, so the tree must be
+    // editable to show them (read-only hides them).
+    render(<NodeIOView schema={SCHEMA} value={VALUE} onValueChange={vi.fn()} />);
+    // errorMessage is declared by the schema but absent from the value.
+    expect(screen.getByText('errorMessage')).toBeInTheDocument();
+    expect(screen.getByText('unset')).toBeInTheDocument();
+  });
+
+  it('renders a fully schema-driven tree when no value is given', () => {
+    render(<NodeIOView schema={SCHEMA} onValueChange={vi.fn()} />);
+    expect(screen.getByText('statusCode')).toBeInTheDocument();
+    expect(screen.getAllByText('unset').length).toBeGreaterThanOrEqual(3);
+  });
+
+  it('groups the key count with the container name', () => {
+    render(<NodeIOView schema={SCHEMA} value={VALUE} />);
+    const key = screen.getByRole('button', {
+      name: 'Copy path for responseBody',
+    });
+    // The count is the immediate sibling of the key, not pushed to the far edge.
+    expect(key.nextElementSibling?.textContent).toBe('1 key');
+  });
+
+  it('hides a container count when decoration.hideCount is set', () => {
+    render(
+      <NodeIOView
+        value={{ big: { a: 1, b: 2, c: 3 }, small: { a: 1 } }}
+        decorateNode={(node) => (node.path === 'big' ? { hideCount: true } : undefined)}
+      />
+    );
+    // big's count is suppressed; the undecorated small container keeps its own.
+    expect(screen.queryByText('3 keys')).not.toBeInTheDocument();
+    expect(screen.getByText('1 key')).toBeInTheDocument();
+  });
+
+  it('renders the title bar when a title is given', () => {
+    render(<NodeIOView title="HTTP Request" titleBadge="httpRequest1" value={{}} />);
+    expect(screen.getByText('HTTP Request')).toBeInTheDocument();
+    expect(screen.getByText('httpRequest1')).toBeInTheDocument();
+  });
+
+  it('collapses a container when a non-interactive part of its row is clicked', async () => {
+    render(<NodeIOView schema={SCHEMA} value={VALUE} />);
+    expect(screen.getByText('currency')).toBeInTheDocument();
+    // The key count is a plain span, not a control, so a click there toggles.
+    const count = screen.getByRole('button', {
+      name: 'Copy path for responseBody',
+    }).nextElementSibling as HTMLElement;
+    await userEvent.click(count);
+    expect(screen.queryByText('currency')).not.toBeInTheDocument();
+  });
+
+  it('copies the path when the field name is clicked', async () => {
+    const onCopy = vi.fn();
+    render(<NodeIOView schema={SCHEMA} value={VALUE} onCopy={onCopy} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Copy path for statusCode' }));
+    expect(onCopy).toHaveBeenCalledWith({
+      kind: 'path',
+      path: 'statusCode',
+      text: 'statusCode',
+    });
+  });
+
+  it('confirms a path copy with an inline indicator', async () => {
+    render(<NodeIOView schema={SCHEMA} value={VALUE} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Copy path for statusCode' }));
+    // A tooltip would be dismissed by the click itself, so the confirmation
+    // rides on an inline indicator next to the key instead.
+    expect(await screen.findByRole('img', { name: 'Path copied' })).toBeInTheDocument();
+  });
+
+  it('copies the value from the row action', async () => {
+    const onCopy = vi.fn();
+    render(<NodeIOView schema={SCHEMA} value={VALUE} onCopy={onCopy} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Copy value of statusCode' }));
+    expect(onCopy).toHaveBeenCalledWith({
+      kind: 'value',
+      path: 'statusCode',
+      text: '200',
+    });
+  });
+
+  it('offers no copy-value action on unset nodes', () => {
+    render(<NodeIOView schema={SCHEMA} value={VALUE} />);
+    expect(
+      screen.queryByRole('button', { name: 'Copy value of errorMessage' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('commits an enum edit and reports the full updated value', async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={{ responseBody: { currency: 'USD' } }}
+        onValueChange={onValueChange}
+      />
+    );
+    // currency is an enum: it edits through a dropdown.
+    await userEvent.click(screen.getByRole('button', { name: 'Edit value of currency' }));
+    await userEvent.click(screen.getByRole('menuitem', { name: '"EUR"' }));
+    const [next, change] = onValueChange.mock.calls[0] as [JsonValue, JsonTreeChange];
+    expect(next).toEqual({ responseBody: { currency: 'EUR' } });
+    expect(change.path).toBe('responseBody.currency');
+  });
+
+  it('edits numbers through the inline editor', async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NodeIOView schema={SCHEMA} value={{ statusCode: 200 }} onValueChange={onValueChange} />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Edit value of statusCode' }));
+    const input = screen.getByRole('textbox', {
+      name: 'Edit value of statusCode',
+    });
+    fireEvent.change(input, { target: { value: '404' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    const [next] = onValueChange.mock.calls[0] as [JsonValue];
+    expect(next).toEqual({ statusCode: 404 });
+  });
+
+  it('rejects a fractional value for an integer field', async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NodeIOView schema={SCHEMA} value={{ statusCode: 200 }} onValueChange={onValueChange} />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Edit value of statusCode' }));
+    const input = screen.getByRole('textbox', { name: 'Edit value of statusCode' });
+    fireEvent.change(input, { target: { value: '4.5' } });
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it('rejects a non-finite number (would serialize as null)', async () => {
+    const onValueChange = vi.fn();
+    const schema: JsonSchema = { type: 'object', properties: { amount: { type: 'number' } } };
+    render(<NodeIOView schema={schema} value={{ amount: 10 }} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Edit value of amount' }));
+    const input = screen.getByRole('textbox', { name: 'Edit value of amount' });
+    fireEvent.change(input, { target: { value: 'Infinity' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it('toggles booleans on a single click', async () => {
+    const onValueChange = vi.fn();
+    render(<NodeIOView schema={SCHEMA} value={{ cached: false }} onValueChange={onValueChange} />);
+    // No dropdown: clicking the value commits the opposite boolean directly.
+    await userEvent.click(screen.getByRole('button', { name: 'Edit value of cached' }));
+    expect(screen.queryByRole('menuitem')).not.toBeInTheDocument();
+    const [next] = onValueChange.mock.calls[0] as [JsonValue];
+    expect(next).toEqual({ cached: true });
+  });
+
+  it('toggles an unset boolean to true on first click', async () => {
+    const onValueChange = vi.fn();
+    render(<NodeIOView schema={SCHEMA} value={{}} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Edit value of cached' }));
+    const [next] = onValueChange.mock.calls[0] as [JsonValue];
+    expect(next).toEqual({ cached: true });
+  });
+
+  it('sets a value on a schema-declared key that is absent from the value', async () => {
+    const onValueChange = vi.fn();
+    render(<NodeIOView schema={SCHEMA} value={{}} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Edit value of errorMessage' }));
+    const input = screen.getByRole('textbox', {
+      name: 'Edit value of errorMessage',
+    });
+    fireEvent.change(input, { target: { value: 'timeout' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    const [next] = onValueChange.mock.calls[0] as [JsonValue];
+    expect(next).toEqual({ errorMessage: 'timeout' });
+  });
+
+  it('wraps a scalar row and edits it with the multiline editor', async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={{ errorMessage: 'a very long message' }}
+        onValueChange={onValueChange}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Wrap value of errorMessage' }));
+    // Wrapped view: click the value block, then the multiline editor appears.
+    await userEvent.click(screen.getByRole('button', { name: 'Edit value of errorMessage' }));
+    const textarea = screen.getByRole('textbox', {
+      name: 'Edit value of errorMessage',
+    });
+    expect(textarea.tagName).toBe('TEXTAREA');
+    fireEvent.change(textarea, { target: { value: 'line one\nline two' } });
+    await userEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    const [next] = onValueChange.mock.calls[0] as [JsonValue];
+    expect(next).toEqual({ errorMessage: 'line one\nline two' });
+    expect(
+      screen.getByRole('button', { name: 'Unwrap value of errorMessage' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders wrapped multiline strings raw, with real line breaks', async () => {
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={{ errorMessage: 'line one\nline two' }}
+        onValueChange={vi.fn()}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Wrap value of errorMessage' }));
+    const display = screen.getByRole('button', {
+      name: 'Edit value of errorMessage',
+    });
+    // Raw string, matching the multiline editor: no quotes, no \n escapes.
+    expect(display.textContent).toBe('line one\nline two');
+  });
+
+  it('offers no wrap action for booleans and enums', () => {
+    render(<NodeIOView schema={SCHEMA} value={VALUE} onValueChange={vi.fn()} />);
+    expect(screen.queryByRole('button', { name: 'Wrap value of cached' })).not.toBeInTheDocument();
+  });
+
+  it('derives custom type-badge icons per node', () => {
+    render(
+      <NodeIOView
+        schema={{
+          type: 'object',
+          properties: {
+            doc: { type: 'object', format: 'file', properties: {} },
+          },
+        }}
+        value={{ doc: {} }}
+        deriveTypeIcon={(node) =>
+          node.schema?.format === 'file' ? <span data-testid="file-badge-icon" /> : undefined
+        }
+      />
+    );
+    expect(screen.getByTestId('file-badge-icon')).toBeInTheDocument();
+  });
+
+  it('edits containers as JSON', async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={{ responseBody: { currency: 'USD' } }}
+        onValueChange={onValueChange}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Edit responseBody as JSON' }));
+    const textarea = screen.getByRole('textbox', {
+      name: 'Edit JSON of responseBody',
+    });
+    fireEvent.change(textarea, {
+      target: { value: '{"currency": "EUR", "total": 10}' },
+    });
+    await userEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    const [next] = onValueChange.mock.calls[0] as [JsonValue];
+    expect(next).toEqual({ responseBody: { currency: 'EUR', total: 10 } });
+  });
+
+  it('rejects invalid JSON in the container editor', async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NodeIOView schema={SCHEMA} value={{ responseBody: {} }} onValueChange={onValueChange} />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Edit responseBody as JSON' }));
+    const textarea = screen.getByRole('textbox', {
+      name: 'Edit JSON of responseBody',
+    });
+    fireEvent.change(textarea, { target: { value: '{not json' } });
+    await userEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(textarea).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('renders a custom value cell through renderValue', async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NodeIOView
+        schema={{
+          type: 'object',
+          properties: {
+            doc: { type: 'object', format: 'file', properties: {} },
+          },
+        }}
+        value={{ doc: { FullName: 'a.pdf' } }}
+        onValueChange={onValueChange}
+        renderValue={(node, ctx) =>
+          node.schema?.format === 'file' ? (
+            <button type="button" onClick={() => ctx.commit({ FullName: 'b.pdf' })}>
+              pick file
+            </button>
+          ) : undefined
+        }
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'pick file' }));
+    const [next] = onValueChange.mock.calls[0] as [JsonValue];
+    expect(next).toEqual({ doc: { FullName: 'b.pdf' } });
+  });
+
+  it('shows no editing affordances when readOnly', () => {
+    render(<NodeIOView schema={SCHEMA} value={VALUE} readOnly onValueChange={vi.fn()} />);
+    expect(
+      screen.queryByRole('button', { name: 'Edit value of statusCode' })
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Edit value of cached' })).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Edit responseBody as JSON' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders a serialized JSON fallback in the JSON tab', async () => {
+    render(<NodeIOView schema={SCHEMA} value={{ statusCode: 200 }} />);
+    await userEvent.click(screen.getByRole('tab', { name: 'JSON' }));
+    expect(screen.getByText(/"statusCode": 200/)).toBeInTheDocument();
+  });
+
+  it('hides the filter control unless filters are provided', () => {
+    render(<NodeIOView schema={SCHEMA} value={VALUE} />);
+    expect(screen.queryByRole('button', { name: /Filter/ })).not.toBeInTheDocument();
+  });
+
+  it('applies a consumer-provided filter', async () => {
+    render(<NodeIOView schema={SCHEMA} value={VALUE} filters={UNSET_FILTERS} />);
+    await userEvent.click(screen.getByRole('button', { name: /Filter/ }));
+    await userEvent.click(screen.getByRole('menuitemradio', { name: /Unset fields/ }));
+    expect(screen.queryByText('statusCode')).not.toBeInTheDocument();
+    // errorMessage is declared by the schema but absent from the value.
+    expect(screen.getByText('errorMessage')).toBeInTheDocument();
+  });
+
+  it('searches keys and values', async () => {
+    render(<NodeIOView schema={SCHEMA} value={VALUE} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Search fields and values' }));
+    await userEvent.type(
+      screen.getByRole('textbox', { name: 'Search fields and values...' }),
+      'currency'
+    );
+    expect(screen.getByText('currency')).toBeInTheDocument();
+    expect(screen.queryByText('statusCode')).not.toBeInTheDocument();
+  });
+
+  it('renders decoration label and sublabel while keeping the raw key for paths', () => {
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        decorateNode={(node) =>
+          node.path === 'responseBody'
+            ? {
+                label: 'Response Body',
+                sublabel: 'responseBody',
+              }
+            : undefined
+        }
+      />
+    );
+    const keyButton = screen.getByRole('button', {
+      name: 'Copy path for responseBody',
+    });
+    expect(keyButton).toHaveTextContent('Response Body');
+    expect(screen.getByText('responseBody')).toBeInTheDocument();
+  });
+
+  it('matches decoration labels and sublabels in search', async () => {
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        decorateNode={(node) =>
+          node.path === 'responseBody' ? { label: 'Http Response' } : undefined
+        }
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Search fields and values' }));
+    await userEvent.type(
+      screen.getByRole('textbox', { name: 'Search fields and values...' }),
+      'Http Resp'
+    );
+    expect(screen.getByText('Http Response')).toBeInTheDocument();
+    expect(screen.queryByText('statusCode')).not.toBeInTheDocument();
+  });
+
+  it('overrides the type badge icon and color through decoration.badge', () => {
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        deriveTypeIcon={() => <svg data-testid="derived-icon" />}
+        decorateNode={(node) =>
+          node.path === 'responseBody'
+            ? {
+                badge: {
+                  icon: <svg data-testid="badge-icon" />,
+                  className: 'text-info',
+                },
+              }
+            : undefined
+        }
+      />
+    );
+    // decoration.badge.icon wins over deriveTypeIcon for the decorated row only.
+    const badgeIcon = screen.getByTestId('badge-icon');
+    expect(badgeIcon.parentElement).toHaveClass('text-info');
+    expect(screen.getAllByTestId('derived-icon').length).toBeGreaterThan(0);
+  });
+
+  it('renders icon-only decoration chips with an accessible tooltip', () => {
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        decorateNode={(node) =>
+          node.path === 'statusCode'
+            ? {
+                chip: {
+                  icon: <svg data-testid="chip-icon" />,
+                  tooltip: 'Node output is mocked',
+                },
+              }
+            : undefined
+        }
+      />
+    );
+    expect(screen.getByTestId('chip-icon')).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'Node output is mocked' })).toBeInTheDocument();
+  });
+
+  it('works without a schema: value-driven tree', () => {
+    render(<NodeIOView value={{ anything: 1 }} />);
+    expect(screen.getByText('anything')).toBeInTheDocument();
+  });
+
+  it('marks schema-required keys with a required indicator', () => {
+    render(
+      <NodeIOView
+        schema={{
+          type: 'object',
+          required: ['statusCode'],
+          properties: {
+            statusCode: { type: 'integer' },
+            cached: { type: 'boolean' },
+          },
+        }}
+        value={{ statusCode: 200, cached: false }}
+      />
+    );
+    expect(screen.getByText('required')).toBeInTheDocument();
+  });
+
+  it('prefixes paths with basePath in copied paths', async () => {
+    const onCopy = vi.fn();
+    render(<NodeIOView schema={SCHEMA} value={VALUE} basePath="httpRequest1" onCopy={onCopy} />);
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'Copy path for httpRequest1.statusCode',
+      })
+    );
+    expect(onCopy).toHaveBeenCalledWith({
+      kind: 'path',
+      path: 'httpRequest1.statusCode',
+      text: 'httpRequest1.statusCode',
+    });
+  });
+
+  it('edits values at their real position regardless of basePath', async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={{ statusCode: 200 }}
+        basePath="httpRequest1"
+        onValueChange={onValueChange}
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Edit value of statusCode' }));
+    const input = screen.getByRole('textbox', {
+      name: 'Edit value of statusCode',
+    });
+    fireEvent.change(input, { target: { value: '500' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    const [next, change] = onValueChange.mock.calls[0] as [JsonValue, JsonTreeChange];
+    expect(next).toEqual({ statusCode: 500 });
+    expect(change.path).toBe('httpRequest1.statusCode');
+    expect(change.segments).toEqual(['statusCode']);
+  });
+
+  it('removes a value through the renderValue clear context', async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NodeIOView
+        schema={{
+          type: 'object',
+          properties: {
+            doc: { type: 'object', format: 'file', properties: {} },
+          },
+        }}
+        value={{ doc: { FullName: 'a.pdf' }, other: 1 }}
+        onValueChange={onValueChange}
+        renderValue={(node, ctx) =>
+          node.schema?.format === 'file' ? (
+            <button type="button" onClick={() => ctx.clear()}>
+              remove file
+            </button>
+          ) : undefined
+        }
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'remove file' }));
+    const [next, change] = onValueChange.mock.calls[0] as [JsonValue, JsonTreeChange];
+    expect(next).toEqual({ other: 1 });
+    expect(change.value).toBeUndefined();
+    expect(change.previous).toEqual({ FullName: 'a.pdf' });
+  });
+
+  it('renders extra tabs and switches to their content', async () => {
+    const onTabChange = vi.fn();
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        onTabChange={onTabChange}
+        extraTabs={[
+          {
+            id: 'results',
+            label: 'Results',
+            content: <div>custom results view</div>,
+          },
+        ]}
+      />
+    );
+    // With extra tabs present the switcher collapses from pills to a dropdown.
+    await userEvent.click(screen.getByRole('button', { name: /View:/ }));
+    await userEvent.click(screen.getByRole('menuitemradio', { name: 'Results' }));
+    expect(screen.getByText('custom results view')).toBeInTheDocument();
+    expect(onTabChange).toHaveBeenCalledWith('results');
+  });
+
+  it('opens on defaultTab and falls back to Schema when the tab disappears', async () => {
+    const { rerender } = render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        defaultTab="results"
+        extraTabs={[
+          {
+            id: 'results',
+            label: 'Results',
+            content: <div>custom results view</div>,
+          },
+        ]}
+      />
+    );
+    expect(screen.getByText('custom results view')).toBeInTheDocument();
+    // The node type changed and no longer resolves the custom tab.
+    rerender(<NodeIOView schema={SCHEMA} value={VALUE} defaultTab="results" />);
+    expect(screen.getByRole('tab', { name: 'Schema' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('renders content between the tab strip and the tab body', () => {
+    render(<NodeIOView schema={SCHEMA} value={VALUE} beforeContent={<div>instruction box</div>} />);
+    expect(screen.getByText('instruction box')).toBeInTheDocument();
+  });
+
+  it('wraps rows with a custom rowWrapper', () => {
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        rowWrapper={({ node, className, style, children }) => (
+          <div data-testid={`row-${node.path}`} className={className} style={style}>
+            {children}
+          </div>
+        )}
+      />
+    );
+    expect(screen.getByTestId('row-statusCode')).toBeInTheDocument();
+    // The wrapper carries the row layout class so it IS the row element.
+    expect(screen.getByTestId('row-statusCode').className).toContain('group');
+  });
+
+  it('shows the consumer-provided empty message when there are no fields', () => {
+    render(<NodeIOView value={{}} emptyMessage="Nothing captured yet." />);
+    expect(screen.getByText('Nothing captured yet.')).toBeInTheDocument();
+  });
+
+  it('wraps copied paths through pathForCopy', async () => {
+    const onCopy = vi.fn();
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        onCopy={onCopy}
+        pathForCopy={(path) => `{{${path}}}`}
+      />
+    );
+    // The copy affordance surfaces the wrapped path (what actually gets copied),
+    // not the raw tree path.
+    await userEvent.click(screen.getByRole('button', { name: 'Copy path for {{statusCode}}' }));
+    expect(onCopy).toHaveBeenCalledWith({
+      kind: 'path',
+      path: 'statusCode',
+      text: '{{statusCode}}',
+    });
+  });
+
+  it('renders custom row actions alongside the defaults via ctx.defaultActions', async () => {
+    const onSelect = vi.fn();
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        onValueChange={vi.fn()}
+        nodeActions={(node, { defaultActions }) =>
+          node.path === 'statusCode'
+            ? [
+                {
+                  id: 'star',
+                  icon: <svg data-testid="star-icon" />,
+                  label: `Star ${node.key}`,
+                  onSelect,
+                },
+                ...defaultActions,
+              ]
+            : undefined
+        }
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Star statusCode' }));
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ path: 'statusCode' }));
+    // The built-in copy-value survives because the resolver spread defaultActions.
+    expect(screen.getByRole('button', { name: 'Copy value of statusCode' })).toBeInTheDocument();
+  });
+
+  it('keeps the default actions on rows the resolver returns undefined for', () => {
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        onValueChange={vi.fn()}
+        nodeActions={() => undefined}
+      />
+    );
+    // undefined everywhere == the pre-nodeActions behavior.
+    expect(screen.getByRole('button', { name: 'Copy value of statusCode' })).toBeInTheDocument();
+  });
+
+  it('omits all row actions for a node when the resolver returns an empty list', () => {
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        onValueChange={vi.fn()}
+        nodeActions={(node) => (node.path === 'statusCode' ? [] : undefined)}
+      />
+    );
+    expect(
+      screen.queryByRole('button', { name: 'Copy value of statusCode' })
+    ).not.toBeInTheDocument();
+    // Sibling rows still carry their defaults.
+    expect(screen.getByRole('button', { name: 'Copy value of cached' })).toBeInTheDocument();
+  });
+
+  it('commits a value through a custom action context', async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={{ statusCode: 200 }}
+        onValueChange={onValueChange}
+        nodeActions={(node, ctx) =>
+          node.path === 'statusCode'
+            ? [
+                {
+                  id: 'set',
+                  icon: <svg />,
+                  label: 'Set 500',
+                  onSelect: () => ctx.commit(500),
+                },
+              ]
+            : undefined
+        }
+      />
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Set 500' }));
+    const [next] = onValueChange.mock.calls[0] as [JsonValue];
+    expect(next).toEqual({ statusCode: 500 });
+  });
+
+  it('previews an array item shape from the schema when there is no value', () => {
+    render(
+      <NodeIOView
+        schema={{
+          type: 'object',
+          properties: {
+            rows: {
+              type: 'array',
+              items: {
+                type: 'object',
+                properties: { name: { type: 'string' }, count: { type: 'integer' } },
+              },
+            },
+          },
+        }}
+        onValueChange={vi.fn()}
+      />
+    );
+    // The array's item shape is visible even with no value: one "item" preview
+    // row expanding to the declared fields.
+    expect(screen.getByText('rows')).toBeInTheDocument();
+    expect(screen.getByText('item')).toBeInTheDocument();
+    expect(screen.getByText('name')).toBeInTheDocument();
+    expect(screen.getByText('count')).toBeInTheDocument();
+    // The preview is not a real element, so the array still reads "0 items".
+    expect(screen.getByText('0 items')).toBeInTheDocument();
+  });
+
+  it('leaves the preview item read-only in an editable tree', () => {
+    render(
+      <NodeIOView
+        schema={{
+          type: 'object',
+          properties: {
+            rows: {
+              type: 'array',
+              items: { type: 'object', properties: { name: { type: 'string' } } },
+            },
+          },
+        }}
+        onValueChange={vi.fn()}
+      />
+    );
+    // A preview field illustrates the shape; it is not settable like a real
+    // unset key, so it exposes no edit control (the field is still surfaced).
+    expect(screen.getByText('name')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Edit value of name' })).not.toBeInTheDocument();
+  });
+
+  it('previews the item shape for a present-but-empty array', () => {
+    render(
+      <NodeIOView
+        schema={{
+          type: 'object',
+          properties: { tags: { type: 'array', items: { type: 'string' } } },
+        }}
+        value={{ tags: [] }}
+        onValueChange={vi.fn()}
+      />
+    );
+    expect(screen.getByText('item')).toBeInTheDocument();
+    expect(screen.getByText('0 items')).toBeInTheDocument();
+  });
+
+  it('previews the item shape even when the tree is read-only', () => {
+    render(
+      <NodeIOView
+        schema={{
+          type: 'object',
+          properties: { tags: { type: 'array', items: { type: 'string' } } },
+        }}
+        readOnly
+      />
+    );
+    // Unlike a plain unset key (hidden when read-only), the preview always
+    // surfaces so the shape is discoverable.
+    expect(screen.getByText('item')).toBeInTheDocument();
+  });
+
+  it('shows real items instead of a preview once the array has a value', () => {
+    render(
+      <NodeIOView
+        schema={{
+          type: 'object',
+          properties: { tags: { type: 'array', items: { type: 'string' } } },
+        }}
+        value={{ tags: ['a', 'b'] }}
+      />
+    );
+    expect(screen.queryByText('item')).not.toBeInTheDocument();
+    expect(screen.getByText('2 items')).toBeInTheDocument();
+  });
+
+  it('collapses row actions beyond the inline cap into an overflow menu', async () => {
+    const mk = (n: number) => ({
+      id: `a${n}`,
+      icon: <svg />,
+      label: `Action ${n}`,
+      onSelect: vi.fn(),
+    });
+    render(
+      <NodeIOView
+        schema={SCHEMA}
+        value={VALUE}
+        nodeActions={(node) => (node.path === 'statusCode' ? [mk(1), mk(2), mk(3), mk(4)] : [])}
+      />
+    );
+    // Cap is 3: the first two stay inline, the rest move under "More actions".
+    expect(screen.getByRole('button', { name: 'Action 1' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Action 4' })).not.toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }));
+    expect(screen.getByRole('menuitem', { name: 'Action 4' })).toBeInTheDocument();
+  });
+});
diff --git a/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.tsx b/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.tsx
new file mode 100644
index 000000000..6f195fc20
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.tsx
@@ -0,0 +1,295 @@
+import {
+  Button,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@uipath/apollo-wind';
+import { ChevronDown } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useSafeLingui } from '../../../i18n';
+import {
+  buildJsonTree,
+  collectContainerPaths,
+  type JsonContainer,
+  JsonTree,
+  type JsonTreeNode,
+  JsonTreeToolbar,
+  type JsonValue,
+  removeValueAtPath,
+  setValueAtPath,
+} from '../JsonTree';
+import type { NodeIOViewProps } from './NodeIOView.types';
+import { PanelTitleBar } from './PanelTitleBar';
+
+// Matches the tab chrome TabbedStepForm uses inside MetadataForm so the panel
+// blends with schema-driven property panels.
+const TAB_LIST_CLASS =
+  'h-auto justify-start gap-0.5 rounded-lg bg-transparent p-0 text-muted-foreground';
+const TAB_TRIGGER_CLASS =
+  'inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-md px-2.5 text-xs font-medium text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:bg-surface-overlay data-[state=active]:text-foreground data-[state=active]:shadow-sm';
+
+/**
+ * NodeIOView renders a JSON value merged with its JSON Schema as an
+ * interactive tree, alongside a raw JSON view. It is domain-agnostic: any
+ * schema/value pair works (node inputs and outputs on a canvas are one use
+ * case, composed via `title`/`titleTrailing` and `extraTabs`).
+ *
+ * The structure comes from a JSON Schema and the data from a plain JSON value.
+ * Keys declared by the schema but absent from the value are still shown (as
+ * "unset", settable inline). Rows can be annotated through `decorateNode` and
+ * filtered through consumer-provided `filters`. All value types edit inline:
+ * strings, numbers, and nulls through a text editor, booleans and enums
+ * through a dropdown, objects and arrays through a JSON editor; custom cells
+ * (e.g. file pickers) plug in through `renderValue`.
+ *
+ * The component is a panel *body* with its own uniform padding: compose it
+ * inside `NodePropertyPanel` (or any docked host) which owns the chrome.
+ *
+ * @example
+ * ```tsx
+ * <NodePropertyPanel panelTitle="Output" onClose={deselect} contentInset="0.875rem">
+ *   <NodeIOView
+ *     title="HTTP Request"
+ *     titleBadge="httpRequest1"
+ *     titleTrailing={<NodeOutputModeSelect value={mode} onChange={setMode} />}
+ *     schema={outputSchema}
+ *     value={outputValue}
+ *     onValueChange={setOutputValue}
+ *   />
+ * </NodePropertyPanel>
+ * ```
+ */
+export function NodeIOView({
+  schema,
+  value,
+  onValueChange,
+  basePath,
+  readOnly = false,
+  title,
+  titleIcon,
+  titleBadge,
+  titleTrailing,
+  searchPlaceholder,
+  emptyMessage,
+  jsonView,
+  extraTabs,
+  defaultTab,
+  onTabChange,
+  beforeContent,
+  rowWrapper,
+  filters,
+  decorateNode,
+  deriveTypeIcon,
+  renderValue,
+  nodeActions,
+  maxInlineActions,
+  renderCodeEditor,
+  pathForCopy,
+  onCopy,
+  defaultCollapsedDepth = 2,
+  className,
+}: NodeIOViewProps) {
+  const { _ } = useSafeLingui();
+  const nodes = useMemo(
+    () => buildJsonTree({ schema, value, basePath }),
+    [schema, value, basePath]
+  );
+  const containerPaths = useMemo(() => collectContainerPaths(nodes), [nodes]);
+
+  const [query, setQuery] = useState('');
+  const [activeFilterId, setActiveFilterId] = useState<string | null>(null);
+  const activeFilter = filters?.find((f) => f.id === activeFilterId);
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>(() =>
+    Object.fromEntries(
+      containerPaths.filter((c) => c.depth >= defaultCollapsedDepth).map((c) => [c.path, true])
+    )
+  );
+
+  // Derived: fall back to Schema when the selected tab no longer resolves
+  // (e.g. the extra tabs changed with the node type). Without this, <Tabs>
+  // would have no matching content and the panel would render blank.
+  const [selectedTab, setSelectedTab] = useState(defaultTab ?? 'schema');
+  const activeTab = useMemo(() => {
+    const validIds = new Set(['schema', 'json', ...(extraTabs?.map((tab) => tab.id) ?? [])]);
+    return validIds.has(selectedTab) ? selectedTab : 'schema';
+  }, [selectedTab, extraTabs]);
+
+  const handleTabChange = (tabId: string) => {
+    setSelectedTab(tabId);
+    onTabChange?.(tabId);
+  };
+
+  const tabs = useMemo(
+    () => [
+      {
+        id: 'schema',
+        label: _({
+          id: 'canvas.json_value_panel.schema_tab',
+          message: 'Schema',
+        }),
+      },
+      {
+        id: 'json',
+        label: _({ id: 'canvas.json_value_panel.json_tab', message: 'JSON' }),
+      },
+      ...(extraTabs?.map((tab) => ({ id: tab.id, label: tab.label })) ?? []),
+    ],
+    [extraTabs, _]
+  );
+  // Extra tabs make a horizontal pill strip too wide for a properties dialog, so
+  // collapse to a labelled dropdown once any are present (mirrors flow-workbench).
+  const useTabDropdown = (extraTabs?.length ?? 0) > 0;
+  const activeTabLabel = tabs.find((tab) => tab.id === activeTab)?.label ?? tabs[0]!.label;
+
+  const tabSwitcher = useTabDropdown ? (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="3xs"
+          className="gap-1 px-2 text-foreground"
+          aria-label={_({
+            id: 'canvas.json_value_panel.view_switcher',
+            message: 'View: {label}',
+            values: { label: activeTabLabel },
+          })}
+        >
+          <span className="text-xs font-medium">{activeTabLabel}</span>
+          <ChevronDown size={13} className="text-foreground-subtle" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-44">
+        <DropdownMenuRadioGroup value={activeTab} onValueChange={handleTabChange}>
+          {tabs.map((tab) => (
+            <DropdownMenuRadioItem
+              key={tab.id}
+              value={tab.id}
+              className="cursor-pointer text-[11px] [&>span:first-child]:text-foreground-accent"
+            >
+              {tab.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ) : (
+    <TabsList className={TAB_LIST_CLASS}>
+      {tabs.map((tab) => (
+        <TabsTrigger key={tab.id} value={tab.id} className={TAB_TRIGGER_CLASS}>
+          {tab.label}
+        </TabsTrigger>
+      ))}
+    </TabsList>
+  );
+
+  const allCollapsed = containerPaths.length > 0 && containerPaths.every((c) => collapsed[c.path]);
+
+  const toggleCollapsed = (path: string) =>
+    setCollapsed((prev) => ({ ...prev, [path]: !prev[path] }));
+
+  const toggleAll = () => {
+    setCollapsed(allCollapsed ? {} : Object.fromEntries(containerPaths.map((c) => [c.path, true])));
+  };
+
+  const handleEdit = (node: JsonTreeNode, nodeValue: JsonValue | undefined) => {
+    const next =
+      nodeValue === undefined
+        ? removeValueAtPath(value, node.segments)
+        : setValueAtPath(value, node.segments, nodeValue);
+    // Editing a nested path preserves the root container shape, so the result
+    // is still an object/array (setValueAtPath/removeValueAtPath return the
+    // broad JsonValue type, hence the assertion).
+    onValueChange?.((next ?? {}) as JsonContainer, {
+      path: node.path,
+      segments: node.segments,
+      value: nodeValue,
+      previous: node.value,
+    });
+  };
+
+  return (
+    <div className={cn('flex h-full min-h-0 flex-col gap-4', className)}>
+      {title && (
+        <PanelTitleBar
+          icon={titleIcon}
+          title={title}
+          badge={titleBadge}
+          trailing={titleTrailing}
+          className="shrink-0"
+        />
+      )}
+
+      {beforeContent && <div className="shrink-0">{beforeContent}</div>}
+
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex min-h-0 flex-1 flex-col gap-2"
+      >
+        <JsonTreeToolbar
+          query={query}
+          onQueryChange={setQuery}
+          searchPlaceholder={searchPlaceholder}
+          filters={filters}
+          activeFilterId={activeFilterId}
+          onFilterChange={setActiveFilterId}
+          allCollapsed={allCollapsed}
+          onToggleAll={containerPaths.length > 0 ? toggleAll : undefined}
+          leading={tabSwitcher}
+          // Search / filter / collapse act on the schema tree only.
+          controlsHidden={activeTab !== 'schema'}
+          className="shrink-0"
+        />
+
+        <TabsContent value="schema" className="mt-0 flex min-h-0 flex-1 flex-col">
+          <div className="min-h-0 flex-1 overflow-hidden rounded-xl border border-surface-overlay bg-surface-overlay/40">
+            <JsonTree
+              nodes={nodes}
+              collapsed={collapsed}
+              onToggleCollapsed={toggleCollapsed}
+              query={query}
+              filterPredicate={activeFilter?.predicate}
+              readOnly={readOnly || !onValueChange}
+              onEdit={handleEdit}
+              rowWrapper={rowWrapper}
+              decorateNode={decorateNode}
+              deriveTypeIcon={deriveTypeIcon}
+              renderValue={renderValue}
+              nodeActions={nodeActions}
+              maxInlineActions={maxInlineActions}
+              renderCodeEditor={renderCodeEditor}
+              pathForCopy={pathForCopy}
+              onCopy={onCopy}
+              // JsonTree shows its own "no match" text while a search or
+              // filter is active; this only covers the genuinely-empty case.
+              emptyMessage={emptyMessage}
+            />
+          </div>
+        </TabsContent>
+
+        <TabsContent value="json" className="mt-0 flex min-h-0 flex-1 flex-col">
+          <div className="min-h-0 flex-1 overflow-hidden rounded-xl border border-surface-overlay bg-surface-overlay/40">
+            {jsonView ?? (
+              <pre className="h-full overflow-auto p-3 font-mono text-xs leading-4.5 text-foreground">
+                {JSON.stringify(value ?? null, null, 2)}
+              </pre>
+            )}
+          </div>
+        </TabsContent>
+
+        {extraTabs?.map((tab) => (
+          <TabsContent key={tab.id} value={tab.id} className="mt-0 flex min-h-0 flex-1 flex-col">
+            {tab.content}
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.types.ts b/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.types.ts
new file mode 100644
index 000000000..c49f11402
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/NodeIOView/NodeIOView.types.ts
@@ -0,0 +1,105 @@
+import type { ReactNode } from 'react';
+import type {
+  CopyEvent,
+  DeriveTypeIcon,
+  JsonContainer,
+  JsonSchema,
+  JsonTreeChange,
+  JsonTreeFilterOption,
+  JsonTreeNode,
+  JsonTreeRowWrapper,
+  NodeActionsResolver,
+  NodeDecoration,
+  RenderCodeEditor,
+  RenderValueCell,
+} from '../JsonTree/JsonTree.types';
+
+/** A consumer-provided tab rendered after the built-in Schema and JSON tabs. */
+export interface NodeIOViewTab {
+  /** Stable tab id. Must not collide with the built-in `schema` / `json`. */
+  id: string;
+  /** Label shown on the tab trigger. */
+  label: string;
+  /** Tab body. Rendered inside the panel's tab content area. */
+  content: ReactNode;
+}
+
+export interface NodeIOViewProps {
+  /** JSON Schema describing the expected structure. Optional: without it the tree is value-driven and no schema statuses are reported. */
+  schema?: JsonSchema;
+  /** The JSON value to display and edit. Must be an object or array (the panel renders a container's fields). */
+  value?: JsonContainer;
+  /** Called with the full updated value after an inline edit, plus the specific change. */
+  onValueChange?: (next: JsonContainer, change: JsonTreeChange) => void;
+  /**
+   * Prefix prepended to every tree path (e.g. a domain-object id, so paths
+   * read `httpRequest1.statusCode`). Affects displayed paths, copied paths,
+   * and `JsonTreeChange.path` — but not `JsonTreeChange.segments`, which stay
+   * relative to `value`.
+   */
+  basePath?: string;
+  /** Hides all editing affordances. */
+  readOnly?: boolean;
+  /** Title in the panel's title bar. Omit to hide the bar. */
+  title?: string;
+  /** Optional icon rendered before the title. */
+  titleIcon?: ReactNode;
+  /** Technical identifier rendered in monospace next to the title (e.g. a node id). */
+  titleBadge?: string;
+  /** Right-aligned slot in the title bar (e.g. a `NodeOutputModeSelect`). */
+  titleTrailing?: ReactNode;
+  /** Placeholder (and aria-label) for the tree search input. Defaults to a generic message. */
+  searchPlaceholder?: string;
+  /** Shown when the tree has no rows and no search/filter is active. Defaults to a generic message. */
+  emptyMessage?: string;
+  /** Custom JSON tab content (e.g. a Monaco editor). Defaults to a read-only serialized view. */
+  jsonView?: ReactNode;
+  /**
+   * Consumer tabs rendered after Schema and JSON (e.g. a document-extraction
+   * results view in a node properties panel).
+   */
+  extraTabs?: NodeIOViewTab[];
+  /** Initially selected tab id. Defaults to `schema`. */
+  defaultTab?: string;
+  /** Called when the user switches tabs (e.g. for telemetry). */
+  onTabChange?: (tabId: string) => void;
+  /**
+   * Rendered between the tab strip and the tab content, visible on every tab
+   * (e.g. a simulation-instruction editor while the node is in a mocked mode).
+   */
+  beforeContent?: ReactNode;
+  /**
+   * Custom row container for the value tree (e.g. to make rows drag sources).
+   * Must be a stable component reference (module scope or memoized), not an
+   * inline arrow.
+   */
+  rowWrapper?: JsonTreeRowWrapper;
+  /** Toolbar filter options. Omit to hide the filter control. */
+  filters?: JsonTreeFilterOption[];
+  /** Per-node visual annotations (labels, chips, badge overrides). None by default. */
+  decorateNode?: (node: JsonTreeNode) => NodeDecoration | undefined;
+  /** Custom type-badge icons per node. Return undefined to keep the default type icon. */
+  deriveTypeIcon?: DeriveTypeIcon;
+  /** Custom value cell renderer (e.g. a file picker for `format: 'file'` nodes). */
+  renderValue?: RenderValueCell;
+  /**
+   * Customizes the trailing row actions per node: compose with the built-ins
+   * via `ctx.defaultActions`, return `[]` to omit them (e.g. per-node), or
+   * `undefined` to keep the defaults.
+   */
+  nodeActions?: NodeActionsResolver;
+  /** Max row actions shown inline before the surplus collapses into a menu. Default 3. */
+  maxInlineActions?: number;
+  /** Renders the object/array editing surface as a code editor (defaults to a textarea). */
+  renderCodeEditor?: RenderCodeEditor;
+  /**
+   * Builds the text copied when a field name is clicked. Defaults to the path
+   * itself; consumers with an expression syntax can wrap it (e.g. `{{path}}`).
+   */
+  pathForCopy?: (path: string) => string;
+  /** Called after something is copied to the clipboard. */
+  onCopy?: (event: CopyEvent) => void;
+  /** Containers at depth >= this start collapsed. Default 2 (top two levels open). */
+  defaultCollapsedDepth?: number;
+  className?: string;
+}
diff --git a/packages/apollo-react/src/canvas/components/NodeIOView/PanelTitleBar.tsx b/packages/apollo-react/src/canvas/components/NodeIOView/PanelTitleBar.tsx
new file mode 100644
index 000000000..488c85e98
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/NodeIOView/PanelTitleBar.tsx
@@ -0,0 +1,39 @@
+import { cn } from '@uipath/apollo-wind';
+import type { ReactNode } from 'react';
+import { CanvasTooltip } from '../CanvasTooltip';
+
+export interface PanelTitleBarProps {
+  /** Small icon rendered before the title (sized by the caller, ~13px works well). */
+  icon?: ReactNode;
+  /** Display title. */
+  title: string;
+  /** Technical identifier (e.g. a node id), rendered in monospace next to the title. */
+  badge?: string;
+  /** Right-aligned slot (e.g. a `NodeOutputModeSelect`). */
+  trailing?: ReactNode;
+  className?: string;
+}
+
+/** Compact one-line panel title row: icon, title, monospace badge, and a trailing slot. */
+export function PanelTitleBar({ icon, title, badge, trailing, className }: PanelTitleBarProps) {
+  return (
+    <div className={cn('flex items-center justify-between gap-2', className)}>
+      <div className="flex min-w-0 items-center gap-2">
+        {icon && (
+          <span className="shrink-0 text-foreground-subtle [&>svg]:size-[13px]">{icon}</span>
+        )}
+        <CanvasTooltip smartTooltip delay placement="bottom" content={title}>
+          <span className="truncate text-xs font-medium text-foreground">{title}</span>
+        </CanvasTooltip>
+        {badge && (
+          <CanvasTooltip smartTooltip delay placement="bottom" content={badge}>
+            <span className="min-w-0 truncate font-mono text-[10px] text-foreground-muted">
+              {badge}
+            </span>
+          </CanvasTooltip>
+        )}
+      </div>
+      {trailing && <div className="shrink-0">{trailing}</div>}
+    </div>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/components/NodeIOView/index.ts b/packages/apollo-react/src/canvas/components/NodeIOView/index.ts
new file mode 100644
index 000000000..395c48203
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/NodeIOView/index.ts
@@ -0,0 +1,3 @@
+export * from './NodeIOView';
+export * from './NodeIOView.types';
+export * from './PanelTitleBar';
diff --git a/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx b/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
index f706ce52a..b31028287 100644
--- a/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
+++ b/packages/apollo-react/src/canvas/components/NodePropertyPanel/NodePropertyPanel.stories.tsx
@@ -10,7 +10,6 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Input,
   MetadataForm,
   ScrollableTabsList,
   Switch,
@@ -29,27 +28,20 @@ import {
 } from '@uipath/apollo-wind/editor-themes';
 import {
   ChevronDown,
-  ChevronsDownUp,
-  ChevronsUpDown,
   CircleAlert,
   CircleCheck,
-  CircleDot,
-  CircleOff,
   Code2,
-  Copy,
   GitFork,
   Globe,
   GripVertical,
   Play,
   Plus,
-  Search,
-  FileBracesCorner,
   Sparkles,
   Type,
   X,
 } from 'lucide-react';
 import type { CSSProperties, ReactNode } from 'react';
-import { Suspense, lazy, useEffect, useRef, useState } from 'react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 import { NodePropertyPanel } from './NodePropertyPanel';
 
 // @monaco-editor/react uses a CJS build without an `exports` field, which
@@ -622,32 +614,6 @@ const COMPACT_EDITOR_OPTIONS = {
   automaticLayout: true,
 } as const;
 
-const JSON_VIEWER_OPTIONS = {
-  readOnly: true,
-  fontSize: 12,
-  lineHeight: 18,
-  minimap: { enabled: false },
-  scrollBeyondLastLine: false,
-  wordWrap: 'off',
-  fontFamily:
-    'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
-  padding: { top: 8, bottom: 8 },
-  lineNumbers: 'off' as const,
-  lineDecorationsWidth: 0,
-  glyphMargin: false,
-  folding: true,
-  renderLineHighlight: 'none' as const,
-  hideCursorInOverviewRuler: true,
-  overviewRulerBorder: false,
-  overviewRulerLanes: 0,
-  scrollbar: {
-    vertical: 'auto' as const,
-    horizontal: 'auto' as const,
-    alwaysConsumeMouseWheel: false,
-  },
-  automaticLayout: true,
-} as const;
-
 const INLINE_EDITOR_OPTIONS = {
   fontSize: 13,
   lineHeight: 20,
@@ -1680,800 +1646,6 @@ export const InputEditor: Story = {
   render: () => <InputEditorStory />,
 };
 
-// ============================================================================
-// Output Panel helpers
-// ============================================================================
-
-type OutputNode = {
-  key: string;
-  type: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null';
-  value?: string | number | boolean | null;
-  children?: OutputNode[];
-  path: string;
-};
-
-function TypeBadge({ type }: { type: OutputNode['type'] }) {
-  const labels: Record<OutputNode['type'], string> = {
-    string: 'T',
-    number: '#',
-    boolean: '?',
-    object: '{}',
-    array: '[]',
-    null: '∅',
-  };
-  const label = labels[type];
-  const cls = 'border-border bg-surface-overlay text-foreground-muted';
-  return (
-    <span
-      className={cn(
-        'inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded border px-0.5 font-mono text-[9px] font-semibold leading-none',
-        cls
-      )}
-    >
-      {label}
-    </span>
-  );
-}
-
-function outputValueColorClass(type: OutputNode['type'], value: unknown): string {
-  if (type === 'string') return 'text-success';
-  if (type === 'number') return 'text-info';
-  if (type === 'boolean') return value ? 'text-success' : 'text-error';
-  if (type === 'null') return 'text-foreground-subtle';
-  return 'text-foreground';
-}
-
-function formatOutputValue(
-  type: OutputNode['type'],
-  value: string | number | boolean | null | undefined
-): string {
-  if (type === 'null' || value === null || value === undefined) return 'null';
-  if (type === 'string') return `"${value}"`;
-  return String(value);
-}
-
-function nodeMatchesQuery(node: OutputNode, q: string): boolean {
-  if (!q) return true;
-  if (node.key.toLowerCase().includes(q)) return true;
-  if (
-    node.value !== undefined &&
-    node.value !== null &&
-    String(node.value).toLowerCase().includes(q)
-  )
-    return true;
-  return node.children?.some((c) => nodeMatchesQuery(c, q)) ?? false;
-}
-
-function collectContainerPaths(nodes: OutputNode[]): string[] {
-  const paths: string[] = [];
-  for (const n of nodes) {
-    if (n.children) {
-      paths.push(n.path);
-      paths.push(...collectContainerPaths(n.children));
-    }
-  }
-  return paths;
-}
-
-type FlatRow = { node: OutputNode; depth: number };
-
-function flattenOutputTree(
-  nodes: OutputNode[],
-  collapsed: Record<string, boolean>,
-  query: string,
-  depth = 0
-): FlatRow[] {
-  const rows: FlatRow[] = [];
-  for (const n of nodes) {
-    if (query && !nodeMatchesQuery(n, query)) continue;
-    rows.push({ node: n, depth });
-    if (n.children && !collapsed[n.path]) {
-      rows.push(...flattenOutputTree(n.children, collapsed, query, depth + 1));
-    }
-  }
-  return rows;
-}
-
-const PANEL_NODE_ID = 'httpRequest1';
-const PANEL_NODE_LABEL = 'HTTP Request';
-
-// ============================================================================
-
-const REFERENCED_OUTPUTS = [
-  { name: 'responseBody', type: 'object' },
-  { name: 'statusCode', type: 'number' },
-  { name: 'headers', type: 'object' },
-  { name: 'errorMessage', type: 'string' },
-  { name: 'duration', type: 'number' },
-  { name: 'requestId', type: 'string' },
-  { name: 'token', type: 'string' },
-];
-
-const REFERENCED_INPUTS = [
-  { name: 'responseBody', type: 'object' },
-  { name: 'statusCode', type: 'number' },
-  { name: 'headers', type: 'object' },
-  { name: 'condition', type: 'string' },
-  { name: 'result', type: 'boolean' },
-  { name: 'prompt', type: 'string' },
-  { name: 'response', type: 'string' },
-  { name: 'assignee', type: 'string' },
-  { name: 'message', type: 'string' },
-];
-
-const HTTP_REQUEST_CHILDREN: OutputNode[] = [
-  { key: 'statusCode', type: 'number', value: 200, path: `${PANEL_NODE_ID}.statusCode` },
-  {
-    key: 'responseBody',
-    type: 'object',
-    path: `${PANEL_NODE_ID}.responseBody`,
-    children: [
-      { key: 'id', type: 'string', value: 'inv-001', path: `${PANEL_NODE_ID}.responseBody.id` },
-      {
-        key: 'amount',
-        type: 'number',
-        value: 1500,
-        path: `${PANEL_NODE_ID}.responseBody.amount`,
-      },
-      {
-        key: 'currency',
-        type: 'string',
-        value: 'USD',
-        path: `${PANEL_NODE_ID}.responseBody.currency`,
-      },
-      {
-        key: 'status',
-        type: 'string',
-        value: 'paid',
-        path: `${PANEL_NODE_ID}.responseBody.status`,
-      },
-    ],
-  },
-  {
-    key: 'headers',
-    type: 'object',
-    path: `${PANEL_NODE_ID}.headers`,
-    children: [
-      {
-        key: 'content-type',
-        type: 'string',
-        value: 'application/json',
-        path: `${PANEL_NODE_ID}.headers.content-type`,
-      },
-      {
-        key: 'x-request-id',
-        type: 'string',
-        value: 'abc-123',
-        path: `${PANEL_NODE_ID}.headers.x-request-id`,
-      },
-    ],
-  },
-  { key: 'errorMessage', type: 'string', value: null, path: `${PANEL_NODE_ID}.errorMessage` },
-  { key: 'duration', type: 'number', value: 342, path: `${PANEL_NODE_ID}.duration` },
-  { key: 'requestId', type: 'string', value: 'req-abc-123', path: `${PANEL_NODE_ID}.requestId` },
-  {
-    key: 'token',
-    type: 'string',
-    value: 'eyJhbGciOiJSUzI1NiJ9',
-    path: `${PANEL_NODE_ID}.token`,
-  },
-  { key: 'retryCount', type: 'number', value: 0, path: `${PANEL_NODE_ID}.retryCount` },
-  { key: 'cached', type: 'boolean', value: false, path: `${PANEL_NODE_ID}.cached` },
-];
-
-const INPUT_TREE_DATA: OutputNode[] = [
-  { key: PANEL_NODE_ID, type: 'object', path: PANEL_NODE_ID, children: HTTP_REQUEST_CHILDREN },
-  {
-    key: 'decision1',
-    type: 'object',
-    path: 'decision1',
-    children: [
-      {
-        key: 'condition',
-        type: 'string',
-        value: 'invoice.amount > 1000',
-        path: 'decision1.condition',
-      },
-      { key: 'result', type: 'boolean', value: true, path: 'decision1.result' },
-      { key: 'branch', type: 'string', value: 'approve', path: 'decision1.branch' },
-    ],
-  },
-  {
-    key: 'agent1',
-    type: 'object',
-    path: 'agent1',
-    children: [
-      {
-        key: 'prompt',
-        type: 'string',
-        value: 'Summarize the invoice details',
-        path: 'agent1.prompt',
-      },
-      { key: 'model', type: 'string', value: 'gpt-4o-mini', path: 'agent1.model' },
-      {
-        key: 'response',
-        type: 'string',
-        value: 'Invoice inv-001 for $1,500 USD is paid.',
-        path: 'agent1.response',
-      },
-      { key: 'tokens', type: 'number', value: 342, path: 'agent1.tokens' },
-    ],
-  },
-  {
-    key: 'approval1',
-    type: 'object',
-    path: 'approval1',
-    children: [
-      { key: 'assignee', type: 'string', value: 'finance-team', path: 'approval1.assignee' },
-      {
-        key: 'message',
-        type: 'string',
-        value: 'Please review this invoice',
-        path: 'approval1.message',
-      },
-      { key: 'dueDate', type: 'string', value: '2025-01-15', path: 'approval1.dueDate' },
-    ],
-  },
-];
-
-const HTTP_REQUEST_JSON = JSON.stringify(
-  {
-    statusCode: 200,
-    responseBody: {
-      id: 'inv-001',
-      amount: 1500.0,
-      currency: 'USD',
-      status: 'paid',
-    },
-    headers: {
-      'content-type': 'application/json',
-      'x-request-id': 'abc-123',
-    },
-    errorMessage: null,
-    duration: 342,
-    requestId: 'req-abc-123',
-    token: 'eyJhbGciOiJSUzI1NiJ9',
-    retryCount: 0,
-    cached: false,
-  },
-  null,
-  2
-);
-
-const OUTPUT_TREE_DATA: OutputNode[] = [
-  { key: PANEL_NODE_ID, type: 'object', path: PANEL_NODE_ID, children: HTTP_REQUEST_CHILDREN },
-];
-
-const INPUT_JSON = HTTP_REQUEST_JSON;
-const OUTPUT_JSON = HTTP_REQUEST_JSON;
-
-// ============================================================================
-// Concept 2 — Expression Reference Panel
-// Flat list of all leaf output paths as copyable expression references.
-// ============================================================================
-
-function Concept2PanelStory({
-  mode,
-  context = 'flow',
-}: {
-  mode: 'input' | 'output';
-  context?: 'studio' | 'flow';
-}) {
-  const monacoTheme = useMonacoTheme();
-  const [search, setSearch] = useState('');
-  const [filter, setFilter] = useState<'default' | 'referenced' | 'all'>('default');
-  const [collapsed, setCollapsed] = useState<Record<string, boolean>>(() =>
-    Object.fromEntries(
-      [...collectContainerPaths(OUTPUT_TREE_DATA), ...collectContainerPaths(INPUT_TREE_DATA)]
-        .filter((p) => p !== PANEL_NODE_ID)
-        .map((p) => [p, true])
-    )
-  );
-  const [copiedPath, setCopiedPath] = useState<string | null>(null);
-  const [searchOpen, setSearchOpen] = useState(false);
-  const [editingPath, setEditingPath] = useState<string | null>(null);
-  const [editedValues, setEditedValues] = useState<
-    Record<string, string | number | boolean | null>
-  >({});
-  const [nodeMode, setNodeMode] = useState<'live' | 'static' | 'simulated' | 'disabled'>('live');
-
-  const NODE_MODES = [
-    {
-      value: 'live',
-      label: 'Live',
-      description: 'Use the real response from this node',
-      icon: CircleDot,
-    },
-    {
-      value: 'static',
-      label: 'Static mock',
-      description: 'Always return a value you define',
-      icon: FileBracesCorner,
-    },
-    {
-      value: 'simulated',
-      label: 'Simulated',
-      description: 'Generate a response dynamically using an LLM',
-      icon: Sparkles,
-    },
-    {
-      value: 'disabled',
-      label: 'Skip node',
-      description: "Don't execute this node",
-      icon: CircleOff,
-    },
-  ] as const;
-  const currentNodeMode = NODE_MODES.find((m) => m.value === nodeMode) ?? NODE_MODES[0];
-  const CurrentModeIcon = currentNodeMode.icon;
-
-  const isOutput = mode === 'output';
-  const currentTreeData = isOutput ? OUTPUT_TREE_DATA : INPUT_TREE_DATA;
-  const currentReferenced = isOutput ? REFERENCED_OUTPUTS : REFERENCED_INPUTS;
-  const currentJson = isOutput ? OUTPUT_JSON : INPUT_JSON;
-  const referencedKeys = new Set(currentReferenced.map((r) => r.name));
-
-  const activeTreeData =
-    filter !== 'referenced'
-      ? currentTreeData
-      : currentTreeData
-          .map((root) => ({
-            ...root,
-            children: root.children?.filter((n) => referencedKeys.has(n.key)),
-          }))
-          .filter((root) => (root.children?.length ?? 0) > 0);
-
-  const rows = flattenOutputTree(activeTreeData, collapsed, search.toLowerCase());
-
-  const toggleCollapsed = (path: string) =>
-    setCollapsed((prev) => ({ ...prev, [path]: !prev[path] }));
-
-  const allContainerPaths = collectContainerPaths(activeTreeData);
-  const allCollapsed = allContainerPaths.length > 0 && allContainerPaths.every((p) => collapsed[p]);
-  const toggleAll = () => {
-    if (allCollapsed) {
-      setCollapsed({});
-    } else {
-      setCollapsed(Object.fromEntries(allContainerPaths.map((p) => [p, true])));
-    }
-  };
-
-  const escapeRef = useRef(false);
-
-  const saveEdit = (node: OutputNode, raw: string) => {
-    const val =
-      node.type === 'boolean' ? raw === 'true' : node.type === 'number' ? Number(raw) || 0 : raw;
-    setEditedValues((prev) => ({ ...prev, [node.path]: val }));
-    setEditingPath(null);
-  };
-
-  const copyExpr = (path: string) => {
-    navigator.clipboard
-      ?.writeText(`{{${path}}}`)
-      ?.then(() => {
-        setCopiedPath(path);
-        setTimeout(() => setCopiedPath(null), 1500);
-      })
-      ?.catch(() => {});
-  };
-
-  return (
-    <PanelFrame>
-      <NodePropertyPanel
-        panelTitle={isOutput ? 'Output' : 'Input'}
-        contentInset="0.875rem"
-        onClose={() => {}}
-        className="h-[640px]"
-      >
-        <div className="flex h-full min-h-0 flex-col">
-          {/* Node identity bar — hidden in Studio context */}
-          {context === 'flow' && (
-            <div className="shrink-0 flex items-center justify-between gap-2 [padding-inline:var(--mf-content-inset,0.875rem)] pb-3 pt-4">
-              <div className="flex min-w-0 items-center gap-2">
-                <Globe size={13} className="shrink-0 text-foreground-subtle" />
-                <span className="text-xs font-medium text-foreground">{PANEL_NODE_LABEL}</span>
-                <span className="font-mono text-[10px] text-foreground-muted">{PANEL_NODE_ID}</span>
-              </div>
-              {isOutput && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <button
-                      type="button"
-                      className="flex cursor-pointer items-center gap-1.5 rounded-full border border-border px-2 py-0.5 text-[11px] font-medium text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground"
-                    >
-                      <CurrentModeIcon size={10} className="text-foreground-subtle" />
-                      <span>{currentNodeMode.label}</span>
-                      <ChevronDown size={10} className="text-foreground-subtle" />
-                    </button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="w-64">
-                    {NODE_MODES.map((m) => {
-                      const Icon = m.icon;
-                      return (
-                        <DropdownMenuItem
-                          key={m.value}
-                          onClick={() => setNodeMode(m.value)}
-                          className={cn(
-                            'flex items-start gap-2',
-                            nodeMode === m.value && 'text-foreground'
-                          )}
-                        >
-                          <Icon size={13} className="mt-[2px] shrink-0 text-foreground-subtle" />
-                          <div className="flex flex-col gap-0.5">
-                            <span className="text-xs font-medium">{m.label}</span>
-                            <span className="text-[10px] leading-tight text-foreground-muted">
-                              {m.description}
-                            </span>
-                          </div>
-                        </DropdownMenuItem>
-                      );
-                    })}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-            </div>
-          )}
-
-          <Tabs defaultValue="schema" className="flex min-h-0 flex-1 flex-col">
-            {/* Tab strip — status badge moves here in Studio context */}
-            <div
-              className={cn(
-                'shrink-0 flex items-center gap-2 [padding-inline:var(--mf-content-inset,0.875rem)] pb-1.5',
-                context === 'studio' && 'pt-3'
-              )}
-            >
-              <TabsList className={TAB_LIST_CLASS}>
-                <TabsTrigger value="schema" className={TAB_TRIGGER_CLASS}>
-                  Schema
-                </TabsTrigger>
-                <TabsTrigger value="json" className={TAB_TRIGGER_CLASS}>
-                  JSON
-                </TabsTrigger>
-              </TabsList>
-              {context === 'studio' && isOutput && (
-                <>
-                  <div className="flex-1" />
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <button
-                        type="button"
-                        className="flex cursor-pointer items-center gap-1.5 rounded-full border border-border px-2 py-0.5 text-[11px] font-medium text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground"
-                      >
-                        <CurrentModeIcon size={10} className="text-foreground-subtle" />
-                        <span>{currentNodeMode.label}</span>
-                        <ChevronDown size={10} className="text-foreground-subtle" />
-                      </button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end" className="w-64">
-                      {NODE_MODES.map((m) => {
-                        const Icon = m.icon;
-                        return (
-                          <DropdownMenuItem
-                            key={m.value}
-                            onClick={() => setNodeMode(m.value)}
-                            className={cn(
-                              'flex items-start gap-2',
-                              nodeMode === m.value && 'text-foreground'
-                            )}
-                          >
-                            <Icon size={13} className="mt-[2px] shrink-0 text-foreground-subtle" />
-                            <div className="flex flex-col gap-0.5">
-                              <span className="text-xs font-medium">{m.label}</span>
-                              <span className="text-[10px] leading-tight text-foreground-muted">
-                                {m.description}
-                              </span>
-                            </div>
-                          </DropdownMenuItem>
-                        );
-                      })}
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </>
-              )}
-            </div>
-
-            {/* Schema tab */}
-            <TabsContent value="schema" className="mt-0 flex min-h-0 flex-1 flex-col">
-              {/* Header: filter dropdown on left, search + collapse on right */}
-              <div className="shrink-0 flex items-center gap-1.5 [padding-inline:var(--mf-content-inset,0.875rem)] pb-1 pt-2">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <button
-                      type="button"
-                      className="flex cursor-pointer shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground"
-                    >
-                      <span>
-                        {filter === 'referenced'
-                          ? 'Filter: Referenced in this node'
-                          : filter === 'all'
-                            ? 'Filter: All'
-                            : 'Filter'}
-                      </span>
-                      {filter === 'referenced' && (
-                        <span className="rounded-sm bg-surface-raised px-1.5 py-0.5 font-mono text-[10px] font-medium leading-none text-foreground">
-                          {currentReferenced.length}
-                        </span>
-                      )}
-                      <ChevronDown size={10} className="text-foreground-subtle" />
-                    </button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start" className="w-52">
-                    <DropdownMenuItem
-                      onClick={() => setFilter('referenced')}
-                      className={cn(
-                        'flex items-center justify-between',
-                        filter === 'referenced' && 'text-foreground'
-                      )}
-                    >
-                      <span className="text-[11px]">Referenced in this node</span>
-                      <span className="ml-3 rounded bg-surface-overlay px-1.5 py-0.5 font-mono text-[10px] font-medium leading-none text-foreground-muted">
-                        {currentReferenced.length}
-                      </span>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => setFilter('all')}
-                      className={cn('text-[11px]', filter === 'all' && 'text-foreground')}
-                    >
-                      All
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-                <div className="flex-1" />
-                {searchOpen ? (
-                  <div className="relative flex items-center">
-                    <Search
-                      size={12}
-                      className="pointer-events-none absolute left-2 text-foreground-subtle"
-                    />
-                    <Input
-                      autoFocus
-                      type="text"
-                      variant="ghost"
-                      size="xs"
-                      value={search}
-                      onChange={(e) => setSearch(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Escape') {
-                          setSearch('');
-                          setSearchOpen(false);
-                        }
-                      }}
-                      aria-label={isOutput ? 'Search outputs' : 'Search inputs'}
-                      placeholder={isOutput ? 'Search outputs...' : 'Search inputs...'}
-                      className="w-36 pl-6 pr-6 text-foreground placeholder:text-foreground-subtle focus-visible:ring-0"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setSearch('');
-                        setSearchOpen(false);
-                      }}
-                      aria-label="Clear search"
-                      className="absolute right-1.5 grid size-4 place-items-center text-foreground-subtle transition hover:text-foreground"
-                    >
-                      <X size={11} />
-                    </button>
-                  </div>
-                ) : (
-                  <Button
-                    variant="ghost"
-                    size="4xs"
-                    icon
-                    onClick={() => setSearchOpen(true)}
-                    title="Search fields"
-                    aria-label="Search fields"
-                    className="rounded text-foreground-subtle hover:bg-surface-overlay hover:text-foreground"
-                  >
-                    <Search size={12} />
-                  </Button>
-                )}
-                {allContainerPaths.length > 0 && (
-                  <Button
-                    variant="ghost"
-                    size="4xs"
-                    icon
-                    onClick={toggleAll}
-                    title={allCollapsed ? 'Expand all' : 'Collapse all'}
-                    aria-label={allCollapsed ? 'Expand all' : 'Collapse all'}
-                    className="rounded text-foreground-subtle hover:bg-surface-overlay hover:text-foreground"
-                  >
-                    {allCollapsed ? <ChevronsUpDown size={12} /> : <ChevronsDownUp size={12} />}
-                  </Button>
-                )}
-              </div>
-
-              {/* Tree list */}
-              <div className="min-h-0 flex-1 overflow-hidden rounded-xl border border-surface-overlay bg-surface-overlay/40 pb-0 [margin-inline:var(--mf-content-inset,0.875rem)] mb-4 mt-1">
-                <div className="h-full overflow-y-auto pt-1.5">
-                  {rows.map(({ node, depth }) =>
-                    node.children !== undefined ? (
-                      <div
-                        key={node.path}
-                        className="group flex cursor-default items-center gap-2 py-1 transition hover:bg-surface-overlay"
-                        style={{ paddingLeft: `${8 + depth * 16}px`, paddingRight: '14px' }}
-                      >
-                        <button
-                          type="button"
-                          onClick={() => toggleCollapsed(node.path)}
-                          aria-label={
-                            collapsed[node.path] ? `Expand ${node.key}` : `Collapse ${node.key}`
-                          }
-                          className="cursor-pointer grid size-3 shrink-0 place-items-center text-foreground-subtle transition hover:text-foreground"
-                        >
-                          <ChevronDown
-                            size={10}
-                            className={cn(
-                              'transition-transform duration-100',
-                              collapsed[node.path] && '-rotate-90'
-                            )}
-                          />
-                        </button>
-                        <TypeBadge type={node.type} />
-                        <span className="flex-1 truncate font-mono text-xs text-foreground">
-                          {node.key}
-                        </span>
-                        <span className="shrink-0 font-mono text-[10px] text-foreground-muted">
-                          {node.type === 'array'
-                            ? `${node.children.length} ${node.children.length === 1 ? 'item' : 'items'}`
-                            : `${node.children.length} ${node.children.length === 1 ? 'key' : 'keys'}`}
-                        </span>
-                      </div>
-                    ) : (
-                      <div
-                        key={node.path}
-                        className="group flex cursor-default items-center gap-2 py-1 transition hover:bg-surface-overlay"
-                        style={{ paddingLeft: `${8 + depth * 16}px`, paddingRight: '14px' }}
-                      >
-                        <div className="size-3 shrink-0" />
-                        <TypeBadge type={node.type} />
-                        <span className="shrink-0 font-mono text-xs text-foreground">
-                          {node.key}
-                        </span>
-                        <span className="shrink-0 font-mono text-xs text-foreground-subtle">=</span>
-                        {editingPath === node.path ? (
-                          <input
-                            autoFocus
-                            type="text"
-                            defaultValue={String(editedValues[node.path] ?? node.value ?? '')}
-                            onBlur={(e) => {
-                              if (!escapeRef.current) saveEdit(node, e.target.value);
-                              escapeRef.current = false;
-                            }}
-                            onKeyDown={(e) => {
-                              if (e.key === 'Enter') saveEdit(node, e.currentTarget.value);
-                              if (e.key === 'Escape') {
-                                escapeRef.current = true;
-                                setEditingPath(null);
-                              }
-                            }}
-                            className={cn(
-                              'min-w-0 flex-1 rounded bg-transparent px-1 font-mono text-xs outline-none ring-1 ring-brand',
-                              outputValueColorClass(
-                                node.type,
-                                editedValues[node.path] ?? node.value
-                              )
-                            )}
-                          />
-                        ) : (
-                          <>
-                            <button
-                              type="button"
-                              onClick={() => node.type !== 'null' && setEditingPath(node.path)}
-                              className={cn(
-                                'max-w-[55%] shrink-0 truncate font-mono text-xs',
-                                node.type !== 'null' ? 'cursor-text' : 'cursor-default',
-                                outputValueColorClass(
-                                  node.type,
-                                  editedValues[node.path] ?? node.value
-                                )
-                              )}
-                            >
-                              {formatOutputValue(
-                                node.type,
-                                (editedValues[node.path] ?? node.value) as
-                                  | string
-                                  | number
-                                  | boolean
-                                  | null
-                              )}
-                            </button>
-                            <div className="flex-1" />
-                            <Button
-                              variant="ghost"
-                              size="4xs"
-                              icon
-                              onClick={() => copyExpr(node.path)}
-                              title={`Copy {{${node.path}}}`}
-                              aria-label={`Copy expression for ${node.path}`}
-                              className="shrink-0 rounded text-foreground-subtle opacity-0 hover:bg-surface-raised hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100"
-                            >
-                              {copiedPath === node.path ? (
-                                <CircleCheck size={11} className="text-brand" />
-                              ) : (
-                                <Copy size={11} />
-                              )}
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    )
-                  )}
-                  {rows.length === 0 && (
-                    <p className="py-4 text-center text-xs text-foreground-subtle">
-                      No references match your search.
-                    </p>
-                  )}
-                </div>
-              </div>
-            </TabsContent>
-
-            {/* JSON tab */}
-            <TabsContent
-              value="json"
-              className="mt-0 flex min-h-0 flex-1 flex-col pb-4 pt-1 [padding-inline:var(--mf-content-inset,0.875rem)]"
-            >
-              <div className="min-h-0 flex-1 overflow-hidden rounded-xl border border-surface-overlay">
-                <MonacoEditor
-                  height="100%"
-                  language="json"
-                  value={currentJson}
-                  theme={monacoTheme}
-                  beforeMount={registerMonacoThemes}
-                  options={JSON_VIEWER_OPTIONS}
-                />
-              </div>
-            </TabsContent>
-          </Tabs>
-        </div>
-      </NodePropertyPanel>
-    </PanelFrame>
-  );
-}
-
-// ============================================================================
-// In Studio / In Flow layout
-// ============================================================================
-
-function InputOutputStory() {
-  const [context, setContext] = useState<'studio' | 'flow'>('flow');
-  return (
-    <div className="flex flex-col items-center gap-6 p-8">
-      <div className="flex items-center overflow-hidden rounded border border-border">
-        {(['flow', 'studio'] as const).map((c, i) => (
-          <span key={c} className="contents">
-            {i > 0 && <div className="h-3 w-px bg-border" />}
-            <button
-              type="button"
-              onClick={() => setContext(c)}
-              className={cn(
-                'cursor-pointer px-3 py-1 text-xs font-medium transition',
-                context === c
-                  ? 'bg-surface-overlay text-foreground'
-                  : 'text-foreground-muted hover:text-foreground'
-              )}
-            >
-              {c === 'studio' ? 'In Studio' : 'In Flow'}
-            </button>
-          </span>
-        ))}
-      </div>
-      <div className="flex items-start gap-[50px]">
-        <div className="w-[380px]">
-          <Concept2PanelStory mode="input" context={context} />
-        </div>
-        <div className="w-[380px]">
-          <Concept2PanelStory mode="output" context={context} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export const Output: Story = {
-  name: 'Input / Output',
-  render: () => <InputOutputStory />,
-  parameters: { layout: 'fullscreen' },
-};
-
 // ============================================================================
 // Inline Editing
 // Title and description in the node identity row are directly editable.
diff --git a/packages/apollo-react/src/canvas/components/index.ts b/packages/apollo-react/src/canvas/components/index.ts
index cb4f96f79..3cf5e8f0f 100644
--- a/packages/apollo-react/src/canvas/components/index.ts
+++ b/packages/apollo-react/src/canvas/components/index.ts
@@ -1,5 +1,4 @@
 export * from './AddNodePanel';
-export * from './ProbeCard';
 export * from './AgentCanvas';
 export * from './BaseCanvas';
 export * from './BaseNode';
@@ -14,15 +13,18 @@ export * from './ExecutionStatusIcon';
 export * from './FloatingCanvasPanel';
 export * from './GroupNode';
 export * from './HierarchicalCanvas';
+export * from './JsonTree';
 export * from './LoopNode';
 export * from './MiniCanvasNavigator';
 export * from './NodeContextMenu';
 export * from './NodeInspector';
+export * from './NodeIOView';
 export * from './NodePropertiesPanel';
 export * from './NodePropertyPanel';
-export * from './shared';
+export * from './ProbeCard';
 export * from './StageNode';
 export * from './StickyNoteNode';
+export * from './shared';
 export * from './TaskIcon';
 export * from './Toolbar';
 export * from './Toolbox';
diff --git a/packages/apollo-react/src/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.test.tsx b/packages/apollo-react/src/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.test.tsx
new file mode 100644
index 000000000..32ebda641
--- /dev/null
+++ b/packages/apollo-react/src/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.test.tsx
@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen, userEvent } from '../../utils/testing';
+import { NodeOutputModeSelect } from './NodeOutputModeSelect';
+
+describe('NodeOutputModeSelect', () => {
+  it('announces options as radio items with the selected mode checked', async () => {
+    render(<NodeOutputModeSelect value="static" onChange={vi.fn()} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Node mode' }));
+    const selected = screen.getByRole('menuitemradio', { name: /Static mock/ });
+    expect(selected).toHaveAttribute('aria-checked', 'true');
+    expect(screen.getByRole('menuitemradio', { name: /Live/ })).toHaveAttribute(
+      'aria-checked',
+      'false'
+    );
+  });
+
+  it('reports the chosen mode through onChange', async () => {
+    const onChange = vi.fn();
+    render(<NodeOutputModeSelect value="live" onChange={onChange} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Node mode' }));
+    await userEvent.click(screen.getByRole('menuitemradio', { name: /Simulated/ }));
+    expect(onChange).toHaveBeenCalledWith('simulated');
+  });
+
+  it('renders custom options and falls back to the first when the value is unknown', async () => {
+    const options = [
+      { value: 'Live', label: 'Live!' },
+      { value: 'Static', label: 'Static!' },
+    ];
+    render(<NodeOutputModeSelect value="nope" onChange={vi.fn()} options={options} />);
+    expect(screen.getByRole('button', { name: 'Node mode' })).toHaveTextContent('Live!');
+    // The dropdown checks the same fallback option the trigger shows, so an
+    // unknown value never leaves the radio group with nothing checked.
+    await userEvent.click(screen.getByRole('button', { name: 'Node mode' }));
+    expect(screen.getByRole('menuitemradio', { name: 'Live!' })).toHaveAttribute(
+      'aria-checked',
+      'true'
+    );
+  });
+
+  it('disables the trigger', () => {
+    render(<NodeOutputModeSelect value="live" onChange={vi.fn()} disabled />);
+    expect(screen.getByRole('button', { name: 'Node mode' })).toBeDisabled();
+  });
+});
diff --git a/packages/apollo-react/src/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.tsx b/packages/apollo-react/src/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.tsx
new file mode 100644
index 000000000..5eb6ebe00
--- /dev/null
+++ b/packages/apollo-react/src/canvas/controls/NodeOutputModeSelect/NodeOutputModeSelect.tsx
@@ -0,0 +1,172 @@
+import {
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@uipath/apollo-wind';
+import type { LucideIcon } from 'lucide-react';
+import { ChevronDown, CircleDot, CircleOff, FileBracesCorner, Sparkles } from 'lucide-react';
+import { useMemo } from 'react';
+import { useSafeLingui } from '../../../i18n';
+
+export interface NodeOutputModeOption {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: LucideIcon;
+}
+
+// Single source of truth for the default modes: label/description carry the
+// lingui descriptors so the constant (English) and the hook (localized)
+// cannot drift. The ids are also hand-maintained in locales/en.json.
+const MODE_DEFS = [
+  {
+    value: 'live',
+    icon: CircleDot,
+    label: { id: 'canvas.node_mode_select.live_label', message: 'Live' },
+    description: {
+      id: 'canvas.node_mode_select.live_description',
+      message: 'Use the real response from this node',
+    },
+  },
+  {
+    value: 'static',
+    icon: FileBracesCorner,
+    label: { id: 'canvas.node_mode_select.static_label', message: 'Static mock' },
+    description: {
+      id: 'canvas.node_mode_select.static_description',
+      message: 'Always return a value you define',
+    },
+  },
+  {
+    value: 'simulated',
+    icon: Sparkles,
+    label: { id: 'canvas.node_mode_select.simulated_label', message: 'Simulated' },
+    description: {
+      id: 'canvas.node_mode_select.simulated_description',
+      message: 'Generate a response dynamically using an LLM',
+    },
+  },
+  {
+    value: 'disabled',
+    icon: CircleOff,
+    label: { id: 'canvas.node_mode_select.disabled_label', message: 'Skip node' },
+    description: {
+      id: 'canvas.node_mode_select.disabled_description',
+      message: "Don't execute this node",
+    },
+  },
+] as const;
+
+/**
+ * Default execution modes for a canvas node's output (English copy).
+ * Prefer `useDefaultNodeOutputModes()` in React code — it returns the same options
+ * with localized labels and descriptions.
+ */
+export const DEFAULT_NODE_OUTPUT_MODES: NodeOutputModeOption[] = MODE_DEFS.map((mode) => ({
+  value: mode.value,
+  label: mode.label.message,
+  description: mode.description.message,
+  icon: mode.icon,
+}));
+
+/** The default execution modes with localized labels and descriptions. */
+export function useDefaultNodeOutputModes(): NodeOutputModeOption[] {
+  const { _ } = useSafeLingui();
+  return useMemo(
+    () =>
+      MODE_DEFS.map((mode) => ({
+        value: mode.value,
+        label: _(mode.label),
+        description: _(mode.description),
+        icon: mode.icon,
+      })),
+    [_]
+  );
+}
+
+export interface NodeOutputModeSelectProps {
+  /** Selected mode value. Falls back to the first option when unknown. */
+  value: string;
+  onChange: (value: string) => void;
+  /** Selectable modes. Defaults to the localized `useDefaultNodeOutputModes()` options. */
+  options?: NodeOutputModeOption[];
+  disabled?: boolean;
+  className?: string;
+}
+
+/** Pill-shaped dropdown for choosing how a node executes (live, mocked, simulated, skipped). */
+export function NodeOutputModeSelect({
+  value,
+  onChange,
+  options,
+  disabled = false,
+  className,
+}: NodeOutputModeSelectProps) {
+  const { _ } = useSafeLingui();
+  const defaultModes = useDefaultNodeOutputModes();
+  const resolvedOptions = options ?? defaultModes;
+  const current = resolvedOptions.find((option) => option.value === value) ?? resolvedOptions[0];
+  const CurrentIcon = current?.icon;
+  // The trigger falls back to the first option when `value` matches none, so
+  // the radio group and highlight track that same resolved value; otherwise an
+  // unknown `value` would leave no item checked while the trigger shows one.
+  const selectedValue = current?.value ?? value;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild disabled={disabled}>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={_({
+            id: 'canvas.node_mode_select.node_mode',
+            message: 'Node mode',
+          })}
+          className={cn(
+            'flex cursor-pointer items-center gap-1.5 rounded-full border border-border px-2 py-0.5 text-[11px] font-medium text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground',
+            disabled &&
+              'cursor-default opacity-60 hover:bg-transparent hover:text-foreground-muted',
+            className
+          )}
+        >
+          {CurrentIcon && <CurrentIcon size={10} className="text-foreground-subtle" />}
+          <span>{current?.label}</span>
+          <ChevronDown size={10} className="text-foreground-subtle" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {/* Radio semantics so AT announces the selected mode (menuitemradio +
+            aria-checked); the built-in left indicator marks the selected row
+            in the accent color. */}
+        <DropdownMenuRadioGroup value={selectedValue} onValueChange={onChange}>
+          {resolvedOptions.map((option) => {
+            const Icon = option.icon;
+            return (
+              <DropdownMenuRadioItem
+                key={option.value}
+                value={option.value}
+                className={cn(
+                  'group flex items-center gap-2 [&>span:first-child]:text-foreground-accent',
+                  selectedValue === option.value && 'text-foreground'
+                )}
+              >
+                {Icon && <Icon size={13} className="shrink-0 text-foreground-subtle" />}
+                <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                  <span className="text-xs font-medium">{option.label}</span>
+                  {option.description && (
+                    <span className="text-[10px] leading-tight text-foreground-muted">
+                      {option.description}
+                    </span>
+                  )}
+                </div>
+              </DropdownMenuRadioItem>
+            );
+          })}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/packages/apollo-react/src/canvas/controls/NodeOutputModeSelect/index.ts b/packages/apollo-react/src/canvas/controls/NodeOutputModeSelect/index.ts
new file mode 100644
index 000000000..1a81f5228
--- /dev/null
+++ b/packages/apollo-react/src/canvas/controls/NodeOutputModeSelect/index.ts
@@ -0,0 +1,7 @@
+export {
+  DEFAULT_NODE_OUTPUT_MODES,
+  type NodeOutputModeOption,
+  NodeOutputModeSelect,
+  type NodeOutputModeSelectProps,
+  useDefaultNodeOutputModes,
+} from './NodeOutputModeSelect';
diff --git a/packages/apollo-react/src/canvas/controls/index.ts b/packages/apollo-react/src/canvas/controls/index.ts
index c676ddcf0..126bf7637 100644
--- a/packages/apollo-react/src/canvas/controls/index.ts
+++ b/packages/apollo-react/src/canvas/controls/index.ts
@@ -1,4 +1,11 @@
 export { Breadcrumb } from './Breadcrumb';
+export {
+  DEFAULT_NODE_OUTPUT_MODES,
+  type NodeOutputModeOption,
+  NodeOutputModeSelect,
+  type NodeOutputModeSelectProps,
+  useDefaultNodeOutputModes,
+} from './NodeOutputModeSelect';
 export {
   NodePropertyTrigger,
   NodePropertyTriggerCheckboxItem,
diff --git a/packages/apollo-react/src/canvas/locales/en.json b/packages/apollo-react/src/canvas/locales/en.json
index 4fcc16788..13d78139e 100644
--- a/packages/apollo-react/src/canvas/locales/en.json
+++ b/packages/apollo-react/src/canvas/locales/en.json
@@ -98,5 +98,54 @@
   "canvas.property_trigger.save_as_preset": "Save as preset",
   "canvas.property_trigger.apply_preset_with_label": "Apply {label}",
   "canvas.property_trigger.rename_preset_with_label": "Rename {label}",
-  "canvas.property_trigger.delete_preset_with_label": "Delete {label}"
+  "canvas.property_trigger.delete_preset_with_label": "Delete {label}",
+  "canvas.json_value_panel.apply": "Apply",
+  "canvas.json_value_panel.array_item": "item",
+  "canvas.json_value_panel.cancel": "Cancel",
+  "canvas.json_value_panel.clear_search": "Clear search",
+  "canvas.json_value_panel.collapse_all": "Collapse all",
+  "canvas.json_value_panel.collapse_key": "Collapse {key}",
+  "canvas.json_value_panel.copy_path_for": "Copy path for {path}",
+  "canvas.json_value_panel.copy_path_hint": "Click to copy this path",
+  "canvas.json_value_panel.copy_value": "Copy value",
+  "canvas.json_value_panel.copy_value_of": "Copy value of {key}",
+  "canvas.json_value_panel.edit_as_json": "Edit as JSON",
+  "canvas.json_value_panel.edit_hint": "Click to edit",
+  "canvas.json_value_panel.edit_json_of": "Edit JSON of {key}",
+  "canvas.json_value_panel.edit_key_as_json": "Edit {key} as JSON",
+  "canvas.json_value_panel.edit_value_of": "Edit value of {key}",
+  "canvas.json_value_panel.empty_default": "No fields to display.",
+  "canvas.json_value_panel.empty_search": "No fields match your search.",
+  "canvas.json_value_panel.enter_number": "Enter a number",
+  "canvas.json_value_panel.enter_value": "Enter a value",
+  "canvas.json_value_panel.expand_all": "Expand all",
+  "canvas.json_value_panel.expand_key": "Expand {key}",
+  "canvas.json_value_panel.filter": "Filter",
+  "canvas.json_value_panel.filter_active": "Filter: {label}",
+  "canvas.json_value_panel.filter_all": "All",
+  "canvas.json_value_panel.invalid_json": "Invalid JSON",
+  "canvas.json_value_panel.item_count": "{count, plural, one {# item} other {# items}}",
+  "canvas.json_value_panel.json_tab": "JSON",
+  "canvas.json_value_panel.key_count": "{count, plural, one {# key} other {# keys}}",
+  "canvas.json_value_panel.path_copied": "Path copied",
+  "canvas.json_value_panel.required_marker": "required",
+  "canvas.json_value_panel.schema_tab": "Schema",
+  "canvas.json_value_panel.search_fields": "Search fields and values...",
+  "canvas.json_value_panel.search_fields_action": "Search fields and values",
+  "canvas.json_value_panel.toggle_hint": "Click to toggle",
+  "canvas.json_value_panel.unset_edit_hint": "Click to set a value",
+  "canvas.json_value_panel.unset_value": "unset",
+  "canvas.json_value_panel.unwrap_value": "Unwrap value",
+  "canvas.json_value_panel.unwrap_value_of": "Unwrap value of {key}",
+  "canvas.json_value_panel.wrap_value": "Wrap value",
+  "canvas.json_value_panel.wrap_value_of": "Wrap value of {key}",
+  "canvas.node_mode_select.disabled_description": "Don't execute this node",
+  "canvas.node_mode_select.disabled_label": "Skip node",
+  "canvas.node_mode_select.live_description": "Use the real response from this node",
+  "canvas.node_mode_select.live_label": "Live",
+  "canvas.node_mode_select.node_mode": "Node mode",
+  "canvas.node_mode_select.simulated_description": "Generate a response dynamically using an LLM",
+  "canvas.node_mode_select.simulated_label": "Simulated",
+  "canvas.node_mode_select.static_description": "Always return a value you define",
+  "canvas.node_mode_select.static_label": "Static mock"
 }
diff --git a/packages/apollo-react/src/i18n/useSafeLingui.test.tsx b/packages/apollo-react/src/i18n/useSafeLingui.test.tsx
index 005fc6360..4863ae4e0 100644
--- a/packages/apollo-react/src/i18n/useSafeLingui.test.tsx
+++ b/packages/apollo-react/src/i18n/useSafeLingui.test.tsx
@@ -1,11 +1,15 @@
 import { setupI18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
 import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { useSafeLingui } from './useSafeLingui';
 
-type TranslationDescriptor = { id: string; message?: string; values?: Record<string, unknown> };
+type TranslationDescriptor = {
+  id: string;
+  message?: string;
+  values?: Record<string, unknown>;
+};
 type TranslationInput = TranslationDescriptor | string;
 
 function TranslationProbe({ descriptor }: { descriptor: TranslationInput }) {
@@ -42,6 +46,50 @@ describe('useSafeLingui', () => {
     expect(screen.getByText('Jump to iteration 2 (failed)')).toBeInTheDocument();
   });
 
+  // Production @lingui/core skips runtime message compilation, so these two
+  // pin the pre-compiled fallback path that keeps ICU working in prod builds.
+  it('formats plurals without a provider in production mode', () => {
+    vi.stubEnv('NODE_ENV', 'production');
+    try {
+      render(
+        <TranslationProbe
+          descriptor={{
+            id: 'test.plural',
+            message: '{count, plural, one {# key} other {# keys}}',
+            values: { count: 2 },
+          }}
+        />
+      );
+      expect(screen.getByText('2 keys')).toBeInTheDocument();
+    } finally {
+      vi.unstubAllEnvs();
+    }
+  });
+
+  it('formats ids missing from a mounted provider catalog in production mode', () => {
+    vi.stubEnv('NODE_ENV', 'production');
+    try {
+      const testI18n = setupI18n({
+        locale: 'es',
+        messages: { es: { 'test.other': 'Otro' } },
+      });
+      render(
+        <I18nProvider i18n={testI18n}>
+          <TranslationProbe
+            descriptor={{
+              id: 'test.missing.plural',
+              message: '{count, plural, one {# item} other {# items}}',
+              values: { count: 3 },
+            }}
+          />
+        </I18nProvider>
+      );
+      expect(screen.getByText('3 items')).toBeInTheDocument();
+    } finally {
+      vi.unstubAllEnvs();
+    }
+  });
+
   it('uses the mounted Lingui provider when available', () => {
     const testI18n = setupI18n({
       locale: 'es',
@@ -55,7 +103,11 @@ describe('useSafeLingui', () => {
     render(
       <I18nProvider i18n={testI18n}>
         <TranslationProbe
-          descriptor={{ id: 'test.greeting', message: 'Hello {name}', values: { name: 'Ada' } }}
+          descriptor={{
+            id: 'test.greeting',
+            message: 'Hello {name}',
+            values: { name: 'Ada' },
+          }}
         />
       </I18nProvider>
     );
diff --git a/packages/apollo-react/src/i18n/useSafeLingui.ts b/packages/apollo-react/src/i18n/useSafeLingui.ts
index 6d86e333e..626d01ea0 100644
--- a/packages/apollo-react/src/i18n/useSafeLingui.ts
+++ b/packages/apollo-react/src/i18n/useSafeLingui.ts
@@ -1,14 +1,24 @@
 import { setupI18n } from '@lingui/core';
+import { compileMessage } from '@lingui/message-utils/compileMessage';
 import { LinguiContext } from '@lingui/react';
 import { useContext, useMemo } from 'react';
 
-type Descriptor = { id: string; message?: string; values?: Record<string, unknown> };
+type Descriptor = {
+  id: string;
+  message?: string;
+  values?: Record<string, unknown>;
+};
 type Translate = {
   (descriptor: Descriptor): string;
   (id: string): string;
 };
 
+// Production builds of @lingui/core do not compile raw message strings at
+// runtime — plurals and interpolation render verbatim (e.g. literally
+// "{count, plural, ...}"). The fallback therefore pre-compiles each English
+// default once and hands lingui compiled tokens instead.
 const fallbackI18n = setupI18n({ locale: 'en', messages: { en: {} } });
+const compiledIds = new Set<string>();
 
 // Formats the `message` (English default baked into the macro call) when no
 // I18nProvider is mounted upstream. Falls back to `id` if no message is given.
@@ -21,17 +31,36 @@ const fallbackTranslate = ((arg: Descriptor | string): string => {
     return arg.id;
   }
 
-  return fallbackI18n._(arg);
+  if (!compiledIds.has(arg.id)) {
+    fallbackI18n.load('en', { [arg.id]: compileMessage(arg.message) });
+    compiledIds.add(arg.id);
+  }
+
+  return fallbackI18n._(arg.id, arg.values);
 }) as Translate;
 
 // Drop-in replacement for `useLingui()` from `@lingui/react` that does NOT
 // throw when there is no I18nProvider upstream. Reads `LinguiContext` directly
 // and returns the real translator when available, otherwise a fallback that
-// returns the English `message` baked into each descriptor.
+// formats the English `message` baked into each descriptor.
 //
 // Use this in design-system components that need to render in hosts that
 // haven't (yet) wrapped them in `ApI18nProvider` / `I18nProvider`.
 export function useSafeLingui(): { _: Translate } {
   const ctx = useContext(LinguiContext);
-  return useMemo(() => ({ _: (ctx?._ as Translate | undefined) ?? fallbackTranslate }), [ctx]);
+  return useMemo(() => {
+    if (!ctx) {
+      return { _: fallbackTranslate };
+    }
+    const providerTranslate = ((arg: Descriptor | string): string => {
+      // Ids missing from the host's active catalog hit the same production
+      // pitfall as the no-provider case — route them through the compiling
+      // English fallback instead of returning the raw message.
+      if (typeof arg !== 'string' && arg.message && !(arg.id in (ctx.i18n.messages ?? {}))) {
+        return fallbackTranslate(arg);
+      }
+      return (ctx._ as Translate)(arg as Descriptor);
+    }) as Translate;
+    return { _: providerTranslate };
+  }, [ctx]);
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 63765797a..d0c2bdc60 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -627,6 +627,9 @@ importers:
       '@lingui/core':
         specifier: ^5.6.1
         version: 5.9.5(@lingui/babel-plugin-lingui-macro@5.6.1(babel-plugin-macros@3.1.0)(typescript@5.9.3))(babel-plugin-macros@3.1.0)
+      '@lingui/message-utils':
+        specifier: ^5.6.1
+        version: 5.9.5
       '@lingui/react':
         specifier: ^5.6.1
         version: 5.9.5(@lingui/babel-plugin-lingui-macro@5.6.1(babel-plugin-macros@3.1.0)(typescript@5.9.3))(babel-plugin-macros@3.1.0)(react@19.2.3)