From 06071c691e128c4b2bade017708ac697e0a6fdeb Mon Sep 17 00:00:00 2001
From: Claude <claude@volcanic>
Date: Mon, 31 Aug 2026 11:32:02 +0000
Subject: [PATCH] fix(editor): JsonTree renders scalar roots so bare-value
 items are visible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

renderChildren only handles objects and arrays — a scalar root (string,
number, bool) fell through to `return null`, rendering an empty <ul>. So
a Python node returning `output = "hello"` (single string item) showed
as empty in the Output column.

At depth 0, dispatch scalar roots to a single labelless leaf with the
same quoting/coloring as nested leaves.
---
 frontend/src/expr/JsonTree.test.tsx | 15 +++++++++++++++
 frontend/src/expr/JsonTree.tsx      | 21 +++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/frontend/src/expr/JsonTree.test.tsx b/frontend/src/expr/JsonTree.test.tsx
index b0aec2c..3b69d7e 100644
--- a/frontend/src/expr/JsonTree.test.tsx
+++ b/frontend/src/expr/JsonTree.test.tsx
@@ -65,4 +65,19 @@ describe("JsonTree", () => {
     render(<JsonTree value={{}} />);
     expect(screen.getByText(/no data/i)).toBeInTheDocument();
   });
+
+  it("renders a bare string root as a visible quoted value", () => {
+    render(<JsonTree value="hello" />);
+    expect(screen.getByText("hello")).toBeInTheDocument();
+  });
+
+  it("renders a bare number root", () => {
+    render(<JsonTree value={42} />);
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("renders a bare boolean root", () => {
+    render(<JsonTree value={true} />);
+    expect(screen.getByText("true")).toBeInTheDocument();
+  });
 });
diff --git a/frontend/src/expr/JsonTree.tsx b/frontend/src/expr/JsonTree.tsx
index 9e0f43b..e4753e2 100644
--- a/frontend/src/expr/JsonTree.tsx
+++ b/frontend/src/expr/JsonTree.tsx
@@ -33,6 +33,27 @@ interface NodeProps {
 function Node({ label, value, path, depth, pickable, onPick }: NodeProps) {
   // Root — render children as top-level rows without a wrapping expando.
   if (depth === 0) {
+    // Scalar root (string/number/bool): render as a single labelless leaf so
+    // e.g. `output = "hello"` shows the value. Without this branch, scalar
+    // roots would render as an empty <ul> because renderChildren only handles
+    // arrays and objects.
+    if (!Array.isArray(value) && !(value !== null && typeof value === "object")) {
+      return (
+        <ul className="text-xs font-mono">
+          <li className="py-0.5 px-1">
+            {typeof value === "string" ? (
+              <>
+                <span className="text-slate-500">"</span>
+                <span className="text-slate-300 break-words">{value}</span>
+                <span className="text-slate-500">"</span>
+              </>
+            ) : (
+              <span className="text-slate-300">{leafPreview(value)}</span>
+            )}
+          </li>
+        </ul>
+      );
+    }
     return (
       <ul className="text-xs font-mono">
         {renderChildren(value, path, depth, pickable, onPick)}