4bnode 4.2.0 → 4.2.1

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

@@ -1,170 +1,486 @@
-import React, { useState, useEffect } from "react";
-import { LuCable } from "react-icons/lu";
-import { html, api, Icons } from "../lib.js";
+import React, { useState, useEffect, useRef } from "react";
+import { LuCable, LuRefreshCw, LuUsb, LuSearch, LuTrash2, LuPlus } from "react-icons/lu";
+import { html, api } from "../lib.js";
 import { useApp } from "../context.js";
+import { SerialWorkspace } from "../components/SerialWorkspace.js";
 
-export function SerialPortPage() {
-  const { toast, refresh, status, showConfirm } = useApp();
+const STATUS = {
+  connected: { cls: "badge-success", label: "Connected" },
+  searching: { cls: "badge-info", label: "Searching" },
+  reconnecting: { cls: "badge-warning", label: "Reconnecting" },
+  offline: { cls: "badge-muted", label: "Offline" },
+  error: { cls: "badge-error", label: "Error" },
+  stopped: { cls: "badge-muted", label: "Stopped" },
+  idle: { cls: "badge-muted", label: "Idle" },
+  disabled: { cls: "badge-muted", label: "Disabled" },
+};
+
+const STRATEGIES = [
+  { id: "serialNumber", label: "USB serial number", hint: "Best for identical boards. Stable per physical board, survives reboots and port changes." },
+  { id: "identity", label: "Firmware identity", hint: "Sends the ID command and matches the reply (e.g. LED-CTRL). Best when each board runs different firmware." },
+  { id: "vendorId", label: "USB vendor id", hint: "Matches the USB bridge chip (e.g. 10c4). Fine for one board of that type; a hint, not proof." },
+  { id: "path", label: "Fixed USB port (last resort)", hint: "Only for identical boards with no USB serial number and no ID reply: the device then follows this USB socket, not the board. Label the socket." },
+];
+
+const EMPTY_FORM = {
+  originalName: null, name: "", strategy: "serialNumber",
+  serialNumber: "", identity: "", vendorId: "", productId: "", path: "",
+  baudRate: "115200", delimiter: "lf", idCommand: "ID?", timeout: "2000", enabled: true,
+};
+
+function strategyOf(match = {}) {
+  if (match.serialNumber) return "serialNumber";
+  if (match.identity) return "identity";
+  if (match.vendorId) return "vendorId";
+  return "path";
+}
+
+function matchLabel(match = {}) {
+  if (match.serialNumber) return "USB serial " + match.serialNumber;
+  if (match.identity) return "identity \"" + match.identity + "\"" + (match.vendorId ? " on " + match.vendorId : "");
+  if (match.vendorId) return "USB vendor " + match.vendorId + (match.productId ? ":" + match.productId : "");
+  return "path " + (match.path || "?");
+}
+
+function SetupCard({ info, onDone }) {
+  const { toast, refresh } = useApp();
+  const [busy, setBusy] = useState(false);
+  async function setup() {
+    setBusy(true);
+    try {
+      const r = await api("/serial/setup", { method: "POST" });
+      toast(r.message, "success");
+      await refresh().catch(() => {});
+      setTimeout(onDone, 1500);
+    } catch (err) {
+      toast(err.message, "error");
+    }
+    setBusy(false);
+  }
+  return html`<div className="card" style=${{ maxWidth: "720px" }}>
+    <div className="flex items-center gap-2 mb-2">
+      <${LuCable} size=${18} />
+      <div className="card-title" style=${{ margin: 0 }}>Talk to Arduino / ESP32 boards</div>
+    </div>
+    <div className="text-sm text-secondary" style=${{ lineHeight: 1.7, marginBottom: "14px" }}>
+      Adds a device manager to your app. It finds each board by its USB serial number, USB vendor id, or a firmware
+      handshake (<span className="mono">ID?</span>) instead of a fixed COM port, reconnects by itself when a board resets
+      or is unplugged, and sends commands that wait for the board's reply. Your app gets HTTP routes under
+      <span className="mono"> /api/serial</span>, protected by the API key gate.
+    </div>
+    <button className="btn btn-primary" onClick=${setup} disabled=${busy}>
+      ${busy ? html`<span className="spinner" />` : null}
+      ${busy ? "Installing serialport…" : info.installed ? "Set up serial devices" : "Install serialport and set up"}
+    </button>
+    <div className="text-sm text-muted" style=${{ marginTop: "8px" }}>Installs serialport and @serialport/parser-readline, then restarts the app.</div>
+  </div>`;
+}
+
+function LegacyPorts({ onChange }) {
+  const { toast, showConfirm } = useApp();
   const [ports, setPorts] = useState([]);
-  const [selected, setSelected] = useState(null);
-  const [showAdd, setShowAdd] = useState(false);
-  const [portName, setPortName] = useState("serialPort");
-  const [portPath, setPortPath] = useState("/dev/ttyUSB0");
-  const [baudRate, setBaudRate] = useState("9600");
-  const [loading, setLoading] = useState(false);
+  useEffect(() => { api("/serialports").then(setPorts).catch(() => {}); }, []);
+  if (!ports.length) return null;
+  async function remove(name) {
+    const ok = await showConfirm('Remove the old "' + name + '" code from index.js?', { danger: true, confirmLabel: "Remove" });
+    if (!ok) return;
+    try {
+      await api("/serialports/" + encodeURIComponent(name), { method: "DELETE" });
+      toast("Removed " + name, "success");
+      setPorts((p) => p.filter((x) => x.name !== name));
+      onChange();
+    } catch (err) { toast(err.message, "error"); }
+  }
+  return html`<div className="card mb-4" style=${{ borderColor: "rgba(245,165,36,0.35)" }}>
+    <div className="card-title mb-1">Old-style ports in index.js</div>
+    <div className="card-subtitle mb-3">These use a hard-coded port path and don't reconnect. Add them again as devices below, then remove the old code.</div>
+    ${ports.map((p) => html`<div key=${p.name} className="flex items-center justify-between" style=${{ padding: "6px 0", gap: "10px" }}>
+      <span className="mono text-sm">${p.name} · ${p.path} @ ${p.baudRate}</span>
+      <button className="btn btn-ghost btn-sm" onClick=${() => remove(p.name)}><${LuTrash2} size=${13} /> Remove</button>
+    </div>`)}
+  </div>`;
+}
+
+function HardwareList({ baudRates, onUse }) {
+  const { toast } = useApp();
+  const [ports, setPorts] = useState(null);
+  const [scanning, setScanning] = useState(false);
+  const [probing, setProbing] = useState(null);
+  const [ids, setIds] = useState({});
+  const [probeBaud, setProbeBaud] = useState("115200");
+  const [fresh, setFresh] = useState({}); // path -> time first seen (for the "New" badge)
+  const seenRef = useRef(null);
 
+  // quiet=true: background refresh (no spinner, no error toast).
+  async function scan(quiet) {
+    if (!quiet) setScanning(true);
+    try {
+      const list = await api("/serial/scan");
+      const paths = new Set(list.map((p) => p.path));
+      if (seenRef.current) {
+        const added = list.filter((p) => p.usb && !seenRef.current.has(p.path)).map((p) => p.path);
+        if (added.length) setFresh((f) => { const n = { ...f }; added.forEach((x) => { n[x] = Date.now(); }); return n; });
+      }
+      seenRef.current = paths;
+      setPorts(list);
+    } catch (err) {
+      if (!quiet) { toast(err.message, "error"); setPorts([]); }
+    }
+    if (!quiet) setScanning(false);
+  }
+  // Auto-detect: keep the list live, and refresh at once on a hotplug event.
+  useEffect(() => {
+    scan();
+    const t = setInterval(() => scan(true), 3000);
+    const onEvent = () => scan(true);
+    window.addEventListener("serial-event", onEvent);
+    return () => { clearInterval(t); window.removeEventListener("serial-event", onEvent); };
+  }, []);
+  // Drop "New" badges after 10s.
   useEffect(() => {
-    api("/serialports").then(setPorts).catch(() => {});
-  }, [status]);
+    const t = setInterval(() => setFresh((f) => {
+      const n = {};
+      for (const k in f) if (Date.now() - f[k] < 10000) n[k] = f[k];
+      return Object.keys(n).length === Object.keys(f).length ? f : n;
+    }), 1000);
+    return () => clearInterval(t);
+  }, []);
 
