4bnode 4.2.0 → 4.2.1

package/skeleton/.4bnode/assets/js/components/SerialWorkspace.js

@@ -0,0 +1,634 @@
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import {
+  LuSend, LuPencil, LuTrash2, LuPlus, LuCopy, LuPause, LuPlay, LuDownload, LuEraser, LuSearch,
+} from "react-icons/lu";
+import { html, api, copyToClipboard, formatBytes, formatDuration, timeAgo } from "../lib.js";
+import { useApp } from "../context.js";
+
+// ── Live stream ────────────────────────────────────────────────────────────
+// One SSE connection (fetch + reader so the passkey stays in a header) feeding
+// a per-device line buffer. Components subscribe and re-render on new lines.
+const MAX_LINES = 2000;
+const buffers = new Map(); // device -> [{ dir, line, ts }]
+const listeners = new Set();
+let streamCtl = null;
+let streamUsers = 0;
+
+function pushLine(e) {
+  const list = buffers.get(e.device) || [];
+  list.push({ dir: e.dir, line: e.line, ts: e.ts });
+  if (list.length > MAX_LINES) list.splice(0, list.length - MAX_LINES);
+  buffers.set(e.device, list);
+}
+
+function startStream() {
+  if (streamCtl) return;
+  const ctl = new AbortController();
+  streamCtl = ctl;
+  (async function run() {
+    while (!ctl.signal.aborted) {
+      try {
+        const passkey = sessionStorage.getItem("_dev_passkey") || "";
+        const res = await fetch("/_dev/api/serial/stream", { headers: passkey ? { "x-passkey": passkey } : {}, signal: ctl.signal });
+        if (!res.ok || !res.body) throw new Error("stream " + res.status);
+        const reader = res.body.getReader();
+        const dec = new TextDecoder();
+        let buf = "";
+        for (;;) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buf += dec.decode(value, { stream: true });
+          let i;
+          while ((i = buf.indexOf("\n\n")) !== -1) {
+            const chunk = buf.slice(0, i);
+            buf = buf.slice(i + 2);
+            const data = chunk.split("\n").find((l) => l.startsWith("data: "));
+            if (!data) continue;
+            try {
+              const e = JSON.parse(data.slice(6));
+              if (e.type === "line") pushLine(e);
+              listeners.forEach((fn) => fn(e));
+            } catch {}
+          }
+        }
+      } catch {}
+      if (!ctl.signal.aborted) await new Promise((r) => setTimeout(r, 2000)); // reconnect
+    }
+  })();
+}
+
+// Subscribe a component to live serial events; returns a version counter that
+// bumps (at most once per animation frame) when lines arrive.
+export function useSerialStream(onEvent) {
+  const [version, setVersion] = useState(0);
+  const cb = useRef(onEvent);
+  cb.current = onEvent;
+  useEffect(() => {
+    let raf = 0;
+    const fn = (e) => {
+      if (cb.current) cb.current(e);
+      if (!raf) raf = requestAnimationFrame(() => { raf = 0; setVersion((v) => v + 1); });
+    };
+    listeners.add(fn);
+    streamUsers++;
+    startStream();
+    return () => {
+      listeners.delete(fn);
+      cancelAnimationFrame(raf);
+      if (--streamUsers === 0 && streamCtl) { streamCtl.abort(); streamCtl = null; }
+    };
+  }, []);
+  return version;
+}
+
+async function backfill(name) {
+  try {
+    const recent = await api("/serial/devices/" + encodeURIComponent(name) + "/recent");
+    const live = buffers.get(name) || [];
+    const firstLive = live.length ? live[0].ts : Infinity;
+    buffers.set(name, recent.filter((l) => l.ts < firstLive).concat(live).slice(-MAX_LINES));
+  } catch {}
+}
+
+// Save a device: the current config plus a patch (commands, rules, ...).
+async function saveDevice(cfg, patch) {
+  return api("/serial/devices", { method: "POST", body: { ...cfg, ...patch, originalName: cfg.name } });
+}
+
+const fmtTime = (ts) => {
+  const d = new Date(ts);
+  return d.toLocaleTimeString([], { hour12: false }) + "." + String(d.getMilliseconds()).padStart(3, "0");
+};
+const toHex = (s) => Array.from(new TextEncoder().encode(s)).map((b) => b.toString(16).padStart(2, "0")).join(" ");
+
+// ── 1. Monitor ─────────────────────────────────────────────────────────────
+function Monitor({ cfg, live, onSent }) {
+  const { toast } = useApp();
+  const [query, setQuery] = useState("");
+  const [dir, setDir] = useState("all");
+  const [showTs, setShowTs] = useState(true);
+  const [hex, setHex] = useState(false);
+  const [paused, setPaused] = useState(false);
+  const [frozen, setFrozen] = useState(null); // snapshot while paused
+  const [clearedAt, setClearedAt] = useState(0);
+  const [command, setCommand] = useState("");
+  const [expectReply, setExpectReply] = useState(true);
+  const [sending, setSending] = useState(false);
+  const histKey = "_4bnode_serial_hist_" + cfg.name;
+  const [history, setHistory] = useState(() => { try { return JSON.parse(localStorage.getItem(histKey) || "[]"); } catch { return []; } });
+  const [histIdx, setHistIdx] = useState(-1);
+  const boxRef = useRef(null);
+  const stick = useRef(true);
+  const version = useSerialStream();
+
+  const [, refresh] = useState(0);
+  useEffect(() => { backfill(cfg.name).then(() => refresh((n) => n + 1)); }, [cfg.name]);
+
+  const all = buffers.get(cfg.name) || [];
+  const source = paused && frozen ? frozen : all;
+  const lines = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return source.filter((l) => l.ts > clearedAt && (dir === "all" || l.dir === dir) && (!q || l.line.toLowerCase().includes(q))).slice(-1000);
+  }, [source, source.length, version, query, dir, clearedAt, paused]);
+  const pendingNew = paused && frozen ? Math.max(0, all.length - frozen.length) : 0;
+
+  useEffect(() => {
+    const el = boxRef.current;
+    if (el && stick.current && !paused) el.scrollTop = el.scrollHeight;
+  }, [lines.length, version, paused]);
+
+  function togglePause() {
+    if (paused) { setPaused(false); setFrozen(null); }
+    else { setFrozen(all.slice()); setPaused(true); }
+  }
+
+  function exportLog() {
+    const text = lines.map((l) => fmtTime(l.ts) + " " + (l.dir === "tx" ? ">" : "<") + " " + l.line).join("\n");
+    const blob = new Blob([text + "\n"], { type: "text/plain" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = cfg.name + "-" + new Date().toISOString().replace(/[:.]/g, "-") + ".log";
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+  }
+
+  async function send(cmd, reply) {
+    const c = (cmd ?? command).trim();
+    if (!c) return;
+    setSending(true);
+    try {
+      const r = await api("/serial/devices/" + encodeURIComponent(cfg.name) + "/send", { method: "POST", body: { command: c, expectReply: reply ?? expectReply } });
+      if (reply ?? expectReply) toast("Reply in " + r.ms + " ms: " + r.reply, "success");
+      const next = [c, ...history.filter((h) => h !== c)].slice(0, 50);
+      setHistory(next);
+      try { localStorage.setItem(histKey, JSON.stringify(next)); } catch {}
+      setHistIdx(-1);
+      if (cmd === undefined) setCommand("");
+      onSent && onSent();
+    } catch (err) { toast(err.message, "error"); }
+    setSending(false);
+  }
+
+  function onKey(e) {
+    if (e.key === "Enter" && !sending) { e.preventDefault(); send(); }
+    else if (e.key === "ArrowUp" && history.length) {
+      e.preventDefault();
+      const i = Math.min(history.length - 1, histIdx + 1);
+      setHistIdx(i); setCommand(history[i]);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const i = histIdx - 1;
+      setHistIdx(Math.max(-1, i)); setCommand(i >= 0 ? history[i] : "");
+    }
+  }
+
+  const q = query.trim();
+  const highlight = (text) => {
+    if (!q) return text;
+    const idx = text.toLowerCase().indexOf(q.toLowerCase());
+    if (idx === -1) return text;
+    return html`${text.slice(0, idx)}<mark>${text.slice(idx, idx + q.length)}</mark>${text.slice(idx + q.length)}`;
+  };
+  const connected = live && live.connected;
+
+  return html`<div>
+    <div className="serial-toolbar">
+      <div style=${{ position: "relative", flex: "1 1 200px" }}>
+        <input className="form-input" placeholder="Filter lines…" value=${query} onInput=${(e) => setQuery(e.target.value)} style=${{ paddingLeft: "30px" }} />
+        <span style=${{ position: "absolute", left: "10px", top: "8px", color: "var(--text-muted)" }}><${LuSearch} size=${14} /></span>
+      </div>
+      <select className="form-select" style=${{ width: "auto" }} value=${dir} onChange=${(e) => setDir(e.target.value)}>
+        <option value="all">All</option>
+        <option value="rx">Received</option>
+        <option value="tx">Sent</option>
+      </select>
+      <button className=${`chip-toggle${showTs ? " on" : ""}`} onClick=${() => setShowTs(!showTs)}>Time</button>
+      <button className=${`chip-toggle${hex ? " on" : ""}`} onClick=${() => setHex(!hex)}>Hex</button>
+      <button className=${`chip-toggle${paused ? " on" : ""}`} onClick=${togglePause} title=${paused ? "Resume" : "Pause"}>
+        ${paused ? html`<${LuPlay} size=${13} />` : html`<${LuPause} size=${13} />`} ${paused ? "Resume" + (pendingNew ? " (" + pendingNew + " new)" : "") : "Pause"}
+      </button>
+      <button className="chip-toggle" onClick=${() => setClearedAt(Date.now())} title="Clear the view"><${LuEraser} size=${13} /> Clear</button>
+      <button className="chip-toggle" onClick=${exportLog} disabled=${!lines.length} title="Download the visible lines"><${LuDownload} size=${13} /> Export</button>
+    </div>
+
+    <div className="serial-console" ref=${boxRef}
+      onScroll=${(e) => { const el = e.currentTarget; stick.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40; }}>
+      ${lines.length === 0
+        ? html`<div className="sc-line text-muted">${connected ? (q ? "No lines match the filter." : "Waiting for data…") : "Not connected. Lines appear here as soon as the board connects."}</div>`
+        : lines.map((l, i) => html`<div key=${l.ts + "-" + i} className=${"sc-line sc-" + l.dir}>
+            ${showTs && html`<span className="sc-ts">${fmtTime(l.ts)}</span>`}
+            <span className="sc-dir">${l.dir === "tx" ? "→" : "←"}</span>
+            <span className=${hex ? "sc-text sc-hex" : "sc-text"}>${hex ? toHex(l.line) : highlight(l.line)}</span>
+          </div>`)}
+    </div>
+
+    <div className="flex gap-2" style=${{ marginTop: "10px", flexWrap: "wrap" }}>
+      <input className="form-input mono" style=${{ flex: "1 1 240px" }} value=${command} disabled=${!connected}
+        placeholder=${connected ? "Command (↑ ↓ history)" : "Not connected"}
+        onInput=${(e) => { setCommand(e.target.value); setHistIdx(-1); }} onKeyDown=${onKey} />
+      <button className="btn btn-primary" onClick=${() => send()} disabled=${sending || !connected || !command.trim()}>
+        ${sending ? html`<span className="spinner" />` : html`<${LuSend} size=${13} />`} Send
+      </button>
+    </div>
+    <div className="flex items-center justify-between" style=${{ marginTop: "8px", gap: "10px", flexWrap: "wrap" }}>
+      <label className="flex items-center gap-2 text-sm text-muted" style=${{ cursor: "pointer" }}>
+        <input type="checkbox" checked=${expectReply} onChange=${(e) => setExpectReply(e.target.checked)} /> Wait for reply (timeout ${cfg.timeout} ms)
+      </label>
+      ${(cfg.commands || []).length > 0 && html`<div className="cmd-grid">
+        ${cfg.commands.slice(0, 6).map((c) => html`<button key=${c.label} className="btn btn-secondary btn-sm" disabled=${!connected || sending}
+          onClick=${() => send(c.command, c.expectReply)} title=${c.command}>${c.label}</button>`)}
+      </div>`}
+    </div>
+  </div>`;
+}
+
+// ── 2. Saved commands ──────────────────────────────────────────────────────
+function Commands({ cfg, live, onSaved }) {
+  const { toast } = useApp();
+  const [list, setList] = useState(cfg.commands || []);
+  const [label, setLabel] = useState("");
+  const [command, setCommand] = useState("");
+  const [expectReply, setExpectReply] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [busy, setBusy] = useState(null);
+  const history = (() => { try { return JSON.parse(localStorage.getItem("_4bnode_serial_hist_" + cfg.name) || "[]"); } catch { return []; } })();
+  useEffect(() => setList(cfg.commands || []), [cfg.name, JSON.stringify(cfg.commands || [])]);
+
+  async function persist(next) {
+    setSaving(true);
+    try {
+      await saveDevice(cfg, { commands: next });
+      setList(next);
+      onSaved();
+      toast("Commands saved", "success");
+    } catch (err) { toast(err.message, "error"); }
+    setSaving(false);
+  }
+
+  async function run(c) {
+    setBusy(c.label);
+    try {
+      const r = await api("/serial/devices/" + encodeURIComponent(cfg.name) + "/send", { method: "POST", body: { command: c.command, expectReply: c.expectReply } });
+      toast(c.expectReply ? c.label + " → " + r.reply : "Sent " + c.label, "success");
+    } catch (err) { toast(err.message, "error"); }
+    setBusy(null);
+  }
+
+  const connected = live && live.connected;
+  return html`<div>
+    <div className="card-subtitle mb-3">One-click commands for this device. Saved in <span className="mono">devices.json</span> and shared with everyone using this project.</div>
+    ${list.length === 0
+      ? html`<div className="ov-empty" style=${{ border: "1px dashed var(--border)", borderRadius: "8px", marginBottom: "14px" }}>No saved commands yet.</div>`
+      : html`<div style=${{ border: "1px solid var(--border)", borderRadius: "8px", marginBottom: "14px" }}>
+          ${list.map((c, i) => html`<div key=${i} className="ov-list-row" style=${{ height: "44px" }}>
+            <button className="btn btn-secondary btn-sm" disabled=${!connected || busy !== null} onClick=${() => run(c)} style=${{ minWidth: "90px" }}>
+              ${busy === c.label ? html`<span className="spinner" />` : html`<${LuSend} size=${12} />`} ${c.label}
+            </button>
+            <span className="ov-path">${c.command}</span>
+            <span className="text-sm text-muted">${c.expectReply ? "waits for reply" : "no reply"}</span>
+            <button className="btn btn-ghost btn-sm btn-icon" title="Remove" disabled=${saving} onClick=${() => persist(list.filter((_, j) => j !== i))}><${LuTrash2} size=${13} /></button>
+          </div>`)}
+        </div>`}
+    <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+      <input className="form-input" style=${{ flex: "0 1 160px" }} placeholder="Label (e.g. Home)" value=${label} onInput=${(e) => setLabel(e.target.value)} />
+      <input className="form-input mono" style=${{ flex: "1 1 200px" }} placeholder="Command (e.g. G28)" value=${command} onInput=${(e) => setCommand(e.target.value)} list=${"hist-" + cfg.name} />
+      <datalist id=${"hist-" + cfg.name}>${history.map((h) => html`<option key=${h} value=${h} />`)}</datalist>
+      <label className="flex items-center gap-2 text-sm text-muted"><input type="checkbox" checked=${expectReply} onChange=${(e) => setExpectReply(e.target.checked)} /> Wait for reply</label>
+      <button className="btn btn-primary" disabled=${saving || !command.trim()}
+        onClick=${() => { persist([...list, { label: label.trim() || command.trim(), command: command.trim(), expectReply }]); setLabel(""); setCommand(""); }}>
+        <${LuPlus} size=${13} /> Add
+      </button>
+    </div>
+    ${history.length > 0 && html`<div className="text-sm text-muted" style=${{ marginTop: "8px" }}>Recent commands from the monitor are suggested as you type.</div>`}
+  </div>`;
+}
+
+// ── 3. Live chart ──────────────────────────────────────────────────────────
+// Validated categorical palette (dark steps), fixed order, max 4 series.
+const SERIES_COLORS = ["#3987e5", "#d95926", "#199e70", "#c98500"];
+const NUM_PAIR = /([A-Za-z_][\w.\-]*)\s*[:=]\s*(-?\d+(?:\.\d+)?)/g;
+const BARE = /^\s*-?\d+(?:\.\d+)?(?:\s*[,;\s]\s*-?\d+(?:\.\d+)?)*\s*$/;
+
+// Numbers in a line: "temp=24.5 hum:60" -> {temp, hum}; "1.2, 3.4" -> {v1, v2}.
+export function parseNumbers(line) {
+  const out = {};
+  let m;
+  NUM_PAIR.lastIndex = 0;
+  while ((m = NUM_PAIR.exec(line))) out[m[1]] = parseFloat(m[2]);
+  if (Object.keys(out).length) return out;
+  if (BARE.test(line)) line.trim().split(/[\s,;]+/).forEach((n, i) => { out["v" + (i + 1)] = parseFloat(n); });
+  return out;
+}
+
+function niceTicks(min, max, count = 4) {
+  if (min === max) { min -= 1; max += 1; }
+  const step0 = (max - min) / count;
+  const mag = Math.pow(10, Math.floor(Math.log10(step0)));
+  const step = [1, 2, 2.5, 5, 10].map((k) => k * mag).find((s) => s >= step0) || step0;
+  const lo = Math.floor(min / step) * step;
+  const hi = Math.ceil(max / step) * step;
+  const ticks = [];
+  for (let v = lo; v <= hi + step / 2; v += step) ticks.push(Math.round(v * 1e6) / 1e6);
+  return ticks;
+}
+
+function Chart({ cfg }) {
+  const version = useSerialStream();
+  const [picked, setPicked] = useState(null);
+  const [windowSec, setWindowSec] = useState(120);
+  const [hover, setHover] = useState(null);
+  const [W, setW] = useState(640);
+  const boxRef = useRef(null);
+  const [, refresh] = useState(0);
+  useEffect(() => { backfill(cfg.name).then(() => refresh((n) => n + 1)); }, [cfg.name]);
+  useEffect(() => {
+    const el = boxRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setW(Math.max(280, el.clientWidth)));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const since = Date.now() - windowSec * 1000;
+  const points = useMemo(() => (buffers.get(cfg.name) || [])
+    .filter((l) => l.dir === "rx" && l.ts >= since)
+    .map((l) => ({ ts: l.ts, v: parseNumbers(l.line) }))
+    .filter((p) => Object.keys(p.v).length), [version, cfg.name, windowSec]);
+  const allSeries = useMemo(() => {
+    const seen = [];
+    points.forEach((p) => Object.keys(p.v).forEach((k) => { if (!seen.includes(k)) seen.push(k); }));
+    return seen;
+  }, [points]);
+  const series = (picked || allSeries).filter((s) => allSeries.includes(s)).slice(0, 4);
+
+  const H = 260, padL = 44, padR = 12, padT = 10, padB = 24;
+  const plotW = W - padL - padR, plotH = H - padT - padB;
+  const vals = points.flatMap((p) => series.map((s) => p.v[s]).filter((x) => typeof x === "number"));
+  const ticks = vals.length ? niceTicks(Math.min(...vals), Math.max(...vals)) : [0, 1];
+  const yMin = ticks[0], yMax = ticks[ticks.length - 1];
+  const t0 = since, t1 = Date.now();
+  const x = (ts) => padL + ((ts - t0) / (t1 - t0)) * plotW;
+  const y = (v) => padT + plotH - ((v - yMin) / (yMax - yMin || 1)) * plotH;
+
+  function onMove(e) {
+    const r = e.currentTarget.getBoundingClientRect();
+    const ts = t0 + ((e.clientX - r.left - padL) / plotW) * (t1 - t0);
+    let best = null;
+    for (const p of points) if (!best || Math.abs(p.ts - ts) < Math.abs(best.ts - ts)) best = p;
+    setHover(best);
+  }
+
+  return html`<div>
+    <div className="flex items-center justify-between mb-3" style=${{ gap: "10px", flexWrap: "wrap" }}>
+      <div className="card-subtitle" style=${{ margin: 0 }}>Numbers in received lines, e.g. <span className="mono">temp=24.5</span>, <span className="mono">T:210 B:60</span> or <span className="mono">1.2, 3.4</span>.</div>
+      <select className="form-select" style=${{ width: "auto", height: "30px" }} value=${windowSec} onChange=${(e) => setWindowSec(Number(e.target.value))}>
+        <option value="30">Last 30 s</option><option value="120">Last 2 min</option><option value="600">Last 10 min</option><option value="3600">Last hour</option>
+      </select>
+    </div>
+    ${allSeries.length > 0 && html`<div className="flex gap-2 mb-3" style=${{ flexWrap: "wrap" }}>
+      ${allSeries.map((s) => {
+        const on = series.includes(s);
+        const idx = series.indexOf(s);
+        return html`<button key=${s} className=${`series-pick${on ? " on" : ""}`}
+          onClick=${() => {
+            const cur = series.slice();
+            const next = on ? cur.filter((x) => x !== s) : cur.length < 4 ? [...cur, s] : cur;
+            setPicked(next);
+          }} title=${on ? "Hide" : series.length >= 4 ? "Up to 4 series at once" : "Show"}>
+          <i style=${{ background: on ? SERIES_COLORS[idx] : "var(--border-strong)" }}></i>${s}
+        </button>`;
+      })}
+    </div>`}
+    ${series.length >= 2 && html`<div className="chart-legend">${series.map((s, i) => html`<span key=${s}><i style=${{ background: SERIES_COLORS[i] }}></i>${s}</span>`)}</div>`}
+    <div ref=${boxRef} style=${{ position: "relative" }}>
+      ${points.length === 0
+        ? html`<div className="ov-empty" style=${{ height: H + "px", display: "grid", placeItems: "center", border: "1px dashed var(--border)", borderRadius: "8px" }}>
+            No numbers received in this window yet. Have the board print values like <span className="mono">temp=24.5</span>.
+          </div>`
+        : html`<svg width=${W} height=${H} style=${{ display: "block" }} onMouseMove=${onMove} onMouseLeave=${() => setHover(null)}
+            role="img" aria-label=${"Live values for " + series.join(", ")}>
+            ${ticks.map((t) => html`<g key=${t}>
+              <line x1=${padL} x2=${W - padR} y1=${y(t)} y2=${y(t)} stroke="var(--border)" />
+              <text x=${padL - 6} y=${y(t) + 4} textAnchor="end" fill="var(--text-muted)" fontSize="10.5">${t}</text>
+            </g>`)}
+            <text x=${padL} y=${H - 6} fill="var(--text-muted)" fontSize="10.5">${new Date(t0).toLocaleTimeString()}</text>
+            <text x=${W - padR} y=${H - 6} textAnchor="end" fill="var(--text-muted)" fontSize="10.5">now</text>
+            ${series.map((s, i) => {
+              const pts = points.filter((p) => typeof p.v[s] === "number");
+              if (!pts.length) return null;
+              const d = "M" + pts.map((p) => x(p.ts).toFixed(1) + " " + y(p.v[s]).toFixed(1)).join(" L");
+              const last = pts[pts.length - 1];
+              return html`<g key=${s}>
+                <path d=${d} fill="none" stroke=${SERIES_COLORS[i]} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
+                <circle cx=${x(last.ts)} cy=${y(last.v[s])} r="4" fill=${SERIES_COLORS[i]} stroke="var(--bg-card)" strokeWidth="2" />
+              </g>`;
+            })}
+            ${hover && html`<line x1=${x(hover.ts)} x2=${x(hover.ts)} y1=${padT} y2=${padT + plotH} stroke="var(--text-muted)" strokeDasharray="3 3" />`}
+            ${hover && series.map((s, i) => typeof hover.v[s] === "number" && html`<circle key=${s} cx=${x(hover.ts)} cy=${y(hover.v[s])} r="4" fill=${SERIES_COLORS[i]} stroke="var(--bg-card)" strokeWidth="2" />`)}
+          </svg>`}
+      ${hover && html`<div className="ov-tip" style=${{ left: Math.min(W - 80, Math.max(80, x(hover.ts))) + "px", top: "18px", transform: "translate(-50%, 0)" }}>
+        <div className="muted">${fmtTime(hover.ts)}</div>
+        ${series.map((s, i) => typeof hover.v[s] === "number" && html`<div key=${s}><i style=${{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", background: SERIES_COLORS[i], marginRight: "6px" }}></i>${s} <b>${hover.v[s]}</b></div>`)}
+      </div>`}
+    </div>
+  </div>`;
+}
+
+// ── 4. Health ──────────────────────────────────────────────────────────────
+function Health({ cfg, live }) {
+  const s = (live && live.stats) || {};
+  const tile = (label, value, sub) => html`<div className="ov-kpi" key=${label}>
+    <div className="ov-kpi-label">${label}</div>
+    <div className="ov-kpi-value">${value}</div>
+    <div className="ov-kpi-sub">${sub || " "}</div>
+  </div>`;
+  return html`<div>
+    <div className="serial-stats mb-4">
+      ${tile("Status", live ? live.status : "—", live && live.path ? live.path : "")}
+      ${tile("Uptime", live && live.connected ? formatDuration(Math.round((s.uptimeMs || 0) / 1000)) : "—", live && live.connectedAt ? "since " + new Date(live.connectedAt).toLocaleTimeString() : "")}
+      ${tile("Reconnects", s.reconnects ?? 0, (s.connects ?? 0) + " connects total")}
+      ${tile("Last seen", s.lastRx ? timeAgo(s.lastRx) : "never", "last line received")}
+      ${tile("Received", formatBytes(s.bytesIn || 0), (s.linesIn || 0) + " lines")}
+      ${tile("Sent", formatBytes(s.bytesOut || 0), (s.linesOut || 0) + " lines")}
+      ${tile("Avg reply", s.avgReplyMs != null ? s.avgReplyMs + " ms" : "—", (s.replies || 0) + " replies")}
+      ${tile("Timeouts", s.timeouts || 0, "no reply within " + cfg.timeout + " ms")}
+    </div>
+    <div className="text-sm text-muted">Counters reset when the app restarts. ${live && live.error && live.status !== "connected" ? html`<span style=${{ color: "var(--warning)" }}>Last error: ${live.error}</span>` : null}</div>
+  </div>`;
+}
+
+// ── 7. Rules ───────────────────────────────────────────────────────────────
+const EMPTY_RULE = { when: "contains", pattern: "", action: "webhook", url: "", target: "", command: "", cooldownMs: 2000, enabled: true };
+
+function Rules({ cfg, live, devices, onSaved }) {
+  const { toast } = useApp();
+  const [rules, setRules] = useState(cfg.rules || []);
+  const [draft, setDraft] = useState(null); // { index | null, ...rule }
+  const [saving, setSaving] = useState(false);
+  useEffect(() => setRules(cfg.rules || []), [cfg.name, JSON.stringify(cfg.rules || [])]);
+  const stats = (live && live.rules) || {};
+
+  async function persist(next) {
+    setSaving(true);
+    try {
+      await saveDevice(cfg, { rules: next });
+      setRules(next);
+      setDraft(null);
+      onSaved();
+      toast("Rules saved", "success");
+    } catch (err) { toast(err.message, "error"); }
+    setSaving(false);
+  }
+  const setD = (patch) => setDraft((d) => ({ ...d, ...patch }));
+  const describe = (r) => (r.action === "webhook" ? "POST " + r.url : "send \"" + r.command + "\" to " + r.target);
+
+  return html`<div>
+    <div className="card-subtitle mb-3">When a line from <span className="mono">${cfg.name}</span> matches, call a webhook or send a command to a device. Runs inside your app, even with the dashboard closed.</div>
+    ${rules.length > 0 && html`<div style=${{ border: "1px solid var(--border)", borderRadius: "8px", marginBottom: "14px" }}>
+      ${rules.map((r, i) => {
+        const st = stats[r.id];
+        return html`<div key=${r.id} className="ov-list-row" style=${{ height: "auto", padding: "10px 16px", alignItems: "flex-start" }}>
+          <label className="form-toggle" style=${{ marginTop: "2px" }}>
+            <input type="checkbox" checked=${r.enabled !== false} disabled=${saving}
+              onChange=${(e) => persist(rules.map((x, j) => (j === i ? { ...x, enabled: e.target.checked } : x)))} />
+            <span className="slider"></span>
+          </label>
+          <div style=${{ flex: 1, minWidth: 0 }}>
+            <div className="text-sm">When line <b>${r.when}</b> <span className="mono">${r.pattern}</span> → ${describe(r)}</div>
+            <div className="text-sm text-muted" style=${{ marginTop: "2px" }}>
+              ${st ? "Fired " + st.fired + "× · last " + timeAgo(st.lastFired) : "Not fired yet"} · cooldown ${r.cooldownMs} ms
+              ${st && st.lastError ? html` · <span style=${{ color: "var(--error)" }}>${st.lastError}</span>` : null}
+            </div>
+          </div>
+          <button className="btn btn-ghost btn-sm btn-icon" title="Edit" onClick=${() => setDraft({ index: i, ...r })}><${LuPencil} size=${13} /></button>
+          <button className="btn btn-ghost btn-sm btn-icon" title="Delete" disabled=${saving} onClick=${() => persist(rules.filter((_, j) => j !== i))}><${LuTrash2} size=${13} /></button>
+        </div>`;
+      })}
+    </div>`}
+
+    ${draft
+      ? html`<div style=${{ border: "1px solid var(--border-strong)", borderRadius: "8px", padding: "14px" }}>
+          <div className="grid-2">
+            <div className="form-group">
+              <label className="form-label">When a received line</label>
+              <select className="form-select" value=${draft.when} onChange=${(e) => setD({ when: e.target.value })}>
+                <option value="contains">contains</option><option value="startsWith">starts with</option>
+                <option value="equals">equals</option><option value="regex">matches regex</option>
+              </select>
+            </div>
+            <div className="form-group">
+              <label className="form-label">Text</label>
+              <input className="form-input mono" value=${draft.pattern} placeholder="ALARM" onInput=${(e) => setD({ pattern: e.target.value })} />
+            </div>
+            <div className="form-group">
+              <label className="form-label">Then</label>
+              <select className="form-select" value=${draft.action} onChange=${(e) => setD({ action: e.target.value })}>
+                <option value="webhook">Call a webhook (POST JSON)</option>
+                <option value="send">Send a command to a device</option>
+              </select>
+            </div>
+            <div className="form-group">
+              <label className="form-label">Cooldown (ms)</label>
+              <input className="form-input" type="number" min="0" value=${draft.cooldownMs} onInput=${(e) => setD({ cooldownMs: Number(e.target.value) })} />
+            </div>
+          </div>
+          ${draft.action === "webhook"
+            ? html`<div className="form-group">
+                <label className="form-label">Webhook URL</label>
+                <input className="form-input mono" value=${draft.url} placeholder="https://example.com/hooks/serial" onInput=${(e) => setD({ url: e.target.value })} />
+                <div className="text-sm text-muted" style=${{ marginTop: "6px" }}>Body: <span className="mono">{ "device", "line", "rule", "ts" }</span></div>
+              </div>`
+            : html`<div className="grid-2">
+                <div className="form-group">
+                  <label className="form-label">Device</label>
+                  <select className="form-select" value=${draft.target} onChange=${(e) => setD({ target: e.target.value })}>
+                    <option value="">Choose…</option>
+                    ${devices.map((d) => html`<option key=${d} value=${d}>${d}</option>`)}
+                  </select>
+                </div>
+                <div className="form-group">
+                  <label className="form-label">Command</label>
+                  <input className="form-input mono" value=${draft.command} placeholder="LED:ON" onInput=${(e) => setD({ command: e.target.value })} />
+                </div>
+              </div>`}
+          <div className="flex gap-2">
+            <button className="btn btn-primary" disabled=${saving} onClick=${() => {
+              const { index, ...rule } = draft;
+              persist(index == null ? [...rules, rule] : rules.map((x, j) => (j === index ? rule : x)));
+            }}>${saving ? html`<span className="spinner" />` : null} Save rule</button>
+            <button className="btn btn-ghost" onClick=${() => setDraft(null)}>Cancel</button>
+          </div>
+        </div>`
+      : html`<button className="btn btn-secondary" onClick=${() => setDraft({ index: null, ...EMPTY_RULE, target: cfg.name })}><${LuPlus} size=${13} /> Add rule</button>`}
+  </div>`;
+}
+
+// ── 6. Use it from your app ────────────────────────────────────────────────
+function Use({ cfg }) {
+  const { toast } = useApp();
+  const o = window.location.origin;
+  const blocks = [
+    { title: "Send a command and get the reply", code: "curl -X POST " + o + "/api/serial/devices/" + cfg.name + "/send \\\n  -H 'x-api-key: <your-api-key>' -H 'Content-Type: application/json' \\\n  -d '{\"command\": \"" + (cfg.idCommand || "ID?") + "\"}'" },
+    { title: "Live lines in a browser or Node (Server-Sent Events)", code: "const res = await fetch('" + o + "/api/serial/devices/" + cfg.name + "/stream', {\n  headers: { 'x-api-key': '<your-api-key>' },\n});\nconst reader = res.body.pipeThrough(new TextDecoderStream()).getReader();\nfor (;;) {\n  const { value, done } = await reader.read();\n  if (done) break;\n  for (const msg of value.split('\\n\\n')) {\n    if (msg.startsWith('data: ')) console.log(JSON.parse(msg.slice(6))); // { device, dir, line, ts }\n  }\n}" },
+    { title: "Inside your server code", code: "import { getDevice, onSerialLine } from './src/serial/devices.js';\n\nconst reply = await getDevice('" + cfg.name + "').send('" + (cfg.idCommand || "ID?") + "');\nonSerialLine((e) => {\n  if (e.device === '" + cfg.name + "' && e.dir === 'rx') console.log(e.line);\n});" },
+  ];
+  return html`<div style=${{ display: "flex", flexDirection: "column", gap: "14px" }}>
+    ${blocks.map((b) => html`<div key=${b.title}>
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm" style=${{ fontWeight: 600 }}>${b.title}</span>
+        <button className="btn btn-ghost btn-sm" onClick=${() => copyToClipboard(b.code).then(() => toast("Copied", "success"))}><${LuCopy} size=${13} /> Copy</button>
+      </div>
+      <pre className="code-block" style=${{ whiteSpace: "pre-wrap" }}>${b.code}</pre>
+    </div>`)}
+    <div className="text-sm text-muted">All routes need the <span className="mono">x-api-key</span> header (Security → API keys). The stream also exists for every device at <span className="mono">/api/serial/stream</span>.</div>
+  </div>`;
+}
+
+// ── Workspace ──────────────────────────────────────────────────────────────
+const TABS = [
+  { id: "monitor", label: "Monitor" },
+  { id: "commands", label: "Commands" },
+  { id: "chart", label: "Chart" },
+  { id: "health", label: "Health" },
+  { id: "rules", label: "Rules" },
+  { id: "use", label: "Use in app" },
+];
+
+export function SerialWorkspace({ cfg, live, devices, statusBadge, matchText, onEdit, onDelete, onSaved }) {
+  const [tab, setTab] = useState(() => { try { return localStorage.getItem("_4bnode_serial_tab") || "monitor"; } catch { return "monitor"; } });
+  useEffect(() => { try { localStorage.setItem("_4bnode_serial_tab", tab); } catch {} }, [tab]);
+
+  return html`<div className="card" style=${{ padding: 0 }}>
+    <div style=${{ padding: "16px 18px 0" }}>
+      <div className="flex items-center justify-between" style=${{ gap: "10px" }}>
+        <div style=${{ minWidth: 0 }}>
+          <div className="flex items-center gap-2">
+            <span className="mono" style=${{ fontWeight: 600, fontSize: "15px" }}>${cfg.name}</span>
+            <span className=${`badge ${statusBadge.cls}`}>${statusBadge.label}</span>
+          </div>
+          <div className="text-sm text-muted" style=${{ marginTop: "3px" }}>
+            ${live && live.path ? html`on <span className="mono">${live.path}</span> · ` : null}found by ${matchText} · ${cfg.baudRate} baud · ID <span className="mono">${cfg.idCommand}</span>
+          </div>
+          ${live && live.error && live.status !== "connected" && html`<div className="text-sm" style=${{ color: "var(--warning)", marginTop: "3px" }}>${live.error}</div>`}
+        </div>
+        <div className="flex gap-2">
+          <button className="btn btn-ghost btn-sm" onClick=${onEdit}><${LuPencil} size=${13} /> Edit</button>
+          <button className="btn btn-danger btn-sm btn-icon" onClick=${onDelete} title="Remove device"><${LuTrash2} size=${14} /></button>
+        </div>
+      </div>
+      <div className="api-tester-tabs" style=${{ marginTop: "12px", overflowX: "auto" }}>
+        ${TABS.map((t) => html`<button key=${t.id} className=${`api-tester-tab${tab === t.id ? " active" : ""}`} onClick=${() => setTab(t.id)}>
+          ${t.label}${t.id === "rules" && (cfg.rules || []).length ? " (" + cfg.rules.length + ")" : ""}${t.id === "commands" && (cfg.commands || []).length ? " (" + cfg.commands.length + ")" : ""}
+        </button>`)}
+      </div>
+    </div>
+    <div style=${{ padding: "16px 18px 18px" }}>
+      ${tab === "monitor" && html`<${Monitor} cfg=${cfg} live=${live} />`}
+      ${tab === "commands" && html`<${Commands} cfg=${cfg} live=${live} onSaved=${onSaved} />`}
+      ${tab === "chart" && html`<${Chart} cfg=${cfg} />`}
+      ${tab === "health" && html`<${Health} cfg=${cfg} live=${live} />`}
+      ${tab === "rules" && html`<${Rules} cfg=${cfg} live=${live} devices=${devices} onSaved=${onSaved} />`}
+      ${tab === "use" && html`<${Use} cfg=${cfg} />`}
+    </div>
+  </div>`;
+}