rechrome 1.31.8 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rechrome",
-  "version": "1.31.8",
+  "version": "1.33.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/snomiao/rechrome.git"

package/rechrome.js

@@ -377,6 +377,9 @@ export function buildListenChoices(interfaces: ReturnType<typeof networkInterfac
   return choices.sort((a, b) => rank[a.kind] - rank[b.kind]);
 }
 
+// The Mac app's binary only acts as the CLI when it is told to (or has a terminal): from a
+// daemon it tries to start the GUI and fails. Harmless for the standalone CLI.
+const TAILSCALE_ENV = { ...process.env, TAILSCALE_BE_CLI: "1" };
 const tailscaleBinary = () => Bun.which("tailscale") || (existsSync("/Applications/Tailscale.app/Contents/MacOS/Tailscale") ? "/Applications/Tailscale.app/Contents/MacOS/Tailscale" : null);
 
 /** Run the Tailscale CLI read-only; null when it is missing, disconnected, or slow. */
@@ -384,7 +387,7 @@ async function runTailscale(args: string[]): Promise<string | null> {
   const binary = tailscaleBinary();
   if (!binary) return null;
   try {
-    const proc = Bun.spawn([binary, ...args], { stdout: "pipe", stderr: "ignore" });
+    const proc = Bun.spawn([binary, ...args], { env: TAILSCALE_ENV, stdout: "pipe", stderr: "ignore" });
     const timeout = setTimeout(() => proc.kill(), 2000);
     try {
       const output = await new Response(proc.stdout).text();
@@ -445,6 +448,101 @@ export async function detectTailscaleServe(port: number, prefix: string): Promis
   return { dnsName, routeUrl, ...serveMountsAndFunnel(serveStatus, routeUrl ? new URL(routeUrl).hostname : dnsName) };
 }
 
+type ServeHandler = { hostPort: string; mount: string; target: URL };
+
+/** Every Serve route that proxies to a loopback HTTP port. */
+function loopbackServeHandlers(serveStatus: unknown): ServeHandler[] {
+  const web = (serveStatus as { Web?: Record<string, { Handlers?: Record<string, { Proxy?: string }> }> } | null)?.Web ?? {};
+  const handlers: ServeHandler[] = [];
+  for (const [hostPort, config] of Object.entries(web)) {
+    for (const [path, handler] of Object.entries(config.Handlers ?? {})) {
+      if (!handler.Proxy) continue;
+      let target: URL;
+      try { target = new URL(/^[a-z]+:\/\//i.test(handler.Proxy) ? handler.Proxy : `http://${handler.Proxy}`); } catch { continue; }
+      if (!["127.0.0.1", "localhost", "[::1]"].includes(target.hostname) || !target.port) continue;
+      handlers.push({ hostPort, mount: path.replace(/\/+$/, "") || "/", target });
+    }
+  }
+  return handlers;
+}
+
+export type ServeRepair = { hostPort: string; mount: string; from: number; to: number; proxy: string };
+export type ServeStale = { hostPort: string; mount: string; port: number };
+
+/**
+ * Health check for Tailscale Serve against listeners.json. `repair`: a route on a listener's own
+ * mount that proxies to another port (the listener moved), re-pointed at the listener's port.
+ * `stale`: a route next to a listener's mount (same first path segment, e.g. /rechrome beside
+ * /rechrome/taku) whose port no listener uses — a removed listener's leftover, which answers 502.
+ * Root ("/") mounts are never touched: they could be anything.
+ */
+export function planTailscaleServeRepairs(serveStatus: unknown, listeners: { port: number; prefix?: string }[]): { repair: ServeRepair[]; stale: ServeStale[] } {
+  const ports = new Set(listeners.map(l => l.port));
+  const mounts = new Map<string, number>();
+  for (const l of listeners) {
+    const mount = normalizePrefix(l.prefix).replace(/\/+$/, "");
+    if (mount) mounts.set(mount, l.port);
+  }
+  const roots = new Set([...mounts.keys()].map(m => m.split("/")[1]));
+  const repair: ServeRepair[] = [], stale: ServeStale[] = [];
+  for (const { hostPort, mount, target } of loopbackServeHandlers(serveStatus)) {
+    const port = Number(target.port), want = mounts.get(mount);
+    if (want !== undefined) {
+      if (port !== want) {
+        const proxy = new URL(target); proxy.port = String(want);
+        repair.push({ hostPort, mount, from: port, to: want, proxy: proxy.href.replace(/\/$/, mount === "/" ? "/" : "") });
+      }
+    } else if (mount !== "/" && roots.has(mount.split("/")[1]) && !ports.has(port)) {
+      stale.push({ hostPort, mount, port });
+    }
+  }
+  return { repair, stale };
+}
+
+/** Drop the Serve routes that proxy to a removed listener, so they don't linger answering 502. */
+async function removeTailscaleServeRoutes(listener: { port: number; prefix?: string }): Promise<void> {
+  const binary = tailscaleBinary(), raw = binary && await runTailscale(["serve", "status", "--json"]);
+  if (!binary || !raw) return;
+  let serveStatus: unknown;
+  try { serveStatus = JSON.parse(raw); } catch { return; }
+  const mount = normalizePrefix(listener.prefix).replace(/\/+$/, "") || "/";
+  for (const h of loopbackServeHandlers(serveStatus)) {
+    if (Number(h.target.port) !== listener.port || h.mount !== mount) continue;
+    const args = ["serve", `--https=${h.hostPort.split(/:(?=\d+$)/)[1] ?? "443"}`, `--set-path=${h.mount}`, "off"];
+    const ok = await Bun.spawn([binary, ...args], { env: TAILSCALE_ENV, stdout: "ignore", stderr: "inherit", windowsHide: true }).exited === 0;
+    console.log(ok ? `Removed its Tailscale Serve route ${h.hostPort}${h.mount}.` : `Remove its Tailscale Serve route yourself: tailscale ${args.join(" ")}`);
+  }
+}
+
+/**
+ * Daemon health check: keep Tailscale Serve routes pointed at the listeners' current ports.
+ * Re-points a moved listener's route on this node; only reports stale routes (removing a
+ * route is the user's call). Returns log lines, empty when healthy or Tailscale is absent.
+ */
+export async function checkTailscaleServe(listeners: { port: number; prefix?: string }[]): Promise<string[]> {
+  const binary = tailscaleBinary();
+  if (!binary) return [];
+  const raw = await runTailscale(["serve", "status", "--json"]);
+  if (!raw) return [];
+  let serveStatus: unknown;
+  try { serveStatus = JSON.parse(raw); } catch { return []; }
+  const { repair, stale } = planTailscaleServeRepairs(serveStatus, listeners);
+  const lines: string[] = [];
+  for (const r of repair) {
+    const httpsPort = r.hostPort.split(/:(?=\d+$)/)[1] ?? "443";
+    const args = ["serve", "--bg", `--https=${httpsPort}`, `--set-path=${r.mount}`, r.proxy];
+    const proc = Bun.spawn([binary, ...args], { env: TAILSCALE_ENV, stdout: "ignore", stderr: "pipe", windowsHide: true });
+    const ok = await proc.exited === 0;
+    lines.push(ok
+      ? `tailscale serve: re-pointed ${r.hostPort}${r.mount} from 127.0.0.1:${r.from} to ${r.to}`
+      : `tailscale serve: ${r.hostPort}${r.mount} points at 127.0.0.1:${r.from}, listener is on ${r.to}; re-pointing failed (${(await new Response(proc.stderr).text()).trim()}). Run: tailscale ${args.join(" ")}`);
+  }
+  for (const s of stale) {
+    lines.push(`tailscale serve: ${s.hostPort}${s.mount} proxies to 127.0.0.1:${s.port}, where no listener runs (clients get HTTP 502). Remove it: tailscale serve --https=${s.hostPort.split(/:(?=\d+$)/)[1] ?? "443"} --set-path=${s.mount} off`);
+  }
+  return lines;
+}
+
 /** The same connection (key and profile) at another base URL, e.g. where a proxy exposes the listener. */
 export function rebaseConnectionUrl(routeUrl: string, localUrl: string): string {
   const local = new URL(localUrl);
@@ -1240,14 +1338,28 @@ export async function promptChoice<T>(
   } finally { rl.close(); }
 }
 
-/** Registered profiles as choices, one per Chrome profile (data dir + folder; aliases collapse). */
-function registeredProfileChoices(registry: Record<string, TokenEntry>): { label: string; value: string }[] {
+/**
+ * One picker entry per Chrome profile: its Chrome name and signed-in email (from Local State,
+ * for profiles in the default user data dir), then the folder, e.g. `Work · you@example.com  [Profile 2]`.
+ */
+export function registeredProfileChoices(registry: Record<string, TokenEntry>, cache: Record<string, ChromeProfileInfo> | null = null): { label: string; value: string }[] {
+  const defaultDirs = CHROME_LOCAL_STATE_PATHS().map(path => dirname(path));
   return canonicalProfileKeys(registry).map(key => {
-    const dir = registry[key].profileDir;
-    return { label: key === dir ? key : `${key}  [${dir}]`, value: key };
+    const { profileDir: dir, userDataDir } = registry[key];
+    const info = !userDataDir || defaultDirs.includes(userDataDir) ? cache?.[dir] : undefined;
+    const names = [info?.name, info?.user_name, key].filter((n): n is string => !!n && n !== dir);
+    const shown = [...new Set(names)];
+    return { label: shown.length ? `${shown.join(" · ")}  [${dir}]` : dir, value: key };
   });
 }
 
+/** Chrome profiles (default user data dir) that rech has not registered yet: `[folder, info]`. */
+export function unregisteredChromeProfiles(registry: Record<string, TokenEntry>, cache: Record<string, ChromeProfileInfo> | null): [string, ChromeProfileInfo][] {
+  const defaultDirs = CHROME_LOCAL_STATE_PATHS().map(path => dirname(path));
+  const registered = new Set(Object.values(registry).filter(e => !e.userDataDir || defaultDirs.includes(e.userDataDir)).map(e => e.profileDir));
+  return Object.entries(cache ?? {}).filter(([dir]) => !registered.has(dir));
+}
+
 /**
  * Which listener `rech share <profile>` uses when none is named: a scoped one that allows the
  * profile, preferring one with a public URL. Never the management listener, whose key gives
@@ -1394,7 +1506,7 @@ async function exposeWithTailscaleServe(listener: Listener): Promise<string | nu
   const mount = prefix === "/" ? "/" : prefix.slice(0, -1);
   const args = ["serve", "--bg", `--set-path=${mount}`, `http://127.0.0.1:${listener.port}${mount === "/" ? "" : mount}`];
   console.error(`Running: tailscale ${args.join(" ")}`);
-  const proc = Bun.spawn([binary, ...args], { stdout: "ignore", stderr: "inherit", windowsHide: true });
+  const proc = Bun.spawn([binary, ...args], { env: TAILSCALE_ENV, stdout: "ignore", stderr: "inherit", windowsHide: true });
   if (await proc.exited !== 0) {
     console.error(`tailscale serve failed. Run it yourself, then rech share again:\n  tailscale ${args.join(" ")}`);
     return null;
@@ -1427,6 +1539,26 @@ async function shareNewLink(profile: string, opts: { local?: boolean; save?: boo
   return shareSet([profile], { ...opts, host, tailscaleServe, defaultName: name, prefix: `/rechrome/${name}/`, again: `rech share ${JSON.stringify(profile)}` });
 }
 
+/** A scoped listener's full link (contains its key): its public URL when recorded, else its own address. */
+export function listenerLink(listener: Listener, local = false): string {
+  const profiles = listener.profiles as string[];
+  const only = profiles.length === 1 ? `?profile=${encodeURIComponent(profiles[0])}` : "";
+  const direct = `http://${listener.key}@${listenerAddress(listener)}${normalizePrefix(listener.prefix)}${only}`;
+  return listener.publicUrl && !local ? rebaseConnectionUrl(listener.publicUrl, direct) : registeredProfileUrl(direct);
+}
+
+/** The links already handed out (stderr: stdout stays the one URL this command prints). */
+function printExistingLinks(listeners: Listener[], local = false): void {
+  const scoped = listeners.filter(l => l.profiles !== "*" && l.profiles.length);
+  if (!scoped.length) return;
+  console.error("Already shared (secret links):");
+  for (const l of scoped) {
+    console.error(`  ${l.name}: ${(l.profiles as string[]).join(", ")}${!l.publicUrl && isLoopback(l.host) ? "   (this machine only: no proxy recorded)" : ""}`);
+    console.error(`    ${listenerLink(l, local)}`);
+  }
+  console.error("");
+}
+
 async function printProfileUri(selector?: string, listener?: string, opts: { local?: boolean; save?: boolean; all?: boolean } = {}): Promise<void> {
   if (opts.all) {
     if (selector) throw new Error("Pass a profile or --all, not both.");
@@ -1437,14 +1569,41 @@ async function printProfileUri(selector?: string, listener?: string, opts: { loc
   const registry = await readTokenRegistry();
   const cache = await readChromeProfileCache();
   const cancelled = () => new Error("Cancelled; nothing shared.");
+  let config = await readListeners();
   const current = resolveEffectiveProfile(url ? parseUrl(url).profileDirectory : undefined);
-  const pickProfile = async (question: string, choices = registeredProfileChoices(registry)) => {
+  const sharedOn = (key: string) => ((config?.listeners ?? []).filter(l => l.profiles !== "*" && (l.profiles as string[]).includes(key))).map(l => l.name);
+  // Chrome profiles rech doesn't manage yet are listed too; picking one runs setup for it first.
+  const SETUP = "\0setup:";
+  const pickProfile = async (question: string, choices = [
+    ...registeredProfileChoices(registry, cache).map(c => {
+      const on = sharedOn(c.value);
+      return on.length ? { ...c, label: `${c.label}  (shared: ${on.join(", ")})` } : c;
+    }),
+    ...unregisteredChromeProfiles(registry, cache).map(([dir, info]) => ({
+      label: `${[...new Set([info.name, info.user_name].filter(Boolean))].join(" · ") || dir}  [${dir}]  (not set up: runs rech setup)`,
+      value: `${SETUP}${dir}`,
+    })),
+  ]) => {
     const def = Math.max(0, choices.findIndex(c => c.value === current || registry[c.value]?.profileDir === current));
-    return (await promptChoice(question, choices, def)) ?? (() => { throw cancelled(); })();
+    const picked = (await promptChoice(question, choices, def)) ?? (() => { throw cancelled(); })();
+    if (!picked.startsWith(SETUP)) return picked;
+    const dir = picked.slice(SETUP.length);
+    console.error(`[rech] ${dir} isn't set up yet; running rech setup --profile ${JSON.stringify(dir)} first.`);
+    await setup({ profile: dir });
+    const after = await readTokenRegistry();
+    const key = unregisteredChromeProfiles(after, { [dir]: {} }).length ? undefined : canonicalProfileKeys(after).find(k => after[k].profileDir === dir);
+    if (process.exitCode || !key) throw new Error(`Setup didn't register ${dir}; nothing shared. Retry with: rech setup --profile ${JSON.stringify(dir)}`);
+    Object.assign(registry, after);
+    config = await readListeners(); // setup may have added a listener: never write back a stale copy
+    return key;
   };
   if (!selector) {
-    // No profile given: ask, defaulting to the current one (?profile= in the URL, else PLAYWRIGHT_MCP_PROFILE_DIRECTORY).
-    if (interactive && Object.keys(registry).length) selector = await pickProfile("Share which profile?");
+    // No profile given: show what is already shared, then ask, defaulting to the current one
+    // (?profile= in the URL, else PLAYWRIGHT_MCP_PROFILE_DIRECTORY).
+    if (interactive && Object.keys(registry).length) {
+      printExistingLinks(config?.listeners ?? [], opts.local);
+      selector = await pickProfile("Share which profile?");
+    }
     else {
       selector = current;
       if (!selector) throw new Error("No current profile to share. Name one: rech share <profile>   (see rech profile; rech share ls lists what is shared)");
@@ -1467,7 +1626,6 @@ async function printProfileUri(selector?: string, listener?: string, opts: { loc
       } else throw error;
     }
   }
-  const config = await readListeners();
   const listeners = config?.listeners ?? [];
   // On a host, share through a scoped listener by default, never the management key.
   if (!listener && config) {
@@ -1609,7 +1767,9 @@ async function callServe(
     return JSON.parse(text);
   } catch {
     // Not the daemon answering, e.g. a reverse proxy's 404 because the URL's path prefix is wrong.
-    const detail = `HTTP ${res.status} from ${serviceUrl(url, "run")} is not a rechrome daemon response: ${text.slice(0, 200).trim()}`;
+    let detail = `HTTP ${res.status} from ${serviceUrl(url, "run")} is not a rechrome daemon response: ${text.slice(0, 200).trim()}`;
+    if (res.status === 502 || res.status === 503 || res.status === 504)
+      detail += `\n  The proxy is up but nothing answers behind it: this link's listener was likely removed or moved. Ask its owner for a fresh link (\`rech share\`), then \`rechrome connect <link>\`.`;
     if (throwOnFailure) throw new Error(detail);
     console.error(`[rech] rech-client -> ${serviceUrl(url, "run")}\n  -x: ${detail}`);
     process.exit(1);
@@ -2699,6 +2859,7 @@ async function removeListener(name: string): Promise<void> {
   config.listeners = config.listeners.filter(l => l !== listener);
   await writeListeners(config);
   console.log("Listener removed from configuration; daemon reloads automatically.");
+  await removeTailscaleServeRoutes(listener);
 }
 
 async function resolveProfileKeys(selectors: string[]): Promise<string[]> {
@@ -2819,8 +2980,11 @@ async function connect(url: string): Promise<void> {
     throw new Error(`Connected, but listener "${body.listener}" does not allow profile "${parsed.profileDirectory}".`);
   const saved = await saveProjectUrl(url);
   console.log(`Connected to ${serviceUrl(url)}${body.listener ? ` (listener ${body.listener})` : ""}. Saved RECHROME_URL to ${saved}`);
-  if (Array.isArray(body.profiles) && body.profiles.length > 1 && !parsed.profileDirectory)
-    console.log(`This link shares ${body.profiles.length} profiles: ${body.profiles.join(", ")}.\nPick one per command: rech --profile <name> open https://example.com   (see them again with rech profile)`);
+  if (Array.isArray(body.profiles) && body.profiles.length > 1) {
+    console.log(`This link shares ${body.profiles.length} profiles:`);
+    for (const p of body.profiles) console.log(`  ${p}${p === parsed.profileDirectory ? "  (default)" : ""}`);
+    console.log(`${parsed.profileDirectory ? "Use another" : "Pick one"} per command: rech --profile <name> open https://example.com   (see them again with rech profile)`);
+  }
 }
 
 export function detectSetupAgent(env: Record<string, string | undefined> = process.env): "Codex" | "Claude Code" | null {

package/rechrome.ts

@@ -377,6 +377,9 @@ export function buildListenChoices(interfaces: ReturnType<typeof networkInterfac
   return choices.sort((a, b) => rank[a.kind] - rank[b.kind]);
 }
 
+// The Mac app's binary only acts as the CLI when it is told to (or has a terminal): from a
+// daemon it tries to start the GUI and fails. Harmless for the standalone CLI.
+const TAILSCALE_ENV = { ...process.env, TAILSCALE_BE_CLI: "1" };
 const tailscaleBinary = () => Bun.which("tailscale") || (existsSync("/Applications/Tailscale.app/Contents/MacOS/Tailscale") ? "/Applications/Tailscale.app/Contents/MacOS/Tailscale" : null);
 
 /** Run the Tailscale CLI read-only; null when it is missing, disconnected, or slow. */
@@ -384,7 +387,7 @@ async function runTailscale(args: string[]): Promise<string | null> {
   const binary = tailscaleBinary();
   if (!binary) return null;
   try {
-    const proc = Bun.spawn([binary, ...args], { stdout: "pipe", stderr: "ignore" });
+    const proc = Bun.spawn([binary, ...args], { env: TAILSCALE_ENV, stdout: "pipe", stderr: "ignore" });
     const timeout = setTimeout(() => proc.kill(), 2000);
     try {
       const output = await new Response(proc.stdout).text();
@@ -445,6 +448,101 @@ export async function detectTailscaleServe(port: number, prefix: string): Promis
   return { dnsName, routeUrl, ...serveMountsAndFunnel(serveStatus, routeUrl ? new URL(routeUrl).hostname : dnsName) };
 }
 
+type ServeHandler = { hostPort: string; mount: string; target: URL };
+
+/** Every Serve route that proxies to a loopback HTTP port. */
+function loopbackServeHandlers(serveStatus: unknown): ServeHandler[] {
+  const web = (serveStatus as { Web?: Record<string, { Handlers?: Record<string, { Proxy?: string }> }> } | null)?.Web ?? {};
+  const handlers: ServeHandler[] = [];
+  for (const [hostPort, config] of Object.entries(web)) {
+    for (const [path, handler] of Object.entries(config.Handlers ?? {})) {
+      if (!handler.Proxy) continue;
+      let target: URL;
+      try { target = new URL(/^[a-z]+:\/\//i.test(handler.Proxy) ? handler.Proxy : `http://${handler.Proxy}`); } catch { continue; }
+      if (!["127.0.0.1", "localhost", "[::1]"].includes(target.hostname) || !target.port) continue;
+      handlers.push({ hostPort, mount: path.replace(/\/+$/, "") || "/", target });
+    }
+  }
+  return handlers;
+}
+
+export type ServeRepair = { hostPort: string; mount: string; from: number; to: number; proxy: string };
+export type ServeStale = { hostPort: string; mount: string; port: number };
+
+/**
+ * Health check for Tailscale Serve against listeners.json. `repair`: a route on a listener's own
+ * mount that proxies to another port (the listener moved), re-pointed at the listener's port.
+ * `stale`: a route next to a listener's mount (same first path segment, e.g. /rechrome beside
+ * /rechrome/taku) whose port no listener uses — a removed listener's leftover, which answers 502.
+ * Root ("/") mounts are never touched: they could be anything.
+ */
+export function planTailscaleServeRepairs(serveStatus: unknown, listeners: { port: number; prefix?: string }[]): { repair: ServeRepair[]; stale: ServeStale[] } {
+  const ports = new Set(listeners.map(l => l.port));
+  const mounts = new Map<string, number>();
+  for (const l of listeners) {
+    const mount = normalizePrefix(l.prefix).replace(/\/+$/, "");
+    if (mount) mounts.set(mount, l.port);
+  }
+  const roots = new Set([...mounts.keys()].map(m => m.split("/")[1]));
+  const repair: ServeRepair[] = [], stale: ServeStale[] = [];
+  for (const { hostPort, mount, target } of loopbackServeHandlers(serveStatus)) {
+    const port = Number(target.port), want = mounts.get(mount);
+    if (want !== undefined) {
+      if (port !== want) {
+        const proxy = new URL(target); proxy.port = String(want);
+        repair.push({ hostPort, mount, from: port, to: want, proxy: proxy.href.replace(/\/$/, mount === "/" ? "/" : "") });
+      }
+    } else if (mount !== "/" && roots.has(mount.split("/")[1]) && !ports.has(port)) {
+      stale.push({ hostPort, mount, port });
+    }
+  }
+  return { repair, stale };
+}
+
+/** Drop the Serve routes that proxy to a removed listener, so they don't linger answering 502. */
+async function removeTailscaleServeRoutes(listener: { port: number; prefix?: string }): Promise<void> {
+  const binary = tailscaleBinary(), raw = binary && await runTailscale(["serve", "status", "--json"]);
+  if (!binary || !raw) return;
+  let serveStatus: unknown;
+  try { serveStatus = JSON.parse(raw); } catch { return; }
+  const mount = normalizePrefix(listener.prefix).replace(/\/+$/, "") || "/";
+  for (const h of loopbackServeHandlers(serveStatus)) {
+    if (Number(h.target.port) !== listener.port || h.mount !== mount) continue;
+    const args = ["serve", `--https=${h.hostPort.split(/:(?=\d+$)/)[1] ?? "443"}`, `--set-path=${h.mount}`, "off"];
+    const ok = await Bun.spawn([binary, ...args], { env: TAILSCALE_ENV, stdout: "ignore", stderr: "inherit", windowsHide: true }).exited === 0;
+    console.log(ok ? `Removed its Tailscale Serve route ${h.hostPort}${h.mount}.` : `Remove its Tailscale Serve route yourself: tailscale ${args.join(" ")}`);
+  }
+}
+
+/**
+ * Daemon health check: keep Tailscale Serve routes pointed at the listeners' current ports.
+ * Re-points a moved listener's route on this node; only reports stale routes (removing a
+ * route is the user's call). Returns log lines, empty when healthy or Tailscale is absent.
+ */
+export async function checkTailscaleServe(listeners: { port: number; prefix?: string }[]): Promise<string[]> {
+  const binary = tailscaleBinary();
+  if (!binary) return [];
+  const raw = await runTailscale(["serve", "status", "--json"]);
+  if (!raw) return [];
+  let serveStatus: unknown;
+  try { serveStatus = JSON.parse(raw); } catch { return []; }
+  const { repair, stale } = planTailscaleServeRepairs(serveStatus, listeners);
+  const lines: string[] = [];
+  for (const r of repair) {
+    const httpsPort = r.hostPort.split(/:(?=\d+$)/)[1] ?? "443";
+    const args = ["serve", "--bg", `--https=${httpsPort}`, `--set-path=${r.mount}`, r.proxy];
+    const proc = Bun.spawn([binary, ...args], { env: TAILSCALE_ENV, stdout: "ignore", stderr: "pipe", windowsHide: true });
+    const ok = await proc.exited === 0;
+    lines.push(ok
+      ? `tailscale serve: re-pointed ${r.hostPort}${r.mount} from 127.0.0.1:${r.from} to ${r.to}`
+      : `tailscale serve: ${r.hostPort}${r.mount} points at 127.0.0.1:${r.from}, listener is on ${r.to}; re-pointing failed (${(await new Response(proc.stderr).text()).trim()}). Run: tailscale ${args.join(" ")}`);
+  }
+  for (const s of stale) {
+    lines.push(`tailscale serve: ${s.hostPort}${s.mount} proxies to 127.0.0.1:${s.port}, where no listener runs (clients get HTTP 502). Remove it: tailscale serve --https=${s.hostPort.split(/:(?=\d+$)/)[1] ?? "443"} --set-path=${s.mount} off`);
+  }
+  return lines;
+}
+
 /** The same connection (key and profile) at another base URL, e.g. where a proxy exposes the listener. */
 export function rebaseConnectionUrl(routeUrl: string, localUrl: string): string {
   const local = new URL(localUrl);
@@ -1240,14 +1338,28 @@ export async function promptChoice<T>(
   } finally { rl.close(); }
 }
 
-/** Registered profiles as choices, one per Chrome profile (data dir + folder; aliases collapse). */
-function registeredProfileChoices(registry: Record<string, TokenEntry>): { label: string; value: string }[] {
+/**
+ * One picker entry per Chrome profile: its Chrome name and signed-in email (from Local State,
+ * for profiles in the default user data dir), then the folder, e.g. `Work · you@example.com  [Profile 2]`.
+ */
+export function registeredProfileChoices(registry: Record<string, TokenEntry>, cache: Record<string, ChromeProfileInfo> | null = null): { label: string; value: string }[] {
+  const defaultDirs = CHROME_LOCAL_STATE_PATHS().map(path => dirname(path));
   return canonicalProfileKeys(registry).map(key => {
-    const dir = registry[key].profileDir;
-    return { label: key === dir ? key : `${key}  [${dir}]`, value: key };
+    const { profileDir: dir, userDataDir } = registry[key];
+    const info = !userDataDir || defaultDirs.includes(userDataDir) ? cache?.[dir] : undefined;
+    const names = [info?.name, info?.user_name, key].filter((n): n is string => !!n && n !== dir);
+    const shown = [...new Set(names)];
+    return { label: shown.length ? `${shown.join(" · ")}  [${dir}]` : dir, value: key };
   });
 }
 
+/** Chrome profiles (default user data dir) that rech has not registered yet: `[folder, info]`. */
+export function unregisteredChromeProfiles(registry: Record<string, TokenEntry>, cache: Record<string, ChromeProfileInfo> | null): [string, ChromeProfileInfo][] {
+  const defaultDirs = CHROME_LOCAL_STATE_PATHS().map(path => dirname(path));
+  const registered = new Set(Object.values(registry).filter(e => !e.userDataDir || defaultDirs.includes(e.userDataDir)).map(e => e.profileDir));
+  return Object.entries(cache ?? {}).filter(([dir]) => !registered.has(dir));
+}
+
 /**
  * Which listener `rech share <profile>` uses when none is named: a scoped one that allows the
  * profile, preferring one with a public URL. Never the management listener, whose key gives
@@ -1394,7 +1506,7 @@ async function exposeWithTailscaleServe(listener: Listener): Promise<string | nu
   const mount = prefix === "/" ? "/" : prefix.slice(0, -1);
   const args = ["serve", "--bg", `--set-path=${mount}`, `http://127.0.0.1:${listener.port}${mount === "/" ? "" : mount}`];
   console.error(`Running: tailscale ${args.join(" ")}`);
-  const proc = Bun.spawn([binary, ...args], { stdout: "ignore", stderr: "inherit", windowsHide: true });
+  const proc = Bun.spawn([binary, ...args], { env: TAILSCALE_ENV, stdout: "ignore", stderr: "inherit", windowsHide: true });
   if (await proc.exited !== 0) {
     console.error(`tailscale serve failed. Run it yourself, then rech share again:\n  tailscale ${args.join(" ")}`);
     return null;
@@ -1427,6 +1539,26 @@ async function shareNewLink(profile: string, opts: { local?: boolean; save?: boo
   return shareSet([profile], { ...opts, host, tailscaleServe, defaultName: name, prefix: `/rechrome/${name}/`, again: `rech share ${JSON.stringify(profile)}` });
 }
 
+/** A scoped listener's full link (contains its key): its public URL when recorded, else its own address. */
+export function listenerLink(listener: Listener, local = false): string {
+  const profiles = listener.profiles as string[];
+  const only = profiles.length === 1 ? `?profile=${encodeURIComponent(profiles[0])}` : "";
+  const direct = `http://${listener.key}@${listenerAddress(listener)}${normalizePrefix(listener.prefix)}${only}`;
+  return listener.publicUrl && !local ? rebaseConnectionUrl(listener.publicUrl, direct) : registeredProfileUrl(direct);
+}
+
+/** The links already handed out (stderr: stdout stays the one URL this command prints). */
+function printExistingLinks(listeners: Listener[], local = false): void {
+  const scoped = listeners.filter(l => l.profiles !== "*" && l.profiles.length);
+  if (!scoped.length) return;
+  console.error("Already shared (secret links):");
+  for (const l of scoped) {
+    console.error(`  ${l.name}: ${(l.profiles as string[]).join(", ")}${!l.publicUrl && isLoopback(l.host) ? "   (this machine only: no proxy recorded)" : ""}`);
+    console.error(`    ${listenerLink(l, local)}`);
+  }
+  console.error("");
+}
+
 async function printProfileUri(selector?: string, listener?: string, opts: { local?: boolean; save?: boolean; all?: boolean } = {}): Promise<void> {
   if (opts.all) {
     if (selector) throw new Error("Pass a profile or --all, not both.");
@@ -1437,14 +1569,41 @@ async function printProfileUri(selector?: string, listener?: string, opts: { loc
   const registry = await readTokenRegistry();
   const cache = await readChromeProfileCache();
   const cancelled = () => new Error("Cancelled; nothing shared.");
+  let config = await readListeners();
   const current = resolveEffectiveProfile(url ? parseUrl(url).profileDirectory : undefined);
-  const pickProfile = async (question: string, choices = registeredProfileChoices(registry)) => {
+  const sharedOn = (key: string) => ((config?.listeners ?? []).filter(l => l.profiles !== "*" && (l.profiles as string[]).includes(key))).map(l => l.name);
+  // Chrome profiles rech doesn't manage yet are listed too; picking one runs setup for it first.
+  const SETUP = "\0setup:";
+  const pickProfile = async (question: string, choices = [
+    ...registeredProfileChoices(registry, cache).map(c => {
+      const on = sharedOn(c.value);
+      return on.length ? { ...c, label: `${c.label}  (shared: ${on.join(", ")})` } : c;
+    }),
+    ...unregisteredChromeProfiles(registry, cache).map(([dir, info]) => ({
+      label: `${[...new Set([info.name, info.user_name].filter(Boolean))].join(" · ") || dir}  [${dir}]  (not set up: runs rech setup)`,
+      value: `${SETUP}${dir}`,
+    })),
+  ]) => {
     const def = Math.max(0, choices.findIndex(c => c.value === current || registry[c.value]?.profileDir === current));
-    return (await promptChoice(question, choices, def)) ?? (() => { throw cancelled(); })();
+    const picked = (await promptChoice(question, choices, def)) ?? (() => { throw cancelled(); })();
+    if (!picked.startsWith(SETUP)) return picked;
+    const dir = picked.slice(SETUP.length);
+    console.error(`[rech] ${dir} isn't set up yet; running rech setup --profile ${JSON.stringify(dir)} first.`);
+    await setup({ profile: dir });
+    const after = await readTokenRegistry();
+    const key = unregisteredChromeProfiles(after, { [dir]: {} }).length ? undefined : canonicalProfileKeys(after).find(k => after[k].profileDir === dir);
+    if (process.exitCode || !key) throw new Error(`Setup didn't register ${dir}; nothing shared. Retry with: rech setup --profile ${JSON.stringify(dir)}`);
+    Object.assign(registry, after);
+    config = await readListeners(); // setup may have added a listener: never write back a stale copy
+    return key;
   };
   if (!selector) {
-    // No profile given: ask, defaulting to the current one (?profile= in the URL, else PLAYWRIGHT_MCP_PROFILE_DIRECTORY).
-    if (interactive && Object.keys(registry).length) selector = await pickProfile("Share which profile?");
+    // No profile given: show what is already shared, then ask, defaulting to the current one
+    // (?profile= in the URL, else PLAYWRIGHT_MCP_PROFILE_DIRECTORY).
+    if (interactive && Object.keys(registry).length) {
+      printExistingLinks(config?.listeners ?? [], opts.local);
+      selector = await pickProfile("Share which profile?");
+    }
     else {
       selector = current;
       if (!selector) throw new Error("No current profile to share. Name one: rech share <profile>   (see rech profile; rech share ls lists what is shared)");
@@ -1467,7 +1626,6 @@ async function printProfileUri(selector?: string, listener?: string, opts: { loc
       } else throw error;
     }
   }
-  const config = await readListeners();
   const listeners = config?.listeners ?? [];
   // On a host, share through a scoped listener by default, never the management key.
   if (!listener && config) {
@@ -1609,7 +1767,9 @@ async function callServe(
     return JSON.parse(text);
   } catch {
     // Not the daemon answering, e.g. a reverse proxy's 404 because the URL's path prefix is wrong.
-    const detail = `HTTP ${res.status} from ${serviceUrl(url, "run")} is not a rechrome daemon response: ${text.slice(0, 200).trim()}`;
+    let detail = `HTTP ${res.status} from ${serviceUrl(url, "run")} is not a rechrome daemon response: ${text.slice(0, 200).trim()}`;
+    if (res.status === 502 || res.status === 503 || res.status === 504)
+      detail += `\n  The proxy is up but nothing answers behind it: this link's listener was likely removed or moved. Ask its owner for a fresh link (\`rech share\`), then \`rechrome connect <link>\`.`;
     if (throwOnFailure) throw new Error(detail);
     console.error(`[rech] rech-client -> ${serviceUrl(url, "run")}\n  -x: ${detail}`);
     process.exit(1);
@@ -2699,6 +2859,7 @@ async function removeListener(name: string): Promise<void> {
   config.listeners = config.listeners.filter(l => l !== listener);
   await writeListeners(config);
   console.log("Listener removed from configuration; daemon reloads automatically.");
+  await removeTailscaleServeRoutes(listener);
 }
 
 async function resolveProfileKeys(selectors: string[]): Promise<string[]> {
@@ -2819,8 +2980,11 @@ async function connect(url: string): Promise<void> {
     throw new Error(`Connected, but listener "${body.listener}" does not allow profile "${parsed.profileDirectory}".`);
   const saved = await saveProjectUrl(url);
   console.log(`Connected to ${serviceUrl(url)}${body.listener ? ` (listener ${body.listener})` : ""}. Saved RECHROME_URL to ${saved}`);
-  if (Array.isArray(body.profiles) && body.profiles.length > 1 && !parsed.profileDirectory)
-    console.log(`This link shares ${body.profiles.length} profiles: ${body.profiles.join(", ")}.\nPick one per command: rech --profile <name> open https://example.com   (see them again with rech profile)`);
+  if (Array.isArray(body.profiles) && body.profiles.length > 1) {
+    console.log(`This link shares ${body.profiles.length} profiles:`);
+    for (const p of body.profiles) console.log(`  ${p}${p === parsed.profileDirectory ? "  (default)" : ""}`);
+    console.log(`${parsed.profileDirectory ? "Use another" : "Pick one"} per command: rech --profile <name> open https://example.com   (see them again with rech profile)`);
+  }
 }
 
 export function detectSetupAgent(env: Record<string, string | undefined> = process.env): "Codex" | "Claude Code" | null {

package/serve.js

@@ -17,6 +17,7 @@ import {
   resolvePlaywrightCli,
   readTokenRegistry,
   readChromeProfileCache,
+  checkTailscaleServe,
 } from "./rechrome.js";
 
 const TAILSCALE_BIN = process.env.TAILSCALE_BIN || "/Applications/Tailscale.app/Contents/MacOS/Tailscale";
@@ -411,12 +412,12 @@ export const LANDING_HEADERS = {
   "Cache-Control": "no-store",
   "Referrer-Policy": "no-referrer",
   "X-Content-Type-Options": "nosniff",
-  "Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'",
+  "Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; connect-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'",
 };
 
 /**
- * The page a shared connection URL shows in a browser: install-and-connect commands to copy,
- * one per shell. It is static; the script reads the full URL (with its #key) from the address
+ * The page a shared connection URL shows in a browser: two install-and-connect lines to copy,
+ * identical for every shell. It is static; the script reads the full URL (with its #key) from the address
  * bar, shows it with the key masked, and copies it whole.
  */
 export function landingPage(): string {
@@ -432,56 +433,82 @@ main { max-width: 760px; margin: 0 auto; padding: 40px 16px 56px; }
 h1 { font-size: 1.6rem; margin: 0 0 8px; }
 p { margin: 0 0 16px; color: var(--muted); }
 .row { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
-.label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
 .cmd { display: flex; gap: 10px; align-items: flex-start; }
 code { flex: 1; font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; word-break: break-all; white-space: pre-wrap; }
 button { flex: none; font: inherit; font-size: .9rem; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; }
 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .warn { color: var(--warn); font-weight: 600; }
 .small { font-size: .85rem; }
+#plist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
+#plist button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
 a { color: var(--accent); }
 </style></head>
 <body><main>
 <h1>Connect to a shared Chrome</h1>
 <p>Someone shared a Chrome profile with you through <a href="https://github.com/snomiao/rechrome">rechrome</a>.
-On your computer, inside the project folder that should use it, run:</p>
+On your computer, inside the project folder that should use it, run these two lines
+(the same in macOS/Linux terminals, PowerShell and cmd):</p>
 <p id="nokey" class="warn" hidden>This link is missing its key (the part after #key=). Ask for the full link from <code>rech share</code>.</p>
 <div id="cmds"></div>
+<div id="profiles" hidden><p>Profiles this link can use (pick one to make it the default in the command above):</p><div id="plist"></div></div>
 <p class="small">Needs <a href="https://bun.sh">Bun</a>. Then try <code>rechrome open https://example.com</code>.
 This link contains a secret key: anyone with it can use this browser profile, so share it privately.</p>
 </main>
 <script>
 (() => {
-  const url = location.href;
+  let url = location.href;
+  const key = (location.hash.match(/[#&]key=([^&]*)/) || [])[1];
   if (!/[#&?]key=/.test(location.hash)) document.getElementById("nokey").hidden = false;
-  const posix = s => "'" + s.replace(/'/g, "'\\\\''") + "'";
-  const pwsh = s => '"' + s.replace(/[\`"$]/g, c => "\`" + c) + '"';
-  const cmd = s => '"' + s.replace(/"/g, "%22") + '"';
-  const shells = [
-    ["macOS / Linux", "bun i -g rechrome && rechrome connect " + posix(url)],
-    ["Windows PowerShell", "bun i -g rechrome; rechrome connect " + pwsh(url)],
-    ["Windows cmd", "bun i -g rechrome && rechrome connect " + cmd(url)],
-  ];
-  const mask = s => s.replace(/(key=)[^&"'\`]+/, "$1…");
+  // One command for every shell: two lines (no && vs ; split), one double-quoted URL. Characters a
+  // shell expands inside double quotes ($ \` " \\ !) are percent-encoded, which the URL reads the same;
+  // %40 goes back to a readable @ (valid in a query, and one less % for cmd to try to expand).
+  const quote = s => '"' + s.replace(/%40/g, "@").replace(/[$\`"\\\\!]/g, c => "%" + c.charCodeAt(0).toString(16).toUpperCase()) + '"';
+  const build = u => "bun i -g rechrome\\nrechrome connect " + quote(u);
+  const mask = s => s.replace(/(key=)[^&"\\n]+/, "$1…");
   const root = document.getElementById("cmds");
-  for (const [label, text] of shells) {
-    const row = document.createElement("div"); row.className = "row";
-    const name = document.createElement("div"); name.className = "label"; name.textContent = label;
-    const line = document.createElement("div"); line.className = "cmd";
-    const code = document.createElement("code"); code.textContent = mask(text);
-    const button = document.createElement("button"); button.type = "button"; button.textContent = "Copy";
-    button.setAttribute("aria-label", "Copy the " + label + " command");
-    button.addEventListener("click", async () => {
-      try { await navigator.clipboard.writeText(text); }
-      catch {
-        // Plain-HTTP pages (e.g. a LAN address) have no clipboard API: copy via a hidden textarea.
-        const area = document.createElement("textarea"); area.value = text; document.body.append(area);
-        area.select(); document.execCommand("copy"); area.remove();
+  const row = document.createElement("div"); row.className = "row";
+  const line = document.createElement("div"); line.className = "cmd";
+  const code = document.createElement("code");
+  const entry = { text: "", update() { this.text = build(url); code.textContent = mask(this.text); } };
+  entry.update();
+  const button = document.createElement("button"); button.type = "button"; button.textContent = "Copy";
+  button.setAttribute("aria-label", "Copy the commands");
+  button.addEventListener("click", async () => {
+    const text = entry.text;
+    try { await navigator.clipboard.writeText(text); }
+    catch {
+      // Plain-HTTP pages (e.g. a LAN address) have no clipboard API: copy via a hidden textarea.
+      const area = document.createElement("textarea"); area.value = text; document.body.append(area);
+      area.select(); document.execCommand("copy"); area.remove();
+    }
+    button.textContent = "Copied"; setTimeout(() => { button.textContent = "Copy"; }, 1500);
+  });
+  line.append(code, button); row.append(line); root.append(row);
+  // The key never leaves the browser except to this listener's own /ping, which lists what it
+  // allows. Picking a profile only rewrites ?profile= in the command (the key works for all).
+  if (!key || typeof fetch !== "function") return;
+  const path = location.href.split("#")[0].split("?")[0], base = path.endsWith("/") ? path : path + "/";
+  fetch(base + "ping", { headers: { Authorization: "Bearer " + decodeURIComponent(key) } })
+    .then(r => r.ok ? r.json() : null)
+    .then(body => {
+      const profiles = body && Array.isArray(body.profiles) ? body.profiles : [];
+      if (!profiles.length) return;
+      const list = document.getElementById("plist"), buttons = [];
+      const select = p => {
+        const u = new URL(url); u.searchParams.set("profile", p); url = u.href;
+        for (const b of buttons) b.setAttribute("aria-pressed", String(b.textContent === p));
+        entry.update();
+      };
+      const current = new URL(url).searchParams.get("profile");
+      for (const p of profiles) {
+        const b = document.createElement("button"); b.type = "button"; b.textContent = p;
+        b.setAttribute("aria-pressed", String(p === current));
+        b.addEventListener("click", async () => select(p));
+        buttons.push(b); list.append(b);
       }
-      button.textContent = "Copied"; setTimeout(() => { button.textContent = "Copy"; }, 1500);
-    });
-    line.append(code, button); row.append(name, line); root.append(row);
-  }
+      document.getElementById("profiles").hidden = false;
+    })
+    .catch(() => {});
 })();
 </script>
 </body></html>
@@ -1015,4 +1042,19 @@ export async function serve() {
     } finally { reloading = false; }
   }, 1000);
   log("Connection credentials remain in local configuration; listener changes reload automatically");
+  // Keep Tailscale Serve routes on the listeners' current ports: right away, after every listener
+  // change, and every few minutes (routes can be edited by hand). Each finding is logged once.
+  let checkedFor = "", lastReport = "", lastCheck = 0, checking = false;
+  setInterval(async () => {
+    if (checking || (applied === checkedFor && Date.now() - lastCheck < 5 * 60_000)) return;
+    checking = true;
+    try {
+      const listeners = JSON.parse(applied || "[]") as Listener[];
+      const lines = await checkTailscaleServe(listeners);
+      const report = lines.join("\n");
+      if (report && report !== lastReport) for (const line of lines) log(line);
+      lastReport = report; checkedFor = applied; lastCheck = Date.now();
+    } catch (error) { log(`tailscale serve health check failed: ${error}`); }
+    finally { checking = false; }
+  }, 2000);
 }

package/serve.ts

@@ -17,6 +17,7 @@ import {
   resolvePlaywrightCli,
   readTokenRegistry,
   readChromeProfileCache,
+  checkTailscaleServe,
 } from "./rechrome.ts";
 
 const TAILSCALE_BIN = process.env.TAILSCALE_BIN || "/Applications/Tailscale.app/Contents/MacOS/Tailscale";
@@ -411,12 +412,12 @@ export const LANDING_HEADERS = {
   "Cache-Control": "no-store",
   "Referrer-Policy": "no-referrer",
   "X-Content-Type-Options": "nosniff",
-  "Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'",
+  "Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; connect-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'",
 };
 
 /**
- * The page a shared connection URL shows in a browser: install-and-connect commands to copy,
- * one per shell. It is static; the script reads the full URL (with its #key) from the address
+ * The page a shared connection URL shows in a browser: two install-and-connect lines to copy,
+ * identical for every shell. It is static; the script reads the full URL (with its #key) from the address
  * bar, shows it with the key masked, and copies it whole.
  */
 export function landingPage(): string {
@@ -432,56 +433,82 @@ main { max-width: 760px; margin: 0 auto; padding: 40px 16px 56px; }
 h1 { font-size: 1.6rem; margin: 0 0 8px; }
 p { margin: 0 0 16px; color: var(--muted); }
 .row { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
-.label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
 .cmd { display: flex; gap: 10px; align-items: flex-start; }
 code { flex: 1; font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; word-break: break-all; white-space: pre-wrap; }
 button { flex: none; font: inherit; font-size: .9rem; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; }
 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .warn { color: var(--warn); font-weight: 600; }
 .small { font-size: .85rem; }
+#plist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
+#plist button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
 a { color: var(--accent); }
 </style></head>
 <body><main>
 <h1>Connect to a shared Chrome</h1>
 <p>Someone shared a Chrome profile with you through <a href="https://github.com/snomiao/rechrome">rechrome</a>.
-On your computer, inside the project folder that should use it, run:</p>
+On your computer, inside the project folder that should use it, run these two lines
+(the same in macOS/Linux terminals, PowerShell and cmd):</p>
 <p id="nokey" class="warn" hidden>This link is missing its key (the part after #key=). Ask for the full link from <code>rech share</code>.</p>
 <div id="cmds"></div>
+<div id="profiles" hidden><p>Profiles this link can use (pick one to make it the default in the command above):</p><div id="plist"></div></div>
 <p class="small">Needs <a href="https://bun.sh">Bun</a>. Then try <code>rechrome open https://example.com</code>.
 This link contains a secret key: anyone with it can use this browser profile, so share it privately.</p>
 </main>
 <script>
 (() => {
-  const url = location.href;
+  let url = location.href;
+  const key = (location.hash.match(/[#&]key=([^&]*)/) || [])[1];
   if (!/[#&?]key=/.test(location.hash)) document.getElementById("nokey").hidden = false;
-  const posix = s => "'" + s.replace(/'/g, "'\\\\''") + "'";
-  const pwsh = s => '"' + s.replace(/[\`"$]/g, c => "\`" + c) + '"';
-  const cmd = s => '"' + s.replace(/"/g, "%22") + '"';
-  const shells = [
-    ["macOS / Linux", "bun i -g rechrome && rechrome connect " + posix(url)],
-    ["Windows PowerShell", "bun i -g rechrome; rechrome connect " + pwsh(url)],
-    ["Windows cmd", "bun i -g rechrome && rechrome connect " + cmd(url)],
-  ];
-  const mask = s => s.replace(/(key=)[^&"'\`]+/, "$1…");
+  // One command for every shell: two lines (no && vs ; split), one double-quoted URL. Characters a
+  // shell expands inside double quotes ($ \` " \\ !) are percent-encoded, which the URL reads the same;
+  // %40 goes back to a readable @ (valid in a query, and one less % for cmd to try to expand).
+  const quote = s => '"' + s.replace(/%40/g, "@").replace(/[$\`"\\\\!]/g, c => "%" + c.charCodeAt(0).toString(16).toUpperCase()) + '"';
+  const build = u => "bun i -g rechrome\\nrechrome connect " + quote(u);
+  const mask = s => s.replace(/(key=)[^&"\\n]+/, "$1…");
   const root = document.getElementById("cmds");
-  for (const [label, text] of shells) {
-    const row = document.createElement("div"); row.className = "row";
-    const name = document.createElement("div"); name.className = "label"; name.textContent = label;
-    const line = document.createElement("div"); line.className = "cmd";
-    const code = document.createElement("code"); code.textContent = mask(text);
-    const button = document.createElement("button"); button.type = "button"; button.textContent = "Copy";
-    button.setAttribute("aria-label", "Copy the " + label + " command");
-    button.addEventListener("click", async () => {
-      try { await navigator.clipboard.writeText(text); }
-      catch {
-        // Plain-HTTP pages (e.g. a LAN address) have no clipboard API: copy via a hidden textarea.
-        const area = document.createElement("textarea"); area.value = text; document.body.append(area);
-        area.select(); document.execCommand("copy"); area.remove();
+  const row = document.createElement("div"); row.className = "row";
+  const line = document.createElement("div"); line.className = "cmd";
+  const code = document.createElement("code");
+  const entry = { text: "", update() { this.text = build(url); code.textContent = mask(this.text); } };
+  entry.update();
+  const button = document.createElement("button"); button.type = "button"; button.textContent = "Copy";
+  button.setAttribute("aria-label", "Copy the commands");
+  button.addEventListener("click", async () => {
+    const text = entry.text;
+    try { await navigator.clipboard.writeText(text); }
+    catch {
+      // Plain-HTTP pages (e.g. a LAN address) have no clipboard API: copy via a hidden textarea.
+      const area = document.createElement("textarea"); area.value = text; document.body.append(area);
+      area.select(); document.execCommand("copy"); area.remove();
+    }
+    button.textContent = "Copied"; setTimeout(() => { button.textContent = "Copy"; }, 1500);
+  });
+  line.append(code, button); row.append(line); root.append(row);
+  // The key never leaves the browser except to this listener's own /ping, which lists what it
+  // allows. Picking a profile only rewrites ?profile= in the command (the key works for all).
+  if (!key || typeof fetch !== "function") return;
+  const path = location.href.split("#")[0].split("?")[0], base = path.endsWith("/") ? path : path + "/";
+  fetch(base + "ping", { headers: { Authorization: "Bearer " + decodeURIComponent(key) } })
+    .then(r => r.ok ? r.json() : null)
+    .then(body => {
+      const profiles = body && Array.isArray(body.profiles) ? body.profiles : [];
+      if (!profiles.length) return;
+      const list = document.getElementById("plist"), buttons = [];
+      const select = p => {
+        const u = new URL(url); u.searchParams.set("profile", p); url = u.href;
+        for (const b of buttons) b.setAttribute("aria-pressed", String(b.textContent === p));
+        entry.update();
+      };
+      const current = new URL(url).searchParams.get("profile");
+      for (const p of profiles) {
+        const b = document.createElement("button"); b.type = "button"; b.textContent = p;
+        b.setAttribute("aria-pressed", String(p === current));
+        b.addEventListener("click", async () => select(p));
+        buttons.push(b); list.append(b);
       }
-      button.textContent = "Copied"; setTimeout(() => { button.textContent = "Copy"; }, 1500);
-    });
-    line.append(code, button); row.append(name, line); root.append(row);
-  }
+      document.getElementById("profiles").hidden = false;
+    })
+    .catch(() => {});
 })();
 </script>
 </body></html>
@@ -1015,4 +1042,19 @@ export async function serve() {
     } finally { reloading = false; }
   }, 1000);
   log("Connection credentials remain in local configuration; listener changes reload automatically");
+  // Keep Tailscale Serve routes on the listeners' current ports: right away, after every listener
+  // change, and every few minutes (routes can be edited by hand). Each finding is logged once.
+  let checkedFor = "", lastReport = "", lastCheck = 0, checking = false;
+  setInterval(async () => {
+    if (checking || (applied === checkedFor && Date.now() - lastCheck < 5 * 60_000)) return;
+    checking = true;
+    try {
+      const listeners = JSON.parse(applied || "[]") as Listener[];
+      const lines = await checkTailscaleServe(listeners);
+      const report = lines.join("\n");
+      if (report && report !== lastReport) for (const line of lines) log(line);
+      lastReport = report; checkedFor = applied; lastCheck = Date.now();
+    } catch (error) { log(`tailscale serve health check failed: ${error}`); }
+    finally { checking = false; }
+  }, 2000);
 }