4bnode 4.1.1 → 4.1.3

package/add-security.js

@@ -2,10 +2,8 @@
 
 import fs from "fs";
 import path from "path";
-import crypto from "crypto";
 import { checkbox, confirm } from "@inquirer/prompts";
 import { getProjectRoot, listModels, getModelSchemaDetailed } from "./lib/project.js";
-import { updateEnvFile } from "./lib/env.js";
 import { addImport, insertBeforeRoutes, insertBeforeListen } from "./lib/indexFile.js";
 import {
   showHeader,
@@ -18,7 +16,6 @@ import {
 import {
   buildErrorHandlerFile,
   buildRolesGuardFile,
-  buildApiKeyFile,
   buildValidateFile,
   buildZodSchemaFile,
   securityWiring,
@@ -46,7 +43,6 @@ async function main() {
       { name: "Rate limiting     Throttle requests per IP (express-rate-limit)", value: "rateLimit", checked: true },
       { name: "Error handler     Central 404 + error JSON responses", value: "errorHandler", checked: true },
       { name: "RBAC roles        roles('admin') route guard", value: "roles" },
-      { name: "API keys          x-api-key header auth", value: "apiKey" },
       { name: "Validation        Zod request validation middleware", value: "validation" },
     ],
     validate: (v) => (v.length > 0 ? true : "Select at least one protection."),
@@ -54,7 +50,6 @@ async function main() {
 
   console.log();
 
-  const projectRoot = getProjectRoot();
   const deps = new Set();
   const summary = [];
 
@@ -79,19 +74,6 @@ async function main() {
     writeFileSafe("src/middleware/roles.js", buildRolesGuardFile());
     summary.push("RBAC roles() guard");
   }
-  if (features.includes("apiKey")) {
-    writeFileSafe("src/middleware/apiKey.js", buildApiKeyFile());
-    const envPath = path.join(projectRoot, ".env");
-    const existing = fs.existsSync(envPath) ? fs.readFileSync(envPath, "utf8") : "";
-    if (!/^API_KEYS=/m.test(existing)) {
-      const key = crypto.randomBytes(24).toString("hex");
-      updateEnvFile(envPath, "API_KEYS", key);
-      showFileAction("updated", ".env");
-      showInfo(`Generated API key: ${key}`);
-    }
-    summary.push("API key auth (x-api-key)");
-  }
-
   // ── Validation (Zod) ──
   if (features.includes("validation")) {
     deps.add("zod");

package/app-1/.4bnode/.passkey

@@ -0,0 +1 @@
+scrypt$af7f6048a1c565afcc6f06de246f8b18$673c63bd180dc82eb74265fba34699ad45d1ae27353595e5c1c492351c66aafbd80e18d712b1e6f40e2343e45137b96cb4ed376d0c4ac5b54e8ea9d0a2fd2f73

package/app-1/.4bnode/assets/js/App.js

@@ -0,0 +1,139 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { html, api, PAGE_TITLES } 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 { DashboardPage } from "./pages/DashboardPage.js";
+import { DatabasePage } from "./pages/DatabasePage.js";
+import { SchemasPage } from "./pages/SchemasPage.js";
+import { RoutesPage } from "./pages/RoutesPage.js";
+import { DocsPage } from "./pages/DocsPage.js";
+import { AiBuilderPage } from "./pages/AiBuilderPage.js";
+import { SecurityPage } from "./pages/SecurityPage.js";
+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 { LogsPage } from "./pages/LogsPage.js";
+import { EnvironmentPage } from "./pages/EnvironmentPage.js";
+
+function getHashPage() {
+  const hash = window.location.hash.replace("#/", "").replace("#", "");
+  return hash && PAGE_TITLES[hash] ? hash : "dashboard";
+}
+
+export function App() {
+  const [page, setPageState] = useState(getHashPage);
+  const [data, setData] = useState({
+    models: [],
+    routes: [],
+    mongoConfigured: false,
+    routesDirExists: false,
+  });
+  const [status, setStatus] = useState({});
+  const [toasts, setToasts] = useState([]);
+  const [confirmState, setConfirmState] = useState(null);
+
+  const showConfirm = useCallback((message, opts = {}) => {
+    return new Promise((resolve) => {
+      setConfirmState({ message, ...opts, resolve });
+    });
+  }, []);
+
+  const setPage = useCallback((p) => {
+    window.location.hash = "#/" + p;
+  }, []);
+
+  useEffect(() => {
+    function onHash() {
+      setPageState(getHashPage());
+    }
+    window.addEventListener("hashchange", onHash);
+    return () => window.removeEventListener("hashchange", onHash);
+  }, []);
+
+  const toast = useCallback((message, type = "info") => {
+    const id = Date.now();
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(
+      () => setToasts((prev) => prev.filter((t) => t.id !== id)),
+      3500,
+    );
+  }, []);
+
+  const refresh = useCallback(async () => {
+    // File-writing actions (create route, docs, security, ...) modify index.js,
+    // which triggers a nodemon restart. Since the dashboard is served by that same
+    // app, the refresh fetch fired right after can hit the restart window and fail,
+    // leaving the UI stale until a manual reload. Retry across the restart so new
+    // state shows up in real time.
+    let lastErr;
+    for (let attempt = 0; attempt < 8; attempt++) {
+      try {
+        const [dashData, statusData] = await Promise.all([
+          api("/dashboard"),
+          api("/status"),
+        ]);
+        setData(dashData);
+        setStatus(statusData);
+        return;
+      } catch (err) {
+        lastErr = err;
+        await new Promise((r) => setTimeout(r, 500));
+      }
+    }
+    throw lastErr;
+  }, []);
+
+  useEffect(() => {
+    refresh().catch(() => {});
+  }, []);
+
+  const pages = {
+    dashboard: html`<${DashboardPage} />`,
+    "ai-builder": html`<${AiBuilderPage} />`,
+    database: html`<${DatabasePage} />`,
+    schemas: html`<${SchemasPage} />`,
+    routes: html`<${RoutesPage} />`,
+    docs: html`<${DocsPage} />`,
+    security: html`<${SecurityPage} />`,
+    "api-tester": html`<${ApiTesterPage} />`,
+    realtime: html`<${RealtimePage} />`,
+    serialport: html`<${SerialPortPage} />`,
+    mail: html`<${MailPage} />`,
+    logs: html`<${LogsPage} />`,
+    env: html`<${EnvironmentPage} />`,
+  };
+
+  return html`<${AppContext.Provider}
+    value=${{ page, setPage, data, status, toasts, toast, refresh, showConfirm }}
+  >
+    <${Sidebar} />
+    <div className="main">
+      <div className="topbar">
+        <h2>${PAGE_TITLES[page] || "Dashboard"}</h2>
+      </div>
+      <div className="content">
+        <${AnimatePresence} mode="wait">
+          <${motion.div} key=${page}
+            initial=${{ opacity: 0, y: 8 }}
+            animate=${{ opacity: 1, y: 0 }}
+            exit=${{ opacity: 0, y: -8 }}
+            transition=${{ duration: 0.15 }}>
+            ${pages[page] || pages.dashboard}
+          <//>
+        <//>
+      </div>
+    </div>
+    <${ToastContainer} />
+    ${confirmState && html`<${ConfirmDialog}
+      message=${confirmState.message}
+      confirmLabel=${confirmState.confirmLabel}
+      danger=${confirmState.danger}
+      onConfirm=${() => { confirmState.resolve(true); setConfirmState(null); }}
+      onCancel=${() => { confirmState.resolve(false); setConfirmState(null); }}
+    />`}
+  <//>`;
+}

package/app-1/.4bnode/assets/js/Root.js

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+import { AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
+import { html, API, getStoredPasskey } from "./lib.js";
+import { App } from "./App.js";
+import { PasskeyScreen } from "./screens/PasskeyScreen.js";
+
+export function Root() {
+  const [authed, setAuthed] = useState(false);
+  const [checking, setChecking] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const stored = getStoredPasskey();
+        const res = await fetch(API + '/auth', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ passkey: stored }),
+        });
+        if (res.ok) setAuthed(true);
+      } catch {}
+      setChecking(false);
+    })();
+  }, []);
+
+  if (checking) return null;
+
+  return html`<${AnimatePresence} mode="wait">
+    ${!authed
+      ? html`<${PasskeyScreen} key="passkey" onSuccess=${() => setAuthed(true)} />`
+      : html`<${motion.div} key="app"
+          style=${{ display: 'flex', height: '100vh', width: '100%' }}
+          initial=${{ opacity: 0 }}
+          animate=${{ opacity: 1 }}
+          transition=${{ duration: 0.4 }}>
+          <${App} />
+        <//>`}
+  <//>`;
+}

