reviewstage 1.0.0-rc.24

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Wimukti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# ReviewStage
+
+**Stage your PR review. Post it as yourself.**
+
+```bash
+npx reviewstage
+```
+
+A window opens and walks you through three steps — sign in with GitHub, connect your Claude
+account, pick the repositories you review — then shows your queue. When someone requests your
+review, the dock badge ticks up; click the PR, run a review on your own Claude plan, tick the
+findings worth posting, and post them under your own GitHub name. Nothing posts until you click.
+
+This package is the desktop app. It carries the ReviewStage server with it, runs it on a free
+local port, and fetches the two command-line tools the server needs (`gh`, `jq`) once, pinned by
+version and SHA-256, into `~/.reviewstage/bin`. Everything stays on your machine.
+
+## You need
+
+- **Node 20 or newer** (you have it if you installed Claude Code with npm).
+- **Claude Code** on your PATH — `npm install -g @anthropic-ai/claude-code`. Reviews run on
+  *your* Claude account; the app never fetches Claude Code for you.
+- **Git, Python 3, Bash, OpenSSL and curl** — present on every macOS (after
+  `xcode-select --install`) and on any Linux desktop.
+- macOS 12+ (Apple Silicon or Intel) or Linux x64/arm64. Windows is on the roadmap.
+
+No Apple notarisation dialog: the app is Electron installed by npm, the same way
+`npx @nervekit/desktop` and other npm-distributed desktop apps work.
+
+## Your phone
+
+**ReviewStage menu → Enable phone access…** starts a Cloudflare quick tunnel to your laptop,
+shows a QR code and the HTTPS address. Scan it, sign in once, and **Add to Home Screen**. From
+Settings on the phone, turn on push: a review request on a watched repository notifies the
+phone, and the queue, the findings and the Post button are the same app at phone width. The
+address is public while the tunnel is up (anyone with it reaches your sign-in page, nothing
+more); **Disable phone access** or quitting the app ends it.
+
+## Where things live
+
+Everything is under `~/.reviewstage`: `.env` (the app writes it: a random `RS_SECRET`,
+`RS_PERSONAL=1`, `DRY_RUN=1`), `settings.json` (the repositories you picked), `bin/` (the fetched
+tools), `state/` (every run, staged findings, posted-review records), `repos/` (one blobless
+clone per repository). Delete the directory to start over. `DRY_RUN=1` is on by default:
+everything works except the final write to GitHub, so you can compare its output with your own
+reviews first; switch it off from the Settings page.
+
+## Problems
+
+- *"Claude Code is not installed"* — install it with the command above and relaunch.
+- *"This machine is missing …"* — on macOS run `xcode-select --install`; on Linux install the
+  named packages.
+- *A tool's checksum did not match* — the download is discarded and the app stops. Try again
+  later; if it persists, open an issue with the message.
+- `npx reviewstage --doctor` prints one PASS / WARN / FAIL line per check without opening a
+  window; the server's output from the last launch is in `~/.reviewstage/server.log`.
+
+Full documentation, the security model and the team install (one server, every reviewer as
+themselves) are at <https://wimukti.github.io/reviewstage/>. Source and issues:
+<https://github.com/Wimukti/reviewstage>. MIT.

