4bnode 4.1.0 → 4.1.1

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

@@ -3,57 +3,49 @@ import { html, api } from "../lib.js";
 import { useApp } from "../context.js";
 
 export function DatabasePage() {
-  const { data, toast, refresh } = useApp();
-  const [selectedDb, setSelectedDb] = useState(
-    data.mongoConfigured ? "mongodb" : null,
-  );
+  const { data, status, toast, refresh } = useApp();
+  // MongoDB is the only database, so the page shows its configuration directly
+  // (no database picker).
+  // Default the database name to the app's folder name (provided by the server).
+  const appName = status?.appName || "myapp";
   const [inputMode, setInputMode] = useState("fields"); // 'fields' or 'url'
   const [uri, setUri] = useState("");
-  const [prodUri, setProdUri] = useState("");
   const [host, setHost] = useState("localhost");
   const [port, setPort] = useState("27017");
-  const [dbName, setDbName] = useState("myapp");
+  const [dbName, setDbName] = useState("");
+  const [dbNameTouched, setDbNameTouched] = useState(false);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
-  const [prodHost, setProdHost] = useState("");
-  const [prodPort, setProdPort] = useState("");
-  const [prodDbName, setProdDbName] = useState("");
-  const [prodUsername, setProdUsername] = useState("");
-  const [prodPassword, setProdPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [editing, setEditing] = useState(false);
 
+  // Prefill the db name with the folder name once status loads — unless the user
+  // edited it, or we're editing an already-configured connection.
+  useEffect(() => {
+    if (!dbNameTouched && !data.mongoConfigured && status?.appName) {
+      setDbName(status.appName);
+    }
+  }, [status?.appName, data.mongoConfigured, dbNameTouched]);
+
   // Parse existing URI when entering edit mode
   useEffect(() => {
     if (data.mongoConfigured && data.mongoUri) {
       setUri(data.mongoUri);
-      setProdUri(data.mongoProdUri || "");
-      parseUriToFields(data.mongoUri, false);
-      if (data.mongoProdUri && data.mongoProdUri !== data.mongoUri) {
-        parseUriToFields(data.mongoProdUri, true);
-      }
+      parseUriToFields(data.mongoUri);
     }
   }, [data.mongoUri]);
 
-  function parseUriToFields(uriStr, isProd) {
+  function parseUriToFields(uriStr) {
     try {
       const match = uriStr.match(
         /^mongodb(?:\+srv)?:\/\/(?:([^:]+):([^@]+)@)?([^:\/]+)(?::(\d+))?\/(.+?)(?:\?.*)?$/,
       );
       if (match) {
-        if (isProd) {
-          setProdUsername(match[1] || "");
-          setProdPassword(match[2] || "");
-          setProdHost(match[3] || "");
-          setProdPort(match[4] || "27017");
-          setProdDbName(match[5] || "");
-        } else {
-          setUsername(match[1] || "");
-          setPassword(match[2] || "");
-          setHost(match[3] || "localhost");
-          setPort(match[4] || "27017");
-          setDbName(match[5] || "myapp");
-        }
+        setUsername(match[1] || "");
+        setPassword(match[2] || "");
+        setHost(match[3] || "localhost");
+        setPort(match[4] || "27017");
+        setDbName(match[5] || appName);
       }
     } catch {}
   }
@@ -63,60 +55,18 @@ export function DatabasePage() {
       user && pass
         ? `${encodeURIComponent(user)}:${encodeURIComponent(pass)}@`
         : "";
-    return `mongodb://${auth}${h || "localhost"}:${p || "27017"}/${db || "myapp"}`;
+    return `mongodb://${auth}${h || "localhost"}:${p || "27017"}/${db || appName}`;
   }
 
-  function getDevUri() {
+  function getUri() {
     return inputMode === "url"
-      ? (uri || "").trim() || "mongodb://localhost:27017/myapp"
+      ? (uri || "").trim() || `mongodb://localhost:27017/${appName}`
       : buildUri(host, port, dbName, username, password);
   }
 
-  function getProdUri() {
-    if (inputMode === "url") return (prodUri || "").trim() || getDevUri();
-    const ph = prodHost || host,
-      pp = prodPort || port,
-      pd = prodDbName || dbName;
-    const pu = prodUsername || username,
-      ppw = prodPassword || password;
-    return buildUri(ph, pp, pd, pu, ppw);
-  }
-
-  const databases = [
-    {
-      id: "mongodb",
-      name: "MongoDB",
-      desc: "Document database",
-      icon: "/_dev/assets/images/mongo.png",
-      available: true,
-    },
-    {
-      id: "postgresql",
-      name: "PostgreSQL",
-      desc: "Relational database",
-      icon: "/_dev/assets/images/postgresql.png",
-      available: false,
-    },
-    {
-      id: "mysql",
-      name: "MySQL",
-      desc: "Relational database",
-      icon: "/_dev/assets/images/mysql.png",
-      available: false,
-    },
-    {
-      id: "sqlite",
-      name: "SQLite",
-      desc: "Embedded database",
-      icon: "/_dev/assets/images/sqlite.png",
-      available: false,
-    },
-  ];
-
   async function handleSetup() {
-    const devUri = getDevUri();
-    const pUri = getProdUri();
-    if (!devUri.startsWith("mongodb://") && !devUri.startsWith("mongodb+srv://")) {
+    const connUri = getUri();
+    if (!connUri.startsWith("mongodb://") && !connUri.startsWith("mongodb+srv://")) {
       toast("Invalid MongoDB URI. Must start with mongodb:// or mongodb+srv://", "error");
       return;
     }
@@ -125,7 +75,7 @@ export function DatabasePage() {
       const isFirstTime = !data.mongoConfigured;
       const result = await api("/add-mongo", {
         method: "POST",
-        body: { uri: devUri, prodUri: pUri },
+        body: { uri: connUri },
       });
       toast(result.message, "success");
       setEditing(false);
@@ -158,8 +108,7 @@ export function DatabasePage() {
     return u.replace(/:([^@\/]+)@/, ":****@");
   }
 
-  const showForm =
-    (selectedDb === "mongodb" && !data.mongoConfigured) || editing;
+  const showForm = !data.mongoConfigured || editing;
 
   const inputModeToggle = html`<div className="flex gap-2 mb-4">
     <button
@@ -178,7 +127,7 @@ export function DatabasePage() {
 
   const urlInputs = html`<fragment>
     <div className="form-group">
-      <label className="form-label">Connection URI (Development)</label>
+      <label className="form-label">Connection URI</label>
       <input
         className="form-input"
         value=${uri}
@@ -186,30 +135,9 @@ export function DatabasePage() {
         placeholder="mongodb://username:password@localhost:27017/myapp"
       />
     </div>
-    <div className="form-group">
-      <label className="form-label"
-        >Connection URI (Production) — optional</label
-      >
-      <input
-        className="form-input"
-        value=${prodUri}
-        onInput=${(e) => setProdUri(e.target.value)}
-        placeholder="Same as development if empty"
-      />
-    </div>
   </fragment>`;
 
   const fieldInputs = html`<fragment>
-    <div
-      className="card-subtitle mb-3"
-      style=${{
-        fontSize: "12px",
-        textTransform: "uppercase",
-        letterSpacing: "0.05em",
-      }}
-    >
-      Development
-    </div>
     <div className="grid-2 mb-2">
       <div className="form-group">
         <label className="form-label">Host</label>
@@ -235,8 +163,8 @@ export function DatabasePage() {
       <input
         className="form-input"
         value=${dbName}
-        onInput=${(e) => setDbName(e.target.value)}
-        placeholder="myapp"
+        onInput=${(e) => { setDbNameTouched(true); setDbName(e.target.value); }}
+        placeholder=${appName}
       />
     </div>
     <div className="grid-2 mb-4">
@@ -260,69 +188,6 @@ export function DatabasePage() {
         />
       </div>
     </div>
-
-    <div
-      className="card-subtitle mb-3"
-      style=${{
-        fontSize: "12px",
-        textTransform: "uppercase",
-        letterSpacing: "0.05em",
-        borderTop: "1px solid var(--border)",
-        paddingTop: "16px",
-      }}
-    >
-      Production (optional — defaults to dev values)
-    </div>
-    <div className="grid-2 mb-2">
-      <div className="form-group">
-        <label className="form-label">Host</label>
-        <input
-          className="form-input"
-          value=${prodHost}
-          onInput=${(e) => setProdHost(e.target.value)}
-          placeholder=${host || "localhost"}
-        />
-      </div>
-      <div className="form-group">
-        <label className="form-label">Port</label>
-        <input
-          className="form-input"
-          value=${prodPort}
-          onInput=${(e) => setProdPort(e.target.value)}
-          placeholder=${port || "27017"}
-        />
-      </div>
-    </div>
-    <div className="form-group">
-      <label className="form-label">Database Name</label>
-      <input
-        className="form-input"
-        value=${prodDbName}
-        onInput=${(e) => setProdDbName(e.target.value)}
-        placeholder=${dbName || "myapp"}
-      />
-    </div>
-    <div className="grid-2">
-      <div className="form-group">
-        <label className="form-label">Username</label>
-        <input
-          className="form-input"
-          value=${prodUsername}
-          onInput=${(e) => setProdUsername(e.target.value)}
-          placeholder=${username || ""}
-        />
-      </div>
-      <div className="form-group">
-        <label className="form-label">Password</label>
-        <input
-          className="form-input"
-          type="password"
-          value=${prodPassword}
-          onInput=${(e) => setProdPassword(e.target.value)}
-          placeholder="********"
-        />
-      </div>
-    </div>
   </fragment>`;
 
   // Preview the generated URI when in fields mode
@@ -344,12 +209,17 @@ export function DatabasePage() {
               wordBreak: "break-all",
             }}
           >
-            ${maskUri(getDevUri())}
+            ${maskUri(getUri())}
           </div>
         </div>`
       : null;
 
   return html`<div>
+    <div className="card-title mb-1">Database</div>
+    <div className="card-subtitle mb-4">
+      Configure the MongoDB connection for your project
+    </div>
+
     ${data.mongoConfigured &&
     !editing &&
     html`<div
@@ -378,12 +248,7 @@ export function DatabasePage() {
           onClick=${() => {
             if (data.mongoUri) {
               setUri(data.mongoUri);
-              parseUriToFields(data.mongoUri, false);
-            }
-            if (data.mongoProdUri) {
-              setProdUri(data.mongoProdUri);
-              if (data.mongoProdUri !== data.mongoUri)
-                parseUriToFields(data.mongoProdUri, true);
+              parseUriToFields(data.mongoUri);
             }
             setEditing(true);
           }}
@@ -395,40 +260,14 @@ export function DatabasePage() {
       </div>
     </div>`}
 
-    <div className="card-title mb-3">Select Database</div>
-    <div className="card-subtitle mb-4">
-      Select which database to use for your project
-    </div>
-    <div className="grid-4 mb-6">
-      ${databases.map(
-        (db) =>
-          html`<div
-            key=${db.id}
-            className=${`db-card ${selectedDb === db.id ? "active" : ""} ${!db.available ? "disabled" : ""}`}
-            onClick=${() => db.available && setSelectedDb(db.id)}
-          >
-            ${!db.available &&
-            html`<span className="coming-soon">Coming Soon</span>`}
-            <div className="db-icon">
-              <img
-                src=${db.icon}
-                alt=${db.name}
-                style=${{
-                  width: "36px",
-                  height: "36px",
-                  objectFit: "contain",
-                }}
-              />
-            </div>
-            <div className="db-name">${db.name}</div>
-            <div className="db-desc">${db.desc}</div>
-          </div>`,
-      )}
-    </div>
-
     ${showForm &&
     html`<div className="card">
       <div className="flex items-center gap-3 mb-4">
+        <img
+          src="/_dev/assets/images/mongo.png"
+          alt="MongoDB"
+          style=${{ width: "24px", height: "24px", objectFit: "contain" }}
+        />
         <div className="card-title" style=${{ margin: 0 }}>
           ${editing ? "Edit Connection" : "MongoDB Setup"}
         </div>

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

@@ -0,0 +1,142 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { LuFileText, LuCheck, LuRefreshCw, LuExternalLink } from "react-icons/lu";
+import { html, api } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function DocsPage() {
+  const { toast, refresh, showConfirm } = useApp();
+  const [info, setInfo] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [pw, setPw] = useState("");
+  const [pwBusy, setPwBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    try { setInfo(await api("/docs")); } catch (err) { toast(err.message, "error"); }
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const docsUrl = (() => {
+    const port = window.location.port || "3000";
+    return window.location.protocol + "//" + window.location.hostname + ":" + port + "/docs";
+  })();
+
+  async function setup() {
+    setBusy(true);
+    try {
+      const r = await api("/docs/setup", { method: "POST" });
+      toast(r.message, "success");
+      await load();
+      refresh().catch(() => {});
+    } catch (err) { toast(err.message, "error"); }
+    setBusy(false);
+  }
+
+  async function regenerate() {
+    setBusy(true);
+    try {
+      const r = await api("/docs/regenerate", { method: "POST" });
+      toast(r.message, "success");
+      await load();
+    } catch (err) { toast(err.message, "error"); }
+    setBusy(false);
+  }
+
+  async function setPassword() {
+    if (pw.length < 6) { toast("Password must be at least 6 characters", "error"); return; }
+    setPwBusy(true);
+    try {
+      const r = await api("/docs/password", { method: "POST", body: { password: pw } });
+      toast(r.message, "success");
+      setPw("");
+      await load();
+    } catch (err) { toast(err.message, "error"); }
+    setPwBusy(false);
+  }
+
+  async function removePassword() {
+    const ok = await showConfirm("Remove the docs password? /docs will be publicly accessible.", { danger: true, confirmLabel: "Remove" });
+    if (!ok) return;
+    setPwBusy(true);
+    try {
+      const r = await api("/docs/password", { method: "DELETE" });
+      toast(r.message, "success");
+      await load();
+    } catch (err) { toast(err.message, "error"); }
+    setPwBusy(false);
+  }
+
+  if (!info) return html`<div className="text-muted" style=${{ padding: "16px" }}>Loading…</div>`;
+
+  return html`<div>
+    <div className="flex items-center justify-between mb-4">
+      <div>
+        <div className="card-title">API Documentation</div>
+        <div className="card-subtitle">OpenAPI 3 spec + interactive Swagger UI, generated from your routes</div>
+      </div>
+    </div>
+
+    ${!info.configured
+      ? html`<div className="card" style=${{ maxWidth: "560px" }}>
+          <div className="flex items-center gap-3 mb-4">
+            <${LuFileText} size=${20} color="var(--accent)" />
+            <div>
+              <div style=${{ fontWeight: 600 }}>Set up API docs</div>
+              <div className="text-sm text-muted">Adds a /docs route (Swagger UI) and generates the OpenAPI spec from your ${info.endpointCount} endpoint${info.endpointCount === 1 ? "" : "s"}.</div>
+            </div>
+          </div>
+          <button className="btn btn-primary" onClick=${setup} disabled=${busy}>
+            ${busy ? html`<span className="spinner" />` : html`<${LuCheck} size=${16} />`}
+            ${busy ? "Setting up..." : "Set up API docs"}
+          </button>
+        </div>`
+      : html`<div>
+          <div className="card mb-4">
+            <div className="flex items-center gap-3" style=${{ flexWrap: "wrap" }}>
+              <${LuFileText} size=${20} color="var(--success)" />
+              <div style=${{ flex: 1, minWidth: "180px" }}>
+                <div style=${{ fontWeight: 600 }}>Docs are live</div>
+                <div className="text-sm text-muted">${info.endpointCount} endpoint${info.endpointCount === 1 ? "" : "s"} documented · spec at <span style=${{ fontFamily: "monospace" }}>src/openapi.json</span></div>
+              </div>
+              <a className="btn" href=${docsUrl} target="_blank" rel="noreferrer" style=${{ textDecoration: "none" }}>
+                <${LuExternalLink} size=${14} /> Open /docs
+              </a>
+              <button className="btn btn-primary" onClick=${regenerate} disabled=${busy}>
+                ${busy ? html`<span className="spinner" />` : html`<${LuRefreshCw} size=${14} />`}
+                Regenerate
+              </button>
+            </div>
+          </div>
+          <div className="card mb-4">
+            <div className="card-title mb-1">Docs access</div>
+            <div className="card-subtitle mb-4">
+              By default <span style=${{ fontFamily: "monospace" }}>/docs</span> is public — anyone who can reach the app can read it.
+              Set a password to require HTTP Basic Auth (applies immediately, no restart).
+            </div>
+            ${info.passwordProtected
+              ? html`<div className="flex items-center gap-3" style=${{ flexWrap: "wrap" }}>
+                  <span className="badge badge-success">🔒 Password protected</span>
+                  <button className="btn btn-sm btn-ghost" onClick=${removePassword} disabled=${pwBusy}
+                    style=${{ color: "var(--danger, #ef4444)" }}>Remove password</button>
+                  <div style=${{ display: "flex", gap: "8px", marginLeft: "auto", flexWrap: "wrap" }}>
+                    <input className="form-input" type="password" placeholder="New password" value=${pw}
+                      onInput=${(e) => setPw(e.target.value)} style=${{ width: "200px" }} />
+                    <button className="btn btn-sm btn-primary" onClick=${setPassword} disabled=${pwBusy || pw.length < 6}>Change</button>
+                  </div>
+                </div>`
+              : html`<div style=${{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+                  <input className="form-input" type="password" placeholder="Password (min 6 chars)" value=${pw}
+                    onInput=${(e) => setPw(e.target.value)}
+                    onKeyDown=${(e) => { if (e.key === "Enter") setPassword(); }}
+                    style=${{ flex: 1, minWidth: "220px" }} />
+                  <button className="btn btn-primary" onClick=${setPassword} disabled=${pwBusy || pw.length < 6}>
+                    ${pwBusy ? html`<span className="spinner" />` : null} Set password
+                  </button>
+                </div>`}
+          </div>
+          <div className="card text-sm text-muted">
+            The spec stays in sync automatically — it regenerates whenever you add or change routes and models. Use Regenerate to force a refresh.
+          </div>
+        </div>`}
+  </div>`;
+}

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

@@ -0,0 +1,134 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { LuMail, LuCheck, LuSend } from "react-icons/lu";
+import { html, api } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function MailPage() {
+  const { toast, refresh } = useApp();
+  const [info, setInfo] = useState(null);
+  const [provider, setProvider] = useState("brevo");
+  const [form, setForm] = useState({ host: "", port: 587, secure: false, user: "", pass: "", from: "" });
+  const [busy, setBusy] = useState(false);
+  const [testTo, setTestTo] = useState("");
+  const [testing, setTesting] = useState(false);
+
+  const load = useCallback(async () => {
+    try {
+      const r = await api("/mail");
+      setInfo(r);
+      setForm((f) => ({
+        ...f,
+        host: r.host || f.host,
+        port: r.port || f.port || 587,
+        secure: !!r.secure,
+        user: r.user || f.user,
+        from: r.from || f.from,
+      }));
+    } catch (err) { toast(err.message, "error"); }
+  }, [toast]);
+
+  useEffect(() => { load(); }, [load]);
+
+  function setField(patch) { setForm((f) => ({ ...f, ...patch })); }
+
+  function pickProvider(p) {
+    setProvider(p.id);
+    if (p.id !== "smtp") setField({ host: p.host, port: p.port, secure: p.secure, user: p.user || form.user });
+  }
+
+  async function save() {
+    if (!form.host.trim()) { toast("SMTP host is required", "error"); return; }
+    setBusy(true);
+    try {
+      const r = await api("/mail/setup", { method: "POST", body: { provider, ...form } });
+      toast(r.message, "success");
+      await load();
+      refresh().catch(() => {});
+    } catch (err) { toast(err.message, "error"); }
+    setBusy(false);
+  }
+
+  async function sendTest() {
+    if (!testTo.trim()) { toast("Enter a recipient", "error"); return; }
+    setTesting(true);
+    try {
+      const r = await api("/mail/test", { method: "POST", body: { to: testTo.trim() } });
+      toast(r.message, "success");
+    } catch (err) { toast(err.message, "error"); }
+    setTesting(false);
+  }
+
+  if (!info) return html`<div className="text-muted" style=${{ padding: "16px" }}>Loading…</div>`;
+
+  const current = info.providers.find((p) => p.id === provider) || {};
+
+  return html`<div>
+    <div className="flex items-center justify-between mb-4">
+      <div>
+        <div className="card-title">Email</div>
+        <div className="card-subtitle">Send transactional email via Brevo, SendGrid, Mailgun, Gmail, or any SMTP</div>
+      </div>
+      ${info.configured && html`<span className="badge badge-success">Configured</span>`}
+    </div>
+
+    <div className="card mb-4">
+      <div style=${{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-muted)", marginBottom: "8px" }}>Provider</div>
+      <div style=${{ display: "flex", gap: "6px", flexWrap: "wrap", marginBottom: "8px" }}>
+        ${info.providers.map((p) => html`<button key=${p.id} className="badge"
+          onClick=${() => pickProvider(p)}
+          style=${{ cursor: "pointer", border: "1px solid var(--border)", background: provider === p.id ? "var(--accent-glow)" : "var(--bg-input)", color: provider === p.id ? "var(--accent-light)" : "var(--text-secondary)" }}>${p.label}</button>`)}
+      </div>
+      ${current.hint && html`<div className="text-sm text-muted">${current.hint}</div>`}
+    </div>
+
+    <div className="card mb-4">
+      <div style=${{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+        <div className="form-group" style=${{ flex: "1 1 260px" }}>
+          <label className="form-label">SMTP Host</label>
+          <input className="form-input" value=${form.host} onInput=${(e) => setField({ host: e.target.value })} placeholder="smtp-relay.brevo.com" />
+        </div>
+        <div className="form-group" style=${{ flex: "0 0 110px" }}>
+          <label className="form-label">Port</label>
+          <input className="form-input" type="number" value=${form.port} onInput=${(e) => setField({ port: e.target.value })} />
+        </div>
+        <div className="form-group" style=${{ flex: "0 0 130px", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
+          <label style=${{ display: "flex", alignItems: "center", gap: "6px", fontSize: "13px", color: "var(--text-secondary)", cursor: "pointer", paddingBottom: "10px" }}>
+            <input type="checkbox" checked=${form.secure} onChange=${(e) => setField({ secure: e.target.checked })} /> Secure (465)
+          </label>
+        </div>
+      </div>
+      <div style=${{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+        <div className="form-group" style=${{ flex: "1 1 240px" }}>
+          <label className="form-label">User</label>
+          <input className="form-input" value=${form.user} onInput=${(e) => setField({ user: e.target.value })} placeholder="login / apikey" />
+        </div>
+        <div className="form-group" style=${{ flex: "1 1 240px" }}>
+          <label className="form-label">Password / API key ${info.hasPass ? html`<span className="text-muted" style=${{ fontWeight: 400 }}>(saved — leave blank to keep)</span>` : ""}</label>
+          <input className="form-input" type="password" value=${form.pass} onInput=${(e) => setField({ pass: e.target.value })} placeholder=${info.hasPass ? "••••••••" : "secret"} />
+        </div>
+      </div>
+      <div className="form-group">
+        <label className="form-label">From address</label>
+        <input className="form-input" value=${form.from} onInput=${(e) => setField({ from: e.target.value })} placeholder="no-reply@yourdomain.com" style=${{ maxWidth: "320px" }} />
+      </div>
+      <button className="btn btn-primary" onClick=${save} disabled=${busy || !form.host.trim()}>
+        ${busy ? html`<span className="spinner" />` : html`<${LuCheck} size=${16} />`}
+        ${busy ? "Saving..." : "Save & install"}
+      </button>
+    </div>
+
+    ${info.configured && html`<div className="card">
+      <div className="card-title mb-2">Send test email</div>
+      <div style=${{ display: "flex", gap: "8px", alignItems: "flex-end", flexWrap: "wrap" }}>
+        <div className="form-group" style=${{ flex: "1 1 260px", marginBottom: 0 }}>
+          <label className="form-label">Recipient</label>
+          <input className="form-input" value=${testTo} onInput=${(e) => setTestTo(e.target.value)} placeholder="you@example.com" />
+        </div>
+        <button className="btn btn-primary" onClick=${sendTest} disabled=${testing || !testTo.trim()}>
+          ${testing ? html`<span className="spinner" />` : html`<${LuSend} size=${16} />`}
+          ${testing ? "Sending..." : "Send test"}
+        </button>
+      </div>
+    </div>`}
+  </div>`;
+}