-  async function handleAdd() {
-    setLoading(true);
+  const [identifying, setIdentifying] = useState(false);
+  async function identifyAll() {
+    setIdentifying(true);
     try {
-      const result = await api("/add-serialport", {
-        method: "POST",
-        body: { name: portName, portPath, baudRate: parseInt(baudRate) },
-      });
-      toast(result.message, "success");
-      setShowAdd(false);
-      setPortName("serialPort" + ((ports?.length || 0) + 1));
-      setPortPath("/dev/ttyUSB0");
-      setBaudRate("9600");
-      refresh();
-      api("/serialports").then(setPorts).catch(() => {});
+      const list = await api("/serial/identify-all", { method: "POST", body: { baudRate: Number(probeBaud), refresh: true } });
+      setIds((m) => { const n = { ...m }; list.forEach((d) => { n[d.path] = d.identity || null; }); return n; });
+      const named = list.filter((d) => d.identity).length;
+      toast(named + " of " + list.length + " board" + (list.length === 1 ? "" : "s") + " answered ID?", named ? "success" : "info");
+      scan(true);
     } catch (err) { toast(err.message, "error"); }
-    setLoading(false);
+    setIdentifying(false);
   }
 
-  async function handleDelete(name) {
-    const ok = await showConfirm('Remove serial port "' + name + '"? This will remove its code from index.js.', { danger: true, confirmLabel: 'Remove' });
-    if (!ok) return;
+  async function probe(p) {
+    setProbing(p.path);
     try {
-      await api("/serialports/" + name, { method: "DELETE" });
-      toast('Serial port "' + name + '" removed', "success");
-      setSelected(null);
-      refresh();
-      api("/serialports").then(setPorts).catch(() => {});
+      const r = await api("/serial/probe", { method: "POST", body: { path: p.path, baudRate: Number(probeBaud), tryAll: true } });
+      setIds((m) => ({ ...m, [p.path]: r.identity || null }));
+      if (r.identity) toast(p.path + " answered " + r.command, "success");
+      else toast("No reply to ID?, M115, $I or ATI on " + p.path + ". Check the baud rate and firmware.", "info");
     } catch (err) { toast(err.message, "error"); }
+    setProbing(null);
   }
 
-  const selPort = ports.find(p => p.name === selected);
-  const hasNoPorts = !ports || ports.length === 0;
+  const usb = (ports || []).filter((p) => p.usb);
+  const other = (ports || []).filter((p) => !p.usb);
 
-  if (hasNoPorts && !showAdd) {
-    return html`<div>
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <div className="card-title">SerialPort</div>
-          <div className="card-subtitle">0 connections</div>
-        </div>
-        <button className="btn btn-primary" onClick=${() => setShowAdd(true)}>
-          <span className="sidebar-icon">${Icons.plus}</span> Add Port
+  return html`<div className="card" style=${{ padding: 0, overflow: "hidden" }}>
+    <div className="flex items-center justify-between" style=${{ padding: "12px 16px", borderBottom: "1px solid var(--border)", gap: "8px" }}>
+      <span className="card-title flex items-center gap-2">Connected hardware <span className="status-dot on" title="Watching for boards being plugged in" /></span>
+      <div className="flex items-center gap-2">
+        <select className="form-select" style=${{ height: "28px", width: "auto", fontSize: "12px" }} value=${probeBaud}
+          title="Baud rate used by Identify" onChange=${(e) => setProbeBaud(e.target.value)}>
+          ${baudRates.map((b) => html`<option key=${b} value=${b}>${b}</option>`)}
+        </select>
+        <button className="btn btn-ghost btn-sm" onClick=${identifyAll} disabled=${identifying || !usb.length}
+          title="Ask every free board for its identity (ID?). Opening a port resets most boards.">
+          ${identifying ? html`<span className="spinner" />` : html`<${LuSearch} size=${13} />`} Identify all
         </button>
+        <button className="btn btn-ghost btn-sm" onClick=${() => scan()} disabled=${scanning} title="Rescan"><${LuRefreshCw} size=${13} className=${scanning ? "spin" : ""} /></button>
       </div>
-      <div className="empty-state">
-        <div className="empty-icon"><${LuCable} size=${36} /></div>
-        <h3>No serial ports</h3>
-        <p>Add a serial port connection to communicate with hardware devices</p>
-        <button className="btn btn-primary" onClick=${() => setShowAdd(true)}>Add Port</button>
-      </div>
-    </div>`;
+    </div>
+    ${ports === null
+      ? html`<div className="ov-empty">Scanning…</div>`
+      : usb.length === 0
+        ? html`<div className="ov-empty">Waiting for a board… Plug one in and it shows up here automatically.${other.length ? html`<br />${other.length} non-USB port(s) hidden.` : null}</div>`
+        : usb.map((p) => html`<div key=${p.path} style=${{ padding: "10px 16px", borderBottom: "1px solid var(--border)" }}>
+            <div className="flex items-center justify-between" style=${{ gap: "8px" }}>
+              <span className="mono" style=${{ fontSize: "12.5px", fontWeight: 600 }}>${p.path}</span>
+              <span className="flex gap-2">
+                ${fresh[p.path] ? html`<span className="badge badge-info">New</span>` : null}
+                ${p.inUse ? html`<span className="badge badge-success">In use</span>` : null}
+              </span>
+            </div>
+            <div className="text-sm text-muted" style=${{ marginTop: "3px" }}>
+              ${p.vendor || p.manufacturer || "Unknown chip"} · <span className="mono">${p.vendorId}:${p.productId || "????"}</span>
+              ${p.serialNumber ? html` · SN <span className="mono">${p.serialNumber}</span>` : " · no serial number"}
+            </div>
+            ${(p.identity || p.path in ids) && html`<div className="text-sm" title=${ids[p.path] || p.identity || ""}
+              style=${{ marginTop: "4px", color: (ids[p.path] || p.identity) ? "var(--success)" : "var(--text-muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+              ${(ids[p.path] || p.identity) ? html`Identity: <span className="mono">${ids[p.path] || p.identity}</span>` : "No identity reply"}
+            </div>`}
+            <div className="flex gap-2" style=${{ marginTop: "8px" }}>
+              <button className="btn btn-secondary btn-sm" onClick=${() => probe(p)} disabled=${p.inUse || probing !== null}
+                title="Opens the port (resets most boards) and tries ID?, M115, $I and ATI">
+                ${probing === p.path ? html`<span className="spinner" />` : html`<${LuSearch} size=${12} />`} Identify
+              </button>
+              <button className="btn btn-ghost btn-sm" onClick=${() => onUse(p, ids[p.path] || p.identity, probeBaud)} disabled=${p.inUse}>
+                <${LuPlus} size=${12} /> Add as device
+              </button>
+            </div>
+          </div>`)}
+  </div>`;
+}
+
+function DeviceEditor({ initial, baudRates, idPresets, onSaved, onCancel }) {
+  const { toast } = useApp();
+  const [f, setF] = useState(initial);
+  const [saving, setSaving] = useState(false);
+  const set = (patch) => setF((x) => ({ ...x, ...patch }));
+  const strat = STRATEGIES.find((s) => s.id === f.strategy);
+
+  async function save() {
+    setSaving(true);
+    const match =
+      f.strategy === "serialNumber" ? { serialNumber: f.serialNumber }
+      : f.strategy === "identity" ? { identity: f.identity, vendorId: f.vendorId }
+      : f.strategy === "vendorId" ? { vendorId: f.vendorId, productId: f.productId }
+      : { path: f.path };
+    try {
+      const r = await api("/serial/devices", {
+        method: "POST",
+        body: {
+          originalName: f.originalName, name: f.name.trim(), match,
+          baudRate: Number(f.baudRate), delimiter: f.delimiter, idCommand: f.idCommand,
+          timeout: Number(f.timeout), enabled: f.enabled,
+          // Keep what the workspace manages, so editing never drops it.
+          commands: f.commands, rules: f.rules, auto: f.auto,
+          ignoreLines: String(f.ignoreLines || "").split(",").map((x) => x.trim()).filter(Boolean),
+        },
+      });
+      toast(r.message, "success");
+      onSaved(r.device.name);
+    } catch (err) { toast(err.message, "error"); }
+    setSaving(false);
   }
 
-  return html`<div>
-    <div className="flex items-center justify-between mb-4">
-      <div>
-        <div className="card-title">SerialPort</div>
-        <div className="card-subtitle">${ports.length} connection${ports.length !== 1 ? 's' : ''}</div>
+  return html`<div className="card">
+    <div className="card-title mb-1">${f.originalName ? "Edit " + f.originalName : "Add device"}</div>
+    <div className="card-subtitle mb-4">Changes apply immediately; no restart.</div>
+    <div className="form-group">
+      <label className="form-label">Name (used in code and URLs)</label>
+      <input className="form-input mono" value=${f.name} placeholder="led" onInput=${(e) => set({ name: e.target.value })} />
+    </div>
+    <div className="form-group">
+      <label className="form-label">Find the device by</label>
+      <div className="api-tester-mode-tabs" style=${{ flexWrap: "wrap" }}>
+        ${STRATEGIES.map((s) => html`<button key=${s.id} className=${`api-tester-mode-tab${f.strategy === s.id ? " active" : ""}`}
+          onClick=${() => set({ strategy: s.id })}>${s.label}</button>`)}
       </div>
-      <button className=${`btn ${showAdd ? 'btn-ghost' : 'btn-primary'}`}
-        onClick=${() => {
-          if (showAdd) { setShowAdd(false); if (ports.length) setSelected(ports[0].name); }
-          else { setShowAdd(true); setSelected(null); setPortName("serialPort" + (ports.length + 1)); }
-        }}>
-        ${showAdd ? 'Cancel' : html`<span className="sidebar-icon">${Icons.plus}</span> Add Port`}
-      </button>
+      <div className="text-sm" style=${{ marginTop: "6px", color: f.strategy === "path" ? "var(--warning)" : "var(--text-muted)" }}>${strat.hint}</div>
+    </div>
+    ${f.strategy === "serialNumber" && html`<div className="form-group">
+      <label className="form-label">USB serial number</label>
+      <input className="form-input mono" value=${f.serialNumber} placeholder="85036313233351C0E1B2" onInput=${(e) => set({ serialNumber: e.target.value })} />
+    </div>`}
+    ${f.strategy === "identity" && html`<div className="grid-2">
+      <div className="form-group">
+        <label className="form-label">Reply contains</label>
+        <input className="form-input mono" value=${f.identity} placeholder="LED-CTRL" onInput=${(e) => set({ identity: e.target.value })} />
+      </div>
+      <div className="form-group">
+        <label className="form-label">Only probe vendor id (optional)</label>
+        <input className="form-input mono" value=${f.vendorId} placeholder="10c4" onInput=${(e) => set({ vendorId: e.target.value })} />
+      </div>
+    </div>`}
+    ${f.strategy === "vendorId" && html`<div className="grid-2">
+      <div className="form-group">
+        <label className="form-label">USB vendor id</label>
+        <input className="form-input mono" value=${f.vendorId} placeholder="10c4" onInput=${(e) => set({ vendorId: e.target.value })} />
+      </div>
+      <div className="form-group">
+        <label className="form-label">USB product id (optional)</label>
+        <input className="form-input mono" value=${f.productId} placeholder="ea60" onInput=${(e) => set({ productId: e.target.value })} />
+      </div>
+    </div>`}
+    ${f.strategy === "path" && html`<div className="form-group">
+      <label className="form-label">Port path</label>
+      <input className="form-input mono" value=${f.path} placeholder="COM5 or /dev/ttyUSB0" onInput=${(e) => set({ path: e.target.value })} />
+    </div>`}
+    <div className="grid-2">
+      <div className="form-group">
+        <label className="form-label">Baud rate (must match Serial.begin)</label>
+        <select className="form-select" value=${f.baudRate} onChange=${(e) => set({ baudRate: e.target.value })}>
+          ${baudRates.map((b) => html`<option key=${b} value=${b}>${b}</option>`)}
+        </select>
+      </div>
+      <div className="form-group">
+        <label className="form-label">Line ending</label>
+        <select className="form-select" value=${f.delimiter} onChange=${(e) => set({ delimiter: e.target.value })}>
+          <option value="lf">\\n (Serial.println on most boards)</option>
+          <option value="crlf">\\r\\n</option>
+        </select>
+      </div>
+      <div className="form-group">
+        <label className="form-label">Identity command</label>
+        <div className="flex gap-2">
+          <select className="form-select" style=${{ flex: "1 1 auto" }}
+            value=${(idPresets || []).some((p) => p.command === f.idCommand) ? f.idCommand : "__custom"}
+            onChange=${(e) => set({ idCommand: e.target.value === "__custom" ? "" : e.target.value })}>
+            ${(idPresets || []).map((p) => html`<option key=${p.command} value=${p.command}>${p.label}</option>`)}
+            <option value="__custom">Custom…</option>
+          </select>
+          ${!(idPresets || []).some((p) => p.command === f.idCommand) && html`<input className="form-input mono" style=${{ flex: "0 1 120px" }}
+            value=${f.idCommand} placeholder="WHO?" onInput=${(e) => set({ idCommand: e.target.value })} />`}
+        </div>
+      </div>
+      <div className="form-group">
+        <label className="form-label">Reply timeout (ms)</label>
+        <input className="form-input" type="number" min="100" value=${f.timeout} onInput=${(e) => set({ timeout: e.target.value })} />
+      </div>
+    </div>
+    <div className="form-group">
+      <label className="form-label">Ignore lines (never a reply)</label>
+      <input className="form-input mono" value=${f.ignoreLines || ""} placeholder="wait, busy" onInput=${(e) => set({ ignoreLines: e.target.value })} />
+      <div className="text-sm text-muted" style=${{ marginTop: "6px" }}>Comma-separated. Heartbeats the board prints on its own (like Marlin's "wait") are also skipped automatically.</div>
+    </div>
+    <label className="flex items-center gap-2 text-sm mb-4" style=${{ cursor: "pointer" }}>
+      <input type="checkbox" checked=${f.enabled} onChange=${(e) => set({ enabled: e.target.checked })} /> Connect at startup
+    </label>
+    <div className="flex gap-2">
+      <button className="btn btn-primary" onClick=${save} disabled=${saving}>${saving ? html`<span className="spinner" />` : null} Save device</button>
+      <button className="btn btn-ghost" onClick=${onCancel}>Cancel</button>
+    </div>
+  </div>`;
+}
+
+export function SerialPortPage() {
+  const { toast, showConfirm, status } = useApp();
+  const [info, setInfo] = useState(null);
+  const [selected, setSelected] = useState(null);
+  const [editing, setEditing] = useState(null); // form object or null
+
+  async function load() {
+    try {
+      const r = await api("/serial");
+      setInfo(r);
+      if (!selected && r.config.length) setSelected(r.config[0].name);
+    } catch (err) { toast(err.message, "error"); }
+  }
+  useEffect(() => { load(); }, [status]);
+  useEffect(() => {
+    const onEvent = () => load();
+    window.addEventListener("serial-event", onEvent);
+    return () => window.removeEventListener("serial-event", onEvent);
+  }, []);
+
+  async function setAutoAdd(on) {
+    setInfo((i) => ({ ...i, autoAdd: on }));
+    try {
+      const r = await api("/serial/settings", { method: "POST", body: { autoAdd: on } });
+      toast(r.message, "success");
+    } catch (err) {
+      setInfo((i) => ({ ...i, autoAdd: !on }));
+      toast(err.message, "error");
+    }
+  }
+  // Live status + console while a device is visible.
+  useEffect(() => {
+    if (!info || !info.wired) return;
+    const t = setInterval(() => api("/serial").then(setInfo).catch(() => {}), 1500);
+    return () => clearInterval(t);
+  }, [info && info.wired]);
+
+  if (!info) return html`<div className="card"><div className="ov-empty">Loading…</div></div>`;
+
+  const header = html`<div className="flex items-center justify-between mb-4">
+    <div>
+      <div className="card-title">SerialPort</div>
+      <div className="card-subtitle">Arduino / ESP32 boards over USB serial · ${info.config.length} device${info.config.length === 1 ? "" : "s"}</div>
     </div>
+    ${info.wired && html`<div className="flex items-center gap-3" style=${{ flexWrap: "wrap" }}>
+      <label className="flex items-center gap-2 text-sm" style=${{ cursor: "pointer" }}
+        title="When a board nobody has configured is plugged in, add it as a device and connect it. Opening a port resets most boards.">
+        <span className="form-toggle">
+          <input type="checkbox" checked=${info.autoAdd !== false} onChange=${(e) => setAutoAdd(e.target.checked)} />
+          <span className="slider"></span>
+        </span>
+        Auto-add new boards
+      </label>
+      <button className="btn btn-primary" onClick=${() => { setEditing({ ...EMPTY_FORM }); setSelected(null); }}>
+        <${LuPlus} size=${14} /> Add device
+      </button>
+    </div>`}
+  </div>`;
+
+  if (!info.wired) {
+    return html`<div>${header}${info.legacy && html`<${LegacyPorts} onChange=${load} />`}<${SetupCard} info=${info} onDone=${load} /></div>`;
+  }
+
+  const liveOf = (name) => info.live.find((d) => d.name === name);
+  const cfg = info.config.find((d) => d.name === selected);
+
+  function useHardware(p, identity, baud) {
+    const form = { ...EMPTY_FORM, baudRate: String(baud || "115200") };
+    if (p.serialNumber) Object.assign(form, { strategy: "serialNumber", serialNumber: p.serialNumber });
+    else if (identity) Object.assign(form, { strategy: "identity", identity: identity.split(":")[0], vendorId: p.vendorId || "" });
+    else Object.assign(form, { strategy: "vendorId", vendorId: p.vendorId || "", productId: p.productId || "" });
+    setEditing(form);
+    setSelected(null);
+  }
+
+  function edit(d) {
+    const m = d.match || {};
+    setEditing({
+      ...EMPTY_FORM, originalName: d.name, name: d.name, strategy: strategyOf(m),
+      serialNumber: m.serialNumber || "", identity: m.identity || "", vendorId: m.vendorId || "",
+      productId: m.productId || "", path: m.path || "", baudRate: String(d.baudRate), delimiter: d.delimiter,
+      idCommand: d.idCommand, timeout: String(d.timeout), enabled: d.enabled !== false,
+      commands: d.commands, rules: d.rules, auto: d.auto, ignoreLines: (d.ignoreLines || []).join(", "),
+    });
+  }
+
+  async function remove(d) {
+    const ok = await showConfirm('Remove device "' + d.name + '"? Its port is closed right away.', { danger: true, confirmLabel: "Remove" });
+    if (!ok) return;
+    try {
+      await api("/serial/devices/" + encodeURIComponent(d.name), { method: "DELETE" });
+      toast("Removed " + d.name, "success");
+      setSelected(null);
+      load();
+    } catch (err) { toast(err.message, "error"); }
+  }
 
+  return html`<div>
+    ${header}
+    ${info.legacy && html`<${LegacyPorts} onChange=${load} />`}
     <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)' }}>Connections</span>
-        </div>
-        <div className="routes-list">
-          ${ports.map(p => html`<div key=${p.name}
-            className=${`route-item ${selected === p.name && !showAdd ? 'active' : ''}`}
-            onClick=${() => { setSelected(p.name); setShowAdd(false); }}>
-            <div style=${{ display: 'flex', flexDirection: 'column', gap: '4px', flex: 1, minWidth: 0 }}>
-              <span className="ri-name">${p.name}</span>
-              <span className="ri-file">${p.path} @ ${p.baudRate}</span>
-            </div>
-            <span className="badge badge-success" style=${{ fontSize: '10px' }}>Active</span>
-          </div>`)}
-          <div className=${`route-item ${showAdd ? 'active' : ''}`}
-            onClick=${() => { setShowAdd(true); setSelected(null); setPortName("serialPort" + (ports.length + 1)); }}
-            style=${{ borderTop: ports.length ? '1px solid var(--border)' : 'none' }}>
-            <span className="sidebar-icon" style=${{ color: 'var(--accent-light)' }}>${Icons.plus}</span>
-            <span className="ri-name" style=${{ color: 'var(--accent-light)' }}>Add Port</span>
-          </div>
+      <div style=${{ display: "flex", flexDirection: "column", gap: "14px" }}>
+        <div className="card" style=${{ padding: 0, overflow: "hidden" }}>
+          <div style=${{ padding: "12px 16px", borderBottom: "1px solid var(--border)" }}><span className="card-title">Devices</span></div>
+          ${info.config.length === 0
+            ? html`<div className="ov-empty">${info.autoAdd !== false ? "Plug in a board and it's added here automatically." : "No devices yet. Pick a board under Connected hardware, or Add device."}</div>`
+            : html`<div className="routes-list">
+                ${info.config.map((d) => {
+                  const live = liveOf(d.name);
+                  const st = d.enabled === false ? STATUS.disabled : STATUS[(live && live.status) || "idle"] || STATUS.idle;
+                  return html`<div key=${d.name} className=${`route-item ${selected === d.name && !editing ? "active" : ""}`}
+                    onClick=${() => { setSelected(d.name); setEditing(null); }}>
+                    <div style=${{ display: "flex", flexDirection: "column", gap: "3px", flex: 1, minWidth: 0 }}>
+                      <span className="ri-name mono">${d.name}${d.auto ? html` <span className="badge badge-muted" title="Added automatically when it was plugged in">auto</span>` : null}</span>
+                      <span className="ri-file">${live && live.path ? live.path + " · " : ""}${matchLabel(d.match)}</span>
+                    </div>
+                    <span className=${`badge ${st.cls}`}>${st.label}</span>
+                  </div>`;
+                })}
+              </div>`}
         </div>
+        <${HardwareList} baudRates=${info.baudRates} onUse=${useHardware} />
       </div>
 
       <div className="routes-detail">
-        ${showAdd && html`<div className="card">
-          <div className="card-title mb-2">Add Serial Port</div>
-          <div className="card-subtitle mb-4">Configure a new serial port connection</div>
-          <div className="form-group">
-            <label className="form-label">Variable Name</label>
-            <input className="form-input" value=${portName} onInput=${e => setPortName(e.target.value)} placeholder="serialPort1" />
-          </div>
-          <div className="grid-2">
-            <div className="form-group">
-              <label className="form-label">Port Path</label>
-              <input className="form-input" value=${portPath} onInput=${e => setPortPath(e.target.value)} placeholder="/dev/ttyUSB0" />
-            </div>
-            <div className="form-group">
-              <label className="form-label">Baud Rate</label>
-              <select className="form-select" value=${baudRate} onChange=${e => setBaudRate(e.target.value)}>
-                ${['9600', '14400', '19200', '38400', '57600', '115200'].map(r =>
-                  html`<option key=${r} value=${r}>${r}</option>`
-                )}
-              </select>
-            </div>
-          </div>
-          <button className="btn btn-primary" onClick=${handleAdd} disabled=${loading}>
-            ${loading ? html`<span className="spinner" />` : null}
-            ${loading ? 'Adding...' : 'Add Port'}
-          </button>
-        </div>`}
-
-        ${!showAdd && selPort && html`<div>
-          <div className="card mb-4">
-            <div className="flex items-center justify-between mb-3">
-              <div>
-                <div style=${{ fontWeight: 600, fontSize: '16px', marginBottom: '2px' }}>${selPort.name}</div>
-                <div className="text-sm text-muted" style=${{ fontFamily: "'SF Mono', monospace" }}>${selPort.path} @ ${selPort.baudRate} baud</div>
-              </div>
-              <button className="btn btn-danger btn-sm btn-icon" onClick=${() => handleDelete(selPort.name)}>
-                <span className="sidebar-icon">${Icons.trash}</span>
-              </button>
-            </div>
-            <div style=${{ fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: '8px' }}>Configuration</div>
-            <div style=${{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: '6px 12px', fontSize: '13px' }}>
-              <span className="text-muted">Variable</span><span>${selPort.name}</span>
-              <span className="text-muted">Path</span><span style=${{ fontFamily: 'monospace' }}>${selPort.path}</span>
-              <span className="text-muted">Baud Rate</span><span>${selPort.baudRate}</span>
-              <span className="text-muted">Parser</span><span>ReadlineParser (\\r\\n)</span>
-            </div>
-          </div>
-        </div>`}
-
-        ${!showAdd && !selPort && html`<div className="card">
-          <div className="empty-state" style=${{ padding: '40px' }}>
-            <p>Select a port to view details</p>
-          </div>
-        </div>`}
+        ${editing
+          ? html`<${DeviceEditor} key=${editing.originalName || "new"} initial=${editing} baudRates=${info.baudRates} idPresets=${info.idPresets}
+              onSaved=${(name) => { setEditing(null); setSelected(name); load(); }} onCancel=${() => setEditing(null)} />`
+          : cfg
+            ? html`<${SerialWorkspace} key=${cfg.name} cfg=${cfg} live=${liveOf(cfg.name)}
+                devices=${info.config.map((d) => d.name)} matchText=${matchLabel(cfg.match)}
+                statusBadge=${cfg.enabled === false ? STATUS.disabled : STATUS[(liveOf(cfg.name) || {}).status || "idle"] || STATUS.idle}
+                onEdit=${() => edit(cfg)} onDelete=${() => remove(cfg)} onSaved=${load} />`
+            : html`<div className="card"><div className="empty-state" style=${{ padding: "40px" }}>
+                <div className="empty-icon"><${LuUsb} size=${30} /></div>
+                <p>Select a device, or add one from Connected hardware.</p>
+              </div></div>`}
       </div>
     </div>
   </div>`;
 }
-