package/bin/reviewstage.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+// `npx reviewstage` lands here. The job is small: find the Electron binary npm installed next
+// to this package and hand it main.js. Everything that matters happens in main.js.
+import { spawn, spawnSync } from "node:child_process";
+import { homedir } from "node:os";
+import { statSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+
+// `npx reviewstage --doctor` runs the server's own doctor against this install, no window:
+// the same PASS/WARN/FAIL lines the team install gets, with the fetched tools on PATH.
+if (process.argv.includes("--doctor")) {
+  const root = process.env.ROOT || join(homedir(), ".reviewstage");
+  const sep = process.platform === "win32" ? ";" : ":";
+  const r = spawnSync("bash", [join(here, "..", "server", "bin", "doctor.sh")], {
+    stdio: "inherit",
+    env: { ...process.env, ROOT: root, RS_PERSONAL: process.env.RS_PERSONAL || "1", PATH: `${join(root, "bin")}${sep}${process.env.PATH || ""}` },
+  });
+  process.exit(r.status ?? 1);
+}
+let electron;
+try {
+  electron = require("electron"); // the package's default export is the binary path
+} catch (e) {
+  console.error("ReviewStage: the Electron binary is missing. Reinstall with `npx reviewstage@latest`.");
+  console.error(String(e?.message || e));
+  process.exit(1);
+}
+// Linux: Chromium's setuid sandbox helper has to be root-owned 4755, which nothing installed by
+// npm into a user's home can be, and Ubuntu 24.04 also restricts the unprivileged-namespace
+// fallback. Every npm-distributed Electron app hits this. The window only ever shows the local
+// server (external links open in the system browser), so running without the Chromium sandbox
+// is the documented trade on Linux; it is left on wherever the helper is usable.
+const flags = [];
+if (process.platform === "linux") {
+  try {
+    const st = statSync(join(dirname(electron), "chrome-sandbox"));
+    if (!(st.uid === 0 && (st.mode & 0o4000))) flags.push("--no-sandbox");
+  } catch { flags.push("--no-sandbox"); }
+}
+const child = spawn(electron, [join(here, "..", "main.js"), ...flags, ...process.argv.slice(2)], {
+  stdio: "inherit",
+  env: { ...process.env, ELECTRON_DISABLE_SECURITY_WARNINGS: "1" },
+});
+child.on("exit", (code, signal) => process.exit(code ?? (signal ? 1 : 0)));

package/flock.py

@@ -0,0 +1,87 @@
+#!/usr/bin/env python3
+"""`flock` for macOS, which ships without it.
+
+The review scripts use three shapes of util-linux flock, and nothing else:
+
+    flock -n 9            take an exclusive non-blocking lock on fd 9 (opened by the shell)
+    flock -w 3600 8       take an exclusive lock on fd 8, waiting up to 3600 s
+    flock -n FILE cmd …   lock FILE non-blocking, run cmd under it, exit with cmd's status
+
+Exit status 1 when a non-blocking or timed lock cannot be taken, as util-linux does, so
+`flock -n 9 || exit 0` guards behave identically. Installed by the desktop launcher into
+~/.reviewstage/bin, which it prepends to the server's PATH.
+"""
+import fcntl
+import os
+import subprocess
+import sys
+import time
+
+
+def usage():
+    sys.stderr.write("usage: flock [-n] [-w SECS] FD | flock [-n] [-w SECS] FILE CMD [ARG…]\n")
+    sys.exit(64)
+
+
+def take(fd, nonblock, wait):
+    flags = fcntl.LOCK_EX
+    if nonblock:
+        flags |= fcntl.LOCK_NB
+        try:
+            fcntl.flock(fd, flags)
+            return True
+        except BlockingIOError:
+            return False
+    if wait is None:
+        fcntl.flock(fd, flags)
+        return True
+    deadline = time.monotonic() + wait
+    while True:
+        try:
+            fcntl.flock(fd, fcntl.LOCK_EX | fcntl.LOCK_NB)
+            return True
+        except BlockingIOError:
+            if time.monotonic() >= deadline:
+                return False
+            time.sleep(0.2)
+
+
+def main(argv):
+    nonblock, wait = False, None
+    i = 0
+    while i < len(argv) and argv[i].startswith("-"):
+        a = argv[i]
+        if a in ("-n", "--nonblock", "--nb"):
+            nonblock = True
+        elif a in ("-w", "--wait", "--timeout"):
+            i += 1
+            if i >= len(argv):
+                usage()
+            wait = float(argv[i])
+        elif a in ("-x", "--exclusive"):
+            pass
+        else:
+            usage()
+        i += 1
+    rest = argv[i:]
+    if not rest:
+        usage()
+    if len(rest) == 1 and rest[0].isdigit():
+        return 0 if take(int(rest[0]), nonblock, wait) else 1
+    path, cmd = rest[0], rest[1:]
+    if not cmd:
+        usage()
+    fd = os.open(path, os.O_RDWR | os.O_CREAT, 0o644)
+    if not take(fd, nonblock, wait):
+        return 1
+    try:
+        return subprocess.call(cmd)
+    finally:
+        try:
+            fcntl.flock(fd, fcntl.LOCK_UN)
+        finally:
+            os.close(fd)
+
+
+if __name__ == "__main__":
+    sys.exit(main(sys.argv[1:]))

package/main.js

@@ -0,0 +1,281 @@
+// `npx reviewstage` — the desktop app. One window on the local server, which this process
+// starts and owns. Everything the Docker install does with Compose and a browser happens here:
+// a root with a secret, the tools the scripts need, the server on a free port, the queue count
+// on the dock, a notification when a review arrives, and on request a public tunnel for the
+// phone. See openspec/changes/npx-desktop/design.md.
+import { app, BrowserWindow, ipcMain, Menu, Notification, shell, session } from "electron";
+import { homedir } from "node:os";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import QRCode from "qrcode";
+import { ensureEnv, freePort, spawnServer, stopServer } from "./server.js";
+import { ensureTools } from "./tools.js";
+import { startTunnel, stopTunnel, tunnelStatus } from "./tunnel.js";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const ROOT = process.env.ROOT || join(homedir(), ".reviewstage");
+const SMOKE = process.env.RS_SMOKE === "1"; // the Playwright smoke test: no notifications, exit cleanly
+
+let win = null;
+let server = null; // { child, port }
+let badgeTimer = null;
+let lastTodo = -1;
+let phoneWin = null;
+let phoneBusy = false; // an enable or disable in flight; the menu items wait for it
+
+const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c]));
+const progress = (p) => {
+  if (win && !win.isDestroyed()) win.webContents.send("progress", p);
+  // In the smoke test an error would otherwise sit on the Retry screen forever.
+  if (SMOKE && p.error) { console.log(`RS_SMOKE_FAIL ${String(p.error).replace(/<[^>]+>/g, " ")}`); setTimeout(() => app.exit(2), 200); }
+};
+
+function createWindow() {
+  win = new BrowserWindow({
+    width: 1280,
+    height: 860,
+    minWidth: 390,
+    minHeight: 600,
+    title: "ReviewStage",
+    backgroundColor: "#0B0C10",
+    titleBarStyle: process.platform === "darwin" ? "hiddenInset" : "default",
+    trafficLightPosition: { x: 14, y: 14 },
+    webPreferences: { preload: join(here, "preload.cjs"), contextIsolation: true, sandbox: false },
+    show: false,
+  });
+  win.once("ready-to-show", () => win.show());
+  // Links to GitHub and the docs open in the person's browser, not inside the app.
+  win.webContents.setWindowOpenHandler(({ url }) => {
+    if (server && url.startsWith(`http://127.0.0.1:${server.port}`)) return { action: "allow" };
+    shell.openExternal(url);
+    return { action: "deny" };
+  });
+  win.on("closed", () => { win = null; });
+}
+
+async function prepare() {
+  progress({ clearError: true });
+  progress({ step: "tools", state: "doing" });
+  let tools;
+  try {
+    tools = await ensureTools(ROOT, (fraction, label) => progress({ step: "tools", state: "doing", label, fraction }));
+  } catch (e) {
+    progress({ step: "tools", state: "failed", label: "Review tools" });
+    progress({ error: `Could not fetch a tool this app needs.<br><code>${esc(e.message)}</code>` });
+    return null;
+  }
+  progress({ step: "tools", state: "done", label: "Review tools ready" });
+
+  const missing = tools.missing.filter((m) => m !== "claude");
+  if (missing.length) {
+    progress({ step: "claude", state: "failed" });
+    progress({ error: `This machine is missing <code>${esc(missing.join(", "))}</code>. On macOS, run <code>xcode-select --install</code>; on Linux, install them with your package manager.` });
+    return null;
+  }
+  if (tools.missing.includes("claude")) {
+    progress({ step: "claude", state: "failed", label: "Claude Code is not installed" });
+    progress({ error: `ReviewStage runs reviews on <b>your</b> Claude account, through Claude Code. Install it, then try again:<br><code>npm install -g @anthropic-ai/claude-code</code>` });
+    return null;
+  }
+  progress({ step: "claude", state: "done", label: "Claude Code found" });
+
+  progress({ step: "server", state: "doing" });
+  const port = await freePort();
+  ensureEnv(ROOT, port);
+  try {
+    server = await spawnServer({ root: ROOT, binDir: tools.binDir, port });
+  } catch (e) {
+    progress({ step: "server", state: "failed" });
+    progress({ error: `${esc(e.message)}<br><code>${esc((e.log || []).join("\n"))}</code>` });
+    return null;
+  }
+  progress({ step: "server", state: "done", label: "Server running" });
+  return server;
+}
+
+/** The window's own cookies for the local server as a Cookie header, or null when nobody is
+ *  signed in. The badge and the public-URL call both act only as the signed-in person. */
+async function sessionCookieHeader() {
+  if (!server) return null;
+  const cookies = await session.defaultSession.cookies.get({ url: `http://127.0.0.1:${server.port}` });
+  if (!cookies.some((c) => c.name === "rs_session")) return null;
+  return cookies.map((c) => `${c.name}=${c.value}`).join("; ");
+}
+
+async function pollBadge() {
+  if (!server || !win || win.isDestroyed()) return;
+  try {
+    const header = await sessionCookieHeader();
+    if (!header) { app.dock?.setBadge(""); return; }
+    const r = await fetch(`http://127.0.0.1:${server.port}/api/queue?tab=todo`, { headers: { Cookie: header } });
+    if (!r.ok) return;
+    const data = await r.json();
+    const todo = Array.isArray(data.rows) ? data.rows.length : Number(data.counts?.todo ?? 0);
+    app.dock?.setBadge(todo ? String(todo) : "");
+    if (process.platform !== "darwin") win.setTitle(todo ? `ReviewStage (${todo})` : "ReviewStage");
+    if (lastTodo >= 0 && todo > lastTodo && !SMOKE && Notification.isSupported()) {
+      const n = new Notification({ title: "Review requested", body: todo === 1 ? "1 pull request is waiting for you." : `${todo} pull requests are waiting for you.`, silent: false });
+      n.on("click", () => { win?.show(); win?.loadURL(`http://127.0.0.1:${server.port}/`); });
+      n.show();
+    }
+    lastTodo = todo;
+  } catch {
+    /* server mid-restart; the next tick catches up */
+  }
+}
+
+// ---- Phone access ---------------------------------------------------------------------------
+
+/** Tell the server where browsers now reach it (lane D1's `POST /api/public-url`). Returns a
+ *  warning string when it could not, so the page can say links will still point at the laptop. */
+async function setPublicUrl(url) {
+  if (!server) return "The server is not running.";
+  try {
+    const header = await sessionCookieHeader();
+    if (!header) return "Sign in on this computer first so notification links can use the phone address.";
+    const r = await fetch(`http://127.0.0.1:${server.port}/api/public-url`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", Cookie: header },
+      body: JSON.stringify({ url }),
+    });
+    if (r.ok) return null;
+    return r.status === 404
+      ? "This server cannot switch its public address at runtime; links in notifications will point at the laptop until the app restarts."
+      : `The server refused the new public address (HTTP ${r.status}); links in notifications will point at the laptop until the app restarts.`;
+  } catch (e) {
+    return `Could not update the server's public address (${e.message}).`;
+  }
+}
+
+function openPhoneWindow() {
+  if (phoneWin && !phoneWin.isDestroyed()) { phoneWin.show(); phoneWin.focus(); return phoneWin; }
+  phoneWin = new BrowserWindow({
+    width: 440,
+    height: 620,
+    resizable: false,
+    minimizable: false,
+    maximizable: false,
+    fullscreenable: false,
+    parent: win && !win.isDestroyed() ? win : undefined,
+    title: "Review from your phone",
+    backgroundColor: "#0B0C10",
+    titleBarStyle: process.platform === "darwin" ? "hiddenInset" : "default",
+    trafficLightPosition: { x: 14, y: 14 },
+    webPreferences: { preload: join(here, "preload.cjs"), contextIsolation: true, sandbox: false },
+    show: false,
+  });
+  phoneWin.setMenuBarVisibility(false);
+  phoneWin.once("ready-to-show", () => phoneWin?.show());
+  phoneWin.webContents.setWindowOpenHandler(({ url }) => { shell.openExternal(url); return { action: "deny" }; });
+  phoneWin.on("closed", () => { phoneWin = null; refreshMenu(); });
+  phoneWin.loadFile(join(here, "pages", "phone.html"));
+  return phoneWin;
+}
+
+async function sendPhoneData(data) {
+  if (!phoneWin || phoneWin.isDestroyed()) return;
+  if (phoneWin.webContents.isLoading()) await new Promise((r) => phoneWin.webContents.once("did-finish-load", r));
+  if (phoneWin && !phoneWin.isDestroyed()) phoneWin.webContents.send("phone", data);
+}
+
+async function enablePhone() {
+  if (!server) return { enabled: false, error: "The server is not running." };
+  if (phoneBusy) return { ...tunnelStatus(), busy: true };
+  phoneBusy = true;
+  refreshMenu();
+  try {
+    const was = tunnelStatus();
+    openPhoneWindow();
+    const { url } = was.enabled ? was : await startTunnel(server.port, { root: ROOT });
+    const warning = was.enabled ? null : await setPublicUrl(url);
+    const dataUrl = await QRCode.toDataURL(url, { margin: 1, width: 280, color: { dark: "#ECEEF3", light: "#0B0C10" } });
+    await sendPhoneData({ url, dataUrl, warning });
+    return { enabled: true, url, warning };
+  } catch (e) {
+    const detail = (e.log || []).join("\n");
+    await sendPhoneData({ warning: `Could not open a tunnel: ${esc(e.message)}` });
+    console.error(`phone access: ${e.message}\n${detail}`);
+    return { enabled: false, error: e.message, log: e.log || [] };
+  } finally {
+    phoneBusy = false;
+    refreshMenu();
+  }
+}
+
+async function disablePhone() {
+  if (phoneBusy) return { ...tunnelStatus(), busy: true };
+  phoneBusy = true;
+  refreshMenu();
+  try {
+    await stopTunnel();
+    if (server) await setPublicUrl(`http://127.0.0.1:${server.port}`);
+    if (phoneWin && !phoneWin.isDestroyed()) phoneWin.close();
+    return { enabled: false, url: null };
+  } finally {
+    phoneBusy = false;
+    refreshMenu();
+  }
+}
+
+function phoneMenuItems() {
+  const { enabled } = tunnelStatus();
+  const items = enabled
+    ? [{ label: "Disable phone access", enabled: !phoneBusy, click: () => void disablePhone() }]
+    : [{ label: "Enable phone access…", enabled: !phoneBusy && !!server, click: () => void enablePhone() }];
+  if (enabled && (!phoneWin || phoneWin.isDestroyed())) {
+    items.unshift({ label: "Show phone access code…", enabled: !phoneBusy, click: () => void enablePhone() });
+  }
+  return items;
+}
+
+function refreshMenu() {
+  const isMac = process.platform === "darwin";
+  const template = [
+    isMac
+      ? { label: app.name, submenu: [{ role: "about" }, { type: "separator" }, ...phoneMenuItems(), { type: "separator" }, { role: "services" }, { type: "separator" }, { role: "hide" }, { role: "hideOthers" }, { role: "unhide" }, { type: "separator" }, { role: "quit" }] }
+      : { label: "File", submenu: [...phoneMenuItems(), { type: "separator" }, { role: "quit" }] },
+    { role: "editMenu" },
+    { role: "viewMenu" },
+    { role: "windowMenu" },
+  ];
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+  if (isMac) app.dock?.setMenu(Menu.buildFromTemplate(phoneMenuItems()));
+}
+
+async function boot() {
+  createWindow();
+  await win.loadFile(join(here, "pages", "preparing.html"));
+  const ok = await prepare();
+  refreshMenu(); // "Enable phone access" is available once the server is
+  if (!ok) return; // the page shows the error and a Retry
+  await win.loadURL(`http://127.0.0.1:${server.port}/`);
+  pollBadge();
+  badgeTimer = setInterval(pollBadge, 60_000);
+  if (SMOKE) {
+    // Prove the whole path once, then leave so the test can assert on stdout.
+    console.log(`RS_SMOKE_OK port=${server.port} title=${win.getTitle()}`);
+    setTimeout(() => app.quit(), 500);
+  }
+}
+
+ipcMain.on("retry", () => void boot());
+ipcMain.on("quit", () => app.quit());
+ipcMain.handle("phone:enable", () => enablePhone());
+ipcMain.handle("phone:disable", () => disablePhone());
+ipcMain.handle("phone:status", () => { const { enabled, url } = tunnelStatus(); return { enabled, url }; });
+
+app.setName("ReviewStage");
+app.whenReady().then(() => { refreshMenu(); return boot(); });
+app.on("activate", () => { if (!win) createWindow(); });
+app.on("window-all-closed", () => { if (process.platform !== "darwin") app.quit(); });
+app.on("before-quit", async (e) => {
+  if (!server) return;
+  e.preventDefault();
+  clearInterval(badgeTimer);
+  const child = server.child;
+  server = null;
+  // The tunnel first: once it is gone the public address answers nothing, then the server.
+  await stopTunnel();
+  await stopServer(child);
+  app.exit(0);
+});

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "reviewstage",
+  "version": "1.0.0-rc.24",
+  "description": "Stage your PR review. Post it as yourself. The desktop app — `npx reviewstage`.",
+  "license": "MIT",
+  "homepage": "https://wimukti.github.io/reviewstage/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Wimukti/reviewstage.git",
+    "directory": "desktop"
+  },
+  "bin": {
+    "reviewstage": "./bin/reviewstage.js"
+  },
+  "main": "main.js",
+  "type": "module",
+  "engines": {
+    "node": ">=20"
+  },
+  "files": [
+    "bin/",
+    "main.js",
+    "preload.cjs",
+    "tools.json",
+    "tools.js",
+    "flock.py",
+    "server.js",
+    "tunnel.js",
+    "pages/",
+    "server/"
+  ],
+  "dependencies": {
+    "electron": "44.5.1",
+    "qrcode": "^1.5.4"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.63.0"
+  },
+  "scripts": {
+    "start": "node bin/reviewstage.js",
+    "test": "node --test test/*.test.mjs",
+    "test:smoke": "node --test test/smoke.test.mjs"
+  }
+}

