diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index 6da86872..30cbda94 100644
Binary files a/.claude/CLAUDE.md and b/.claude/CLAUDE.md differ
diff --git a/.claude/notes.md b/.claude/notes.md
index e689f411..1300ea21 100644
Binary files a/.claude/notes.md and b/.claude/notes.md differ
diff --git a/public/app.js b/public/app.js
index 96d29cd1..e108de12 100644
--- a/public/app.js
+++ b/public/app.js
@@ -23,10 +23,13 @@ import { initMotorsKeyboard } from "./capabilities/runtime/signed-pair.js";
 import { initAuthUI, fingerprint as dashFingerprint, pubkeySsh, onKeyChange } from "./auth.js";
 import { initPasswordsUI } from "./passwords.js";
 import { initAssistant, emitPipEvent } from "./assistant.js";
-import { initPhones, broadcastTargetInfo, sendArucoStatus } from "./phones.js";
+import { initPhones, broadcastTargetInfo } from "./phones.js";
 // (local-llm imports moved to assistant.js where the /install slash lives)
 import { initHelpers, setHelpersRobotRenderer, renderHelpers } from "./helpers.js";
-import { startTracking as startArucoTracking, stopTracking as stopArucoTracking } from "./aruco.js";
+// aruco.js is wired through helpers.js — phone helpers can be designated
+// as the overhead camera; detection runs against the helper's existing
+// preview tile. No init call here.
+import "./aruco.js";
 import {
   setupServiceWorker, wireInstallMenuItem, wireCheckUpdatesMenuItem,
   wireHardRefresh, wireDiagnosticsMenuItem, setReportIssueLink, readSwVersion,
@@ -40,9 +43,7 @@ setExpectingReconnectHandler((id) => markExpectingReconnect(id));
 // A phone helper's camera mounted on this robot (phone-as-eye). The video
 // element is discoverable by perception.js's findCameraElement enumerator
 // via [data-attached-camera-id]. srcObject is bound by renderEntry after
-// innerHTML rebuild. The SVG sibling is the ArUco debug overlay — sized
-// to match the video's natural dims via patchArucoOverlay so corner
-// coords from aruco.js (image-pixel) don't need re-scaling per render.
+// innerHTML rebuild.
 function attachedCameraHtml(entry) {
   if (!entry.attachedCameraStream) return "";
   return `
@@ -53,89 +54,12 @@ function attachedCameraHtml(entry) {
       <div class="cap-body">
         <div class="attached-camera-frame">
           <video class="robot-camera" data-attached-camera-id="${escapeHtml(entry.id)}" autoplay playsinline muted></video>
-          <svg class="aruco-overlay" data-aruco-overlay-id="${escapeHtml(entry.id)}"></svg>
         </div>
-        <div class="meta aruco-help">
-          <a href="https://chev.me/arucogen/" target="_blank" rel="noopener">Print marker</a>
-          — "Original ArUco" dictionary, id 0, tape flat on top of the robot.
-        </div>
-        <div class="meta aruco-status" data-aruco-status-id="${escapeHtml(entry.id)}">Loading detector…</div>
       </div>
     </div>
   `;
 }
 
-// Surgical patcher for the ArUco debug overlay. Called from the tracker
-// each tick — mutates the SVG in place so a 10 Hz detection rhythm
-// doesn't trigger full-card re-renders that would destroy other
-// in-flight UI (perception prompt, hover state, etc).
-//
-// `frameCount` in the status is load-bearing diagnostic — without it,
-// "detector still loading", "loop running but nothing found", and
-// "loop wedged" all read identically to the operator.
-function patchArucoOverlay(entry, { markers, frameCount, error }) {
-  const node = entry.node;
-  if (!node) return;
-  const svg = node.querySelector(`svg[data-aruco-overlay-id="${entry.id}"]`);
-  if (!svg) return;
-  const status = node.querySelector(`[data-aruco-status-id="${entry.id}"]`);
-  if (error) {
-    if (svg) svg.innerHTML = "";
-    if (status) {
-      status.classList.remove("aruco-locked");
-      status.textContent = `Detector error: ${error}`;
-    }
-    return;
-  }
-  if (markers.length === 0) {
-    svg.innerHTML = "";
-    if (status) {
-      status.classList.remove("aruco-locked");
-      status.textContent = `Scanning · ${frameCount} frame${frameCount === 1 ? "" : "s"} · no marker yet`;
-    }
-    // Push to phone-as-eye holder so they see lock state without checking
-    // the dashboard. Only on lock-state transitions to keep the data
-    // channel quiet (10 Hz of no-marker pings would be churn for nothing).
-    if (entry.attachedFromPhoneId && entry.arucoLastLocked !== false) {
-      sendArucoStatus(entry.attachedFromPhoneId, { locked: false, detail: "Scanning for marker…" });
-      entry.arucoLastLocked = false;
-    }
-    return;
-  }
-  const { frameW, frameH } = markers[0];
-  svg.setAttribute("viewBox", `0 0 ${frameW} ${frameH}`);
-  // preserveAspectRatio default ("xMidYMid meet") matches how the video
-  // is letterboxed in its container — corners line up.
-  const pieces = [];
-  for (const m of markers) {
-    const pts = m.corners.map(c => `${c.x.toFixed(1)},${c.y.toFixed(1)}`).join(" ");
-    // Heading line from center along the marker's "top edge" direction.
-    const len = Math.min(frameW, frameH) * 0.08;
-    const hx = m.cx + Math.cos(m.headingRad) * len;
-    const hy = m.cy + Math.sin(m.headingRad) * len;
-    pieces.push(`<polygon points="${pts}" />`);
-    pieces.push(`<line x1="${m.cx.toFixed(1)}" y1="${m.cy.toFixed(1)}" x2="${hx.toFixed(1)}" y2="${hy.toFixed(1)}" class="heading" />`);
-    pieces.push(`<text x="${m.cx.toFixed(1)}" y="${m.cy.toFixed(1)}" dy="-8">id ${m.id}</text>`);
-  }
-  svg.innerHTML = pieces.join("");
-  if (status) {
-    status.classList.add("aruco-locked");
-    const ids = markers.map(m => `id ${m.id}`).join(", ");
-    status.textContent = `Tracking ${ids} · frame ${frameCount}`;
-  }
-  // Phone-side lock indicator. Send on transition into locked AND on
-  // marker-id change while locked; suppress while still locked on the
-  // same id to avoid 10 Hz traffic.
-  if (entry.attachedFromPhoneId) {
-    const primaryId = markers[0].id;
-    if (entry.arucoLastLocked !== true || entry.arucoLastMarkerId !== primaryId) {
-      sendArucoStatus(entry.attachedFromPhoneId, { locked: true, markerId: primaryId });
-      entry.arucoLastLocked = true;
-      entry.arucoLastMarkerId = primaryId;
-    }
-  }
-}
-
 // The header meta line ("WiFi … · up …h · reset: …"). Reused by renderEntry
 // (full render) and patchSecondaryRow (telemetry-driven updates that would
 // otherwise flash the whole card every 10 s). Composes pure formatters
@@ -263,9 +187,9 @@ function gattConnectWithTimeout(device) {
 
 async function loadPaired() {
   // Restore remembered robots first — works even when getDevices() is missing.
-  for (const { id, name, fwType, autoReconnect, lastConnectedAt } of loadKnown()) {
+  for (const { id, name, fwType, autoReconnect, lastConnectedAt, arucoMarkerId } of loadKnown()) {
     if (!state.devices.has(id)) {
-      state.devices.set(id, makeEntry(id, name, fwType, { autoReconnect, lastConnectedAt }));
+      state.devices.set(id, makeEntry(id, name, fwType, { autoReconnect, lastConnectedAt, arucoMarkerId }));
     }
   }
   if (navigator.bluetooth.getDevices) {
@@ -1056,16 +980,6 @@ function renderEntry(entry) {
   if (entry.attachedCameraStream) {
     const v = entry.node.querySelector(`video[data-attached-camera-id="${entry.id}"]`);
     if (v) v.srcObject = entry.attachedCameraStream;
-    // Lazy-start ArUco tracking. The tracker is idempotent (returns if
-    // already running) — sourceFn re-resolves the <video> each tick so a
-    // re-render that swaps the element doesn't strand the loop.
-    startArucoTracking(
-      entry.id,
-      () => entry.node?.querySelector(`video[data-attached-camera-id="${entry.id}"]`),
-      (result) => patchArucoOverlay(entry, result),
-    );
-  } else {
-    stopArucoTracking(entry.id);
   }
   // Per-cap try/catch: one cap's wireActions throwing shouldn't silently
   // break wiring for every cap that comes after it. Surface the error so
diff --git a/public/aruco.js b/public/aruco.js
index 0833a771..470ce27b 100644
--- a/public/aruco.js
+++ b/public/aruco.js
@@ -1,37 +1,61 @@
-// ArUco fiducial-marker detection for phone-as-overhead-camera. The phone's
-// WebRTC video lands on `entry.attachedCameraStream` (see helpers.js mount
-// flow); a marker taped on top of the robot gives sub-pixel ground-truth
-// pose at ~10-20 ms per frame. Pure JS via js-aruco2 (no WASM).
+// Headless overhead ArUco localization. Reads frames from a designated
+// <video> element (a phone helper's shared camera, or any other live
+// source), detects markers, writes metric robot positions to
+// entry.arucoPosition. No UI surface — the consumer (helpers.js) wires
+// the source via setOverheadSource(videoEl, { onResult }) and renders
+// the overlay against its own preview tile.
 //
-// Phase 1 surface: detect marker corners + center, render as a debug SVG
-// overlay on the robot card. No motors, no metric pose. Phase 3 will layer
-// `POS.Posit` for metric pose + a pure-pursuit follower; for now we just
-// want to SEE that detection is reliable before trusting it for control.
+// Marker → robot binding prefers explicit entry.arucoMarkerId; falls
+// back to positional ordering (entries[m.id]) so single-robot zero-config
+// still works. Multi-robot setups should bind explicitly (window.bindArucoMarker)
+// — see DEV.md.
 //
-// Marker recipe: print "Original ArUco" id 0 from https://chev.me/arucogen
-// (matches js-aruco2's default `ARUCO` dictionary). Tape on top of robot.
+// Staleness contract: a fresh updatedAt timestamp is written on every
+// detection. Consumers MUST gate trust on (Date.now() - updatedAt) before
+// steering — the producer can't distinguish "out of frame" from "lost
+// lock under motion blur," so it never clears stale entries.
 //
-// Source: https://github.com/damianofalcioni/js-aruco2 — UMD-style globals,
-// no ESM build, so we inject <script> tags lazily on first use. Detector +
-// dictionary are reusable across frames; instantiate once.
+// Library: js-aruco2 from jsDelivr, pure JS, ~50 KB. DICT_4X4_50 markers
+// (printable sheets in /assets). POS.Posit estimates metric pose from
+// settings.arucoMarkerSizeMm + a focal-length heuristic.
+
+import { state, persist } from "./state.js";
+import { settings } from "./settings.js";
 
 const CDN = "https://cdn.jsdelivr.net/gh/damianofalcioni/js-aruco2@master/src";
-const SCRIPTS = ["cv.js", "aruco.js"];  // svd.js + posit1.js only when phase 3 needs pose
-const DICTIONARY = "ARUCO";  // matches chev.me/arucogen "Original ArUco"
-const POLL_MS = 100;  // 10 Hz — plenty for phase 1 diagnostics
+// Load order matters: svd.js MUST precede posit1.js because posit1.js does
+// `var SVD = this.SVD || require('./svd').SVD;` — the require() branch is
+// CJS-only and throws in the browser. With svd.js loaded first, `this.SVD`
+// is defined and the require call never runs. Dictionary files live in a
+// separate dir and self-register on AR.DICTIONARIES[name]; aruco.js holds
+// none of them, so the chosen dict has to be loaded explicitly.
+const SCRIPTS = [
+  "cv.js",
+  "aruco.js",
+  "svd.js",
+  "posit1.js",
+  "dictionaries/aruco_4x4_1000.js",
+];
+// ARUCO_4X4_1000 is the 1000-code superset; the first 50 codes match
+// OpenCV's DICT_4X4_50, which is what the printable sheets are based on.
+const DICTIONARY = "ARUCO_4X4_1000";
+const SCAN_INTERVAL_MS = 1000;
 
 let _detector = null;
-let _loadPromise = null;
-const _canvasByDim = new Map();  // "wxh" → reusable OffscreenCanvas-style HTMLCanvas
+let _detectorPromise = null;
+let _sourceVideo = null;
+let _onResult = null;
+let _timer = null;
+let _frameCount = 0;
+let _canvas = null;  // reusable; resized to match source dims each tick
 
 function loadScript(url) {
   return new Promise((resolve, reject) => {
-    const existing = document.querySelector(`script[data-aruco-src="${url}"]`);
-    if (existing) { existing.addEventListener("load", resolve); existing.addEventListener("error", reject); return; }
+    if (document.querySelector(`script[data-aruco-src="${url}"]`)) { resolve(); return; }
     const s = document.createElement("script");
     s.src = url;
     s.dataset.arucoSrc = url;
-    s.onload = () => resolve();
+    s.onload = resolve;
     s.onerror = () => reject(new Error(`failed to load ${url}`));
     document.head.appendChild(s);
   });
@@ -39,109 +63,117 @@ function loadScript(url) {
 
 async function ensureDetector() {
   if (_detector) return _detector;
-  if (_loadPromise) return _loadPromise;
-  _loadPromise = (async () => {
+  if (_detectorPromise) return _detectorPromise;
+  _detectorPromise = (async () => {
     for (const f of SCRIPTS) await loadScript(`${CDN}/${f}`);
-    if (!window.AR?.Detector) throw new Error("AR.Detector missing after load");
+    if (!window.AR?.Detector) throw new Error("AR.Detector not available after script load");
     _detector = new window.AR.Detector({ dictionaryName: DICTIONARY });
     return _detector;
   })();
-  try { return await _loadPromise; }
-  catch (err) { _loadPromise = null; throw err; }
+  try { return await _detectorPromise; }
+  catch (err) { _detectorPromise = null; throw err; }
 }
 
-function canvasFor(w, h) {
-  const key = `${w}x${h}`;
-  let c = _canvasByDim.get(key);
-  if (!c) {
-    c = document.createElement("canvas");
-    c.width = w; c.height = h;
-    _canvasByDim.set(key, c);
+function estimatePose(corners, w, h, markerSizeMm) {
+  if (!window.POS?.Posit) return null;
+  const cx = w / 2;
+  const cy = h / 2;
+  const centered = corners.map(c => ({ x: c.x - cx, y: -(c.y - cy) }));
+  const focalLength = Math.max(w, h) * 0.85;
+  try {
+    const posit = new window.POS.Posit(markerSizeMm, focalLength);
+    const pose = posit.pose(centered);
+    const [x, y, z] = pose.bestTranslation;
+    return { x: Math.round(x), y: Math.round(y), z: Math.round(z) };
+  } catch {
+    return null;
   }
-  return c;
 }
 
-// Detect markers in a single video / img frame. Returns
-//   [{ id, corners: [{x,y} x4 in image-pixel coords], cx, cy, headingRad }]
-// `headingRad` is computed from corner orientation (corner[0]→corner[1] is
-// the marker's "top edge"); good enough for phase 1's debug overlay. Full
-// pose estimation comes later via POS.Posit.
-async function detectFromSource(source) {
-  const detector = await ensureDetector();
-  const w = source.naturalWidth || source.videoWidth;
-  const h = source.naturalHeight || source.videoHeight;
-  if (!w || !h) return [];
-  const canvas = canvasFor(w, h);
-  const ctx = canvas.getContext("2d", { willReadFrequently: true });
-  try { ctx.drawImage(source, 0, 0, w, h); }
-  catch { return []; }  // tainted canvas (no CORS) — surface as "no markers"
-  let imageData;
-  try { imageData = ctx.getImageData(0, 0, w, h); }
-  catch { return []; }
-  const raw = detector.detect(imageData);
-  return raw.map(m => {
-    const c = m.corners;
-    const cx = (c[0].x + c[1].x + c[2].x + c[3].x) / 4;
-    const cy = (c[0].y + c[1].y + c[2].y + c[3].y) / 4;
-    const headingRad = Math.atan2(c[1].y - c[0].y, c[1].x - c[0].x);
-    return { id: m.id, corners: c, cx, cy, headingRad, frameW: w, frameH: h };
-  });
+// Map a detected marker to a robot entry. Explicit binding wins
+// (entry.arucoMarkerId === markerId). Otherwise fall back to positional
+// — entries[markerId] in iteration order — but only when no entry has
+// claimed the id explicitly, so a bound marker for an absent robot
+// doesn't shadow into positional.
+function resolveEntry(markerId) {
+  const all = [...state.devices.values()];
+  const explicit = all.find(e => e.arucoMarkerId === markerId);
+  if (explicit) return explicit;
+  const anyBound = all.some(e => e.arucoMarkerId === markerId);
+  if (anyBound) return null;
+  return all[markerId] || null;
 }
 
-const _loops = new Map();  // robotId → loop record
-
-const _debug = typeof location !== "undefined" && /\bdebug\b/.test(location.search + location.hash);
-function dbg(...args) { if (_debug) console.log("[aruco]", ...args); }
+async function tick() {
+  if (!_sourceVideo) return;
+  try {
+    const detector = await ensureDetector();
+    const w = _sourceVideo.videoWidth;
+    const h = _sourceVideo.videoHeight;
+    if (!w || !h) {
+      _onResult?.({ markers: [], frameCount: _frameCount, error: "no frame yet" });
+      return;
+    }
+    if (!_canvas) _canvas = document.createElement("canvas");
+    if (_canvas.width !== w) _canvas.width = w;
+    if (_canvas.height !== h) _canvas.height = h;
+    const ctx = _canvas.getContext("2d", { willReadFrequently: true });
+    ctx.drawImage(_sourceVideo, 0, 0, w, h);
+    const raw = detector.detect(ctx.getImageData(0, 0, w, h));
+    _frameCount += 1;
 
-// Start a polling loop against `sourceFn()` (returns the live <video> /
-// <img> each tick — re-resolved every iteration so a card re-render that
-// swaps the element doesn't break tracking).
-//
-// `onResult({markers, frameCount, error})` fires after each detect AND on
-// load-error; status:
-//   - markers: array (possibly empty) — drives the overlay
-//   - frameCount: monotonic — proves the loop is actually running, even
-//     when detection never finds anything (without this, "loading" /
-//     "scanning empty" / "broken" all look the same to the operator)
-//   - error: present on load-failure (script-load reject, missing
-//     window.AR, getImageData throwing). Surface verbatim — this is
-//     dashboard-side, fixes belong on the dashboard.
-export function startTracking(robotId, sourceFn, onResult) {
-  if (_loops.has(robotId)) return;
-  const loop = { stopped: false, timer: null, frameCount: 0 };
-  _loops.set(robotId, loop);
-  const tick = async () => {
-    if (loop.stopped) return;
-    const source = sourceFn();
-    if (source) {
-      try {
-        const markers = await detectFromSource(source);
-        loop.frameCount += 1;
-        if (markers.length) dbg("detected", markers.map(m => `id=${m.id}`).join(", "), `frame=${loop.frameCount}`);
-        if (!loop.stopped) {
-          try { onResult({ markers, frameCount: loop.frameCount }); }
-          catch (err) { console.warn("[aruco] onResult", err); }
-        }
-      } catch (err) {
-        const msg = err.message || String(err);
-        console.warn("[aruco] detect", msg);
-        if (!loop.stopped) {
-          try { onResult({ markers: [], frameCount: loop.frameCount, error: msg }); }
-          catch {}
-        }
+    const markerSizeMm = Math.max(1, parseFloat(settings.arucoMarkerSizeMm) || 100);
+    const now = Date.now();
+    const markers = raw.map(m => {
+      const c = m.corners;
+      const cx = (c[0].x + c[1].x + c[2].x + c[3].x) / 4;
+      const cy = (c[0].y + c[1].y + c[2].y + c[3].y) / 4;
+      const headingRad = Math.atan2(c[1].y - c[0].y, c[1].x - c[0].x);
+      const pose = estimatePose(c, w, h, markerSizeMm);
+      const entry = resolveEntry(m.id);
+      if (entry && pose) {
+        entry.arucoPosition = {
+          x: pose.x, y: pose.y,
+          headingDeg: Math.round(headingRad * 180 / Math.PI),
+          markerSizeMm,
+          updatedAt: now,
+        };
       }
-    }
-    if (!loop.stopped) loop.timer = setTimeout(tick, POLL_MS);
-  };
+      return { id: m.id, cx, cy, headingRad, corners: c, pose, entry, frameW: w, frameH: h };
+    });
+
+    _onResult?.({ markers, frameCount: _frameCount });
+  } catch (err) {
+    _onResult?.({ markers: [], frameCount: _frameCount, error: err?.message || String(err) });
+  }
+}
+
+export function setOverheadSource(videoEl, { onResult } = {}) {
+  if (_sourceVideo === videoEl && _onResult === onResult) return;
+  clearOverheadSource();
+  _sourceVideo = videoEl;
+  _onResult = onResult || null;
+  _frameCount = 0;
+  // Kick once immediately so the overlay paints without waiting a full tick.
   tick();
+  _timer = setInterval(tick, SCAN_INTERVAL_MS);
+}
+
+export function clearOverheadSource() {
+  if (_timer) { clearInterval(_timer); _timer = null; }
+  _sourceVideo = null;
+  _onResult = null;
+  _frameCount = 0;
 }
 
-export function stopTracking(robotId) {
-  const loop = _loops.get(robotId);
-  if (!loop) return;
-  loop.stopped = true;
-  if (loop.timer) clearTimeout(loop.timer);
-  _loops.delete(robotId);
+// Manual marker→robot binding. Surfaced via window.bindArucoMarker for
+// DEV.md; UI selector deferred until two-robot use forces the question.
+export function bindArucoMarker(robotId, markerId) {
+  const entry = state.devices.get(robotId);
+  if (!entry) return { error: `no robot ${robotId}` };
+  entry.arucoMarkerId = typeof markerId === "number" ? markerId : null;
+  persist();
+  return { ok: true, robotId, markerId: entry.arucoMarkerId };
 }
 
-export function isTracking(robotId) { return _loops.has(robotId); }
+if (typeof window !== "undefined") window.bindArucoMarker = bindArucoMarker;
diff --git a/public/assets/aruco_markers_0.pdf b/public/assets/aruco_markers_0.pdf
new file mode 100644
index 00000000..9dd0765a
Binary files /dev/null and b/public/assets/aruco_markers_0.pdf differ
diff --git a/public/assets/aruco_markers_1.pdf b/public/assets/aruco_markers_1.pdf
new file mode 100644
index 00000000..b5159c9b
Binary files /dev/null and b/public/assets/aruco_markers_1.pdf differ
diff --git a/public/helpers.js b/public/helpers.js
index 8a953261..5982b064 100644
--- a/public/helpers.js
+++ b/public/helpers.js
@@ -1,6 +1,13 @@
 import { $, escapeHtml } from "./dom.js";
 import { listPhones, setPhonesChangeHandler, notifyRobotStreamChange } from "./phones.js";
 import { state } from "./state.js";
+import { settings, saveSettings } from "./settings.js";
+import { setOverheadSource, clearOverheadSource } from "./aruco.js";
+
+// Permanent print-marker affordance, rendered whenever a helper is the
+// active overhead source. Single source of truth (no duplication into
+// the status pill on persistent empty — the hint already covers it).
+const MARKERS_HINT = `<div class="helper-markers-hint">Markers · print <a href="assets/aruco_markers_0.pdf" target="_blank" rel="noopener">Sheet 1</a> · <a href="assets/aruco_markers_1.pdf" target="_blank" rel="noopener">Sheet 2</a> · tape one flat on each robot.</div>`;
 
 // Phone cameras can be MOUNTED on a robot (phone-as-eye: strap the phone
 // to the rover for a second camera). Mounted streams route to
@@ -20,8 +27,97 @@ const _phoneAttachments = new Map();
 
 let _videoEls = new Map();  // helperId → <video> element (live video)
 
+// Local videoinputs (laptop webcam, USB cams). enumerateDevices() returns
+// stable deviceIds; labels only resolve after the user grants getUserMedia
+// permission, so first paint is "Camera 1", "Camera 2" until activated.
+// stream is null until designated overhead — we don't open every camera
+// just to list it. devicechange triggers re-enumeration.
+// deviceId → { deviceId, label, stream | null, trackSettings | null }
+const _localCameras = new Map();
+
 export function initHelpers() {
   setPhonesChangeHandler(() => render());
+  (async () => {
+    await enumerateLocalCameras();
+    await maybeAutoResumeLocalOverhead();
+  })();
+  if (navigator.mediaDevices?.addEventListener) {
+    navigator.mediaDevices.addEventListener("devicechange", () => enumerateLocalCameras());
+  }
+  render();
+}
+
+// Persisted "this camera is overhead" survives reloads, but the
+// MediaStream doesn't — getUserMedia has to be called again. Auto-resume
+// the stream IF the browser still considers camera permission granted
+// (no surprise prompts). On any failure, clear the stale designation so
+// the UI doesn't lie about state.
+async function maybeAutoResumeLocalOverhead() {
+  const deviceId = settings.arucoOverheadLocalId;
+  if (!deviceId || !_localCameras.has(deviceId)) {
+    if (deviceId) { settings.arucoOverheadLocalId = null; saveSettings(); render(); }
+    return;
+  }
+  let granted = false;
+  try {
+    if (navigator.permissions?.query) {
+      const perm = await navigator.permissions.query({ name: "camera" });
+      granted = perm.state === "granted";
+    }
+  } catch { /* Permissions API not supported; bail rather than prompting */ }
+  if (!granted) {
+    settings.arucoOverheadLocalId = null;
+    saveSettings();
+    render();
+    return;
+  }
+  await setLocalCameraRole(deviceId, "overhead", { silent: true });
+}
+
+// Strip the hardware-id suffix that browsers append to camera labels —
+// "MacBook Pro Camera (0000:0001)" → "MacBook Pro Camera". The suffix is
+// useful for disambiguation if you have two identical cameras; collapse
+// it otherwise. (Identical-name collisions are rare and we'll handle
+// them when we see one.)
+function cleanCameraLabel(raw, fallbackIdx) {
+  if (!raw) return `Camera ${fallbackIdx}`;
+  return raw.replace(/\s*\([0-9a-f]{4}:[0-9a-f]{4}\)\s*$/i, "").trim() || raw;
+}
+
+async function enumerateLocalCameras() {
+  if (!navigator.mediaDevices?.enumerateDevices) return;
+  let cams;
+  try {
+    const devs = await navigator.mediaDevices.enumerateDevices();
+    cams = devs.filter(d => d.kind === "videoinput");
+  } catch { return; }
+  const seen = new Set();
+  let idx = 1;
+  for (const d of cams) {
+    seen.add(d.deviceId);
+    const existing = _localCameras.get(d.deviceId);
+    if (existing) {
+      if (d.label) existing.label = cleanCameraLabel(d.label, idx);
+    } else {
+      _localCameras.set(d.deviceId, {
+        deviceId: d.deviceId,
+        label: cleanCameraLabel(d.label, idx),
+        stream: null,
+        trackSettings: null,
+      });
+    }
+    idx += 1;
+  }
+  for (const id of [..._localCameras.keys()]) {
+    if (seen.has(id)) continue;
+    const cam = _localCameras.get(id);
+    if (cam.stream) cam.stream.getTracks().forEach(t => t.stop());
+    _localCameras.delete(id);
+    if (settings.arucoOverheadLocalId === id) {
+      settings.arucoOverheadLocalId = null;
+      saveSettings();
+    }
+  }
   render();
 }
 
@@ -177,7 +273,20 @@ function captureFromVideoEl(helperId, isLive, maxDim = 640, quality = 0.8) {
 function render() {
   const list = $("helpers-list");
   if (!list) return;
-  const cards = listPhones().map(renderPhoneCard);
+  // Local cameras are gated behind "user has something to localize" — a
+  // first-time visitor with no robots paired shouldn't be confronted with
+  // a "Camera role" picker for their MacBook camera before they know what
+  // any of this means. Once a robot or phone is in play, the local cam
+  // becomes context-relevant and shows up. Always show if one is already
+  // active (don't strand the user in a session they've already started).
+  const hasContext = state.devices.size > 0 || listPhones().length > 0;
+  const localActive = [..._localCameras.values()].some(c => c.stream)
+    || !!settings.arucoOverheadLocalId;
+  const showLocalCams = hasContext || localActive;
+  const cards = [
+    ...listPhones().map(renderPhoneCard),
+    ...(showLocalCams ? [..._localCameras.values()].map(renderLocalCameraCard) : []),
+  ];
   list.innerHTML = cards.join("");
   wire();
 }
@@ -203,33 +312,48 @@ function renderPhoneCard(p) {
   const helperId = `phone:${p.id}`;
   const attachedTo = _phoneAttachments.get(p.id) || null;
   const attachedRobot = attachedTo ? state.devices.get(attachedTo) : null;
-  const meta = attachedRobot
-    ? `Camera mounted on ${escapeHtml(attachedRobot.name)}`
-    : live
-      ? `Sharing camera · ${ps.trackSettings?.width || "?"}×${ps.trackSettings?.height || "?"}`
-      : escapeHtml(`id ${p.id.slice(0, 8)}…`);
-  // Mount picker — only when the camera is live AND at least one robot is
-  // connected (otherwise there's no destination). Operator = unmounted.
+  const isOverhead = live && settings.arucoOverheadPhoneId === p.id;
+  const res = ps?.trackSettings ? `${ps.trackSettings.width || "?"}×${ps.trackSettings.height || "?"}` : "";
+  const meta = isOverhead
+    ? `Overhead localization · ${res}`
+    : attachedRobot
+      ? `Camera mounted on ${escapeHtml(attachedRobot.name)}`
+      : live
+        ? `Sharing camera · ${res}`
+        : escapeHtml(`id ${p.id.slice(0, 8)}…`);
+
+  // Single "Camera role" picker — operator / overhead / mount-on-robot are
+  // mutually exclusive (a phone's camera does one job at a time). Shown
+  // whenever the stream is live; mount options appear only when there's
+  // a connected robot to mount on.
   const connectedRobots = [...state.devices.values()]
     .filter(e => e.status === "connected")
     .map(e => ({ id: e.id, name: e.name }));
-  const showPicker = live && connectedRobots.length > 0;
-  const picker = showPicker ? `
+  const currentRole = isOverhead ? "overhead" : (attachedTo ? `mount:${attachedTo}` : "operator");
+  const picker = live ? `
     <label class="phone-mount">
-      <span class="meta">Camera →</span>
-      <select data-action="phone-mount" data-phone-id="${escapeHtml(p.id)}">
-        <option value="" ${!attachedTo ? "selected" : ""}>Operator</option>
+      <span class="meta-prose">Camera role</span>
+      <select data-action="phone-role" data-phone-id="${escapeHtml(p.id)}">
+        <option value="operator" ${currentRole === "operator" ? "selected" : ""}>Operator (hand-held)</option>
+        <option value="overhead" ${currentRole === "overhead" ? "selected" : ""}>Overhead localization</option>
         ${connectedRobots.map(r =>
-          `<option value="${escapeHtml(r.id)}" ${attachedTo === r.id ? "selected" : ""}>${escapeHtml(r.name)}</option>`
+          `<option value="mount:${escapeHtml(r.id)}" ${currentRole === `mount:${r.id}` ? "selected" : ""}>Mount on ${escapeHtml(r.name)}</option>`
         ).join("")}
       </select>
     </label>
   ` : "";
-  // Body shows the local preview only when the stream is HERE (not mounted
-  // on a robot). When mounted, the robot card carries the video.
-  const body = (live && !attachedTo)
-    ? `<video class="helper-video" data-helper-video="${escapeHtml(helperId)}" autoplay playsinline muted></video>`
-    : "";
+
+  // Preview tile lives here whenever the stream isn't mounted on a robot.
+  // When overhead is designated, an SVG overlay paints detected markers
+  // on the same tile — no second video element, no duplicate decode.
+  const body = (live && !attachedTo) ? `
+    ${isOverhead ? MARKERS_HINT : ""}
+    <div class="helper-preview">
+      <video class="helper-video" data-helper-video="${escapeHtml(helperId)}" autoplay playsinline muted></video>
+      ${isOverhead ? `<svg class="aruco-overlay" data-aruco-overlay-id="${escapeHtml(helperId)}"></svg>` : ""}
+    </div>
+    ${isOverhead ? `<div class="meta aruco-status" data-aruco-status-id="${escapeHtml(helperId)}">Loading detector…</div>` : ""}
+  ` : "";
   return `
     <section class="card robot helper ${cls}" data-helper-id="${escapeHtml(helperId)}">
       <div class="row">
@@ -250,15 +374,243 @@ function renderPhoneCard(p) {
   `;
 }
 
+// Local cameras have a smaller role surface than phones — they can't mount
+// on a robot via WebRTC, and "operator" doesn't apply. So the picker is
+// just Off vs Overhead localization.
+function renderLocalCameraCard(c) {
+  const helperId = `local:${c.deviceId}`;
+  const live = !!c.stream;
+  const isOverhead = settings.arucoOverheadLocalId === c.deviceId;
+  const res = c.trackSettings ? `${c.trackSettings.width || "?"}×${c.trackSettings.height || "?"}` : "";
+  const meta = (isOverhead && live)
+    ? `Overhead localization · ${res}`
+    : "Idle";
+  // Mirror the phone card's "live AND designated" check — without it, the
+  // dropdown reads "Overhead localization" after a reload (setting persists)
+  // even though the stream is dead, which is dishonest UX.
+  const currentRole = (isOverhead && live) ? "overhead" : "off";
+  const picker = `
+    <label class="phone-mount">
+      <span class="meta-prose">Camera role</span>
+      <select data-action="local-role" data-local-id="${escapeHtml(c.deviceId)}">
+        <option value="off" ${currentRole === "off" ? "selected" : ""}>Idle</option>
+        <option value="overhead" ${currentRole === "overhead" ? "selected" : ""}>Overhead localization</option>
+      </select>
+    </label>
+  `;
+  const body = (live && isOverhead) ? `
+    ${MARKERS_HINT}
+    <div class="helper-preview">
+      <video class="helper-video" data-helper-video="${escapeHtml(helperId)}" autoplay playsinline muted></video>
+      <svg class="aruco-overlay" data-aruco-overlay-id="${escapeHtml(helperId)}"></svg>
+    </div>
+    <div class="meta aruco-status" data-aruco-status-id="${escapeHtml(helperId)}">Loading detector…</div>
+  ` : "";
+  return `
+    <section class="card robot helper" data-helper-id="${escapeHtml(helperId)}">
+      <div class="row">
+        <div class="robot-identity">
+          <div class="label-btn">
+            ${escapeHtml(c.label || "Camera")}
+            <span class="type-badge">LOCAL</span>
+          </div>
+        </div>
+      </div>
+      <div class="robot-secondary">
+        <div class="robot-meta">${meta}</div>
+      </div>
+      ${picker}
+      ${body ? `<div class="robot-body">${body}</div>` : ""}
+    </section>
+  `;
+}
+
+// Stops any other-camera designation in flight (local or phone), since
+// overhead is exclusive across the whole helpers list — there's only one
+// overhead at a time.
+function clearOtherOverhead(except) {
+  if (settings.arucoOverheadPhoneId && except !== `phone:${settings.arucoOverheadPhoneId}`) {
+    settings.arucoOverheadPhoneId = null;
+  }
+  if (settings.arucoOverheadLocalId && except !== `local:${settings.arucoOverheadLocalId}`) {
+    const other = _localCameras.get(settings.arucoOverheadLocalId);
+    if (other?.stream) {
+      other.stream.getTracks().forEach(t => t.stop());
+      other.stream = null;
+      other.trackSettings = null;
+    }
+    settings.arucoOverheadLocalId = null;
+  }
+}
+
+// Single source of truth for "what is this phone's camera doing." Exclusive
+// across operator / overhead / mount-on-robot. Setting any role clears the
+// others first so state can't get inconsistent (e.g. mounted AND overhead).
+function setPhoneRole(phoneId, role) {
+  attachPhoneCameraTo(phoneId, null);
+  if (role === "overhead") {
+    clearOtherOverhead(`phone:${phoneId}`);
+    settings.arucoOverheadPhoneId = phoneId;
+  } else {
+    if (settings.arucoOverheadPhoneId === phoneId) settings.arucoOverheadPhoneId = null;
+    if (role.startsWith("mount:")) attachPhoneCameraTo(phoneId, role.slice("mount:".length));
+  }
+  saveSettings();
+  render();
+}
+
+// Tracks which deviceId the user CURRENTLY intends for overhead while a
+// getUserMedia call is in flight. If they switch away (to Idle, or to a
+// different camera) before the stream resolves, the resolved stream is
+// dropped rather than applied — otherwise the orphan stream keeps running
+// and the camera light stays on.
+let _pendingLocalOverhead = null;
+
+// `silent` suppresses the warn on getUserMedia failure — used for the
+// auto-resume path where failure is the expected outcome whenever the
+// origin or device set changed since the last session (deviceIds scope
+// per-origin, so a Cloudflare-tunnel reload will mismatch).
+async function setLocalCameraRole(deviceId, role, { silent = false } = {}) {
+  const cam = _localCameras.get(deviceId);
+  if (!cam) return;
+  if (role === "overhead") {
+    _pendingLocalOverhead = deviceId;
+    clearOtherOverhead(`local:${deviceId}`);
+    try {
+      // `enumerateDevices()` returns videoinputs with EMPTY deviceId
+      // strings until camera permission is granted for the origin. Passing
+      // `exact: ""` then throws OverconstrainedError. Skip the constraint
+      // until we have a real ID (the long hash form); the resolved track's
+      // getSettings().deviceId tells us which camera we actually got.
+      const hasRealId = !!deviceId && deviceId.length >= 16;
+      const constraints = hasRealId
+        ? { video: { deviceId: { exact: deviceId } } }
+        : { video: true };
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      if (_pendingLocalOverhead !== deviceId) {
+        // User switched intent mid-await. Stop the just-acquired tracks
+        // and bail — the off-branch already cleared state.
+        stream.getTracks().forEach(t => t.stop());
+        return;
+      }
+      const track = stream.getVideoTracks()[0];
+      const trackSettings = track ? track.getSettings() : null;
+      const actualDeviceId = trackSettings?.deviceId || deviceId;
+      // If we used {video:true} and the browser picked a different id
+      // than our placeholder, migrate the entry to the real id so future
+      // sessions can exact-match it.
+      let target = cam;
+      if (actualDeviceId !== deviceId) {
+        _localCameras.delete(deviceId);
+        if (!_localCameras.has(actualDeviceId)) {
+          _localCameras.set(actualDeviceId, { deviceId: actualDeviceId, label: cam.label, stream: null, trackSettings: null });
+        }
+        target = _localCameras.get(actualDeviceId);
+      }
+      target.stream = stream;
+      target.trackSettings = trackSettings;
+      // OS-level revoke / camera unplug fires `ended` on the track.
+      // Reflect that in UI immediately instead of leaving a dead stream
+      // dribbling blank frames into the detector.
+      for (const t of stream.getTracks()) {
+        t.addEventListener("ended", () => {
+          if (target.stream === stream) setLocalCameraRole(actualDeviceId, "off");
+        }, { once: true });
+      }
+      settings.arucoOverheadLocalId = actualDeviceId;
+      // Permission grant unlocks labels for OTHER cameras too — re-enumerate
+      // so the picker shows real names next time it opens.
+      enumerateLocalCameras();
+    } catch (err) {
+      cam.stream = null;
+      cam.trackSettings = null;
+      if (settings.arucoOverheadLocalId === deviceId) settings.arucoOverheadLocalId = null;
+      if (!silent) console.warn("[helpers] getUserMedia failed:", err);
+    }
+  } else {
+    _pendingLocalOverhead = null;
+    if (cam.stream) cam.stream.getTracks().forEach(t => t.stop());
+    cam.stream = null;
+    cam.trackSettings = null;
+    if (settings.arucoOverheadLocalId === deviceId) settings.arucoOverheadLocalId = null;
+  }
+  saveSettings();
+  render();
+}
+
+// Reconcile the active overhead designation (phone OR local) with the
+// live DOM. Called after every render so a fresh <video> element
+// (innerHTML rebuild) gets wired to the detection loop. setOverheadSource
+// is element-identity-cached so repeat calls with the same element are cheap.
+function applyOverheadDesignation() {
+  let helperId = null;
+  if (settings.arucoOverheadPhoneId && _phoneStreams.has(settings.arucoOverheadPhoneId)) {
+    helperId = `phone:${settings.arucoOverheadPhoneId}`;
+  } else if (settings.arucoOverheadLocalId) {
+    const cam = _localCameras.get(settings.arucoOverheadLocalId);
+    if (cam?.stream) helperId = `local:${cam.deviceId}`;
+  }
+  if (!helperId) { clearOverheadSource(); return; }
+  const list = $("helpers-list");
+  const videoEl = list?.querySelector(`[data-helper-video="${CSS.escape(helperId)}"]`);
+  if (!videoEl) { clearOverheadSource(); return; }
+  setOverheadSource(videoEl, { onResult: (r) => paintOverhead(helperId, r) });
+}
+
+function paintOverhead(helperId, { markers, frameCount, error }) {
+  const list = $("helpers-list");
+  if (!list) return;
+  const svg = list.querySelector(`svg[data-aruco-overlay-id="${CSS.escape(helperId)}"]`);
+  const status = list.querySelector(`[data-aruco-status-id="${CSS.escape(helperId)}"]`);
+  if (!svg) return;
+  if (error) {
+    svg.innerHTML = "";
+    if (status) { status.textContent = `Detector: ${error}`; status.classList.remove("aruco-locked"); }
+    return;
+  }
+  if (markers.length === 0) {
+    svg.innerHTML = "";
+    if (status) {
+      status.classList.remove("aruco-locked");
+      status.textContent = frameCount > 5
+        ? "No markers in view"
+        : `Scanning · ${frameCount} frame${frameCount === 1 ? "" : "s"} · no marker yet`;
+    }
+    return;
+  }
+  const { frameW, frameH } = markers[0];
+  svg.setAttribute("viewBox", `0 0 ${frameW} ${frameH}`);
+  const pieces = [];
+  for (const m of markers) {
+    const pts = m.corners.map(c => `${c.x.toFixed(1)},${c.y.toFixed(1)}`).join(" ");
+    const len = Math.min(frameW, frameH) * 0.08;
+    const hx = m.cx + Math.cos(m.headingRad) * len;
+    const hy = m.cy + Math.sin(m.headingRad) * len;
+    pieces.push(`<polygon points="${pts}" />`);
+    pieces.push(`<line x1="${m.cx.toFixed(1)}" y1="${m.cy.toFixed(1)}" x2="${hx.toFixed(1)}" y2="${hy.toFixed(1)}" class="heading" />`);
+    const label = m.entry ? m.entry.name : `id ${m.id}`;
+    pieces.push(`<text x="${m.cx.toFixed(1)}" y="${m.cy.toFixed(1)}" dy="-8">${escapeHtml(label)}</text>`);
+  }
+  svg.innerHTML = pieces.join("");
+  if (status) {
+    const bound = markers.filter(m => m.entry).length;
+    status.textContent = `Tracking ${markers.length} marker${markers.length === 1 ? "" : "s"} · ${bound} bound · frame ${frameCount}`;
+    status.classList.add("aruco-locked");
+  }
+}
+
 function wire() {
   const list = $("helpers-list");
   if (!list) return;
 
-  list.querySelectorAll('[data-action="phone-mount"]').forEach(sel => {
+  list.querySelectorAll('[data-action="phone-role"]').forEach(sel => {
+    sel.addEventListener("change", () => {
+      setPhoneRole(sel.dataset.phoneId, sel.value);
+    });
+  });
+  list.querySelectorAll('[data-action="local-role"]').forEach(sel => {
     sel.addEventListener("change", () => {
-      const phoneId = sel.dataset.phoneId;
-      const robotId = sel.value || null;
-      attachPhoneCameraTo(phoneId, robotId);
+      setLocalCameraRole(sel.dataset.localId, sel.value);
     });
   });
   // Mount the live MediaStream into the freshly-rendered <video> elements.
@@ -272,4 +624,14 @@ function wire() {
       _videoEls.set(helperId, pv);
     }
   }
+  for (const cam of _localCameras.values()) {
+    if (!cam.stream) continue;
+    const helperId = `local:${cam.deviceId}`;
+    const pv = list.querySelector(`[data-helper-video="${CSS.escape(helperId)}"]`);
+    if (pv) {
+      pv.srcObject = cam.stream;
+      _videoEls.set(helperId, pv);
+    }
+  }
+  applyOverheadDesignation();
 }
diff --git a/public/index.html b/public/index.html
index cb02fd5c..06279c6b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -97,6 +97,10 @@ <h1 class="topbar-title">
   </section>
 
   <div class="helpers-section" id="helpers-section">
+    <div class="helpers-heading">
+      <span class="label">Helpers</span>
+      <span class="meta-prose">cameras and phones · perception inputs</span>
+    </div>
     <div id="helpers-list"></div>
   </div>
 
diff --git a/public/mobile.js b/public/mobile.js
index 41ee126f..0ea56aba 100644
--- a/public/mobile.js
+++ b/public/mobile.js
@@ -212,22 +212,6 @@ function onPeerMessage(msg) {
     } else {
       section.hidden = true;
     }
-  } else if (msg.type === "aruco-status") {
-    // Desktop pushes lock state when this phone is mounted on a robot. The
-    // operator holding the phone overhead can't see the dashboard overlay,
-    // so this is the in-hand confirmation that detection is working.
-    const box = document.getElementById("phone-aruco-lock");
-    const text = document.getElementById("phone-aruco-lock-text");
-    if (!box || !text) return;
-    box.hidden = false;
-    if (msg.locked) {
-      box.classList.add("locked");
-      text.textContent = `Marker locked · id ${msg.markerId}`;
-    } else {
-      box.classList.remove("locked");
-      text.textContent = msg.detail || "Scanning for marker…";
-    }
-    return;
   } else if (msg.type === "target-info") {
     // Hide drive surface + panic stop when there's no robot to control.
     const driveSection = $("phone-drive");
diff --git a/public/phone.html b/public/phone.html
index 72e7f972..84e38a46 100644
--- a/public/phone.html
+++ b/public/phone.html
@@ -156,12 +156,6 @@
   <section class="phone-share" id="phone-share" hidden>
     <button type="button" id="phone-share-btn" class="share-action-btn">+ Share this device's camera</button>
     <video id="phone-share-preview" class="phone-share-preview" playsinline muted hidden></video>
-    <!-- Mounted-on-robot ArUco lock indicator pushed from desktop over the
-         data channel — the operator holding the phone overhead can see
-         "marker locked" without looking at the dashboard. -->
-    <div class="aruco-lock" id="phone-aruco-lock" hidden>
-      <span class="aruco-lock-text" id="phone-aruco-lock-text">Scanning…</span>
-    </div>
   </section>
 
   <!-- Perception scene readout — auto-rendered by mobile.js when there's
diff --git a/public/phones.js b/public/phones.js
index cbf22554..f3620196 100644
--- a/public/phones.js
+++ b/public/phones.js
@@ -60,15 +60,6 @@ export function listPhones() {
   }));
 }
 
-// ArUco lock state from a robot's overhead-mounted phone, pushed to the
-// phone so the operator holding it can see detection is working without
-// looking at the dashboard. Throttled in the caller; we just relay.
-export function sendArucoStatus(phoneId, payload) {
-  const p = _phones.get(phoneId);
-  if (!p) return;
-  try { p.peer.send({ type: "aruco-status", ...payload }); } catch {}
-}
-
 // Push a VLM scene description to every paired phone. Separate channel from
 // notices/chat-replies so phones can render the stream of observations under
 // the camera label rather than clobbering Pip's last reply.
diff --git a/public/settings.js b/public/settings.js
index 7d0393c3..d5592a53 100644
--- a/public/settings.js
+++ b/public/settings.js
@@ -20,7 +20,12 @@ export const settings = Object.assign(
   //   privacy; .claude/CLAUDE.md → Model discipline).
   // Keys + tokens in localStorage — browser-only, never leaves origin,
   // but treat like passwords (don't share your browser).
-  { pipBackend: "github", pipApiKey: "", pipOpenaiKey: "", githubAuth: null, pipLocalInstalled: false, pipVisionEnabled: false },
+  // arucoOverheadPhoneId / arucoOverheadLocalId: roomId of the phone, or
+  //   deviceId of the local videoinput, designated as the overhead
+  //   localizer. Mutually exclusive — only one is non-null at a time.
+  // arucoMarkerSizeMm: printed marker side length, used by POS.Posit for
+  //   metric pose. Defaults to the printable sheets' size (100 mm).
+  { pipBackend: "github", pipApiKey: "", pipOpenaiKey: "", githubAuth: null, pipLocalInstalled: false, pipVisionEnabled: false, arucoOverheadPhoneId: null, arucoOverheadLocalId: null, arucoMarkerSizeMm: 100 },
   (() => {
     const raw = JSON.parse(localStorage.getItem(SETTINGS_KEY) || "{}");
     // Migration: pipGithubAuth → githubAuth (Identity + Pip share one OAuth
diff --git a/public/state.js b/public/state.js
index 5f0e4ad8..3131eeca 100644
--- a/public/state.js
+++ b/public/state.js
@@ -18,6 +18,10 @@ export function persist() {
       // false when they clicked Disconnect. Unexpected drops leave it unchanged.
       autoReconnect: !!e.autoReconnect,
       lastConnectedAt: e.lastConnectedAt || 0,
+      // ArUco marker ID bound to this robot. Null = unbound; detection falls
+      // back to positional `entries[m.id]` so zero-config still works for
+      // single-robot use. Manual binding via window.bindArucoMarker — see DEV.md.
+      arucoMarkerId: typeof e.arucoMarkerId === "number" ? e.arucoMarkerId : null,
     });
   }
   localStorage.setItem(STORAGE_KEY, JSON.stringify(out));
@@ -28,7 +32,7 @@ export function loadKnown() {
   catch { return []; }
 }
 
-export function makeEntry(id, name, fwType = null, { autoReconnect = false, lastConnectedAt = 0 } = {}) {
+export function makeEntry(id, name, fwType = null, { autoReconnect = false, lastConnectedAt = 0, arucoMarkerId = null } = {}) {
   return {
     id, name,
     // Platform label shown as a badge on the card. Cached from fw-info.type
@@ -36,6 +40,12 @@ export function makeEntry(id, name, fwType = null, { autoReconnect = false, last
     fwType,
     autoReconnect,
     lastConnectedAt,
+    // ArUco marker assignment — see persist() comment. null = positional fallback.
+    arucoMarkerId,
+    // Latest overhead-camera pose. { x, y, headingDeg, markerSizeMm, updatedAt }
+    // or null when no detection yet. Consumers MUST check updatedAt for
+    // staleness before steering — producer never clears stale entries.
+    arucoPosition: null,
     device: null,
     // Set when a cached gatt.connect() failed (typically after a robot reboot:
     // Chrome keeps the BluetoothDevice handle, but the bonded GATT session
diff --git a/public/styles.css b/public/styles.css
index b1ca5393..de7a5965 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1810,37 +1810,6 @@ details.tray.has-alert > summary::after {
   margin-top: 12px;
 }
 .attached-camera-frame .robot-camera { margin-top: 0; }
-.aruco-overlay {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  border-radius: 8px;
-}
-.aruco-overlay polygon {
-  fill: color-mix(in srgb, var(--success) 22%, transparent);
-  stroke: var(--success);
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
-}
-.aruco-overlay line.heading {
-  stroke: var(--success);
-  stroke-width: 3;
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-}
-.aruco-overlay text {
-  fill: var(--success);
-  font-size: 14px;
-  font-weight: 600;
-  text-anchor: middle;
-  paint-order: stroke;
-  stroke: rgba(0, 0, 0, 0.6);
-  stroke-width: 3;
-}
-.aruco-status { margin-top: 8px; }
-.aruco-status.aruco-locked { color: var(--success); }
 
 /* Flex column with gap is immune to margin-collapse + specificity edge cases —
    spacing stays right whether the .empty-sub is present or not. */
@@ -2262,6 +2231,16 @@ dialog[open]::backdrop { opacity: 1; }
    empty-state's framing so the eye reads "this is a section." */
 .helpers-section { max-width: 440px; }
 .helpers-section:has(#helpers-list:empty) { display: none; }
+.helpers-heading {
+  padding: 0 4px;
+  margin: 24px 0 12px;
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+.helpers-heading .label { font-size: 13px; color: var(--ink-muted); font-weight: 500; }
+.helpers-heading .meta-prose { font-size: 12px; color: var(--ink-muted); opacity: 0.75; }
+#helpers-list { display: flex; flex-direction: column; gap: 16px; }
 /* Topbar pair-phone button — small accent dot when nearby phones are
    broadcasting on wifi (presence-aware affordance). The hint moves to
    the title attr; the dot is the glance-level signal. */
@@ -2298,57 +2277,93 @@ dialog[open]::backdrop { opacity: 1; }
   margin-bottom: 0;
   max-width: none;
 }
+/* Helpers reuse the .robot card scaffold but NOT its identity signals.
+   Robot cards carry a green left-stripe to mean "BLE-connected" — that
+   semantic belongs to robots only. Neutralize the stripe on helpers so
+   it can't be confused with robot-connected state. Active overhead is
+   communicated via the role picker + the dot/pill status line, not at
+   the card edge. */
 .card.helper {
-  background: transparent;
-  border: none;
-  border-bottom: 1px solid var(--line);
-  border-radius: 0;
-  padding: 12px 0;
-  /* Status stripe from .robot would re-introduce a card-like edge — drop
-     it for helpers. Connection state surfaces via the meta line + type
-     badge instead. */
-  border-left: none;
-}
-#helpers-list > .card.helper:last-child {
-  border-bottom: none;
+  padding: 16px 18px;
+  border-left: 1px solid var(--border-default);
 }
 .helper .label-btn { font-size: 14px; }
-.helper-video {
-  /* Live preview is a reference, not the focus. Capping keeps the row
-     reading as a row and not a video panel. Aspect-ratio respected by
-     letting width auto-fit within the cap. */
-  width: auto;
-  max-width: 280px;
-  max-height: 160px;
+.helper-preview {
+  margin-top: 12px;
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
   border-radius: 8px;
+  overflow: hidden;
   background: #000;
-  display: block;
-  margin-top: 8px;
 }
-.helpers-empty {
-  padding: 4px 0 0;
+.helper-preview .helper-video {
+  /* Live preview as a flush media tile — covers the container, no
+     letterboxing. Aspect is set on the wrapper so a 4:3 phone or 4:3
+     webcam crops cleanly to the 16:9 tile instead of bracketing black. */
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
-/* Mount picker on the phone helper card — quiet inline control under the
-   secondary row. The value is the current state (Operator vs Robot N) so
-   the picker doubles as status display. */
+.helpers-empty { padding: 4px 0 0; }
+/* Role picker — quiet inline control under the secondary row. Label uses
+   .meta-prose (not .meta) so it reads as UI text, not data. */
 .phone-mount {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  margin-top: 6px;
-  margin-left: 26px;  /* aligned under name + meta, clears the chevron column */
-  font-size: 12px;
+  gap: 8px;
+  margin-top: 10px;
+  font-size: 13px;
 }
-.phone-mount > .meta { font-size: inherit; }
+.phone-mount > .meta-prose { font-size: inherit; }
+/* Strip native chrome and lay out our own chevron — native selects render
+   the arrow crowded against the right edge across browsers, which the
+   robot-card buttons + other modern UI in this dashboard don't. SVG is
+   inline as a data URL so it ships without a separate asset. */
 .phone-mount select {
   font: inherit;
-  padding: 1px 6px;
-  background: transparent;
-  border: 1px solid var(--border-subtle);
-  border-radius: 4px;
+  font-size: 13px;
+  padding: 5px 30px 5px 10px;
+  background-color: var(--bg);
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238a8a92' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5l3 3 3-3'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 12px;
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
   color: var(--ink);
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+.phone-mount select:hover { border-color: var(--ink-muted); }
+.phone-mount select:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
 }
 
+/* Permanent print-markers hint, visible whenever a helper is designated
+   overhead. Sits between the role row and the preview tile so it reads
+   as "to use this, you need these." Subtle text register; links inherit
+   the muted color and underline on hover for affordance without shouting. */
+.helper-markers-hint {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--ink-muted);
+  opacity: 0.85;
+}
+.helper-markers-hint a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+}
+.helper-markers-hint a:hover { text-decoration-color: currentColor; }
+
 /* ── Phone-side page (phone.html) ─────────────────────────────────────── */
 body.phone {
   min-height: 100dvh;
@@ -2684,25 +2699,6 @@ body.phone textarea {
   aspect-ratio: 4 / 3;
   object-fit: cover;
 }
-/* Phone-side ArUco lock indicator. Shown when this phone is mounted on a
-   robot and the dashboard is pushing detection state — operator holding
-   the phone overhead can see "marker locked" without checking the
-   dashboard. Lifts to a green register on lock. */
-.aruco-lock {
-  padding: 8px 12px;
-  border-radius: 12px;
-  border: 1px solid var(--border-default);
-  background: var(--surface);
-  font-size: 14px;
-  color: var(--ink-muted);
-  text-align: center;
-}
-.aruco-lock.locked {
-  border-color: var(--success);
-  background: color-mix(in srgb, var(--success) 14%, transparent);
-  color: var(--success);
-  font-weight: 500;
-}
 /* Reconnect surface — visible only when not paired or after a drop. Hosts
    the QR scanner so the user can re-pair without going back to the desktop. */
 .phone-reconnect {
@@ -2867,3 +2863,62 @@ body.phone textarea {
   .label-modal::backdrop { display: none; }
   .modal-header button, .modal-footer { display: none; }
 }
+
+/* Helpers preview tile + ArUco overlay. The <svg> overlay sits on top of
+   the <video> via absolute positioning; its viewBox matches the video's
+   frame dimensions so detected-marker corner coords paint without per-
+   render rescaling. preserveAspectRatio default ("xMidYMid meet") tracks
+   the letterboxing of `object-fit: contain`. */
+.helper-preview { position: relative; display: block; }
+.helper-preview .helper-video { display: block; width: 100%; border-radius: 4px; }
+.helper-preview .aruco-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border-radius: 4px;
+}
+.aruco-overlay polygon {
+  fill: color-mix(in srgb, var(--success) 22%, transparent);
+  stroke: var(--success);
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+.aruco-overlay line.heading {
+  stroke: var(--success);
+  stroke-width: 3;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+.aruco-overlay text {
+  fill: var(--success);
+  font-size: 14px;
+  font-weight: 600;
+  text-anchor: middle;
+  paint-order: stroke;
+  stroke: rgba(0, 0, 0, 0.6);
+  stroke-width: 3;
+}
+.aruco-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+  font-size: 12px;
+  color: var(--ink-muted);
+}
+.aruco-status::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ink-muted);
+  flex-shrink: 0;
+}
+.aruco-status.aruco-locked { color: var(--success); }
+.aruco-status.aruco-locked::before {
+  background: var(--success);
+  box-shadow: 0 0 6px color-mix(in srgb, var(--success) 55%, transparent);
+}
+.aruco-status a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
diff --git a/public/sw.js b/public/sw.js
index 14c7a703..0f8f18d1 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -23,7 +23,7 @@
 //   commit. For an intentional bump unrelated to assets (e.g. server-side
 //   change in an API contract), edit any cached asset (a comment will do)
 //   and the hook will pick up a new hash.
-const VERSION = "9e9b861d";
+const VERSION = "ec96372c";
 const CACHE = `dashboard-${VERSION}`;
 
 // Cached at install time so the dashboard can cold-boot offline AND
diff --git a/scripts/serve.js b/scripts/serve.js
index 9cce67b7..e464d422 100755
--- a/scripts/serve.js
+++ b/scripts/serve.js
@@ -32,6 +32,7 @@ const MIME = {
   '.woff2': 'font/woff2',
   '.wasm':  'application/wasm',
   '.map':   'application/json',
+  '.pdf':   'application/pdf',
 };
 
 const server = http.createServer((req, res) => {