robodev 0.42.0 → 0.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "robodev",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "description": "CLI for Robodev Starbase — create, auth, link, deploy, load, and run a project locally with robodev dev",
   "type": "module",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "embedded-postgres": "17.10.0-beta.17",
     "fastify": "^5.12.1",
     "tsx": "^4.20.5",
-    "@robodev-ai/runtime": "0.5.1",
+    "@robodev-ai/runtime": "0.6.0",
     "@robodev-ai/sdk": "0.13.0"
   },
   "devDependencies": {

package/src/dev-inspect.test.ts

@@ -24,6 +24,7 @@ const fileRuntime = {
 
 test("isInspectPath covers dashboard pages and JSON only", () => {
   assert.equal(isInspectPath("/_robodev"), true);
+  assert.equal(isInspectPath("/_robodev/databases"), true);
   assert.equal(isInspectPath("/_robodev/apis"), true);
   assert.equal(isInspectPath("/_robodev/jobs"), true);
   assert.equal(isInspectPath("/_robodev/emails"), true);
@@ -34,6 +35,8 @@ test("isInspectPath covers dashboard pages and JSON only", () => {
   assert.equal(isInspectPath("/storage/objects/avatar.png"), false);
   assert.equal(isInspectPath("/_robodev/state.json"), true);
   assert.equal(isInspectPath("/_robodev/logs.json"), true);
+  assert.equal(isInspectPath("/_robodev/db/schema.json"), true);
+  assert.equal(isInspectPath("/_robodev/db/rows.json"), true);
   assert.equal(isInspectPath("/_robodev/docs"), false);
   assert.equal(isInspectPath("/_robodev/ready"), false);
   assert.equal(isInspectPath("/_robodev/scalar"), false);
@@ -48,6 +51,9 @@ test("shouldCountRequestHistogram counts Auth and matched file routes only", ()
   assert.equal(shouldCountRequestHistogram("/api/planets", fileRuntime, "POST"), false);
   assert.equal(shouldCountRequestHistogram("/api/unknown", fileRuntime, "GET"), false);
   assert.equal(shouldCountRequestHistogram("/_robodev", fileRuntime, "GET"), false);
+  assert.equal(shouldCountRequestHistogram("/_robodev/databases", fileRuntime, "GET"), false);
+  assert.equal(shouldCountRequestHistogram("/_robodev/db/schema.json", fileRuntime, "GET"), false);
+  assert.equal(shouldCountRequestHistogram("/_robodev/db/rows.json", fileRuntime, "GET"), false);
   assert.equal(shouldCountRequestHistogram("/_robodev/apis", fileRuntime, "GET"), false);
   assert.equal(shouldCountRequestHistogram("/_robodev/storage", fileRuntime, "GET"), false);
   assert.equal(shouldCountRequestHistogram("/_robodev/sockets", fileRuntime, "GET"), false);
@@ -251,20 +257,26 @@ test("incomplete Google credentials are not labeled override", async () => {
 test("inspect HTML has nav labels and polls state.json", () => {
   const html = inspectHtml();
   assert.match(html, />Overview</);
+  assert.match(html, />Databases</);
   assert.match(html, />APIs</);
   assert.match(html, />Jobs</);
   assert.match(html, />Emails</);
   assert.match(html, />Auth</);
   assert.match(html, />Storage</);
   assert.match(html, />Sockets</);
+  assert.match(html, /\/_robodev\/databases/);
   assert.match(html, /\/_robodev\/storage/);
   assert.match(html, /\/_robodev\/sockets/);
+  assert.match(html, /data-nav="overview"[\s\S]*data-nav="databases"[\s\S]*data-nav="apis"/);
   assert.doesNotMatch(html, /<h2>Requests<\/h2>/);
   assert.doesNotMatch(html, /<h2>Emails<\/h2>/);
   assert.doesNotMatch(html, /<h2>Jobs<\/h2>/);
   assert.doesNotMatch(html, /<h2>Logs<\/h2>/);
   assert.match(html, /\/_robodev\/state\.json/);
+  assert.match(html, /\/_robodev\/db\/schema\.json/);
+  assert.match(html, /\/_robodev\/db\/rows\.json/);
   assert.doesNotMatch(html, /fetch\("\/_robodev\/logs\.json"\)/);
+  assert.doesNotMatch(html, /@xyflow|React\.createElement|react-dom/);
   assert.match(html, /setInterval\(poll, 1000\)/);
 });
 

package/src/dev-inspect.ts

@@ -13,6 +13,7 @@ export const HISTOGRAM_MINUTES = 120;
 
 const DASHBOARD_HTML_PATHS = new Set([
   "/_robodev",
+  "/_robodev/databases",
   "/_robodev/apis",
   "/_robodev/jobs",
   "/_robodev/emails",
@@ -22,7 +23,12 @@ const DASHBOARD_HTML_PATHS = new Set([
   "/_robodev/logs",
 ]);
 
-const DASHBOARD_JSON_PATHS = new Set(["/_robodev/state.json", "/_robodev/logs.json"]);
+const DASHBOARD_JSON_PATHS = new Set([
+  "/_robodev/state.json",
+  "/_robodev/logs.json",
+  "/_robodev/db/schema.json",
+  "/_robodev/db/rows.json",
+]);
 
 const HISTOGRAM_EXCLUDED_PATHS = new Set([
   ...DASHBOARD_HTML_PATHS,
@@ -684,9 +690,42 @@ export function inspectHtml(): string {
       .bad-text { color: #dc2626; }
       .page { display: none; }
       .page.visible { display: block; }
+      .er-wrap {
+        overflow: auto;
+        height: 360px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        margin: 0 0 16px;
+      }
+      .er-canvas { position: relative; min-height: 200px; }
+      .er-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+      .er-card {
+        position: absolute;
+        width: 240px;
+        box-sizing: border-box;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 8px;
+        background: Canvas;
+        cursor: grab;
+        user-select: none;
+      }
+      .er-card.selected { border-width: 2px; border-color: currentColor; }
+      .er-card h3 { margin: 0 0 6px; font-size: 0.82rem; }
+      .er-col {
+        display: flex;
+        gap: 6px;
+        font-size: 11px;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      }
+      .er-col .pk { width: 12px; flex-shrink: 0; opacity: 0.7; }
+      .er-col .type { opacity: 0.65; }
+      .db-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; font-size: 0.85rem; }
+      .db-bar input, .db-bar select, .db-filter input, .db-filter select { font: inherit; font-size: 0.85rem; }
+      .db-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
       @media (prefers-color-scheme: dark) {
         .lead, .empty, .card .label, .chart-title, .legend { color: #9aa0a6; }
-        .card, .chart { border-color: #333; }
+        .card, .chart, .er-wrap, .er-card { border-color: #333; }
         th, td { border-bottom-color: #2a2a2a; }
         .tabs button, .clear { border-color: #555; }
       }
@@ -697,6 +736,7 @@ export function inspectHtml(): string {
       <h1>robodev dev</h1>
       <nav>
         <a href="/_robodev" data-nav="overview">Overview</a>
+        <a href="/_robodev/databases" data-nav="databases">Databases</a>
         <a href="/_robodev/apis" data-nav="apis">APIs</a>
         <a href="/_robodev/jobs" data-nav="jobs">Jobs</a>
         <a href="/_robodev/emails" data-nav="emails">Emails</a>
@@ -735,6 +775,26 @@ export function inspectHtml(): string {
       </div>
     </section>
 
+    <section id="page-databases" class="page">
+      <div class="db-bar">
+        <button type="button" id="db-reset" class="clear">Reset</button>
+      </div>
+      <div id="db-er-wrap" class="er-wrap">
+        <div id="db-er" class="er-canvas"></div>
+      </div>
+      <p id="db-schema-status" class="empty" hidden></p>
+      <div class="db-bar">
+        <label>Table <select id="db-table"></select></label>
+        <input id="db-q" type="search" placeholder="Search" maxlength="200" />
+        <button type="button" id="db-apply" class="clear">Apply</button>
+        <button type="button" id="db-add-filter" class="clear">Add filter</button>
+      </div>
+      <div id="db-filters"></div>
+      <p id="db-rows-status" class="empty" hidden></p>
+      <div id="db-rows"></div>
+      <div id="db-pager" class="filter" hidden></div>
+    </section>
+
     <section id="page-apis" class="page">
       <div class="tabs">
         <button type="button" data-tab="routes">Routes</button>
@@ -785,6 +845,7 @@ export function inspectHtml(): string {
     <script>
       var PAGES = {
         "/_robodev": "overview",
+        "/_robodev/databases": "databases",
         "/_robodev/apis": "apis",
         "/_robodev/jobs": "jobs",
         "/_robodev/emails": "emails",
@@ -799,6 +860,29 @@ export function inspectHtml(): string {
       var storageFilter = null;
       var socketFilter = null;
       var lastState = null;
+      var dbSchema = null;
+      var dbSchemaError = null;
+      var dbSchemaLoading = false;
+      var dbRows = null;
+      var dbRowsError = null;
+      var dbSelected = null;
+      var dbOffset = 0;
+      var dbPositions = null;
+      var dbDrag = null;
+      var ER_W = 240;
+      var ER_XG = 72;
+      var ER_YG = 28;
+      var ER_HEAD = 28;
+      var ER_ROW = 18;
+      var ER_PAD = 16;
+      var DRAG_THRESHOLD = 4;
+      var SECRET_COLS = {
+        password_hash: true,
+        password: true,
+        secret: true,
+        access_token: true,
+        refresh_token: true
+      };
 
       function pagePath() {
         return location.pathname.replace(/\\/$/, "") || "/";
@@ -929,6 +1013,7 @@ export function inspectHtml(): string {
         for (var i = 0; i < sections.length; i++) {
           sections[i].className = sections[i].id === "page-" + page ? "page visible" : "page";
         }
+        if (page === "databases") ensureDbSchema();
       }
       function setApisTab(tab) {
         apisTab = tab;
@@ -1180,6 +1265,525 @@ export function inspectHtml(): string {
         setSocketTab("events");
         if (lastState) render(lastState);
       });
+      function isSecretCol(name) {
+        return Boolean(SECRET_COLS[String(name).toLowerCase()]);
+      }
+      function visibleCols(columns) {
+        return (columns || []).filter(function (column) { return !isSecretCol(column.name); });
+      }
+      function tableIdentity(table) {
+        return table.schema === "public" ? table.name : table.schema + "." + table.name;
+      }
+      function tableKeyOf(schema, name) {
+        return schema + "." + name;
+      }
+      function estimateCardH(columnCount) {
+        return ER_HEAD + Math.max(columnCount, 1) * ER_ROW + ER_PAD;
+      }
+      function fkCols(fk) {
+        return Array.isArray(fk.columns) ? fk.columns : [];
+      }
+      function fkRefs(fk) {
+        return Array.isArray(fk.referencedColumns) ? fk.referencedColumns : [];
+      }
+      function fkTitle(fk) {
+        var cols = fkCols(fk);
+        var refs = fkRefs(fk);
+        return cols.map(function (column, index) {
+          return column + " → " + (refs[index] || "?");
+        }).join(", ");
+      }
+      function layoutDb(tables) {
+        var keys = tables.map(function (table) { return tableKeyOf(table.schema, table.name); });
+        var keySet = {};
+        var incoming = {};
+        var outgoing = {};
+        for (var i = 0; i < keys.length; i++) {
+          keySet[keys[i]] = true;
+          incoming[keys[i]] = 0;
+          outgoing[keys[i]] = [];
+        }
+        for (var t = 0; t < tables.length; t++) {
+          var table = tables[t];
+          var source = tableKeyOf(table.schema, table.name);
+          var seen = {};
+          var fks = table.foreignKeys || [];
+          for (var f = 0; f < fks.length; f++) {
+            var target = tableKeyOf(fks[f].referencedSchema, fks[f].referencedTable);
+            if (!keySet[target] || target === source || seen[target]) continue;
+            seen[target] = true;
+            outgoing[source].push(target);
+            incoming[target] = (incoming[target] || 0) + 1;
+          }
+        }
+        var layer = {};
+        var queue = [];
+        for (var k = 0; k < keys.length; k++) {
+          if ((incoming[keys[k]] || 0) === 0) {
+            layer[keys[k]] = 0;
+            queue.push(keys[k]);
+          }
+        }
+        for (var qi = 0; qi < queue.length; qi++) {
+          var current = queue[qi];
+          var nextLayer = (layer[current] || 0) + 1;
+          var dests = outgoing[current] || [];
+          for (var d = 0; d < dests.length; d++) {
+            if (layer[dests[d]] === undefined) {
+              layer[dests[d]] = nextLayer;
+              queue.push(dests[d]);
+            }
+          }
+        }
+        for (var k2 = 0; k2 < keys.length; k2++) {
+          if (layer[keys[k2]] === undefined) layer[keys[k2]] = 0;
+        }
+        var byLayer = {};
+        for (var t2 = 0; t2 < tables.length; t2++) {
+          var idx = layer[tableKeyOf(tables[t2].schema, tables[t2].name)] || 0;
+          if (!byLayer[idx]) byLayer[idx] = [];
+          byLayer[idx].push(tables[t2]);
+        }
+        var positions = {};
+        var layerKeys = Object.keys(byLayer).map(Number).sort(function (a, b) { return a - b; });
+        for (var li = 0; li < layerKeys.length; li++) {
+          var layerTables = byLayer[layerKeys[li]];
+          var y = 16;
+          for (var lt = 0; lt < layerTables.length; lt++) {
+            var laid = layerTables[lt];
+            var vis = visibleCols(laid.columns);
+            var key = tableKeyOf(laid.schema, laid.name);
+            positions[key] = {
+              x: 16 + layerKeys[li] * (ER_W + ER_XG),
+              y: y,
+              h: estimateCardH(vis.length)
+            };
+            y += positions[key].h + ER_YG;
+          }
+        }
+        return positions;
+      }
+      function selectedTable() {
+        if (!dbSelected || !dbSchema) return null;
+        for (var i = 0; i < dbSchema.length; i++) {
+          if (dbSchema[i].schema === dbSelected.schema && dbSchema[i].name === dbSelected.name) {
+            return dbSchema[i];
+          }
+        }
+        return null;
+      }
+      function setDbStatus(id, message) {
+        var el = document.getElementById(id);
+        if (!message) {
+          el.hidden = true;
+          el.textContent = "";
+          return;
+        }
+        el.hidden = false;
+        el.textContent = message;
+      }
+      function drawDbEdges(svg) {
+        while (svg.firstChild) svg.removeChild(svg.firstChild);
+        if (!dbSchema || !dbPositions) return;
+        for (var i = 0; i < dbSchema.length; i++) {
+          var fks = dbSchema[i].foreignKeys || [];
+          for (var f = 0; f < fks.length; f++) {
+            var fk = fks[f];
+            var src = tableKeyOf(fk.schema, fk.table);
+            var tgt = tableKeyOf(fk.referencedSchema, fk.referencedTable);
+            var a = dbPositions[src];
+            var b = dbPositions[tgt];
+            if (!a || !b) continue;
+            var x1 = a.x + ER_W;
+            var y1 = a.y + a.h / 2;
+            var x2 = b.x;
+            var y2 = b.y + b.h / 2;
+            var mx = (x1 + x2) / 2;
+            var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            path.setAttribute("d", "M " + x1 + " " + y1 + " C " + mx + " " + y1 + ", " + mx + " " + y2 + ", " + x2 + " " + y2);
+            path.setAttribute("fill", "none");
+            path.setAttribute("stroke", "currentColor");
+            path.setAttribute("stroke-opacity", "0.4");
+            var title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+            title.textContent = fkTitle(fk);
+            path.appendChild(title);
+            svg.appendChild(path);
+          }
+        }
+      }
+      function growDbCanvas(canvas) {
+        var maxX = 280;
+        var maxY = 200;
+        if (dbPositions) {
+          var keys = Object.keys(dbPositions);
+          for (var i = 0; i < keys.length; i++) {
+            var pos = dbPositions[keys[i]];
+            maxX = Math.max(maxX, pos.x + ER_W + 40);
+            maxY = Math.max(maxY, pos.y + pos.h + 40);
+          }
+        }
+        canvas.style.width = maxX + "px";
+        canvas.style.height = maxY + "px";
+      }
+      function renderEr() {
+        var canvas = document.getElementById("db-er");
+        canvas.replaceChildren();
+        if (!dbSchema || !dbSchema.length) {
+          canvas.appendChild(emptyNode());
+          canvas.style.width = "";
+          canvas.style.height = "200px";
+          return;
+        }
+        if (!dbPositions) dbPositions = layoutDb(dbSchema);
+        growDbCanvas(canvas);
+        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "er-svg");
+        canvas.appendChild(svg);
+        drawDbEdges(svg);
+        var selectedKey = dbSelected ? tableKeyOf(dbSelected.schema, dbSelected.name) : "";
+        for (var i = 0; i < dbSchema.length; i++) {
+          (function (table) {
+            var key = tableKeyOf(table.schema, table.name);
+            var pos = dbPositions[key];
+            if (!pos) return;
+            var vis = visibleCols(table.columns);
+            var card = document.createElement("div");
+            card.className = "er-card" + (key === selectedKey ? " selected" : "");
+            card.style.left = pos.x + "px";
+            card.style.top = pos.y + "px";
+            var heading = document.createElement("h3");
+            heading.textContent = tableIdentity(table);
+            card.appendChild(heading);
+            for (var c = 0; c < vis.length; c++) {
+              var row = document.createElement("div");
+              row.className = "er-col";
+              var pk = document.createElement("span");
+              pk.className = "pk";
+              pk.textContent = vis[c].primaryKey ? "•" : "";
+              var name = document.createElement("span");
+              name.textContent = vis[c].name;
+              var type = document.createElement("span");
+              type.className = "type";
+              type.textContent = vis[c].type + (vis[c].notNull ? "" : "?");
+              row.appendChild(pk);
+              row.appendChild(name);
+              row.appendChild(type);
+              card.appendChild(row);
+            }
+            card.addEventListener("pointerdown", function (event) {
+              if (event.button !== 0) return;
+              card.setPointerCapture(event.pointerId);
+              dbDrag = {
+                key: key,
+                sx: event.clientX,
+                sy: event.clientY,
+                ox: pos.x,
+                oy: pos.y,
+                moved: false
+              };
+            });
+            card.addEventListener("pointermove", function (event) {
+              if (!dbDrag || dbDrag.key !== key) return;
+              var dx = event.clientX - dbDrag.sx;
+              var dy = event.clientY - dbDrag.sy;
+              if (!dbDrag.moved && Math.abs(dx) < DRAG_THRESHOLD && Math.abs(dy) < DRAG_THRESHOLD) return;
+              dbDrag.moved = true;
+              pos.x = Math.max(0, dbDrag.ox + dx);
+              pos.y = Math.max(0, dbDrag.oy + dy);
+              card.style.left = pos.x + "px";
+              card.style.top = pos.y + "px";
+              growDbCanvas(canvas);
+              drawDbEdges(svg);
+            });
+            card.addEventListener("pointerup", function () {
+              if (!dbDrag || dbDrag.key !== key) return;
+              var moved = dbDrag.moved;
+              dbDrag = null;
+              if (!moved) selectDbTable(table.schema, table.name, true);
+            });
+            canvas.appendChild(card);
+          })(dbSchema[i]);
+        }
+      }
+      function fillTableSelect() {
+        var select = document.getElementById("db-table");
+        select.replaceChildren();
+        if (!dbSchema) return;
+        for (var i = 0; i < dbSchema.length; i++) {
+          var option = document.createElement("option");
+          option.value = tableKeyOf(dbSchema[i].schema, dbSchema[i].name);
+          option.textContent = tableIdentity(dbSchema[i]);
+          if (dbSelected && dbSelected.schema === dbSchema[i].schema && dbSelected.name === dbSchema[i].name) {
+            option.selected = true;
+          }
+          select.appendChild(option);
+        }
+      }
+      function filterableColumns() {
+        var table = selectedTable();
+        return table ? visibleCols(table.columns) : [];
+      }
+      function addDbFilterRow(preset) {
+        var columns = filterableColumns();
+        var row = document.createElement("div");
+        row.className = "db-filter";
+        var col = document.createElement("select");
+        for (var i = 0; i < columns.length; i++) {
+          var option = document.createElement("option");
+          option.value = columns[i].name;
+          option.textContent = columns[i].name;
+          if (preset && preset.column === columns[i].name) option.selected = true;
+          col.appendChild(option);
+        }
+        var op = document.createElement("select");
+        var ops = [
+          { value: "eq", label: "equals" },
+          { value: "contains", label: "contains" },
+          { value: "is_null", label: "is empty" },
+          { value: "is_not_null", label: "is not empty" }
+        ];
+        for (var o = 0; o < ops.length; o++) {
+          var opOpt = document.createElement("option");
+          opOpt.value = ops[o].value;
+          opOpt.textContent = ops[o].label;
+          if (preset && preset.op === ops[o].value) opOpt.selected = true;
+          op.appendChild(opOpt);
+        }
+        var value = document.createElement("input");
+        value.type = "text";
+        value.placeholder = "Value";
+        if (preset && preset.value) value.value = preset.value;
+        var remove = document.createElement("button");
+        remove.type = "button";
+        remove.className = "clear";
+        remove.textContent = "Remove";
+        function syncValue() {
+          value.hidden = op.value === "is_null" || op.value === "is_not_null";
+        }
+        op.addEventListener("change", syncValue);
+        remove.addEventListener("click", function () { row.remove(); });
+        syncValue();
+        row.appendChild(col);
+        row.appendChild(op);
+        row.appendChild(value);
+        row.appendChild(remove);
+        document.getElementById("db-filters").appendChild(row);
+      }
+      function collectDbFilters() {
+        var rows = document.querySelectorAll("#db-filters .db-filter");
+        var filters = [];
+        for (var i = 0; i < rows.length; i++) {
+          var selects = rows[i].querySelectorAll("select");
+          var input = rows[i].querySelector("input");
+          var column = selects[0] && selects[0].value;
+          var op = selects[1] && selects[1].value;
+          if (!column || !op) continue;
+          if (isSecretCol(column)) continue;
+          var filter = { column: column, op: op };
+          if (op === "eq" || op === "contains") filter.value = input ? input.value : "";
+          if ((op === "eq" || op === "contains") && !filter.value) continue;
+          filters.push(filter);
+        }
+        return filters;
+      }
+      function clearDbFilters() {
+        document.getElementById("db-filters").replaceChildren();
+      }
+      function renderDbRows() {
+        var host = document.getElementById("db-rows");
+        if (dbRowsError) {
+          fill(host, emptyNode());
+          return;
+        }
+        if (!dbRows) {
+          host.replaceChildren();
+          return;
+        }
+        var headers = dbRows.columns || [];
+        fill(host, table(
+          headers,
+          dbRows.rows.map(function (row) {
+            return {
+              cells: headers.map(function (column) {
+                var value = row[column];
+                if (isSecretCol(column)) return "***";
+                if (value === null || value === undefined) return "null";
+                if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+                  return String(value);
+                }
+                try { return JSON.stringify(value); }
+                catch (e) { return String(value); }
+              })
+            };
+          })
+        ));
+        var pager = document.getElementById("db-pager");
+        var total = dbRows.total || 0;
+        if (!total) {
+          pager.hidden = true;
+          pager.replaceChildren();
+          return;
+        }
+        pager.hidden = false;
+        pager.replaceChildren();
+        var start = dbOffset + 1;
+        var end = Math.min(dbOffset + 50, total);
+        var label = document.createElement("span");
+        label.textContent = start + "–" + end + " of " + total;
+        var prev = document.createElement("button");
+        prev.type = "button";
+        prev.className = "clear";
+        prev.textContent = "Prev";
+        prev.disabled = dbOffset <= 0;
+        prev.addEventListener("click", function () {
+          dbOffset = Math.max(0, dbOffset - 50);
+          loadDbRows();
+        });
+        var next = document.createElement("button");
+        next.type = "button";
+        next.className = "clear";
+        next.textContent = "Next";
+        next.disabled = dbOffset + 50 >= total;
+        next.addEventListener("click", function () {
+          dbOffset += 50;
+          loadDbRows();
+        });
+        pager.appendChild(label);
+        pager.appendChild(prev);
+        pager.appendChild(next);
+      }
+      function defaultDbTable() {
+        if (!dbSchema || !dbSchema.length) return null;
+        for (var i = 0; i < dbSchema.length; i++) {
+          if (dbSchema[i].schema === "public") return dbSchema[i];
+        }
+        return dbSchema[0];
+      }
+      function selectDbTable(schema, name, resetQuery) {
+        dbSelected = { schema: schema, name: name };
+        if (resetQuery) {
+          dbOffset = 0;
+          document.getElementById("db-q").value = "";
+          clearDbFilters();
+        }
+        fillTableSelect();
+        renderEr();
+        loadDbRows();
+      }
+      async function loadDbRows() {
+        if (!dbSelected) {
+          dbRows = null;
+          dbRowsError = null;
+          setDbStatus("db-rows-status", dbSchema && dbSchema.length ? "" : "None yet");
+          renderDbRows();
+          return;
+        }
+        var params = new URLSearchParams();
+        params.set("schema", dbSelected.schema);
+        params.set("table", dbSelected.name);
+        params.set("limit", "50");
+        params.set("offset", String(dbOffset));
+        var q = document.getElementById("db-q").value.trim().slice(0, 200);
+        if (q) params.set("q", q);
+        var filters = collectDbFilters();
+        if (filters.length) params.set("filters", JSON.stringify(filters));
+        try {
+          var response = await fetch("/_robodev/db/rows.json?" + params.toString());
+          var body = await response.json();
+          if (!response.ok) {
+            dbRows = null;
+            dbRowsError = body.error || ("HTTP " + response.status);
+            setDbStatus("db-rows-status", dbRowsError);
+            renderDbRows();
+            return;
+          }
+          dbRows = body;
+          dbRowsError = null;
+          setDbStatus("db-rows-status", body.rows && body.rows.length ? "" : "None yet");
+          renderDbRows();
+        } catch (e) {
+          dbRows = null;
+          dbRowsError = "Could not load rows";
+          setDbStatus("db-rows-status", dbRowsError);
+          renderDbRows();
+        }
+      }
+      async function loadDbSchema(resetViewport) {
+        dbSchemaLoading = true;
+        dbSchemaError = null;
+        setDbStatus("db-schema-status", "");
+        try {
+          var response = await fetch("/_robodev/db/schema.json");
+          var body = await response.json();
+          if (!response.ok) {
+            dbSchema = null;
+            dbPositions = null;
+            dbSelected = null;
+            dbSchemaError = body.error || ("HTTP " + response.status);
+            setDbStatus("db-schema-status", dbSchemaError);
+            fillTableSelect();
+            renderEr();
+            dbRows = null;
+            renderDbRows();
+            return;
+          }
+          dbSchema = body.tables || [];
+          dbPositions = layoutDb(dbSchema);
+          if (resetViewport) {
+            var wrap = document.getElementById("db-er-wrap");
+            wrap.scrollLeft = 0;
+            wrap.scrollTop = 0;
+          }
+          var next = defaultDbTable();
+          if (next) {
+            selectDbTable(next.schema, next.name, true);
+          } else {
+            dbSelected = null;
+            fillTableSelect();
+            renderEr();
+            dbRows = null;
+            setDbStatus("db-rows-status", "None yet");
+            renderDbRows();
+          }
+        } catch (e) {
+          dbSchema = null;
+          dbPositions = null;
+          dbSchemaError = "Could not load schema";
+          setDbStatus("db-schema-status", dbSchemaError);
+          renderEr();
+        } finally {
+          dbSchemaLoading = false;
+        }
+      }
+      function ensureDbSchema() {
+        if (dbSchemaLoading || dbSchema || dbSchemaError) return;
+        loadDbSchema(true);
+      }
+      document.getElementById("db-reset").addEventListener("click", function () {
+        dbSchema = null;
+        dbSchemaError = null;
+        dbPositions = null;
+        loadDbSchema(true);
+      });
+      document.getElementById("db-table").addEventListener("change", function (event) {
+        var value = event.target.value;
+        var dot = value.indexOf(".");
+        if (dot < 0) return;
+        selectDbTable(value.slice(0, dot), value.slice(dot + 1), true);
+      });
+      document.getElementById("db-apply").addEventListener("click", function () {
+        dbOffset = 0;
+        loadDbRows();
+      });
+      document.getElementById("db-q").addEventListener("keydown", function (event) {
+        if (event.key === "Enter") {
+          dbOffset = 0;
+          loadDbRows();
+        }
+      });
+      document.getElementById("db-add-filter").addEventListener("click", function () {
+        addDbFilterRow();
+      });
       async function poll() {
         try {
           var state = await fetch("/_robodev/state.json").then(function (r) { return r.json(); });

package/src/dev-server.ts

@@ -4,9 +4,12 @@ import websocket from "@fastify/websocket";
 import Fastify, { type FastifyInstance, type FastifyReply, type FastifyRequest } from "fastify";
 import type { WebSocket } from "ws";
 import {
+  BrowseError,
   SOCKET_CLOSE_POLICY,
   SOCKET_IDLE_PING_MS,
   bindSocketSession,
+  browseRows,
+  browseSchema,
   buildOpenApi,
   handleLocalAuth,
   isLocalAuthPath,
@@ -21,6 +24,7 @@ import {
   swaggerHtml,
   verifyStorageServeToken,
   type AuthQueryable,
+  type BrowseRowFilter,
   type RuntimeRoute,
   type RuntimeSocket,
 } from "@robodev-ai/runtime";
@@ -82,6 +86,43 @@ function rawBodyOf(request: FastifyRequest): Buffer | undefined {
   return (request as FastifyRequest & { rawBody?: Buffer }).rawBody;
 }
 
+const BROWSE_FILTER_OPS = new Set(["eq", "contains", "is_null", "is_not_null"]);
+
+function parseInspectRowFilters(raw: string | undefined): BrowseRowFilter[] | undefined {
+  if (!raw) return undefined;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    throw new BrowseError(400, "Invalid filters");
+  }
+  if (!Array.isArray(parsed)) {
+    throw new BrowseError(400, "Invalid filters");
+  }
+  return parsed.map((item) => {
+    if (!item || typeof item !== "object") {
+      throw new BrowseError(400, "Invalid filters");
+    }
+    const filter = item as { column?: unknown; op?: unknown; value?: unknown };
+    if (typeof filter.column !== "string" || !BROWSE_FILTER_OPS.has(String(filter.op))) {
+      throw new BrowseError(400, "Invalid filters");
+    }
+    const next: BrowseRowFilter = {
+      column: filter.column,
+      op: filter.op as BrowseRowFilter["op"],
+    };
+    if (filter.value !== undefined) next.value = String(filter.value);
+    return next;
+  });
+}
+
+function sendInspectBrowseError(reply: FastifyReply, error: unknown) {
+  if (error instanceof BrowseError) {
+    return reply.code(error.statusCode).send({ error: error.message });
+  }
+  throw error;
+}
+
 function queryRecord(query: unknown): Record<string, string> {
   if (!query || typeof query !== "object") return {};
   const out: Record<string, string> = {};
@@ -478,6 +519,47 @@ export async function startDevServer(
           }),
         );
       }
+      if (pathname === "/_robodev/db/schema.json") {
+        const runtime = getRuntime();
+        if (!runtime?.pool) {
+          return reply.code(503).send({ error: "database unavailable" });
+        }
+        try {
+          return reply.send({ tables: await browseSchema(runtime.pool) });
+        } catch (error) {
+          return sendInspectBrowseError(reply, error);
+        }
+      }
+      if (pathname === "/_robodev/db/rows.json") {
+        const runtime = getRuntime();
+        if (!runtime?.pool) {
+          return reply.code(503).send({ error: "database unavailable" });
+        }
+        const query = queryRecord(request.query);
+        if (!query.schema) {
+          return reply.code(400).send({ error: "schema is required" });
+        }
+        if (!query.table) {
+          return reply.code(400).send({ error: "table is required" });
+        }
+        const limit = query.limit ? Number(query.limit) : 50;
+        const offset = query.offset ? Number(query.offset) : 0;
+        if (!Number.isFinite(limit) || !Number.isFinite(offset)) {
+          return reply.code(400).send({ error: "Invalid limit or offset" });
+        }
+        const q = query.q?.trim().slice(0, 200);
+        try {
+          const filters = parseInspectRowFilters(query.filters);
+          return reply.send(
+            await browseRows(runtime.pool, query.schema, query.table, limit, offset, {
+              q: q || undefined,
+              filters,
+            }),
+          );
+        } catch (error) {
+          return sendInspectBrowseError(reply, error);
+        }
+      }
       return reply.type("text/html; charset=utf-8").send(options.inspect.html());
     }
 

package/src/index.ts

@@ -489,7 +489,31 @@ async function assertCreatable(root: string): Promise<void> {
   }
 }
 
-async function npmInstallRobodevDeps(root: string): Promise<void> {
+const CREATE_PNPM_VERSION = "10.14.0";
+
+async function spawnInherit(command: string, args: string[], cwd?: string): Promise<void> {
+  await new Promise<void>((resolve, reject) => {
+    const child = spawn(command, args, { cwd, stdio: "inherit" });
+    child.on("error", reject);
+    child.on("exit", (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`${command} ${args.join(" ")} failed (${code})`));
+    });
+  });
+}
+
+async function ensurePnpm(): Promise<{ command: string; prefix: string[] }> {
+  if (await commandAvailable("pnpm")) return { command: "pnpm", prefix: [] };
+  if (!(await commandAvailable("corepack"))) {
+    throw new Error("pnpm is not available. Enable it with Corepack (Node 22) or install pnpm.");
+  }
+  await spawnInherit("corepack", ["enable"]);
+  await spawnInherit("corepack", ["prepare", `pnpm@${CREATE_PNPM_VERSION}`, "--activate"]);
+  if (await commandAvailable("pnpm")) return { command: "pnpm", prefix: [] };
+  return { command: "corepack", prefix: ["pnpm"] };
+}
+
+async function pnpmInstallRobodevDeps(root: string): Promise<void> {
   const pkgPath = join(root, "robodev", "package.json");
   let raw: string;
   try {
@@ -506,18 +530,19 @@ async function npmInstallRobodevDeps(root: string): Promise<void> {
   const deps = pkg.dependencies ?? {};
   const extra = Object.keys(deps).filter((name) => name !== "@robodev-ai/sdk");
   if (extra.length === 0) return;
-  console.log("Installing robodev/ npm packages…");
-  await npmInstall(join(root, "robodev"));
+  console.log("Installing robodev/ packages…");
+  await pnpmInstall(join(root, "robodev"));
 }
 
-async function npmInstall(root: string): Promise<void> {
-  console.log("Installing npm packages…");
+async function pnpmInstall(root: string): Promise<void> {
+  console.log("Installing packages…");
+  const pnpm = await ensurePnpm();
   await new Promise<void>((resolve, reject) => {
-    const child = spawn("npm", ["install"], { cwd: root, stdio: "inherit" });
+    const child = spawn(pnpm.command, [...pnpm.prefix, "install"], { cwd: root, stdio: "inherit" });
     child.on("error", reject);
     child.on("exit", (code) => {
       if (code === 0) resolve();
-      else reject(new Error(`npm install failed (${code})`));
+      else reject(new Error(`pnpm install failed (${code})`));
     });
   });
 }
@@ -607,20 +632,20 @@ async function runCreate(args: string[]): Promise<void> {
   const liveUrl = await runDeploy(false, { root, frontendFiles, skipFrontendBuild });
 
   try {
-    await npmInstall(root);
-    await npmInstallRobodevDeps(root);
+    await pnpmInstall(root);
+    await pnpmInstallRobodevDeps(root);
   } catch (error) {
     console.log(error instanceof Error ? error.message : error);
     if (starter.kind === "backend") {
       console.log(
-        "npm install failed. Copy the API URL printed above into Lovable, Bolt, or v0 as VITE_API_URL.",
+        "pnpm install failed. Copy the API URL printed above into Lovable, Bolt, or v0 as VITE_API_URL.",
       );
       console.log("https://robodev.povio.dev/docs/frontend");
     } else if (await hasAppsFe(root)) {
-      console.log("Run `npm install` in the project folder.");
+      console.log("Run `pnpm install` in the project folder.");
       console.log("bun is required for apps/fe. APIs are already deployed.");
     } else {
-      console.log("Run `npm install` in the project folder, then `npm run dev`.");
+      console.log("Run `pnpm install` in the project folder, then `pnpm run dev`.");
     }
     if (liveUrl) {
       printLiveUrl(liveUrl);
@@ -650,7 +675,7 @@ async function runCreate(args: string[]): Promise<void> {
     console.log("  The project App URL serves the hosted Welcome page.");
     console.log("  Edit index.html and src/, then robodev deploy (or Code + Save).");
     console.log("  robodev dev          # local APIs");
-    console.log("  npm run dev:fe       # optional local Vite");
+    console.log("  pnpm run dev:fe      # optional local Vite");
   }
   if (liveUrl) {
     printLiveUrl(liveUrl);

package/templates/auth-chat/apps/fe/vite.config.ts

@@ -4,13 +4,39 @@ import tailwindCSS from "@tailwindcss/vite";
 import { devtools } from "@tanstack/devtools-vite";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import viteReact from "@vitejs/plugin-react";
-import { readFileSync } from "node:fs";
+import { copyFileSync, existsSync, readdirSync, readFileSync } from "node:fs";
 import { join } from "node:path";
-import { defineConfig as defineViteConfig, mergeConfig } from "vite";
+import { defineConfig as defineViteConfig, mergeConfig, type Plugin } from "vite";
 import devtoolsJson from "vite-plugin-devtools-json";
 import { defineConfig as defineVitestConfig } from "vitest/config";
 import { reactIconsSprite } from "react-icons-sprite/vite";
 
+/** react-icons-sprite maps Trash2 → trash2.mjs and MenuIcon → menu-icon.mjs; lucide ships trash-2.mjs / menu.mjs. */
+function lucideSpriteIconAliases(): Plugin {
+  return {
+    name: "lucide-sprite-icon-aliases",
+    enforce: "pre",
+    apply: "build",
+    buildStart() {
+      const iconsDir = join(process.cwd(), "node_modules", "lucide-react", "dist", "esm", "icons");
+      if (!existsSync(iconsDir)) return;
+      for (const file of readdirSync(iconsDir)) {
+        if (!file.endsWith(".mjs")) continue;
+        const src = join(iconsDir, file);
+        const digit = /^(.+)-(\d+)\.mjs$/.exec(file);
+        if (digit) {
+          const dest = join(iconsDir, `${digit[1]}${digit[2]}.mjs`);
+          if (!existsSync(dest)) copyFileSync(src, dest);
+        }
+        if (!file.endsWith("-icon.mjs")) {
+          const dest = join(iconsDir, file.replace(/\.mjs$/, "-icon.mjs"));
+          if (!existsSync(dest)) copyFileSync(src, dest);
+        }
+      }
+    },
+  };
+}
+
 const repoRoot = new URL("../..", import.meta.url).pathname;
 
 function readDotEnvKey(root: string, key: string): string | undefined {
@@ -71,6 +97,7 @@ const createViteConfig = (isDevServer: boolean) => ({
     devtools({
       eventBusConfig: { enabled: false },
     }),
+    lucideSpriteIconAliases(),
     iconsSpritePlugin,
     viteReact({
       babel: {

package/templates/auth-chat/package.json

@@ -12,7 +12,7 @@
     "@robodev-ai/sdk": "^0.13.0"
   },
   "devDependencies": {
-    "robodev": "^0.42.0",
+    "robodev": "^0.44.0",
     "rulesync": "^8.18.0",
     "typescript": "^5.9.2"
   }

package/templates/backend/package.json

@@ -11,7 +11,7 @@
     "@robodev-ai/sdk": "^0.13.0"
   },
   "devDependencies": {
-    "robodev": "^0.42.0",
+    "robodev": "^0.44.0",
     "typescript": "^5.9.2"
   }
 }

package/templates/empty/README.md

@@ -7,7 +7,7 @@ The project App URL serves the hosted Welcome page. Edit `index.html` and `src/`
 ```bash
 robodev create my-app
 robodev dev          # local APIs
-npm run dev:fe       # optional local Vite
+pnpm run dev:fe      # optional local Vite
 ```
 
 `robodev create` (TTY and non-TTY) uses this starter by default. Pass `--template space` for Space. Lovable, Bolt, or v0 should use `--template backend`.

package/templates/empty/package.json

@@ -16,7 +16,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "robodev": "^0.42.0",
+    "robodev": "^0.44.0",
     "typescript": "^5.9.2",
     "vite": "^6.0.0"
   }

package/templates/marketplace/apps/fe/vite.config.ts

@@ -4,13 +4,39 @@ import tailwindCSS from "@tailwindcss/vite";
 import { devtools } from "@tanstack/devtools-vite";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import viteReact from "@vitejs/plugin-react";
-import { readFileSync } from "node:fs";
+import { copyFileSync, existsSync, readdirSync, readFileSync } from "node:fs";
 import { join } from "node:path";
-import { defineConfig as defineViteConfig, mergeConfig } from "vite";
+import { defineConfig as defineViteConfig, mergeConfig, type Plugin } from "vite";
 import devtoolsJson from "vite-plugin-devtools-json";
 import { defineConfig as defineVitestConfig } from "vitest/config";
 import { reactIconsSprite } from "react-icons-sprite/vite";
 
+/** react-icons-sprite maps Trash2 → trash2.mjs and MenuIcon → menu-icon.mjs; lucide ships trash-2.mjs / menu.mjs. */
+function lucideSpriteIconAliases(): Plugin {
+  return {
+    name: "lucide-sprite-icon-aliases",
+    enforce: "pre",
+    apply: "build",
+    buildStart() {
+      const iconsDir = join(process.cwd(), "node_modules", "lucide-react", "dist", "esm", "icons");
+      if (!existsSync(iconsDir)) return;
+      for (const file of readdirSync(iconsDir)) {
+        if (!file.endsWith(".mjs")) continue;
+        const src = join(iconsDir, file);
+        const digit = /^(.+)-(\d+)\.mjs$/.exec(file);
+        if (digit) {
+          const dest = join(iconsDir, `${digit[1]}${digit[2]}.mjs`);
+          if (!existsSync(dest)) copyFileSync(src, dest);
+        }
+        if (!file.endsWith("-icon.mjs")) {
+          const dest = join(iconsDir, file.replace(/\.mjs$/, "-icon.mjs"));
+          if (!existsSync(dest)) copyFileSync(src, dest);
+        }
+      }
+    },
+  };
+}
+
 const repoRoot = new URL("../..", import.meta.url).pathname;
 
 function readDotEnvKey(root: string, key: string): string | undefined {
@@ -71,6 +97,7 @@ const createViteConfig = (isDevServer: boolean) => ({
     devtools({
       eventBusConfig: { enabled: false },
     }),
+    lucideSpriteIconAliases(),
     iconsSpritePlugin,
     viteReact({
       babel: {

package/templates/marketplace/package.json

@@ -12,7 +12,7 @@
     "@robodev-ai/sdk": "^0.13.0"
   },
   "devDependencies": {
-    "robodev": "^0.42.0",
+    "robodev": "^0.44.0",
     "rulesync": "^8.18.0",
     "typescript": "^5.9.2"
   }

package/templates/space/apps/fe/vite.config.ts

@@ -4,13 +4,39 @@ import tailwindCSS from "@tailwindcss/vite";
 import { devtools } from "@tanstack/devtools-vite";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import viteReact from "@vitejs/plugin-react";
-import { readFileSync } from "node:fs";
+import { copyFileSync, existsSync, readdirSync, readFileSync } from "node:fs";
 import { join } from "node:path";
-import { defineConfig as defineViteConfig, mergeConfig } from "vite";
+import { defineConfig as defineViteConfig, mergeConfig, type Plugin } from "vite";
 import devtoolsJson from "vite-plugin-devtools-json";
 import { defineConfig as defineVitestConfig } from "vitest/config";
 import { reactIconsSprite } from "react-icons-sprite/vite";
 
+/** react-icons-sprite maps Trash2 → trash2.mjs and MenuIcon → menu-icon.mjs; lucide ships trash-2.mjs / menu.mjs. */
+function lucideSpriteIconAliases(): Plugin {
+  return {
+    name: "lucide-sprite-icon-aliases",
+    enforce: "pre",
+    apply: "build",
+    buildStart() {
+      const iconsDir = join(process.cwd(), "node_modules", "lucide-react", "dist", "esm", "icons");
+      if (!existsSync(iconsDir)) return;
+      for (const file of readdirSync(iconsDir)) {
+        if (!file.endsWith(".mjs")) continue;
+        const src = join(iconsDir, file);
+        const digit = /^(.+)-(\d+)\.mjs$/.exec(file);
+        if (digit) {
+          const dest = join(iconsDir, `${digit[1]}${digit[2]}.mjs`);
+          if (!existsSync(dest)) copyFileSync(src, dest);
+        }
+        if (!file.endsWith("-icon.mjs")) {
+          const dest = join(iconsDir, file.replace(/\.mjs$/, "-icon.mjs"));
+          if (!existsSync(dest)) copyFileSync(src, dest);
+        }
+      }
+    },
+  };
+}
+
 const repoRoot = new URL("../..", import.meta.url).pathname;
 
 function readDotEnvKey(root: string, key: string): string | undefined {
@@ -71,6 +97,7 @@ const createViteConfig = (isDevServer: boolean) => ({
     devtools({
       eventBusConfig: { enabled: false },
     }),
+    lucideSpriteIconAliases(),
     iconsSpritePlugin,
     viteReact({
       babel: {

package/templates/space/package.json

@@ -12,7 +12,7 @@
     "@robodev-ai/sdk": "^0.13.0"
   },
   "devDependencies": {
-    "robodev": "^0.42.0",
+    "robodev": "^0.44.0",
     "rulesync": "^8.18.0",
     "typescript": "^5.9.2"
   }