rechrome 1.31.8 → 1.32.0

package/package.json

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

package/rechrome.js

@@ -1240,14 +1240,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
@@ -1427,6 +1441,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 +1471,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 +1528,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) {
@@ -2819,8 +2879,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

@@ -1240,14 +1240,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
@@ -1427,6 +1441,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 +1471,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 +1528,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) {
@@ -2819,8 +2879,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

@@ -411,12 +411,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 +432,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>

package/serve.ts

@@ -411,12 +411,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 +432,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>