4bnode 4.1.1 → 4.1.3

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

@@ -0,0 +1,205 @@
+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

@@ -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>`;
+}

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

@@ -0,0 +1,186 @@
+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>`;
+}
+