4bnode 4.2.0 → 4.2.1

package/lib/codegen.test.js

@@ -51,16 +51,33 @@ import {
   buildDiscoveryModule,
   wireDiscoveryIntoIndex,
   DISCOVERY_IMPORT,
+  buildApiKeyMiddleware,
+  wireApiKeyGateIntoIndex,
+  API_KEY_GATE_USE,
+  generateApiKey,
+  hashApiKeyValue,
+  buildSerialDeviceModule,
+  buildSerialDevicesModule,
+  buildSerialRouter,
+  normalizeSerialDevice,
+  sancharakKeyProblem,
+  wireSerialIntoIndex,
 } from "./codegen.js";
+import crypto from "crypto";
+import { execFileSync } from "child_process";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const root = path.join(__dirname, "..");
 
 let passed = 0;
+// Tests run in order; async tests are awaited. First failure exits non-zero.
+let chain = Promise.resolve();
 function test(name, fn) {
-  fn();
-  passed++;
-  console.log(`  ✔ ${name}`);
+  chain = chain.then(async () => {
+    await fn();
+    passed++;
+    console.log(`  ✔ ${name}`);
+  });
 }
 
 // ── Name helpers ────────────────────────────────────────────────────────────
@@ -507,15 +524,14 @@ test("buildDocsHtml + buildDocsRouter are well-formed, self-contained (no CDN, n
 });
 
 // ── Email (Resend + SMTP) ────────────────────────────────────────────────────
