feat: Demo mode for filming two robots conversing

App/Demo toggle in the header. Demo mode shows only the live detection (big
readout + scope + running conversation) and the alphabet — no compose box, so
nothing reveals a message before it's heard.

Hidden 'Demo setup' (gear) holds 'if you hear X, answer Y' rules + a per-rule
'Send' to kick one off. When this robot's mic decodes a finished message that
matches a rule, it taps the reply on its own antennas. A self-echo guard
(ctx.transmit sets a window covering the send + idle-finalize tail) stops a
robot replying to its own taps. Matching is normalized so 'U OK?'/'U OK'/'UOK'
are equivalent. Defaults: U OK->Y, SOS->WTF. Added lib/rules.js (+tests) and
ctx.transmit; only the active page holds the mic.

lib/rules.js

@@ -0,0 +1,31 @@
+/**
+ * Demo-mode auto-reply rules: "if you hear X, answer Y".
+ *
+ * Matching is normalized — uppercased, with spaces and punctuation stripped —
+ * so a rule typed as "U OK?" still fires on a decoded "U OK" or "UOK". Antenna
+ * Morse won't reliably carry punctuation, so we never require an exact match.
+ *
+ * Pure module (no DOM/audio) so the matching logic is unit-tested directly.
+ */
+
+export function normalizePhrase(s) {
+    return String(s).toUpperCase().replace(/[^A-Z0-9]/g, "");
+}
+
+/** Default conversation for the two-robot demo (short = fewer antenna taps). */
+export const DEFAULT_RULES = [
+    { input: "U OK", output: "Y" },
+    { input: "SOS", output: "WTF" },
+];
+
+/**
+ * Find the first rule whose (normalized) input equals the (normalized)
+ * decoded text. Returns the rule or null.
+ */
+export function matchRule(text, rules) {
+    const n = normalizePhrase(text);
+    if (!n) return null;
+    return (rules || []).find(
+        (r) => r && r.input && r.output && normalizePhrase(r.input) === n,
+    ) || null;
+}

lib/version.js

@@ -1,3 +1,3 @@
 // Deployment version label, shown in Settings so you can verify which build
 // is actually loaded after a push. Format: "YYYY-MM-DD rN", bumped on push.
-export const APP_VERSION = "2026-06-01 r5 compact layout";
+export const APP_VERSION = "2026-06-02 r6 demo mode";

main.js

@@ -18,6 +18,8 @@ import { connectToHost } from "https://cdn.jsdelivr.net/npm/@pollen-robotics/rea
 import { safelyReturnToPose } from "./lib/animation-helpers.js";
 
 import { makeTiming, SPEED_PRESETS } from "./lib/timing.js";
+import { textToSchedule } from "./lib/wire.js";
+import { DEFAULT_RULES } from "./lib/rules.js";
 import { Synth } from "./lib/synth.js";
 import { RobotTapper, DEFAULT_TAP_PROFILE } from "./lib/robot-tapper.js";
 import { Mic } from "./lib/mic.js";
@@ -25,6 +27,7 @@ import { el, clear } from "./views/dom.js";
 import { createCompose } from "./views/compose.js";
 import { createListen } from "./views/listen.js";
 import { createLearn } from "./views/learn.js";
+import { createDemo } from "./views/demo.js";
 import { createSettings } from "./views/settings.js";
 
 const params = new URLSearchParams(window.location.search);
