4bnode 4.1.5 → 4.1.7

package/app-1/.4bnode/assets/js/pages/LogsPage.js

@@ -1,205 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import { html, api, API, getStoredPasskey } from "../lib.js";
-import { useApp } from "../context.js";
-
-const TYPE_COLORS = {
-  log: "var(--text)",
-  info: "var(--info)",
-  warn: "var(--warning)",
-  error: "var(--error)",
-};
-
-const TYPE_BADGES = {
-  log: "LOG",
-  info: "INFO",
-  warn: "WARN",
-  error: "ERR",
-};
-
-export function LogsPage() {
-  const { toast } = useApp();
-  const [logs, setLogs] = useState([]);
-  const [filter, setFilter] = useState("all");
-  const [search, setSearch] = useState("");
-  const [autoScroll, setAutoScroll] = useState(true);
-  const [connected, setConnected] = useState(false);
-  const bottomRef = useRef(null);
-  const containerRef = useRef(null);
-  const eventSourceRef = useRef(null);
-
-  // Load existing logs
-  useEffect(() => {
-    api("/logs").then(setLogs).catch(() => {});
-  }, []);
-
-  // SSE stream for real-time logs
-  useEffect(() => {
-    const passkey = getStoredPasskey();
-    const url = API + "/logs/stream" + (passkey ? "?passkey=" + encodeURIComponent(passkey) : "");
-    const es = new EventSource(url);
-    eventSourceRef.current = es;
-
-    es.onopen = () => setConnected(true);
-    es.onmessage = (e) => {
-      try {
-        const entry = JSON.parse(e.data);
-        setLogs((prev) => {
-          const next = [...prev, entry];
-          return next.length > 500 ? next.slice(-500) : next;
-        });
-      } catch {}
-    };
-    es.onerror = () => setConnected(false);
-
-    return () => es.close();
-  }, []);
-
-  // Auto-scroll to bottom
-  useEffect(() => {
-    if (autoScroll && bottomRef.current) {
-      bottomRef.current.scrollIntoView({ behavior: "smooth" });
-    }
-  }, [logs, autoScroll]);
-
-  // Detect manual scroll
-  const handleScroll = useCallback(() => {
-    if (!containerRef.current) return;
-    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-    setAutoScroll(scrollHeight - scrollTop - clientHeight < 60);
-  }, []);
-
-  const handleClear = async () => {
-    try {
-      await api("/logs", { method: "DELETE" });
-      setLogs([]);
-      toast("Logs cleared", "success");
-    } catch (err) {
-      toast(err.message, "error");
-    }
-  };
-
-  const filtered = logs.filter((l) => {
-    if (filter !== "all" && l.type !== filter) return false;
-    if (search && !l.message.toLowerCase().includes(search.toLowerCase())) return false;
-    return true;
-  });
-
-  const counts = {
-    all: logs.length,
-    log: logs.filter((l) => l.type === "log").length,
-    error: logs.filter((l) => l.type === "error").length,
-    warn: logs.filter((l) => l.type === "warn").length,
-    info: logs.filter((l) => l.type === "info").length,
-  };
-
-  const formatTime = (ts) => {
-    try {
-      const d = new Date(ts);
-      return d.toLocaleTimeString([], { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" })
-        + "." + String(d.getMilliseconds()).padStart(3, "0");
-    } catch { return ""; }
-  };
-
-  return html`<div style=${{ display: "flex", flexDirection: "column", height: "100%", gap: "12px" }}>
-
-    <!-- Toolbar -->
-    <div style=${{ display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap" }}>
-      <div style=${{ display: "flex", gap: "4px", background: "var(--bg-surface)", borderRadius: "8px", padding: "3px" }}>
-        ${["all", "log", "error", "warn", "info"].map(
-          (f) => html`<button key=${f} onClick=${() => setFilter(f)}
-            style=${{
-              padding: "4px 10px", fontSize: "11px", borderRadius: "6px", border: "none", cursor: "pointer",
-              background: filter === f ? "var(--accent)" : "transparent",
-              color: filter === f ? "#fff" : "var(--text-muted)",
-              fontWeight: filter === f ? 600 : 400,
-            }}>
-            ${f.toUpperCase()}${counts[f] > 0 ? ` (${counts[f]})` : ""}
-          </button>`
-        )}
-      </div>
-
-      <input
-        type="text"
-        placeholder="Search logs..."
-        value=${search}
-        onInput=${(e) => setSearch(e.target.value)}
-        style=${{
-          flex: 1, minWidth: "160px", padding: "6px 10px", fontSize: "12px",
-          background: "var(--bg-surface)", border: "1px solid var(--border)", borderRadius: "6px",
-          color: "var(--text)", outline: "none",
-        }}
-      />
-
-      <div style=${{ display: "flex", alignItems: "center", gap: "8px" }}>
-        <span style=${{
-          width: "8px", height: "8px", borderRadius: "50%",
-          background: connected ? "var(--success)" : "var(--error)",
-          display: "inline-block",
-        }} />
-        <span style=${{ fontSize: "11px", color: "var(--text-muted)" }}>
-          ${connected ? "Live" : "Disconnected"}
-        </span>
-      </div>
-
-      <button onClick=${() => setAutoScroll(!autoScroll)}
-        style=${{
-          padding: "4px 10px", fontSize: "11px", borderRadius: "6px", border: "1px solid var(--border)",
-          cursor: "pointer",
-          background: autoScroll ? "var(--accent)" : "var(--bg-surface)",
-          color: autoScroll ? "#fff" : "var(--text-muted)",
-        }}>
-        Auto-scroll ${autoScroll ? "ON" : "OFF"}
-      </button>
-
-      <button onClick=${handleClear}
-        style=${{
-          padding: "4px 10px", fontSize: "11px", borderRadius: "6px",
-          border: "1px solid var(--border)", cursor: "pointer",
-          background: "var(--bg-surface)", color: "var(--error)",
-        }}>
-        Clear
-      </button>
-    </div>
-
-    <!-- Log Output -->
-    <div ref=${containerRef} onScroll=${handleScroll}
-      style=${{
-        flex: 1, overflow: "auto", background: "#0a0a0f", borderRadius: "8px",
-        border: "1px solid var(--border)", fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
-        fontSize: "12px", lineHeight: "1.7", padding: "12px 0",
-      }}>
-      ${filtered.length === 0 && html`
-        <div style=${{ padding: "40px", textAlign: "center", color: "var(--text-muted)", fontSize: "12px" }}>
-          ${logs.length === 0 ? "No logs yet. Console output from your app will appear here." : "No logs match the current filter."}
-        </div>
-      `}
-      ${filtered.map(
-        (entry) => html`<div key=${entry.id}
-          style=${{
-            padding: "1px 14px", display: "flex", gap: "10px", alignItems: "flex-start",
-            borderLeft: entry.type === "error" ? "2px solid var(--error)" : entry.type === "warn" ? "2px solid var(--warning)" : "2px solid transparent",
-            background: entry.type === "error" ? "rgba(239,68,68,0.04)" : entry.type === "warn" ? "rgba(245,158,11,0.04)" : "transparent",
-          }}>
-          <span style=${{ color: "var(--text-muted)", fontSize: "10px", minWidth: "80px", paddingTop: "2px", userSelect: "none" }}>
-            ${formatTime(entry.timestamp)}
-          </span>
-          <span style=${{
-            fontSize: "9px", fontWeight: 700, minWidth: "32px", textAlign: "center",
-            padding: "1px 4px", borderRadius: "3px", letterSpacing: "0.5px", paddingTop: "3px",
-            background: entry.type === "error" ? "rgba(239,68,68,0.15)" : entry.type === "warn" ? "rgba(245,158,11,0.15)" : entry.type === "info" ? "rgba(59,130,246,0.15)" : "rgba(255,255,255,0.06)",
-            color: TYPE_COLORS[entry.type] || "var(--text)",
-          }}>
-            ${TYPE_BADGES[entry.type] || "LOG"}
-          </span>
-          <span style=${{
-            color: TYPE_COLORS[entry.type] || "var(--text)",
-            whiteSpace: "pre-wrap", wordBreak: "break-all", flex: 1,
-          }}>
-            ${entry.message}
-          </span>
-        </div>`
-      )}
-      <div ref=${bottomRef} />
-    </div>
-  </div>`;
-}

package/app-1/.4bnode/assets/js/pages/MailPage.js

@@ -1,224 +0,0 @@
-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";
-
-// Copy-paste usage shown in the right-hand code panel.
-const USAGE_TABS = [
-  {
-    id: "basic",
-    label: "Basic",
-    code: `import { sendMail, emailTemplate } from '../services/mailer.js';
-
-// Call from any route handler. Credentials come from .env.
-await sendMail({
-  to: 'user@example.com',
-  subject: 'Welcome to 4Brains!',
-  html: emailTemplate({ title: 'Welcome', body: 'Thanks for signing up.' }),
-  // text: 'Plain-text fallback',     // optional
-  // cc, bcc, replyTo, from           // optional
-});`,
-  },
-  {
-    id: "attachment",
-    label: "Attachment",
-    code: `import { sendMail } from '../services/mailer.js';
-
-await sendMail({
-  to: 'user@example.com',
-  subject: 'Your invoice',
-  text: 'Invoice attached.',
-  attachments: [
-    // a) from a file on disk
-    { filename: 'invoice.pdf', path: './invoices/inv-001.pdf' },
-    // b) generated content (string or Buffer)
-    { filename: 'note.txt', content: 'Generated at ' + new Date().toISOString() },
-    // c) an uploaded file (multer)  ->  req.file
-    { filename: req.file.originalname, path: req.file.path },
-  ],
-});`,
-  },
-  {
-    id: "ejs",
-    label: "Dynamic (EJS)",
-    code: `// Any template engine works: render it to an HTML string, pass as \`html\`.
-import { sendMail } from '../services/mailer.js';
-import ejs from 'ejs';           // npm i ejs
-import path from 'path';
-
-// views/emails/welcome.ejs:
-//   <h1>Hi <%= name %></h1>
-//   <p>Verify: <a href="<%= link %>"><%= link %></a></p>
-
-const html = await ejs.renderFile(
-  path.join(process.cwd(), 'views/emails/welcome.ejs'),
-  { name: user.name, link: 'https://app.com/verify/' + token }   // dynamic data
-);
-
-await sendMail({ to: user.email, subject: 'Welcome', html });
-
-// Handlebars / Pug / React Email: same idea — produce an HTML
-// string from your data, then hand it to sendMail({ html }).`,
-  },
-];
-
-export function MailPage() {
-  const { toast, refresh } = useApp();
-  const [info, setInfo] = useState(null);
-  const [provider, setProvider] = useState("mailgun");
-  const [form, setForm] = useState({ host: "smtp.mailgun.org", port: 587, secure: false, user: "", pass: "", from: "" });
-  const [busy, setBusy] = useState(false);
-  const [testTo, setTestTo] = useState("");
-  const [testing, setTesting] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const [tab, setTab] = useState("basic");
-
-  const activeTab = USAGE_TABS.find((t) => t.id === tab) || USAGE_TABS[0];
-
-  function copyUsage() {
-    try {
-      if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(activeTab.code);
-    } catch (e) {}
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  }
-
-  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) || {};
-  // Render Mailgun first regardless of the backend list order.
-  const providers = info.providers.slice().sort((a, b) => (a.id === "mailgun" ? -1 : b.id === "mailgun" ? 1 : 0));
-
-  const labelStyle = { fontSize: "11px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-muted)", marginBottom: "8px" };
-
-  return html`<div>
-    <div className="flex items-center justify-between mb-4">
-      <div>
-        <div className="card-title">Email</div>
-        <div className="card-subtitle">Transactional email via Mailgun, Brevo, SendGrid, Gmail, or any SMTP</div>
-      </div>
-      ${info.configured && html`<span className="badge badge-success">Configured</span>`}
-    </div>
-
-    <div style=${{ display: "flex", gap: "16px", alignItems: "flex-start", flexWrap: "wrap" }}>
-      <!-- LEFT: provider + SMTP config -->
-      <div className="card" style=${{ flex: "1 1 420px", minWidth: 0 }}>
-        <div style=${labelStyle}>Provider</div>
-        <div style=${{ display: "flex", gap: "6px", flexWrap: "wrap", marginBottom: current.hint ? "6px" : "14px" }}>
-          ${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" style=${{ marginBottom: "14px" }}>${current.hint}</div>`}
-
-        <div style=${{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
-          <div className="form-group" style=${{ flex: "1 1 200px" }}>
-            <label className="form-label">SMTP Host</label>
-            <input className="form-input" value=${form.host} onInput=${(e) => setField({ host: e.target.value })} placeholder="smtp.mailgun.org" />
-          </div>
-          <div className="form-group" style=${{ flex: "0 0 90px" }}>
-            <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 120px", 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 180px" }}>
-            <label className="form-label">User</label>
-            <input className="form-input" value=${form.user} onInput=${(e) => setField({ user: e.target.value })} placeholder="SMTP username" />
-          </div>
-          <div className="form-group" style=${{ flex: "1 1 180px" }}>
-            <label className="form-label">Password ${info.hasPass ? html`<span className="text-muted" style=${{ fontWeight: 400 }}>(saved)</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" />
-        </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>
-
-        ${info.configured && html`<div style=${{ marginTop: "16px", paddingTop: "16px", borderTop: "1px solid var(--border)" }}>
-          <div style=${labelStyle}>Send test email</div>
-          <div style=${{ display: "flex", gap: "8px", alignItems: "flex-end", flexWrap: "wrap" }}>
-            <div className="form-group" style=${{ flex: "1 1 200px", marginBottom: 0 }}>
-              <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>
-
-      <!-- RIGHT: code only -->
-      <div className="card" style=${{ flex: "1 1 360px", minWidth: 0 }}>
-        <div className="flex items-center justify-between mb-2">
-          <div style=${{ display: "flex", gap: "4px", flexWrap: "wrap" }}>
-            ${USAGE_TABS.map((t) => html`<button key=${t.id}
-              onClick=${() => setTab(t.id)}
-              style=${{ cursor: "pointer", fontSize: "12px", padding: "5px 11px", borderRadius: "7px", border: "1px solid var(--border)", background: tab === t.id ? "var(--accent-glow)" : "var(--bg-input)", color: tab === t.id ? "var(--accent-light)" : "var(--text-secondary)" }}>${t.label}</button>`)}
-          </div>
-          <button className="btn btn-sm" style=${{ background: "var(--bg-input)", border: "1px solid var(--border)", color: "var(--text-secondary)" }} onClick=${copyUsage}>
-            ${copied ? html`<${LuCheck} size=${14} />` : null} ${copied ? "Copied" : "Copy"}
-          </button>
-        </div>
-        <pre style=${{ background: "#0a0c12", border: "1px solid var(--border)", borderRadius: "8px", padding: "14px", fontSize: "12px", lineHeight: 1.55, color: "#d5d8e3", overflow: "auto", margin: 0, fontFamily: "ui-monospace,Menlo,monospace", whiteSpace: "pre" }}>${activeTab.code}</pre>
-      </div>
-    </div>
-  </div>`;
-}

package/app-1/.4bnode/assets/js/pages/RealtimePage.js

@@ -1,186 +0,0 @@
-import React, { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { LuActivity, LuCheck, LuRadio, LuZap } from "react-icons/lu";
-import { html, api } from "../lib.js";
-import { useApp } from "../context.js";
-
-export function RealtimePage() {
-  const { toast, refresh, status, showConfirm } = useApp();
-  const [selected, setSelected] = useState(status?.socketConfigured ? 'socketio' : status?.websocketConfigured ? 'websocket' : 'socketio');
-
-  const items = [
-    { id: 'socketio', label: 'Socket.IO', desc: 'Auto-reconnect, rooms, namespaces', configured: status?.socketConfigured },
-    { id: 'websocket', label: 'WebSocket', desc: 'Native ws library, lightweight', configured: status?.websocketConfigured },
-  ];
-
-  return html`<div>
-    <div className="flex items-center justify-between mb-4">
-      <div>
-        <div className="card-title">Real-time</div>
-        <div className="card-subtitle">Configure real-time communication</div>
-      </div>
-    </div>
-
-    <div className="routes-layout">
-      <div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
-        <div style=${{ padding: '14px 16px 10px', borderBottom: '1px solid var(--border)' }}>
-          <span style=${{ fontWeight: 600, fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Protocols</span>
-        </div>
-        <div className="routes-list">
-          ${items.map(item => html`<div key=${item.id}
-            className=${`route-item ${selected === item.id ? 'active' : ''}`}
-            onClick=${() => setSelected(item.id)}>
-            <div style=${{ display: 'flex', flexDirection: 'column', gap: '4px', flex: 1, minWidth: 0 }}>
-              <span className="ri-name">${item.label}</span>
-              <span className="ri-file">${item.desc}</span>
-            </div>
-            ${item.configured && html`<span className="badge badge-success" style=${{ fontSize: '10px' }}>Active</span>`}
-          </div>`)}
-        </div>
-      </div>
-
-      <div className="routes-detail">
-        <${AnimatePresence} mode="wait">
-          <${motion.div} key=${selected}
-            initial=${{ opacity: 0, y: 6 }} animate=${{ opacity: 1, y: 0 }} exit=${{ opacity: 0, y: -6 }}
-            transition=${{ duration: 0.12 }}>
-            ${selected === 'socketio' ? html`<${SocketIOSetup} />` : html`<${WebSocketSetup} />`}
-          <//>
-        <//>
-      </div>
-    </div>
-  </div>`;
-}
-
-function SocketIOSetup() {
-  const { toast, refresh, status, showConfirm } = useApp();
-  const [cors, setCors] = useState("*");
-  const [loading, setLoading] = useState(false);
-
-  if (status?.socketConfigured) {
-    return html`<div>
-      <div className="card mb-4" style=${{ borderColor: 'rgba(34,197,94,0.3)' }}>
-        <div className="flex items-center gap-3">
-          <${LuActivity} size=${20} color="var(--success)" />
-          <div style=${{ flex: 1 }}>
-            <div style=${{ fontWeight: 600 }}>Socket.IO Active</div>
-            <div className="text-sm text-muted">Real-time events are configured in index.js</div>
-          </div>
-          <span className="badge badge-success">Configured</span>
-        </div>
-      </div>
-      <div className="card">
-        <div style=${{ fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: '8px' }}>Features</div>
-        ${['Auto-reconnect on disconnect', 'Room & namespace support', 'Binary data streaming', 'Middleware pipeline'].map(f =>
-          html`<div key=${f} style=${{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 0', fontSize: '13px', color: 'var(--text-secondary)' }}>
-            <${LuCheck} size=${14} color="var(--success)" /> ${f}
-          </div>`
-        )}
-      </div>
-    </div>`;
-  }
-
-  async function handleSetup() {
-    if (status?.websocketConfigured) {
-      const ok = await showConfirm('WebSocket is currently configured. Enabling Socket.IO will replace your WebSocket setup. Do you want to continue?', { confirmLabel: 'Replace with Socket.IO' });
-      if (!ok) return;
-    }
-    setLoading(true);
-    try {
-      const result = await api('/add-socket', { method: 'POST', body: { corsOrigins: cors } });
-      toast(result.message, 'success');
-      refresh().catch(() => {});
-    } catch (err) { toast(err.message, 'error'); }
-    setLoading(false);
-  }
-
-  return html`<div className="card">
-    <div className="card-title mb-2">Socket.IO Setup</div>
-    <div className="card-subtitle mb-4">Add real-time bidirectional communication with auto-reconnect, rooms, and namespaces</div>
-    ${status?.websocketConfigured && html`<div style=${{ padding: '10px 14px', borderRadius: '8px', background: 'var(--warning-glow)', border: '1px solid rgba(245,158,11,0.2)', marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-      <${LuZap} size=${14} color="var(--warning)" />
-      <span style=${{ fontSize: '12px', color: 'var(--warning)' }}>WebSocket is currently active. Setting up Socket.IO will replace it.</span>
-    </div>`}
-    <div className="form-group">
-      <label className="form-label">CORS Origins</label>
-      <input className="form-input" value=${cors} onInput=${e => setCors(e.target.value)} placeholder="* or comma-separated origins" />
-    </div>
-    <button className="btn btn-primary" onClick=${handleSetup} disabled=${loading}>
-      ${loading ? html`<span className="spinner" />` : null}
-      ${loading ? 'Setting up...' : 'Setup Socket.IO'}
-    </button>
-  </div>`;
-}
-
-function WebSocketSetup() {
-  const { toast, refresh, status, showConfirm } = useApp();
-  const [samePort, setSamePort] = useState(true);
-  const [wsPort, setWsPort] = useState("8080");
-  const [loading, setLoading] = useState(false);
-
-  if (status?.websocketConfigured) {
-    return html`<div>
-      <div className="card mb-4" style=${{ borderColor: 'rgba(34,197,94,0.3)' }}>
-        <div className="flex items-center gap-3">
-          <${LuRadio} size=${20} color="var(--success)" />
-          <div style=${{ flex: 1 }}>
-            <div style=${{ fontWeight: 600 }}>WebSocket Active</div>
-            <div className="text-sm text-muted">Native WebSocket is configured in index.js</div>
-          </div>
-          <span className="badge badge-success">Configured</span>
-        </div>
-      </div>
-      <div className="card">
-        <div style=${{ fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: '8px' }}>Features</div>
-        ${['Lightweight native protocol', 'Low latency messaging', 'Binary frame support', 'Custom message handling'].map(f =>
-          html`<div key=${f} style=${{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 0', fontSize: '13px', color: 'var(--text-secondary)' }}>
-            <${LuCheck} size=${14} color="var(--success)" /> ${f}
-          </div>`
-        )}
-      </div>
-    </div>`;
-  }
-
-  async function handleSetup() {
-    if (status?.socketConfigured) {
-      const ok = await showConfirm('Socket.IO is currently configured. Enabling WebSocket will replace your Socket.IO setup. Do you want to continue?', { confirmLabel: 'Replace with WebSocket' });
-      if (!ok) return;
-    }
-    setLoading(true);
-    try {
-      const result = await api('/add-websocket', { method: 'POST', body: { samePort, wsPort: samePort ? null : parseInt(wsPort) } });
-      toast(result.message, 'success');
-      refresh().catch(() => {});
-    } catch (err) { toast(err.message, 'error'); }
-    setLoading(false);
-  }
-
-  return html`<div className="card">
-    <div className="card-title mb-2">Native WebSocket Setup</div>
-    <div className="card-subtitle mb-4">Add lightweight WebSocket support using the ws library for low-level control</div>
-    ${status?.socketConfigured && html`<div style=${{ padding: '10px 14px', borderRadius: '8px', background: 'var(--warning-glow)', border: '1px solid rgba(245,158,11,0.2)', marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-      <${LuZap} size=${14} color="var(--warning)" />
-      <span style=${{ fontSize: '12px', color: 'var(--warning)' }}>Socket.IO is currently active. Setting up WebSocket will replace it.</span>
-    </div>`}
-    <div className="form-group">
-      <label className="form-label">Server Port</label>
-      <div style=${{ display: 'flex', gap: '8px', marginTop: '4px' }}>
-        <label style=${{ display: 'flex', alignItems: 'center', gap: '6px', cursor: 'pointer', fontSize: '13px', color: 'var(--text-secondary)' }}>
-          <input type="radio" name="wsPort" checked=${samePort} onChange=${() => setSamePort(true)} /> Same as HTTP server
-        </label>
-        <label style=${{ display: 'flex', alignItems: 'center', gap: '6px', cursor: 'pointer', fontSize: '13px', color: 'var(--text-secondary)' }}>
-          <input type="radio" name="wsPort" checked=${!samePort} onChange=${() => setSamePort(false)} /> Separate port
-        </label>
-      </div>
-    </div>
-    ${!samePort && html`<div className="form-group">
-      <label className="form-label">WebSocket Port</label>
-      <input className="form-input" type="number" value=${wsPort} onInput=${e => setWsPort(e.target.value)} placeholder="8080" style=${{ maxWidth: '160px' }} />
-    </div>`}
-    <button className="btn btn-primary" onClick=${handleSetup} disabled=${loading}>
-      ${loading ? html`<span className="spinner" />` : null}
-      ${loading ? 'Setting up...' : 'Setup WebSocket'}
-    </button>
-  </div>`;
-}
-