ps-access 0.0.2 → 0.0.4

package/README.md

@@ -25,21 +25,21 @@ yourself.
 
 ## CLI
 
+Install with `npm i -g ps-access`, or run any command without installing via `npx ps-access …`.
+
 ```bash
-npm install
-
-node cli.mjs list                       # list connected controllers
-node cli.mjs dump                        # decode all 3 profiles
-node cli.mjs backup                      # save all 3 profiles to captures/
-node cli.mjs read-profile 1 --json       # decode one profile as JSON
-node cli.mjs set-active 2                 # switch the active profile (like the profile button)
-node cli.mjs set 1 button5=triangle      # remap button 5
-node cli.mjs set 1 port1=cross           # expansion port 1 -> cross
-node cli.mjs set 1 "port0=left stick"    # built-in stick assignment
-node cli.mjs set 1 orientation="stick on the right"
-node cli.mjs write-profile 2 captures/backup-....json
-node cli.mjs restore captures/backup-....json
-node cli.mjs apply profile.json 1        # apply a web-app export / share code / URL / preset id to a slot
+ps-access list                       # list connected controllers
+ps-access dump                        # decode all 3 profiles
+ps-access backup                      # save all 3 profiles to captures/
+ps-access read-profile 1 --json       # decode one profile as JSON
+ps-access set-active 2                 # switch the active profile (like the profile button)
+ps-access set 1 button5=triangle      # remap button 5
+ps-access set 1 port1=cross           # expansion port 1 -> cross
+ps-access set 1 "port0=left stick"    # built-in stick assignment
+ps-access set 1 orientation="stick on the right"
+ps-access write-profile 2 captures/backup-....json
+ps-access restore captures/backup-....json
+ps-access apply profile.json 1        # apply a web-app export / share code / URL / preset id to a slot
 ```
 
 `apply` is the bridge between the web tool and the CLI: feed it a **profile JSON exported from the
