4bnode 4.0.9 → 4.1.1

package/skeleton/.4bnode/ui.html

@@ -56,19 +56,19 @@
       }
 
       :root {
-        --bg: #09090b;
-        --bg-surface: #0f0f13;
-        --bg-card: #16161d;
-        --bg-card-hover: #1c1c26;
-        --bg-input: #12121a;
-        --border: rgba(255, 255, 255, 0.07);
-        --border-focus: rgba(99, 102, 241, 0.5);
-        --text: #f0f0f5;
-        --text-secondary: #a1a1aa;
-        --text-muted: #63637a;
-        --accent: #6366f1;
-        --accent-light: #818cf8;
-        --accent-glow: rgba(99, 102, 241, 0.15);
+        --bg: #141720;
+        --bg-surface: #11141e;
+        --bg-card: #1a1d2b;
+        --bg-card-hover: #21253a;
+        --bg-input: #13161f;
+        --border: rgba(255, 255, 255, 0.08);
+        --border-focus: rgba(0, 121, 255, 0.5);
+        --text: #eceef4;
+        --text-secondary: #8b8fa3;
+        --text-muted: #626880;
+        --accent: #0079ff;
+        --accent-light: #3daefd;
+        --accent-glow: rgba(0, 94, 255, 0.18);
         --success: #22c55e;
         --success-glow: rgba(34, 197, 94, 0.12);
         --warning: #f59e0b;
@@ -128,23 +128,27 @@
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
-        padding: 20px 0;
+        padding: 0 0 16px;
         overflow-y: auto;
       }
       .sidebar-brand {
-        padding: 0 20px 20px;
+        height: 61px;
+        display: flex;
+        align-items: center;
+        padding: 0 20px;
         border-bottom: 1px solid var(--border);
         margin-bottom: 8px;
+        flex-shrink: 0;
       }
       .sidebar-brand pre {
         font-family: monospace;
-        font-size: 5.5px;
+        font-size: 4px;
         line-height: 1.1;
         letter-spacing: 0.5px;
-        background: linear-gradient(135deg, #00c6ff, #0072ff, #7b2ff7);
+        background: linear-gradient(135deg, #3daefd, #0079ff, #005eff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        margin: 0 0 6px -2px;
+        margin: 0 0 0 -2px;
         white-space: pre;
         user-select: none;
       }
@@ -180,7 +184,21 @@
         color: var(--text);
       }
       .sidebar-item.active {
-        background: var(--accent-glow);
+        background: rgba(255, 255, 255, 0.06);
+        color: #f0f1f5;
+      }
+      .sidebar-item.active::before {
+        content: "";
+        position: absolute;
+        left: -8px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 16px;
+        border-radius: 0 3px 3px 0;
+        background: var(--accent-light);
+      }
+      .sidebar-item.active .sidebar-icon {
         color: var(--accent-light);
       }
       .sidebar-item.locked {
@@ -216,10 +234,12 @@
         overflow: hidden;
       }
       .topbar {
+        height: 61px;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 16px 28px;
+        padding: 0 28px;
+        background: var(--bg-surface);
         border-bottom: 1px solid var(--border);
         flex-shrink: 0;
       }
@@ -479,6 +499,8 @@
         font-weight: 500;
         padding: 3px 8px;
         border-radius: 20px;
+        background: rgba(255, 255, 255, 0.07);
+        color: var(--text-secondary);
       }
       .badge-success {
         background: var(--success-glow);
@@ -822,8 +844,8 @@
         color: #ef4444;
       }
       .route-method.multi {
-        background: rgba(99, 102, 241, 0.15);
-        color: #818cf8;
+        background: rgba(0, 94, 255, 0.15);
+        color: #3daefd;
       }
       .route-endpoint-row {
         display: flex;
@@ -1264,7 +1286,7 @@
 
       /* ── Code block ── */
       .code-block {
-        background: #0d0d12;
+        background: #11141e;
         border: 1px solid var(--border);
         border-radius: var(--radius);
         padding: 16px;
@@ -1415,7 +1437,7 @@
         line-height: 1.15;
         letter-spacing: 1px;
         white-space: pre;
-        background: linear-gradient(135deg, #00c6ff, #0072ff, #7b2ff7);
+        background: linear-gradient(135deg, #3daefd, #0079ff, #005eff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         user-select: none;
@@ -1439,7 +1461,7 @@
       }
       .splash-company span {
         font-weight: 600;
-        background: linear-gradient(135deg, #00c6ff, #7b2ff7);
+        background: linear-gradient(135deg, #3daefd, #005eff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
@@ -1448,7 +1470,7 @@
         width: 300px;
         height: 300px;
         border-radius: 50%;
-        background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
+        background: radial-gradient(circle, rgba(0,94,255,0.12) 0%, transparent 70%);
         pointer-events: none;
       }
 
@@ -1487,16 +1509,15 @@
         color: var(--text-secondary);
         margin: 0;
       }
-      .passkey-inputs {
-        display: flex;
-        gap: 10px;
+      .passkey-field {
+        width: 100%;
       }
-      .passkey-inputs input {
-        width: 44px;
-        height: 52px;
-        text-align: center;
-        font-size: 22px;
-        font-weight: 600;
+      .passkey-field input {
+        width: 100%;
+        height: 48px;
+        padding: 0 14px;
+        font-size: 16px;
+        font-weight: 500;
         font-family: "Noto Sans", sans-serif;
         background: var(--bg);
         border: 1px solid var(--border);
@@ -1504,12 +1525,13 @@
         color: var(--text);
         outline: none;
         transition: border-color 0.2s;
+        box-sizing: border-box;
       }
-      .passkey-inputs input:focus {
-        border-color: #0072ff;
-        box-shadow: 0 0 0 2px rgba(0, 114, 255, 0.15);
+      .passkey-field input:focus {
+        border-color: #0079ff;
+        box-shadow: 0 0 0 2px rgba(0, 94, 255, 0.15);
       }
-      .passkey-inputs input.error {
+      .passkey-field input.error {
         border-color: #ef4444;
         box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
       }
@@ -1526,7 +1548,7 @@
         font-size: 14px;
         font-weight: 600;
         color: #fff;
-        background: linear-gradient(135deg, #0072ff, #7b2ff7);
+        background: linear-gradient(135deg, #0079ff, #005eff);
         border: none;
         border-radius: 10px;
         cursor: pointer;

package/skeleton/_gitignore

@@ -1,3 +1,10 @@
+# Secrets — never commit (deploy these out-of-band, like .env)
+.env
+.env.*
+!.env.example
+src/api-keys.json
+src/docs-auth.json
+
 # Dependencies
 node_modules/
 

package/skeleton/index.js

@@ -4,10 +4,13 @@ import path from "path";
 import fs from "fs";
 import cors from "cors";
 import os from "os";
+import helmet from "helmet";
+import rateLimit from "express-rate-limit";
 import { createInterface } from "readline";
+import { notFound, errorHandler } from "./src/middleware/errorHandler.js";
+import apiKey from "./src/middleware/apiKey.js";
 
 // ── Environment ─────────────────────────────────────
-const env = process.env.NODE_ENV || "development";
 dotenv.config();
 
 const app = express();
@@ -19,14 +22,45 @@ app.use(express.json({ limit: "50mb" }));
 app.use(express.urlencoded({ extended: true, limit: "50mb" }));
 app.use(cors({ origin: "*" }));
 
-// ── Dev Dashboard (development only) ────────────────
-if (env === "development") {
+// ── Dev Dashboard (local development only) ───────────
+// The dashboard at /_dev can write files and run shell commands — it is a
+// remote-code-execution surface and must NEVER be reachable in production.
+// In production it is not even imported. It additionally restricts itself to
+// loopback requests and requires a passkey (see .4bnode/dev-api.js).
+//   • production (NODE_ENV=production): OFF — set _4BNODE_DASHBOARD=on to force.
+//   • non-production: ON — set _4BNODE_DASHBOARD=off to disable.
+const dashboardEnabled =
+  process.env._4BNODE_DASHBOARD === "on" ||
+  (process.env.NODE_ENV !== "production" && process.env._4BNODE_DASHBOARD !== "off");
+if (dashboardEnabled) {
   try {
     const devApi = await import("./.4bnode/dev-api.js");
     app.use("/_dev", devApi.default);
   } catch {}
 }
 
+// ── Security (built-in by default) ───────────────────
+// Mounted AFTER the /_dev dashboard so its CDN/inline scripts aren't blocked by
+// helmet's CSP and the dashboard isn't throttled by the rate limiter.
+app.use(helmet());
+
+// ── Rate limiting ────────────────────────────────────
+// Tune via .env: RATE_LIMIT_WINDOW_MS (ms) and RATE_LIMIT_MAX (per window).
+const apiLimiter = rateLimit({
+  windowMs: Number(process.env.RATE_LIMIT_WINDOW_MS) || 15 * 60 * 1000,
+  max: Number(process.env.RATE_LIMIT_MAX) || 100,
+  standardHeaders: true,
+  legacyHeaders: false,
+});
+app.use(apiLimiter);
+
+// ── API key gate ─────────────────────────────────────
+// Every /api/* request must present a valid key in the `x-api-key` header.
+// Manage keys in the dashboard (API Keys). Set API_KEY_REQUIRED=off to disable.
+if (process.env.API_KEY_REQUIRED !== "off") {
+  app.use("/api", apiKey);
+}
+
 // ── Static Files ────────────────────────────────────
 app.use(express.static(path.join(__dirname, "public")));
 
@@ -69,6 +103,10 @@ function askPort(busyPort) {
   });
 }
 
+// ── Error handling (must be last) ──
+app.use(notFound);
+app.use(errorHandler);
+
 // ── Start Server ────────────────────────────────────
 async function startServer(tryPort) {
   const listener = app.listen(tryPort);

package/skeleton/package.json

@@ -15,7 +15,10 @@
   "dependencies": {
     "express": "^5.2.1",
     "dotenv": "^17.3.1",
-    "cors": "^2.8.6"
+    "cors": "^2.8.6",
+    "helmet": "^8.0.0",
+    "express-rate-limit": "^7.4.0",
+    "zod": "^3.23.0"
   },
   "devDependencies": {
     "nodemon": "^3.1.14"

package/skeleton/src/middleware/apiKey.js

@@ -0,0 +1,36 @@
+// API key authentication. Named keys are managed by the 4bnode dashboard and
+// stored in src/api-keys.json. Send a key in the `x-api-key` request header:
+//   import apiKey from './src/middleware/apiKey.js';
+//   app.use('/api/private', apiKey);
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const KEYS_FILE = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'api-keys.json');
+let _cache = { mtimeMs: -1, keys: [] };
+
+// Read the keys file fresh when it changes (mtime-cached), so keys generated or
+// revoked in the dashboard take effect immediately — no restart needed.
+function loadKeys() {
+  try {
+    const { mtimeMs } = fs.statSync(KEYS_FILE);
+    if (mtimeMs !== _cache.mtimeMs) {
+      const list = JSON.parse(fs.readFileSync(KEYS_FILE, 'utf8'));
+      _cache = { mtimeMs, keys: (Array.isArray(list) ? list : []).map((k) => k && k.key).filter(Boolean) };
+    }
+  } catch {
+    _cache = { mtimeMs: -1, keys: [] };
+  }
+  return _cache.keys;
+}
+
+const apiKey = (req, res, next) => {
+  const provided = req.header('x-api-key');
+  const valid = loadKeys();
+  if (!provided || !valid.includes(provided)) {
+    return res.status(401).json({ message: 'Invalid or missing API key' });
+  }
+  next();
+};
+
+export default apiKey;

package/skeleton/src/middleware/errorHandler.js

@@ -0,0 +1,15 @@
+// Central error handling. Register AFTER all routes:
+//   app.use(notFound);
+//   app.use(errorHandler);
+export function notFound(req, res, next) {
+  res.status(404).json({ message: `Not found - ${req.originalUrl}` });
+}
+
+export function errorHandler(err, req, res, next) {
+  const status = err.status || err.statusCode || 500;
+  console.error(err);
+  res.status(status).json({
+    message: err.message || 'Server error',
+    ...(process.env.NODE_ENV === 'production' ? {} : { stack: err.stack }),
+  });
+}

package/skeleton/src/middleware/roles.js

@@ -0,0 +1,14 @@
+// Role-based access control. Use AFTER the JWT auth middleware so req.user is set:
+//   router.get('/admin', auth, roles('admin'), handler);
+// Requires the login token payload to include a `role` (e.g. jwt.sign({ id, role })).
+const roles = (...allowed) => (req, res, next) => {
+  if (!req.user) {
+    return res.status(401).json({ message: 'Not authenticated' });
+  }
+  if (allowed.length && !allowed.includes(req.user.role)) {
+    return res.status(403).json({ message: 'Forbidden: insufficient role' });
+  }
+  next();
+};
+
+export default roles;

package/skeleton/src/middleware/validate.js

@@ -0,0 +1,20 @@
+import { ZodError } from 'zod';
+
+// Validate part of the request against a Zod schema. Replaces req[source] with the
+// parsed/coerced data on success. Use as middleware:
+//   router.post('/', validate(userSchema), handler);          // validates req.body
+//   router.get('/', validate(querySchema, 'query'), handler); // validates req.query
+const validate = (schema, source = 'body') => (req, res, next) => {
+  const result = schema.safeParse(req[source]);
+  if (!result.success) {
+    const errors = (result.error instanceof ZodError ? result.error.issues : []).map((i) => ({
+      path: i.path.join('.'),
+      message: i.message,
+    }));
+    return res.status(400).json({ message: 'Validation failed', errors });
+  }
+  req[source] = result.data;
+  next();
+};
+
+export default validate;