fix(editor): JsonTree renders scalar roots so bare-value items are visible

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

@@ -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();
+  });
 });

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)}