From 38aa05bc96fc6c2a3829f790b32a3f79108ba0c3 Mon Sep 17 00:00:00 2001
From: Claude <claude@volcanic>
Date: Sun, 30 Aug 2026 11:13:39 +0000
Subject: [PATCH] =?UTF-8?q?refactor(expr):=20JsonTree=20=E2=80=94=20un-pic?=
 =?UTF-8?q?kable=20trees=20still=20expand=20+=20drop=20dead=20clickable=20?=
 =?UTF-8?q?var?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/expr/JsonTree.test.tsx |  7 +++++++
 frontend/src/expr/JsonTree.tsx      | 13 +++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/expr/JsonTree.test.tsx b/frontend/src/expr/JsonTree.test.tsx
index 267d123..b0aec2c 100644
--- a/frontend/src/expr/JsonTree.test.tsx
+++ b/frontend/src/expr/JsonTree.test.tsx
@@ -54,6 +54,13 @@ describe("JsonTree", () => {
     expect(onPick).not.toHaveBeenCalled();
   });
 
+  it("branches still expand when pickable is false (an un-pickable tree stays browsable)", async () => {
+    render(<JsonTree value={{ a: { b: 2 } }} pickable={false} />);
+    expect(screen.queryByText("b")).not.toBeInTheDocument();
+    await userEvent.click(screen.getByText("a"));
+    expect(screen.getByText("b")).toBeInTheDocument();
+  });
+
   it("renders empty state for empty object", () => {
     render(<JsonTree value={{}} />);
     expect(screen.getByText(/no data/i)).toBeInTheDocument();
diff --git a/frontend/src/expr/JsonTree.tsx b/frontend/src/expr/JsonTree.tsx
index 937bfae..9e0f43b 100644
--- a/frontend/src/expr/JsonTree.tsx
+++ b/frontend/src/expr/JsonTree.tsx
@@ -54,11 +54,12 @@ function Node({ label, value, path, depth, pickable, onPick }: NodeProps) {
 function BranchOrLeaf({ label, value, path, depth, pickable, onPick }: NodeProps) {
   const branch = isBranch(value);
   const [open, setOpen] = useState(false);
-  const clickable = pickable;
+  // Branches always expand/collapse (so an un-pickable tree can still be
+  // browsed — e.g. the Output column in the node editor dialog). Only leaf
+  // clicks are gated by `pickable`.
   const pickHandler = () => {
-    if (!pickable) return;
-    if (branch) setOpen((o) => !o);
-    else onPick?.(path);
+    if (branch) { setOpen((o) => !o); return; }
+    if (pickable) onPick?.(path);
   };
   return (
     <li>
@@ -67,8 +68,8 @@ function BranchOrLeaf({ label, value, path, depth, pickable, onPick }: NodeProps
         onClick={pickHandler}
         className={
           "flex items-center gap-1 w-full text-left py-0.5 px-1 rounded " +
-          (pickable ? "hover:bg-slate-800/80 " : "opacity-50 cursor-default ") +
-          (clickable ? "" : "cursor-default")
+          "hover:bg-slate-800/80 " +
+          (!pickable && !branch ? "opacity-50 cursor-default" : "")
         }
       >
         {branch ? (open ? <ChevronDown size={12} /> : <ChevronRight size={12} />) : <span className="w-3" />}