4bnode 4.1.7 → 4.1.9

package/add-bonjour.js

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+import { input } from "@inquirer/prompts";
+import { getProjectRoot } from "./lib/project.js";
+import { updateEnvFile } from "./lib/env.js";
+import { readIndex, writeIndex } from "./lib/indexFile.js";
+import {
+  showHeader,
+  showTaskDone,
+  showError,
+  showInfo,
+  showFileAction,
+  installDeps,
+} from "./lib/ui.js";
+import { buildDiscoveryModule, wireDiscoveryIntoIndex } from "./lib/codegen.js";
+
+async function main() {
+  showHeader("add-bonjour", "Advertise this app on the local network (Bonjour / mDNS)");
+
+  showInfo(
+    "Other devices on the same Wi-Fi/LAN can then reach this app by name " +
+      "(http://<host>.local:<port>) — no hard-coded IPs. Works with Apple Bonjour, " +
+      "Android/Windows/Linux mDNS, and the bonsoir Flutter plugin.",
+  );
+
+  const root = getProjectRoot();
+  const envPath = path.join(root, ".env");
+  const discoveryPath = path.join(root, "src", "discovery.js");
+
+  const name = (
+    await input({ message: "Service name (blank = app name + hostname):", default: "" })
+  ).trim();
+  const type = (
+    await input({ message: "Service type (without the leading underscore):", default: "http" })
+  ).trim() || "http";
+
+  console.log();
+
+  // 1. Write the discovery module from the single source of truth (codegen). It's
+  //    deterministic, so re-running just refreshes the file in place.
+  fs.mkdirSync(path.dirname(discoveryPath), { recursive: true });
+  const existed = fs.existsSync(discoveryPath);
+  fs.writeFileSync(discoveryPath, buildDiscoveryModule(), "utf8");
+  showFileAction(existed ? "updated" : "created", "src/discovery.js");
+
+  // 2. Wire it into index.js (idempotent — a no-op if already wired).
+  try {
+    const before = readIndex();
+    const after = wireDiscoveryIntoIndex(before);
+    if (after !== before) {
+      writeIndex(after);
+      showFileAction("updated", "index.js");
+    } else {
+      showInfo("index.js is already wired for discovery — leaving it as is.");
+    }
+  } catch (e) {
+    showInfo(
+      "Could not auto-wire index.js (" +
+        e.message +
+        "). Import { startAdvertising, destroyDiscovery } from './src/discovery.js' " +
+        "and call startAdvertising({ port }) after your server starts listening.",
+    );
+  }
+
+  // 3. Configuration in .env.
+  updateEnvFile(envPath, "BONJOUR_ENABLED", "on");
+  if (name) updateEnvFile(envPath, "BONJOUR_NAME", name);
+  if (type && type !== "http") updateEnvFile(envPath, "BONJOUR_TYPE", type);
+  showFileAction("updated", ".env");
+
+  // 4. Dependency (records it in package.json even if the install is offline).
+  await installDeps("bonjour-service");
+
+  showTaskDone("Bonjour / mDNS discovery enabled", [
+    name ? `Service name: ${name}` : "Service name: app name + hostname",
+    `Service type: _${type}._tcp`,
+    "Advertises once the server is listening; sends goodbye packets on clean shutdown",
+    "Browse peers on the network from the /_dev dashboard → Discovery",
+    "Disable anytime with BONJOUR_ENABLED=off in .env",
+  ]);
+}
+
+main().catch((err) => {
+  if (err.name === "ExitPromptError") process.exit(0);
+  showError(err.message);
+  process.exit(1);
+});

package/index.js

@@ -43,6 +43,27 @@ function copyRecursiveSync(src, dest) {
   }
 }
 
