<!-- AIMEAT App Manifest
name: band-jam
version: 3.8.0
description: Realtime band room — jam live on keyboard or looping tracker patterns in sync with everyone in the room, or add an AI bandmate that follows your lead on drums, bass and chords (optionally LLM-arranged via your own OpenRouter key). Theme-aware, mobile-first, self-hosted libs.
entry: index.html
-->
<!--
  @file band-jam.html
  @description Band Jam — a realtime multiplayer tracker/jam room built on AIMEAT's
    realtime rooms (AimeatRealtime), audio engine (AIMEAT.audio) and auth pill.
    v2 adds: (1) a theme-aware chrome that respects the auth pill's light/dark
    toggle, (2) self-hosted (vendored) daisyUI+Tailwind instead of a CDN so it
    survives a hardened/CSP node, (3) an in-app "AI Band" that infers your key and
    tempo from your live notes and plays drums/bass/chords/arp along with you, and
    (4) an "Invite an AI agent" panel that hands a code-capable AI the room + the
    jam protocol so a real networked agent can join as a bandmate.
  @structure boot() -> auth -> lobby -> room; realtime handlers; shared t0 transport
    clock; 9-track tracker; AI Band engine (STYLES + key detection + step generator).
  @usage Published AIMEAT app. Loads /lib/realtime.js, /v1/libs/aimeat-audio.js,
    /v1/libs/aimeat-auth.js, /v1/libs/aimeat-data.js from the serving node.
  @version-history
    v3.8.0 — 2026-07-26 — On the THEME SYSTEM: every --bj-* variable now resolves from
      /lib/aimeat-theme.css tokens (old values kept as fallbacks), so both axes work —
      data-theme light/dark AND all five palettes (aimeat, paper, circuit, contrast, mist),
      picked from the control cluster in the login pill. The hand-kept light-mode block is
      deleted (the tokens carry both modes). Mode colours became semantic (live=success,
      edit=info, rec=error, typing=warning) and mix toward base-content so they hold contrast
      on a pale page. The device screens (tracker, note river, keyboard drawer) stay dark by
      DESIGN but are now tinted by the live accent and expose screen-local chrome vars, so
      anything nested in the LCD follows the screen instead of the page; the river canvas
      reads its trail + label ink back from computed style each frame. Fixed: var(--bj-dim)
      never existed, so zone labels and step numbers silently used a hardcoded blue-grey.
      Panels gained --elev-card. No engine, audio, realtime or AI logic changes.
    v3.7.0 — 2026-07-19 — Disk PREVIEW: picking a disk in "All disks…" shows its contents before
      loading — sample count, auto-categorized summary (drums/bass/synth/…) and every sample name
      (catalog.json v2 carries names+summary; the disks never had official titles, the content IS
      the catalog).
    v3.6.0 — 2026-07-19 — 📼 The WHOLE ST-XX collection: all 116 Amiga Soundtracker sample disks
      (CC0, ~12k samples) hosted as public .asb banks + a catalog.json; the bank panel gained an
      "All disks…" picker. ST-01/ST-02 stay as one-click buttons.
    v3.5.0 — 2026-07-19 — Prompt-driven composing: 📋 Copy prompt (full compose prompt incl. chosen
      channel ids + sample-bank instrument ids) → run in ANY AI chat → 📥 Import JSON builds the
      song (codefence-tolerant, shared applyComposedSong with the in-app LLM path). Limits raised:
      20 patterns × 24 positions × 8 layers — big chat models can handle the JSON.
    v3.4.0 — 2026-07-19 — AI Composer: style chips are MULTI-select (ambient+chiptune, funk+techno);
      each track row got a full instrument select (base + 📼 bank samples) applied on compose; the
      AI itself may now pick loaded sample-bank instruments (smp:bank:idx offered in the prompt).
    v3.3.1 — 2026-07-19 — Fix: AI Composer overlay stuck open — .aic-overlay display:flex out-cascaded
      the vendored .hidden utility (same specificity, later sheet); added .aic-overlay.hidden rule.
    v3.3.0 — 2026-07-19 — ✨ AI Composer DIALOG replaces the easy-to-miss inline wish input: big
      description box, style chips, and (whole-song) pattern count / song length in positions /
      layer count / per-track instrument selection + "AI may re-pick instruments". The composer
      prompt now teaches the LAYERED song grid — the AI designs patterns meant to play stacked
      and returns songTracks (layers × positions); every pattern is forced to the Steps setting.
    v3.2.1 — 2026-07-19 — Space = transport toggle (▶/■) outside text fields — ProTracker/DAW muscle memory.
    v3.2.0 — 2026-07-19 — 🎼 Multi-layer song arrangement: the order list became a GRID of song
      tracks (layers) × positions; every position plays all layers' patterns together (P0+P5 →
      P1+P6 → …). 🧭 Steps/pattern is now a SONG setting (16/32/48/64, FastTracker-style) next to
      Save, replacing the per-track length select. Song format v: 2 + songTracks/patternLen
      (legacy order kept for old readers; old songs load as one layer).
    v3.1.0 — 2026-07-19 — 📼 Sample banks: extended ASB format (aimeat-sample-bank@1); ST-01/ST-02
      CC0 example disks; import .wav / .mod (samples extracted in-browser) / .8svx / .asb.json;
      save banks to AIMEAT storage as public .asb.json; per-track sample instruments (smp:bank:idx).
    v1.0.0 — 2026-05-01 — Initial realtime tracker jam.
    v2.0.0 — 2026-07-18 — Theme-aware chrome (respects auth pill toggle); vendored
      libs (no CDN); in-app AI Band (lead-following drums/bass/chords/arp);
      Invite-an-AI-agent panel + jam protocol; a11y + mobile polish.
    v2.1.0 — 2026-07-18 — Light-mode polish (framed dark "device screens", light
      chrome for track tabs/mode/keymap); optional LLM arranger — the AI Band can
      re-arrange the progression/parts each bar via AIMEAT.ai (the user's own
      OpenRouter key), off by default; deterministic engine stays the default.
    v2.1.1 — 2026-07-18 — Fix: declare <meta name="aimeat-scopes" content="memory:read memory:write storage:read storage:write ai:use">
      so the LLM arranger can actually read the owner's OpenRouter key (default
      app-grant scopes exclude ai:use). Fix: per-track Vol now scales LIVE play +
      broadcast velocity (was loop-only), so the slider works and a hot bass can
      be tamed instead of clipping.
    v2.2.0 — 2026-07-19 — UX facelift: mode clarity. Sticky COCKPIT bar (room/peers/
      transport/BPM/mode/step-dots) + an always-visible play-status pill that says in
      words what the keyboard does right now (Live plays / Edit writes to grid /
      REC records / typing-in-a-field); full-page color-coded mode frame (green/blue/
      pulsing red); Esc always returns to Live; clicking the tracker grid auto-enters
      Edit with a toast; page grouped into Band / Stage / Studio zones. No engine,
      audio, realtime or AI logic changes.
    v2.3.0 — 2026-07-19 — Sound: (1) hold-to-sustain — notes sustain while a key/finger
      is held and release on keyup/pointerup (classic: flute + synth via duration+stop;
      real: all sampled instruments with per-instrument release envelopes); (2) stuck-
      note safety — allNotesOff() on window blur, tab hide and pointercancel, so
      clicking out of the window mid-press can never leave a note ringing; (3) 🎻 Real
      engine flip in the cockpit — sampled piano/guitar/bass/flute served from the
      node's /lib/samples (Salamander piano CC BY 3.0 + FluidR3_GM MIT), nearest-sample
      pitch shift, lazy-loaded, graceful Classic fallback when the node lacks samples;
      peers' notes render through your selected engine. UI otherwise unchanged.
    v2.4.0 — 2026-07-19 — Sound feedback round: FIX key auto-repeat retriggering held
      notes (the "plays a fixed amount" bug — a held key now sustains ONE note); synth
      is a GATED app-side analog voice (2 detuned saws + sub + lowpass) that stops the
      instant the key lifts, in BOTH engines; flute release tightened to ~60 ms; bass
      upgraded to MusyngKite electric_bass_finger; flute upgraded to MusyngKite; NEW
      guitar (steel) + guitar (electric) alongside nylon; NEW sampled DRUM KIT
      (FluidR3 GM percussion); Real engine works with a partial sample set (per-
      instrument classic fallback). Guitar variants fall back to the classic guitar
      voice pre-deploy and for old-version peers.
    v2.5.0 — 2026-07-19 — Feedback round 2: engine choice ALWAYS visible (pill shows
      ⚡ Classic / 🎻 Real in every state + seg re-highlights after load); volume sliders
      PLAY THROUGH (tweak vol mid-jam, letters still play — only text fields silence keys);
      per-instrument output gain (REAL_GAIN — drums 2.2x, bass 1.6x, others boosted so
      vol 1.0 is loud); bass swapped to FluidR3 electric_bass_finger (MusyngKite render
      sustained like a church organ) + guitar-steel to FluidR3; NEW sampled instruments:
      strings, organ, e-piano, trumpet (MusyngKite; sustained, classic fallbacks); NEW
      🕰️ metronome click toggle — beat click while the transport runs (local only).
    v2.6.0 — 2026-07-19 — Per-track sound engine: each track picks 🌐 auto (follows the
      cockpit ⚡/🎻 switch), ⚡ classic or 🎻 real — live keys, recording AND the pattern
      loop honor the track choice, so a Real piano can loop over a Classic synth. Picking
      real lazy-loads the samples; the status pill shows the active track effective
      engine with a "(track)" marker when overridden. Selects/checkboxes auto-blur
      (v2.5.2) so you keep playing right after choosing.