package/app-1/.4bnode/assets/js/components/Modal.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { LuTrash2, LuZap } from "react-icons/lu";
+import { html } from "../lib.js";
+
+export function Modal({ title, children, onClose, actions }) {
+  return html`<${AnimatePresence}><${motion.div}
+    className="modal-overlay"
+    onClick=${(e) => e.target === e.currentTarget && onClose()}
+    initial=${{ opacity: 0 }} animate=${{ opacity: 1 }} exit=${{ opacity: 0 }}
+    transition=${{ duration: 0.15 }}
+  >
+    <${motion.div} className="modal"
+      initial=${{ opacity: 0, scale: 0.95, y: 10 }}
+      animate=${{ opacity: 1, scale: 1, y: 0 }}
+      exit=${{ opacity: 0, scale: 0.95, y: 10 }}
+      transition=${{ duration: 0.15 }}>
+      <div className="modal-title">${title}</div>
+      ${children}
+      ${actions && html`<div className="modal-actions">${actions}</div>`}
+    <//>
+  <//><//>`;
+}
+
+export function ConfirmDialog({ message, onConfirm, onCancel, confirmLabel, danger }) {
+  return html`<${AnimatePresence}><${motion.div}
+    className="modal-overlay"
+    onClick=${onCancel}
+    initial=${{ opacity: 0 }} animate=${{ opacity: 1 }} exit=${{ opacity: 0 }}
+    transition=${{ duration: 0.15 }}
+  >
+    <${motion.div} className="modal" onClick=${e => e.stopPropagation()}
+      style=${{ minWidth: '380px', maxWidth: '440px' }}
+      initial=${{ opacity: 0, scale: 0.95, y: 10 }}
+      animate=${{ opacity: 1, scale: 1, y: 0 }}
+      exit=${{ opacity: 0, scale: 0.95, y: 10 }}
+      transition=${{ duration: 0.15 }}>
+      <div className="flex items-center gap-3" style=${{ marginBottom: '16px' }}>
+        <div style=${{ width: '40px', height: '40px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+          background: danger ? 'var(--error-glow)' : 'var(--warning-glow)' }}>
+          <${danger ? LuTrash2 : LuZap} size=${18} color=${danger ? 'var(--error)' : 'var(--warning)'} />
+        </div>
+        <div style=${{ fontSize: '15px', fontWeight: 600 }}>Confirm Action</div>
+      </div>
+      <div style=${{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: '1.6', marginBottom: '20px' }}>${message}</div>
+      <div className="modal-actions">
+        <button className="btn btn-ghost" onClick=${onCancel}>Cancel</button>
+        <button className=${`btn ${danger ? 'btn-danger' : 'btn-primary'}`} onClick=${onConfirm}>${confirmLabel || 'Confirm'}</button>
+      </div>
+    <//>
+  <//><//>`;
+}