@@ -57,17 +60,24 @@ async function bootEmbed() {
 
     // ─── Shared, mutable config ───────────────────────────────────────
     const config = {
+        mode: "app", // "app" | "demo"
         speed: "normal",
         unitMs: SPEED_PRESETS.normal,
         emitter: reachy ? "robot" : "device",
         beepFreq: 2200,
         detector: { highpassHz: 2000, thresholdFactor: 4.0 },
         tap: { ...DEFAULT_TAP_PROFILE },
+        demo: { rules: DEFAULT_RULES.map((r) => ({ ...r })) },
     };
 
     const synth = new Synth({ freq: config.beepFreq });
     let tapper = reachy ? new RobotTapper(reachy, config.tap) : null;
 
+    // Self-echo guard: while (and just after) THIS robot transmits, its own mic
+    // hears the taps — Demo mode must not treat that as an incoming message.
+    let selfEchoUntil = 0;
+    let activeCancel = null;
+
     const ctx = {
         reachy,
         state: config,
@@ -87,8 +97,40 @@ async function bootEmbed() {
             detector: { thresholdFactor: config.detector.thresholdFactor },
             ...cbs,
         }),
+        selfEchoActive: () => performance.now() < selfEchoUntil,
+        isTransmitting: () => !!activeCancel,
+        // Transmit `text` on the robot antennas (default) or device speaker.
+        // Sets a self-echo window covering the whole send plus the idle-finalize
+        // tail, so Demo mode ignores this robot's own taps.
+        transmit: async (text, { onProgress, via } = {}) => {
+            const t = makeTiming(config.unitMs);
+            const { onsets, durationMs } = textToSchedule(text, t);
+            if (!onsets.length) return;
+            const useRobot = (via ?? config.emitter) === "robot" && !!reachy;
+            selfEchoUntil = performance.now() + durationMs + t.wordGapMs * 2.5 + 3000;
+            try {
+                if (useRobot) {
+                    const controller = new AbortController();
+                    activeCancel = () => controller.abort();
+                    ctxRef.tapper().p = { ...DEFAULT_TAP_PROFILE, ...config.tap };
+                    await ctxRef.tapper().tap(onsets, { onTap: onProgress, signal: controller.signal });
+                } else {
+                    await new Promise((resolve) => {
+                        const cancel = synth.play(onsets, {
+                            onBlip: onProgress, onDone: resolve, clickMs: t.clickMs,
+                        });
+                        activeCancel = () => { cancel(); resolve(); };
+                    });
+                }
+            } finally {
+                activeCancel = null;
+                // Extend past the finalize that fires after our last tap.
+                selfEchoUntil = Math.max(selfEchoUntil, performance.now() + t.wordGapMs * 2.5 + 1500);
+            }
+        },
         toast,
     };
+    const ctxRef = ctx;
 
     // ─── Views (single scrolling page: Compose, then always-on Listen,
     //     then the Learn chart — scroll down to look anything up while a
@@ -97,41 +139,68 @@ async function bootEmbed() {
         compose: createCompose(ctx),
         listen: createListen(ctx),
         learn: createLearn(ctx),
+        demo: createDemo(ctx),
     };
 
     const app = document.getElementById("app");
     clear(app);
 
+    // Header: brand + App/Demo mode toggle + settings.
+    const modeBtns = {};
+    const modeSeg = el("div.mode-seg");
+    [["app", "App"], ["demo", "Demo"]].forEach(([v, label]) => {
+        const b = el("button.mode-btn", { onclick: () => setMode(v) }, label);
+        modeBtns[v] = b;
+        modeSeg.append(b);
+    });
     const header = el("header.appbar", {}, [
-        el("div.brand", {}, [el("span.brand-logo", {}, "📡"), el("span", {}, "Morse Code")]),
+        el("div.brand", {}, [el("span.brand-logo", {}, "📡"), el("span.brand-name", {}, "Morse Code")]),
+        modeSeg,
         el("button.icon-btn", { title: "Settings", onclick: openSettings }, "⚙️"),
     ]);
 