-test("MAIL_PROVIDERS has exactly IntraApp(Postmaster) + Custom SMTP", () => {
-  assert.deepEqual(Object.keys(MAIL_PROVIDERS).sort(), ["resend", "smtp"]);
-  assert.equal(MAIL_PROVIDERS.resend.label, "IntraApp(Postmaster)");
-  assert.equal(MAIL_PROVIDERS.resend.type, "resend");
-  assert.equal(MAIL_PROVIDERS.resend.apiKeyOnly, true);
+test("MAIL_PROVIDERS has exactly Sancharak + Custom SMTP", () => {
+  assert.deepEqual(Object.keys(MAIL_PROVIDERS).sort(), ["sancharak", "smtp"]);
+  assert.equal(MAIL_PROVIDERS.sancharak.label, "Sancharak");
+  assert.equal(MAIL_PROVIDERS.sancharak.type, "sancharak");
+  assert.equal(MAIL_PROVIDERS.sancharak.apiKeyOnly, true);
   assert.equal(MAIL_PROVIDERS.smtp.type, "smtp");
   assert.equal(MAIL_PROVIDERS.smtp.port, 587);
 });
-
 test("official 4brains.in mail domain is gated", () => {
   assert.ok(isOfficialMailDomain("alok@4brains.in"));
   assert.ok(isOfficialMailDomain("  ALOK@4Brains.IN "));
@@ -525,12 +541,13 @@ test("official 4brains.in mail domain is gated", () => {
   assert.equal(OFFICIAL_MAIL_NOTIFY, "pawan@4brains.in");
 });
 
-test("buildMailerService supports both Resend and SMTP backends", () => {
+test("buildMailerService supports both Sancharak and SMTP backends", () => {
   const s = buildMailerService();
   assert.ok(s.includes("MAIL_PROVIDER"), "provider switch");
-  assert.ok(s.includes("await import('resend')") && s.includes("new Resend("), "Resend backend");
+  assert.ok(!/resend/i.test(s), "no Resend left");
+  assert.ok(s.includes("https://api.sancharak.com/v1/emails") && s.includes("'Idempotency-Key'"), "Sancharak backend");
   assert.ok(s.includes("await import('nodemailer')") && s.includes("createTransport"), "SMTP backend");
-  assert.ok(s.includes("process.env.RESEND_API_KEY") && s.includes("process.env.SMTP_HOST"));
+  assert.ok(s.includes("process.env.SANCHARAK_API_KEY") && s.includes("process.env.SMTP_HOST"));
   // Runtime gate: 4brains.in from-address is blocked unless authorized.
   assert.ok(s.includes("4brains") && s.includes("OFFICIAL_MAIL_AUTHORIZED"));
   assert.ok(s.includes("export async function sendMail"));
@@ -539,6 +556,56 @@ test("buildMailerService supports both Resend and SMTP backends", () => {
   assert.ok(s.trimEnd().endsWith("};"));
 });
 
+test("sancharakKeyProblem rejects shortened and malformed keys", () => {
+  assert.match(sancharakKeyProblem("snk_UwtPIq-5\u2026"), /shortened/);
+  assert.match(sancharakKeyProblem("snk_abc"), /too short/);
+  assert.match(sancharakKeyProblem("re_0123456789012345678901234"), /snk_/);
+  assert.match(sancharakKeyProblem("snk_has space_0123456789012345"), /non-ASCII|spaces/);
+  assert.equal(sancharakKeyProblem("snk_" + "a".repeat(43)), null);
+});
+
+test("mailer sends the Sancharak request shape (mock API)", async () => {
+  const http = await import("http");
+  const seen = [];
+  const srv = http.createServer((req, res) => {
+    let body = "";
+    req.on("data", (c) => (body += c));
+    req.on("end", () => {
+      seen.push({ url: req.url, headers: req.headers, body: JSON.parse(body) });
+      if (seen.length === 1) { res.writeHead(200, { "content-type": "application/json" }); res.end('{"id":"em_123"}'); }
+      else { res.writeHead(422, { "content-type": "application/json" }); res.end('{"message":"from domain not verified"}'); }
+    });
+  });
+  await new Promise((r) => srv.listen(0, "127.0.0.1", r));
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), "4bnode-mail-"));
+  fs.writeFileSync(path.join(dir, "mailer.mjs"), buildMailerService());
+  Object.assign(process.env, {
+    MAIL_PROVIDER: "sancharak",
+    SANCHARAK_API_KEY: "snk_test_0123456789abcdefghijklmnop",
+    SANCHARAK_API_URL: "http://127.0.0.1:" + srv.address().port + "/v1/emails",
+    MAIL_FROM: "4Brains <hello@sancharak.com>",
+    MAIL_REPLY_TO: "hello@sancharak.com",
+  });
+  try {
+    const { sendMail } = await import(path.join(dir, "mailer.mjs"));
+    const out = await sendMail({ to: "you@example.com", subject: "Hi", text: "Hello", html: "<p>Hello</p>" });
+    assert.deepEqual(out, { id: "em_123" });
+    const r = seen[0];
+    assert.equal(r.url, "/v1/emails");
+    assert.equal(r.headers.authorization, "Bearer snk_test_0123456789abcdefghijklmnop");
+    assert.match(r.headers["idempotency-key"], /^[0-9a-f-]{36}$/);
+    assert.deepEqual(r.body, {
+      from: "4Brains <hello@sancharak.com>", to: ["you@example.com"], subject: "Hi", stream: "tx",
+      reply_to: ["hello@sancharak.com"], text: "Hello", html: "<p>Hello</p>",
+    });
+    await assert.rejects(() => sendMail({ to: "a@b.c", subject: "x", text: "y" }), /Sancharak 422: from domain not verified/);
+    assert.notEqual(seen[1].headers["idempotency-key"], r.headers["idempotency-key"], "fresh key per send");
+    await assert.rejects(() => sendMail({ to: "a@b.c", subject: "x", text: "y", cc: "c@d.e" }), /not supported/);
+  } finally {
+    srv.close();
+    for (const k of ["MAIL_PROVIDER", "SANCHARAK_API_KEY", "SANCHARAK_API_URL", "MAIL_FROM", "MAIL_REPLY_TO"]) delete process.env[k];
+  }
+});
 // ── Security hardening ──────────────────────────────────────────────────────
 test("buildReadCode paginates and never returns password", () => {
   const out = buildReadCode("User");
@@ -648,6 +715,153 @@ test("wireDiscoveryIntoIndex is idempotent and wires a bare index.js", () => {
   assert.equal(wireDiscoveryIntoIndex(wired), wired, "second run is a no-op");
 });
 
+test("Bonjour is off by default and supports choosing a network", () => {
+  const mod = buildDiscoveryModule();
+  assert.ok(mod.includes('process.env.BONJOUR_ENABLED === "on"'), "only BONJOUR_ENABLED=on enables advertising");
+  assert.ok(/export function listNetworkInterfaces\b/.test(mod), "exports listNetworkInterfaces");
+  assert.ok(mod.includes("BONJOUR_INTERFACE"), "honors BONJOUR_INTERFACE");
+  assert.ok(mod.includes("restrictAddresses(published, iface)"), "advertises only the chosen network's addresses");
+  assert.ok(!mod.includes("\\"), "no backslashes (the module is embedded in a template literal)");
+});
+
+// ── API key gate ────────────────────────────────────────────────────────────
+// Write generated ESM to a temp file and syntax-check it with node itself.
+function assertParses(code, label) {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), "4bnode-"));
+  const file = path.join(dir, "check.mjs");
+  fs.writeFileSync(file, code);
+  try {
+    execFileSync(process.execPath, ["--check", file], { stdio: "pipe" });
+  } catch (e) {
+    assert.fail(label + " does not parse: " + String(e.stderr || e.message));
+  }
+}
+
+test("skeleton apiKey middleware is generated from buildApiKeyMiddleware (no drift)", () => {
+  const onDisk = fs.readFileSync(path.join(root, "skeleton", "src", "middleware", "apiKey.js"), "utf8");
+  assert.equal(onDisk, buildApiKeyMiddleware(), "skeleton/src/middleware/apiKey.js is stale");
+  assertParses(buildApiKeyMiddleware(), "apiKey middleware");
+  assert.ok(/export function apiKeyGate\b/.test(onDisk), "exports apiKeyGate");
+  assert.ok(onDisk.includes("timingSafeEqual"), "constant-time comparison");
+});
+
+test("apiKeyGate guards every route, login included; /docs, /_dev and preflight stay open", async () => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), "4bnode-gate-"));
+  fs.mkdirSync(path.join(dir, "middleware"));
+  fs.writeFileSync(path.join(dir, "middleware", "apiKey.js"), buildApiKeyMiddleware());
+  const key = generateApiKey(crypto.randomBytes);
+  fs.writeFileSync(path.join(dir, "api-keys.json"), JSON.stringify([{ id: "1", name: "t", hash: hashApiKeyValue(key, crypto.createHash) }]));
+  const { apiKeyGate } = await import(path.join(dir, "middleware", "apiKey.js"));
+  const call = (method, p, headers = {}) => {
+    let status = 200;
+    let passed = false;
+    const req = { method, path: p, header: (h) => headers[h.toLowerCase()] };
+    const res = { status(c) { status = c; return this; }, json() { return this; } };
+    apiKeyGate(req, res, () => { passed = true; });
+    return passed ? 200 : status;
+  };
+  assert.equal(call("POST", "/api/login"), 401, "login without a key is rejected");
+  assert.equal(call("POST", "/api/register", { "x-api-key": "4b_wrong" }), 401, "wrong key is rejected");
+  assert.equal(call("POST", "/api/login", { "x-api-key": key }), 200, "valid key passes");
+  assert.equal(call("GET", "/docs"), 200, "/docs is public");
+  assert.equal(call("GET", "/docs/openapi.json"), 200, "/docs/* is public");
+  assert.equal(call("GET", "/docsx"), 401, "a lookalike prefix is not public");
+  assert.equal(call("OPTIONS", "/api/login"), 200, "CORS preflight passes");
+  process.env.API_KEY_PUBLIC_PATHS = "/health";
+  assert.equal(call("GET", "/health"), 200, "configured public path passes");
+  delete process.env.API_KEY_PUBLIC_PATHS;
+  process.env.API_KEY_REQUIRED = "off";
+  assert.equal(call("GET", "/api/users"), 200, "API_KEY_REQUIRED=off disables the gate");
+  delete process.env.API_KEY_REQUIRED;
+  assert.ok(!fs.readFileSync(path.join(dir, "api-keys.json"), "utf8").includes(key), "plaintext key is never stored");
+});
+
+test("wireApiKeyGateIntoIndex mounts the gate after static files, idempotently", () => {
+  const skeleton = fs.readFileSync(path.join(root, "skeleton", "index.js"), "utf8");
+  assert.equal(wireApiKeyGateIntoIndex(skeleton), skeleton, "skeleton already ships the gate");
+  const bare = skeleton.replace(/^import \{ apiKeyGate \}.*\n/m, "").replace(/\/\/ ── API key gate[\s\S]*?app\.use\(apiKeyGate\);\n/, "");
+  assert.ok(!bare.includes("apiKeyGate"), "fixture has the gate removed");
+  const wired = wireApiKeyGateIntoIndex(bare);
+  const staticAt = wired.indexOf("app.use(express.static(");
+  const gateAt = wired.indexOf(API_KEY_GATE_USE);
+  assert.ok(staticAt !== -1 && gateAt > staticAt, "gate comes right after static files");
+  assert.ok(gateAt < wired.indexOf("// ── Error handling"), "gate comes before route registration");
+  assert.equal(wireApiKeyGateIntoIndex(wired), wired, "second run is a no-op");
+});
+
+test("buildOpenApiSpec adds x-api-key security when the gate is on", () => {
+  const endpoints = [
+    { method: "POST", fullPath: "/api/login", bodyFields: [{ name: "email" }] },
+    { method: "GET", fullPath: "/api/me", hasAuth: true },
+  ];
+  const off = buildOpenApiSpec({ endpoints });
+  assert.equal(off.security, undefined, "no global security without the gate");
+  const on = buildOpenApiSpec({ endpoints, apiKey: true });
+  assert.deepEqual(on.components.securitySchemes.apiKeyAuth, { type: "apiKey", in: "header", name: "x-api-key" });
+  assert.deepEqual(on.security, [{ apiKeyAuth: [] }], "every operation needs the key");
+  assert.deepEqual(on.paths["/api/me"].get.security, [{ apiKeyAuth: [], bearerAuth: [] }], "JWT routes need key AND token");
+});
+
+// ── Serial devices ──────────────────────────────────────────────────────────
+test("serial modules parse and follow the guide (no hard-coded path, reconnect, queue)", () => {
+  assertParses(buildSerialDeviceModule(), "SerialDevice.js");
+  assertParses(buildSerialDevicesModule(), "devices.js");
+  assertParses(buildSerialRouter(), "routes/serial.js");
+  const dev = buildSerialDeviceModule();
+  assert.ok(dev.includes("export async function resolvePort"), "resolves the port at connect time");
+  assert.ok(dev.includes("withProbeLock"), "probes ports sequentially");
+  assert.ok(dev.includes("this._connectLoop();") && dev.includes("port.on('close'"), "reconnects on close");
+  assert.ok(dev.includes("_enqueue"), "queues commands");
+  assert.ok(dev.includes("_waitReady"), "waits out the board reset after open");
+  assert.ok(/export function watchPorts\b/.test(dev), "watches for boards being plugged in");
+  assert.ok(dev.includes("waitOrAttach(this.retryMs)"), "an offline device wakes up when a board is attached");
+  assert.ok(dev.includes("const initial = !knownPorts"), "boards present at startup are reported too");
+  const reg = buildSerialDevicesModule();
+  assert.ok(reg.includes("SERIAL_AUTO_ADD") && reg.includes("async function autoAdd"), "unknown boards are auto-added unless disabled");
+  assert.ok(/export async function listDevices\b/.test(dev), "lists ports with USB metadata and firmware identity (guide point 7)");
+  assert.ok(dev.includes("identities.set(path, v)") && dev.includes("identities.delete(path)"), "remembers identities until the board is unplugged");
+  assert.ok(reg.includes("identity.includes(c.match.identity))) return;"), "a replugged identity board is not auto-added twice");
+  assert.ok(dev.includes("export async function identifyBoard") && dev.includes("'M115'"), "tries identity presets (ID?, M115, $I, ATI)");
+  assert.ok(dev.includes("this.stats.timeouts++") && dev.includes("avgReplyMs"), "tracks device health");
+  assert.ok(reg.includes("export const serialBus") && reg.includes("async function runRules"), "live bus + rules engine");
+  assert.ok(buildSerialRouter().includes("router.get('/stream'"), "app exposes a live stream");
+});
+
+test("normalizeSerialDevice keeps saved commands and validates rules", () => {
+  const d = normalizeSerialDevice({
+    name: "printer", match: { serialNumber: "S1" }, auto: true,
+    commands: [{ label: "Temps", command: "M105" }, { command: "G28", expectReply: false }, { command: "" }],
+    rules: [{ pattern: "Error", url: "https://example.com/h" }, { pattern: "DONE", action: "send", target: "led", command: "LED:ON", cooldownMs: 0 }],
+  });
+  assert.deepEqual(d.commands, [{ label: "Temps", command: "M105", expectReply: true }, { label: "G28", command: "G28", expectReply: false }]);
+  assert.equal(d.rules.length, 2);
+  assert.equal(d.rules[0].action, "webhook");
+  assert.equal(d.rules[1].cooldownMs, 0);
+  assert.equal(d.auto, true);
+  assert.throws(() => normalizeSerialDevice({ name: "x", match: { path: "p" }, rules: [{ pattern: "a", url: "ftp://x" }] }), /webhook URL/);
+  assert.throws(() => normalizeSerialDevice({ name: "x", match: { path: "p" }, rules: [{ pattern: "(", when: "regex", url: "http://x" }] }), /regular expression/);
+  assert.throws(() => normalizeSerialDevice({ name: "x", match: { path: "p" }, rules: [{ pattern: "a", action: "send" }] }), /device and a command/);
+});
+
+test("normalizeSerialDevice validates and keeps one match strategy", () => {
+  const d = normalizeSerialDevice({ name: "led", match: { identity: "LED-CTRL", vendorId: "0x10C4", path: "COM5" }, baudRate: "9600" });
+  assert.deepEqual(d.match, { identity: "LED-CTRL", vendorId: "10c4" }, "identity wins; path dropped");
+  assert.equal(d.baudRate, 9600);
+  assert.equal(d.delimiter, "lf");
+  assert.throws(() => normalizeSerialDevice({ name: "1bad", match: { path: "COM1" } }), /Device name/);
+  assert.throws(() => normalizeSerialDevice({ name: "x", match: {} }), /Choose how to find/);
+  assert.throws(() => normalizeSerialDevice({ name: "x", match: { vendorId: "zz" } }), /4 hex digits/);
+});
+
+test("wireSerialIntoIndex mounts routes after the gate and closes ports on shutdown", () => {
+  const skeleton = fs.readFileSync(path.join(root, "skeleton", "index.js"), "utf8");
+  const wired = wireSerialIntoIndex(skeleton);
+  assert.ok(wired.indexOf('app.use("/api/serial", serialRouter);') > wired.indexOf(API_KEY_GATE_USE), "serial routes are behind the API key gate");
+  assert.ok(wired.includes("startSerialDevices()"), "starts devices at boot");
+  assert.ok(wired.includes("await stopSerialDevices().catch(() => {}); await destroyDiscovery();"), "closes ports in the existing shutdown handlers");
+  assert.equal(wireSerialIntoIndex(wired), wired, "second run is a no-op");
+});
+
 // ── Skeleton drift guard ────────────────────────────────────────────────────
 test("skeleton codegen.js is in sync with lib/codegen.js", () => {
   const src = fs.readFileSync(path.join(root, "lib", "codegen.js"), "utf8");
@@ -659,4 +873,10 @@ test("skeleton codegen.js is in sync with lib/codegen.js", () => {
   );
 });
 
-console.log(`\n${passed} passed`);
+chain.then(
+  () => console.log(`\n${passed} passed`),
+  (err) => {
+    console.error(err);
+    process.exit(1);
+  },
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "4bnode",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "4bnode is a CLI-powered backend development platform with a built-in visual dashboard to generate, manage, and test Node.js/Express APIs faster.",
   "main": "index.js",
   "type": "module",

package/skeleton/.4bnode/assets/js/App.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { html, api, PAGE_TITLES } from "./lib.js";
+import { html, api, PAGE_TITLES, NAV, Icons, MOD_KEY, isTypingTarget } from "./lib.js";
 import { AppContext } from "./context.js";
 import { Sidebar } from "./components/Sidebar.js";
 import { ToastContainer } from "./components/ToastContainer.js";
 import { ConfirmDialog } from "./components/Modal.js";
+import { CommandPalette, ShortcutsDialog } from "./components/CommandPalette.js";
 import { DashboardPage } from "./pages/DashboardPage.js";
 import { DatabasePage } from "./pages/DatabasePage.js";
 import { SchemasPage } from "./pages/SchemasPage.js";
@@ -36,6 +37,21 @@ export function App() {
   const [status, setStatus] = useState({});
   const [toasts, setToasts] = useState([]);
   const [confirmState, setConfirmState] = useState(null);
+  const [health, setHealth] = useState(null);
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const [shortcutsOpen, setShortcutsOpen] = useState(false);
+  const [mobileNav, setMobileNav] = useState(false);
+  const [collapsed, setCollapsed] = useState(() => {
+    try { return localStorage.getItem("_4bnode_sidebar") === "collapsed"; } catch { return false; }
+  });
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed((c) => {
+      try { localStorage.setItem("_4bnode_sidebar", c ? "expanded" : "collapsed"); } catch {}
+      return !c;
+    });
+  }, []);
+  const openPalette = useCallback(() => { setMobileNav(false); setPaletteOpen(true); }, []);
+  const openShortcuts = useCallback(() => setShortcutsOpen(true), []);
 
   const showConfirm = useCallback((message, opts = {}) => {
     return new Promise((resolve) => {
@@ -92,6 +108,79 @@ export function App() {
     refresh().catch(() => {});
   }, []);
 
+  // Live process + traffic stats (Sidebar status, Topbar, Dashboard overview).
+  // Polls only while the tab is visible.
+  useEffect(() => {
+    let timer;
+    async function poll() {
+      if (document.visibilityState === "visible") {
+        try { setHealth(await api("/health")); } catch { setHealth(null); }
+      }
+      timer = setTimeout(poll, 5000);
+    }
+    poll();
+    return () => clearTimeout(timer);
+  }, []);
+
+  // USB serial hotplug: toast when a board is plugged in, removed or
+  // auto-added, on whatever page is open. Events from before this page
+  // loaded are skipped. Pages listen for "serial-event" to refresh.
+  useEffect(() => {
+    if (!status.serialportConfigured) return;
+    let lastId = null;
+    let timer;
+    async function poll() {
+      if (document.visibilityState === "visible") {
+        try {
+          const events = await api("/serial/events?since=" + (lastId || 0));
+          if (lastId === null) {
+            lastId = events.length ? events[events.length - 1].id : 0;
+          } else {
+            for (const e of events) {
+              lastId = e.id;
+              const chip = e.vendor ? " (" + e.vendor + ")" : "";
+              if (e.type === "attach") toast("USB board connected on " + e.path + chip, "info");
+              else if (e.type === "detach") toast("USB board removed from " + e.path, "info");
+              else if (e.type === "added") toast('New board added as "' + e.name + '"', "success");
+              window.dispatchEvent(new CustomEvent("serial-event", { detail: e }));
+            }
+          }
+        } catch {}
+      }
+      timer = setTimeout(poll, 2500);
+    }
+    poll();
+    return () => clearTimeout(timer);
+  }, [status.serialportConfigured]);
+
+  // Global shortcuts: ⌘K palette, ? help, [ sidebar, g <key> page jump.
+  useEffect(() => {
+    let pendingG = 0;
+    function onKey(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        setPaletteOpen((o) => !o);
+        return;
+      }
+      if (e.metaKey || e.ctrlKey || e.altKey || isTypingTarget(e.target)) return;
+      if (document.querySelector(".palette-overlay, .modal-overlay")) return;
+      const now = Date.now();
+      if (pendingG && now - pendingG < 1200) {
+        pendingG = 0;
+        const target = NAV.find((n) => n.key === e.key.toLowerCase());
+        if (target) { e.preventDefault(); setPage(target.id); }
+        return;
+      }
+      if (e.key === "g") { pendingG = now; return; }
+      if (e.key === "?") { e.preventDefault(); setShortcutsOpen(true); }
+      else if (e.key === "[") { e.preventDefault(); toggleCollapsed(); }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  useEffect(() => { document.title = `${PAGE_TITLES[page] || "Dashboard"} · 4bnode`; }, [page]);
+
   const pages = {
     dashboard: html`<${DashboardPage} />`,
     "ai-builder": html`<${AiBuilderPage} />`,
@@ -110,14 +199,32 @@ export function App() {
   };
 
   return html`<${AppContext.Provider}
-    value=${{ page, setPage, data, status, toasts, toast, refresh, showConfirm }}
+    value=${{
+      page, setPage, data, status, toasts, toast, refresh, showConfirm, health,
+      collapsed, toggleCollapsed, mobileNav, setMobileNav, openPalette, openShortcuts,
+    }}
   >
     <${Sidebar} />
     <div className="main">
-      <div className="topbar">
-        <h2>${PAGE_TITLES[page] || "Dashboard"}</h2>
-      </div>
-      <div className="content">
+      <header className="topbar">
+        <button className="topbar-menu" onClick=${() => setMobileNav(true)} aria-label="Open navigation">${Icons.menu}</button>
+        <div className="topbar-crumbs">
+          <span className="crumb-muted">${NAV.find((n) => n.id === page)?.section || "Overview"}</span>
+          <span className="crumb-sep">/</span>
+          <h2>${PAGE_TITLES[page] || "Dashboard"}</h2>
+        </div>
+        <div className="topbar-actions">
+          <button className="topbar-search" onClick=${openPalette}>
+            ${Icons.search}<span>Search or jump to…</span><kbd>${MOD_KEY}K</kbd>
+          </button>
+          <span className=${`live-pill ${health ? "on" : "off"}`} title=${health ? `Uptime ${Math.round(health.uptime / 60)}m · pid ${health.pid}` : "Server unreachable"}>
+            <span className="status-dot" />${health ? "Live" : "Offline"}
+          </span>
+          <a className="btn-icon-ghost" href="/" target="_blank" rel="noopener" title="Open app">${Icons.external}</a>
+          <button className="btn-icon-ghost" onClick=${openShortcuts} title="Keyboard shortcuts (?)">${Icons.keyboard}</button>
+        </div>
+      </header>
+      <main className="content">
         <${AnimatePresence} mode="wait">
           <${motion.div} key=${page}
             initial=${{ opacity: 0, y: 8 }}
@@ -127,9 +234,11 @@ export function App() {
             ${pages[page] || pages.dashboard}
           <//>
         <//>
-      </div>
+      </main>
     </div>
     <${ToastContainer} />
+    ${paletteOpen && html`<${CommandPalette} onClose=${() => setPaletteOpen(false)} />`}
+    ${shortcutsOpen && html`<${ShortcutsDialog} onClose=${() => setShortcutsOpen(false)} />`}
     ${confirmState && html`<${ConfirmDialog}
       message=${confirmState.message}
       confirmLabel=${confirmState.confirmLabel}

package/skeleton/.4bnode/assets/js/components/CommandPalette.js

@@ -0,0 +1,165 @@
+import React, { useState, useEffect, useMemo, useRef } from "react";
+import { motion } from "framer-motion";
+import { html, Icons, NAV, MOD_KEY, api, copyToClipboard } from "../lib.js";
+import { useApp } from "../context.js";
+
+// Subsequence fuzzy match: every query char must appear in order. Lower score
+// = better (earlier, tighter matches win). Returns null when it doesn't match.
+function fuzzyScore(text, query) {
+  if (!query) return 0;
+  const t = text.toLowerCase();
+  const q = query.toLowerCase();
+  const direct = t.indexOf(q);
+  if (direct !== -1) return direct;
+  let ti = 0, score = 100, last = -1;
+  for (const ch of q) {
+    const i = t.indexOf(ch, ti);
+    if (i === -1) return null;
+    score += last === -1 ? i : i - last - 1;
+    last = i;
+    ti = i + 1;
+  }
+  return score;
+}
+
+export function CommandPalette({ onClose }) {
+  const { setPage, data, status, refresh, toast, toggleCollapsed, openShortcuts } = useApp();
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+
+  useEffect(() => { inputRef.current?.focus(); }, []);
+
+  const items = useMemo(() => {
+    const appUrl = window.location.origin;
+    const list = [];
+    NAV.forEach((n) => {
+      const locked = n.needsDb && !data.mongoConfigured;
+      if (!locked) list.push({ group: "Pages", label: n.label, icon: n.icon, hint: n.key ? `G ${n.key.toUpperCase()}` : "", run: () => setPage(n.id) });
+    });
+    (data.models || []).forEach((m) => list.push({
+      group: "Models", label: m.name, sub: `${m.fields?.length || 0} fields`, icon: Icons.schema, run: () => setPage("schemas"),
+    }));
+    (data.routes || []).forEach((r) => list.push({
+      group: "Routes", label: r.replace(/\.js$/, ""), sub: `src/routes/${r}`, icon: Icons.route, run: () => setPage("routes"),
+    }));
+    list.push(
+      { group: "Actions", label: "New request in API Tester", icon: Icons.send, run: () => setPage("api-tester") },
+      { group: "Actions", label: "Refresh project state", icon: Icons.refresh, run: () => refresh().then(() => toast("Refreshed", "success")).catch(() => toast("Refresh failed", "error")) },
+      { group: "Actions", label: "Open app in new tab", sub: appUrl, icon: Icons.external, run: () => window.open(appUrl, "_blank", "noopener") },
+      { group: "Actions", label: "Copy app URL", sub: appUrl, icon: Icons.external, run: () => copyToClipboard(appUrl).then(() => toast("Copied " + appUrl, "success")) },
+      { group: "Actions", label: "Toggle sidebar", icon: Icons.collapse, hint: "[", run: toggleCollapsed },
+      { group: "Actions", label: "Keyboard shortcuts", icon: Icons.keyboard, hint: "?", run: openShortcuts },
+      { group: "Actions", label: "Clear logs", icon: Icons.logs, run: () => api("/logs", { method: "DELETE" }).then(() => toast("Logs cleared", "success")).catch((e) => toast(e.message, "error")) },
+    );
+    if (status.docsConfigured) {
+      list.push(
+        { group: "Actions", label: "Open API docs", sub: appUrl + "/docs", icon: Icons.docs, run: () => window.open(appUrl + "/docs", "_blank", "noopener") },
+        { group: "Actions", label: "Regenerate API docs", icon: Icons.docs, run: () => api("/docs/regenerate", { method: "POST" }).then(() => toast("Docs regenerated", "success")).catch((e) => toast(e.message, "error")) },
+      );
+    }
+    return list;
+  }, [data, status]);
+
+  const results = useMemo(() => {
+    if (!query.trim()) return items;
+    return items
+      .map((it) => ({ it, s: fuzzyScore(`${it.label} ${it.sub || ""}`, query.trim()) }))
+      .filter((r) => r.s !== null)
+      .sort((a, b) => a.s - b.s)
+      .map((r) => r.it)
+      // Keep groups contiguous, ordered by each group's best match.
+      .reduce((acc, it) => {
+        (acc.find((g) => g[0].group === it.group) || acc[acc.push([]) - 1]).push(it);
+        return acc;
+      }, [])
+      .flat();
+  }, [items, query]);
+
+  useEffect(() => setActive(0), [query]);
+  useEffect(() => {
+    listRef.current?.querySelector(`[data-idx="${active}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [active]);
+
+  function run(item) {
+    if (!item) return;
+    onClose();
+    item.run();
+  }
+
+  function onKeyDown(e) {
+    if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(results.length - 1, a + 1)); }
+    else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(0, a - 1)); }
+    else if (e.key === "Enter") { e.preventDefault(); run(results[active]); }
+    else if (e.key === "Escape") { e.preventDefault(); onClose(); }
+  }
+
+  let lastGroup = null;
+  return html`<${motion.div} className="palette-overlay" onMouseDown=${(e) => e.target === e.currentTarget && onClose()}
+    initial=${{ opacity: 0 }} animate=${{ opacity: 1 }} transition=${{ duration: 0.12 }}>
+    <${motion.div} className="palette" role="dialog" aria-label="Command palette"
+      initial=${{ opacity: 0, scale: 0.98, y: -6 }} animate=${{ opacity: 1, scale: 1, y: 0 }} transition=${{ duration: 0.12 }}>
+      <div className="palette-input">
+        ${Icons.search}
+        <input ref=${inputRef} value=${query} placeholder="Search pages, models, routes, actions…"
+          onInput=${(e) => setQuery(e.target.value)} onKeyDown=${onKeyDown} />
+        <kbd>Esc</kbd>
+      </div>
+      <div className="palette-list" ref=${listRef}>
+        ${results.length === 0 && html`<div className="palette-empty">No results for “${query}”</div>`}
+        ${results.map((it, i) => {
+          const header = it.group !== lastGroup ? ((lastGroup = it.group), html`<div className="palette-group">${it.group}</div>`) : null;
+          return html`<${React.Fragment} key=${it.group + it.label + i}>
+            ${header}
+            <div data-idx=${i} className=${`palette-item${i === active ? " active" : ""}`}
+              onMouseMove=${() => active !== i && setActive(i)} onClick=${() => run(it)}>
+              <span className="palette-icon">${it.icon}</span>
+              <span className="palette-label">${it.label}</span>
+              ${it.sub && html`<span className="palette-sub">${it.sub}</span>`}
+              ${it.hint && html`<kbd>${it.hint}</kbd>`}
+            </div>
+          <//>`;
+        })}
+      </div>
+      <div className="palette-footer">
+        <span><kbd>↑</kbd><kbd>↓</kbd> navigate</span>
+        <span><kbd>↵</kbd> select</span>
+        <span><kbd>esc</kbd> close</span>
+      </div>
+    <//>
+  <//>`;
+}
+
+export function ShortcutsDialog({ onClose }) {
+  const mod = MOD_KEY;
+  const groups = [
+    { title: "General", rows: [[`${mod} K`, "Command palette"], ["?", "Show shortcuts"], ["[", "Toggle sidebar"], ["Esc", "Close dialog"]] },
+    { title: "Go to", rows: NAV.filter((n) => n.key).map((n) => [`G ${n.key.toUpperCase()}`, n.label]) },
+    { title: "API Tester", rows: [[`${mod} ↵`, "Send request"], ["Alt N", "New request tab"], ["Alt W", "Close request tab"], ["Alt H", "Toggle history"]] },
+  ];
+  useEffect(() => {
+    const onKey = (e) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  return html`<${motion.div} className="palette-overlay" onMouseDown=${(e) => e.target === e.currentTarget && onClose()}
+    initial=${{ opacity: 0 }} animate=${{ opacity: 1 }} transition=${{ duration: 0.12 }}>
+    <${motion.div} className="palette shortcuts" role="dialog" aria-label="Keyboard shortcuts"
+      initial=${{ opacity: 0, scale: 0.98 }} animate=${{ opacity: 1, scale: 1 }} transition=${{ duration: 0.12 }}>
+      <div className="shortcuts-head">
+        <span>Keyboard shortcuts</span>
+        <button className="btn-icon-ghost" onClick=${onClose} aria-label="Close">${Icons.close}</button>
+      </div>
+      <div className="shortcuts-body">
+        ${groups.map((g) => html`<div key=${g.title} className="shortcuts-group">
+          <div className="palette-group">${g.title}</div>
+          ${g.rows.map(([k, label]) => html`<div key=${k} className="shortcut-row">
+            <span>${label}</span>
+            <span>${k.split(" ").map((p) => html`<kbd key=${p}>${p}</kbd>`)}</span>
+          </div>`)}
+        </div>`)}
+      </div>
+    <//>
+  <//>`;
+}