@@ -47,7 +47,8 @@ web Library**, a **share link/code**, or a built-in **preset id** (`ps-access pr
 writes that mapping to a slot on the controller (reading the current profile first so uuid and
 unmodeled fields survive, then round-trip verifying).
 
-- `--device <index|path>` targets a specific controller when several are connected.
+- `--device <serial|index|path>` targets a specific controller when several are connected
+  (serial is the stable id — see `ps-access list`).
 - **Every write auto-backs-up first** to `captures/` and round-trip re-reads to verify.
 
 ## Web tool (multiple controllers)
@@ -76,7 +77,7 @@ or chord** to each physical button and the stick by selecting a row, pressing En
 the key you want (press the physical button to find its row — it lights up live). Pick a stick
 mode (keys / mouse / gamepad axis), then **Export** a `bridge.json` or **copy the run command**.
 The browser can author and preview the mapping, but it can't inject input into other apps — you
-run the exported config with the local bridge (`node bridge.mjs --config bridge.json`), which is
+run the exported config with the local bridge (`ps-access bridge --config bridge.json`), which is
 what actually drives the PC. (Macros — multi-step sequences — are edited in the exported JSON.)
 
 **Accessibility:** the configurator is built to be used by the same people the controller is for.
@@ -127,11 +128,11 @@ not just a PS5. The bridge reads the controller's live USB input and maps it thr
 platform-agnostic engine (`web/bridge-core.mjs`) to a pluggable output **sink**.
 
 ```bash
-node bridge.mjs --sink dry-run               # print mapped events, inject nothing (try it first)
-node bridge.mjs --sink xdotool               # stick -> arrow keys, buttons -> keys (X11; needs xdotool)
-node bridge.mjs --sink uinput                # virtual gamepad/keyboard via /dev/uinput (Linux)
-node bridge.mjs --config my-map.json         # custom mapping (see DEFAULT_MAPPING in bridge-core)
-node bridge.mjs --simulate frames.json --sink dry-run   # replay recorded frames, no hardware
+ps-access bridge --sink dry-run               # print mapped events, inject nothing (try it first)
+ps-access bridge --sink xdotool               # stick -> arrow keys, buttons -> keys (X11; needs xdotool)
+ps-access bridge --sink uinput                # virtual gamepad/keyboard via /dev/uinput (Linux)
+ps-access bridge --config my-map.json         # custom mapping (see DEFAULT_MAPPING in bridge-core)
+ps-access bridge --simulate frames.json --sink dry-run   # replay recorded frames, no hardware
 ```
 
 - **xdotool** sink (X11): no native deps; set `--display :0` if `$DISPLAY` isn't set.
@@ -165,10 +166,10 @@ node bridge.mjs --simulate frames.json --sink dry-run   # replay recorded frames
 Author the config visually in the web **Key Bridge** blade, or from the terminal:
 
 ```bash
-node bridge.mjs edit                         # interactive press-to-bind editor (TTY)
-node bridge.mjs edit --config my-map.json --out my-map.json
-node bridge.mjs set 0=ctrl+s 8=space 2=ctrl+c,ctrl+v stick.mode=mouse --out my-map.json
-node bridge.mjs show --config my-map.json    # print the resolved config
+ps-access bridge edit                         # interactive press-to-bind editor (TTY)
+ps-access bridge edit --config my-map.json --out my-map.json
+ps-access bridge set 0=ctrl+s 8=space 2=ctrl+c,ctrl+v stick.mode=mouse --out my-map.json
+ps-access bridge show --config my-map.json    # print the resolved config
 ```
 
 - **edit** is the CLI twin of the web editor: ↑/↓ to select a button/stick row, **Enter** to
@@ -187,8 +188,8 @@ lib/hid-node.mjs          node-hid transport (Node CLI only)
 web/bridge-core.mjs       PC bridge: pure input->output mapping engine
 lib/bridge-sinks.mjs      PC bridge: output sinks (dry-run, xdotool, uinput)
 lib/uinput-helper.py      PC bridge: stdlib-only virtual device for the uinput sink
-cli.mjs                   command-line tool (profiles)
-bridge.mjs                command-line PC input bridge
+cli.mjs                   the `ps-access` command (profiles; dispatches `bridge` subcommand)
+bridge.mjs                PC input bridge — module run via `ps-access bridge`
 web/index.html + xmb.js   XMB-style configurator (the web UI) + Library + live Monitor, via hid-web.mjs
 web/controller-render.mjs shared controller SVG render + physical-input decode
 web/monitor.html + monitor.js  standalone XMB-styled live input monitor

package/bridge.mjs

@@ -4,14 +4,15 @@
 // Reads the controller's live input over USB and maps it to keyboard/mouse (xdotool)
 // or a virtual gamepad (uinput) so it can drive ANY PC software, not just a PS5.
 //
-//   node bridge.mjs --sink xdotool                 # stick -> arrows, buttons -> keys (X11)
-//   node bridge.mjs --sink uinput                  # virtual gamepad (needs /dev/uinput)
-//   node bridge.mjs --sink dry-run                 # print events, inject nothing
-//   node bridge.mjs --config my-map.json           # custom mapping
-//   node bridge.mjs --simulate frames.json --sink dry-run   # replay (no hardware)
+//   ps-access bridge --sink xdotool                 # stick -> arrows, buttons -> keys (X11)
+//   ps-access bridge --sink uinput                  # virtual gamepad (needs /dev/uinput)
+//   ps-access bridge --sink dry-run                 # print events, inject nothing
+//   ps-access bridge --config my-map.json           # custom mapping
+//   ps-access bridge --simulate frames.json --sink dry-run   # replay (no hardware)
 //
 import { readFileSync, writeFileSync } from "node:fs";
 import readline from "node:readline";
+import { pathToFileURL } from "node:url";
 import { BridgeEngine, decodeInput, DEFAULT_MAPPING } from "./web/bridge-core.mjs";
 import {
   PHYS_LABELS, STICK_MODES, STICK_DIRS, defaultBridgeMap, displayValue, toConfigJSON, keypressToValue,
@@ -47,13 +48,13 @@ function loadMapping(file) {
 const HELP = `ps-access bridge — drive a PC with the Access Controller (USB-C)
 
 Usage:
-  node bridge.mjs [--sink <name>] [options]     run the bridge (live or --simulate)
-  node bridge.mjs edit [--config f] [--out f]   interactive press-to-bind key editor
-  node bridge.mjs set <target=value>... [--out f]   set mappings non-interactively
-  node bridge.mjs show [--config f]             print the resolved config JSON
+  ps-access bridge [--sink <name>] [options]      run the bridge (live or --simulate)
+  ps-access bridge edit [--config f] [--out f]    interactive press-to-bind key editor
+  ps-access bridge set <target=value>... [--out f]   set mappings non-interactively
+  ps-access bridge show [--config f]              print the resolved config JSON
 
 edit/set targets: 0..9 (buttons), stick.mode, stick.up/down/left/right, mouse.speed
-  e.g.  node bridge.mjs set 0=ctrl+s 8=space 2=ctrl+c,ctrl+v stick.mode=mouse --out my-map.json
+  e.g.  ps-access bridge set 0=ctrl+s 8=space 2=ctrl+c,ctrl+v stick.mode=mouse --out my-map.json
 
 Sinks:
   dry-run        Print events only (default; no OS input)
@@ -85,11 +86,21 @@ async function runSimulate(opts, engine, sink) {
 }
 
 async function runLive(opts, engine, sink) {
-  let HID;
-  try { ({ HID } = await import("./lib/hid-node.mjs")); }
-  catch (e) { throw new Error("node-hid is required for live mode (run `npm install`). " + (e.message || e)); }
-  const { listControllers } = await import("./lib/hid-node.mjs");
-  const list = listControllers();
+  let HID, listControllers, list;
+  try {
+    const mod = await import("./lib/hid-node.mjs");
+    HID = mod.HID; listControllers = mod.listControllers;
+    list = listControllers(); // also forces node-hid's native binding to load
+  } catch (e) {
+    const m = String(e.message || e);
+    if (e.code === "ERR_MODULE_NOT_FOUND" || /Cannot find (module|package)/.test(m)) {
+      throw new Error("live mode needs node-hid — run `npm install` (or `npm i -g ps-access`). `edit`/`set`/`show` work without it.");
+    }
+    if (/libudev|shared object|NODE_MODULE_VERSION|was compiled|dlopen|\.node/.test(m)) {
+      throw new Error(`node-hid couldn't load on this system (${m}). On Linux it needs libudev. \`edit\`/\`set\`/\`show\` work without it.`);
+    }
+    throw new Error(`live mode unavailable: ${m}`);
+  }
   if (!list.length) throw new Error("No Access Controller connected (VID 054C / PID 0E5F). Connect it via USB-C.");
   const sel = opts.device ?? 0;
   const entry = (typeof sel === "string" && sel.startsWith("/")) ? list.find((d) => d.path === sel) : list[Number(sel)];
@@ -206,8 +217,8 @@ function editConfig(opts) {
   });
 }
 