-    const scroller = el("main.scroller", {}, [
+    // Two pages share one host; only the active page's view holds the mic.
+    const appScroller = el("main.scroller", {}, [
         views.compose.node,
         el("hr.divider"),
         views.listen.node,
         el("hr.divider"),
         views.learn.node,
     ]);
+    const demoScroller = el("main.scroller", {}, [views.demo.node]);
+    const pageHost = el("div.page-host");
 
-    app.append(header, scroller);
+    app.append(header, pageHost);
     app.hidden = false;
     views.compose.onShow?.();
-    views.listen.onShow?.();
     views.learn.onShow?.();
-    // The Listen panel is always present and listening — auto-start the mic so
-    // you can send from the robot and watch it decode live. Needs a user
-    // gesture in some browsers; on failure the panel shows a tap-to-start button.
-    views.listen.autoStart?.();
+
+    function setMode(mode) {
+        config.mode = mode;
+        Object.entries(modeBtns).forEach(([k, b]) => b.classList.toggle("active", k === mode));
+        views.listen.onHide?.();
+        views.demo.onHide?.();
+        clear(pageHost);
+        if (mode === "demo") {
+            pageHost.append(demoScroller);
+            views.demo.onShow?.();
+        } else {
+            pageHost.append(appScroller);
+            // Always-on Listen: auto-start the mic (falls back to tap-to-start).
+            views.listen.autoStart?.();
+        }
+    }
+    ctx.setMode = setMode;
+    setMode("app");
 
     // ─── Settings modal ─────────────────────────────────────────────
     function openSettings() {
-        const sheet = createSettings(ctx);
         const overlay = el("div.overlay", { onclick: (e) => { if (e.target === overlay) close(); } });
-        const close = () => overlay.remove();
+        const close = () => { overlay.remove(); ctx._closeSettings = null; };
+        ctx._closeSettings = close;
+        const sheet = createSettings(ctx);
         const panel = el("div.sheet", {}, [
-            el("div.sheet-head", {}, [el("h2", {}, "Settings"),
+            el("div.sheet-head", {}, [el("h2", {}, config.mode === "demo" ? "Demo setup" : "Settings"),
                 el("button.icon-btn", { onclick: close }, "✕")]),
             sheet.node,
         ]);
@@ -144,6 +213,7 @@ async function bootEmbed() {
         try { tapper?.stop(); } catch { /* */ }
         try { synth.stop(); } catch { /* */ }
         try { views.listen.onHide?.(); } catch { /* */ }
+        try { views.demo.onHide?.(); } catch { /* */ }
         if (reachy) return safelyReturnToPose(reachy);
     });
 

style.css

@@ -80,6 +80,16 @@ html, body {
     cursor: pointer;
 }
 .icon-btn:active { transform: scale(0.95); }
+.icon-btn.tiny { width: 32px; height: 32px; font-size: 14px; }
+
+/* App / Demo mode toggle in the header */
+.mode-seg { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
+.mode-btn {
+    appearance: none; background: transparent; border: 0; color: var(--muted);
+    padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer;
+}
+.mode-btn.active { background: var(--panel-2); color: var(--text); box-shadow: var(--shadow); }
+.page-host { flex: 1; display: flex; flex-direction: column; min-height: 0; }
 
 /* ─── Scrolling single page ───────────────────────────────── */
 .scroller { flex: 1; padding: 12px 14px 40px; display: flex; flex-direction: column; gap: 12px; }
@@ -288,6 +298,35 @@ html, body {
 }
 .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
 
+/* ─── Demo mode ───────────────────────────────────────────── */
+.scope-big { height: 110px; }
+.demo-decoded {
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 40px;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-align: center;
+    min-height: 50px;
+    word-break: break-word;
+    color: var(--accent);
+}
+.demo-status { text-align: center; min-height: 16px; }
+.btn.small { padding: 8px 12px; font-size: 13px; border-radius: 10px; flex: 0 0 auto; }
+
+.demo-setup { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
+.tiny { font-size: 12px; }
+.rule-list { display: flex; flex-direction: column; gap: 8px; }
+.rule-row { display: flex; align-items: center; gap: 6px; }
+.rule-input {
+    flex: 1; min-width: 0; padding: 9px 10px; font-size: 14px; font-family: inherit;
+    color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; outline: none;
+}
+.rule-input:focus { border-color: var(--accent); }
+.rule-arrow { color: var(--muted); font-weight: 800; }
+
+@media (max-width: 420px) {
+    .brand-name { display: none; }
+}
 @media (min-width: 560px) {
     .tab-label { font-size: 13px; }
 }

tests/unit/rules.test.js

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { normalizePhrase, matchRule, DEFAULT_RULES } from "../../lib/rules.js";
+
+describe("normalizePhrase", () => {
+    it("uppercases and strips spaces + punctuation", () => {
+        expect(normalizePhrase("U OK?")).toBe("UOK");
+        expect(normalizePhrase("u ok")).toBe("UOK");
+        expect(normalizePhrase("S.O.S")).toBe("SOS");
+    });
+});
+
+describe("matchRule", () => {
+    it("fires on punctuation/spacing variants of the input", () => {
+        expect(matchRule("U OK", DEFAULT_RULES)?.output).toBe("Y");
+        expect(matchRule("UOK", DEFAULT_RULES)?.output).toBe("Y");
+        expect(matchRule("SOS", DEFAULT_RULES)?.output).toBe("WTF");
+    });
+
+    it("returns null for no match or empty text", () => {
+        expect(matchRule("HELLO", DEFAULT_RULES)).toBeNull();
+        expect(matchRule("", DEFAULT_RULES)).toBeNull();
+    });
+
+    it("ignores rules missing input or output", () => {
+        const rules = [{ input: "A", output: "" }, { input: "", output: "B" }];
+        expect(matchRule("A", rules)).toBeNull();
+    });
+});

tests/unit/views.test.js

@@ -5,16 +5,20 @@ import { createCompose } from "../../views/compose.js";
 import { createLearn } from "../../views/learn.js";
 import { createSettings } from "../../views/settings.js";
 import { createListen } from "../../views/listen.js";
+import { createDemo } from "../../views/demo.js";
 import { DEFAULT_TAP_PROFILE } from "../../lib/robot-tapper.js";
+import { DEFAULT_RULES } from "../../lib/rules.js";
 
 function makeCtx(overrides = {}) {
     const state = {
+        mode: "app",
         speed: "normal",
         unitMs: SPEED_PRESETS.normal,
         emitter: "device",
         beepFreq: 2200,
         detector: { highpassHz: 2000, thresholdFactor: 4.0 },
         tap: { ...DEFAULT_TAP_PROFILE },
+        demo: { rules: DEFAULT_RULES.map((r) => ({ ...r })) },
     };
     const synth = { play: vi.fn(), stop: vi.fn(), freq: 2200 };
     return {
@@ -25,6 +29,9 @@ function makeCtx(overrides = {}) {
         synth: () => synth,
         tapper: () => null,
         makeMic: () => ({ start: vi.fn(), stop: vi.fn(), now: () => 0 }),
+        selfEchoActive: () => false,
+        isTransmitting: () => false,
+        transmit: vi.fn(() => Promise.resolve()),
         toast: vi.fn(),
         _synth: synth,
         ...overrides,
@@ -94,3 +101,31 @@ describe("Listen view", () => {
         expect(node.querySelector(".btn.primary").textContent).toMatch(/Start listening/);
     });
 });
+
+describe("Demo view", () => {
+    it("renders the big live readout and embeds the alphabet chart", () => {
+        const ctx = makeCtx();
+        const { node } = createDemo(ctx);
+        expect(node.querySelector(".demo-decoded")).toBeTruthy();
+        expect(node.querySelector(".scope-big")).toBeTruthy();
+        // alphabet chart embedded below
+        expect(node.querySelectorAll(".chart-cell").length).toBe(26 + 10);
+    });
+});
+
+describe("Settings — demo mode", () => {
+    it("shows editable conversation rules with the defaults", () => {
+        const ctx = makeCtx({ state: { ...makeCtx().state, mode: "demo" } });
+        const { node } = createSettings(ctx);
+        const rows = node.querySelectorAll(".rule-row");
+        expect(rows.length).toBe(DEFAULT_RULES.length);
+        // first rule input reflects the default "U OK?"
+        expect(node.querySelector(".rule-input").value).toBe(DEFAULT_RULES[0].input);
+    });
+
+    it("omits the rules editor in app mode", () => {
+        const ctx = makeCtx();
+        const { node } = createSettings(ctx);
+        expect(node.querySelector(".rule-row")).toBeNull();
+    });
+});

views/demo.js

@@ -0,0 +1,135 @@
+/**
+ * Demo mode — for filming two robots "talking".
+ *
+ * The screen shows ONLY the live detection (a big decoded readout + scope +
+ * a running conversation) and the alphabet chart below. There is no compose
+ * box and nothing reveals a message before it is heard — the magic is that the
+ * robots appear to converse on their own.
+ *
+ * Hidden in Demo setup (the gear) are "if you hear X, answer Y" rules. When
+ * this robot's mic decodes a finished message that matches a rule, it waits a
+ * beat and taps out the reply on its own antennas. A self-echo guard
+ * (ctx.selfEchoActive) stops a robot from replying to its own taps.
+ *
+ * Scripted demo: robot A is given "U OK?" (Send from setup) → robot B hears it
+ * and replies "Y". Then you finger-tap "SOS" near both → both reply "WTF".
+ */
+import { el, clear } from "./dom.js";
+import { decodeOnsets } from "../lib/wire.js";
+import { matchRule } from "../lib/rules.js";
+import { Scope } from "../lib/viz.js";
+import { createLearn } from "./learn.js";
+
+export function createDemo(ctx) {
+    const root = el("section.view#view-demo");
+
+    const canvas = el("canvas.scope.scope-big");
+    const scope = new Scope(canvas);
+    const bigText = el("div.demo-decoded", {}, "…");
+    const bigMorse = el("div.decoded-morse muted");
+    const statusEl = el("div.demo-status muted", {}, "Listening…");
+    const transcript = el("div.transcript");
+    const clearBtn = el("button.btn.ghost.small", { onclick: clearAll }, "Clear");
+
+    let mic = null;
+    let onsets = [];
+    let lastOnsetMs = 0;
+    let idleTimer = null;
+
+    const timing = () => ctx.timing();
+
+    async function start() {
+        if (mic) return;
+        try {
+            mic = ctx.makeMic({
+                onOnset: (t) => onOnset(t),
+                onLevel: (lvl) => scope.pushLevel(lvl),
+            });
+            await mic.start();
+            scope.start();
+            idleTimer = setInterval(checkIdle, 250);
+            statusEl.textContent = "Listening…";
+        } catch {
+            mic = null;
+            statusEl.textContent = "Tap anywhere to enable the microphone.";
+            root.addEventListener("click", start, { once: true });
+        }
+    }
+
+    async function stop() {
+        if (idleTimer) { clearInterval(idleTimer); idleTimer = null; }
+        scope.stop();
+        if (mic) { await mic.stop(); mic = null; }
+    }
+
+    function onOnset(t) {
+        onsets.push(t);
+        lastOnsetMs = t;
+        scope.markOnset();
+        render();
+    }
+
+    function render() {
+        const { morse, text } = decodeOnsets(onsets, timing());
+        bigText.textContent = text || "…";
+        bigMorse.textContent = morse;
+    }
+
+    function checkIdle() {
+        if (!mic || onsets.length === 0) return;
+        if (mic.now() - lastOnsetMs > timing().wordGapMs * 2.5) finalize();
+    }
+
+    function finalize() {
+        if (onsets.length === 0) return;
+        const { morse, text } = decodeOnsets(onsets, timing());
+        onsets = [];
+        render();
+        if (!text) return;
+        transcript.prepend(el("div.line", {}, [
+            el("span.line-text", {}, text),
+            el("span.line-morse muted", {}, morse),
+        ]));
+        maybeReply(text);
+    }
+
+    function maybeReply(text) {
+        // Don't react to our own taps / their echo tail.
+        if (ctx.selfEchoActive?.()) return;
+        const rule = matchRule(text, ctx.state.demo.rules);
+        if (!rule) return;
+        statusEl.textContent = `Heard “${text}” → replying “${rule.output}”`;
+        // A short beat so it feels like an answer, not an interruption.
+        setTimeout(() => {
+            ctx.transmit(rule.output, { via: ctx.reachy ? "robot" : "device" })
+                .then(() => { statusEl.textContent = "Listening…"; })
+                .catch(() => { statusEl.textContent = "Listening…"; });
+        }, 500);
+    }
+
+    function clearAll() {
+        onsets = [];
+        clear(transcript);
+        render();
+    }
+
+    const learn = createLearn(ctx);
+    render();
+    root.append(
+        el("h2", {}, "Demo"),
+        canvas,
+        bigText,
+        bigMorse,
+        el("div.row.between", {}, [statusEl, clearBtn]),
+        el("label.field-label", {}, "Conversation"),
+        transcript,
+        el("hr.divider"),
+        learn.node,
+    );
+
+    return {
+        node: root,
+        onShow: () => { start(); learn.onShow?.(); },
+        onHide: stop,
+    };
+}

views/settings.js

@@ -4,7 +4,7 @@
  * the values we tune against real hardware, surfaced so calibration needs no
  * code edit.
  */
-import { el } from "./dom.js";
+import { el, clear } from "./dom.js";
 import { SPEED_PRESETS, makeTiming } from "../lib/timing.js";
 import { APP_VERSION } from "../lib/version.js";
 
@@ -62,5 +62,46 @@ export function createSettings(ctx) {
         if (ctx.reachy) ctx.tapper().testClap();
     }
 
+    // ── Demo mode: hidden conversation rules + kickoff sends ───────────
+    if (c.mode === "demo") {
+        c.demo = c.demo || { rules: [] };
+        const list = el("div.rule-list");
+
+        const ruleRow = (rule) => {
+            const inp = el("input.rule-input", {
+                type: "text", value: rule.input, placeholder: "hears…",
+                oninput: (e) => { rule.input = e.target.value; },
+            });
+            const out = el("input.rule-input", {
+                type: "text", value: rule.output, placeholder: "replies…",
+                oninput: (e) => { rule.output = e.target.value; },
+            });
+            const send = el("button.btn.ghost.small", {
+                title: "Send this phrase now",
+                onclick: () => {
+                    ctx._closeSettings?.();
+                    setTimeout(() => ctx.transmit(rule.input, { via: ctx.reachy ? "robot" : "device" }), 150);
+                },
+            }, "Send ▶");
+            const del = el("button.icon-btn.tiny", {
+                title: "Remove", onclick: () => { c.demo.rules.splice(c.demo.rules.indexOf(rule), 1); rebuild(); },
+            }, "✕");
+            return el("div.rule-row", {}, [inp, el("span.rule-arrow", {}, "→"), out, send, del]);
+        };
+        const rebuild = () => { clear(list); c.demo.rules.forEach((r) => list.append(ruleRow(r))); };
+        rebuild();
+
+        const addBtn = el("button.btn.ghost.small", {
+            onclick: () => { c.demo.rules.push({ input: "", output: "" }); rebuild(); },
+        }, "+ Add rule");
+
+        body.prepend(el("div.demo-setup", {}, [
+            el("h3", {}, "Conversation rules"),
+            el("p.muted.tiny", {}, "When this robot hears the left phrase, it taps the right one back. “Send ▶” kicks one off now (the sheet closes so the camera sees only the demo)."),
+            list,
+            addBtn,
+        ]));
+    }
+
     return { node: body };
 }