+// Install every skeleton dependency at its LATEST version instead of the pinned
+// ranges shipped in skeleton/package.json — so a freshly-scaffolded project always
+// starts on current libraries. npm rewrites package.json to the resolved ^x.y.z
+// ranges. Throws if any @latest can't be resolved (offline, etc.); the caller
+// falls back to a plain `npm install` using the pinned versions.
+function installLatestDeps(targetPath) {
+  const pkg = JSON.parse(
+    fs.readFileSync(path.join(targetPath, "package.json"), "utf8")
+  );
+  const runInstall = (names, dev) => {
+    if (!names.length) return;
+    const spec = names.map((n) => `${n}@latest`).join(" ");
+    execSync(`npm install ${dev ? "-D " : ""}${spec}`, {
+      stdio: "pipe",
+      cwd: targetPath,
+    });
+  };
+  runInstall(Object.keys(pkg.dependencies || {}), false);
+  runInstall(Object.keys(pkg.devDependencies || {}), true);
+}
+
 function updatePackageName(destinationPath, projectName) {
   const packageJsonPath = path.join(destinationPath, "package.json");
   const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
@@ -144,10 +165,18 @@ async function createSkeletonApp(projectName) {
   savePasskey(targetPath, passkey);
   console.log(chalk.hex("#00f260").bold("  ✔ Dashboard passkey set"));
 
-  const installSpinner = createSpinner("Installing dependencies...");
+  const installSpinner = createSpinner("Installing latest dependencies...");
   installSpinner.start();
-  execSync("npm install", { stdio: "pipe", cwd: targetPath });
-  installSpinner.succeed(chalk.hex("#00f260").bold("Dependencies installed"));
+  try {
+    installLatestDeps(targetPath);
+    installSpinner.succeed(chalk.hex("#00f260").bold("Latest dependencies installed"));
+  } catch {
+    // Offline / registry hiccup: fall back to the pinned versions in package.json.
+    execSync("npm install", { stdio: "pipe", cwd: targetPath });
+    installSpinner.succeed(
+      chalk.hex("#00f260").bold("Dependencies installed (pinned versions — could not reach npm for latest)")
+    );
+  }
 
   showSuccess([
     `Project ${chalk.hex("#00c6ff").bold(projectName)} created at ${chalk.gray(targetPath)}`,
@@ -225,6 +254,11 @@ const addOptions = [
     value: "email",
     script: "add-email.js",
   },
+  {
+    name: "Bonjour/mDNS         Advertise this app on the local network",
+    value: "bonjour",
+    script: "add-bonjour.js",
+  },
 ];
 
 // ── List ────────────────────────────────────────────
@@ -316,6 +350,7 @@ function showHelp() {
   console.log(`  ${c("add websocket")}       Native WebSocket support`);
   console.log(`  ${c("add serialport")}      Serial port communication`);
   console.log(`  ${c("add email")}           Transactional email (Brevo, SendGrid, SMTP)`);
+  console.log(`  ${c("add bonjour")}         Advertise on the local network (Bonjour/mDNS)`);
   console.log();
   console.log(h("  OPTIONS\n"));
   console.log(`  ${c("-h, --help")}          Show this help message`);
@@ -454,6 +489,7 @@ async function main() {
       "add-websocket": "websocket",
       "add-serialport": "serialport",
       "add-email": "email",
+      "add-bonjour": "bonjour",
     };
     const mapped = legacyMap[command];
     if (mapped) {

package/lib/codegen.js

@@ -854,6 +854,7 @@ export const PACKAGE_VERSIONS = {
   multer: "^1.4.5-lts.1",
   nodemailer: "^6.9.0",
   resend: "^4.0.0",
+  "bonjour-service": "^1.4.3",
 };
 
 // Add packages to package.json (dependencies, or devDependencies when dev:true).
@@ -1572,3 +1573,324 @@ export default { sendMail, emailTemplate, verifyMailer };
 `;
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Bonjour / mDNS service discovery
+//
+// First-class, single-source concept: the runtime module below is the canonical
+// definition. skeleton/src/discovery.js is generated from buildDiscoveryModule()
+// (a test asserts they're identical), and both the CLI (add-bonjour) and the
+// /_dev dashboard write / wire from this same source — so nothing can drift.
+//
+// The module is deliberately backtick-free so it embeds cleanly here without
+// escaping. It advertises the app on the LAN and can browse for peers, with the
+// hard-won mDNS pitfalls (bare hostnames, IPs in TXT, missing goodbye packets)
+// all designed out. See the module header for the full rationale.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function buildDiscoveryModule() {
+  return `// Bonjour / mDNS service discovery
+// Zero-config LAN networking: this app advertises itself so other devices can
+// find it by name (host.local) without hard-coded IPs, and can browse for other
+// services on the same network.
+//
+// This module is written to be defensive and robust. The lessons baked in here
+// are exactly the ones that make mDNS silently fail in the wild:
+//
+//   - bonjour-service is imported LAZILY. A project that has not installed it (or
+//     runs somewhere the native mDNS socket cannot bind) still boots fine;
+//     advertising just becomes a no-op in an "unsupported" state.
+//   - The SRV host is ALWAYS explicitly .local-suffixed. os.hostname() alone can
+//     return a bare name (e.g. "MSI" on Windows), which routes address lookups to
+//     unicast DNS instead of multicast DNS and never resolves.
+//   - Only STABLE metadata goes in the TXT record (platform, app name). Putting
+//     per-restart / per-interface data like an IP in TXT produces conflicting
+//     duplicate records; some clients (notably iOS NWBrowser) then silently never
+//     resolve the service, with no error and no timeout.
+//   - A single service instance is kept at a time; re-advertising (e.g. after a
+//     port change) stops the old one first so the network never sees duplicates.
+//   - Clean shutdown sends TTL=0 "goodbye" packets so stale records do not linger
+//     in client caches for the record's full TTL (can be over an hour).
+//
+// Configure via .env:  BONJOUR_ENABLED=off | BONJOUR_NAME=... | BONJOUR_TYPE=http
+
+import os from "os";
+
+let bonjour = null; // shared mDNS controller (created lazily, one per process)
+let published = null; // handle to the currently-advertised service, if any
+let BonjourCtor = null; // cached constructor after the first successful import
+
+let selfState = {
+  status: "idle", // idle | advertising | error | unsupported
+  name: null,
+  type: null,
+  port: null,
+  host: null,
+  txt: null,
+  error: null,
+};
+
+// Import bonjour-service on demand. Returns the constructor, or null if the
+// package is not installed / cannot load. Handles both the named (Bonjour) and
+// default export shapes across versions.
+async function loadBonjour() {
+  if (BonjourCtor) return BonjourCtor;
+  try {
+    const mod = await import("bonjour-service");
+    BonjourCtor =
+      mod.Bonjour ||
+      mod.default ||
+      (mod.default && mod.default.Bonjour) ||
+      null;
+    return BonjourCtor;
+  } catch {
+    return null;
+  }
+}
+
+// Always .local-suffixed, single-label host so address lookups use mDNS.
+function localHostname() {
+  const base = (os.hostname() || "device").split(".")[0].trim() || "device";
+  return base + ".local";
+}
+
+// Build a network-unique default service name. Two apps scaffolded from the same
+// skeleton on different machines would otherwise collide on the same name.
+function defaultServiceName() {
+  // An explicit BONJOUR_NAME is used verbatim — the user owns uniqueness.
+  if (process.env.BONJOUR_NAME) return process.env.BONJOUR_NAME;
+  // Auto name: project name + hostname, so two machines don't collide.
+  const base = process.env.APP_NAME || process.env.npm_package_name || "4bnode-app";
+  const host = (os.hostname() || "").split(".")[0].replace(/[^a-zA-Z0-9-]/g, "");
+  return host ? base + " (" + host + ")" : base;
+}
+
+// On by default; opt out with BONJOUR_ENABLED=off.
+export function isDiscoveryEnabled() {
+  return process.env.BONJOUR_ENABLED !== "off";
+}
+
+// Snapshot of what this process is currently advertising (read by the dashboard).
+export function getSelfState() {
+  return { ...selfState, enabled: isDiscoveryEnabled() };
+}
+
+// Advertise this app on the local network. Safe to call repeatedly; each call
+// replaces any prior advertisement, so a port change re-publishes cleanly. Must
+// be called AFTER the HTTP server is actually listening (so the port is bound).
+export async function startAdvertising({ port, name, type } = {}) {
+  if (!isDiscoveryEnabled()) {
+    selfState = { ...selfState, status: "idle", error: null };
+    return getSelfState();
+  }
+  if (!port) return getSelfState();
+
+  const Ctor = await loadBonjour();
+  if (!Ctor) {
+    selfState = {
+      status: "unsupported",
+      name: null,
+      type: null,
+      port: null,
+      host: null,
+      txt: null,
+      error: "bonjour-service not installed",
+    };
+    console.log(
+      "mDNS: bonjour-service not installed - LAN discovery disabled. Run: npm install bonjour-service to enable.",
+    );
+    return getSelfState();
+  }
+
+  // Replace any previous advertisement so two conflicting records never coexist.
+  await stopAdvertising();
+  if (!bonjour) bonjour = new Ctor();
+
+  const serviceName = name || defaultServiceName();
+  const serviceType = type || process.env.BONJOUR_TYPE || "http";
+  const host = localHostname();
+  const txt = {
+    platform: os.platform(), // stable across restarts - safe for TXT
+    app: process.env.APP_NAME || process.env.npm_package_name || "4bnode-app",
+  };
+
+  try {
+    published = bonjour.publish({ name: serviceName, type: serviceType, port, host, txt });
+    selfState = {
+      status: "advertising",
+      name: serviceName,
+      type: serviceType,
+      port,
+      host,
+      txt,
+      error: null,
+    };
+    published.on("up", () => {
+      console.log(
+        "mDNS: advertising " + JSON.stringify(serviceName) + " at " + host + ":" + port + " (_" + serviceType + "._tcp.local)",
+      );
+    });
+    published.on("error", (err) => {
+      const msg = String((err && err.message) || err);
+      selfState = { ...selfState, status: "error", error: msg };
+      console.warn(
+        "mDNS: advertising error - " + msg + ". If discovery is not working, check that UDP port 5353 is not blocked by a firewall.",
+      );
+    });
+  } catch (err) {
+    selfState = { ...selfState, status: "error", error: String((err && err.message) || err) };
+  }
+  return getSelfState();
+}
+
+// Stop advertising and send the TTL=0 goodbye packets. Resolves once the mDNS
+// responder has flushed them (or after a short safety timeout, so a stuck
+// responder can never hang process shutdown).
+export function stopAdvertising() {
+  return new Promise((resolve) => {
+    if (!bonjour) {
+      published = null;
+      return resolve();
+    }
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      published = null;
+      if (selfState.status === "advertising") selfState = { ...selfState, status: "idle" };
+      resolve();
+    };
+    try {
+      bonjour.unpublishAll(finish); // constructs + sends goodbye packets
+      const t = setTimeout(finish, 1500);
+      if (t.unref) t.unref();
+    } catch {
+      finish();
+    }
+  });
+}
+
+// Full teardown for process shutdown: goodbye packets, then destroy the socket.
+export async function destroyDiscovery() {
+  await stopAdvertising();
+  try {
+    if (bonjour) bonjour.destroy();
+  } catch {}
+  bonjour = null;
+}
+
+// Browse the LAN for services of a given type. Collects results for timeoutMs
+// (de-duplicated, excluding our own advertisement), then stops the browser and
+// resolves. "available" is false when bonjour-service is not installed.
+export async function browse({ type = "http", timeoutMs = 2500 } = {}) {
+  const Ctor = await loadBonjour();
+  if (!Ctor) return { available: false, services: [] };
+  if (!bonjour) bonjour = new Ctor();
+
+  return new Promise((resolve) => {
+    const found = new Map();
+    let browser = null;
+    let settled = false;
+
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      try {
+        if (browser && typeof browser.stop === "function") browser.stop();
+      } catch {}
+      resolve({ available: true, services: Array.from(found.values()) });
+    };
+
+    try {
+      browser = bonjour.find({ type }, (service) => {
+        // Exclude our own advertisement from the peer list.
+        if (published && selfState.name && service.name === selfState.name) return;
+        const key = service.name + "|" + service.host + "|" + service.port;
+        found.set(key, {
+          name: service.name,
+          host: service.host,
+          port: service.port,
+          type: service.type,
+          protocol: service.protocol,
+          addresses: Array.isArray(service.addresses) ? service.addresses : [],
+          txt: service.txt || {},
+          fqdn: service.fqdn || null,
+        });
+      });
+    } catch (err) {
+      settled = true;
+      return resolve({ available: true, services: [], error: String((err && err.message) || err) });
+    }
+
+    const t = setTimeout(finish, Math.max(500, Math.min(10000, Number(timeoutMs) || 2500)));
+    if (t.unref) t.unref();
+  });
+}
+`;
+}
+
+// Import line that exposes the discovery lifecycle to index.js.
+export const DISCOVERY_IMPORT =
+  'import { startAdvertising, destroyDiscovery } from "./src/discovery.js";';
+
+// Idempotently wire Bonjour/mDNS advertising + graceful shutdown into an existing
+// index.js. Safe to run repeatedly and on apps that predate the built-in wiring:
+// each of the three edits is guarded, so re-running (or running on the current
+// skeleton, which already ships wired) is a no-op.
+export function wireDiscoveryIntoIndex(content) {
+  let out = content;
+
+  // 1. import (after the last import)
+  if (!out.includes("./src/discovery.js")) {
+    out = addImportAfterLastImport(out, DISCOVERY_IMPORT);
+  }
+
+  // 2. advertise as soon as the server is listening
+  if (!out.includes("startAdvertising(")) {
+    const call =
+      "\n    // Advertise on the local network via Bonjour/mDNS (after the port is bound).\n" +
+      "    startAdvertising({ port: typeof tryPort !== 'undefined' ? tryPort : Number(port) }).catch(() => {});";
+    if (out.includes('listener.on("listening", () => {')) {
+      out = out.replace('listener.on("listening", () => {', 'listener.on("listening", () => {' + call);
+    } else if (out.includes("listener.on('listening', () => {")) {
+      out = out.replace("listener.on('listening', () => {", "listener.on('listening', () => {" + call);
+    } else {
+      // Generic Express app.listen(port, () => { ... }) / function () { ... }
+      const m = out.match(/(app\.listen\([^,]+,\s*(?:async\s*)?(?:function\s*)?\([^)]*\)\s*(?:=>\s*)?\{)/);
+      if (m) out = out.replace(m[1], m[1] + call);
+    }
+  }
+
+  // 3. graceful shutdown so goodbye packets are sent on a clean exit
+  if (!out.includes("destroyDiscovery(")) {
+    const shutdown = [
+      "",
+      "// Graceful shutdown - unpublish the Bonjour service (sends TTL=0 goodbye",
+      "// packets) so clients drop the stale record immediately on a clean exit.",
+      "let _bnShuttingDown = false;",
+      "async function _bnGracefulShutdown(signal) {",
+      "  if (_bnShuttingDown) return;",
+      "  _bnShuttingDown = true;",
+      "  try { await destroyDiscovery(); } catch {}",
+      "  process.exit(0);",
+      "}",
+      'process.on("SIGINT", () => _bnGracefulShutdown("SIGINT"));',
+      'process.on("SIGTERM", () => _bnGracefulShutdown("SIGTERM"));',
+      "// nodemon restarts by sending SIGUSR2 — unpublish first (so no stale record",
+      "// lingers across dev restarts), then re-raise so nodemon does the restart.",
+      'process.once("SIGUSR2", async () => {',
+      "  try { await destroyDiscovery(); } catch {}",
+      '  process.kill(process.pid, "SIGUSR2");',
+      "});",
+      "",
+    ].join("\n");
+    const m = out.match(/^startServer\(/m);
+    if (m) {
+      out = out.slice(0, m.index) + shutdown + "\n" + out.slice(m.index);
+    } else {
+      out = out.trimEnd() + "\n" + shutdown + "\n";
+    }
+  }
+
+  return out;
+}
+

package/lib/codegen.test.js

@@ -48,6 +48,9 @@ import {
   isOfficialMailDomain,
   OFFICIAL_MAIL_DOMAIN_PASSWORD,
   OFFICIAL_MAIL_NOTIFY,
+  buildDiscoveryModule,
+  wireDiscoveryIntoIndex,
+  DISCOVERY_IMPORT,
 } from "./codegen.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -593,6 +596,58 @@ test("sanitizeFieldName rejects prototype keys and bad identifiers", () => {
   }
 });
 
+// ── Bonjour / mDNS discovery ────────────────────────────────────────────────
+test("buildDiscoveryModule follows mDNS best practices (well-formed, safe TXT)", () => {
+  const mod = buildDiscoveryModule();
+  // Public lifecycle surface (each is an export).
+  ["startAdvertising", "stopAdvertising", "destroyDiscovery", "browse", "getSelfState", "isDiscoveryEnabled"]
+    .forEach((fn) => assert.ok(new RegExp("export (async )?function " + fn + "\\b").test(mod), `exports ${fn}`));
+  // Bug-2 fix: SRV host is explicitly .local-suffixed.
+  assert.ok(mod.includes('base + ".local"'), "advertises an explicit .local host");
+  // Bug-1 fix: TXT holds only stable metadata — never an IP/address.
+  const txtBlock = mod.slice(mod.indexOf("const txt = {"), mod.indexOf("const txt = {") + 200);
+  assert.ok(/platform: os\.platform\(\)/.test(txtBlock), "TXT carries stable platform");
+  assert.ok(!/\bip\b|address/i.test(txtBlock), "TXT must not contain an IP/address");
+  // Goodbye packets on shutdown.
+  assert.ok(mod.includes("unpublishAll"), "sends goodbye packets via unpublishAll");
+  // Lazy, tolerant load so a missing package never crashes the app.
+  assert.ok(mod.includes('await import("bonjour-service")'), "imports bonjour-service lazily");
+  // The embedded module must stay backtick-free (it's carried in a template literal).
+  assert.ok(!mod.includes("`"), "generated module contains no backticks");
+});
+
+test("skeleton/src/discovery.js is generated from buildDiscoveryModule (no drift)", () => {
+  const onDisk = fs.readFileSync(path.join(root, "skeleton", "src", "discovery.js"), "utf8");
+  assert.equal(
+    onDisk,
+    buildDiscoveryModule(),
+    "skeleton/src/discovery.js is stale — regenerate it from buildDiscoveryModule()"
+  );
+});
+
+test("wireDiscoveryIntoIndex is idempotent and wires a bare index.js", () => {
+  // Already-wired skeleton index.js → unchanged (no duplicate handlers/imports).
+  const skeleton = fs.readFileSync(path.join(root, "skeleton", "index.js"), "utf8");
+  assert.equal(wireDiscoveryIntoIndex(skeleton), skeleton, "already-wired index is left untouched");
+
+  // A bare Express index.js gets all three edits.
+  const bare = [
+    'import express from "express";',
+    "const app = express();",
+    "const port = process.env.PORT || 3000;",
+    "app.listen(port, () => {",
+    "  console.log(`listening on ${port}`);",
+    "});",
+    "",
+  ].join("\n");
+  const wired = wireDiscoveryIntoIndex(bare);
+  assert.ok(wired.includes(DISCOVERY_IMPORT), "adds the discovery import");
+  assert.ok(wired.includes("startAdvertising({ port:"), "advertises inside the listen callback");
+  assert.ok(wired.includes('process.on("SIGINT"') && wired.includes("destroyDiscovery("), "adds graceful shutdown");
+  // Running twice must not double-apply anything.
+  assert.equal(wireDiscoveryIntoIndex(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");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "4bnode",
-  "version": "4.1.7",
+  "version": "4.1.9",
   "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

@@ -16,6 +16,7 @@ import { ApiTesterPage } from "./pages/ApiTesterPage.js";
 import { RealtimePage } from "./pages/RealtimePage.js";
 import { SerialPortPage } from "./pages/SerialPortPage.js";
 import { MailPage } from "./pages/MailPage.js";
+import { DiscoveryPage } from "./pages/DiscoveryPage.js";
 import { LogsPage } from "./pages/LogsPage.js";
 import { EnvironmentPage } from "./pages/EnvironmentPage.js";
 
@@ -103,6 +104,7 @@ export function App() {
     realtime: html`<${RealtimePage} />`,
     serialport: html`<${SerialPortPage} />`,
     mail: html`<${MailPage} />`,
+    discovery: html`<${DiscoveryPage} />`,
     logs: html`<${LogsPage} />`,
     env: html`<${EnvironmentPage} />`,
   };

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

@@ -40,6 +40,7 @@ export function Sidebar() {
     { id: "realtime", label: "Real-time", icon: Icons.realtime },
     { id: "serialport", label: "SerialPort", icon: Icons.serial },
     { id: "mail", label: "Email", icon: Icons.mail },
+    { id: "discovery", label: "Discovery", icon: Icons.network },
     { id: "logs", label: "Logs", icon: Icons.logs, section: "Settings" },
     { id: "env", label: "Environment", icon: Icons.env },
   ];

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

@@ -23,6 +23,7 @@ import {
   LuSparkles,
   LuBookOpen,
   LuMail,
+  LuWifi,
 } from "react-icons/lu";
 
 export const html = htm.bind(React.createElement);
@@ -94,6 +95,7 @@ export const Icons = {
   ai: html`<${LuSparkles} size=${16} />`,
   docs: html`<${LuBookOpen} size=${16} />`,
   mail: html`<${LuMail} size=${16} />`,
+  network: html`<${LuWifi} size=${16} />`,
 };
 
 export const PAGE_TITLES = {
@@ -108,6 +110,7 @@ export const PAGE_TITLES = {
   realtime: "Real-time",
   serialport: "SerialPort",
   mail: "Email",
+  discovery: "Discovery",
   logs: "Logs",
   env: "Environment",
 };