Fix phone strip ergonomics; add device launch helper

The two chip rows sat flush: the reference spaces them with
'#strip .chips + .chips', but the .lbl between them is display:none on
phones and still in the DOM, so the sibling selector never matched.
Measured gap was 0px, and both selected chips are light-filled and
left-aligned, so they merged into one shape.

- collapse the 7 context chips into one 44px control opening the existing
  sheet, whose rows now show CTXHINT (never surfaced on phones before)
- chip targets 34.9px -> 44px; they scroll, so a mis-hit scrolled instead
  of tapping
- right-edge fade only on rows that actually overflow (703px and 952px of
  content in a 360px viewport, scrollbars hidden)

Applied in native/ so reference/ stays frozen; CLAUDE.md records what the
React port must carry.

scripts/device.sh makes the screen-off renderer denial unmissable: it
verifies the phone is awake, waits for the page to parse rather than for
the activity, and reads the pid after start (adb install -r kills the old
process, which produced one false 'page never loaded').

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

native/native.js

@@ -110,4 +110,72 @@
       App.exitApp();
     });
   }
+
+  /* ---------- strip ergonomics (Phase 1 UI fix) ----------
+     Collapses the 7 context chips into one 44px control that opens the existing
+     sheet, which frees a row and fixes the flush-rows bug described in
+     native.css. renderExplore() rewrites #strip wholesale on every render, so
+     this re-applies afterwards rather than running once. */
+
+  function phone() { return matchMedia("(max-width:820px)").matches; }
+
+  function ctxSheetHTML() {
+    return Object.keys(CTX)
+      .map(function (c) {
+        return '<button class="ctxopt" data-ctx="' + c + '" aria-pressed="' + (c === st.ctx) + '">' +
+          "<b>" + CTX[c] + "</b><span class=\"hint\">" + CTXHINT[c] + "</span></button>";
+      })
+      .join("");
+  }
+
+  function reshapeStrip() {
+    var strip = document.getElementById("strip");
+    if (!strip) return;
+
+    // Two .chips rows means the Explore strip (context row first, layers second).
+    // Drill renders a .stripbtn and Find an input, so both are left alone.
+    var rows = strip.querySelectorAll(".chips");
+    if (phone() && rows.length >= 2) {
+      var btn = document.createElement("button");
+      btn.className = "ctxbtn";
+      btn.setAttribute("data-ctxsheet", "");
+      btn.setAttribute("aria-label", "Mode: " + CTX[st.ctx] + ". Change mode");
+      var label = document.createElement("b");
+      label.textContent = CTX[st.ctx];
+      var caret = document.createElement("span");
+      caret.setAttribute("aria-hidden", "true");
+      caret.textContent = "▾";
+      btn.appendChild(label);
+      btn.appendChild(caret);
+      rows[0].replaceWith(btn);
+    }
+
+    strip.querySelectorAll(".chips").forEach(function (r) {
+      if (r.scrollWidth > r.clientWidth + 1) r.setAttribute("data-more", "");
+      else r.removeAttribute("data-more");
+    });
+  }
+
+  var origRenderExplore = window.renderExplore;
+  if (typeof origRenderExplore === "function") {
+    window.renderExplore = function () {
+      origRenderExplore.apply(this, arguments);
+      reshapeStrip();
+    };
+  }
+
+  document.addEventListener("click", function (ev) {
+    var t = ev.target.closest && ev.target.closest("button");
+    if (!t) return;
+    if (t.hasAttribute("data-ctxsheet")) {
+      openSheet("Where you are", ctxSheetHTML());
+      return;
+    }
+    // The reference's own handler runs first (registered earlier) and applies
+    // data-ctx, so this only has to dismiss the sheet afterwards.
+    if (t.hasAttribute("data-ctx") && t.closest("#sheet")) closeSheet();
+  });
+
+  // The first render already ran before this script loaded.
+  reshapeStrip();
 })();