ui: single scrolling page, always-on Listen, leaner Learn

- Compose, then an always-present + auto-listening Listen panel, then the Learn
chart on one scrollable page (no tab bar) — send from the robot and watch it
decode live, scroll to look things up without losing the live message.
- Listen auto-starts the mic (falls back to a tap-to-start if the browser
blocks it before a gesture).
- Learn: removed punctuation (too advanced); fixed the number tiles colliding
(smaller chips, wider cells, wrap); no em-dashes in UI text.

main.js

@@ -90,48 +90,40 @@ async function bootEmbed() {
         toast,
     };
 
-    // ─── Views ────────────────────────────────────────────────────────
+    // ─── Views (single scrolling page: Compose, then always-on Listen,
+    //     then the Learn chart — scroll down to look anything up while a
+    //     live message keeps decoding) ────────────────────────────────────
     const views = {
         compose: createCompose(ctx),
         listen: createListen(ctx),
         learn: createLearn(ctx),
     };
-    const order = ["compose", "listen", "learn"];
-    const labels = { compose: "Compose", listen: "Listen", learn: "Learn" };
-    const icons = { compose: "✏️", listen: "🎧", learn: "📖" };
 
     const app = document.getElementById("app");
     clear(app);
 
-    const viewHost = el("main.view-host");
-    let current = null;
-    function show(name) {
-        if (current === name) return;
-        if (current && views[current].onHide) views[current].onHide();
-        current = name;
-        clear(viewHost);
-        viewHost.append(views[name].node);
-        views[name].onShow?.();
-        [...tabbar.children].forEach((b) =>
-            b.classList.toggle("active", b.dataset.view === name));
-    }
-
-    const tabbar = el("nav.tabbar");
-    order.forEach((name) => {
-        tabbar.append(el("button.tab", {
-            "data-view": name,
-            onclick: () => show(name),
-        }, [el("span.tab-ico", {}, icons[name]), el("span.tab-label", {}, labels[name])]));
-    });
-
     const header = el("header.appbar", {}, [
         el("div.brand", {}, [el("span.brand-logo", {}, "📡"), el("span", {}, "Morse Code")]),
         el("button.icon-btn", { title: "Settings", onclick: openSettings }, "⚙️"),
     ]);
 
-    app.append(header, viewHost, tabbar);
+    const scroller = el("main.scroller", {}, [
+        views.compose.node,
+        el("hr.divider"),
+        views.listen.node,
+        el("hr.divider"),
+        views.learn.node,
+    ]);
+
+    app.append(header, scroller);
     app.hidden = false;
