4bnode 4.1.9 → 4.2.1

package/skeleton/.4bnode/assets/js/pages/DiscoveryPage.js

@@ -15,9 +15,12 @@ export function DiscoveryPage() {
   const [info, setInfo] = useState(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [toggling, setToggling] = useState(false);
   const [name, setName] = useState("");
   const [type, setType] = useState("http");
-  const [enabled, setEnabled] = useState(true);
+  const [enabled, setEnabled] = useState(false);
+  const [iface, setIface] = useState("");
+  const [switchingIface, setSwitchingIface] = useState(false);
 
   const [browseType, setBrowseType] = useState("http");
   const [services, setServices] = useState(null);
@@ -30,7 +33,8 @@ export function DiscoveryPage() {
       setInfo(r);
       setName((r.config && r.config.name) || "");
       setType((r.config && r.config.type) || "http");
-      setEnabled(r.enabled !== false);
+      setEnabled(r.enabled === true);
+      setIface((r.config && r.config.interface) || "");
     } catch (err) {
       toast(err.message, "error");
     }
@@ -41,6 +45,40 @@ export function DiscoveryPage() {
     loadInfo();
   }, []);
 
+  // Flip Bonjour on/off immediately — no "Save" step. The dashboard runs in the
+  // same process as the advertiser, so the server re-publishes / unpublishes live
+  // and persists BONJOUR_ENABLED to .env in one call.
+  async function handleToggle(e) {
+    const next = e.target.checked;
+    setEnabled(next); // optimistic
+    setToggling(true);
+    try {
+      await api("/discovery/config", { method: "POST", body: { enabled: next } });
+      toast(next ? "Bonjour enabled" : "Bonjour disabled", "success");
+      loadInfo();
+    } catch (err) {
+      setEnabled(!next); // revert on failure
+      toast(err.message, "error");
+    }
+    setToggling(false);
+  }
+
+  // Pick which network to advertise on. Applies live, like the toggle.
+  async function handleInterface(next) {
+    const prev = iface;
+    setIface(next);
+    setSwitchingIface(true);
+    try {
+      await api("/discovery/config", { method: "POST", body: { interface: next } });
+      toast(next ? "Advertising on " + next : "Advertising on all networks", "success");
+      loadInfo();
+    } catch (err) {
+      setIface(prev);
+      toast(err.message, "error");
+    }
+    setSwitchingIface(false);
+  }
+
   async function handleSave() {
     setSaving(true);
     try {
@@ -114,6 +152,20 @@ export function DiscoveryPage() {
                   </div>
                 </div>`
               : html`<div>
+                  <!-- Enable / disable — applies instantly, no restart -->
+                  <div style=${{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px", padding: "10px 12px", border: "1px solid var(--border)", borderRadius: "8px", marginBottom: "14px" }}>
+                    <div>
+                      <div style=${{ fontSize: "13px", fontWeight: 600 }}>Advertise on local network</div>
+                      <div className="text-muted" style=${{ fontSize: "12px" }}>
+                        ${enabled ? "On — this app is discoverable via Bonjour/mDNS" : "Off — not broadcasting on the network"}
+                      </div>
+                    </div>
+                    <label className="form-toggle">
+                      <input type="checkbox" checked=${enabled} disabled=${toggling} onChange=${handleToggle} />
+                      <span className="slider"></span>
+                    </label>
+                  </div>
+
                   ${status === "advertising"
                     ? html`<div style=${{ display: "grid", gridTemplateColumns: "90px 1fr", gap: "6px 12px", fontSize: "13px", marginBottom: "12px" }}>
                         <span className="text-muted">Name</span><span>${self.name}</span>
@@ -122,6 +174,8 @@ export function DiscoveryPage() {
                           <a href=${`http://${self.host}:${self.port}`} target="_blank" rel="noreferrer">${self.host}:${self.port}</a>
                         </span>
                         <span className="text-muted">Service</span><span style=${{ fontFamily: "monospace" }}>_${self.type}._tcp.local</span>
+                        <span className="text-muted">Network</span>
+                        <span>${self.interface ? `${self.interface.label} · ${self.interface.address}` : "All networks"}</span>
                         ${self.txt ? Object.entries(self.txt).map(([k, v]) => html`
                           <span key=${k} className="text-muted">txt · ${k}</span><span>${String(v)}</span>`) : null}
                       </div>`
@@ -130,16 +184,40 @@ export function DiscoveryPage() {
                           ? html`Advertising failed: <span style=${{ color: "var(--danger, #e5484d)" }}>${self.error}</span>`
                           : enabled
                             ? "Not advertising yet — restart the app to start."
-                            : "Advertising is disabled (BONJOUR_ENABLED=off)."}
+                            : "Advertising is off. Turn it on above (sets BONJOUR_ENABLED=on)."}
                       </p>`}
 
-                  <div style=${{ borderTop: "1px solid var(--border)", margin: "4px 0 14px" }}></div>
+                  ${self && self.warning && enabled && html`<div className="text-sm" style=${{ padding: "8px 10px", borderRadius: "7px", background: "var(--warning-glow)", color: "var(--warning)", marginBottom: "12px" }}>
+                    ${self.warning}
+                  </div>`}
 
-                  <label className="form-label" style=${{ display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", marginBottom: "12px" }}>
-                    <input type="checkbox" checked=${enabled} onChange=${(e) => setEnabled(e.target.checked)} />
-                    Advertise this app on the local network
-                  </label>
+                  <!-- Which network to advertise on -->
                   <div className="form-group">
+                    <label className="form-label">
+                      Network${(info.interfaces || []).length > 1 ? " — several connected, pick one" : ""}
+                    </label>
+                    <div style=${{ display: "flex", flexDirection: "column", gap: "6px" }}>
+                      ${[{ name: "", label: "All networks", address: "Advertise on every connected network" }, ...(info.interfaces || [])].map((n) => html`
+                        <label key=${n.name || "all"} style=${{ display: "flex", alignItems: "center", gap: "10px", padding: "8px 10px", cursor: switchingIface ? "wait" : "pointer",
+                          border: "1px solid " + (iface === n.name ? "var(--border-focus)" : "var(--border)"), borderRadius: "7px",
+                          background: iface === n.name ? "var(--accent-glow)" : "transparent" }}>
+                          <input type="radio" name="bonjour-iface" checked=${iface === n.name} disabled=${switchingIface}
+                            onChange=${() => handleInterface(n.name)} />
+                          <span style=${{ flex: 1, minWidth: 0 }}>
+                            <span style=${{ fontSize: "13px", fontWeight: 500 }}>${n.label}</span>
+                            <span className="text-muted" style=${{ fontSize: "12px", marginLeft: "8px", fontFamily: n.name ? "var(--mono)" : "inherit" }}>${n.address}</span>
+                          </span>
+                          ${n.selfAssigned && html`<span className="badge badge-warning" title="Self-assigned 169.254.x.x address: no network answered on this adapter">No network</span>`}
+                        </label>`)}
+                      ${iface && !(info.interfaces || []).some((n) => n.name === iface) && html`<div className="text-sm" style=${{ color: "var(--warning)" }}>
+                        Saved network "${iface}" is not connected right now, so all networks are used.
+                      </div>`}
+                    </div>
+                  </div>
+
+                  <div style=${{ borderTop: "1px solid var(--border)", margin: "4px 0 14px" }}></div>
+
+                  <div className="form-group" style=${{ opacity: enabled ? 1 : 0.55 }}>
                     <label className="form-label">Service name</label>
                     <input className="form-input" value=${name} placeholder="My App (auto: app + hostname)" onInput=${(e) => setName(e.target.value)} />
                   </div>

package/skeleton/.4bnode/assets/js/pages/MailPage.js

@@ -16,13 +16,15 @@ await sendMail({
   subject: 'Welcome to 4Brains!',
   html: emailTemplate({ title: 'Welcome', body: 'Thanks for signing up.' }),
   // text: 'Plain-text fallback',     // optional
-  // cc, bcc, replyTo, from           // optional
+  // replyTo, from                    // optional
+  // cc, bcc                          // SMTP only
 });`,
   },
   {
     id: "attachment",
     label: "Attachment",
-    code: `import { sendMail } from '../services/mailer.js';
+    code: `// Attachments need the Custom SMTP provider (Sancharak sends text/html only).
+import { sendMail } from '../services/mailer.js';
 
 await sendMail({
   to: 'user@example.com',
@@ -65,9 +67,9 @@ await sendMail({ to: user.email, subject: 'Welcome', html });
 export function MailPage() {
   const { toast, refresh } = useApp();
   const [info, setInfo] = useState(null);
-  const [provider, setProvider] = useState("resend");
+  const [provider, setProvider] = useState("sancharak");
   const [form, setForm] = useState({
-    apiKey: "", resendFrom: "",
+    apiKey: "", mailFrom: "", replyTo: "",
     host: "", port: 587, secure: false, user: "", pass: "", smtpFrom: "",
   });
   const [busy, setBusy] = useState(false);
@@ -96,11 +98,12 @@ export function MailPage() {
       setConfigError(r.configured && r.verified === false
         ? "The saved email configuration failed its last connection test. Update the details and save again."
         : "");
-      setProvider(r.provider || "resend");
-      const rs = r.resend || {}, sm = r.smtp || {};
+      setProvider(r.provider || "sancharak");
+      const sk = r.sancharak || {}, sm = r.smtp || {};
       setForm((f) => ({
         ...f,
-        resendFrom: rs.from || f.resendFrom,
+        mailFrom: sk.from || f.mailFrom,
+        replyTo: sk.replyTo || f.replyTo,
         host: sm.host || f.host,
         port: sm.port || f.port || 587,
         secure: !!sm.secure,
@@ -120,10 +123,18 @@ export function MailPage() {
 
   async function save() {
     let body;
-    if (provider === "resend") {
-      if (!form.resendFrom.trim()) { toast("From address is required", "error"); return; }
-      if (!form.apiKey.trim() && !(info.resend && info.resend.hasKey)) { toast("API key is required", "error"); return; }
-      body = { provider: "resend", apiKey: form.apiKey.trim(), from: form.resendFrom.trim(), domainPassword };
+    if (provider === "sancharak") {
+      if (!form.mailFrom.trim()) { toast("From address is required", "error"); return; }
+      if (!form.apiKey.trim() && !(info.sancharak && info.sancharak.hasKey)) { toast("API key is required", "error"); return; }
+      const k = form.apiKey.trim();
+      if (k) {
+        // Same rules as the server: a key copied in shortened form ("snk_…") is rejected
+        // here, before it can replace the working key.
+        if (/[^!-~]/.test(k)) { toast(k.includes("\u2026") ? 'That key contains "…" — it looks shortened. Copy the full key from Sancharak.' : "That key contains spaces or non-ASCII characters.", "error"); return; }
+        if (!k.startsWith("snk_")) { toast('A Sancharak API key starts with "snk_"', "error"); return; }
+        if (k.length < 24) { toast("That key is too short (" + k.length + " characters) — it may be cut off.", "error"); return; }
+      }
+      body = { provider: "sancharak", apiKey: form.apiKey.trim(), from: form.mailFrom.trim(), replyTo: form.replyTo.trim(), domainPassword };
     } else {
       if (!form.host.trim()) { toast("SMTP host is required", "error"); return; }
       body = { provider: "smtp", host: form.host.trim(), port: form.port, secure: form.secure, user: form.user.trim(), pass: form.pass, from: form.smtpFrom.trim(), domainPassword };
@@ -167,7 +178,7 @@ export function MailPage() {
   // SMTP sender is the From, or the User when From is blank — check both, matching
   // the server (from || user).
   const officialRe = /4brains\.in/i;
-  const officialValues = provider === "resend" ? [form.resendFrom] : [form.host, form.user, form.smtpFrom];
+  const officialValues = provider === "sancharak" ? [form.mailFrom] : [form.host, form.user, form.smtpFrom];
   const isOfficial = officialValues.some((v) => officialRe.test(String(v || "")));
 
   const labelStyle = { fontSize: "11px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-muted)", marginBottom: "8px" };
@@ -176,7 +187,7 @@ export function MailPage() {
     <div className="flex items-center justify-between mb-4">
       <div>
         <div className="card-title">Email</div>
-        <div className="card-subtitle">Transactional email via IntraApp(Postmaster) or any custom SMTP server</div>
+        <div className="card-subtitle">Transactional email via Sancharak or any custom SMTP server</div>
       </div>
       ${info.configured && html`<span className="badge badge-success">Configured</span>`}
     </div>
@@ -192,14 +203,21 @@ export function MailPage() {
         </div>
         ${current.hint && html`<div className="text-sm text-muted" style=${{ marginBottom: "14px" }}>${current.hint}</div>`}
 
-        ${provider === "resend"
+        ${info.legacyResend && html`<div className="text-sm" style=${{ padding: "8px 10px", borderRadius: "7px", background: "var(--warning-glow)", color: "var(--warning)", marginBottom: "14px" }}>
+          This project used IntraApp (Postmaster), which has been replaced by Sancharak. Enter your Sancharak API key and save to switch.
+        </div>`}
+        ${provider === "sancharak"
           ? html`<div className="form-group">
               <label className="form-label">From address</label>
-              <input className="form-input" value=${form.resendFrom} onInput=${(e) => setField({ resendFrom: e.target.value })} placeholder="no-reply@yourdomain.com" />
+              <input className="form-input" value=${form.mailFrom} onInput=${(e) => setField({ mailFrom: e.target.value })} placeholder="Your App <hello@yourdomain.com>" />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Reply-to <span className="text-muted" style=${{ fontWeight: 400 }}>(optional)</span></label>
+              <input className="form-input" value=${form.replyTo} onInput=${(e) => setField({ replyTo: e.target.value })} placeholder="support@yourdomain.com" />
             </div>
             <div className="form-group">
-              <label className="form-label">API Key ${info.resend && info.resend.hasKey ? html`<span className="text-muted" style=${{ fontWeight: 400 }}>(saved)</span>` : ""}</label>
-              <input className="form-input" type="password" value=${form.apiKey} onInput=${(e) => setField({ apiKey: e.target.value })} placeholder=${info.resend && info.resend.hasKey ? "••••••••" : "re_..."} />
+              <label className="form-label">API Key ${info.sancharak && info.sancharak.hasKey ? html`<span className="text-muted" style=${{ fontWeight: 400 }}>(saved)</span>` : ""}</label>
+              <input className="form-input" type="password" autoComplete="off" value=${form.apiKey} onInput=${(e) => setField({ apiKey: e.target.value })} placeholder=${info.sancharak && info.sancharak.hasKey ? "••••••••" : "snk_..."} />
             </div>`
           : html`<div style=${{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
               <div className="form-group" style=${{ flex: "1 1 200px" }}>
@@ -240,9 +258,9 @@ export function MailPage() {
           <label className="form-label">Authorization password</label>
           <input className="form-input" type="password" value=${domainPassword} onInput=${(e) => setDomainPassword(e.target.value)} placeholder="Required for 4brains.in" />
         </div>`}
-        <button className="btn btn-primary" onClick=${save} disabled=${busy || (provider === "smtp" && !form.host.trim()) || (provider === "resend" && !form.resendFrom.trim()) || (isOfficial && !domainPassword)}>
+        <button className="btn btn-primary" onClick=${save} disabled=${busy || (provider === "smtp" && !form.host.trim()) || (provider === "sancharak" && !form.mailFrom.trim()) || (isOfficial && !domainPassword)}>
           ${busy ? html`<span className="spinner" />` : html`<${LuCheck} size=${16} />`}
-          ${busy ? "Saving..." : "Save & install"}
+          ${busy ? "Saving..." : provider === "smtp" ? "Save & install" : "Save"}
         </button>
 
         ${info.configured && html`<div style=${{ marginTop: "16px", paddingTop: "16px", borderTop: "1px solid var(--border)" }}>

package/skeleton/.4bnode/assets/js/pages/RoutesPage.js

@@ -248,7 +248,7 @@ export function RoutesPage() {
                 <div
                   className="text-sm text-muted"
                   style=${{
-                    fontFamily: "'SF Mono', 'Fira Code', monospace",
+                    fontFamily: "var(--mono)",
                   }}
                 >
                   src/routes/${selectedRoute}

package/skeleton/.4bnode/assets/js/pages/SchemasPage.js

@@ -232,7 +232,7 @@ function SchemaDetailPanel({ model, reqCount, uniqCount, onEdit, onDelete }) {
       <div className="flex items-center justify-between mb-3">
         <div>
           <div style=${{ fontWeight: 600, fontSize: '16px', marginBottom: '2px' }}>${model.name}</div>
-          <div className="text-sm text-muted" style=${{ fontFamily: "'SF Mono', monospace" }}>src/models/${model.name}.js</div>
+          <div className="text-sm text-muted" style=${{ fontFamily: "var(--mono)" }}>src/models/${model.name}.js</div>
         </div>
         <div className="flex gap-2">
           <button className="btn btn-ghost btn-sm" onClick=${onEdit}>
@@ -264,7 +264,7 @@ function SchemaDetailPanel({ model, reqCount, uniqCount, onEdit, onDelete }) {
         <tbody>
           ${model.fields?.map((f, i) => html`<tr key=${f.name} style=${{ borderBottom: '1px solid var(--border)' }}>
             <td style=${{ ...tdStyle, color: 'var(--text-muted)' }}>${i + 1}</td>
-            <td style=${{ ...tdStyle, fontWeight: 500, fontSize: '13px', fontFamily: "'SF Mono', monospace" }}>${f.name}</td>
+            <td style=${{ ...tdStyle, fontWeight: 500, fontSize: '13px', fontFamily: "var(--mono)" }}>${f.name}</td>
             <td style=${tdStyle}><span style=${{ fontSize: '12px', padding: '2px 8px', borderRadius: '4px', background: 'var(--accent-glow)', color: 'var(--accent-light)' }}>${f.type || 'String'}</span></td>
             <td style=${tdStyle}><div className="flex gap-1">
               ${f.required && html`<span className="badge badge-success" style=${{ fontSize: '10px' }}>required</span>`}
@@ -415,7 +415,7 @@ function SchemaBuilderPanel({ model, onDone }) {
     String: "var(--accent-light)",
     Number: "var(--success)",
     Boolean: "var(--warning)",
-    Date: "#a78bfa",
+    Date: "#8fb0ff",
     ObjectId: "#f472b6",
     Array: "#22d3ee",
     Mixed: "var(--text-secondary)",
@@ -658,7 +658,7 @@ function SchemaBuilderPanel({ model, onDone }) {
                   fontWeight: 500,
                   fontSize: "13px",
                   flex: 1,
-                  fontFamily: "'SF Mono', 'Fira Code', monospace",
+                  fontFamily: "var(--mono)",
                 }}
                 >${f.name}</span
               >
@@ -819,7 +819,7 @@ function SchemaBuilderPanel({ model, onDone }) {
       ${indexes.length > 0 && html`<div style=${{ marginTop: '12px' }}>
         ${indexes.map((idx, i) => html`<div key=${i} className="flex items-center gap-2" style=${{ padding: '6px 12px', background: 'var(--bg-input)', borderRadius: '6px', marginBottom: '4px', fontSize: '12px' }}>
           <span style=${{ fontSize: '9px', padding: '2px 6px', borderRadius: '4px', fontWeight: 600,
-            background: idx.type === 'text' ? 'rgba(59,130,246,0.15)' : 'rgba(124,58,237,0.15)',
+            background: idx.type === 'text' ? 'rgba(59,130,246,0.15)' : 'rgba(91,140,255,0.15)',
             color: idx.type === 'text' ? 'var(--info)' : 'var(--accent-light)' }}>
             ${idx.type === 'text' ? 'TEXT' : 'COMPOUND'}
           </span>

package/skeleton/.4bnode/assets/js/pages/SecurityPage.js

@@ -1,8 +1,157 @@
 import React, { useState, useEffect } from "react";
-import { LuCheck, LuGauge } from "react-icons/lu";
-import { html, api } from "../lib.js";
+import { LuCheck, LuGauge, LuKeyRound, LuCopy, LuTrash2, LuPlus } from "react-icons/lu";
+import { html, api, copyToClipboard } from "../lib.js";
 import { useApp } from "../context.js";
 
+// Save a key as the API Tester's {{apiKey}} variable. The tester sends it as
+// x-api-key on every request to this app, so the gate never blocks testing.
+function useKeyInTester(key) {
+  try {
+    const vars = JSON.parse(sessionStorage.getItem("_4bnode_vars") || "[]");
+    const list = Array.isArray(vars) ? vars.filter((v) => v.key !== "apiKey") : [];
+    list.push({ key: "apiKey", value: key, id: Date.now() });
+    sessionStorage.setItem("_4bnode_vars", JSON.stringify(list));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function ApiKeysCard() {
+  const { toast, showConfirm, refresh } = useApp();
+  const [info, setInfo] = useState(null);
+  const [name, setName] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [fresh, setFresh] = useState(null); // { key, name } shown once
+  const [paths, setPaths] = useState("");
+  const [savingGate, setSavingGate] = useState(false);
+
+  async function load() {
+    try {
+      const r = await api("/security/api-keys");
+      setInfo(r);
+      setPaths(r.gate.publicPaths || "");
+    } catch (err) {
+      toast(err.message, "error");
+    }
+  }
+  useEffect(() => { load(); }, []);
+
+  async function create() {
+    setCreating(true);
+    try {
+      const r = await api("/security/api-keys", { method: "POST", body: { name: name.trim() } });
+      setFresh(r);
+      setName("");
+      load();
+    } catch (err) {
+      toast(err.message, "error");
+    }
+    setCreating(false);
+  }
+
+  async function revoke(k) {
+    const ok = await showConfirm(`Revoke "${k.name}"? Any client using it gets 401 immediately.`, { confirmLabel: "Revoke", danger: true });
+    if (!ok) return;
+    try {
+      await api("/security/api-keys/" + encodeURIComponent(k.id), { method: "DELETE" });
+      toast("Key revoked", "success");
+      load();
+    } catch (err) {
+      toast(err.message, "error");
+    }
+  }
+
+  async function saveGate(body) {
+    setSavingGate(true);
+    try {
+      const r = await api("/security/api-gate", { method: "POST", body });
+      toast(r.message || "Saved", "success");
+      if (r.wiredNow) await refresh().catch(() => {});
+      load();
+    } catch (err) {
+      toast(err.message, "error");
+    }
+    setSavingGate(false);
+  }
+
+  if (!info) return html`<div className="card mb-4"><div className="text-muted text-sm">Loading API keys…</div></div>`;
+  const { gate, keys } = info;
+  const on = gate.wired && gate.enabled;
+
+  return html`<div className="card mb-4">
+    <div className="flex items-center justify-between mb-1" style=${{ gap: "12px", flexWrap: "wrap" }}>
+      <div className="flex items-center gap-2">
+        <${LuKeyRound} size=${16} />
+        <div className="card-title" style=${{ margin: 0 }}>API keys</div>
+        <span className=${`badge ${on ? "badge-success" : "badge-muted"}`}>${on ? "Required on every route" : "Not enforced"}</span>
+      </div>
+      <label className="form-toggle" title=${on ? "Turn the API key gate off" : "Require an API key on every route"}>
+        <input type="checkbox" checked=${on} disabled=${savingGate} onChange=${(e) => saveGate({ enabled: e.target.checked })} />
+        <span className="slider"></span>
+      </label>
+    </div>
+    <div className="card-subtitle mb-4">
+      Every request must send a valid key in the <span className="mono">x-api-key</span> header, including login and
+      registration. Routes that need a signed-in user still check the JWT as well. <span className="mono">/docs</span> and
+      the dashboard stay public.
+    </div>
+
+    ${on && keys.length === 0 && html`<div className="text-sm" style=${{ padding: "8px 10px", borderRadius: "7px", background: "var(--warning-glow)", color: "var(--warning)", marginBottom: "14px" }}>
+      No keys yet, so every API call is rejected with 401. Create a key below.
+    </div>`}
+
+    ${fresh && html`<div style=${{ border: "1px solid var(--border-focus)", background: "var(--accent-glow)", borderRadius: "8px", padding: "12px", marginBottom: "14px" }}>
+      <div style=${{ fontSize: "13px", fontWeight: 600, marginBottom: "4px" }}>Key "${fresh.name}" created</div>
+      <div className="text-sm text-muted" style=${{ marginBottom: "8px" }}>Copy it now. It is stored hashed and can't be shown again.</div>
+      <div className="code-block" style=${{ display: "flex", alignItems: "center", gap: "8px", whiteSpace: "normal", wordBreak: "break-all" }}>
+        <code style=${{ flex: 1 }}>${fresh.key}</code>
+      </div>
+      <div className="flex gap-2" style=${{ marginTop: "10px", flexWrap: "wrap" }}>
+        <button className="btn btn-secondary btn-sm" onClick=${() => copyToClipboard(fresh.key).then(() => toast("Copied", "success"))}><${LuCopy} size=${13} /> Copy</button>
+        <button className="btn btn-secondary btn-sm" onClick=${() => { if (useKeyInTester(fresh.key)) toast("Saved as {{apiKey}} in the API Tester", "success"); }}>Use in API Tester</button>
+        <button className="btn btn-ghost btn-sm" onClick=${() => setFresh(null)}>Done</button>
+      </div>
+    </div>`}
+
+    <div className="flex gap-2 mb-3" style=${{ flexWrap: "wrap" }}>
+      <input className="form-input" style=${{ flex: "1 1 220px" }} placeholder="Key name, e.g. Mobile app" value=${name}
+        onInput=${(e) => setName(e.target.value)} onKeyDown=${(e) => e.key === "Enter" && !creating && create()} />
+      <button className="btn btn-primary" onClick=${create} disabled=${creating}>
+        ${creating ? html`<span className="spinner" />` : html`<${LuPlus} size=${14} />`} Create key
+      </button>
+    </div>
+
+    ${keys.length > 0 && html`<div className="table-wrap" style=${{ border: "1px solid var(--border)", borderRadius: "8px", marginBottom: "14px" }}>
+      <table>
+        <thead><tr><th>Name</th><th>Key</th><th>Created</th><th></th></tr></thead>
+        <tbody>
+          ${keys.map((k) => html`<tr key=${k.id || k.prefix}>
+            <td>${k.name || "Unnamed"}${k.legacy && html` <span className="badge badge-warning" title="Stored in plaintext by an older version. Revoke it and create a new one.">plaintext</span>`}</td>
+            <td><span className="mono text-muted">${k.prefix}…</span></td>
+            <td className="text-muted">${k.createdAt ? new Date(k.createdAt).toLocaleDateString() : "—"}</td>
+            <td style=${{ textAlign: "right" }}>
+              <button className="btn btn-ghost btn-sm" onClick=${() => revoke(k)} disabled=${!k.id} title=${k.id ? "Revoke" : "Remove it from src/api-keys.json by hand"}><${LuTrash2} size=${13} /> Revoke</button>
+            </td>
+          </tr>`)}
+        </tbody>
+      </table>
+    </div>`}
+
+    <div className="form-group" style=${{ marginBottom: 0 }}>
+      <label className="form-label">Public paths (no key needed)</label>
+      <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+        <input className="form-input mono" style=${{ flex: "1 1 260px" }} placeholder="/health,/webhooks/stripe" value=${paths}
+          onInput=${(e) => setPaths(e.target.value)} />
+        <button className="btn btn-secondary" onClick=${() => saveGate({ publicPaths: paths })} disabled=${savingGate}>Save</button>
+      </div>
+      <div className="text-sm text-muted" style=${{ marginTop: "6px" }}>
+        Comma-separated path prefixes. Keep this short: anything listed here can be called by anyone.
+      </div>
+    </div>
+  </div>`;
+}
+
 export function SecurityPage() {
   const { toast } = useApp();
 
@@ -35,10 +184,12 @@ export function SecurityPage() {
       <div className="card-subtitle">
         <b>Security is built in</b> — Helmet, rate limiting, CORS, error handling, RBAC, and Zod
         validation ship with every app. Validation is generated per route from each route's own
-        fields when you create it. Adjust rate limiting below.
+        fields when you create it. Manage API keys and rate limiting below.
       </div>
     </div>
 
+    <${ApiKeysCard} />
+
     <div className="card">
       <div className="flex items-center gap-2 mb-1">
         <${LuGauge} size=${16} />