package/pages/phone.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<title>Review from your phone</title>
+<style>
+  :root { --paper:#0B0C10; --panel:#12141A; --ink:#ECEEF3; --graphite:#9AA0B4; --hairline:#22262F; --blue:#7A83FF; --red:#F0718A; --green:#3DD98F; --light: rgba(255,225,176,.17); }
+  html, body { height: 100%; margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.5 "Geist Variable", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-app-region: drag; }
+  body { display: grid; place-items: center; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
+  body::-webkit-scrollbar { display: none }
+  .card { position: relative; width: min(400px, calc(100vw - 32px)); margin: 30px 0 10px; padding: 16px 22px 14px; border-radius: 12px; background: var(--panel); box-shadow: 0 24px 64px -24px rgba(0,0,0,.8); -webkit-app-region: no-drag; overflow: hidden; }
+  .card::before { content: ""; position: absolute; left: 50%; top: -46%; width: 120%; height: 112%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(60% 55% at 50% 0%, var(--light), transparent 70%); pointer-events: none; animation: breathe 8s ease-in-out infinite alternate; }
+  @keyframes breathe { from { opacity: .7 } to { opacity: 1 } }
+  @media (prefers-reduced-motion: reduce) { .card::before { animation: none } }
+  h1 { position: relative; margin: 0 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; text-align: center; }
+  .qr { position: relative; display: block; width: 224px; height: 224px; margin: 0 auto; border-radius: 10px; background: var(--paper); image-rendering: pixelated; }
+  .qr[hidden] { display: none }
+  .wait { position: relative; height: 224px; display: grid; place-items: center; color: var(--graphite); }
+  .wait[hidden] { display: none }
+  .url { position: relative; display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; padding: 5px 5px 5px 10px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--paper); }
+  .url code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; -webkit-user-select: all; font: 12px/1.4 "Geist Mono Variable", ui-monospace, Menlo, monospace; color: var(--ink); }
+  ol { position: relative; margin: 0; padding: 0 0 0 20px; color: var(--graphite); font-size: 12.5px; line-height: 1.4; }
+  ol li { padding: 1px 0; }
+  ol li::marker { color: var(--blue); font-weight: 600; }
+  .fine { position: relative; margin: 6px 0 0; color: var(--graphite); font-size: 11.5px; line-height: 1.4; }
+  .warn { position: relative; margin: 6px 0 0; color: var(--red); font-size: 11.5px; line-height: 1.4; }
+  .warn:empty { display: none }
+  .fine a { color: var(--graphite); text-decoration: underline; text-underline-offset: 2px; }
+  .acts { position: relative; display: flex; justify-content: flex-end; margin-top: 8px; }
+  button { font: inherit; font-weight: 500; border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; background: var(--blue); color: var(--paper); }
+  button.ghost { background: transparent; color: var(--graphite); border: 1px solid var(--hairline); }
+  button.small { padding: 5px 10px; font-size: 12px; flex: none; }
+  button:disabled { opacity: .6; cursor: default; }
+</style>
+</head>
+<body>
+  <div class="card">
+    <h1>Review from your phone</h1>
+    <div class="wait" id="wait">Opening a tunnel…</div>
+    <img class="qr" id="qr" alt="QR code of the phone address" hidden>
+    <div class="url"><code id="url" title="">…</code><button class="small" id="copy" disabled>Copy</button></div>
+    <ol>
+      <li>Scan this with your phone's camera</li>
+      <li>Sign in, then Share → Add to Home Screen</li>
+      <li>Open it from the home screen and turn on notifications in Settings</li>
+    </ol>
+    <p class="warn" id="warn"></p>
+    <p class="fine" id="fine">This address is public while phone access is on; every action still needs your sign-in. It stops when you turn phone access off or quit. <a href="https://wimukti.github.io/reviewstage/security/" target="_blank" rel="noopener">How sign-in and links are protected</a></p>
+    <div class="acts"><button class="ghost" id="disable">Disable phone access</button></div>
+  </div>
+  <script>
+    const $ = (s) => document.querySelector(s);
+    let url = "";
+    window.reviewstage?.phone.onData((p) => {
+      if (p.url) {
+        url = p.url;
+        $("#url").textContent = url;
+        $("#url").title = url;
+        $("#copy").disabled = false;
+      }
+      if (p.dataUrl) {
+        $("#qr").src = p.dataUrl;
+        $("#qr").hidden = false;
+        $("#wait").hidden = true;
+      }
+      if (p.warning) $("#warn").textContent = p.warning;
+    });
+    $("#copy").onclick = async () => {
+      try { await navigator.clipboard.writeText(url); } catch {
+        const r = document.createRange(); r.selectNodeContents($("#url"));
+        const sel = getSelection(); sel.removeAllRanges(); sel.addRange(r); document.execCommand("copy");
+      }
+      $("#copy").textContent = "Copied";
+      setTimeout(() => { $("#copy").textContent = "Copy"; }, 2000);
+    };
+    $("#disable").onclick = () => { $("#disable").disabled = true; $("#disable").textContent = "Turning off…"; window.reviewstage?.phone.disable(); };
+  </script>
+</body>
+</html>