-    show("compose");
+    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?.();
 
     // ─── Settings modal ─────────────────────────────────────────────
     function openSettings() {
@@ -151,6 +143,7 @@ async function bootEmbed() {
     handle.onLeave?.(() => {
         try { tapper?.stop(); } catch { /* */ }
         try { synth.stop(); } catch { /* */ }
+        try { views.listen.onHide?.(); } catch { /* */ }
         if (reachy) return safelyReturnToPose(reachy);
     });
 

style.css

@@ -81,9 +81,11 @@ html, body {
 }
 .icon-btn:active { transform: scale(0.95); }
 
-/* ─── View host + tabbar ──────────────────────────────────── */
+/* ─── Scrolling single page ───────────────────────────────── */
+.scroller { flex: 1; padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 22px; }
+.divider { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 2px 0; }
 .view-host { flex: 1; padding: 16px 16px 96px; }
-.view { display: flex; flex-direction: column; gap: 16px; }
+.view { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 72px; }
 .view h2 { margin: 4px 0 0; font-size: 24px; letter-spacing: -0.02em; }
 .view h3 { margin: 6px 0; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
 .muted { color: var(--muted); }
@@ -193,15 +195,15 @@ html, body {
     border: 1px solid var(--line);
     border-radius: var(--radius);
 }
-.pattern { display: inline-flex; align-items: center; gap: 4px; }
+.pattern { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; }
 .pattern .dot, .pattern .dash {
     display: inline-block;
-    height: 12px;
-    border-radius: 6px;
+    height: 10px;
+    border-radius: 5px;
     background: var(--accent);
 }
-.pattern .dot { width: 12px; }
-.pattern .dash { width: 30px; background: var(--accent-2); }
+.pattern .dot { width: 10px; }
+.pattern .dash { width: 22px; background: var(--accent-2); }
 .wordsep { color: var(--muted); font-weight: 800; padding: 0 2px; }
 
 /* ─── Listen ──────────────────────────────────────────────── */
@@ -235,11 +237,13 @@ html, body {
 
 /* ─── Learn chart ─────────────────────────────────────────── */
 .chart-section { display: flex; flex-direction: column; gap: 8px; }
-.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
+.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
 .chart-cell {
     appearance: none;
-    display: flex; flex-direction: column; align-items: center; gap: 8px;
+    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
     padding: 12px 8px;
+    min-height: 78px;
+    overflow: hidden;
     background: var(--panel);
     border: 1px solid var(--line);
     border-radius: 14px;
@@ -275,7 +279,7 @@ html, body {
 
 /* ─── Toast ───────────────────────────────────────────────── */
 .toast {
-    position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(20px);
+    position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
     background: var(--panel-2); color: var(--text);
     border: 1px solid var(--line);
     padding: 12px 18px; border-radius: 12px;

tests/unit/views.test.js

@@ -62,11 +62,11 @@ describe("Compose view", () => {
 });
 
 describe("Learn view", () => {
-    it("renders a tile per letter, digit and punctuation, and plays on tap", () => {
+    it("renders a tile per letter and digit (no punctuation), and plays on tap", () => {
         const ctx = makeCtx();
         const { node } = createLearn(ctx);
         const cells = node.querySelectorAll(".chart-cell");
-        expect(cells.length).toBe(26 + 10 + 12);
+        expect(cells.length).toBe(26 + 10);
         cells[0].click(); // 'A'
         expect(ctx._synth.play).toHaveBeenCalled();
     });

views/learn.js

@@ -8,7 +8,6 @@ import { tokensToOnsets } from "../lib/wire.js";
 
 const LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
 const DIGITS = "0123456789".split("");
-const PUNCT = [".", ",", "?", "/", "@", "=", "+", "-", "!", "'", "(", ")"];
 
 export function createLearn(ctx) {
     const root = el("section.view#view-learn");
@@ -48,14 +47,13 @@ export function createLearn(ctx) {
 
     root.append(
         el("h2", {}, "Learn Morse"),
-        el("p.muted", {}, "A letter is just a rhythm of short (·) and long (—) beats. Tap any tile to feel it."),
+        el("p.muted", {}, "A letter is just a rhythm of short and long beats. Tap any tile to feel it."),
         emitterNote,
         grid("Letters", LETTERS),
         grid("Numbers", DIGITS),
-        grid("Punctuation", PUNCT),
         el("div.legend", {}, [
-            el("span.legend-item", {}, [morsePattern("."), " dot — 1 tap"]),
-            el("span.legend-item", {}, [morsePattern("-"), " dash — quick double-tap"]),
+            el("span.legend-item", {}, [morsePattern("."), " dot: one tap"]),
+            el("span.legend-item", {}, [morsePattern("-"), " dash: quick double tap"]),
         ]),
     );
 

views/listen.js

@@ -13,7 +13,7 @@ export function createListen(ctx) {
     const canvas = el("canvas.scope");
     const scope = new Scope(canvas);
 
-    const liveText = el("div.decoded-text", {}, "—");
+    const liveText = el("div.decoded-text", {}, "…");
     const liveMorse = el("div.decoded-morse muted");
     const transcript = el("div.transcript");
     const startBtn = el("button.btn.primary.big", { onclick: toggle }, "🎙 Start listening");
@@ -27,25 +27,41 @@ export function createListen(ctx) {
 
     function timing() { return ctx.timing(); }
 
+    async function startMic() {
+        if (mic) return;
+        mic = ctx.makeMic({
+            onOnset: (t) => { onOnset(t); },
+            onLevel: (lvl) => scope.pushLevel(lvl),
+        });
+        await mic.start();
+        scope.start();
+        startBtn.textContent = "◼ Stop listening";
+        startBtn.classList.add("listening");
+        hint.textContent = "Listening. Every detected hit drops a red marker.";
+        idleTimer = setInterval(checkIdle, 250);
+    }
+
     async function toggle() {
         if (mic) return stopMic();
         try {
-            mic = ctx.makeMic({
-                onOnset: (t) => { onOnset(t); },
-                onLevel: (lvl) => scope.pushLevel(lvl),
-            });
-            await mic.start();
-            scope.start();
-            startBtn.textContent = "◼ Stop listening";
-            startBtn.classList.add("listening");
-            hint.textContent = "Listening… every detected hit drops a red marker.";
-            idleTimer = setInterval(checkIdle, 250);
+            await startMic();
         } catch (e) {
             ctx.toast(`Mic error: ${e?.message || e}`);
             mic = null;
         }
     }
 
+    // Auto-start on load so the panel is always listening. Browsers may block
+    // mic/AudioContext until a user gesture; if so, leave the button for a tap.
+    async function autoStart() {
+        try {
+            await startMic();
+        } catch {
+            mic = null;
+            hint.textContent = "Tap “Start listening” to enable the microphone.";
+        }
+    }
+
     async function stopMic() {
         if (idleTimer) { clearInterval(idleTimer); idleTimer = null; }
         scope.stop();
@@ -112,5 +128,6 @@ export function createListen(ctx) {
         node: root,
         onShow: () => {},
         onHide: () => { if (mic) stopMic(); },
+        autoStart,
     };
 }