-async function main() {
-  const opts = parseArgs(process.argv.slice(2));
+export async function runBridge(argv) {
+  const opts = parseArgs(argv);
   if (opts.help) { console.log(HELP); return; }
   const sub = opts._[0];
   try {
@@ -228,4 +239,8 @@ async function main() {
     process.exit(1);
   }
 }
-main();
+
+// Allow `node bridge.mjs …` directly (dev), while also being importable as `ps-access bridge`.
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  runBridge(process.argv.slice(2));
+}

package/cli.mjs

@@ -12,10 +12,22 @@ import { PRESETS, presetById, fromFileText, applyPortable, decodeShare, shareURL
 // without it installed. Device commands call loadHid() first (see the dispatcher).
 let _hid = null;
 async function loadHid() {
-  if (!_hid) {
-    try { _hid = await import("./lib/hid-node.mjs"); }
-    catch (e) { throw new Error(`this command needs the controller — run "npm install" first (${e.message || e})`); }
+  if (_hid) return _hid;
+  let mod;
+  try {
+    mod = await import("./lib/hid-node.mjs");
+    mod.listControllers(); // probe: force node-hid's native binding to load now, so we can explain failures
+  } catch (e) {
+    const m = String(e.message || e);
+    if (e.code === "ERR_MODULE_NOT_FOUND" || /Cannot find (module|package)|ERR_MODULE_NOT_FOUND/.test(m)) {
+      throw new Error(`controller access needs node-hid, which isn't installed. Run "npm install" (or "npm i -g ps-access"). The offline commands (presets, share, show-share) work without it.`);
+    }
+    if (/libudev|shared object|NODE_MODULE_VERSION|was compiled|dlopen|\.node/.test(m)) {
+      throw new Error(`node-hid couldn't load on this system (${m}). On Linux it needs libudev (e.g. apt install libudev1, or the udev package). Offline commands (presets, share, show-share) still work.`);
+    }
+    throw new Error(`controller access unavailable: ${m}`);
   }
+  _hid = mod;
   return _hid;
 }
 const listControllers = (...a) => _hid.listControllers(...a);
@@ -297,9 +309,10 @@ const COMMANDS = {
   },
 
   help() {
-    console.log(`ps-access — PlayStation Access Controller profile tool (USB-C, no PS5)
+    console.log(`ps-access — PlayStation Access Controller tool (USB-C, no PS5)
 
-Usage: node cli.mjs <command> [args] [--device <index|path>]
+Usage: ps-access <command> [args] [--device <serial|index|path>]
+       (no install: npx ps-access <command> …)
 
 Commands:
   list                          List connected controllers
@@ -318,6 +331,7 @@ Commands:
   presets                       List built-in starting-point presets
   share <backup.json> [slot]    Print a shareable link/code for a backed-up profile (offline)
   show-share <code|url>         Decode + describe a share link/code (offline)
+  bridge [run|edit|set|show]    Use the controller as a PC input device (ps-access bridge --help)
 
 Every write auto-backs-up first (captures/) and round-trip verifies.
 Actions: ${Object.values(ACTIONS).join(", ")}, left stick, right stick`);
@@ -327,12 +341,19 @@ Actions: ${Object.values(ACTIONS).join(", ")}, left stick, right stick`);
 // Commands that never touch the controller — usable without node-hid installed.
 const OFFLINE = new Set(["presets", "share", "show-share", "help"]);
 
-const opts = parseArgs(process.argv.slice(2));
-const cmd = opts._.shift() || "help";
-const fn = COMMANDS[cmd] || COMMANDS.help;
+const rawArgv = process.argv.slice(2);
 try {
-  if (!OFFLINE.has(cmd) && COMMANDS[cmd]) await loadHid();
-  await fn(opts);
+  if (rawArgv[0] === "bridge") {
+    // PC input bridge — its own subcommands/flags (run/edit/set/show). Delegated verbatim.
+    const { runBridge } = await import("./bridge.mjs");
+    await runBridge(rawArgv.slice(1));
+  } else {
+    const opts = parseArgs(rawArgv);
+    const cmd = opts._.shift() || "help";
+    const fn = COMMANDS[cmd] || COMMANDS.help;
+    if (!OFFLINE.has(cmd) && COMMANDS[cmd]) await loadHid();
+    await fn(opts);
+  }
 } catch (e) {
   console.error("error:", e.message);
   process.exit(1);

package/lib/hid-node.mjs

@@ -27,6 +27,7 @@ export function openController(selector = 0) {
   if (list.length === 0) throw new Error("No Access Controller found (VID 054C / PID 0E5F). Connect it via USB-C.");
   let entry;
   if (typeof selector === "string" && selector.startsWith("/")) entry = list.find((d) => d.path === selector);
+  else if (typeof selector === "string" && list.some((d) => d.serialNumber === selector)) entry = list.find((d) => d.serialNumber === selector); // stable across reconnects
   else entry = list[Number(selector)];
   if (!entry) throw new Error(`No controller for selector ${JSON.stringify(selector)}. ${list.length} connected.`);
   const device = new HID.HID(entry.path);

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "ps-access",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Read/write PlayStation Access Controller profiles from a PC (no PS5). CLI + WebHID tool + PC input bridge.",
   "type": "module",
   "bin": {
-    "ps-access": "./cli.mjs",
-    "ps-access-bridge": "./bridge.mjs"
+    "ps-access": "./cli.mjs"
   },
   "scripts": {
     "start": "npx --yes serve -l 3000 .",
     "list": "node cli.mjs list",
     "backup": "node cli.mjs backup",
-    "bridge": "node bridge.mjs",
+    "bridge": "node cli.mjs bridge",
     "test": "node --test"
   },
   "files": [

package/web/bridge-map.mjs

@@ -96,7 +96,7 @@ export function toConfigJSON(map) {
   return JSON.stringify(toConfig(map), null, 2);
 }
 
-// A ready-to-run command for the exported config.
+// A ready-to-run command for the exported config, using the published CLI.
 export function runCommand(filename = "ps-access-bridge.json", sink = "xdotool") {
-  return `node bridge.mjs --config ${filename} --sink ${sink}`;
+  return `npx ps-access bridge --config ${filename} --sink ${sink}`;
 }

package/web/index.html

@@ -158,6 +158,29 @@
   #mon-done { position: absolute; top: -2px; right: 0; font: inherit; font-size: 13px; color: var(--dim);
     background: var(--glass); border: 1px solid rgba(255,255,255,.14); padding: 5px 12px; border-radius: 999px; cursor: pointer; z-index: 7; }
   #mon-done:hover { color: var(--ink); border-color: var(--accent); }
+
+  /* multi-controller monitor: one card per connected controller */
+  #mon-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px;
+    height: 100%; overflow: auto; align-content: start; padding: 2px 2px 8px; }
+  .mon-card { background: var(--glass); border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
+    backdrop-filter: blur(10px); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
+  .mon-card .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
+    font-size: 12px; letter-spacing: .04em; color: var(--dim); }
+  .mon-card .hd .nm { color: var(--ink); font-size: 13px; }
+  .mon-card .hd .pf b { color: var(--accent); font-weight: 500; }
+  .mon-card .r { display: grid; place-items: center; }
+  .mon-card .r svg { width: 100%; max-width: 300px; height: auto; overflow: visible; }
+  .mon-card .r .seg { fill: rgba(255,255,255,.045); stroke: rgba(255,255,255,.2); stroke-width: 2; stroke-linejoin: round; transition: fill .07s, stroke .07s; }
+  .mon-card .r .seg.on { fill: var(--accent2); stroke: var(--accent); }
+  .mon-card .r .lab { fill: var(--ink); font: 300 22px sans-serif; text-anchor: middle; }
+  .mon-card .r .lab.big { font-size: 34px; } .mon-card .r .lab.sm { font-size: 15px; fill: var(--dim); }
+  .mon-card .r .stickwell { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.2); stroke-width: 2; }
+  .mon-card .r .thumb { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.22); stroke-width: 2; transition: fill .07s, cx .04s linear, cy .04s linear; }
+  .mon-card .r .thumb.on { fill: var(--accent2); stroke: var(--accent); }
+  .mon-card .raw { display: grid; grid-template-columns: repeat(16,1fr); gap: 3px; font: 11px ui-monospace, monospace; }
+  .mon-card .raw .b { text-align: center; padding: 3px 0; border-radius: 4px; background: rgba(255,255,255,.03); color: #6c7a89; }
+  .mon-card .raw .b.nz { color: var(--ink); background: rgba(255,255,255,.07); }
+  .mon-card .raw .b.btn { outline: 1.5px solid var(--accent); color: var(--accent); }
   .devcol { display: inline-flex; flex-direction: column; line-height: 1.25; }
   #mon-prof { font-size: 11px; color: var(--dim); letter-spacing: .02em; }
   #mon-prof:empty { display: none; }
@@ -249,6 +272,8 @@
     <span class="device"><span class="dot" id="dev-dot"></span><span class="devcol"><span id="dev-name">No controller</span><span id="mon-prof"></span></span></span>
     <span id="crumb"></span>
     <span class="clock" id="clock"></span>
+    <a href="https://www.npmjs.com/package/ps-access" target="_blank" rel="noopener"
+       title="Also a command-line tool: npm i -g ps-access (profiles + PC input bridge)">CLI ↗</a>
   </div>
 
   <!-- Screen-reader live region: every navigation/value change is announced here. -->
@@ -269,27 +294,8 @@
 
   <div id="monitor">
     <button id="mon-done">Done · Esc</button>
-    <div class="mon-grid">
-      <div id="mon-render"></div>
-      <div class="panel">
-        <div>
-          <h2>Buttons (physical)</h2>
-          <div class="chips" id="mon-chips"></div>
-        </div>
-        <div>
-          <h2>Stick</h2>
-          <div class="stickrow">
-            <div class="crosshair"><div class="dot" id="mon-stickdot"></div></div>
-            <div class="axisvals">X <b id="mon-ax">0.00</b><br>Y <b id="mon-ay">0.00</b></div>
-          </div>
-        </div>
-        <div>
-          <h2>Raw input report (id 0x01)</h2>
-          <div id="mon-raw"></div>
-          <div class="legend" style="font-size:11px;color:var(--dim);margin-top:6px">outlined = <b style="color:var(--accent)">byte 15</b> (perimeter) &amp; <b style="color:var(--accent)">byte 16</b> (center / stick-click)</div>
-        </div>
-      </div>
-    </div>
+    <!-- One card per connected controller, built in xmb.js. -->
+    <div id="mon-cards"></div>
   </div>
 
   <div id="mon-warn">
@@ -332,7 +338,8 @@
         <dt>M</dt><dd>Toggle navigation sounds</dd>
         <dt>?</dt><dd>Open this help</dd>
       </dl>
-      <button class="close" id="help-focus" aria-pressed="false" style="margin-top:18px;margin-right:8px">High-visibility focus ring: Off</button>
+      <p class="sub" style="margin-top:16px">Also a command-line tool — <code>npm i -g ps-access</code> (profile editing + the PC input bridge). See <a href="https://github.com/johnhenry/ps-access" target="_blank" rel="noopener" style="color:var(--accent)">github.com/johnhenry/ps-access</a>.</p>
+      <button class="close" id="help-focus" aria-pressed="false" style="margin-right:8px">High-visibility focus ring: Off</button>
       <button class="close" id="help-close">Close · Esc</button>
     </div>
   </div>

package/web/xmb.js

@@ -250,9 +250,9 @@ function bladeItems(blade) {
     }
     items.push(
       { key: "br-reset", label: "Reset to defaults", action: "bridgeReset" },
-      { key: "br-export", label: "Export config file (bridge.json)", action: "bridgeExport" },
+      { key: "br-export", label: "Export config for the ps-access CLI (bridge.json)", action: "bridgeExport" },
       { key: "br-json", label: "Copy config JSON", action: "bridgeCopyJson" },
-      { key: "br-cmd", label: "Copy run command", action: "bridgeCopyCmd" },
+      { key: "br-cmd", label: "Copy CLI run command (npx ps-access-bridge)", action: "bridgeCopyCmd" },
     );
     return items;
   }
@@ -388,7 +388,7 @@ function announce(msg) {
 // Concise description of the current focus, spoken by screen readers on every nav change.
 function describeNav() {
   if (capturing) return "Listening — press a keyboard key to assign, Delete to clear, or Escape to cancel.";
-  if (monitorMode) return "Live input monitor open. Observe the controller, then press Escape to exit.";
+  if (monitorMode) return "Live input monitor open, showing all connected controllers. Press Escape to exit.";
   if (monitorArm) return `Start the live monitor? ${warnSel === 0 ? "Start monitoring" : "Cancel"}, option ${warnSel + 1} of 2. Up or Down to choose, Enter to confirm.`;
   const blade = BLADES[nav.col];
   if (nav.drill) {
@@ -455,7 +455,7 @@ function activate() {
     case "capture": startCapture(it.cap); break;
     case "cycleStick": cycleStickMode(); break;
     case "bridgeReset": bridgeMap = defaultBridgeMap(); saveBridgeMap(); render(); toast("Bridge mapping reset to defaults"); break;
-    case "bridgeExport": downloadText("ps-access-bridge.json", toConfigJSON(bridgeMap)); toast("Exported bridge.json — run it with the bridge CLI", 4000); break;
+    case "bridgeExport": downloadText("ps-access-bridge.json", toConfigJSON(bridgeMap)); toast("Exported bridge.json — run it with: npx ps-access-bridge --config bridge.json", 5000); break;
     case "bridgeCopyJson": copyText(toConfigJSON(bridgeMap)).then((ok) => toast(ok ? "Config JSON copied" : "Copy failed", 2500)); break;
     case "bridgeCopyCmd": copyText(runCommand()).then((ok) => toast(ok ? "Run command copied" : "Copy failed", 2500)); break;
   }
@@ -619,27 +619,46 @@ async function load() {
 async function connectOnce() {
   try {
     const before = controllers.length;
-    const ds = await requestControllers();
-    if (!ds.length) { toast("No controller selected", 2500); return; }
-    await addDevices(ds);
-    toast(controllers.length > before ? "Controller connected" : "Controller already connected", 2000);
+    await requestControllers();                      // user grants one in the chooser (this gesture)
+    await addDevices(await grantedControllers());    // reconcile: add every granted controller not yet present
+    const added = controllers.length - before;
+    if (added > 0) toast(added > 1 ? `${added} controllers connected` : "Controller connected", 2200);
+    else toast("That one's already connected — to add another, pick the *other* “Access Controller” in the chooser.", 5500);
   } catch (e) { toast(String(e.message || e), 4000); }
 }
-async function addDevices(devices) {
+
+// Serialize addDevices: granting a device in the chooser fires the `connect` event, whose handler
+// also calls addDevices — running both concurrently on the same new device interleaves its
+// feature-report reads and corrupts the add. Chaining guarantees one batch finishes before the next.
+let _addChain = Promise.resolve();
+function addDevices(devices) {
+  const run = _addChain.then(() => _addDevices(devices));
+  _addChain = run.catch(() => {});  // keep the chain alive even if a batch throws
+  return run;
+}
+async function _addDevices(devices) {
+  let added = 0;
   for (const device of devices) {
     if (controllers.some((c) => c.device === device)) continue;
-    await ensureOpen(device);
-    device.addEventListener("inputreport", onInputReport); // physical buttons + stick, live
-    const profiles = [];
-    for (let s = 1; s <= PROFILE_COUNT; s++) {
-      const p = parseProfile(await readProfileRaw(device, s));
-      p._physOrient = p.ports[0].kind === "stick" ? p.ports[0].orientation : 3;
-      profiles.push(p);
+    try {
+      await ensureOpen(device);
+      const profiles = [];
+      for (let s = 1; s <= PROFILE_COUNT; s++) {
+        const p = parseProfile(await readProfileRaw(device, s));
+        p._physOrient = p.ports[0].kind === "stick" ? p.ports[0].orientation : 3;
+        profiles.push(p);
+      }
+      if (controllers.some((c) => c.device === device)) continue; // defensive: added while awaiting
+      device.addEventListener("inputreport", onInputReport);       // attach only after a clean read
+      controllers.push({ device, name: `Controller ${controllers.length + 1}`, profiles });
+      added++;
+    } catch (e) {
+      toast(`Couldn't read a controller: ${e.message || e}`, 4000);
     }
-    controllers.push({ device, name: `Controller ${controllers.length + 1}`, profiles });
   }
   updateDeviceStatus();
   render();
+  return added;
 }
 function updateDeviceStatus() {
   const c = controllers[activeCtrl];
@@ -682,14 +701,37 @@ async function reloadFromDevice() {
 // ============================ live input monitor ============================
 // Full-screen overlay. The controller is purely observed here (navigation is suspended), so
 // every physical button and the stick can be tested freely; exit with Esc or the Done button.
-function buildMonChips() {
-  $("#mon-chips").innerHTML = PHYS_NAMES.map((n, i) =>
+function monChipsHTML() {
+  return PHYS_NAMES.map((n, i) =>
     `<div class="chip" data-i="${i}">${i < 8 ? n : n.split("-")[0]}<small>${i < 8 ? "button" : (i === 8 ? "center" : "L3")}</small></div>`).join("");
 }
-function buildMonRaw() {
+function monRawHTML() {
   let h = "";
   for (let i = 0; i < 63; i++) h += `<div class="b${i === 15 || i === 16 ? " btn" : ""}" data-i="${i}">00</div>`;
-  $("#mon-raw").innerHTML = h;
+  return h;
+}
+// Active on-device profile slot for a controller (from the last input report's byte 39), else 0.
+function monProfileSlot(c) {
+  const p = ctrlState.get(c.device)?.profile;
+  return (p >= 1 && p <= PROFILE_COUNT) ? p - 1 : 0;
+}
+function monCardHTML(i, c) {
+  return `<div class="mon-card" data-ctrl="${i}" data-pslot="">
+    <div class="hd"><span class="nm">${c.name}</span><span class="pf"></span></div>
+    <div class="r"></div>
+    <div class="chips"></div>
+    <div class="stickrow">
+      <div class="crosshair"><div class="dot"></div></div>
+      <div class="axisvals">X <b class="ax">0.00</b> · Y <b class="ay">0.00</b></div>
+    </div>
+    <div class="raw"></div>
+  </div>`;
+}
+function renderMonCardProfile(card, c) {
+  const slot = monProfileSlot(c);
+  card.querySelector(".r").innerHTML = profileSVG(c.profiles[slot] || c.profiles[0]);
+  card.querySelector(".pf").innerHTML = `<b>Profile ${slot + 1}</b>`;
+  card.dataset.pslot = String(slot);
 }
 // Step 1: a PS3-style confirm gate warning that the controller can't exit this view (Esc / Done
 // only). A navigable two-option list — Start / Cancel — operable by keyboard (↑↓ + Enter / Esc),
@@ -723,13 +765,17 @@ function pickArm() { warnSel === 0 ? confirmArm() : cancelArm(); }
 // Step 2: enter the live monitor, rendering the *chosen* profile (so the controller image
 // matches that profile's orientation) and showing which profile is on screen.
 function enterMonitor() {
-  if (!controllers[activeCtrl]) { toast("Connect a controller first"); return; }
-  const prof = controllers[activeCtrl].profiles[shownProfileSlot()]; // the active on-device profile
+  if (!controllers.length) { toast("Connect a controller first"); return; }
   monitorMode = true;
-  $("#mon-render").innerHTML = profileSVG(prof);                 // profileSVG bakes in the orientation
-  updateProfileTag();                                            // top-bar already shows it, keep in sync
-  if (!$("#mon-chips").children.length) buildMonChips();
-  if (!$("#mon-raw").children.length) buildMonRaw();
+  const wrap = $("#mon-cards");
+  wrap.innerHTML = controllers.map((c, i) => monCardHTML(i, c)).join(""); // one card per controller
+  for (const card of wrap.querySelectorAll(".mon-card")) {
+    const i = +card.dataset.ctrl;
+    card.querySelector(".chips").innerHTML = monChipsHTML();
+    card.querySelector(".raw").innerHTML = monRawHTML();
+    renderMonCardProfile(card, controllers[i]);
+  }
+  updateProfileTag();
   $("#monitor").classList.add("show");
   $("#stage").style.display = "none";
   $(".footer").style.display = "none"; // its nav hints don't apply while observing
@@ -743,23 +789,31 @@ function exitMonitor() {
   blip(330);
   render();
 }
-function updateMonitor(buttons, axes, d) {
-  for (const el of document.querySelectorAll("#mon-render svg [data-btn]"))
+// Update the card for the controller that sent this report (every controller updates live).
+function updateMonitor(device, buttons, axes, d, profile) {
+  const i = controllers.findIndex((c) => c.device === device);
+  if (i < 0) return;
+  const card = document.querySelector(`#mon-cards .mon-card[data-ctrl="${i}"]`);
+  if (!card) return;
+  if (profile >= 1 && profile <= PROFILE_COUNT && String(profile - 1) !== card.dataset.pslot) {
+    renderMonCardProfile(card, controllers[i]); // active on-device profile changed -> re-render this card
+  }
+  for (const el of card.querySelectorAll(".r svg [data-btn]"))
     el.classList.toggle("on", buttons.has(+el.getAttribute("data-btn")));
-  const thumb = $("#mon-render svg .thumb");
+  const thumb = card.querySelector(".r svg .thumb");
   if (thumb) {
     thumb.setAttribute("cx", (+thumb.dataset.bx + axes[0] * M.THUMB_R).toFixed(1));
     thumb.setAttribute("cy", (+thumb.dataset.by + axes[1] * M.THUMB_R).toFixed(1));
   }
-  for (const c of $("#mon-chips").children) c.classList.toggle("on", buttons.has(+c.dataset.i));
-  $("#mon-stickdot").style.left = (50 + axes[0] * 38) + "%";
-  $("#mon-stickdot").style.top = (50 + axes[1] * 38) + "%";
-  $("#mon-ax").textContent = axes[0].toFixed(2);
-  $("#mon-ay").textContent = axes[1].toFixed(2);
-  const cells = $("#mon-raw").children;
-  for (let i = 0; i < d.length && i < cells.length; i++) {
-    cells[i].textContent = d[i].toString(16).padStart(2, "0");
-    cells[i].classList.toggle("nz", d[i] !== 0);
+  for (const c of card.querySelectorAll(".chips .chip")) c.classList.toggle("on", buttons.has(+c.dataset.i));
+  card.querySelector(".dot").style.left = (50 + axes[0] * 38) + "%";
+  card.querySelector(".dot").style.top = (50 + axes[1] * 38) + "%";
+  card.querySelector(".ax").textContent = axes[0].toFixed(2);
+  card.querySelector(".ay").textContent = axes[1].toFixed(2);
+  const cells = card.querySelectorAll(".raw .b");
+  for (let k = 0; k < d.length && k < cells.length; k++) {
+    cells[k].textContent = d[k].toString(16).padStart(2, "0");
+    cells[k].classList.toggle("nz", d[k] !== 0);
   }
 }
 
@@ -866,28 +920,47 @@ function closeHelp() {
 // Nav scheme (per design): center/stick-click = confirm; any perimeter button = back; stick = directions.
 const inputEdge = {};
 let dirRepeatAt = 0;
+// Latest decoded physical state per connected controller. Navigation/highlighting is driven by the
+// *union* of all of them (either controller can move the cursor, confirm, back), while the
+// active-profile indicator, wave tint and monitor follow the controller being edited (activeCtrl).
+const ctrlState = new Map(); // device -> { buttons:Set, axes:[x,y] }
+function mergedInput() {
+  const buttons = new Set();
+  let axes = [0, 0], best = 0;
+  for (const c of controllers) {
+    const st = ctrlState.get(c.device);
+    if (!st) continue;
+    for (const b of st.buttons) buttons.add(b);
+    const mag = Math.abs(st.axes[0]) + Math.abs(st.axes[1]); // whichever stick is pushed furthest steers
+    if (mag > best) { best = mag; axes = st.axes; }
+  }
+  return { buttons, axes };
+}
 function onInputReport(e) {
-  if (e.device !== controllers[activeCtrl]?.device) return;
+  if (!controllers.some((c) => c.device === e.device)) return; // ignore reports from a device mid-add
   const d = new Uint8Array(e.data.buffer.slice(e.data.byteOffset, e.data.byteOffset + e.data.byteLength));
   lastInputAt = performance.now();
   waveConnected = true; // a report is streaming -> the wave is visible
   const { buttons, axes, profile } = decodePhysical(d);
-  liveAxes = axes;
-  phys = buttons;
-  // Track the controller's *active* profile (changed with the device's profile button). When it
-  // changes, refresh the top-bar indicator and, if the monitor is open, re-render it for that profile.
-  if (profile && profile - 1 !== deviceProfile) {
+  ctrlState.set(e.device, { buttons, axes, profile });
+  const isActive = e.device === controllers[activeCtrl]?.device;
+  // Active-profile tracking is per-device — only the *edited* controller's profile drives the
+  // indicator/wave/monitor. (Refresh the top bar, wave and "✓ Active" marker when it changes.)
+  if (isActive && profile && profile - 1 !== deviceProfile) {
     deviceProfile = profile - 1;
     updateProfileTag();
-    setWaveProfile(deviceProfile); // fade the wave's leading curves to match the active profile
-    if (monitorMode) $("#mon-render").innerHTML = profileSVG(controllers[activeCtrl].profiles[deviceProfile]);
-    else if (!monitorArm && !nav.drill) render(); // refresh the "✓ Active on controller" marker
+    setWaveProfile(deviceProfile);
+    if (!monitorMode && !monitorArm && !nav.drill) render(); // monitor cards re-render themselves
   }
-  if (monitorMode) { updateMonitor(buttons, axes, d); setGpStatus(true); return; }
-  if (monitorArm) { handleArmInput(buttons, axes); setGpStatus(true); return; }
-  handlePhysInput(buttons, axes);
-  updateLive();
+  // Unified live input (union of every connected controller) drives highlighting + navigation.
+  const m = mergedInput();
+  liveAxes = m.axes;
+  phys = m.buttons;
   setGpStatus(true);
+  if (monitorMode) { updateMonitor(e.device, buttons, axes, d, profile); return; } // every controller updates its card
+  if (monitorArm) { handleArmInput(m.buttons, m.axes); return; }
+  handlePhysInput(m.buttons, m.axes);
+  updateLive();
 }
 
 function handlePhysInput(buttons, axes) {
@@ -1031,6 +1104,7 @@ function init() {
       const idx = controllers.findIndex((c) => c.device === e.device);
       if (idx !== -1) {
         e.device.removeEventListener("inputreport", onInputReport);
+        ctrlState.delete(e.device);
         controllers.splice(idx, 1);
         if (activeCtrl >= controllers.length) activeCtrl = Math.max(0, controllers.length - 1);
         deviceProfile = null;