package/app-1/.4bnode/assets/js/components/Sidebar.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { html, Icons } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function Sidebar() {
+  const { page, setPage, data } = useApp();
+  const dbOk = data.mongoConfigured;
+
+  const navItems = [
+    {
+      id: "dashboard",
+      label: "Dashboard",
+      icon: Icons.dashboard,
+      section: "Overview",
+    },
+    // AI Builder — temporarily hidden from the menu (re-enable by uncommenting)
+    // { id: "ai-builder", label: "AI Builder", icon: Icons.ai },
+    {
+      id: "database",
+      label: "Database",
+      icon: Icons.database,
+      section: "Setup",
+    },
+    {
+      id: "schemas",
+      label: "Schemas",
+      icon: Icons.schema,
+      locked: !dbOk,
+      lockMsg: "Requires database",
+    },
+    { id: "routes", label: "API Routes", icon: Icons.route },
+    // { id: "docs", label: "API Docs", icon: Icons.docs },  // hidden for now
+    { id: "api-tester", label: "API Tester", icon: Icons.apiTester },
+    {
+      id: "security",
+      label: "Security",
+      icon: Icons.shield,
+      section: "Features",
+    },
+    { id: "realtime", label: "Real-time", icon: Icons.realtime },
+    { id: "serialport", label: "SerialPort", icon: Icons.serial },
+    // { id: "mail", label: "Email", icon: Icons.mail },  // hidden for now
+    { id: "logs", label: "Logs", icon: Icons.logs, section: "Settings" },
+    { id: "env", label: "Environment", icon: Icons.env },
+  ];
+
+  let currentSection = null;
+  return html`<div className="sidebar">
+    <div className="sidebar-brand">
+      <pre>${`██╗  ██╗██████╗ ███╗   ██╗ ██████╗ ██████╗ ███████╗\n██║  ██║██╔══██╗████╗  ██║██╔═══██╗██╔══██╗██╔════╝\n███████║██████╔╝██╔██╗ ██║██║   ██║██║  ██║█████╗\n╚════██║██╔══██╗██║╚██╗██║██║   ██║██║  ██║██╔══╝\n     ██║██████╔╝██║ ╚████║╚██████╔╝██████╔╝███████╗\n     ╚═╝╚═════╝ ╚═╝  ╚═══╝ ╚═════╝ ╚═════╝ ╚══════╝`}</pre>
+    </div>
+    ${navItems.map((item) => {
+      const sectionHeader =
+        item.section && item.section !== currentSection
+          ? ((currentSection = item.section),
+            html`<div className="sidebar-section">${item.section}</div>`)
+          : null;
+      return html`<${React.Fragment} key=${item.id}>
+        ${sectionHeader}
+        <div
+          className=${`sidebar-item ${page === item.id ? "active" : ""} ${item.locked ? "locked" : ""}`}
+          onClick=${() => !item.locked && setPage(item.id)}
+          title=${item.locked ? item.lockMsg : item.label}
+        >
+          <span className="sidebar-icon">${item.icon}</span>
+          ${item.label}
+          ${item.locked &&
+          html`<span className="lock-icon">${Icons.lock}</span>`}
+        </div>
+      <//>`;
+    })}
+  </div>`;
+}

package/app-1/.4bnode/assets/js/components/ToastContainer.js

@@ -0,0 +1,15 @@
+import { html } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function ToastContainer() {
+  const { toasts } = useApp();
+  if (toasts.length === 0) return null;
+  return html`<div className="toast-container">
+    ${toasts.map(
+      (t) =>
+        html`<div key=${t.id} className=${`toast ${t.type}`}>
+          ${t.message}
+        </div>`,
+    )}
+  </div>`;
+}

package/app-1/.4bnode/assets/js/context.js

@@ -0,0 +1,7 @@
+import React, { createContext, useContext } from "react";
+
+export const AppContext = createContext();
+
+export function useApp() {
+  return useContext(AppContext);
+}

package/app-1/.4bnode/assets/js/lib.js

@@ -0,0 +1,113 @@
+import React from "react";
+import htm from "htm";
+import {
+  LuLayoutDashboard,
+  LuDatabase,
+  LuFileText,
+  LuRadio,
+  LuPlus,
+  LuTrash2,
+  LuCheck,
+  LuLock,
+  LuArrowRight,
+  LuPencil,
+  LuCable,
+  LuActivity,
+  LuZap,
+  LuShield,
+  LuBox,
+  LuFlaskConical,
+  LuSend,
+  LuSettings,
+  LuScrollText,
+  LuSparkles,
+  LuBookOpen,
+  LuMail,
+} from "react-icons/lu";
+
+export const html = htm.bind(React.createElement);
+export const API = "/_dev/api";
+
+export function getStoredPasskey() {
+  return sessionStorage.getItem("_dev_passkey") || "";
+}
+
+export function copyToClipboard(text) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    return navigator.clipboard.writeText(text);
+  }
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.cssText = "position:fixed;opacity:0";
+  document.body.appendChild(ta);
+  ta.select();
+  document.execCommand("copy");
+  document.body.removeChild(ta);
+  return Promise.resolve();
+}
+
+export async function api(path, options = {}) {
+  const passkey = getStoredPasskey();
+  const headers = { "Content-Type": "application/json" };
+  if (passkey) headers["x-passkey"] = passkey;
+  const res = await fetch(API + path, {
+    headers,
+    ...options,
+    body: options.body ? JSON.stringify(options.body) : undefined,
+  });
+  const text = await res.text();
+  let data;
+  try {
+    data = JSON.parse(text);
+  } catch {
+    if (res.ok) return { message: "Done" };
+    throw new Error("Server restarting, please wait...");
+  }
+  if (!res.ok) {
+    const e = new Error(data.error || data.message || "Request failed");
+    e.data = data; // expose extra fields (e.g. command output) to callers
+    throw e;
+  }
+  return data;
+}
+
+export const Icons = {
+  dashboard: html`<${LuLayoutDashboard} size=${16} />`,
+  database: html`<${LuDatabase} size=${16} />`,
+  schema: html`<${LuFileText} size=${16} />`,
+  route: html`<${LuRadio} size=${16} />`,
+  realtime: html`<${LuActivity} size=${16} />`,
+  env: html`<${LuSettings} size=${16} />`,
+  plus: html`<${LuPlus} size=${16} />`,
+  trash: html`<${LuTrash2} size=${16} />`,
+  check: html`<${LuCheck} size=${16} />`,
+  lock: html`<${LuLock} size=${12} />`,
+  arrow: html`<${LuArrowRight} size=${14} />`,
+  edit: html`<${LuPencil} size=${16} />`,
+  serial: html`<${LuCable} size=${16} />`,
+  zap: html`<${LuZap} size=${16} />`,
+  shield: html`<${LuShield} size=${16} />`,
+  box: html`<${LuBox} size=${16} />`,
+  apiTester: html`<${LuFlaskConical} size=${16} />`,
+  send: html`<${LuSend} size=${16} />`,
+  logs: html`<${LuScrollText} size=${16} />`,
+  ai: html`<${LuSparkles} size=${16} />`,
+  docs: html`<${LuBookOpen} size=${16} />`,
+  mail: html`<${LuMail} size=${16} />`,
+};
+
+export const PAGE_TITLES = {
+  dashboard: "Dashboard",
+  "ai-builder": "AI Builder",
+  database: "Database",
+  schemas: "Schemas",
+  routes: "API Routes",
+  docs: "API Docs",
+  security: "Security",
+  "api-tester": "API Tester",
+  realtime: "Real-time",
+  serialport: "SerialPort",
+  mail: "Email",
+  logs: "Logs",
+  env: "Environment",
+};

package/app-1/.4bnode/assets/js/main.js

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import { html } from "./lib.js";
+import { Root } from "./Root.js";
+
+createRoot(document.getElementById("root")).render(html`<${Root} />`);