-->
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <!-- App-grant scope: the ONLY privileged thing Band Jam does is the optional LLM
       arranger, which calls AIMEAT.ai with the owner's own OpenRouter key. Realtime
       rooms need no app-grant scope (they're requireAuth-only). So we declare just
       ai:use — least privilege. Without this, the app-grant gets only the memory/
       storage defaults and AIMEAT.ai.isAvailable() is false even when a key is set. -->
  <meta name="aimeat-scopes" content="memory:read memory:write storage:read storage:write ai:use">
  <title>Band Jam</title>
  <!-- Restore BOTH theme axes the user picked in any AIMEAT app BEFORE first paint:
       'aimeat-theme' → <html data-theme="light|dark">, 'aimeat-palette' →
       <html data-palette> (removed for the default 'aimeat' palette). Both keys are
       driven by the control cluster in the login pill, so the pill and this app stay
       in sync with no flash, and a change made in another tab lands here too. -->
  <script>
    (function () {
      function applyTheme(t) {
        if (t !== 'light' && t !== 'dark') {
          t = (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark';
        }
        document.documentElement.setAttribute('data-theme', t);
      }
      function applyPalette(p) {
        if (p && p !== 'aimeat') document.documentElement.setAttribute('data-palette', p);
        else document.documentElement.removeAttribute('data-palette');
      }
      try {
        applyTheme(localStorage.getItem('aimeat-theme'));
        applyPalette(localStorage.getItem('aimeat-palette'));
        window.addEventListener('storage', function (e) {
          if (e.key === 'aimeat-theme' && e.newValue) applyTheme(e.newValue);
          if (e.key === 'aimeat-palette') applyPalette(e.newValue);
        });
      } catch (e) { /* keep the dark default */ }
    })();
  </script>
  <!-- Self-hosted (vendored) styling — NOT a CDN. Survives a hardened/CSP node.
       aimeat-theme.css IS the platform theme system: five designed palettes on two
       axes (data-theme × data-palette), typography, elevation and radius tokens.
       The daisyUI bridge maps daisyUI's per-theme vars onto those tokens so
       components repaint whenever the pill cluster flips either axis. -->
  <link href="/lib/daisyui@5.css" rel="stylesheet" type="text/css" />
  <link href="/lib/aimeat-theme.css" rel="stylesheet" type="text/css" />
  <link href="/lib/aimeat-daisyui-bridge.css" rel="stylesheet" type="text/css" />
  <script src="/lib/tailwindcss@4.js"></script>
  <style>
    /* ─────────────────────────────────────────────────────────────
       Band Jam's palette IS the AIMEAT theme system. Every --bj-* below resolves
       from /lib/aimeat-theme.css tokens (the old values kept as fallbacks), so
       light/dark AND every designed palette (paper, circuit, contrast, mist) work
       without a single component rule changing. The hand-kept light block is gone —
       the tokens carry both modes.

       The DEVICE SCREENS (tracker grid, note river, keyboard drawer) stay dark in
       every mode on purpose — they are the unit's LCD, and a pale tracker is not
       Band Jam. That is a declared IDENTITY decision, not a missed migration: the
       screen is a fixed dark base TINTED by the live palette accent, so switching
       to circuit or paper visibly reaches the screen too. Everything nested inside
       a screen picks up screen-local chrome vars from the .bj-screen scope below,
       so panels/headers/hairlines drawn inside the LCD follow it, not the page.
       ───────────────────────────────────────────────────────────── */
    :root {
      /* Chrome — page, nav, panels, text */
      --bj-bg:        var(--color-base-100, #07090f);
      --bj-panel:     var(--color-base-200, #11141d);
      --bj-panel-2:   color-mix(in oklab, var(--color-base-200, #0e1119) 55%, var(--color-base-100, #07090f));
      --bj-border:    var(--color-base-300, #1f2535);
      --bj-text:      color-mix(in oklab, var(--color-base-content, #c8d3f5) 88%, transparent);
      --bj-text-dim:  color-mix(in oklab, var(--color-base-content, #8a95b5) 60%, transparent);
      --bj-heading:   var(--color-base-content, #ffffff);
      /* Accents — always used together with their ink */
      --bj-accent:      var(--color-primary, #E8564A);
      --bj-accent-ink:  var(--color-primary-content, #ffffff);
      --bj-accent-2:    var(--color-secondary, #6366F1);
      --bj-accent-2-ink: var(--color-secondary-content, #ffffff);
      /* Semantic colours AS TEXT — mixed toward base-content so they stay legible
         on a light page (raw success/warning fail contrast as small text). */
      --bj-ok:    color-mix(in oklab, var(--color-success, #10b981) 58%, var(--color-base-content, #4ade80));
      --bj-warn:  color-mix(in oklab, var(--color-warning, #f59e0b) 58%, var(--color-base-content, #fcd34d));
      --bj-err:   color-mix(in oklab, var(--color-error, #ef4444) 62%, var(--color-base-content, #fca5a5));
      --bj-info:  color-mix(in oklab, var(--color-info, #60a5fa) 58%, var(--color-base-content, #93c5fd));
      --bj-success: var(--color-success, #10b981);   /* as a FILL (LEDs, dots) */
      /* Shape + type */
      --bj-radius:     var(--radius-field, 6px);
      --bj-radius-box: var(--radius-box, 12px);
      --bj-shadow:     var(--elev-card, 0 8px 24px rgba(0,0,0,.35));
      --bj-shadow-pop: var(--elev-pop, 0 18px 60px rgba(0,0,0,.5));
      --bj-mono:       var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
      /* Device screen — fixed dark in every mode, tinted by the live accent */
      --bj-screen:        color-mix(in oklab, var(--color-primary, #E8564A) 7%, #080a10);
      --bj-screen-2:      color-mix(in oklab, var(--color-primary, #E8564A) 9%, #10131c);
      --bj-screen-border: color-mix(in oklab, var(--color-primary, #E8564A) 16%, #1c2231);
      --bj-screen-text:   color-mix(in oklab, var(--color-primary, #E8564A) 10%, #c8d3f5);
      --bj-screen-dim:    color-mix(in oklab, var(--color-primary, #E8564A) 12%, #8a95b5);
      --bj-screen-head:   #ffffff;
    }

    /* ── The screen scope ──
       Inside an LCD the page's chrome vars would be wrong (white panels on black).
       Re-point them at the screen ramp once, here, and every nested rule that reads
       --bj-panel / --bj-text / --bj-border follows the screen automatically. */
    .tracker, #river, .kbd-drawer {
      --bj-panel:     var(--bj-screen-2);
      --bj-panel-2:   var(--bj-screen);
      --bj-border:    var(--bj-screen-border);
      --bj-text:      var(--bj-screen-text);
      --bj-text-dim:  var(--bj-screen-dim);
      --bj-heading:   var(--bj-screen-head);
    }
    /* A soft bezel so the dark inset reads as intentional on a pale page. */
    .tracker, #river { box-shadow: var(--bj-shadow); }

    /* Tracker-y vibe: monospace everywhere it matters, scanlines, glow */
    .tracker {
      font-family: var(--bj-mono);
      font-size: 13px;
      line-height: 1.5;
      background: var(--bj-screen);
      color: var(--bj-screen-text);
      border: 1px solid var(--bj-screen-border);
      border-radius: var(--bj-radius);
      padding: 6px 0;
      max-height: 420px;
      overflow-y: auto;
    }
    .tracker .row {
      display: grid;
      grid-template-columns: 56px 80px 56px 1fr;
      padding: 1px 12px;
      letter-spacing: 0.5px;
    }
    .tracker .row.cursor {
      background: color-mix(in oklab, var(--bj-accent-2) 26%, var(--bj-screen));
      color: var(--bj-screen-head);
      box-shadow: inset 2px 0 0 var(--bj-accent-2);
    }
    .tracker .row.playing {
      background: color-mix(in oklab, var(--bj-accent) 22%, var(--bj-screen));
      color: var(--bj-screen-head);
    }
    .tracker .row.cursor.playing {
      background: color-mix(in oklab, var(--bj-accent-2) 30%, color-mix(in oklab, var(--bj-accent) 26%, var(--bj-screen)));
    }
    .tracker .step { color: color-mix(in oklab, var(--bj-screen-dim) 72%, var(--bj-screen)); }
    .tracker .note-cell { color: var(--bj-accent); font-weight: 600; }
    .tracker .note-cell.empty { color: color-mix(in oklab, var(--bj-screen-dim) 34%, var(--bj-screen)); }
    .tracker .vel { color: var(--bj-accent-2); }

    /* Step indicator dots (chrome — they sit on the cockpit panel, not the screen) */
    .step-dots { display: flex; gap: 3px; }
    .step-dots .dot {
      width: 12px; height: 12px;
      background: var(--bj-border);
      border-radius: 2px;
      transition: background 80ms;
    }
    .step-dots .dot.active { background: var(--bj-accent); }
    .step-dots .dot.beat { background: color-mix(in oklab, var(--bj-text-dim) 55%, var(--bj-border)); }
    .step-dots .dot.beat.active { background: var(--bj-accent); }

    /* Note river - canvas where peer notes scroll across */
    #river {
      width: 100%;
      height: 120px;
      background: var(--bj-screen);
      /* the canvas reads these two back at render time (see startRiverLoop) */
      color: var(--bj-screen-text);
      border: 1px solid var(--bj-screen-border);
      border-radius: var(--bj-radius);
      display: block;
    }

    /* Keyboard hint (chrome — printed on the panel, not on the screen) */
    .keymap {
      font-family: var(--bj-mono);
      font-size: 11px;
      color: var(--bj-text-dim);
    }
    .keymap kbd {
      background: var(--bj-panel-2);
      color: var(--bj-text);
      padding: 2px 6px;
      border-radius: 3px;
      border-bottom: 2px solid var(--bj-border);
      font-size: 11px;
      margin: 0 1px;
    }
    .keymap kbd.lit {
      background: var(--bj-accent);
      color: var(--bj-accent-ink);
      box-shadow: 0 0 12px color-mix(in oklab, var(--bj-accent) 60%, transparent);
    }

    /* Peer dot */
    .peer-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 12px;
      background: var(--bj-panel-2);
      border: 1px solid var(--bj-border);
      color: var(--bj-text);
      font-size: 12px;
    }
    .peer-chip.peer-ai {
      background: color-mix(in oklab, var(--bj-accent-2) 14%, var(--bj-panel-2));
      box-shadow: 0 0 0 1px var(--bj-accent-2) inset;
    }
    .peer-chip.peer-you { background: color-mix(in oklab, var(--bj-accent) 14%, var(--bj-panel-2)); }
    .peer-chip .swatch.swatch-you { background: var(--bj-accent); }
    .peer-chip .swatch {
      width: 10px; height: 10px;
      border-radius: 50%;
    }

    /* Panels + chrome follow the theme. A card sits on base-200 WITH elevation —
       base-100 plus a hairline is the flatness bug the theme system exists to kill. */
    .panel {
      background: var(--bj-panel);
      border: 1px solid var(--bj-border);
      border-radius: var(--bj-radius-box);
      box-shadow: var(--bj-shadow);
      padding: 16px;
    }

    body { background: var(--bj-bg); color: var(--bj-text); font-family: var(--font-body, system-ui, sans-serif); transition: background 200ms, color 200ms; }
    .navbar { background: var(--bj-panel) !important; border-bottom: 1px solid var(--bj-border); }
    .bj-logo { display: inline-block; width: 34px; height: 34px; border-radius: 9px; vertical-align: middle; margin-right: 8px;
      box-shadow: 0 0 14px color-mix(in oklab, var(--bj-accent) 35%, transparent); }
    .bj-hero { width: 100%; height: 150px; object-fit: cover; object-position: center 46%;
      border-radius: 10px; margin-bottom: 14px; border: 1px solid var(--bj-border);
      box-shadow: var(--bj-shadow); }
    .bj-robot { width: 56px; height: 56px; border-radius: 12px; object-fit: cover;
      border: 1px solid var(--bj-border); box-shadow: 0 0 12px color-mix(in oklab, var(--bj-accent) 25%, transparent); }
    @media (max-width: 640px) { .bj-hero { height: 100px; } .bj-robot { width: 44px; height: 44px; } }
    .nav-subtitle { color: var(--bj-text-dim); }
    /* Headings + accent text helpers (replace inline style="color:#fff" etc.) */
    .bj-h { color: var(--bj-heading); }
    .bj-accent { color: var(--bj-accent); }
    .bj-dim { color: var(--bj-text-dim); }
    /* Accent + secondary buttons (replace inline button colors) */
    .bj-btn-accent { background: var(--bj-accent); color: var(--bj-accent-ink); border: none; }
    .bj-btn-accent:hover { filter: brightness(1.08); color: var(--bj-accent-ink); }
    .bj-btn-indigo { background: var(--bj-accent-2); color: var(--bj-accent-2-ink); border: none; }
    .bj-btn-indigo:hover { filter: brightness(1.08); color: var(--bj-accent-2-ink); }
    .bj-inset { background: var(--bj-panel-2); border: 1px solid var(--bj-border); }

    /* ----- Mobile viewport hardening -----
       Auth lib injects a wide gold "logged in <long-email>" pill into #header-auth.
       On narrow screens that pill (or anything else) overflowing made the BODY
       horizontally scrollable, which in turn parked the position:fixed FAB
       off-screen. Lock the viewport width and clip overflow at the source. */
    html, body {
      overflow-x: hidden;
      max-width: 100vw;
    }
    /* Allow the navbar's flex children to actually shrink (default min-width
       on flex items is 'auto', which prevents shrinking when content is wide). */
    .navbar > * { min-width: 0; }
    /* Clip the auth widget so its internal content can't push the page wider. */
    #header-auth {
      display: inline-block;
      max-width: 60vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    @media (max-width: 640px) {
      #header-auth { max-width: 48vw; }
      /* Hide the subtitle line on phones — title alone is fine */
      .nav-subtitle { display: none; }
    }

    /* ----- On-screen keyboard (mobile-friendly virtual keys) ----- */
    .kbd-fab {
      position: fixed;
      right: 16px;
      bottom: 16px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--bj-accent);
      color: var(--bj-accent-ink);
      font-size: 24px;
      border: none;
      box-shadow: var(--bj-shadow-pop);
      z-index: 50;
      cursor: pointer;
      touch-action: manipulation;
    }
    .kbd-fab.lit { box-shadow: 0 0 0 4px color-mix(in oklab, var(--bj-accent) 30%, transparent), var(--bj-shadow-pop); }

    .kbd-drawer {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      background: var(--bj-screen-2);
      border-top: 2px solid var(--bj-accent);
      z-index: 40;
      max-height: 60vh;
      display: flex;
      flex-direction: column;
      transition: transform 220ms ease;
      box-shadow: var(--bj-shadow-pop);
    }
    .kbd-drawer.kbd-hidden {
      transform: translateY(110%);
      pointer-events: none;
    }
    .kbd-bar {
      display: flex;
      align-items: center;
      padding: 10px 14px;
      border-bottom: 1px solid var(--bj-border);
      gap: 12px;
    }
    .kbd-title { font-size: 13px; color: var(--bj-heading); flex: 1; }
    .kbd-title b { color: var(--bj-accent); }
    .kbd-hint { font-size: 11px; opacity: 0.55; }
    .kbd-close {
      background: transparent; border: none; color: var(--bj-text);
      font-size: 20px; padding: 4px 14px; cursor: pointer;
      touch-action: manipulation;
    }

    .virt-keys-area {
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 14px;
      -webkit-overflow-scrolling: touch;
    }
    .virt-keys-row {
      display: flex;
      gap: 4px;
      white-space: nowrap;
    }
    /* Piano keys are white and black because pianos are — declared IDENTITY, not
       theme surfaces. Only the LIT state follows the palette accent. */
    .virt-key {
      flex: 0 0 auto;
      width: 52px;
      height: 96px;
      background: linear-gradient(to bottom, #fafafa, #d4d4d4);
      color: #0b0e14;
      border: 1px solid #5a5a5a;
      border-radius: 4px;
      font-family: var(--bj-mono);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 10px;
    }
    .virt-key.sharp {
      background: linear-gradient(to bottom, #2a2f45, #0b0e14);
      color: #fff;
      border-color: #0b0e14;
      height: 64px;
    }
    .virt-key.lit {
      background: var(--bj-accent) !important;
      color: var(--bj-accent-ink) !important;
      border-color: var(--bj-accent);
      box-shadow: 0 0 12px color-mix(in oklab, var(--bj-accent) 70%, transparent);
    }

    .virt-drums {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
      gap: 8px;
    }
    .virt-drum {
      height: 72px;
      background: linear-gradient(to bottom, color-mix(in oklab, var(--bj-accent-2) 22%, var(--bj-screen-2)), var(--bj-screen));
      color: var(--bj-screen-head);
      border: 1px solid var(--bj-screen-border);
      border-radius: 8px;
      font-family: var(--bj-mono);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
    }
    .virt-drum.lit {
      background: var(--bj-accent);
      color: var(--bj-accent-ink);
      border-color: var(--bj-accent);
      box-shadow: 0 0 12px color-mix(in oklab, var(--bj-accent) 70%, transparent);
    }

    /* Reconnect / connection banner */
    .conn-banner {
      padding: 8px 14px;
      background: color-mix(in oklab, var(--color-error, #ef4444) 14%, var(--bj-bg));
      border: 1px solid color-mix(in oklab, var(--color-error, #ef4444) 55%, var(--bj-bg));
      color: var(--bj-err);
      border-radius: var(--bj-radius);
      font-size: 13px;
    }

    /* Track tabs (1..9) */
    .track-tabs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .track-tab {
      flex: 1 1 60px;
      min-width: 56px;
      max-width: 100px;
      padding: 6px 4px;
      background: var(--bj-panel-2);
      border: 1px solid var(--bj-border);
      border-radius: var(--bj-radius);
      color: var(--bj-text-dim);
      font-family: var(--bj-mono);
      font-size: 11px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      touch-action: manipulation;
      position: relative;
    }
    .track-tab:hover { border-color: var(--bj-accent-2); color: var(--bj-text); }
    .track-tab.active {
      background: color-mix(in oklab, var(--bj-accent) 14%, var(--bj-panel));
      border-color: var(--bj-accent);
      color: var(--bj-heading);
      box-shadow: 0 0 0 1px var(--bj-accent) inset;
    }
    .track-tab.muted { opacity: 0.45; }
    .track-tab .track-num { font-weight: 700; font-size: 14px; color: inherit; }
    .track-tab .track-inst { font-size: 10px; opacity: 0.75; }
    .track-tab .track-led {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--bj-border);
      position: absolute;
      top: 4px; right: 4px;
    }
    .track-tab .track-led.on { background: var(--bj-success); box-shadow: 0 0 6px var(--bj-success); }

    /* Mode segmented control [Live][Edit][Rec] */
    .mode-seg {
      display: inline-flex;
      border: 1px solid var(--bj-border);
      border-radius: var(--bj-radius);
      overflow: hidden;
    }
    .mode-btn {
      padding: 6px 14px;
      background: var(--bj-panel-2);
      color: var(--bj-text-dim);
      border: none;
      border-right: 1px solid var(--bj-border);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      touch-action: manipulation;
    }
    .mode-btn:last-child { border-right: none; }
    .mode-btn:hover { color: var(--bj-text); }
    .mode-btn.active {
      background: var(--bj-accent);
      color: var(--bj-accent-ink);
    }
    .mode-btn[data-mode="record"].active {
      background: var(--color-error, #ef4444);
      color: var(--color-error-content, #fff);
      animation: rec-pulse 1.4s ease-in-out infinite;
    }
    @keyframes rec-pulse {
      0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-error, #ef4444) 50%, transparent); }
      50% { box-shadow: 0 0 0 6px transparent; }
    }

    /* ════ v3 facelift: cockpit + play-status + zones + mode frame ════ */
    /* One sticky command bar: transport, mode, and a plain-words status pill. */
    .cockpit {
      position: sticky; top: 8px; z-index: 40;
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      border-width: 2px;
    }
    .cockpit .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .cockpit .row + .row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bj-border); }
    /* the ONE line that always says what your keys do right now */
    .play-status {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
      border: 1.5px solid transparent; transition: background .25s, border-color .25s;
    }
    .play-status .ps-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
    .play-status .ps-sub { font-weight: 500; font-size: 11.5px; opacity: .75; }
    /* Mode colours are SEMANTIC: live = success, edit = info, record = error,
       typing = warning. The text mixes toward base-content so it holds contrast on a
       pale page too — which is why the old light-mode override block is gone. */
    .play-status[data-ps="live"]   { background: color-mix(in oklab, var(--color-success, #22c55e) 12%, var(--bj-bg)); border-color: color-mix(in oklab, var(--color-success, #22c55e) 45%, var(--bj-bg)); color: var(--bj-ok); }
    .play-status[data-ps="live"] .ps-dot { background: var(--color-success, #22c55e); box-shadow: 0 0 8px color-mix(in oklab, var(--color-success, #22c55e) 80%, transparent); }
    .play-status[data-ps="edit"]   { background: color-mix(in oklab, var(--color-info, #60a5fa) 12%, var(--bj-bg)); border-color: color-mix(in oklab, var(--color-info, #60a5fa) 45%, var(--bj-bg)); color: var(--bj-info); }
    .play-status[data-ps="edit"] .ps-dot { background: var(--color-info, #60a5fa); }
    .play-status[data-ps="record"] { background: color-mix(in oklab, var(--color-error, #ef4444) 14%, var(--bj-bg)); border-color: color-mix(in oklab, var(--color-error, #ef4444) 55%, var(--bj-bg)); color: var(--bj-err); }
    .play-status[data-ps="record"] .ps-dot { background: var(--color-error, #ef4444); animation: rec-pulse 1.2s ease-in-out infinite; }
    .play-status[data-ps="typing"] { background: color-mix(in oklab, var(--color-warning, #f59e0b) 12%, var(--bj-bg)); border-color: color-mix(in oklab, var(--color-warning, #f59e0b) 50%, var(--bj-bg)); color: var(--bj-warn); }
    .play-status[data-ps="typing"] .ps-dot { background: var(--color-warning, #f59e0b); }
    /* full-viewport mode frame — you see the mode from anywhere on the page */
    body.in-room::after {
      content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90;
      border: 3px solid var(--mode-frame, transparent); opacity: .55;
      transition: border-color .25s;
    }
    body.in-room[data-im="live"]   { --mode-frame: color-mix(in oklab, var(--color-success, #22c55e) 55%, transparent); }
    body.in-room[data-im="edit"]   { --mode-frame: color-mix(in oklab, var(--color-info, #60a5fa) 60%, transparent); }
    body.in-room[data-im="record"] { --mode-frame: color-mix(in oklab, var(--color-error, #ef4444) 75%, transparent); }
    body.in-room[data-im="record"]::after { animation: frame-pulse 1.2s ease-in-out infinite; }
    @keyframes frame-pulse { 0%,100% { opacity:.75; } 50% { opacity:.3; } }
    /* zone labels group the page into STAGE / STUDIO / BAND */
    .zone-label {
      display: flex; align-items: center; gap: 10px; margin: 18px 2px 8px;
      font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--bj-text-dim);
    }
    .zone-label::after { content: ''; flex: 1; height: 1px; background: var(--bj-border); }
    /* toast for mode-switch feedback */
    #bj-toast {
      position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
      background: var(--bj-panel); color: var(--bj-text);
      border: 1.5px solid var(--bj-border); border-radius: 10px; padding: 10px 18px;
      font-size: 13px; font-weight: 600; z-index: 95; opacity: 0; pointer-events: none;
      transition: opacity .25s, transform .25s; box-shadow: var(--bj-shadow-pop);
    }
    #bj-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    /* Compact tracker (denser rows, scrolls beyond 16 steps) + song chips */
    .tracker { font-size: 11px !important; line-height: 1.35 !important; max-height: 460px; overflow: auto; }
    /* ProTracker-style channel grid */
    .tg { display: grid; grid-template-columns: 34px repeat(var(--tgcols, 9), minmax(58px, 1fr)); font-family: var(--bj-mono); }
    .tg-cell { padding: 1px 5px; text-align: center; white-space: nowrap; cursor: pointer; border-bottom: 1px solid rgba(128,128,170,.08); }
    .tg-step { color: var(--bj-text-dim); opacity: .7; cursor: default; }
    .tg-head { position: sticky; top: 0; z-index: 2; font-weight: 700; background: var(--bj-panel); border-bottom: 1px solid var(--bj-border); padding: 3px 5px; }
    .tg-head.muted { opacity: .4; }
    .tg-cell.active-col { background: color-mix(in oklab, var(--bj-accent-2) 12%, transparent); }
    .tg-cell.tg-head.active-col { background: color-mix(in oklab, var(--bj-accent-2) 24%, transparent); }
    .tg-cell.cursor { outline: 1.5px solid var(--bj-accent); outline-offset: -1.5px; }
    .tg-cell.playing { background: color-mix(in oklab, var(--bj-accent) 28%, transparent); }
    .tg-cell.out { opacity: .18; cursor: default; }
    .tg-vel { font-size: 9px; opacity: .55; margin-left: 4px; }
    /* pattern/order bars */
    .pt-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .pt-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--bj-text-dim); }
    .pt-chips { display: flex; gap: 4px; flex-wrap: wrap; }
    .pt-chip { font: 700 11px ui-monospace, monospace; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--bj-border); background: transparent; color: var(--bj-text); cursor: pointer; }
    .pt-chip.active { background: var(--bj-accent); color: var(--bj-accent-ink); border-color: transparent; }
    .pt-chip.playing { background: color-mix(in oklab, var(--color-success, #22c55e) 25%, transparent); border-color: color-mix(in oklab, var(--color-success, #22c55e) 60%, transparent); }
    .aic-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
      display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; z-index: 9000; padding: 40px 16px; }
    /* This inline stylesheet loads AFTER the vendored Tailwind, so .aic-overlay's display:flex
       would out-cascade .hidden (same specificity) — the dialog stuck open on every load. */
    .aic-overlay.hidden { display: none; }
    .aic-modal { background: var(--bj-panel); border: 1px solid var(--bj-border); border-radius: var(--bj-radius-box);
      width: 100%; max-width: 640px; padding: 16px; margin: auto; display: flex; flex-direction: column; gap: 10px;
      box-shadow: var(--bj-shadow-pop); }
    .aic-head { display: flex; align-items: center; gap: 8px; }
    .aic-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .aic-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bj-text); }
    .aic-tracks { display: flex; flex-wrap: wrap; gap: 6px; }
    .aic-trackrow { display: inline-flex; align-items: center; gap: 4px; }
    .aic-promptflow { border-top: 1px dashed var(--bj-border); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
    .aic-trackrow select { max-width: 130px; font-size: 12px; }
    .aic-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--bj-border);
      border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--bj-text);
      background: var(--bj-panel-2); user-select: none; }
    .aic-chip.on { background: var(--bj-accent); color: var(--bj-accent-ink); border-color: transparent; }
    .song-grid { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; padding: 4px 0; }
    .sg-row { display: flex; gap: 2px; align-items: center; }
    .sg-lab { flex: 0 0 26px; font-size: 10px; opacity: .6; text-align: right; padding-right: 4px; font-family: monospace; }
    .sg-cell { flex: 0 0 34px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
      font-family: monospace; font-size: 11px; border: 1px solid var(--bj-border); border-radius: 5px;
      background: var(--bj-panel-2); cursor: pointer; color: var(--bj-text); user-select: none; }
    .sg-cell.has { background: var(--bj-accent); color: var(--bj-accent-ink); border-color: transparent; font-weight: 700; }
    .sg-cell.playing { outline: 2px solid var(--bj-accent-2); outline-offset: -1px; }
    .sg-head .sg-cell { background: none; border-color: transparent; cursor: default; opacity: .55; font-size: 10px; }
    .bank-preview { border: 1px dashed var(--bj-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
    .bank-preview.hidden { display: none; }
    .bp-head { font-size: 12px; color: var(--bj-text); margin-bottom: 6px; }
    .bp-names { display: flex; flex-wrap: wrap; gap: 3px; max-height: 96px; overflow-y: auto; }
    .bp-name { font-size: 10px; font-family: monospace; background: var(--bj-panel-2);
      border: 1px solid var(--bj-border); border-radius: 4px; padding: 1px 5px; color: var(--bj-text); opacity: .85; }
    .bank-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bj-panel-2);
      border: 1px solid var(--bj-border); border-radius: 8px; padding: 3px 8px; font-size: 12px; color: var(--bj-text); cursor: pointer; }
    .bank-chip.loaded { cursor: default; border-color: var(--bj-accent); }
    .bank-chip .bank-x, .bank-chip .bank-save { background: none; border: none; cursor: pointer; font-size: 11px; padding: 0 2px; color: var(--bj-text); opacity: .7; }
    .bank-chip .bank-x:hover, .bank-chip .bank-save:hover { opacity: 1; }
    .song-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--bj-panel-2); border: 1px solid var(--bj-border); border-radius: 8px; padding: 2px 4px; }
    .song-chip button { font: inherit; font-size: 12px; background: none; border: none; cursor: pointer; color: var(--bj-text); padding: 2px 6px; border-radius: 6px; }
    .song-chip button:hover { background: rgba(128,128,160,.18); }
    /* Real-engine sample loading indicators — one chip per instrument */
    .sample-status { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; padding-top: 8px; }
    .ss-chip {
      font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 600;
      padding: 2px 9px; border-radius: 999px; border: 1px solid var(--bj-border);
      color: var(--bj-text-dim); transition: color .2s, border-color .2s;
    }
    .ss-chip.part { color: var(--bj-warn); border-color: color-mix(in oklab, var(--color-warning, #f59e0b) 55%, transparent); }
    .ss-chip.done { color: var(--bj-ok); border-color: color-mix(in oklab, var(--color-success, #22c55e) 55%, transparent); }
    .ss-chip.none { opacity: .45; }
  </style>
<meta name="description" content="Jam together in real time — tracker patterns, 116 ST-XX sample disks with content preview, multi-layer song arrangement, AI composer (in-app or your own AI chat)">
<meta property="og:title" content="Band Jam">
<meta property="og:description" content="Jam together in real time — tracker patterns, 116 ST-XX sample disks with content preview, multi-layer song arrangement, AI composer (in-app or your own AI chat)">
<meta property="og:url" content="https://band-jam.apps.aimeat.io/">
<meta property="og:type" content="website">
<link rel="canonical" href="https://band-jam.apps.aimeat.io/">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#FAFAF8">
<link rel="apple-touch-icon" href="https://aimeat.io/icons/apple-touch-icon.png">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"Band Jam","description":"Jam together in real time — tracker patterns, 116 ST-XX sample disks with content preview, multi-layer song arrangement, AI composer (in-app or your own AI chat)","url":"https://band-jam.apps.aimeat.io/","applicationCategory":"WebApplication","operatingSystem":"Any","author":{"@type":"Person","name":"happydude500001"},"isPartOf":{"@type":"WebSite","name":"AIMEAT","url":"https://aimeat.io/"},"dateModified":"2026-07-26"}</script>
</head>
<body class="bg-base-100 min-h-screen flex flex-col">
  <nav class="navbar shadow-sm px-4">
    <div class="flex-1">
      <img class="bj-logo" src="https://aimeat.io/v1/pub/happydude500001%40aimeat-finland-001-genesis/gen.img.bandjam-logo" alt="" />
      <span class="text-lg font-bold bj-accent">Band Jam</span>
      <span class="nav-subtitle ml-2 text-xs opacity-60">jam together · tracker patterns · keyjazz</span>
    </div>
    <div class="flex-none"><span id="header-auth"></span></div>
  </nav>

  <div id="app" class="flex-1 p-4 max-w-6xl mx-auto w-full">
    <p class="opacity-60">Loading...</p>
  </div>

  <script>
    // ============================================================
    //  Loader + boot
    // ============================================================
    function loadScript(src) {
      return new Promise((resolve, reject) => {
        const s = document.createElement('script');
        s.src = src; s.onload = resolve; s.onerror = reject;
        document.head.appendChild(s);
      });
    }

    async function boot() {
      await loadScript('/v1/libs/aimeat-auth.js');
      await loadScript('/v1/libs/aimeat-data.js');
      await loadScript('/lib/realtime.js');
      await loadScript('/v1/libs/aimeat-audio.js');
      // Optional: the AI Band's LLM arranger uses this (user's own OpenRouter key).
      // Non-fatal if it fails to load — the deterministic AI Band still works.
      try { await loadScript('/v1/libs/aimeat-ai.js'); } catch (e) { console.warn('aimeat-ai.js unavailable — LLM arranger disabled'); }

      AIMEAT.auth.mountLoginButton('#header-auth', {
        onLogin: (session) => startApp(session),
        onLogout: () => location.reload(),
      });
      const session = await AIMEAT.auth.login();
      if (session) startApp(session);
    }

    // ============================================================
    //  Global state
    // ============================================================
    const PITCHED_INSTRUMENTS = ['piano', 'epiano', 'guitar', 'guitar-steel', 'guitar-el', 'bass', 'flute', 'trumpet', 'strings', 'organ', 'synth'];
    const ALL_INSTRUMENTS = [...PITCHED_INSTRUMENTS, 'drums'];
    const INST_LABELS = { guitar: 'guitar (nylon)', 'guitar-steel': 'guitar (steel)', 'guitar-el': 'guitar (electric)', epiano: 'e-piano' };
    const INST_SHORT = { 'guitar-steel': 'stee', 'guitar-el': 'elec', epiano: 'epno', strings: 'strg', trumpet: 'trmp' };
    // One options-list builder for EVERY instrument select (track header + AI dialog):
    // base instruments + an optgroup per loaded sample bank.
    function instrumentOptionsHtml(sel) {
      return ALL_INSTRUMENTS.map(i => '<option value="' + i + '"' + (i === sel ? ' selected' : '') + '>' + instLabel(i) + '</option>').join('')
        + state.sampleBanks.map((b, bi) => '<optgroup label="📼 ' + escapeHtml(b.name) + '">'
          + b.samples.map((s, si) => '<option value="smp:' + bi + ':' + si + '"' + (sel === ('smp:' + bi + ':' + si) ? ' selected' : '') + '>' + escapeHtml(s.name) + '</option>').join('')
          + '</optgroup>').join('');
    }
    // Sample-bank instruments ('smp:0:12') display the sample's own name.
    function instDisplay(id) {
      if (id && id.startsWith('smp:')) {
        const m = /^smp:(\d+):(\d+)$/.exec(id);
        const s = m && state.sampleBanks[+m[1]] && state.sampleBanks[+m[1]].samples[+m[2]];
        return s ? s.name : 'sample';
      }
      return INST_SHORT[id] || id;
    }
    const instLabel = (i) => INST_LABELS[i] || i;

    // Pitched: FastTracker-II-style two-octave keymap
    // Lower row (Z-row): C4..D#5
    // Upper row (Q-row): C5..F6
    const PITCHED_KEYMAP = {
      'KeyZ': 'C4',  'KeyS': 'C#4', 'KeyX': 'D4',  'KeyD': 'D#4', 'KeyC': 'E4',
      'KeyV': 'F4',  'KeyG': 'F#4', 'KeyB': 'G4',  'KeyH': 'G#4', 'KeyN': 'A4',
      'KeyJ': 'A#4', 'KeyM': 'B4',  'Comma': 'C5', 'KeyL': 'C#5', 'Period': 'D5',
      'KeyQ': 'C5',  'Digit2': 'C#5', 'KeyW': 'D5', 'Digit3': 'D#5', 'KeyE': 'E5',
      'KeyR': 'F5',  'Digit5': 'F#5', 'KeyT': 'G5', 'Digit6': 'G#5', 'KeyY': 'A5',
      'Digit7': 'A#5', 'KeyU': 'B5', 'KeyI': 'C6',
    };

    // Drum keymap
    const DRUM_KEYMAP = {
      'KeyZ': 'kick', 'KeyX': 'snare', 'KeyC': 'hihat', 'KeyV': 'hihat-open',
      'KeyB': 'tom-low', 'KeyN': 'tom-mid', 'KeyM': 'tom-high',
      'KeyQ': 'crash', 'KeyW': 'ride', 'KeyE': 'clap', 'KeyR': 'cowbell',
    };

    // Your OWN notes on the river: white is the LCD's head ink — it stays legible on
    // every palette-tinted screen AND stays distinct from all eight peer colours.
    const SELF_RIVER_INK = '#fff';
    // Peer swatches are a CATEGORICAL set: their job is to tell eight players apart on the
    // note river, so they stay fixed instead of following the palette (identity, not theme).
    const PEER_COLORS = ['#E8564A', '#6366F1', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6', '#06b6d4', '#84cc16'];

    const state = {
      session: null,
      view: 'lobby',  // 'lobby' | 'room'
      rt: null,
      room: null,

      // Local user
      nick: null,

      // Transport (shared timeline)
      bpm: 120,
      t0: null,                 // unix ms — when "step 0 of bar 0" happened
      transportPlaying: false,
      loopEnabled: false,       // global: are any patterns looping?
      // ProTracker-style arrangement: banks (patterns) + order list (song positions)
      banks: null,              // [bankIdx][trackIdx] = pattern array — seeded after tracks exist
      currentBank: 0,           // the bank being EDITED (and looped in Loop mode)
      // 🎼 Song arrangement — LAYERS: each song track is a row of pattern ids (null = '--').
      // At every position ALL rows' patterns play together: pos1 = P0+P5, pos2 = P1+P6, …
      songTracks: [[0]],
      patternLen: 16,           // SONG setting — steps per pattern (16/32/48/64), applies to all
      songMode: false,          // transport follows the arrangement instead of looping one bank
      songAnchor: null,         // { step, pos } — where the current position started

      // Tracks: 9 channels, each with its own instrument, pattern, volume, on/off
      tracks: Array.from({ length: 9 }, (_, i) => ({
        instrument: i === 2 ? 'drums' : (i === 1 ? 'bass' : 'piano'),
        pattern: new Array(16).fill(null), // each: { note, vel } or null
        volume: 0.85,
        enabled: true,
      })),
      activeTrack: 0,           // which track the keyboard + tracker grid edit

      // Input mode: 'live' = play+broadcast, 'edit' = enter at cursor,
      //             'record' = enter at quantized current step (transport must play)
      inputMode: 'live',

      // Tracker editor cursor (used in edit mode only)
      cursor: 0,

      // Pattern playback tracker
      lastPlayedStep: -1,

      // Peers (peerId -> { nick, instrument, color })
      peers: new Map(),

      // Note river (canvas) — recent notes for visual feedback
      river: [],                // { color, note, label, t }

      // 📼 Sample banks — loaded ASB banks: { id, name, source(url|null), samples:[{name, buffer}] }
      sampleBanks: [],

      // Reconnect tracking
      leftIntentionally: false,
      reconnectDelay: 500,
      reconnecting: false,

      // AI Band — an in-app bandmate that plays drums/bass/chords/arp on the
      // shared transport clock, inferring your key + groove from your live notes.
      ai: {
        enabled: false,
        style: 'lofi',
        scaleName: 'dorian',      // derived from the chosen style
        parts: { drums: true, bass: true, chords: true, arp: false },
        follow: true,             // transpose to the key detected from your playing
        intensity: 0.6,           // 0..1 — how densely the AI fills
        root: 9,                  // detected tonic pitch-class (A=9 default)
        pcHist: new Array(12).fill(0),
        lastHumanNoteAt: 0,
        color: '#8b5cf6',   // the AI bandmate's fixed swatch — categorical, like PEER_COLORS
        bpmPinned: false,         // once the user edits BPM, stop auto-setting it
        // Optional LLM arranger — OFF by default (spends nothing unless enabled).
        // When on, an LLM re-arranges the chord progression / parts every few bars
        // via AIMEAT.ai (the user's own OpenRouter key). The deterministic engine
        // always plays; the LLM only supplies a plan it plays in time.
        llm: false,
        llmBusy: false,
        llmPlan: null,            // { chordProg:[..] } override, or null = use the style's
        llmAt: 0,
      },
    };

    // Convenience getter — used everywhere
    function at() { return state.tracks[state.activeTrack]; }
    // Bank 0 shares the track pattern arrays by REFERENCE — tracks[i].pattern must always
    // alias banks[currentBank][i]; use setTrackPattern for every pattern replacement.
    state.banks = [state.tracks.map(t => t.pattern)];
    function setTrackPattern(i, arr) {
      state.tracks[i].pattern = arr;
      state.banks[state.currentBank][i] = arr;
    }
    function bankPosLen(bIdx) {
      const bank = state.banks[bIdx] || state.banks[0];
      return Math.max(...bank.map(p => p.length));
    }
    function songHasAny() { return state.songTracks.some(r => r.some(c => c !== null && c !== undefined)); }
    function songPosCount() { return Math.max(1, ...state.songTracks.map(r => r.length)); }
    function cellsAt(pos) {
      return state.songTracks.map(r => r[pos]).filter(c => c !== null && c !== undefined && state.banks[c]);
    }
    function posLenAt(pos) {
      const cells = cellsAt(pos);
      if (!cells.length) return state.patternLen;   // an all '--' column = a silent gap
      return Math.max(...cells.map(bankPosLen));
    }
    // 🧭 Steps/pattern — a SONG setting: resizes every pattern in every bank (keeps notes up to min).
    function setPatternLen(L) {
      state.patternLen = L;
      state.banks.forEach(bank => bank.forEach((p, ti) => {
        if (p.length === L) return;
        const next = new Array(L).fill(null);
        for (let i = 0; i < Math.min(L, p.length); i++) next[i] = p[i];
        bank[ti] = next;
      }));
      state.tracks.forEach((t, ti) => { t.pattern = state.banks[state.currentBank][ti]; });
      state.cursor = Math.min(state.cursor, L - 1);
      state.songAnchor = null;
      renderTracker(); renderTrackTabs(); renderTrackHeader();
    }

    // ============================================================
    //  AI Band — a bandmate that follows your lead
    //
    //  It runs entirely in the browser: no network round-trip, so it's
    //  always available and always in time. Each transport step it decides
    //  what drums/bass/chords/arp to play, transposed to the key it hears
    //  you playing in. Notes are played locally AND broadcast, so other
    //  humans in the room hear (and see) the AI as a band member too.
    // ============================================================
    const NOTE_TO_SEMI = { 'C':0,'C#':1,'D':2,'D#':3,'E':4,'F':5,'F#':6,'G':7,'G#':8,'A':9,'A#':10,'B':11 };
    const SEMI_TO_NOTE = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
    const SCALES = {
      major:     [0, 2, 4, 5, 7, 9, 11],
      minor:     [0, 2, 3, 5, 7, 8, 10],
      dorian:    [0, 2, 3, 5, 7, 9, 10],
      minorPent: [0, 3, 5, 7, 10],
    };

    function noteToPc(note) {
      const m = String(note).match(/^([A-G]#?)(-?\d+)$/);
      return m ? NOTE_TO_SEMI[m[1]] : null;   // null = not pitched (a drum hit)
    }
    // Scale degree (can be <0 or >len — wraps with octave carry) → note string.
    function degToNote(root, scaleName, degree, octave) {
      const sc = SCALES[scaleName] || SCALES.minor;
      const n = sc.length;
      const idx = ((degree % n) + n) % n;
      const octShift = Math.floor(degree / n);
      const semi = root + sc[idx];
      const oct = octave + octShift + Math.floor(semi / 12);
      return SEMI_TO_NOTE[((semi % 12) + 12) % 12] + oct;
    }

    // Style presets. Each is a 16-step bar. Drum arrays = steps that fire.
    // chordProg = one chord (scale degree) per beat (4 beats/bar). bass/chord/arp
    // steps reference the current beat's chord. Kept compact on purpose.
    const AI_STYLES = {
      lofi:    { label: 'Lo-fi',   bpm: 82,  scale: 'dorian',    bassOct: 2, chordOct: 3, arpOct: 4,
                 chordProg: [0, 5, 3, 4],
                 kick: [0, 8, 10], snare: [4, 12], hat: [2, 6, 10, 14], open: [], clap: [], ride: [], crash: [],
                 bassSteps: [0, 8, 11], chordSteps: [0, 8], arpSteps: [] },
      funk:    { label: 'Funk',    bpm: 108, scale: 'dorian',    bassOct: 2, chordOct: 3, arpOct: 4,
                 chordProg: [0, 0, 3, 4],
                 kick: [0, 3, 8, 10, 14], snare: [4, 12], hat: [0, 2, 4, 6, 8, 10, 12, 14], open: [7], clap: [], ride: [], crash: [],
                 bassSteps: [0, 2, 3, 6, 8, 10, 11, 14], chordSteps: [2, 6, 10], arpSteps: [] },
      house:   { label: 'House',   bpm: 124, scale: 'minor',     bassOct: 2, chordOct: 3, arpOct: 4,
                 chordProg: [0, 0, 5, 5],
                 kick: [0, 4, 8, 12], snare: [], hat: [], open: [2, 6, 10, 14], clap: [4, 12], ride: [], crash: [],
                 bassSteps: [2, 6, 10, 14], chordSteps: [0, 8], arpSteps: [] },
      jazz:    { label: 'Jazz',    bpm: 132, scale: 'dorian',    bassOct: 2, chordOct: 3, arpOct: 4,
                 chordProg: [0, 3, 4, 1],
                 kick: [0], snare: [], hat: [4, 12], open: [], clap: [], ride: [0, 3, 4, 7, 8, 11, 12, 15], crash: [],
                 bassSteps: [0, 4, 8, 12], chordSteps: [2, 6, 10, 14], arpSteps: [] },
      rock:    { label: 'Rock',    bpm: 120, scale: 'minor',     bassOct: 2, chordOct: 3, arpOct: 4,
                 chordProg: [0, 0, 5, 4],
                 kick: [0, 6, 8], snare: [4, 12], hat: [0, 2, 4, 6, 8, 10, 12, 14], open: [], clap: [], ride: [], crash: [0],
                 bassSteps: [0, 2, 4, 6, 8, 10, 12, 14], chordSteps: [0, 8], arpSteps: [] },
      ambient: { label: 'Ambient', bpm: 70,  scale: 'major',     bassOct: 2, chordOct: 3, arpOct: 4,
                 chordProg: [0, 0, 3, 3],
                 kick: [0], snare: [], hat: [], open: [], clap: [], ride: [], crash: [],
                 bassSteps: [0], chordSteps: [0], arpSteps: [0, 2, 4, 6, 8, 10, 12, 14] },
    };
    const AI_DRUM_MAP = { kick: 'kick', snare: 'snare', hat: 'hihat', open: 'hihat-open', clap: 'clap', ride: 'ride', crash: 'crash' };

    // Feed a note the human just played into the key detector.
    function feedHumanNote(note) {
      const pc = noteToPc(note);
      if (pc == null) return;                    // drum hit → no pitch info
      state.ai.lastHumanNoteAt = Date.now();
      for (let i = 0; i < 12; i++) state.ai.pcHist[i] *= 0.9;   // decay
      state.ai.pcHist[pc] += 1;
      if (state.ai.follow) updateDetectedRoot();
    }
    // Pick the tonic that best explains the notes you've been playing.
    function updateDetectedRoot() {
      const sc = SCALES[state.ai.scaleName] || SCALES.minor;
      let bestRoot = state.ai.root, bestScore = -1;
      for (let r = 0; r < 12; r++) {
        let s = 0;
        for (const off of sc) s += state.ai.pcHist[(r + off) % 12];
        s += state.ai.pcHist[r] * 0.6;           // tonic bonus
        if (s > bestScore) { bestScore = s; bestRoot = r; }
      }
      state.ai.root = bestRoot;
      updateAiStatus();
    }

    // Decide what the AI plays on this step. Returns a notes-batch array.
    function aiNotesForStep(step) {
      const ai = state.ai;
      const st = AI_STYLES[ai.style] || AI_STYLES.lofi;
      const batch = [];
      const active = (Date.now() - ai.lastHumanNoteAt) < 3500;   // are you playing right now?
      const dens = ai.intensity;
      // The LLM arranger (if on) supplies a progression; otherwise use the style's.
      const prog = (ai.llmPlan && ai.llmPlan.chordProg && ai.llmPlan.chordProg.length) ? ai.llmPlan.chordProg : st.chordProg;
      const beat = Math.floor(step / 4) % prog.length;
      const chordDeg = prog[beat];
      const push = (instrument, note, velocity) => batch.push({ instrument, note, velocity });

      // ── Drums: the groove keeps going even when you rest (that's a band) ──
      if (ai.parts.drums) {
        if (st.kick.includes(step))  push('drums', 'kick', 0.92);
        if (st.snare.includes(step)) push('drums', 'snare', 0.85);
        if (st.crash.includes(step)) push('drums', 'crash', 0.7);
        if (st.ride.includes(step))  push('drums', 'ride', 0.4 + (step % 4 === 0 ? 0.15 : 0));
        // Hats/claps thin out with lower intensity
        if (st.hat.includes(step)  && (dens > 0.25 || step % 4 === 0)) push('drums', 'hihat', 0.35 + (step % 4 === 0 ? 0.2 : 0));
        if (st.open.includes(step) && dens > 0.35) push('drums', 'hihat-open', 0.5);
        if (st.clap.includes(step)) push('drums', 'clap', 0.8);
      }
      // ── Bass: locks to the current chord's root ──
      if (ai.parts.bass && st.bassSteps.includes(step)) {
        // occasional octave/fifth ornament for movement
        const orn = (step % 8 === 3) ? 4 : (step % 8 === 6 ? 7 - 0 : 0); // fifth-ish on some steps
        const deg = chordDeg + (orn === 4 ? 2 : 0);
        push('bass', degToNote(ai.root, st.scale, deg, st.bassOct), 0.85);
      }
      // ── Chords: stab the triad; thin to beat 1 when you're not playing.
      //    'chords' isn't a built-in instrument — voice it on flute (warm pad). ──
      if (ai.parts.chords && st.chordSteps.includes(step) && (active || step % 8 === 0)) {
        for (const t of [0, 2, 4]) push('flute', degToNote(ai.root, st.scale, chordDeg + t, st.chordOct), 0.5 + dens * 0.2);
      }
      // ── Arp: only when you're actively leading, and only if enabled ──
      if (ai.parts.arp && active && st.arpSteps.includes(step)) {
        const tone = [0, 2, 4][(step / 2 | 0) % 3];
        push('synth', degToNote(ai.root, st.scale, chordDeg + tone, st.arpOct), 0.45);
      }
      return batch;
    }

    // ── AI Band UI glue ──
    function toggleAiBand() {
      state.ai.enabled = !state.ai.enabled;
      const btn = document.getElementById('ai-toggle');
      const controls = document.getElementById('ai-controls');
      if (state.ai.enabled) {
        state.ai.scaleName = (AI_STYLES[state.ai.style] || AI_STYLES.lofi).scale;
        applyStyleBpm();
        if (!state.transportPlaying) toggleTransport();   // the band needs a running clock
        if (btn) { btn.textContent = '■ Stop AI band'; btn.classList.replace('bj-btn-indigo', 'bj-btn-accent'); }
        if (controls) controls.style.display = 'block';
        updateDetectedRoot();
      } else {
        if (btn) { btn.textContent = 'Add AI bandmate'; btn.classList.replace('bj-btn-accent', 'bj-btn-indigo'); }
        if (controls) controls.style.display = 'none';
      }
      updateAiStatus();
      renderPeerList();   // show/hide the AI band chip
    }

    // Adopt the style's natural tempo — unless the user has taken over BPM.
    function applyStyleBpm() {
      if (state.ai.bpmPinned) return;
      const st = AI_STYLES[state.ai.style] || AI_STYLES.lofi;
      const oldStep = currentStep();
      state.bpm = st.bpm;
      if (oldStep >= 0 && state.t0) state.t0 = Date.now() - oldStep * stepDurationMs();  // keep the beat from jumping
      updateTransportUI();
      if (state.rt) { try { state.rt.broadcast({ type: 'bpm', bpm: state.bpm }); } catch {} }
    }

    function updateAiStatus() {
      const el = document.getElementById('ai-status');
      if (!el) return;
      if (!state.ai.enabled) { el.textContent = ''; return; }
      const label = `${SEMI_TO_NOTE[state.ai.root]} ${state.ai.scaleName}`;
      el.textContent = state.ai.follow ? `♪ hearing key: ${label}` : `♪ ${label}`;
    }

    // The copy-paste prompt that turns any code-capable AI into a real networked bandmate.
    function buildAgentInvitePrompt() {
      const origin = location.origin;
      const node = origin.replace(/^https?:\/\//, '');
      return [
        `You're joining a live "Band Jam" room on AIMEAT (${node}) as a networked bandmate.`,
        ``,
        `Room: "${state.room.name}"   id: ${state.room.id}`,
        `Node: ${origin}`,
        ``,
        `Steps:`,
        `1. Load the AIMEAT skill named "band-jam" — it carries the full jam protocol`,
        `   (message schema, the shared t0 transport clock, instrument + note vocabulary).`,
        `2. Get a JWT for your GAII on this node, then open the realtime WebSocket:`,
        `   wss://${node}/v1/realtime/ws?room=${state.room.id}&token=<YOUR_JWT>&nick=<your-name>`,
        `3. On the "joined" frame, send {type:"broadcast",payload:{type:"who",nick,instrument}}.`,
        `   Listen for {type:"broadcast"} frames. When the human plays (payload.type "note"),`,
        `   infer their key + tempo and comp along. Send a whole step across instruments as`,
        `   {type:"broadcast",payload:{type:"notes-batch",notes:[{instrument,note,velocity}]}}.`,
        `   Play ON the shared clock: step = floor((Date.now()-t0)/(60000/bpm/4)) % 16,`,
        `   where t0/bpm arrive in the {type:"transport"} / {type:"sync-state"} payloads.`,
        ``,
        `Instruments: piano, guitar, bass, flute, synth, drums. Drum "notes" are names:`,
        `kick snare hihat hihat-open tom-low tom-mid tom-high crash ride clap cowbell.`,
        `Follow the human's lead: fill space, thin out when they solo, lock to their key.`,
      ].join('\n');
    }

    // ── Optional LLM arranger — re-arranges chords/parts via the user's OpenRouter key ──
    function setLlmNote(t) { const el = document.getElementById('ai-llm-status'); if (el) el.textContent = t || ''; }

    function recentHumanPitches() {
      // Top pitch-classes the human has been playing, as note names — context for the LLM.
      return state.ai.pcHist
        .map((v, pc) => ({ pc, v }))
        .filter(x => x.v > 0.15)
        .sort((a, b) => b.v - a.v)
        .slice(0, 5)
        .map(x => SEMI_TO_NOTE[x.pc])
        .join(' ') || '(none yet)';
    }

    function syncPartCheckboxes() {
      document.querySelectorAll('#ai-parts input[data-part]').forEach(cb => {
        cb.checked = !!state.ai.parts[cb.dataset.part];
      });
    }

    async function requestLlmPlan(force) {
      if (!state.ai.llm || state.ai.llmBusy) return;
      if (!window.AIMEAT || !AIMEAT.ai) return;
      const now = Date.now();
      if (!force && now - state.ai.llmAt < 20000) return;   // re-arrange at most ~every 20s
      state.ai.llmBusy = true; state.ai.llmAt = now; setLlmNote('🧠 arranging…');
      const st = AI_STYLES[state.ai.style] || AI_STYLES.lofi;
      const keyName = `${SEMI_TO_NOTE[state.ai.root]} ${state.ai.scaleName}`;
      try {
        const r = await AIMEAT.ai.completeJson({
          app_id: 'band-jam',
          modelRole: 'execution',
          temperature: 0.85,
          systemPrompt: 'You are a tasteful band arranger driving a 16-step loop sequencer. Keep it musical and in-key.',
          prompt: `Style: ${st.label}. Key: ${keyName}. A human is soloing over your backing.\n`
            + `Recent human pitch-classes: ${recentHumanPitches()}.\n`
            + `Give ONE bar as a 4-chord progression in SCALE DEGREES (integers 0-6, 0=tonic, one per beat), `
            + `and which of your parts to play. Return JSON only:\n`
            + `{"chordProg":[0,5,3,4],"parts":{"drums":true,"bass":true,"chords":true,"arp":false},"note":"short vibe phrase"}`,
        });
        const p = (r && r.parsed) || {};
        if (Array.isArray(p.chordProg) && p.chordProg.length) {
          state.ai.llmPlan = { chordProg: p.chordProg.slice(0, 4).map(n => ((Math.trunc(n) % 7) + 7) % 7) };
          if (p.parts && typeof p.parts === 'object') {
            for (const k of ['drums', 'bass', 'chords', 'arp']) if (k in p.parts) state.ai.parts[k] = !!p.parts[k];
            syncPartCheckboxes();
          }
          setLlmNote('🧠 ' + (p.note ? String(p.note).slice(0, 44) : 'arranged'));
        } else {
          setLlmNote('🧠 kept the groove');
        }
      } catch (err) {
        // Turn it back off and say why (NO_API_KEY, APP_NOT_ALLOWED, QUOTA_EXHAUSTED, …)
        state.ai.llm = false; state.ai.llmPlan = null;
        const cb = document.getElementById('ai-llm'); if (cb) cb.checked = false;
        setLlmNote('LLM off — ' + (err.code || err.message || 'error'));
      } finally {
        state.ai.llmBusy = false;
      }
    }

    async function toggleLlmArranger(on) {
      if (!on) { state.ai.llm = false; state.ai.llmPlan = null; setLlmNote(''); return; }
      if (!window.AIMEAT || !AIMEAT.ai) { const cb = document.getElementById('ai-llm'); if (cb) cb.checked = false; setLlmNote('AI lib not loaded on this node'); return; }
      setLlmNote('checking your AI key…');
      const ok = await AIMEAT.ai.isAvailable().catch(() => false);
      if (!ok) { const cb = document.getElementById('ai-llm'); if (cb) cb.checked = false; setLlmNote('needs an OpenRouter key — set one in AIMEAT settings'); return; }
      state.ai.llm = true;
      setLlmNote('on · re-arranges every few bars');
      requestLlmPlan(true);   // first plan immediately
    }

    // ============================================================
    //  Entry point
    // ============================================================
    function startApp(session) {
      state.session = session;
      state.nick = (session.owner || 'anon').slice(0, 16);
      renderLobby();
    }

    // ============================================================
    //  Lobby — list rooms, create or join
    // ============================================================
    async function renderLobby() {
      // Lobby has no live keyboard — drop the mode frame + class.
      document.body.classList.remove('in-room');
      delete document.body.dataset.im;
      const app = document.getElementById('app');
      app.innerHTML = `
        <div class="panel">
          <img class="bj-hero" src="https://aimeat.io/v1/pub/happydude500001%40aimeat-finland-001-genesis/gen.img.bandjam-hero" alt="" />
          <h1 class="text-2xl font-bold mb-1" style="color:var(--bj-heading);">Find a band</h1>
          <p class="opacity-60 mb-4 text-sm">Join an open room or start your own. Public rooms only.</p>

          <div class="flex gap-2 mb-6">
            <input id="new-room-name" type="text" placeholder="New room name (e.g. 'Friday jam')"
              class="input input-bordered flex-1" maxlength="40" />
            <button id="create-btn" class="btn bj-btn-accent">
              Create &amp; Join
            </button>
          </div>

          <h2 class="text-lg font-semibold mb-2" style="color:var(--bj-text);">Open rooms</h2>
          <div id="room-list" class="space-y-2">
            <p class="opacity-50 text-sm">Loading rooms...</p>
          </div>
        </div>
      `;

      document.getElementById('create-btn').addEventListener('click', async () => {
        const name = document.getElementById('new-room-name').value.trim() || `${state.nick}'s jam`;
        await createAndJoin(name);
      });
      document.getElementById('new-room-name').addEventListener('keydown', async (e) => {
        if (e.key === 'Enter') document.getElementById('create-btn').click();
      });

      // Spin up a temporary realtime instance just to list rooms
      const tmp = new AimeatRealtime(location.origin, state.session.jwt);
      try {
        const result = await tmp.listRooms({ app_type: 'band-jam' });
        const rooms = (result && result.rooms) || result || [];
        const listEl = document.getElementById('room-list');
        if (!rooms.length) {
          listEl.innerHTML = '<p class="opacity-50 text-sm">No active rooms. Create one above.</p>';
          return;
        }
        listEl.innerHTML = rooms.map(r => `
          <div class="flex items-center justify-between p-3 panel" style="background:var(--bj-panel-2);">
            <div>
              <div class="font-semibold">${escapeHtml(r.name || 'unnamed')}</div>
              <div class="text-xs opacity-60">${r.peer_count || 0} peer(s) · id: ${r.id.slice(0,8)}</div>
            </div>
            <button class="btn btn-sm bj-btn-indigo" data-room="${r.id}">
              Join
            </button>
          </div>
        `).join('');
        listEl.querySelectorAll('button[data-room]').forEach(btn => {
          btn.addEventListener('click', () => joinExisting(btn.dataset.room));
        });
      } catch (err) {
        console.error('listRooms failed', err);
        document.getElementById('room-list').innerHTML =
          '<p class="opacity-50 text-sm">Could not list rooms. Create a new one.</p>';
      }
    }

    async function createAndJoin(name) {
      const rt = new AimeatRealtime(location.origin, state.session.jwt);
      try {
        const room = await rt.createRoom({
          app_type: 'band-jam',
          name: name,
          is_public: true,
          tags: ['music', 'jam', 'tracker'],
        });
        state.room = room;
        state.rt = rt;
        connectAndRender();
      } catch (err) {
        console.error('createRoom failed', err);
        alert('Could not create room: ' + (err.message || err));
      }
    }

    async function joinExisting(roomId) {
      const rt = new AimeatRealtime(location.origin, state.session.jwt);
      try {
        const room = await rt.getRoom(roomId);
        state.room = room;
        state.rt = rt;
        connectAndRender();
      } catch (err) {
        console.error('getRoom failed', err);
        alert('Could not join room: ' + (err.message || err));
      }
    }

    // ============================================================
    //  Connect realtime + render the room
    // ============================================================
    function connectAndRender() {
      const rt = state.rt;

      // Handlers MUST be registered before connect()
      rt.on('joined', onJoined);
      rt.on('broadcast', onBroadcast);
      rt.on('peer-joined', onPeerJoined);
      rt.on('peer-left', onPeerLeft);
      rt.on('close', onClose);

      rt.connect(state.room.id, state.nick);

      state.view = 'room';
      renderRoom();
      startPatternClock();
      startRiverLoop();
    }

    function onJoined(msg) {
      // msg.peerId = my id, msg.peers = existing peers
      state.reconnectDelay = 500;        // reset backoff after a successful join
      hideBanner();
      // Announce ourselves so peers learn our instrument + nick
      announceSelf();
      // Ask the room for current transport state in case jam is already going
      state.rt.broadcast({ type: 'sync-request' });
      renderPeerList();
    }

    function onBroadcast(msg) {
      const { from, payload } = msg || {};
      if (!payload || !payload.type) return;

      switch (payload.type) {
        case 'note': {
          // Single live note from a peer
          const peer = state.peers.get(from);
          const color = peer ? peer.color : '#888';
          // Route through playLocal so peers' notes use YOUR selected sound engine too.
          playLocal(payload.instrument, payload.note, payload.velocity ?? 0.8);
          pushRiver({ color, label: `${payload.note}`, t: Date.now() });
          break;
        }
        case 'notes-batch': {
          // Multi-track pattern step from a peer — many notes at once
          const peer = state.peers.get(from);
          const color = peer ? peer.color : '#888';
          for (const n of (payload.notes || [])) {
            try {
              AIMEAT.audio.play(n.instrument, n.note, { velocity: n.velocity ?? 0.8 });
            } catch (e) { console.warn('audio.play failed:', e); }
            pushRiver({ color, label: n.note, t: Date.now() });
          }
          break;
        }
        case 'who': {
          const existing = state.peers.get(from) || { color: pickColor() };
          state.peers.set(from, {
            ...existing,
            nick: payload.nick || 'anon',
            instrument: payload.instrument || 'piano',
          });
          renderPeerList();
          break;
        }
        case 'sync-request': {
          // Reply with current transport state if we have one
          if (state.transportPlaying || state.t0) {
            state.rt.broadcast({
              type: 'sync-state',
              t0: state.t0,
              bpm: state.bpm,
              transportPlaying: state.transportPlaying,
            });
          }
          break;
        }
        case 'sync-state': {
          // Adopt only if we don't already have a transport going
          if (!state.transportPlaying && payload.t0) {
            state.t0 = payload.t0;
            state.bpm = payload.bpm || 120;
            state.transportPlaying = !!payload.transportPlaying;
            updateTransportUI();
          }
          break;
        }
        case 'transport': {
          state.t0 = payload.t0;
          state.bpm = payload.bpm || 120;
          state.transportPlaying = payload.state === 'play';
          state.lastPlayedStep = -1;
          updateTransportUI();
          break;
        }
        case 'bpm': {
          // Adjust t0 so current step doesn't jump
          const oldStep = currentStep();
          state.bpm = payload.bpm;
          if (oldStep >= 0) {
            const newStepMs = stepDurationMs();
            state.t0 = Date.now() - oldStep * newStepMs;
          }
          updateTransportUI();
          break;
        }
      }
    }

    function onPeerJoined(msg) {
      // msg.peerId, msg.nick
      if (!state.peers.has(msg.peerId)) {
        state.peers.set(msg.peerId, {
          nick: msg.nick || 'anon',
          instrument: 'piano',
          color: pickColor(),
        });
      }
      // Re-announce ourselves so the newcomer learns our instrument
      announceSelf();
      renderPeerList();
    }

    function onPeerLeft(msg) {
      state.peers.delete(msg.peerId);
      renderPeerList();
    }

    function onClose(msg) {
      console.warn('Realtime closed:', msg.code, msg.reason);
      if (state.leftIntentionally) return;
      if (state.reconnecting) return;     // already in flight
      state.reconnecting = true;

      const delay = state.reconnectDelay;
      showBanner(`Connection lost (code ${msg.code || '?'}). Reconnecting in ${Math.round(delay/1000*10)/10}s...`);
      setTimeout(() => { tryReconnect().finally(() => { state.reconnecting = false; }); }, delay);
      state.reconnectDelay = Math.min(state.reconnectDelay * 2, 8000);
    }

    async function tryReconnect() {
      if (state.leftIntentionally) return;
      showBanner('Reconnecting...');

      // Step 1: does the room still exist? (Server may have GC'd it after inactivity.)
      let roomExists = false;
      try {
        const r = await state.rt.getRoom(state.room.id);
        if (r && r.id) {
          state.room = r;
          roomExists = true;
        }
      } catch (e) {
        // Likely 404 — room was reaped
      }

      // Step 2: if not, recreate with same name
      if (!roomExists) {
        showBanner('Room was reaped. Recreating with the same name...');
        try {
          const newRoom = await state.rt.createRoom({
            app_type: 'band-jam',
            name: state.room.name,
            is_public: true,
            tags: ['music', 'jam', 'tracker'],
          });
          state.room = newRoom;
        } catch (e) {
          showBanner(`Could not recreate room (${e.message || e}). Returning to lobby...`);
          setTimeout(leaveRoom, 3000);
          return;
        }
      }

      // Step 3: build a fresh realtime instance — old one's WS is dead and may have stale state
      try { state.rt && state.rt.disconnect(); } catch {}

      const rt = new AimeatRealtime(location.origin, state.session.jwt);
      rt.on('joined', onJoined);
      rt.on('broadcast', onBroadcast);
      rt.on('peer-joined', onPeerJoined);
      rt.on('peer-left', onPeerLeft);
      rt.on('close', onClose);
      rt.connect(state.room.id, state.nick);
      state.rt = rt;
      state.peers.clear();
      renderPeerList();
    }

    function showBanner(text) {
      const banner = document.getElementById('conn-banner');
      if (banner) {
        banner.textContent = text;
        banner.style.display = 'block';
      }
    }
    function hideBanner() {
      const banner = document.getElementById('conn-banner');
      if (banner) banner.style.display = 'none';
    }

    function announceSelf() {
      state.rt.broadcast({
        type: 'who',
        nick: state.nick,
        instrument: at().instrument,
      });
    }

    function pickColor() {
      const used = new Set([...state.peers.values()].map(p => p.color));
      const free = PEER_COLORS.find(c => !used.has(c));
      return free || PEER_COLORS[Math.floor(Math.random() * PEER_COLORS.length)];
    }

    // ============================================================
    //  Room UI
    // ============================================================
    function renderRoom() {
      document.body.classList.add('in-room');   // enables the full-page mode frame
      const app = document.getElementById('app');
      app.innerHTML = `
        <div id="conn-banner" class="conn-banner mb-3" style="display:none;"></div>

        <!-- ═══ COCKPIT — everything that answers "what happens when I press a key?" ═══ -->
        <div class="panel mb-3 cockpit">
          <div class="row">
            <div class="min-w-[140px]">
              <div class="text-xs opacity-50">Room</div>
              <div class="text-lg font-bold" style="color:var(--bj-heading);">${escapeHtml(state.room.name || 'jam')}</div>
            </div>
            <div>
              <div class="text-xs opacity-50">You</div>
              <div class="font-mono text-sm">${escapeHtml(state.nick)}</div>
            </div>
            <div class="flex-1 min-w-[120px]">
              <div class="text-xs opacity-50 mb-1">Band members</div>
              <div id="peer-list" class="flex flex-wrap gap-2"></div>
            </div>
            <button id="songs-btn" class="btn btn-sm bj-btn-indigo">💾 Songs</button>
            <button id="leave-btn" class="btn btn-sm btn-ghost">Leave</button>
          </div>
          <div class="row">
            <button id="transport-btn" class="btn bj-btn-accent" style="min-width:120px;">
              ▶ Play
            </button>
            <div class="flex items-center gap-2">
              <span class="text-xs opacity-60">BPM</span>
              <input id="bpm-input" type="number" min="40" max="240" value="${state.bpm}"
                class="input input-sm input-bordered w-20" />
            </div>
            <label class="flex items-center gap-1 text-xs cursor-pointer">
              <input id="loop-toggle" type="checkbox" class="checkbox checkbox-xs" />
              Loop patterns
            </label>
            <label class="flex items-center gap-1 text-xs cursor-pointer" title="Metronome — a click on every beat while the transport runs, so your playing locks to the shared clock. Local only; nobody else hears it.">
              <input id="metro-toggle" type="checkbox" class="checkbox checkbox-xs" />
              🕰️ Metro
            </label>
            <label class="flex items-center gap-1 text-xs cursor-pointer" title="Sync — a pressed key waits and fires exactly ON the next 16th-note of the shared clock (transport must run). The metronome just ticks; this one times YOU.">
              <input id="sync-toggle" type="checkbox" class="checkbox checkbox-xs" />
              🎯 Sync
            </label>
            <label class="flex items-center gap-1 text-xs cursor-pointer" title="Song mode — the transport plays the 🎼 order list (position by position, then loops), ProTracker style. Off = Loop repeats the current pattern.">
              <input id="song-toggle" type="checkbox" class="checkbox checkbox-xs" />
              🎼 Song
            </label>
            <div class="mode-seg" id="mode-seg" title="What your keyboard does — Esc always returns to Live">
              <button class="mode-btn" data-mode="live">🎹 Live</button>
              <button class="mode-btn" data-mode="edit">✏️ Edit</button>
              <button class="mode-btn" data-mode="record">⏺ Rec</button>
            </div>
            <div class="mode-seg" id="sound-seg" title="Sound engine — Real plays sampled piano, guitar, bass &amp; flute; flute &amp; synth sustain while a key is held in both engines">
              <button class="mode-btn" data-sound="classic">⚡ Classic</button>
              <button class="mode-btn" data-sound="real">🎻 Real</button>
            </div>
            <div class="flex-1"></div>
            <div class="step-dots" id="step-dots"></div>
          </div>
          <div class="row">
            <div class="play-status" id="play-status" data-ps="live">
              <span class="ps-dot"></span><span id="ps-text"></span><span class="ps-sub" id="ps-sub"></span>
            </div>
            <div id="sample-status" class="sample-status hidden" title="Real-engine sample loading — per instrument"></div>
          </div>
          <div class="row hidden" id="songs-row">
            <input id="song-name" type="text" class="input input-sm input-bordered" placeholder="Song name…" style="width:180px;" maxlength="60" />
            <button id="song-save" class="btn btn-sm bj-btn-accent">Save</button>
            <label class="flex items-center gap-1 text-xs" title="Steps per pattern — a SONG setting (FastTracker-style; ProTracker was fixed at 64). Applies to ALL tracks and patterns; notes beyond a shorter length are dropped.">
              Steps
              <select id="song-steps" class="select select-sm select-bordered">
                <option value="16">16</option><option value="32">32</option>
                <option value="48">48</option><option value="64">64</option>
              </select>
            </label>
            <span class="text-xs opacity-60">saves tracks, patterns, lengths, engines, BPM &amp; AI-band settings — private to you</span>
            <div id="song-list" class="flex flex-wrap gap-2 w-full"></div>
          </div>
        </div>

        <div class="zone-label">🤖 Band</div>
        <!-- AI Band -->
        <div class="panel mb-3" id="ai-panel">
          <div class="flex items-center gap-3 mb-1 flex-wrap">
            <img class="bj-robot" src="https://aimeat.io/v1/pub/happydude500001%40aimeat-finland-001-genesis/gen.img.bandjam-ai-band" alt="" />
            <span class="text-sm font-semibold bj-h">🤖 AI Band</span>
            <span class="text-xs bj-dim">— a bandmate that follows your key &amp; groove. You lead; it fills in on drums, bass &amp; chords.</span>
            <div class="flex-1"></div>
            <button id="ai-toggle" class="btn btn-sm bj-btn-indigo">Add AI bandmate</button>
          </div>
          <div id="ai-controls" class="mt-3" style="display:none;">
            <div class="flex items-center gap-4 flex-wrap">
              <label class="text-xs bj-dim flex items-center gap-1">Style
                <select id="ai-style" class="select select-sm select-bordered">
                  ${Object.entries(AI_STYLES).map(([k, s]) => `<option value="${k}" ${k === state.ai.style ? 'selected' : ''}>${s.label}</option>`).join('')}
                </select>
              </label>
              <div class="flex items-center gap-3 flex-wrap text-xs" id="ai-parts">
                ${['drums', 'bass', 'chords', 'arp'].map(p => `
                  <label class="flex items-center gap-1 cursor-pointer">
                    <input type="checkbox" class="checkbox checkbox-xs" data-part="${p}" ${state.ai.parts[p] ? 'checked' : ''}>${p}
                  </label>`).join('')}
              </div>
              <label class="flex items-center gap-1 text-xs cursor-pointer">
                <input id="ai-follow" type="checkbox" class="checkbox checkbox-xs" ${state.ai.follow ? 'checked' : ''}> Follow my key
              </label>
              <label class="flex items-center gap-2 text-xs bj-dim">Intensity
                <input id="ai-intensity" type="range" min="0" max="1" step="0.05" value="${state.ai.intensity}" style="width:110px;">
              </label>
              <span class="text-xs bj-accent font-mono" id="ai-status"></span>
            </div>
            <div class="flex items-center gap-3 flex-wrap mt-2 pt-2" style="border-top:1px solid var(--bj-border);">
              <label class="flex items-center gap-1 text-xs cursor-pointer" title="Let an LLM re-arrange the chords &amp; parts every few bars, using your own OpenRouter key. Off = the built-in deterministic engine.">
                <input id="ai-llm" type="checkbox" class="checkbox checkbox-xs"> 🧠 LLM arranger
              </label>
              <span class="text-xs bj-dim">— optional; spends your OpenRouter key only while on. Off = deterministic engine.</span>
              <span class="text-xs font-mono" style="color:var(--bj-accent-2);" id="ai-llm-status"></span>
            </div>
          </div>
        </div>

        <div class="zone-label">📼 Sample banks</div>
        <div class="panel mb-3" id="bank-panel">
          <div class="flex items-center gap-3 flex-wrap mb-2">
            <span class="text-sm font-semibold bj-h">📼 Sample banks</span>
            <span class="text-xs bj-dim">— load old-school tracker sample disks; every sample becomes an instrument you can pick per track. Extended .asb format: no Amiga-era size limits.</span>
          </div>
          <div class="flex items-center gap-2 flex-wrap mb-2">
            <span class="text-xs opacity-60">Examples (CC0):</span>
            ${EXAMPLE_BANKS.map((b, i) => `<button class="btn btn-xs bj-btn-indigo bank-example" data-i="${i}">📼 ${b.name}</button>`).join('')}
            <select id="bank-cat" class="select select-sm select-bordered" style="max-width:190px;" title="The whole ST-XX collection — every Amiga Soundtracker sample disk (CC0)">
              <option value="">All disks…</option>
            </select>
            <button id="bank-cat-load" class="btn btn-xs bj-btn-indigo">Load disk</button>
            <label class="btn btn-xs" title="Import .wav, .mod (samples are extracted), .8svx/.iff or .asb.json files">
              📥 Import files…<input id="bank-file" type="file" multiple accept=".wav,.mod,.8svx,.iff,.json,.asb" class="hidden" />
            </label>
            <span class="text-xs opacity-60 ml-2">My banks:</span>
            <div id="mybank-list" class="flex flex-wrap gap-1"></div>
          </div>
          <div id="bank-preview" class="bank-preview hidden"></div>
          <div id="bank-loaded" class="flex flex-wrap gap-2"></div>
        </div>

        <div class="zone-label">🎤 Stage — play together</div>
        <!-- Live jam keymap -->
        <div class="panel mb-3">
          <div class="flex items-center gap-3 mb-2">
            <span class="text-sm font-semibold" style="color:var(--bj-heading);">Your keyboard</span>
            <span class="text-xs opacity-60">— just play; no clicking needed. In 🎹 Live mode every note goes straight to the whole band.</span>
          </div>
          <div id="keymap-display" class="keymap"></div>
        </div>

        <!-- Note river -->
        <div class="panel mb-3">
          <div class="text-sm font-semibold mb-2" style="color:var(--bj-heading);">Note river — everyone playing</div>
          <canvas id="river"></canvas>
        </div>

        <div class="zone-label">🎛️ Studio — compose looping patterns</div>
        <!-- Tracker pattern -->
        <div class="panel mb-3">
          <div class="flex items-center gap-3 mb-2 flex-wrap">
            <span class="text-sm font-semibold" style="color:var(--bj-heading);">Tracker</span>
            <span class="text-xs opacity-60">— click the grid to enter ✏️ Edit mode; Esc returns to 🎹 Live.</span>
            <span class="text-xs opacity-60" id="mode-help"></span>
          </div>

          <!-- ProTracker: pattern banks + song order -->
          <div class="pt-bar mb-2">
            <span class="pt-label">Patterns</span>
            <div id="bank-chips" class="pt-chips"></div>
            <button id="bank-add" class="btn btn-xs" title="New empty pattern (same lengths)">+ new</button>
            <button id="bank-dup" class="btn btn-xs" title="Duplicate the current pattern">⧉ dup</button>
          </div>
          <div class="mb-2">
            <div class="pt-bar mb-1">
              <span class="pt-label">🎼 Song</span>
              <span class="text-xs opacity-60">— rows are layers; click a cell to place the edited pattern (again = clear). Every position plays ALL layers together: P0+P5 → P1+P6 → …</span>
              <div class="flex-1"></div>
              <button id="sg-addrow" class="btn btn-xs" title="Add a song track (layer)">+ layer</button>
              <button id="sg-delrow" class="btn btn-xs" title="Remove the last layer">− layer</button>
              <button id="sg-addpos" class="btn btn-xs" title="Add a position (column)">+ pos</button>
              <button id="sg-delpos" class="btn btn-xs" title="Remove the last position">− pos</button>
              <button id="order-clear" class="btn btn-xs" title="Clear the whole arrangement">clear</button>
            </div>
            <div id="song-grid" class="song-grid"></div>
          </div>
          <div class="pt-bar mb-3">
            <span class="pt-label">✨ AI</span>
            <button id="ai-fill-track" class="btn btn-xs bj-btn-indigo" title="Open the AI composer for THIS track's pattern">✨ Fill this track…</button>
            <button id="ai-make-song" class="btn btn-xs bj-btn-accent" title="Open the AI composer for the whole song (patterns + layered arrangement)">🪄 Compose whole song…</button>
            <span id="ai-compose-status" class="text-xs bj-dim"></span>
          </div>

          <!-- ✨ AI Composer dialog -->
          <div id="aic-overlay" class="aic-overlay hidden">
            <div class="aic-modal">
              <div class="aic-head">
                <span class="text-sm font-semibold bj-h" id="aic-title">✨ AI Composer</span>
                <div class="flex-1"></div>
                <button id="aic-close" class="btn btn-xs btn-ghost">✕</button>
              </div>
              <textarea id="aic-desc" class="textarea textarea-bordered w-full" rows="3" maxlength="500"
                placeholder="Describe what you want — style, mood, groove, references… (optional; the chips below help too)"></textarea>
              <div class="aic-row" id="aic-styles"></div>
              <div id="aic-song-opts">
                <div class="aic-row">
                  <label class="aic-opt">Patterns
                    <select id="aic-npat" class="select select-sm select-bordered">
                      <option value="2">2</option><option value="3">3</option>
                      <option value="4" selected>4</option><option value="6">6</option>
                      <option value="8">8</option><option value="12">12</option>
                      <option value="16">16</option><option value="20">20</option>
                    </select>
                  </label>
                  <label class="aic-opt">Song length
                    <select id="aic-npos" class="select select-sm select-bordered">
                      <option value="4">4 positions</option><option value="8" selected>8 positions</option>
                      <option value="12">12 positions</option><option value="16">16 positions</option>
                      <option value="20">20 positions</option><option value="24">24 positions</option>
                    </select>
                  </label>
                  <label class="aic-opt">Layers
                    <select id="aic-nlay" class="select select-sm select-bordered">
                      <option value="1">1</option><option value="2" selected>2</option><option value="3">3</option>
                      <option value="4">4</option><option value="6">6</option><option value="8">8</option>
                    </select>
                  </label>
                  <span class="text-xs bj-dim">steps/pattern: <b id="aic-steps"></b> (the Steps song setting)</span>
                </div>
                <div class="aic-row" style="align-items:flex-start;">
                  <span class="text-xs bj-dim" style="padding-top:4px;">Instruments</span>
                  <div id="aic-tracks" class="aic-tracks"></div>
                </div>
                <div class="aic-row">
                  <label class="flex items-center gap-1 text-xs cursor-pointer">
                    <input id="aic-reassign" type="checkbox" class="checkbox checkbox-xs" checked>
                    AI may re-pick instruments for the checked tracks
                  </label>
                  <span class="text-xs opacity-50">— unchecked tracks stay silent; composing replaces current patterns &amp; arrangement</span>
                </div>
              </div>
              <div id="aic-prompt-flow" class="aic-promptflow">
                <div class="aic-row">
                  <span class="text-xs bj-dim">🤖 <b>Use your own AI chat</b> — free, any model: copy the prompt, paste it to Claude/ChatGPT/…, then paste the JSON answer back here. Big models build great songs.</span>
                </div>
                <div class="aic-row">
                  <button id="aic-copy" class="btn btn-xs bj-btn-indigo">📋 Copy prompt</button>
                  <span id="aic-copy-status" class="text-xs bj-dim"></span>
                </div>
                <textarea id="aic-import" class="textarea textarea-bordered w-full" rows="2"
                  placeholder='Paste the AI chat&apos;s JSON answer here ({"bpm":…,"patterns":[…],"songTracks":[…]} — codefences ok)'></textarea>
                <div class="aic-row" style="justify-content:flex-end;">
                  <button id="aic-import-btn" class="btn btn-xs bj-btn-accent">📥 Import JSON</button>
                </div>
              </div>
              <div id="aic-fill-opts" class="aic-row">
                <label class="aic-opt">Track
                  <select id="aic-track" class="select select-sm select-bordered"></select>
                </label>
                <span class="text-xs opacity-50">— writes this track's pattern in the current bank, listening to the rest of the song</span>
              </div>
              <div class="aic-row" style="justify-content:flex-end;">
                <button id="aic-cancel" class="btn btn-sm btn-ghost">Cancel</button>
                <button id="aic-go" class="btn btn-sm bj-btn-accent">✨ Compose</button>
              </div>
            </div>
          </div>

          <!-- Track tabs 1..9 -->
          <div class="track-tabs mb-3" id="track-tabs"></div>

          <!-- Per-track header (instrument, volume, enable, clear) -->
          <div id="track-header" class="mb-3"></div>

          <div id="tracker" class="tracker" tabindex="0"></div>
        </div>

        <!-- Bring your own AI — a real networked agent as a bandmate -->
        <div class="panel">
          <div class="flex items-center gap-3 mb-1 flex-wrap">
            <span class="text-sm font-semibold bj-h">🎸 Bring your own AI</span>
            <span class="text-xs bj-dim">— hand a code-capable AI this room so it joins as a real networked bandmate.</span>
            <div class="flex-1"></div>
            <button id="invite-toggle" class="btn btn-sm bj-btn-accent">Show invite</button>
          </div>
          <div id="invite-body" class="mt-3" style="display:none;">
            <div class="text-xs bj-dim mb-1">Copy this into your AI (Claude Code, or any agent that can run code + open a WebSocket):</div>
            <textarea id="invite-prompt" class="w-full font-mono text-xs bj-inset" style="height:150px;padding:10px;border-radius:6px;color:var(--bj-text);" readonly></textarea>
            <button id="invite-copy" class="btn btn-xs bj-btn-indigo mt-2">Copy prompt</button>
            <span class="text-xs bj-dim ml-2">The AI loads the <b>band-jam</b> skill for the full jam protocol.</span>
          </div>
        </div>

        <!-- On-screen keyboard (mobile + tap-to-play on desktop) -->
        <button id="kbd-fab" class="kbd-fab" aria-label="On-screen keyboard">🎹</button>
        <div id="kbd-drawer" class="kbd-drawer kbd-hidden">
          <div class="kbd-bar">
            <span class="kbd-title">Tap to play · <b id="kbd-inst-label">${at().instrument}</b></span>
            <span class="kbd-hint">multi-touch ok</span>
            <button id="kbd-close" class="kbd-close" aria-label="Close keyboard">✕</button>
          </div>
          <div id="virt-keys" class="virt-keys-area"></div>
        </div>
      `;

      // Hook up controls
      document.getElementById('leave-btn').addEventListener('click', leaveRoom);
      document.getElementById('transport-btn').addEventListener('click', toggleTransport);
      document.getElementById('bpm-input').addEventListener('change', (e) => {
        const bpm = Math.max(40, Math.min(240, parseInt(e.target.value, 10) || 120));
        state.bpm = bpm;
        e.target.value = bpm;
        state.ai.bpmPinned = true;   // user owns BPM now — AI style changes won't override it
        state.rt.broadcast({ type: 'bpm', bpm });
      });
      document.getElementById('loop-toggle').addEventListener('change', (e) => {
        state.loopEnabled = e.target.checked;
      });
      // Metronome — persisted; ticks only while the transport runs (see pattern clock).
      const metroEl = document.getElementById('metro-toggle');
      state.metroEnabled = localStorage.getItem('bj-metro') === '1';
      metroEl.checked = state.metroEnabled;
      metroEl.addEventListener('change', (e) => {
        state.metroEnabled = e.target.checked;
        localStorage.setItem('bj-metro', e.target.checked ? '1' : '0');
        if (e.target.checked && !state.transportPlaying) showToast('🕰️ Metronome armed — press ▶ Play and it ticks on every beat');
      });
      // 🎯 Sync — input quantize: a pressed key fires ON the next 16th of the shared clock.
      const syncEl = document.getElementById('sync-toggle');
      state.syncEnabled = localStorage.getItem('bj-sync') === '1';
      syncEl.checked = state.syncEnabled;
      syncEl.addEventListener('change', (e) => {
        state.syncEnabled = e.target.checked;
        localStorage.setItem('bj-sync', e.target.checked ? '1' : '0');
        showToast(e.target.checked
          ? (state.transportPlaying ? '🎯 Sync on — your presses land on the grid' : '🎯 Sync armed — press ▶ Play; presses will land on the grid')
          : '🎯 Sync off — presses sound immediately');
      });
      // 🎼 Song mode + pattern banks / order list
      const songEl = document.getElementById('song-toggle');
      songEl.checked = state.songMode;
      songEl.addEventListener('change', (e) => {
        state.songMode = e.target.checked;
        state.songAnchor = null;   // re-anchor at the current step
        if (e.target.checked && !songHasAny()) showToast('🎼 The song grid is empty — click cells to place patterns');
        else showToast(e.target.checked ? '🎼 Song mode — playing the order list' : '🔁 Pattern mode — Loop repeats the current pattern');
        renderOrderChips();
      });
      document.getElementById('bank-add').addEventListener('click', () => addBank(false));
      document.getElementById('bank-dup').addEventListener('click', () => addBank(true));
      const stepsSel = document.getElementById('song-steps');
      if (stepsSel) {
        stepsSel.value = String(state.patternLen);
        stepsSel.addEventListener('change', (e) => {
          const L = parseInt(e.target.value, 10);
          const shrinking = state.banks.some(bank => bank.some(p => p.length > L && p.slice(L).some(c => c)));
          if (shrinking && !confirm('Shorter patterns drop the notes beyond step ' + L + '. Continue?')) {
            stepsSel.value = String(state.patternLen); return;
          }
          setPatternLen(L);
          showToast('🧭 ' + L + ' steps per pattern (song setting)');
          setTimeout(() => { try { e.target.blur(); } catch (err) {} }, 0);
        });
      }
      document.getElementById('sg-addrow').addEventListener('click', () => {
        state.songTracks.push(new Array(songPosCount()).fill(null));
        renderSongGrid();
      });
      document.getElementById('sg-delrow').addEventListener('click', () => {
        if (state.songTracks.length <= 1) return;
        const row = state.songTracks[state.songTracks.length - 1];
        if (row.some(c => c !== null) && !confirm('Remove the last layer (it has patterns)?')) return;
        state.songTracks.pop(); state.songAnchor = null; renderSongGrid();
      });
      document.getElementById('sg-addpos').addEventListener('click', () => {
        state.songTracks.forEach(r => r.push(null));
        if (!state.songTracks.length) state.songTracks.push([null]);
        renderSongGrid();
      });
      document.getElementById('sg-delpos').addEventListener('click', () => {
        if (songPosCount() <= 1) return;
        state.songTracks.forEach(r => r.pop());
        state.songAnchor = null; renderSongGrid();
      });
      document.getElementById('song-grid').addEventListener('click', (e) => {
        const cell = e.target.closest('.sg-cell');
        if (!cell) return;
        const r = parseInt(cell.dataset.r, 10), c = parseInt(cell.dataset.c, 10);
        const row = state.songTracks[r];
        if (!row) return;
        while (row.length <= c) row.push(null);
        row[c] = (row[c] === state.currentBank) ? null : state.currentBank;
        state.songAnchor = null;
        renderSongGrid();
      });
      document.getElementById('order-clear').addEventListener('click', () => {
        if (songHasAny() && !confirm('Clear the whole arrangement?')) return;
        state.songTracks = [new Array(songPosCount()).fill(null)];
        state.songAnchor = null; renderSongGrid();
      });
      renderBankChips(); renderSongGrid();

      // ✨ AI compose
      document.getElementById('ai-fill-track').addEventListener('click', () => openAiComposer('fill'));
      document.getElementById('ai-make-song').addEventListener('click', () => openAiComposer('song'));
      document.getElementById('aic-close').addEventListener('click', closeAiComposer);
      document.getElementById('aic-cancel').addEventListener('click', closeAiComposer);
      document.getElementById('aic-overlay').addEventListener('click', (e) => { if (e.target.id === 'aic-overlay') closeAiComposer(); });
      document.getElementById('aic-go').addEventListener('click', aiComposerGo);
      document.getElementById('aic-copy').addEventListener('click', aicCopyPrompt);
      document.getElementById('aic-import-btn').addEventListener('click', aicImportJson);

      // 💾 Songs library panel
      document.getElementById('songs-btn').addEventListener('click', () => {
        document.getElementById('songs-row').classList.toggle('hidden');
        refreshSongList();
      });
      document.getElementById('song-save').addEventListener('click', saveSong);
      // 📼 Sample banks
      document.querySelectorAll('.bank-example').forEach(b => b.addEventListener('click', () => {
        const ex = EXAMPLE_BANKS[parseInt(b.dataset.i, 10)];
        loadBankFromUrl(ex.url, ex.name);
      }));
      const catSel = document.getElementById('bank-cat');
      if (catSel) {
        fetch(BANK_CATALOG_URL).then(r => r.ok ? r.json() : null).then(cat => {
          if (!cat || !Array.isArray(cat.banks)) return;
          bankCatalog = cat.banks;
          catSel.innerHTML = '<option value="">All disks (' + cat.banks.length + ')…</option>'
            + cat.banks.map((b, i) => '<option value="' + i + '">' + escapeHtml(b.name) + ' (' + b.samples + ')</option>').join('');
        }).catch(() => {});
        catSel.addEventListener('change', () => {
          const pv = document.getElementById('bank-preview');
          const i = parseInt(catSel.value, 10);
          if (isNaN(i) || !bankCatalog || !bankCatalog[i]) { pv.classList.add('hidden'); return; }
          const b = bankCatalog[i];
          pv.classList.remove('hidden');
          pv.innerHTML = '<div class="bp-head"><b>' + escapeHtml(b.name) + '</b> — ' + b.samples + ' samples'
            + (b.summary ? ' · ' + escapeHtml(b.summary) : '') + '</div>'
            + '<div class="bp-names">' + (b.names || []).map(n => '<span class="bp-name">' + escapeHtml(n) + '</span>').join('') + '</div>';
          setTimeout(() => { try { catSel.blur(); } catch (e) {} }, 0);
        });
        document.getElementById('bank-cat-load').addEventListener('click', () => {
          const i = parseInt(catSel.value, 10);
          if (isNaN(i) || !bankCatalog || !bankCatalog[i]) { showToast('📼 Pick a disk from the list first'); return; }
          loadBankFromUrl(bankCatalog[i].url, bankCatalog[i].name);
          setTimeout(() => { try { catSel.blur(); } catch (e) {} }, 0);
        });
      }
      const bankFile = document.getElementById('bank-file');
      if (bankFile) bankFile.addEventListener('change', (e) => {
        if (e.target.files && e.target.files.length) importBankFiles([...e.target.files]);
        e.target.value = '';
      });
      renderSampleBanks(); renderMyBanks();

      // ── AI Band controls ──
      document.getElementById('ai-toggle').addEventListener('click', toggleAiBand);
      document.getElementById('ai-style').addEventListener('change', (e) => {
        state.ai.style = e.target.value;
        state.ai.scaleName = (AI_STYLES[state.ai.style] || AI_STYLES.lofi).scale;
        state.ai.llmPlan = null;                    // new style → drop the old LLM plan
        applyStyleBpm();
        updateDetectedRoot();
        updateAiStatus();
        if (state.ai.llm) requestLlmPlan(true);     // and re-arrange for the new style
      });
      document.querySelectorAll('#ai-parts input[data-part]').forEach(cb => {
        cb.addEventListener('change', (e) => { state.ai.parts[e.target.dataset.part] = e.target.checked; });
      });
      document.getElementById('ai-follow').addEventListener('change', (e) => {
        state.ai.follow = e.target.checked;
        if (state.ai.follow) updateDetectedRoot(); else updateAiStatus();
      });
      document.getElementById('ai-intensity').addEventListener('input', (e) => {
        state.ai.intensity = parseFloat(e.target.value);
      });
      document.getElementById('ai-llm').addEventListener('change', (e) => toggleLlmArranger(e.target.checked));

      // ── Invite-an-AI-agent panel ──
      document.getElementById('invite-toggle').addEventListener('click', () => {
        const body = document.getElementById('invite-body');
        const showing = body.style.display !== 'none';
        body.style.display = showing ? 'none' : 'block';
        document.getElementById('invite-toggle').textContent = showing ? 'Show invite' : 'Hide invite';
        if (!showing) document.getElementById('invite-prompt').value = buildAgentInvitePrompt();
      });
      document.getElementById('invite-copy').addEventListener('click', async () => {
        const ta = document.getElementById('invite-prompt');
        try { await navigator.clipboard.writeText(ta.value); }
        catch { ta.select(); document.execCommand('copy'); }
        const btn = document.getElementById('invite-copy');
        btn.textContent = 'Copied ✓';
        setTimeout(() => { btn.textContent = 'Copy prompt'; }, 1500);
      });

      // Mode segmented control
      document.querySelectorAll('#mode-seg .mode-btn').forEach(btn => {
        btn.addEventListener('click', () => setMode(btn.dataset.mode));
      });

      // Sound engine flip (⚡ Classic / 🎻 Real) — same UI, different sound source
      document.querySelectorAll('#sound-seg .mode-btn').forEach(btn => {
        btn.addEventListener('click', () => setSoundMode(btn.dataset.sound));
      });
      renderSoundSeg();
      if (soundEngine.mode === 'real' && soundEngine.state !== 'ready') {
        soundEngine.load().then(ok => {
          if (!ok) {
            soundEngine.mode = 'classic'; localStorage.setItem('bj-sound', 'classic');
            renderSoundSeg();
            showToast('⚠️ Real sounds aren’t on this node yet — using Classic');
          }
        });
      }

      // Global keyboard
      document.addEventListener('keydown', onKeyDown);
      document.addEventListener('keyup', onKeyUp);

      // Tracker click — row sets cursor; clicking the vel cell cycles velocity by +16 (wraps).
      // Clicking the grid ALSO enters Edit mode — the grid is what you're clearly trying to edit.
      document.getElementById('tracker').addEventListener('click', (e) => {
        const head = e.target.closest('[data-ht]');
        if (head) {   // column header → select that track
          state.activeTrack = parseInt(head.dataset.ht, 10);
          renderTrackTabs(); renderTrackHeader(); renderTracker(); renderKeymap(); renderVirtKeys(); updatePlayStatus(); announceSelf();
          return;
        }
        const cellEl = e.target.closest('[data-t]');
        if (!cellEl) return;
        const ti = parseInt(cellEl.dataset.t, 10);
        const r = parseInt(cellEl.dataset.r, 10);
        if (!Number.isFinite(ti) || !Number.isFinite(r)) return;
        if (r >= state.tracks[ti].pattern.length) return;   // beyond this track's length
        if (ti !== state.activeTrack) {
          state.activeTrack = ti;
          renderTrackTabs(); renderTrackHeader(); renderKeymap(); renderVirtKeys(); updatePlayStatus(); announceSelf();
        }
        if (state.inputMode !== 'edit') {
          setMode('edit');
          showToast('✏️ Edit mode — keys write into the grid · Esc → Live');
        }
        const cell = at().pattern[r];
        if (e.target.classList.contains('tg-vel') && cell) {
          let v = (cell.vel || 64) + 16;
          if (v > 127) v = 8;
          cell.vel = v;
          renderTracker();
          return;
        }
        state.cursor = r;
        document.getElementById('tracker').focus();
        renderTracker();
      });

      // Step dots
      const dotsEl = document.getElementById('step-dots');
      dotsEl.innerHTML = Array.from({length: 16}, (_, i) =>
        `<div class="dot ${i % 4 === 0 ? 'beat' : ''}" data-step="${i}"></div>`
      ).join('');

      renderPeerList();
      renderTrackTabs();
      renderTrackHeader();
      renderModeUI();
      renderTracker();
      renderKeymap();
      renderVirtKeys();
      updateTransportUI();
      sizeRiver();
      window.addEventListener('resize', sizeRiver);

      // Drawer toggle
      document.getElementById('kbd-fab').addEventListener('click', toggleDrawer);
      document.getElementById('kbd-close').addEventListener('click', () => {
        document.getElementById('kbd-drawer').classList.add('kbd-hidden');
        document.getElementById('kbd-fab').classList.remove('lit');
      });
    }

    function renderPeerList() {
      const el = document.getElementById('peer-list');
      if (!el) return;
      const items = [];
      // Self first
      items.push(`
        <span class="peer-chip peer-you">
          <span class="swatch swatch-you"></span>
          <span>${escapeHtml(state.nick)} (you)</span>
          <span class="opacity-60">· ${at().instrument}</span>
        </span>
      `);
      // AI Band appears as a bandmate while it's running
      if (state.ai.enabled) {
        const st = AI_STYLES[state.ai.style] || AI_STYLES.lofi;
        const parts = ['drums', 'bass', 'chords', 'arp'].filter(p => state.ai.parts[p]);
        items.push(`
          <span class="peer-chip peer-ai">
            <span class="swatch" style="background:${state.ai.color};"></span>
            <span>🤖 AI Band</span>
            <span class="opacity-60">· ${st.label} · ${parts.join('/')}</span>
          </span>
        `);
      }
      for (const [, p] of state.peers) {
        items.push(`
          <span class="peer-chip">
            <span class="swatch" style="background:${p.color};"></span>
            <span>${escapeHtml(p.nick || 'anon')}</span>
            <span class="opacity-60">· ${p.instrument || 'piano'}</span>
          </span>
        `);
      }
      el.innerHTML = items.join('');
    }

    function renderKeymap() {
      const el = document.getElementById('keymap-display');
      if (!el) return;
      if (at().instrument === 'drums') {
        el.innerHTML = `
          <div>Drums:
            <kbd data-code="KeyZ">Z</kbd>kick
            <kbd data-code="KeyX">X</kbd>snare
            <kbd data-code="KeyC">C</kbd>hihat
            <kbd data-code="KeyV">V</kbd>open
            <kbd data-code="KeyB">B</kbd>tom-low
            <kbd data-code="KeyN">N</kbd>tom-mid
            <kbd data-code="KeyM">M</kbd>tom-high
            <kbd data-code="KeyQ">Q</kbd>crash
            <kbd data-code="KeyW">W</kbd>ride
            <kbd data-code="KeyE">E</kbd>clap
            <kbd data-code="KeyR">R</kbd>cowbell
          </div>
        `;
      } else {
        el.innerHTML = `
          <div class="mb-1">Lower octave (4):
            <kbd data-code="KeyZ">Z</kbd><kbd data-code="KeyS">S</kbd><kbd data-code="KeyX">X</kbd><kbd data-code="KeyD">D</kbd><kbd data-code="KeyC">C</kbd><kbd data-code="KeyV">V</kbd><kbd data-code="KeyG">G</kbd><kbd data-code="KeyB">B</kbd><kbd data-code="KeyH">H</kbd><kbd data-code="KeyN">N</kbd><kbd data-code="KeyJ">J</kbd><kbd data-code="KeyM">M</kbd>
            <span class="opacity-60">= C4..B4</span>
          </div>
          <div>Upper octave (5):
            <kbd data-code="KeyQ">Q</kbd><kbd data-code="Digit2">2</kbd><kbd data-code="KeyW">W</kbd><kbd data-code="Digit3">3</kbd><kbd data-code="KeyE">E</kbd><kbd data-code="KeyR">R</kbd><kbd data-code="Digit5">5</kbd><kbd data-code="KeyT">T</kbd><kbd data-code="Digit6">6</kbd><kbd data-code="KeyY">Y</kbd><kbd data-code="Digit7">7</kbd><kbd data-code="KeyU">U</kbd>
            <span class="opacity-60">= C5..B5</span>
          </div>
        `;
      }
    }

    // ============================================================
    //  Virtual on-screen keyboard (mobile + click-to-play)
    // ============================================================
    function renderVirtKeys() {
      const el = document.getElementById('virt-keys');
      if (!el) return;
      const inst = at().instrument;
      const lbl = document.getElementById('kbd-inst-label');
      if (lbl) lbl.textContent = inst;

      if (inst === 'drums') {
        const drums = ['kick','snare','hihat','hihat-open','tom-low','tom-mid','tom-high','crash','ride','clap','cowbell'];
        el.innerHTML = '<div class="virt-drums">' + drums.map(d =>
          `<button class="virt-drum" data-note="${d}">${DRUM_DISPLAY[d] || d.toUpperCase()}</button>`
        ).join('') + '</div>';
      } else {
        // Two octaves of pitched notes laid out in one scrollable row
        const notes = [];
        for (const oct of [4, 5]) {
          for (const n of ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']) {
            notes.push(n + oct);
          }
        }
        notes.push('C6');
        el.innerHTML = '<div class="virt-keys-row">' + notes.map(n =>
          `<button class="virt-key ${n.includes('#') ? 'sharp' : ''}" data-note="${n}">${n}</button>`
        ).join('') + '</div>';
      }

      // Wire up touch/click. pointerdown = play (sustains while held); release on
      // up/cancel/leave so a finger sliding off NEVER leaves a note ringing.
      // Multi-touch works automatically because each finger fires its own pointerdown.
      el.querySelectorAll('[data-note]').forEach(btn => {
        const onDown = (e) => {
          e.preventDefault();
          btn.classList.add('lit');
          triggerNote(btn.dataset.note, 'vk:' + e.pointerId);
        };
        const onUp = (e) => {
          btn.classList.remove('lit');
          releaseHeld('vk:' + e.pointerId);
        };
        btn.addEventListener('pointerdown', onDown);
        btn.addEventListener('pointerup', onUp);
        btn.addEventListener('pointercancel', onUp);
        btn.addEventListener('pointerleave', onUp);
      });
    }

    function toggleDrawer() {
      const drawer = document.getElementById('kbd-drawer');
      const fab = document.getElementById('kbd-fab');
      const hidden = drawer.classList.toggle('kbd-hidden');
      fab.classList.toggle('lit', !hidden);
    }

    // ============================================================
    //  Tracker grid render
    // ============================================================
    // ============================================================
    //  Multi-track UI: tabs, per-track header, mode switching
    // ============================================================
    function renderTrackTabs() {
      const el = document.getElementById('track-tabs');
      if (!el) return;
      el.innerHTML = state.tracks.map((t, i) => {
        const hasContent = t.pattern.some(c => c);
        const cls = ['track-tab'];
        if (i === state.activeTrack) cls.push('active');
        if (!t.enabled) cls.push('muted');
        return `
          <button class="${cls.join(' ')}" data-track="${i}" title="Track ${i+1} · ${t.instrument}">
            <span class="track-num">${i+1}</span>
            <span class="track-inst">${instDisplay(t.instrument).slice(0,4)}</span>
            <span class="track-led ${hasContent ? 'on' : ''}"></span>
          </button>
        `;
      }).join('');
      el.querySelectorAll('.track-tab').forEach(btn => {
        btn.addEventListener('click', () => {
          state.activeTrack = parseInt(btn.dataset.track, 10);
          state.cursor = 0;
          renderTrackTabs();
          renderTrackHeader();
          renderTracker();
          renderKeymap();
          renderVirtKeys();
          updatePlayStatus();   // pill names the active track + instrument
          announceSelf(); // tell peers which instrument we're "fronting"
        });
      });
    }

    function renderTrackHeader() {
      const el = document.getElementById('track-header');
      if (!el) return;
      const t = at();
      el.innerHTML = `
        <div class="flex items-center gap-3 flex-wrap" style="background:var(--bj-panel-2);padding:10px 12px;border-radius:6px;border:1px solid var(--bj-border);">
          <span class="text-sm font-semibold" style="color:var(--bj-heading);">Track ${state.activeTrack + 1}</span>
          <select id="track-instrument" class="select select-sm select-bordered">
            ${instrumentOptionsHtml(t.instrument)}
          </select>
          <label class="flex items-center gap-2 text-xs" style="color:var(--bj-text);">
            Vol
            <input id="track-volume" type="range" min="0" max="1" step="0.05" value="${t.volume}" style="width:120px;" />
            <span id="track-vol-label" class="font-mono opacity-70" style="min-width:36px;">${t.volume.toFixed(2)}</span>
          </label>
          <select id="track-sound" class="select select-sm select-bordered" title="Sound engine for THIS track — auto follows the ⚡/🎻 switch in the cockpit">
            <option value="global" ${(!t.sound || t.sound==='global')?'selected':''}>🌐 auto</option>
            <option value="classic" ${t.sound==='classic'?'selected':''}>⚡ classic</option>
            <option value="real" ${t.sound==='real'?'selected':''}>🎻 real</option>
          </select>
          <label class="flex items-center gap-1 text-xs cursor-pointer">
            <input id="track-enabled" type="checkbox" class="checkbox checkbox-xs" ${t.enabled?'checked':''}>
            Enabled
          </label>
          <button id="clear-track" class="btn btn-xs">Clear track</button>
        </div>
      `;
      document.getElementById('track-sound').addEventListener('change', (e) => {
        t.sound = e.target.value;
        if (t.sound === 'real') ensureRealLoaded();
        updatePlayStatus();
      });
      document.getElementById('track-instrument').addEventListener('change', (e) => {
        const prev = t.instrument;
        const next = e.target.value;
        const familyChanged = (prev === 'drums') !== (next === 'drums');
        t.instrument = next;
        if (familyChanged) setTrackPattern(state.activeTrack, new Array(t.pattern.length).fill(null));
        renderTrackTabs();
        renderTracker();
        renderKeymap();
        renderVirtKeys();
        updatePlayStatus();   // the pill names the instrument — keep it honest immediately
        announceSelf();
      });
      document.getElementById('track-volume').addEventListener('input', (e) => {
        t.volume = parseFloat(e.target.value);
        document.getElementById('track-vol-label').textContent = t.volume.toFixed(2);
      });
      document.getElementById('track-enabled').addEventListener('change', (e) => {
        t.enabled = e.target.checked;
        renderTrackTabs();
      });
      document.getElementById('clear-track').addEventListener('click', () => {
        setTrackPattern(state.activeTrack, new Array(t.pattern.length).fill(null));
        renderTracker();
        renderTrackTabs();
      });
    }

    function setMode(mode) {
      state.inputMode = mode;
      // Record requires transport — auto-start it for the user's convenience (and SAY so).
      if (mode === 'record' && !state.transportPlaying) {
        toggleTransport();  // broadcasts a fresh transport-start to the room
        showToast(`⏺ REC — transport started; your playing writes onto track ${state.activeTrack + 1}`);
      }
      renderModeUI();
      renderTracker(); // cursor row only highlighted in edit mode
    }

    function renderModeUI() {
      document.querySelectorAll('#mode-seg .mode-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.mode === state.inputMode);
      });
      // The full-page mode frame — the mode is visible from anywhere.
      document.body.dataset.im = state.inputMode;
      const help = document.getElementById('mode-help');
      if (help) {
        // Edit-mode cheat sheet lives next to the tracker; the cockpit pill covers the rest.
        help.textContent = state.inputMode === 'edit'
          ? '· ↑↓ move cursor · DEL clear · Shift+↑↓ velocity ±8 · click vel cell to cycle'
          : '';
      }
      updatePlayStatus();
    }

    // ── The ONE line that always says what your keys do right now ──
    function updatePlayStatus(typing) {
      const pill = document.getElementById('play-status');
      if (!pill) return;
      const txt = document.getElementById('ps-text');
      const sub = document.getElementById('ps-sub');
      const track = at();
      const inst = track ? track.instrument : 'synth';
      const trackNo = state.activeTrack + 1;
      const trackPref = track && track.sound;
      const eff = (trackPref === 'classic' || trackPref === 'real') ? trackPref : soundEngine.mode;
      const engineTag = (eff === 'real' ? ' · 🎻 Real' : ' · ⚡ Classic') + ((trackPref && trackPref !== 'global') ? ' (track)' : '');
      if (typing) {
        pill.dataset.ps = 'typing';
        txt.textContent = 'Typing in a field — keys don’t play';
        sub.textContent = 'click anywhere outside to jam again' + engineTag;
      } else if (state.inputMode === 'edit') {
        pill.dataset.ps = 'edit';
        txt.textContent = `EDIT — keys write notes into track ${trackNo} (${inst})`;
        sub.textContent = 'only you hear previews · Esc → Live' + engineTag;
      } else if (state.inputMode === 'record') {
        pill.dataset.ps = 'record';
        txt.textContent = state.transportPlaying
          ? `REC — your playing is being written onto track ${trackNo} (${inst})`
          : 'REC armed — press ▶ Play to start recording';
        sub.textContent = 'the band hears you live too · Esc → Live' + engineTag;
      } else {
        pill.dataset.ps = 'live';
        txt.textContent = `Keys PLAY: ${inst} — the whole band hears you`;
        sub.textContent = 'no clicking needed, just play' + engineTag;
      }
    }

    // Small toast used for mode-switch feedback.
    let toastTimer = null;
    function showToast(msg) {
      let el = document.getElementById('bj-toast');
      if (!el) { el = document.createElement('div'); el.id = 'bj-toast'; document.body.appendChild(el); }
      el.textContent = msg;
      el.classList.add('show');
      clearTimeout(toastTimer);
      toastTimer = setTimeout(() => el.classList.remove('show'), 2200);
    }

    // While focus sits in a text field, keys type — say so instead of silently not playing.
    document.addEventListener('focusin', (e) => {
      if (e.target && typeof e.target.matches === 'function' && e.target.matches('input[type="text"], input[type="number"], textarea, select')) updatePlayStatus(true);
    });
    document.addEventListener('focusout', () => updatePlayStatus(false));
    // Selects + checkboxes release focus the moment a choice is made — pick an
    // instrument (or toggle Loop/Click) and just keep playing, no click-away needed.
    // NOTE: blur must be DEFERRED — the browser re-focuses a <select> when its native
    // dropdown closes (after the change event), which silently undoes an immediate blur.
    document.addEventListener('change', (e) => {
      const el = e.target;
      if (!el || typeof el.matches !== 'function' || !el.matches('select, input[type="checkbox"]')) return;
      setTimeout(() => { try { el.blur(); } catch (err) {} }, 0);
      // belt & braces: catch the popup-close refocus that lands a few frames later
      setTimeout(() => { if (document.activeElement === el) { try { el.blur(); } catch (err) {} } }, 150);
      setTimeout(() => { if (document.activeElement === el) { try { el.blur(); } catch (err) {} } }, 400);
    });

    // Unified note trigger used by both physical keyboard and virtual keys.
    // Routes the note into the current input mode for the active track.
    // holdKey: identifies the pressing key/finger — the note sustains until it is released.
    function triggerNote(note, holdKey) {
      const track = at();
      // The per-track Vol scales what you PLAY (live + record), not just looped patterns —
      // so the slider audibly does something (and lets you tame a hot bass so it stops clipping).
      const vel = 0.85 * track.volume;
      // Anything you actually play (not silent grid editing) teaches the AI your key.
      if (state.inputMode !== 'edit') feedHumanNote(note);
      if (state.inputMode === 'edit') {
        const prev = track.pattern[state.cursor];
        track.pattern[state.cursor] = { note, vel: prev?.vel ?? 64 };
        state.cursor = (state.cursor + 1) % track.pattern.length;
        renderTracker();
        renderTrackTabs();
        playLocal(track.instrument, note, vel, undefined, track.sound);
      } else if (state.inputMode === 'record' && state.transportPlaying) {
        // Quantize to nearest step boundary
        const stepMs = stepDurationMs();
        const elapsed = Date.now() - state.t0;
        const qL = track.pattern.length;
        const step = ((Math.round(elapsed / stepMs) % qL) + qL) % qL;
        track.pattern[step] = { note, vel: 80 };
        renderTracker();
        renderTrackTabs();
        // Also play + broadcast immediately so it sounds in time
        playLocal(track.instrument, note, vel, holdKey, track.sound);
        try {
          state.rt && state.rt.broadcast({
            type: 'note', instrument: track.instrument, note, velocity: vel,
          });
        } catch {}
        pushRiver({ color: SELF_RIVER_INK, label: note, t: Date.now() });
      } else {
        // 'live' (or record-without-transport, which falls through to live)
        // 🎯 Sync: don't sound now — fire exactly on the next 16th of the shared clock.
        if (state.syncEnabled && state.transportPlaying) { scheduleQuantized(track, note, vel, holdKey); return; }
        playLocal(track.instrument, note, vel, holdKey, track.sound);
        try {
          state.rt && state.rt.broadcast({
            type: 'note', instrument: track.instrument, note, velocity: vel,
          });
        } catch {}
        pushRiver({ color: SELF_RIVER_INK, label: note, t: Date.now() });
      }
    }

    // ── Pattern banks (ProTracker patterns) ──
    function switchBank(i) {
      if (i === state.currentBank || !state.banks[i]) return;
      state.currentBank = i;
      state.tracks.forEach((t, ti) => { t.pattern = state.banks[i][ti]; });
      state.cursor = 0;
      renderBankChips(); renderTracker(); renderTrackHeader(); renderTrackTabs();
    }
    function addBank(duplicate) {
      const cur = state.banks[state.currentBank];
      const next = cur.map(p => duplicate ? p.map(c => c ? { ...c } : null) : new Array(p.length).fill(null));
      state.banks.push(next);
      switchBank(state.banks.length - 1);
      showToast(duplicate ? '⧉ Pattern duplicated → P' + state.currentBank : '+ New pattern P' + state.currentBank);
    }
    function renderBankChips() {
      const el = document.getElementById('bank-chips');
      if (!el) return;
      el.innerHTML = state.banks.map((_, i) =>
        '<button class="pt-chip' + (i === state.currentBank ? ' active' : '') + '" data-bank="' + i + '">P' + i + '</button>').join('');
      el.querySelectorAll('.pt-chip').forEach(c => c.addEventListener('click', () => switchBank(parseInt(c.dataset.bank, 10))));
    }
    function renderOrderChips(playingPos) { renderSongGrid(playingPos); }
    function renderSongGrid(playingPos) {
      const el = document.getElementById('song-grid');
      if (!el) return;
      const cols = songPosCount();
      let out = '<div class="sg-row sg-head"><span class="sg-lab"></span>'
        + Array.from({ length: cols }, (_, c) =>
            '<span class="sg-cell sg-num' + (c === playingPos ? ' playing' : '') + '">' + (c + 1) + '</span>').join('')
        + '</div>';
      state.songTracks.forEach((row, r) => {
        out += '<div class="sg-row"><span class="sg-lab">L' + (r + 1) + '</span>'
          + Array.from({ length: cols }, (_, c) => {
              const v = row[c];
              const has = v !== null && v !== undefined;
              return '<span class="sg-cell' + (has ? ' has' : '') + (c === playingPos ? ' playing' : '')
                + '" data-r="' + r + '" data-c="' + c + '" title="' + (has ? 'P' + v + ' — click to clear' : 'click = place P' + state.currentBank) + '">'
                + (has ? 'P' + v : '·') + '</span>';
            }).join('')
          + '</div>';
      });
      el.innerHTML = out;
    }

    // ── Side-by-side channel grid (ProTracker view): rows × 9 track columns ──
    function renderTracker() {
      const el = document.getElementById('tracker');
      if (!el) return;
      const bank = state.banks[state.currentBank];
      const maxLen = Math.max(...bank.map(p => p.length));
      let html = '<div class="tg" style="--tgcols:' + state.tracks.length + '">';
      html += '<div class="tg-cell tg-head tg-step">##</div>';
      state.tracks.forEach((t, ti) => {
        html += '<div class="tg-cell tg-head' + (ti === state.activeTrack ? ' active-col' : '') + (t.enabled ? '' : ' muted') + '" data-ht="' + ti + '">'
          + (ti + 1) + ' ' + instDisplay(t.instrument).slice(0, 4) + '</div>';
      });
      for (let r = 0; r < maxLen; r++) {
        html += '<div class="tg-cell tg-step">' + String(r + 1).padStart(2, '0') + '</div>';
        for (let ti = 0; ti < state.tracks.length; ti++) {
          const pat = bank[ti];
          const inRange = r < pat.length;
          const cell = inRange ? pat[r] : null;
          const cls = ['tg-cell'];
          if (ti === state.activeTrack) cls.push('active-col');
          if (!inRange) cls.push('out');
          if (inRange && ti === state.activeTrack && r === state.cursor && state.inputMode === 'edit') cls.push('cursor');
          const txt = !inRange ? '·' : (cell ? formatNote(cell.note) + '<span class="tg-vel">' + (cell.vel ?? 64) + '</span>' : '&mdash;');
          html += '<div class="' + cls.join(' ') + '" data-t="' + ti + '" data-r="' + r + '">' + txt + '</div>';
        }
      }
      html += '</div>';
      el.innerHTML = html;
    }

    function formatNote(note) {
      // Drum names → fixed 4-char label so the tracker grid stays aligned + no collisions
      if (DRUM_DISPLAY[note]) return DRUM_DISPLAY[note];
      // Pitched note like "C4" or "C#4" — render as "C-4" / "C#4" for tracker style
      const m = note.match(/^([A-G])(#|b)?(-?\d+)$/);
      if (!m) return note;
      const [, letter, accidental, oct] = m;
      const acc = accidental || '-';
      return `${letter}${acc}${oct}`;
    }
    const DRUM_DISPLAY = {
      'kick': 'KICK',  'snare': 'SNAR', 'hihat': 'HHAT', 'hihat-open': 'HHTO',
      'crash': 'CRSH', 'ride': 'RIDE',
      'tom-low': 'TOML', 'tom-mid': 'TOMM', 'tom-high': 'TOMH',
      'clap': 'CLAP', 'cowbell': 'COWB',
    };
    const DRUM_KEYMAP_VALUES = new Set(Object.values(DRUM_KEYMAP));

    // ============================================================
    //  Keyboard handling
    // ============================================================
    const keysDown = new Set();

    function onKeyDown(e) {
      // Skip if typing in input/select (target can be a non-Element, e.g. document).
      // RANGE sliders (volume etc.) deliberately PLAY THROUGH — letter keys don't move a
      // slider, so you can tweak a volume mid-jam without the keyboard going silent.
      if (e.target && typeof e.target.matches === 'function' && e.target.matches('input:not([type="range"]), select, textarea')) return;

      // Esc — the universal exit: from ANY mode back to Live (keys just play).
      if (e.code === 'Escape') {
        if (state.inputMode !== 'live') {
          setMode('live');
          showToast('🎹 Live mode — keys play to the band');
        }
        return;
      }

      // Space — transport toggle (▶ Play / ■ Stop), ProTracker heritage: PT/FT2 used Space
      // for STOP (+ edit toggle); modern DAWs made it the play/stop toggle — that muscle
      // memory wins. Never fires while typing (guard above); never scrolls the page.
      if (e.code === 'Space') {
        e.preventDefault();
        if (e.repeat) return;
        toggleTransport();
        return;
      }

      // Edit-mode-only shortcuts: cursor nav, delete, velocity adjust
      if (state.inputMode === 'edit') {
        if (e.shiftKey && e.code === 'ArrowUp') {
          const cell = at().pattern[state.cursor];
          if (cell) {
            cell.vel = Math.min(127, (cell.vel || 64) + 8);
            renderTracker();
          }
          e.preventDefault();
          return;
        }
        if (e.shiftKey && e.code === 'ArrowDown') {
          const cell = at().pattern[state.cursor];
          if (cell) {
            cell.vel = Math.max(0, (cell.vel || 64) - 8);
            renderTracker();
          }
          e.preventDefault();
          return;
        }
        if (e.code === 'ArrowDown') {
          state.cursor = (state.cursor + 1) % at().pattern.length;
          renderTracker();
          e.preventDefault();
          return;
        }
        if (e.code === 'ArrowUp') {
          state.cursor = (state.cursor - 1 + at().pattern.length) % at().pattern.length;
          renderTracker();
          e.preventDefault();
          return;
        }
        if (e.code === 'Backspace' || e.code === 'Delete') {
          at().pattern[state.cursor] = null;
          state.cursor = (state.cursor + 1) % at().pattern.length;
          renderTracker();
          renderTrackTabs();   // 'has content' indicator may flip off
          e.preventDefault();
          return;
        }
      }

      if (e.repeat) return;

      const note = noteForKey(e.code);
      if (!note) return;
      e.preventDefault();
      // Key auto-repeat: a HELD key sustains ONE note — never machine-gun retriggers.
      if (e.repeat || keysDown.has(e.code)) return;
      keysDown.add(e.code);
      flashKey(e.code, true);
      triggerNote(note, 'kb:' + e.code);
    }

    function onKeyUp(e) {
      if (keysDown.has(e.code)) {
        keysDown.delete(e.code);
        flashKey(e.code, false);
      }
      releaseHeld('kb:' + e.code);   // sustained notes stop when the key lifts
    }

    function noteForKey(code) {
      if (at().instrument === 'drums') return DRUM_KEYMAP[code] || null;
      return PITCHED_KEYMAP[code] || null;
    }

    function flashKey(code, on) {
      const el = document.querySelector(`.keymap kbd[data-code="${code}"]`);
      if (el) el.classList.toggle('lit', on);
    }

    // ============================================================
    //  Sound engine — 'classic' (built-in synthesis) vs 'real'
    //  (sampled instruments served from the node at /lib/samples/).
    //  The UI stays identical; only the sound source flips.
    // ============================================================
    const SAMPLED_SET = {   // mirrors aimeat-audio SAMPLE_NOTES (node /lib/samples)
      piano: ['A2','C3','Ds3','A3','C4','Ds4','A4','C5','Ds5','C6','C7'],
      guitar: ['E2','A2','D3','G3','B3','E4','A4','E5'],
      'guitar-steel': ['E2','A2','D3','G3','B3','E4','A4','E5'],
      'guitar-el': ['E2','A2','D3','G3','B3','E4','A4','E5'],
      bass: ['E1','A1','D2','G2','B2','E3'],
      flute: ['C4','E4','A4','C5','E5','A5','C6'],
      strings: ['C2','G2','C3','G3','C4','G4','C5','G5','C6'],
      organ: ['C2','G2','C3','G3','C4','G4','C5','G5','C6'],
      epiano: ['C2','G2','C3','G3','C4','G4','C5','G5','C6'],
      trumpet: ['E3','A3','C4','E4','A4','C5','E5','A5'],
      drums: ['kick','snare','hihat','hihat-open','crash','ride','tom-high','tom-mid','tom-low','clap','cowbell'],
    };
    const CLASSIC_SUSTAIN = new Set(['flute']);   // classic flute: hold-to-sustain (synth has its own held engine)
    // keyup fade (s) — winds/organ cut fast, plucked/struck strings damp naturally
    const REAL_RELEASE = { piano: 0.4, guitar: 0.3, 'guitar-steel': 0.3, 'guitar-el': 0.35, bass: 0.25,
      flute: 0.06, strings: 0.25, organ: 0.08, epiano: 0.35, trumpet: 0.08 };
    // Per-instrument output gain — quiet sample sets boosted so track vol 1.0 is LOUD
    // ("easier to turn a hot channel down than a quiet one past max").
    const REAL_GAIN = { drums: 2.2, bass: 1.6, guitar: 1.3, 'guitar-steel': 1.3, 'guitar-el': 1.3,
      flute: 1.2, strings: 1.35, organ: 1.3, epiano: 1.25, trumpet: 1.3, piano: 1.0 };
    // Classic engine knows only the base instruments — new ids borrow the closest classic voice.
    const CLASSIC_FALLBACK = { 'guitar-steel': 'guitar', 'guitar-el': 'guitar',
      strings: 'synth', organ: 'synth', epiano: 'piano', trumpet: 'flute' };

    const soundEngine = {
      mode: localStorage.getItem('bj-sound') === 'real' ? 'real' : 'classic',
      buffers: {}, state: 'idle',   // idle | loading | ready | failed
      _ctx: null, voices: new Map(),
      ctx() {
        if (!this._ctx) this._ctx = new (window.AudioContext || window.webkitAudioContext)();
        if (this._ctx.state === 'suspended') this._ctx.resume();
        return this._ctx;
      },
      has(inst) { return this.state === 'ready' && this.buffers[inst] && Object.keys(this.buffers[inst]).length > 0; },
      _loading: null,
      // SINGLE-FLIGHT: every concurrent caller shares one in-flight load and gets the
      // TRUE final result. (Previously a second Real-click DURING the multi-second load
      // got an instant `false` and reverted the engine to Classic — the "stays classic
      // no matter how many times I press Real" bug.)
      load() {
        if (this.state === 'ready') return Promise.resolve(true);
        if (this._loading) return this._loading;
        this.state = 'loading';
        try { renderSoundSeg(); renderSampleStatus(); } catch (e) {}
        this._loading = (async () => {
          const jobs = [];
          for (const [inst, notes] of Object.entries(SAMPLED_SET)) {
            this.buffers[inst] = {};
            for (const n of notes) {
              jobs.push(fetch('/lib/samples/' + inst + '/' + n + '.mp3')
                .then(r => r.ok ? r.arrayBuffer() : null)
                .then(b => b ? this.ctx().decodeAudioData(b) : null)
                .then(d => { if (d) this.buffers[inst][n] = d; tickSampleStatus(); })
                .catch(() => { tickSampleStatus(); }));
            }
          }
          await Promise.all(jobs);
          try { renderSampleStatus(true); } catch (e) {}
          // Ready when ANY instrument loaded — per-instrument has() falls back to classic
          // for the rest, so a node with a partial sample set still gives you Real sound.
          const ok = Object.values(this.buffers).some(m => Object.keys(m).length > 0);
          this.state = ok ? 'ready' : 'failed';
          this._loading = null;      // a later retry starts a fresh attempt
          try { renderSoundSeg(); updatePlayStatus(); } catch (e) {}
          return ok;
        })();
        return this._loading;
      },
      _freq(note) {   // note name → Hz ('Ds3' = D#3; flats accepted)
        const FLAT = { Db:'C#', Eb:'D#', Gb:'F#', Ab:'G#', Bb:'A#', Cs:'C#', Ds:'D#', Fs:'F#', Gs:'G#', As:'A#' };
        let n = note; const two = n.slice(0, 2);
        if (FLAT[two]) n = FLAT[two] + n.slice(2);
        const m = n.match(/^([A-G]#?)(\d)$/);
        if (!m) return null;
        const semi = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'].indexOf(m[1]);
        return 440 * Math.pow(2, ((parseInt(m[2], 10) + 1) * 12 + semi - 69) / 12);
      },
      noteOn(inst, note, vel, holdKey) {
        const bank = this.buffers[inst];
        if (!bank) return false;
        // Drums: exact-name one-shots, no pitch shifting.
        if (inst === 'drums') {
          const buf = bank[note];
          if (!buf) return false;
          const ctx = this.ctx(), t = ctx.currentTime;
          const src = ctx.createBufferSource(); src.buffer = buf;
          const gain = ctx.createGain(); gain.gain.value = Math.max(0.05, vel * (REAL_GAIN[inst] || 1));
          src.connect(gain); gain.connect(ctx.destination);
          src.start(t);
          return true;
        }
        const target = this._freq(note);
        if (!target) return false;
        let best = null, bestDist = Infinity;
        for (const sn of Object.keys(bank)) {
          const f = this._freq(sn);
          const d = Math.abs(Math.log2(target / f));
          if (d < bestDist) { bestDist = d; best = { buf: bank[sn], rate: target / f }; }
        }
        if (!best) return false;
        const ctx = this.ctx(), t = ctx.currentTime;
        const src = ctx.createBufferSource(); src.buffer = best.buf; src.playbackRate.value = best.rate;
        const gain = ctx.createGain();
        gain.gain.setValueAtTime(0.0001, t);
        gain.gain.exponentialRampToValueAtTime(Math.max(0.05, vel * (REAL_GAIN[inst] || 1)), t + 0.012);
        src.connect(gain); gain.connect(ctx.destination);
        src.start(t);
        if (holdKey) {
          this.noteOffKey(holdKey);   // retrigger: release any previous voice on this key
          const voice = { src, gain, inst };
          this.voices.set(holdKey, voice);
          src.onended = () => { if (this.voices.get(holdKey) === voice) this.voices.delete(holdKey); };
        }
        return true;
      },
      noteOffKey(holdKey) {
        const v = this.voices.get(holdKey);
        if (!v) return;
        this.voices.delete(holdKey);
        const ctx = this.ctx(), t = ctx.currentTime, rel = REAL_RELEASE[v.inst] || 0.2;
        try {
          v.gain.gain.cancelScheduledValues(t);
          v.gain.gain.setValueAtTime(Math.max(v.gain.gain.value, 0.0001), t);
          v.gain.gain.exponentialRampToValueAtTime(0.0001, t + rel);
          v.src.stop(t + rel + 0.05);
        } catch (e) {}
      },
      allOff() { for (const k of [...this.voices.keys()]) this.noteOffKey(k); },
    };

    // ============================================================
    //  📼 Sample banks — old-school tracker sample disks (ST-01 style)
    //  in the extended AIMEAT format:  aimeat-sample-bank@1
    //    { format:"aimeat-sample-bank@1", name, license?, source?,
    //      samples: [{ name, note?, data }] }   // data = base64 WAV
    //  No Amiga-era limits: any rate/bits/channels/length/count.
    //  Imports: .asb.json | .wav | .mod (samples extracted) | .8svx/.iff
    // ============================================================
    // Full disk catalog — every ST-XX disk as an .asb bank, listed in one public JSON.
    const BANK_CATALOG_URL = 'https://aimeat.io/v1/pub/happydude500001%40aimeat-finland-001-genesis/bandjam/banks/catalog.json';
    let bankCatalog = null;   // [{ name, samples, url }] once fetched
    const EXAMPLE_BANKS = [
      { name: 'ST-01', url: 'https://aimeat.io/v1/pub/claude-desktop-home-mcp%23happydude500001%40aimeat-finland-001-genesis/bandjam/banks/st-01.asb.json' },
      { name: 'ST-02', url: 'https://aimeat.io/v1/pub/claude-desktop-home-mcp%23happydude500001%40aimeat-finland-001-genesis/bandjam/banks/st-02.asb.json' },
    ];
    const BANKS_INDEX_KEY = 'bandjam.banks-index';
    const SMP_GAIN = 1.4, SMP_RELEASE = 0.25;

    function smpParse(id) {           // 'smp:0:12' -> { bank, idx } or null
      const m = /^smp:(\d+):(\d+)$/.exec(id || '');
      if (!m) return null;
      const bank = state.sampleBanks[+m[1]];
      const s = bank && bank.samples[+m[2]];
      return s ? { bank, sample: s, bi: +m[1], si: +m[2] } : null;
    }
    function midiOf(note) {
      const FLAT = { Db:'C#', Eb:'D#', Gb:'F#', Ab:'G#', Bb:'A#' };
      let n = note; const two = n.slice(0, 2);
      if (FLAT[two]) n = FLAT[two] + n.slice(2);
      const m = n.match(/^([A-G]#?)(\d)$/);
      if (!m) return 60;
      return (parseInt(m[2], 10) + 1) * 12 + ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'].indexOf(m[1]);
    }
    const sampleVoices = new Map();
    // Base pitch: the sample plays AS RECORDED on C4 (keyboard center) — tracker C-3 convention.
    function smpNoteOn(ref, note, vel, holdKey) {
      const buf = ref.sample.buffer;
      if (!buf) return false;
      const ctx = soundEngine.ctx(), t = ctx.currentTime;
      const src = ctx.createBufferSource(); src.buffer = buf;
      src.playbackRate.value = Math.pow(2, (midiOf(note) - 60) / 12);
      const gain = ctx.createGain();
      gain.gain.setValueAtTime(0.0001, t);
      gain.gain.exponentialRampToValueAtTime(Math.max(0.05, vel * SMP_GAIN), t + 0.008);
      src.connect(gain); gain.connect(ctx.destination);
      src.start(t);
      if (holdKey) {
        const prev = sampleVoices.get(holdKey); if (prev) smpNoteOffKey(holdKey);
        const voice = { src, gain };
        sampleVoices.set(holdKey, voice);
        src.onended = () => { if (sampleVoices.get(holdKey) === voice) sampleVoices.delete(holdKey); };
      }
      return true;
    }
    function smpNoteOffKey(holdKey) {
      const v = sampleVoices.get(holdKey);
      if (!v) return;
      sampleVoices.delete(holdKey);
      try {
        const ctx = soundEngine.ctx(), t = ctx.currentTime;
        v.gain.gain.cancelScheduledValues(t);
        v.gain.gain.setValueAtTime(Math.max(v.gain.gain.value, 0.0001), t);
        v.gain.gain.exponentialRampToValueAtTime(0.0001, t + SMP_RELEASE);
        v.src.stop(t + SMP_RELEASE + 0.05);
      } catch (e) {}
    }

    // ── decode an ASB manifest into a loaded bank (AudioBuffers) ──
    async function decodeAsb(manifest, source) {
      if (!manifest || !Array.isArray(manifest.samples)) throw new Error('not an aimeat-sample-bank');
      const ctx = soundEngine.ctx();
      const samples = [];
      for (const s of manifest.samples) {
        try {
          const bin = atob(s.data);
          const bytes = new Uint8Array(bin.length);
          for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
          const buffer = await ctx.decodeAudioData(bytes.buffer);
          samples.push({ name: s.name || ('smp' + samples.length), buffer, data: s.data });
        } catch (e) { /* skip undecodable sample */ }
      }
      if (!samples.length) throw new Error('no decodable samples');
      return { id: 'bank-' + Date.now() + '-' + Math.floor(Math.random() * 1e6),
        name: manifest.name || 'bank', license: manifest.license, source: source || manifest.source || null, samples };
    }
    function addBankToState(bank) {
      state.sampleBanks.push(bank);
      renderSampleBanks(); renderTrackHeader();
      showToast('📼 ' + bank.name + ' loaded — ' + bank.samples.length + ' samples (pick them in the track instrument list)');
    }
    async function loadBankFromUrl(url, name) {
      try {
        showToast('📼 Loading ' + (name || 'bank') + '…');
        const r = await fetch(url);
        if (!r.ok) throw new Error('HTTP ' + r.status);
        const manifest = await r.json();
        if (state.sampleBanks.some(b => b.source === url)) { showToast('📼 Already loaded'); return; }
        addBankToState(await decodeAsb(manifest, url));
      } catch (e) { showToast('⚠️ Could not load the bank: ' + e.message); }
    }

    // ── file imports: wav / mod / 8svx / asb.json ──
    function wavFromPcm8(signedBytes, rate) {   // signed 8-bit PCM -> WAV bytes (unsigned 8-bit)
      const n = signedBytes.length, out = new Uint8Array(44 + n), dv = new DataView(out.buffer);
      const w = (o, s) => { for (let i = 0; i < s.length; i++) out[o + i] = s.charCodeAt(i); };
      w(0, 'RIFF'); dv.setUint32(4, 36 + n, true); w(8, 'WAVE'); w(12, 'fmt ');
      dv.setUint32(16, 16, true); dv.setUint16(20, 1, true); dv.setUint16(22, 1, true);
      dv.setUint32(24, rate, true); dv.setUint32(28, rate, true); dv.setUint16(32, 1, true); dv.setUint16(34, 8, true);
      w(36, 'data'); dv.setUint32(40, n, true);
      for (let i = 0; i < n; i++) out[44 + i] = (signedBytes[i] + 256 + 128) & 0xff;   // signed -> unsigned
      return out;
    }
    function b64FromBytes(bytes) {
      let s = '';
      for (let i = 0; i < bytes.length; i += 0x8000) s += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
      return btoa(s);
    }
    const PAL_C3 = 8287;   // Paula PAL period 214 — ProTracker C-3
    function samplesFromMod(bytes) {   // classic 31-sample MOD (M.K. etc.)
      const dv = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
      const tag = String.fromCharCode(bytes[1080], bytes[1081], bytes[1082], bytes[1083]);
      const channels = { 'M.K.': 4, 'M!K!': 4, 'FLT4': 4, '4CHN': 4, '6CHN': 6, '8CHN': 8, 'FLT8': 8 }[tag];
      if (!channels) throw new Error('not a 31-sample MOD');
      const heads = [];
      for (let i = 0; i < 31; i++) {
        const o = 20 + i * 30;
        let name = '';
        for (let j = 0; j < 22; j++) { const c = bytes[o + j]; if (c >= 32 && c < 127) name += String.fromCharCode(c); }
        heads.push({ name: name.trim(), len: dv.getUint16(o + 22, false) * 2 });
      }
      const nOrders = bytes[950];
      let maxPat = 0;
      for (let i = 0; i < 128; i++) maxPat = Math.max(maxPat, bytes[952 + i]);
      let off = 1084 + (maxPat + 1) * 64 * channels * 4;
      const out = [];
      heads.forEach((hd, i) => {
        if (hd.len > 2 && off + hd.len <= bytes.length) {
          const pcm = new Int8Array(bytes.buffer, bytes.byteOffset + off, hd.len);
          out.push({ name: hd.name || ('sample ' + (i + 1)), data: b64FromBytes(wavFromPcm8(pcm, PAL_C3)) });
        }
        off += hd.len;
      });
      if (!out.length) throw new Error('MOD has no samples');
      return out;
    }
    function sampleFrom8svx(bytes, fallbackName) {   // IFF 8SVX: VHDR (rate) + BODY (signed 8-bit)
      const ascii = (o, n) => String.fromCharCode.apply(null, bytes.subarray(o, o + n));
      if (ascii(0, 4) !== 'FORM' || ascii(8, 4) !== '8SVX') throw new Error('not 8SVX');
      const dv = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
      let off = 12, rate = PAL_C3, body = null;
      while (off + 8 <= bytes.length) {
        const id = ascii(off, 4), size = dv.getUint32(off + 4, false);
        if (id === 'VHDR') rate = dv.getUint16(off + 20, false) || rate;
        if (id === 'BODY') body = new Int8Array(bytes.buffer, bytes.byteOffset + off + 8, size);
        off += 8 + size + (size % 2);
      }
      if (!body) throw new Error('8SVX has no BODY');
      return { name: fallbackName, data: b64FromBytes(wavFromPcm8(body, rate)) };
    }
    async function importBankFiles(files) {
      const gathered = [];   // ASB-shape samples collected from wav/mod/8svx
      for (const f of files) {
        const lower = f.name.toLowerCase();
        try {
          if (lower.endsWith('.json') || lower.endsWith('.asb')) {
            const manifest = JSON.parse(await f.text());
            addBankToState(await decodeAsb(manifest, null));
          } else if (lower.endsWith('.mod')) {
            const smp = samplesFromMod(new Uint8Array(await f.arrayBuffer()));
            addBankToState(await decodeAsb({ name: f.name.replace(/\.mod$/i, ''), samples: smp }, null));
          } else if (lower.endsWith('.8svx') || lower.endsWith('.iff')) {
            gathered.push(sampleFrom8svx(new Uint8Array(await f.arrayBuffer()), f.name.replace(/\.(8svx|iff)$/i, '')));
          } else if (lower.endsWith('.wav')) {
            gathered.push({ name: f.name.replace(/\.wav$/i, ''), data: b64FromBytes(new Uint8Array(await f.arrayBuffer())) });
          } else {
            showToast('⚠️ ' + f.name + ': use .wav, .mod, .8svx/.iff or .asb.json');
          }
        } catch (e) { showToast('⚠️ ' + f.name + ': ' + e.message); }
      }
      if (gathered.length) {
        try { addBankToState(await decodeAsb({ name: 'Imported', samples: gathered }, null)); }
        catch (e) { showToast('⚠️ Import failed: ' + e.message); }
      }
    }

    // ── my banks in AIMEAT storage (saved banks are PUBLIC — anyone with the link can jam with them) ──
    async function readBanksIndex() {
      try { const idx = await AIMEAT.data.get(BANKS_INDEX_KEY); return Array.isArray(idx) ? idx : []; }
      catch (e) { return []; }
    }
    async function saveBankToStorage(bi) {
      const bank = state.sampleBanks[bi];
      if (!bank) return;
      const sess = AIMEAT.auth && currentSessionSafe();
      if (!sess) { showToast('⚠️ Sign in to save banks'); return; }
      const manifest = { format: 'aimeat-sample-bank@1', name: bank.name, license: bank.license,
        source: bank.source, samples: bank.samples.map(s => ({ name: s.name, note: 'C-3', data: s.data })) };
      const key = 'bandjam/banks/' + bank.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').slice(0, 30) + '-' + Date.now() + '.asb.json';
      showToast('💾 Saving ' + bank.name + '…');
      try {
        const res = await sess.fetch('/v1/storage', { method: 'POST', body: JSON.stringify({
          key, mime_type: 'application/json', visibility: 'public',
          data: btoa(unescape(encodeURIComponent(JSON.stringify(manifest)))) }) });
        if (!res || res.ok === false) throw new Error((res && res.error && res.error.message) || 'save failed');
        const ghii = sess.ghii || (sess.owner + '@' + (AIMEAT.auth.nodeId || ''));
        // /v1/pub is reachable on the app origin too — keep the link node-relative
        const pubUrl = location.origin + '/v1/pub/' + encodeURIComponent(ghii) + '/' + key;
        const idx = await readBanksIndex();
        idx.push({ key, name: bank.name, url: pubUrl, samples: bank.samples.length, savedAt: new Date().toISOString() });
        try { await AIMEAT.data.set(BANKS_INDEX_KEY, idx, { visibility: 'private', tags: ['bandjam'] }); } catch (e) {}
        bank.source = pubUrl;
        renderSampleBanks();
        showToast('💾 Bank saved to your storage (public link)');
      } catch (e) { showToast('⚠️ Save failed: ' + e.message); }
    }
    function currentSessionSafe() {
      try { return state.session; } catch (e) { return null; }
    }
    async function renderMyBanks() {
      const el = document.getElementById('mybank-list');
      if (!el) return;
      const idx = await readBanksIndex();
      if (!idx.length) { el.innerHTML = '<span class="text-xs opacity-50">none yet — import files and 💾 save</span>'; return; }
      el.innerHTML = idx.map((b, i) =>
        '<button class="bank-chip" data-url="' + escapeHtml(b.url) + '" title="Load ' + escapeHtml(b.name) + ' (' + b.samples + ' samples)">📼 '
        + escapeHtml(b.name) + ' <span class="opacity-60">' + b.samples + '</span></button>').join('');
      el.querySelectorAll('.bank-chip').forEach(c => c.addEventListener('click', () => loadBankFromUrl(c.dataset.url, 'bank')));
    }
    function renderSampleBanks() {
      const el = document.getElementById('bank-loaded');
      if (!el) return;
      if (!state.sampleBanks.length) { el.innerHTML = '<span class="text-xs opacity-50">no banks loaded</span>'; return; }
      el.innerHTML = state.sampleBanks.map((b, i) =>
        '<span class="bank-chip loaded" title="' + escapeHtml(b.license || '') + '">📼 ' + escapeHtml(b.name)
        + ' <span class="opacity-60">' + b.samples.length + '</span>'
        + (b.source ? '' : ' <button class="bank-save" data-bi="' + i + '" title="Save to your AIMEAT storage (public .asb.json)">💾</button>')
        + ' <button class="bank-x" data-bi="' + i + '" title="Unload">✕</button></span>').join('');
      el.querySelectorAll('.bank-x').forEach(x => x.addEventListener('click', () => {
        const bi = parseInt(x.dataset.bi, 10);
        // tracks using this bank fall back to piano; later banks shift index — remap smp ids
        state.tracks.forEach(t => {
          const ref = /^smp:(\d+):(\d+)$/.exec(t.instrument);
          if (!ref) return;
          const b = +ref[1];
          if (b === bi) t.instrument = 'piano';
          else if (b > bi) t.instrument = 'smp:' + (b - 1) + ':' + ref[2];
        });
        state.sampleBanks.splice(bi, 1);
        renderSampleBanks(); renderTrackHeader(); renderTrackTabs(); renderTracker();
      }));
      el.querySelectorAll('.bank-save').forEach(s => s.addEventListener('click', () => saveBankToStorage(parseInt(s.dataset.bi, 10))));
    }

    // Per-instrument sample-loading indicators (the "Samples" strip in the cockpit).
    let ssTick = null;
    function renderSampleStatus(final) {
      const el = document.getElementById('sample-status');
      if (!el) return;
      el.classList.remove('hidden');
      el.innerHTML = Object.keys(SAMPLED_SET).map(inst => {
        const got = Object.keys(soundEngine.buffers[inst] || {}).length;
        const tot = SAMPLED_SET[inst].length;
        const cls = got === tot ? 'done' : (got > 0 ? 'part' : 'none');
        return `<span class="ss-chip ${cls}">${(INST_SHORT[inst] || inst).slice(0,5)} ${got}/${tot}</span>`;
      }).join('');
      // The strip STAYS visible once Real has loaded — it doubles as a "what's sampled
      // and ready" status section (chips green = in memory).
    }
    function tickSampleStatus() {
      if (ssTick) return;
      ssTick = setTimeout(() => { ssTick = null; try { renderSampleStatus(); } catch (e) {} }, 120);
    }

    function renderSoundSeg() {
      document.querySelectorAll('#sound-seg .mode-btn').forEach(b => {
        b.classList.toggle('active', b.dataset.sound === soundEngine.mode);
        if (b.dataset.sound === 'real') {
          b.textContent = soundEngine.state === 'loading' ? '⏳ Real' : '🎻 Real';
        }
      });
    }
    async function setSoundMode(mode) {
      if (mode === soundEngine.mode) return;
      if (mode === 'real') {
        soundEngine.mode = 'real'; localStorage.setItem('bj-sound', 'real');
        renderSoundSeg();
        if (soundEngine.state !== 'ready') {
          showToast('🎻 Loading real instruments…');
          const ok = await soundEngine.load();
          if (!ok) {
            soundEngine.mode = 'classic'; localStorage.setItem('bj-sound', 'classic');
            renderSoundSeg();
            updatePlayStatus();
            showToast('⚠️ Real sounds aren’t on this node yet — using Classic');
            return;
          }
        }
        renderSoundSeg(); updatePlayStatus();
        showToast('🎻 Real instruments ready');
      } else {
        soundEngine.mode = 'classic'; localStorage.setItem('bj-sound', 'classic');
        renderSoundSeg();
        allNotesOff();   // no sampled voice may survive the flip
        updatePlayStatus();
        showToast('⚡ Classic synth engine');
      }
    }

    // Held notes (physical + virtual keys) — holdKey → release closure. BOTH engines.
    const heldNotes = new Map();
    function releaseHeld(holdKey) {
      const rel = heldNotes.get(holdKey);
      if (rel) { heldNotes.delete(holdKey); try { rel(); } catch (e) {} }
    }
    // Panic: nothing may keep sounding when the page loses the keys/pointer.
    function allNotesOff() {
      for (const k of [...heldNotes.keys()]) releaseHeld(k);
      soundEngine.allOff();
      try { AIMEAT.audio.stop(); } catch (e) {}
      keysDown.clear();
      document.querySelectorAll('.keymap kbd.lit, .virt-key.lit, .virt-drum.lit').forEach(el => el.classList.remove('lit'));
    }
    window.addEventListener('blur', allNotesOff);
    document.addEventListener('visibilitychange', () => { if (document.hidden) allNotesOff(); });
    document.addEventListener('pointercancel', allNotesOff);

    // holdKey (optional): the note sustains until releaseHeld(holdKey) — real engine always,
    // classic engine for flute/synth (others keep their natural percussive envelope).
    // Held analog-style synth — 2 detuned saws + a sub square through a lowpass. GATED:
    // it sounds exactly as long as the key/finger is down, then releases in ~50 ms.
    const bjSynth = {
      noteOn(note, vel) {
        const f = soundEngine._freq(note);
        if (!f) return null;
        const ctx = soundEngine.ctx(), t = ctx.currentTime;
        const o1 = ctx.createOscillator(); o1.type = 'sawtooth'; o1.frequency.value = f;
        const o2 = ctx.createOscillator(); o2.type = 'sawtooth'; o2.frequency.value = f; o2.detune.value = 8;
        const o3 = ctx.createOscillator(); o3.type = 'square'; o3.frequency.value = f / 2;
        const og3 = ctx.createGain(); og3.gain.value = 0.25; o3.connect(og3);
        const filt = ctx.createBiquadFilter(); filt.type = 'lowpass';
        filt.frequency.setValueAtTime(Math.min(9000, f * 6), t);
        filt.frequency.exponentialRampToValueAtTime(Math.min(9000, f * 3), t + 0.25);
        filt.Q.value = 1.1;
        const gain = ctx.createGain();
        gain.gain.setValueAtTime(0.0001, t);
        gain.gain.exponentialRampToValueAtTime(Math.max(0.04, vel * 0.5), t + 0.012);
        o1.connect(filt); o2.connect(filt); og3.connect(filt);
        filt.connect(gain); gain.connect(ctx.destination);
        o1.start(t); o2.start(t); o3.start(t);
        return () => {
          const t2 = ctx.currentTime;
          try {
            gain.gain.cancelScheduledValues(t2);
            gain.gain.setValueAtTime(Math.max(gain.gain.value, 0.0001), t2);
            gain.gain.exponentialRampToValueAtTime(0.0001, t2 + 0.05);
            o1.stop(t2 + 0.12); o2.stop(t2 + 0.12); o3.stop(t2 + 0.12);
          } catch (e) {}
        };
      },
    };

    // Per-track engine override: 'global' (default) follows the cockpit ⚡/🎻 switch.
    function effectiveSound(pref) {
      return (pref === 'classic' || pref === 'real') ? pref : soundEngine.mode;
    }
    // Lazy-load samples when a track opts into Real while the global engine is Classic.
    function ensureRealLoaded() {
      if (soundEngine.state === 'ready' || soundEngine.state === 'loading') return;
      showToast('🎻 Loading real instruments for this track…');
      soundEngine.load().then(ok => {
        if (!ok) showToast('⚠️ Real sounds aren’t on this node yet — this track stays Classic');
      });
    }

    // 🎯 Sync (input quantize): hold the note back and fire it exactly ON the next
    // 16th-note boundary of the shared clock. Releasing BEFORE the boundary cancels it.
    function scheduleQuantized(track, note, vel, holdKey) {
      const stepMs = stepDurationMs();
      const elapsed = Date.now() - state.t0;
      const wait = Math.max(0, stepMs - (elapsed % stepMs));
      const timer = setTimeout(() => {
        if (holdKey) heldNotes.delete(holdKey);   // hand ownership to playLocal's release
        playLocal(track.instrument, note, vel, holdKey, track.sound);
        try {
          state.rt && state.rt.broadcast({ type: 'note', instrument: track.instrument, note, velocity: vel });
        } catch (e) {}
        pushRiver({ color: SELF_RIVER_INK, label: note, t: Date.now() });
      }, wait);
      if (holdKey) heldNotes.set(holdKey, () => clearTimeout(timer));
    }

    // ✨ AI compose — the LLM writes tracker material. Two levels: fill ONE channel of the
    // current pattern (with the whole song as context), or compose the ENTIRE arrangement.
    const DRUM_NOTES = ['kick','snare','hihat','hihat-open','crash','ride','tom-low','tom-mid','tom-high','clap','cowbell'];
    let aiComposeBusy = false;
    // ✨ AI Composer dialog — one place to say WHAT you want before spending your key.
    const AIC_STYLES = ['lofi', 'funk', 'house', 'techno', 'jazz', 'rock', 'ambient', 'chiptune', 'dnb', 'reggae'];
    let aicMode = 'song';
    const aicStyles = new Set();   // MULTI-select — "ambient chiptune" or "funk techno" are real asks
    function openAiComposer(mode) {
      aicMode = mode;
      const ov = document.getElementById('aic-overlay');
      document.getElementById('aic-title').textContent = mode === 'fill' ? '✨ Fill this track' : '🪄 Compose whole song';
      document.getElementById('aic-song-opts').style.display = mode === 'song' ? '' : 'none';
      const pf = document.getElementById('aic-prompt-flow');
      if (pf) pf.style.display = mode === 'song' ? '' : 'none';
      const cs = document.getElementById('aic-copy-status'); if (cs) cs.textContent = '';
      document.getElementById('aic-fill-opts').style.display = mode === 'fill' ? '' : 'none';
      document.getElementById('aic-steps').textContent = String(state.patternLen);
      // style chips — MULTI-select: pick any combo (ambient+chiptune, funk+techno…)
      const st = document.getElementById('aic-styles');
      st.innerHTML = AIC_STYLES.map(s => '<span class="aic-chip' + (aicStyles.has(s) ? ' on' : '') + '" data-style="' + s + '">' + s + '</span>').join('');
      st.querySelectorAll('.aic-chip').forEach(c => c.addEventListener('click', () => {
        const s = c.dataset.style;
        if (aicStyles.has(s)) aicStyles.delete(s); else aicStyles.add(s);
        c.classList.toggle('on', aicStyles.has(s));
      }));
      // per-track row: include-checkbox + a FULL instrument select (base + 📼 bank samples) —
      // set a track to an ST-01 sample right here and the AI writes for that sound.
      const tr = document.getElementById('aic-tracks');
      tr.innerHTML = state.tracks.map((t, i) =>
        '<span class="aic-trackrow"><label class="aic-chip"><input type="checkbox" class="checkbox checkbox-xs" data-ti="' + i + '" checked> ' + (i + 1) + '</label>'
        + '<select class="select select-sm select-bordered aic-inst" data-ti="' + i + '">' + instrumentOptionsHtml(t.instrument) + '</select></span>').join('');
      // fill mode: track select defaults to the active track
      const ts = document.getElementById('aic-track');
      ts.innerHTML = state.tracks.map((t, i) =>
        '<option value="' + i + '"' + (i === state.activeTrack ? ' selected' : '') + '>' + (i + 1) + ' · ' + escapeHtml(instDisplay(t.instrument)) + '</option>').join('');
      ov.classList.remove('hidden');
      setTimeout(() => { try { document.getElementById('aic-desc').focus(); } catch (e) {} }, 50);
    }
    function closeAiComposer() { document.getElementById('aic-overlay').classList.add('hidden'); }
    function aicGatherSongOpts() {
      const desc = (document.getElementById('aic-desc').value || '').trim();
      const wish = [desc, aicStyles.size ? ('Style: ' + [...aicStyles].join(' + ') + '.') : ''].filter(Boolean).join(' ');
      // dialog instrument selects apply immediately so the prompt lists what you chose
      document.querySelectorAll('#aic-tracks select.aic-inst').forEach(sel => {
        const ti = parseInt(sel.dataset.ti, 10);
        if (state.tracks[ti] && sel.value !== state.tracks[ti].instrument) state.tracks[ti].instrument = sel.value;
      });
      return {
        wish,
        npat: parseInt(document.getElementById('aic-npat').value, 10),
        npos: parseInt(document.getElementById('aic-npos').value, 10),
        nlay: parseInt(document.getElementById('aic-nlay').value, 10),
        reassign: document.getElementById('aic-reassign').checked,
        allowed: [...document.querySelectorAll('#aic-tracks input[data-ti]')].filter(c => c.checked).map(c => parseInt(c.dataset.ti, 10)),
      };
    }
    async function aicCopyPrompt() {
      const opts = aicGatherSongOpts();
      if (!opts.allowed.length) { showToast('⚠️ Check at least one instrument track'); return; }
      const p = buildComposePrompt(opts);
      const text = p.system + '\n\n' + p.prompt + '\nReturn ONLY the JSON — no commentary.';
      try {
        await navigator.clipboard.writeText(text);
        document.getElementById('aic-copy-status').textContent = '✅ copied — paste it to your AI chat';
      } catch (e) {
        // clipboard denied — show it for manual copy
        document.getElementById('aic-import').value = text;
        document.getElementById('aic-copy-status').textContent = '⚠️ clipboard blocked — prompt is in the box below, copy it from there';
      }
    }
    function aicImportJson() {
      const raw = (document.getElementById('aic-import').value || '').trim();
      if (!raw) { showToast('⚠️ Paste the AI chat\'s JSON answer first'); return; }
      let g = null;
      // tolerate codefences + prose around the JSON: take the outermost {...}
      const m = raw.match(/\{[\s\S]*\}/);
      try { g = JSON.parse(m ? m[0] : raw); } catch (e) { showToast('⚠️ That is not valid JSON — copy the whole answer'); return; }
      const opts = aicGatherSongOpts();
      if (!opts.allowed.length) { showToast('⚠️ Check at least one instrument track'); return; }
      closeAiComposer();
      const applied = applyComposedSong(g, opts);
      if (applied) showToast('📥 Imported — press ▶ Play (🎼 Song is on)');
    }
    function aiComposerGo() {
      const desc = (document.getElementById('aic-desc').value || '').trim();
      const wish = [desc, aicStyles.size ? ('Style: ' + [...aicStyles].join(' + ') + '.') : ''].filter(Boolean).join(' ');
      void wish;
      if (aicMode === 'fill') {
        const ti = parseInt(document.getElementById('aic-track').value, 10) || 0;
        closeAiComposer();
        llmFillTrack({ wish, track: ti });
      } else {
        const opts = aicGatherSongOpts();
        if (!opts.allowed.length) { showToast('⚠️ Check at least one instrument track'); return; }
        renderTrackTabs(); renderTrackHeader(); renderTracker();
        closeAiComposer();
        llmComposeSong(opts);
      }
    }
    function setComposeStatus(t) { const el = document.getElementById('ai-compose-status'); if (el) el.textContent = t || ''; }
    function normNoteFor(instrument, note) {
      if (instrument === 'drums') {
        const n = String(note || '').toLowerCase().trim();
        return DRUM_NOTES.includes(n) ? n : null;
      }
      let n = String(note || '').trim();
      const FLAT = { Db:'C#', Eb:'D#', Gb:'F#', Ab:'G#', Bb:'A#' };
      const two = n.slice(0, 2);
      if (FLAT[two]) n = FLAT[two] + n.slice(2);
      const m = n.match(/^([A-G]#?)(\d)$/);
      if (!m) return null;
      const oct = Math.max(1, Math.min(6, parseInt(m[2], 10)));
      return m[1] + oct;
    }
    function sparseCells(pat) {
      const out = [];
      pat.forEach((c, i) => { if (c) out.push([i, c.note, c.vel ?? 64]); });
      return out;
    }
    function songContextForLLM() {
      return {
        bpm: state.bpm,
        songTracks: state.songTracks, patternLen: state.patternLen,
        channels: state.tracks.map((t, i) => ({ ch: i, instrument: t.instrument, enabled: t.enabled })),
        patterns: state.banks.map((bank, bi) => ({
          id: bi,
          tracks: bank.map((p, ti) => ({ ch: ti, length: p.length, cells: sparseCells(p) })),
        })),
      };
    }
    function applyCellsToTrack(ti, cells, len) {
      const inst = state.tracks[ti].instrument;
      const pat = state.banks[state.currentBank][ti];
      pat.fill(null);
      let applied = 0;
      for (const c of (cells || [])) {
        if (!Array.isArray(c) || c.length < 2) continue;
        const s = Math.trunc(c[0]);
        const note = normNoteFor(inst, c[1]);
        const vel = Math.max(1, Math.min(127, Math.trunc(c[2] ?? 80)));
        if (note === null || s < 0 || s >= pat.length) continue;
        pat[s] = { note, vel };
        applied++;
      }
      return applied;
    }
    async function aiAvailableOrExplain() {
      const ok = await AIMEAT.ai.isAvailable().catch(() => false);
      if (!ok) showToast('⚠️ AI needs your OpenRouter key — add it in your AIMEAT profile, then sign in here');
      return ok;
    }
    async function llmFillTrack(opts) {
      if (aiComposeBusy) return;
      if (!(await aiAvailableOrExplain())) return;
      const ti = (opts && opts.track != null) ? opts.track : state.activeTrack;
      const t = state.tracks[ti];
      const len = t.pattern.length;
      const wish = (opts && opts.wish) || '';
      aiComposeBusy = true; setComposeStatus('✨ writing track ' + (ti + 1) + '…');
      try {
        const isDrums = t.instrument === 'drums';
        const r = await AIMEAT.ai.completeJson({
          app_id: 'band-jam',
          modelRole: 'execution',
          temperature: 0.9,
          systemPrompt: 'You are a tasteful tracker musician writing ONE channel of a ProTracker-style pattern. Groove first; leave space — a good part breathes.',
          prompt: 'Song context (steps are 16th notes at ' + state.bpm + ' BPM; cells are sparse [step, note, velocity]):\n'
            + JSON.stringify(songContextForLLM())
            + '\n\nWrite channel ' + ti + ' (instrument: ' + t.instrument + ') of pattern P' + state.currentBank
            + ' — length ' + len + ' steps.\n'
            + (wish ? ('The user asks: ' + wish + '\n') : 'Decide what fits the existing material best.\n')
            + 'Rules: steps 0..' + (len - 1) + ' only; '
            + (isDrums
              ? 'notes MUST be drum names from: ' + DRUM_NOTES.join(', ')
              : 'notes are pitch names like C4, D#4, A5 (sharps or flats), sensible range C2..C6')
            + '; velocity 1..127; lock to the groove of the other channels.\n'
            + 'Return JSON only: {"cells":[[step,"note",velocity],...], "note":"short description"}',
        });
        const p = (r && r.parsed) || {};
        const applied = applyCellsToTrack(ti, p.cells, len);
        if (applied > 0) {
          renderTracker(); renderTrackTabs();
          setComposeStatus('✨ ' + (p.note ? String(p.note).slice(0, 60) : (applied + ' cells')));
          showToast('✨ Track ' + (ti + 1) + ' filled (' + applied + ' notes) — Loop or ▶ to hear it');
        } else {
          setComposeStatus('');
          showToast('⚠️ The AI returned nothing usable — try describing what you want');
        }
      } catch (e) {
        setComposeStatus('');
        showToast('⚠️ AI call failed — try again');
      }
      aiComposeBusy = false;
    }
    // The compose prompt in ONE place — used by the in-app LLM call AND 📋 Copy prompt
    // (the AIMEAT prompt-driven workflow: user runs it in their own AI chat for free).
    function buildComposePrompt(opts) {
      const wish = opts.wish || '';
      const npat = Math.max(2, Math.min(20, opts.npat || 4));
      const npos = Math.max(2, Math.min(24, opts.npos || 8));
      const nlay = Math.max(1, Math.min(8, opts.nlay || 2));
      const allowed = (opts.allowed && opts.allowed.length) ? opts.allowed : state.tracks.map((_, i) => i);
      const reassign = opts.reassign !== false;
      const L = state.patternLen;
      const chanDesc = allowed.map(ti => {
        const inst = state.tracks[ti].instrument;
        const smp = smpParse(inst);
        return 'ch ' + ti + ': ' + (smp ? ('"' + inst + '" = sampled "' + smp.sample.name + '" (pitched one-shot)') : inst);
      }).join('; ');
      const smpAvail = state.sampleBanks.map((b, bi) =>
        b.name + ': ' + b.samples.map((s, si) => '"smp:' + bi + ':' + si + '"=' + s.name).join(', ')).join('; ');
      return {
        system: 'You are a tracker composer writing a COMPLETE ProTracker-style arrangement for a multi-channel step sequencer with a LAYERED song grid: the arrangement has several song tracks (layers), and at every position ALL layers\' patterns play simultaneously. Design patterns that stack well (e.g. a drum groove layer under melody/chord layers). Musical, groovy, coherent.',
        prompt: 'Compose a complete song. ' + (wish ? ('The user asks: ' + wish) : 'Pick an appealing style yourself.') + '\n'
          + 'Steps are 16th notes. Use ONLY these channels (id: instrument): ' + chanDesc + '. Channels not listed must stay silent.\n'
          + (reassign
            ? 'You MAY re-pick instruments for the listed channels from: piano, epiano, guitar, guitar-steel, guitar-el, bass, flute, trumpet, strings, organ, synth, drums (return them in "instruments" as {"ch":N,"instrument":"..."}).\n'
              + (smpAvail ? 'Sampled instruments are ALSO available — use the exact value in quotes as the instrument (pitched one-shots, play as written like piano notes): ' + smpAvail + '\n' : '')
            : 'Keep each channel\'s current instrument.\n')
          + 'Drum notes: ' + DRUM_NOTES.join(', ') + '. Pitched notes like C4, D#4, A5 — range C2..C6 (bass parts are auto-rendered two octaves down, write them around C3-C4).\n'
          + 'Make EXACTLY ' + npat + ' patterns (ids 0..' + (npat - 1) + '), each EXACTLY ' + L + ' steps. A pattern does not need every channel.\n'
          + 'Arrangement: ' + nlay + ' layer(s) × ' + npos + ' positions — "songTracks" is an array of ' + nlay + ' rows, each with ' + npos + ' entries (a pattern id or null for silence). All layers at a position play AT THE SAME TIME: design e.g. a rhythm layer + a melody layer that combine. Vary the positions (intro, build, break…).\n'
          + 'Return JSON only:\n'
          + '{"bpm":118,"instruments":[{"ch":0,"instrument":"drums"}],'
          + '"patterns":[{"id":0,"tracks":[{"ch":0,"cells":[[0,"kick",100],[4,"snare",90]]}]}],'
          + '"songTracks":[[0,0,1,1],[null,2,2,3]],"title":"short name"}',
      };
    }
    async function llmComposeSong(opts) {
      if (aiComposeBusy) return;
      if (!(await aiAvailableOrExplain())) return;
      opts = opts || {};
      aiComposeBusy = true; setComposeStatus('🪄 composing the whole song… (can take a minute)');
      try {
        const p = buildComposePrompt(opts);
        const r = await AIMEAT.ai.completeJson({
          app_id: 'band-jam',
          modelRole: 'execution',
          temperature: 0.95,
          systemPrompt: p.system,
          prompt: p.prompt,
        });
        const g = (r && r.parsed) || {};
        if (!applyComposedSong(g, opts)) { aiComposeBusy = false; return; }
      } catch (e) {
        setComposeStatus('');
        showToast('⚠️ AI composition failed — try again');
      }
      aiComposeBusy = false;
    }
    // Build the song from a composed JSON — from the in-app LLM OR a pasted AI-chat answer.
    // Caps: 20 patterns × 24 positions × 8 layers; every pattern forced to the Steps length.
    function applyComposedSong(g, opts) {
      opts = opts || {};
      const allowed = (opts.allowed && opts.allowed.length) ? opts.allowed : state.tracks.map((_, i) => i);
      const reassign = opts.reassign !== false;
      const L = state.patternLen;
      const npat = Math.max(1, Math.min(20, Array.isArray(g.patterns) ? g.patterns.length : 0));
      try {
        if (!Array.isArray(g.patterns) || !g.patterns.length) {
          setComposeStatus(''); showToast('⚠️ No patterns in the answer — copy the WHOLE JSON'); return false;
        }
        // instruments — {ch,instrument} entries, only for the ALLOWED channels (legacy flat array accepted)
        if (reassign && Array.isArray(g.instruments)) {
          g.instruments.forEach((e2, i) => {
            const ch = (e2 && typeof e2 === 'object') ? Math.trunc(e2.ch) : i;
            const inst = (e2 && typeof e2 === 'object') ? e2.instrument : e2;
            if (allowed.includes(ch) && (ALL_INSTRUMENTS.includes(inst) || smpParse(inst))) state.tracks[ch].instrument = inst;
          });
        }
        // banks — every pattern forced to the song's Steps length; only allowed channels written
        const newBanks = g.patterns.slice(0, 20).map(p => {
          const bank = state.tracks.map(() => new Array(L).fill(null));
          for (const tr of (p.tracks || [])) {
            const ch = Math.trunc(tr.ch);
            if (ch < 0 || ch > 8 || !allowed.includes(ch)) continue;
            const inst = state.tracks[ch].instrument;
            for (const c of (tr.cells || [])) {
              if (!Array.isArray(c) || c.length < 2) continue;
              const s = Math.trunc(c[0]);
              const note = normNoteFor(inst, c[1]);
              const vel = Math.max(1, Math.min(127, Math.trunc(c[2] ?? 80)));
              if (note === null || s < 0 || s >= L) continue;
              bank[ch][s] = { note, vel };
            }
          }
          return bank;
        });
        void npat;
        state.banks = newBanks;
        // layered arrangement — cap 8 layers × 24 positions (null = silence); legacy "order" = one layer
        let sts = Array.isArray(g.songTracks) ? g.songTracks : (Array.isArray(g.order) ? [g.order] : null);
        if (sts && sts.length) {
          const rows = sts.slice(0, 8).map(row => (Array.isArray(row) ? row : []).slice(0, 24).map(c =>
            (typeof c === 'number' && Math.trunc(c) >= 0 && Math.trunc(c) < newBanks.length) ? Math.trunc(c) : null));
          const width = Math.max(1, ...rows.map(r2 => r2.length));
          rows.forEach(r2 => { while (r2.length < width) r2.push(null); });
          state.songTracks = rows;
        } else {
          state.songTracks = [newBanks.map((_, i) => i)];
        }
        state.currentBank = 0;
        state.tracks.forEach((t, ti) => { t.pattern = state.banks[0][ti]; });
        // enable channels that have content anywhere; silence the rest
        state.tracks.forEach((t, ti) => { t.enabled = state.banks.some(b => b[ti].some(Boolean)); });
        if (typeof g.bpm === 'number' && g.bpm >= 40 && g.bpm <= 240) {
          state.bpm = Math.round(g.bpm);
          try { state.rt && state.rt.broadcast({ type: 'bpm', bpm: state.bpm }); } catch (e) {}
        }
        state.songMode = true; state.songAnchor = null;
        const songEl2 = document.getElementById('song-toggle'); if (songEl2) songEl2.checked = true;
        state.loopEnabled = true;
        const loopEl = document.getElementById('loop-toggle'); if (loopEl) loopEl.checked = true;
        state.activeTrack = 0; state.cursor = 0;
        renderBankChips(); renderOrderChips(); renderTrackTabs(); renderTrackHeader(); renderTracker();
        renderKeymap(); renderVirtKeys(); updateTransportUI(); updatePlayStatus();
        setComposeStatus('🪄 "' + (g.title ? String(g.title).slice(0, 40) : 'untitled') + '" — press ▶ Play');
        showToast('🪄 Song composed: ' + newBanks.length + ' patterns, ' + state.songTracks.length + ' layer(s) × ' + state.songTracks[0].length + ' positions — press ▶ Play (🎼 Song is on)');
        return true;
      } catch (e) {
        setComposeStatus('');
        showToast('⚠️ Could not apply the song — check the JSON');
        return false;
      }
    }

    // 💾 Song library — private memory records: bandjam.songs.{id} + an index record the
    // app maintains itself (no dependence on list-endpoint shapes).
    const SONGS_INDEX_KEY = 'bandjam.songs-index';
    function songId(name) {
      return (name || '').toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 40) || ('song-' + Date.now());
    }
    function serializeSong(name) {
      return {
        v: 2, name, bpm: state.bpm, savedAt: new Date().toISOString(),
        banks: state.banks, currentBank: state.currentBank,
        songTracks: state.songTracks, patternLen: state.patternLen,
        order: state.songTracks[0].filter(c => c !== null && c !== undefined),   // legacy readers
        // URL-backed sample banks reload with the song; unsaved imports cannot
        sampleBanks: state.sampleBanks.map(b => ({ name: b.name, url: b.source })).filter(b => b.url),
        tracks: state.tracks.map(t => ({
          instrument: t.instrument, volume: t.volume, enabled: t.enabled,
          sound: t.sound || 'global',
        })),
        ai: {
          style: state.ai.style, parts: { ...state.ai.parts },
          follow: state.ai.follow, intensity: state.ai.intensity,
        },
      };
    }
    async function readSongIndex() {
      try { const idx = await AIMEAT.data.get(SONGS_INDEX_KEY); return Array.isArray(idx) ? idx : []; }
      catch (e) { return []; }
    }
    async function writeSongIndex(idx) {
      try { await AIMEAT.data.set(SONGS_INDEX_KEY, idx, { visibility: 'private', tags: ['bandjam'] }); } catch (e) {}
    }
    async function saveSong() {
      const nameEl = document.getElementById('song-name');
      const name = (nameEl.value || '').trim();
      if (!name) { showToast('Give the song a name first'); nameEl.focus(); return; }
      const id = songId(name);
      try {
        await AIMEAT.data.set('bandjam.songs.' + id, serializeSong(name), { visibility: 'private', tags: ['bandjam'] });
        const idx = await readSongIndex();
        const at_ = idx.findIndex(s => s.id === id);
        const entry = { id, name, savedAt: new Date().toISOString() };
        if (at_ >= 0) idx[at_] = entry; else idx.push(entry);
        await writeSongIndex(idx);
        showToast('💾 Saved "' + name + '"' + (at_ >= 0 ? ' (updated)' : ''));
        refreshSongList();
      } catch (e) {
        // Old grant without memory scopes (pre-v2.8.2 sessions). The refresh cookie keeps
        // reviving the old grant, so a plain re-login is not enough — end the session fully
        // and let ONE fresh Sign In re-run the bridge (own app => new scopes auto-approve).
        if (confirm('Band Jam needs updated data permissions to save songs.\n\nSign out now? After the page reloads, click "Sign In" once and your songs will save.')) {
          try { await AIMEAT.auth.logout(); } catch (e2) {}
          location.reload();
        } else {
          showToast('⚠️ Saving stays blocked until you sign out and back in once');
        }
      }
    }
    async function loadSong(id) {
      try {
        const song = await AIMEAT.data.get('bandjam.songs.' + id);
        if (!song || song.deleted || (!Array.isArray(song.tracks) && !Array.isArray(song.banks))) { showToast('⚠️ Could not load that song'); return; }
        if (!Array.isArray(song.tracks)) song.tracks = [];
        if (Array.isArray(song.sampleBanks)) {
          for (const b of song.sampleBanks) {
            if (b.url && !state.sampleBanks.some(x => x.source === b.url)) {
              try { await loadBankFromUrl(b.url, b.name); } catch (e) {}
            }
          }
        }
        song.tracks.forEach((s, i) => {
          if (!state.tracks[i]) return;
          const t = state.tracks[i];
          t.instrument = s.instrument || t.instrument;
          t.volume = (typeof s.volume === 'number') ? s.volume : t.volume;
          t.enabled = s.enabled !== false;
          t.sound = s.sound || 'global';
          if (song.v !== 2 && Array.isArray(s.pattern)) t.pattern = s.pattern.slice();   // v1 songs
        });
        if (song.v === 2 && Array.isArray(song.banks) && song.banks.length) {
          state.banks = song.banks.map(bank => bank.map(p => Array.isArray(p) ? p.slice() : new Array(16).fill(null)));
          const nB = state.banks.length;
          if (Array.isArray(song.songTracks) && song.songTracks.length) {
            state.songTracks = song.songTracks.map(r => (Array.isArray(r) ? r : []).map(c =>
              (typeof c === 'number' && c >= 0 && c < nB) ? c : null));
          } else {
            state.songTracks = [(Array.isArray(song.order) ? song.order.filter(b => b >= 0 && b < nB) : [0])];
          }
          if ([16, 32, 48, 64].includes(song.patternLen)) state.patternLen = song.patternLen;
          else state.patternLen = Math.max(...state.banks.map((_, i) => bankPosLen(i)));
          const sSel = document.getElementById('song-steps');
          if (sSel && [16,32,48,64].includes(state.patternLen)) sSel.value = String(state.patternLen);
          state.currentBank = Math.min(song.currentBank || 0, state.banks.length - 1);
          state.tracks.forEach((t, ti) => { t.pattern = state.banks[state.currentBank][ti] || new Array(16).fill(null); });
        } else {
          // v1: single bank from the tracks
          state.banks = [state.tracks.map(t => t.pattern)];
          state.songTracks = [[0]]; state.currentBank = 0;
        }
        state.songAnchor = null;
        renderBankChips(); renderOrderChips();
        if (song.bpm) {
          state.bpm = song.bpm;
          try { state.rt && state.rt.broadcast({ type: 'bpm', bpm: song.bpm }); } catch (e) {}
        }
        if (song.ai) {
          if (song.ai.style) { state.ai.style = song.ai.style; state.ai.scaleName = (AI_STYLES[song.ai.style] || AI_STYLES.lofi).scale; }
          if (song.ai.parts) state.ai.parts = { ...state.ai.parts, ...song.ai.parts };
          if (typeof song.ai.follow === 'boolean') state.ai.follow = song.ai.follow;
          if (typeof song.ai.intensity === 'number') state.ai.intensity = song.ai.intensity;
          const styleEl = document.getElementById('ai-style'); if (styleEl) styleEl.value = state.ai.style;
          document.querySelectorAll('#ai-parts input[data-part]').forEach(cb => { cb.checked = !!state.ai.parts[cb.dataset.part]; });
          const followEl = document.getElementById('ai-follow'); if (followEl) followEl.checked = state.ai.follow;
          const intEl = document.getElementById('ai-intensity'); if (intEl) intEl.value = state.ai.intensity;
        }
        state.activeTrack = 0; state.cursor = 0;
        renderTrackTabs(); renderTrackHeader(); renderTracker(); renderKeymap(); renderVirtKeys();
        updateTransportUI(); updatePlayStatus();
        showToast('📂 Loaded "' + (song.name || id) + '"');
      } catch (e) { showToast('⚠️ Could not load that song'); }
    }
    async function deleteSong(id, name) {
      try {
        // No memory:delete scope needed: the INDEX decides what exists; the record is
        // overwritten with a tiny tombstone instead of a true delete.
        const idx = (await readSongIndex()).filter(s => s.id !== id);
        await writeSongIndex(idx);
        try { await AIMEAT.data.set('bandjam.songs.' + id, { deleted: true }, { visibility: 'private', tags: ['bandjam'] }); } catch (e) {}
        showToast('🗑️ Deleted "' + name + '"');
        refreshSongList();
      } catch (e) { showToast('⚠️ Delete failed'); }
    }
    async function renameSong(id, oldName) {
      const next = prompt('New name for "' + oldName + '":', oldName);
      if (!next || !next.trim() || next.trim() === oldName) return;
      const newId = songId(next.trim());
      try {
        const song = await AIMEAT.data.get('bandjam.songs.' + id);
        if (!song) { showToast('⚠️ Song not found'); return; }
        song.name = next.trim();
        await AIMEAT.data.set('bandjam.songs.' + newId, song, { visibility: 'private', tags: ['bandjam'] });
        if (newId !== id) { try { await AIMEAT.data.set('bandjam.songs.' + id, { deleted: true }, { visibility: 'private', tags: ['bandjam'] }); } catch (e) {} }
        const idx = (await readSongIndex()).filter(s => s.id !== id && s.id !== newId);
        idx.push({ id: newId, name: next.trim(), savedAt: new Date().toISOString() });
        await writeSongIndex(idx);
        showToast('✏️ Renamed to "' + next.trim() + '"');
        refreshSongList();
      } catch (e) { showToast('⚠️ Rename failed'); }
    }
    async function refreshSongList() {
      const el = document.getElementById('song-list');
      if (!el || el.closest('.hidden')) return;
      const idx = await readSongIndex();
      if (!idx.length) { el.innerHTML = '<span class="text-xs opacity-50">No saved songs yet — name one and hit Save.</span>'; return; }
      idx.sort((a, b) => (b.savedAt || '').localeCompare(a.savedAt || ''));
      el.innerHTML = idx.map(s =>
        '<span class="song-chip" data-id="' + s.id + '" data-name="' + escapeHtml(s.name) + '">' +
          '<button class="song-load" title="Load">📂 ' + escapeHtml(s.name) + '</button>' +
          '<button class="song-rename" title="Rename">✏️</button>' +
          '<button class="song-del" title="Delete">🗑️</button>' +
        '</span>').join('');
      el.querySelectorAll('.song-chip').forEach(chip => {
        const id = chip.dataset.id, name = chip.dataset.name;
        chip.querySelector('.song-load').addEventListener('click', () => loadSong(id));
        chip.querySelector('.song-rename').addEventListener('click', () => renameSong(id, name));
        chip.querySelector('.song-del').addEventListener('click', () => { if (confirm('Delete "' + name + '"?')) deleteSong(id, name); });
      });
    }

    // Rendering transpose: the keyboard spans C4-C6, but a BASS lives two octaves down —
    // played C4 renders as C2 (both engines, so flipping never jumps the octave). The
    // broadcast/AI/pattern note stays untransposed; only the local sound shifts.
    const RENDER_TRANSPOSE = { bass: -24 };
    function shiftNote(note, semis) {
      const FLAT = { Db:'C#', Eb:'D#', Gb:'F#', Ab:'G#', Bb:'A#', Cs:'C#', Ds:'D#', Fs:'F#', Gs:'G#', As:'A#' };
      let n = note; const two = n.slice(0, 2);
      if (FLAT[two]) n = FLAT[two] + n.slice(2);
      const m = n.match(/^([A-G]#?)(\d)$/);
      if (!m) return note;
      const NAMES = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
      let midi = (parseInt(m[2], 10) + 1) * 12 + NAMES.indexOf(m[1]) + semis;
      midi = Math.max(12, Math.min(107, midi));
      return NAMES[midi % 12] + (Math.floor(midi / 12) - 1);
    }

    function playLocal(instrument, note, velocity, holdKey, soundPref) {
      try {
        const rt = RENDER_TRANSPOSE[instrument];
        if (rt) note = shiftNote(note, rt);
        // Held synth is GATED — plays exactly while the key is down (both engines).
        if (instrument === 'synth' && holdKey) {
          const rel = bjSynth.noteOn(note, velocity);
          if (rel) { heldNotes.set(holdKey, rel); return; }
        }
        // 📼 Sample-bank instrument (smp:bank:idx) — plays the sample pitched from C4.
        if (instrument && instrument.startsWith('smp:')) {
          const ref = smpParse(instrument);
          if (ref) {
            const started = smpNoteOn(ref, note, velocity, holdKey);
            if (started && holdKey) heldNotes.set(holdKey, () => smpNoteOffKey(holdKey));
            if (started) return;
          }
          // bank not loaded here (e.g. a peer's bank) — fall through to classic piano
          instrument = 'piano';
        }
        if (effectiveSound(soundPref) === 'real' && soundEngine.has(instrument)) {
          const started = soundEngine.noteOn(instrument, note, velocity, holdKey);
          if (started && holdKey && instrument !== 'drums') heldNotes.set(holdKey, () => soundEngine.noteOffKey(holdKey));
          if (started) return;
        }
        // Classic engine — guitar variants borrow the base guitar voice.
        const base = CLASSIC_FALLBACK[instrument] || instrument;
        const sustain = holdKey && CLASSIC_SUSTAIN.has(base);
        AIMEAT.audio.play(base, note, { velocity, duration: sustain ? 12 : undefined });
        if (sustain) heldNotes.set(holdKey, () => { try { AIMEAT.audio.stop(base, note); } catch (e) {} });
      } catch (e) { console.warn('audio.play failed:', e); }
    }

    // ============================================================
    //  Transport + pattern clock
    // ============================================================
    function stepDurationMs() {
      // 16th notes — 4 steps per beat
      return 60000 / state.bpm / 4;
    }

    function currentStep() {
      if (!state.t0) return -1;
      const elapsed = Date.now() - state.t0;
      if (elapsed < 0) return -1;
      return Math.floor(elapsed / stepDurationMs());   // ABSOLUTE step — mod per track length at use sites
    }

    function toggleTransport() {
      if (state.transportPlaying) {
        // Stop
        state.transportPlaying = false;
        state.lastPlayedStep = -1;
        state.rt.broadcast({ type: 'transport', state: 'stop', t0: state.t0, bpm: state.bpm });
      } else {
        // Start — set fresh t0 and broadcast
        state.t0 = Date.now();
        state.transportPlaying = true;
        state.lastPlayedStep = -1;
        state.rt.broadcast({ type: 'transport', state: 'play', t0: state.t0, bpm: state.bpm });
      }
      updateTransportUI();
    }

    function updateTransportUI() {
      const btn = document.getElementById('transport-btn');
      if (btn) btn.textContent = state.transportPlaying ? '■ Stop' : '▶ Play';
      const bpmEl = document.getElementById('bpm-input');
      if (bpmEl) bpmEl.value = state.bpm;
      // When transport is stopped, clear step dots + tracker playhead
      if (!state.transportPlaying) {
        document.querySelectorAll('#step-dots .dot').forEach(d => d.classList.remove('active'));
        document.querySelectorAll('#tracker .row').forEach(r => r.classList.remove('playing'));
      }
      updatePlayStatus();   // REC wording depends on whether the transport runs
    }

    // Short metronome blip — accented on the bar's first beat. Local only.
    function metroClick(accent) {
      try {
        const ctx = soundEngine.ctx(), t = ctx.currentTime;
        const osc = ctx.createOscillator(); osc.type = 'square';
        osc.frequency.value = accent ? 1800 : 1200;
        const gain = ctx.createGain();
        gain.gain.setValueAtTime(accent ? 0.4 : 0.25, t);
        gain.gain.exponentialRampToValueAtTime(0.0001, t + 0.045);
        osc.connect(gain); gain.connect(ctx.destination);
        osc.start(t); osc.stop(t + 0.06);
      } catch (e) {}
    }

    function startPatternClock() {
      // Single high-frequency loop for both step detection and UI updates
      let lastStepDotsUpdate = -1;
      setInterval(() => {
        if (!state.transportPlaying) return;
        const step = currentStep();
        if (step !== state.lastPlayedStep) {
          // Metronome: click on each beat (4 steps per beat), accent on the bar start.
          if (state.metroEnabled && step % 4 === 0) metroClick(step % 16 === 0);
          // New step boundary crossed
          // Walk every enabled track and trigger its note (if any) for this step
          if (state.loopEnabled || (state.songMode && songHasAny())) {
            // Loop mode: the current bank on the absolute clock. 🎼 Song mode: walk the
            // arrangement — each position plays ALL layers' patterns TOGETHER and lasts
            // the longest one (an all-'--' column is a silent gap of patternLen steps).
            let playBankIdxs = [state.currentBank], rel = step;
            if (state.songMode && songHasAny()) {
              if (!state.songAnchor || step < state.songAnchor.step) state.songAnchor = { step, pos: 0 };
              const a = state.songAnchor;
              const nPos = songPosCount();
              let posLen = posLenAt(a.pos % nPos);
              while (step - a.step >= posLen) {
                a.step += posLen;
                a.pos = (a.pos + 1) % nPos;
                posLen = posLenAt(a.pos);
                renderSongGrid(a.pos);
              }
              playBankIdxs = cellsAt(a.pos);
              rel = step - a.step;
            }
            const batch = [];
            for (const playBankIdx of playBankIdxs) {
              const playBank = state.banks[playBankIdx];
              if (!playBank) continue;
              for (let ti = 0; ti < state.tracks.length; ti++) {
                const t = state.tracks[ti];
                if (!t.enabled) continue;
                const pat = playBank[ti];
                const cell = pat[rel % pat.length];   // shorter patterns loop inside the position
                if (!cell) continue;
                const vel = ((cell.vel || 64) / 127) * t.volume;
                playLocal(t.instrument, cell.note, vel, undefined, t.sound);
                batch.push({ instrument: t.instrument, note: cell.note, velocity: vel });
                pushRiver({ color: SELF_RIVER_INK, label: cell.note, t: Date.now() });
              }
            }
            // playhead on the edited pattern only when it is among the playing layers
            state._phRel = rel; state._phVisible = playBankIdxs.includes(state.currentBank);
            // One batched broadcast per step keeps WS rate-limit happy at 9 tracks × 16 steps
            if (batch.length > 0 && state.rt) {
              try { state.rt.broadcast({ type: 'notes-batch', notes: batch }); } catch {}
            }
          }

          // AI Band plays every step it's enabled — independent of the loop toggle.
          if (state.ai.enabled) {
            // At the top of a bar, maybe ask the LLM arranger for a fresh plan.
            if (state.ai.llm && step % 16 === 0) requestLlmPlan(false);
            const aiBatch = aiNotesForStep(step % 16);
            if (aiBatch.length > 0) {
              for (const n of aiBatch) {
                playLocal(n.instrument, n.note, n.velocity);
                pushRiver({ color: state.ai.color, label: n.note, t: Date.now() });
              }
              // Broadcast so other humans hear the AI too (one batch/step = rate-safe)
              if (state.rt) { try { state.rt.broadcast({ type: 'notes-batch', notes: aiBatch }); } catch {} }
            }
          }

          state.lastPlayedStep = step;

          // Update step dots
          if (step !== lastStepDotsUpdate) {
            const dots = document.querySelectorAll('#step-dots .dot');
            dots.forEach((d, i) => d.classList.toggle('active', i === step % 16));
            lastStepDotsUpdate = step;
            renderTrackerPlayheadOnly(state._phRel !== undefined ? state._phRel : step, state._phVisible);
          }
        }
      }, 8);
    }

    function renderTrackerPlayheadOnly(relStep, visible) {
      const tracker = document.getElementById('tracker');
      if (!tracker) return;
      tracker.querySelectorAll('.tg-cell.playing').forEach(c => c.classList.remove('playing'));
      if (!visible && visible !== undefined) return;
      const bank = state.banks[state.currentBank];
      for (let ti = 0; ti < state.tracks.length; ti++) {
        const idx = relStep % bank[ti].length;
        const cell = tracker.querySelector('[data-t="' + ti + '"][data-r="' + idx + '"]');
        if (cell) cell.classList.add('playing');
      }
    }

    // ============================================================
    //  Note river (canvas visual feed)
    // ============================================================
    function pushRiver(entry) {
      state.river.push(entry);
      // Cap array size
      if (state.river.length > 200) state.river = state.river.slice(-200);
    }

    function sizeRiver() {
      const canvas = document.getElementById('river');
      if (!canvas) return;
      const dpr = window.devicePixelRatio || 1;
      canvas.width = canvas.clientWidth * dpr;
      canvas.height = 120 * dpr;
      const ctx = canvas.getContext('2d');
      ctx.setTransform(1, 0, 0, 1, 0, 0);  // reset before scaling, else scale compounds on resize
      ctx.scale(dpr, dpr);
    }

    function startRiverLoop() {
      function frame() {
        const canvas = document.getElementById('river');
        if (!canvas) { requestAnimationFrame(frame); return; }
        const ctx = canvas.getContext('2d');
        const w = canvas.clientWidth;
        const h = 120;

        // Canvas colours can't read CSS vars — resolve them from the live computed
        // style each frame, so the river's trail and labels follow the palette the
        // screen is tinted with instead of a baked-in black.
        const cs = getComputedStyle(canvas);
        const trail = cs.backgroundColor.replace(/^rgba?\(([^)]+?)(?:,\s*[\d.]+)?\)$/, 'rgba($1, 0.18)');
        const labelInk = cs.color;

        // Fade prev frame for trail effect
        ctx.fillStyle = trail;
        ctx.fillRect(0, 0, w, h);

        const now = Date.now();
        const lifeMs = 4000;
        // Drop expired
        state.river = state.river.filter(n => now - n.t < lifeMs);

        // Draw notes — newer ones near right edge, drift left over lifeMs
        ctx.font = 'bold 14px ui-monospace, monospace';
        for (const n of state.river) {
          const age = now - n.t;
          const x = w - 30 - (age / lifeMs) * (w - 60);
          const y = 30 + ((Math.abs((n.label || '').charCodeAt(0) || 65) * 11) % 80);
          const alpha = 1 - (age / lifeMs);
          ctx.globalAlpha = Math.max(0, alpha);
          ctx.fillStyle = n.color;
          ctx.beginPath();
          ctx.arc(x, y, 4 + alpha * 4, 0, Math.PI * 2);
          ctx.fill();
          ctx.globalAlpha = Math.max(0, alpha * 0.85);
          ctx.fillStyle = labelInk;
          ctx.fillText(n.label || '', x + 8, y + 4);
        }
        ctx.globalAlpha = 1;
        requestAnimationFrame(frame);
      }
      requestAnimationFrame(frame);
    }

    // ============================================================
    //  Leave / cleanup
    // ============================================================
    function leaveRoom() {
      state.leftIntentionally = true;
      try { state.rt && state.rt.disconnect(); } catch {}
      document.removeEventListener('keydown', onKeyDown);
      document.removeEventListener('keyup', onKeyUp);
      state.peers.clear();
      state.transportPlaying = false;
      state.t0 = null;
      state.loopEnabled = false;
      state.tracks = Array.from({ length: 9 }, (_, i) => ({
        instrument: i === 2 ? 'drums' : (i === 1 ? 'bass' : 'piano'),
        pattern: new Array(16).fill(null),
        volume: 0.85,
        enabled: true,
      }));
      state.activeTrack = 0;
      state.inputMode = 'live';
      state.cursor = 0;
      state.ai.enabled = false;
      state.ai.pcHist = new Array(12).fill(0);
      state.ai.bpmPinned = false;
      state.ai.llm = false;
      state.ai.llmPlan = null;
      state.ai.llmBusy = false;
      state.view = 'lobby';
      state.reconnecting = false;
      state.reconnectDelay = 500;
      state.leftIntentionally = false;
      renderLobby();
    }

    // ============================================================
    //  Utils
    // ============================================================
    function escapeHtml(s) {
      return String(s ?? '').replace(/[&<>"']/g, c =>
        ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
    }

    boot();
  </script>
<style id="aimeat-chrome-reserve">:root{--aimeat-chrome-bottom:56px}</style><div id="aimeat-app-badge"><style>#aimeat-app-badge{display:contents!important}#aimeat-app-badge input{position:fixed!important;right:20px!important;bottom:20px!important;width:1px!important;height:1px!important;margin:0!important;opacity:0!important;pointer-events:none!important;z-index:2147483647!important}#aimeat-app-badge label{display:none!important;position:fixed!important;right:12px!important;bottom:12px!important;z-index:2147483647!important;width:34px!important;height:34px!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;color:var(--color-primary,#E8564A)!important;font:600 16px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif!important;cursor:pointer!important;user-select:none!important;-webkit-user-select:none!important;background:rgba(20,20,28,.92)!important;box-shadow:0 4px 16px rgba(0,0,0,.28)!important;border:1px solid rgba(255,255,255,.14)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;}#aimeat-app-badge a{position:fixed!important;right:12px!important;bottom:12px!important;z-index:2147483647!important;display:inline-flex!important;align-items:center!important;gap:8px!important;padding:7px 12px!important;border-radius:9999px!important;color:#fff!important;font:600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif!important;text-decoration:none!important;letter-spacing:.1px!important;background:rgba(20,20,28,.92)!important;box-shadow:0 4px 16px rgba(0,0,0,.28)!important;border:1px solid rgba(255,255,255,.14)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;}#aimeat-app-badge a>span:first-child{color:var(--color-primary,#E8564A)!important}#aimeat-app-badge a>span:last-child{opacity:.7!important;font-weight:500!important}#aimeat-app-badge input:focus-visible~label{outline:2px solid var(--color-primary,#E8564A)!important;outline-offset:2px!important}@media (max-width:640px){#aimeat-app-badge label{display:flex!important}#aimeat-app-badge a{display:none!important}#aimeat-app-badge input:checked~a{display:inline-flex!important;right:56px!important}#aimeat-app-badge a>span:first-child{display:none!important}}</style><input type="checkbox" id="aimeat-app-badge-open"><label for="aimeat-app-badge-open" aria-label="Publish your own app on aimeat.io">&#9889;</label><a href="https://aimeat.io/" target="_blank" rel="noopener noreferrer" aria-label="Publish your own app on aimeat.io"><span>&#9889;</span><span>aimeat.io</span><span>&#183; Publish your own app for free</span></a></div><link rel="mcp-server" href="/.well-known/mcp.json"><link rel="alternate" type="text/markdown" href="?format=md" title="Agent-facing description"><noscript id="aimeat-agent-discovery"><pre>Band Jam — an app on AIMEAT.
Jam together in real time — tracker patterns, 116 ST-XX sample disks with content preview, multi-layer song arrangement, AI composer (in-app or your own AI chat)

FOR AN AGENT READING THIS PAGE

owner:  happydude500001
app_id: band-jam.html   (a filename — it keeps its extension; the subdomain drops it)

What to read, in order:
  https://aimeat.io/v1/apps/happydude500001/band-jam.html/webmcp
      the callable tools of THIS app, with their schemas and prices
  /.well-known/mcp.json
      this node's MCP server card (served on this host too)
  ?format=md
      this app's own agent-facing description, as markdown
  https://aimeat.io/v1/apps/happydude500001/band-jam.html/skills
      skills bound to this app — the method, not just the API

A priced tool answers an unpaid POST with 402 and an x402 `accepts` block stating how to
pay, so the calling convention can be learned from the service itself.</pre></noscript><script type="application/json" id="aimeat-app-ref">{&quot;owner&quot;:&quot;happydude500001&quot;,&quot;app_id&quot;:&quot;band-jam.html&quot;,&quot;app&quot;:&quot;happydude500001/band-jam.html&quot;,&quot;tools&quot;:[]}</script><script src="/v1/libs/aimeat-webmcp.js?expose=app" data-owner="happydude500001" data-app="band-jam.html" defer></script></body>
</html>