page-harness 0.1.3 → 0.1.4

package/dist/cli.js

@@ -2239,7 +2239,97 @@ function techOf(item) {
 function style(item) {
   return item.patch?.style ?? {};
 }
-function targetWords(item) {
+function imageCopyEn(item) {
+  const s = style(item);
+  const blob = Object.values(s).join(" ");
+  const white = /#fff\b|#ffffff|white|rgb\(\s*255\s*,\s*255\s*,\s*255/i.test(blob);
+  const border = !!(s.border || s["border-width"] || s["border-style"] || s["border-color"]);
+  const rot = /rotate\(\s*(-?[\d.]+)\s*deg/i.exec(s.transform || blob);
+  const deg = rot ? Number(rot[1]) : 0;
+  const shadow = !!s["box-shadow"];
+  const bits = [];
+  if (border) bits.push(white ? "a white border" : "a border");
+  if (rot && deg < -0.2) bits.push("a slight tilt left");
+  else if (rot && deg > 0.2) bits.push("a slight tilt right");
+  if (shadow) bits.push("a shadow");
+  const polaroid = white && border && !!rot && shadow;
+  const say = bits.length ? `This photo now has ${bits.join(", ")}${polaroid ? ", like a polaroid on a desk" : ""}.` : "This photo looks different. Before and after are below.";
+  let title = "Photo appearance changed";
+  if (polaroid) title = "Photo tilted like a polaroid";
+  else if (white && border && rot) title = "Photo has a white border and a tilt";
+  else if (bits[0]) title = `Photo has ${bits[0]}`;
+  return { title, say };
+}
+function textCopyEn(item) {
+  const before = item.anchor?.text?.trim();
+  const after = item.patch?.text?.trim();
+  const s = style(item);
+  const italic = s["font-style"] === "italic";
+  const bangGone = !!before?.endsWith("!") && !!after && !after.endsWith("!");
+  const what = isHeading(item) ? "The heading" : "This text";
+  const parts = [];
+  if (before && after && before !== after) parts.push(`changed from \u201C${clip2(before, 80)}\u201D to \u201C${clip2(after, 80)}\u201D`);
+  else if (after) parts.push(`changed to \u201C${clip2(after, 80)}\u201D`);
+  if (italic) parts.push(parts.length ? "and is now italic" : "is now italic");
+  if (bangGone) parts.push("and the exclamation mark is gone");
+  if (!parts.length) return genericCopyEn(item);
+  const title = italic && bangGone ? `${what} is italic, without the exclamation mark` : italic ? `${what} is italic` : bangGone ? `${what} lost its exclamation mark` : what === "The heading" ? "Heading text changed" : "Text changed";
+  return { title, say: `${what} ${parts.join(", ")}.` };
+}
+function rampCopyEn(members) {
+  const books = bookish(members);
+  const noun = books ? "bibliography" : "list";
+  const rows = members.map((i) => {
+    const n = Number(/nth-(?:child|of-type)\((\d+)\)/i.exec(i.selector)?.[1] ?? NaN);
+    const s = style(i);
+    return { n, px: px(s["font-size"]), border: !!(s["border-bottom"] || s["border-bottom-width"]), bold: Number(s["font-weight"]) >= 600 || /bold/i.test(s["font-weight"] || "") };
+  }).filter((r) => !Number.isNaN(r.n) && !Number.isNaN(r.px)).sort((a, b) => a.n - b.n);
+  let decreasing = rows.length ? 1 : 0;
+  for (let i = 1; i < rows.length; i++) {
+    if (rows[i].px < rows[i - 1].px - 0.5) decreasing = i + 1;
+    else break;
+  }
+  const lined = rows.find((r) => r.border);
+  const cut = lined ? rows.indexOf(lined) + 1 : decreasing;
+  const restBold = rows.slice(cut).some((r) => r.bold);
+  const ul = members.find((m) => listRootSelector(m.selector) === norm(m.selector));
+  const bullets = /none/i.test(style(ul ?? members[0])["list-style"] || style(ul ?? members[0])["list-style-type"] || "");
+  const bits = [`The ${noun} ${bullets ? "is no longer a same-size bulleted list" : "uses a new type scale"}`];
+  if (cut >= 2) bits.push(`the first ${cut} items step down in size`);
+  if (lined) bits.push(`item ${lined.n} has a line under it`);
+  if (restBold) bits.push("the later items are the same bold size");
+  const title = cut >= 2 ? `${noun[0].toUpperCase()}${noun.slice(1)} steps down in size` : `${noun[0].toUpperCase()}${noun.slice(1)} appearance changed`;
+  return { title, say: `${bits.join(", ")}.` };
+}
+function genericCopyEn(item) {
+  const s = style(item);
+  const bits = [];
+  if (s["font-style"] === "italic") bits.push("is italic");
+  if (Number(s["font-weight"]) >= 600 || /bold/i.test(s["font-weight"] || "")) bits.push("is bold");
+  if (s["font-size"]) bits.push(`size is ${s["font-size"]}`);
+  if (s["font-family"]) bits.push("uses a different font");
+  if (s.color) bits.push("text color changed");
+  if (s["background-color"] || s.background) bits.push("background changed");
+  if (s["border-radius"]) bits.push("corners changed");
+  if (s.border || s["border-color"]) bits.push("border changed");
+  if (s["text-decoration"] || s["text-decoration-line"]) bits.push("text decoration changed");
+  if (s.opacity) bits.push("opacity changed");
+  const where = targetWordsEn(item);
+  if (!bits.length) return { title: "Appearance changed", say: `${where} looks different. Before and after are below.` };
+  return { title: "Appearance changed", say: `${where} ${bits.join(", ")}.` };
+}
+function targetWordsEn(item) {
+  const text = item.anchor?.text?.trim();
+  if (text) return `\u201C${clip2(text, 42)}\u201D`;
+  const tag = (item.anchor?.tag || "").toLowerCase();
+  if (tag === "img" || /(?:^|[\s>+~])img(?![a-z-])/i.test(item.selector)) return "this photo";
+  if (/^h[1-6]$/.test(tag) || /(?:^|[\s>+~])h[1-6](?![a-z-])/i.test(item.selector)) return "this heading";
+  const label = item.label?.replace(/^[a-z0-9-]+\s*/i, "").replace(/^"|"$/g, "").trim();
+  if (label) return `\u201C${clip2(label, 42)}\u201D`;
+  return "this part of the page";
+}
+function targetWords(item, lang = "zh-CN") {
+  if (lang === "en") return targetWordsEn(item);
   const text = item.anchor?.text?.trim();
   if (text) return `\u300C${clip2(text, 42)}\u300D\u8FD9\u4E00\u5757`;
   const tag = (item.anchor?.tag || "").toLowerCase();
@@ -2259,7 +2349,8 @@ function bookish(items) {
   const blob = items.map((i) => `${i.anchor?.text ?? ""} ${i.label ?? ""} ${i.note ?? ""}`).join(" ");
   return /书目|书单|bibliography|\bC\+\+|Tour of|Programming:/i.test(blob);
 }
-function imageCopy(item) {
+function imageCopy(item, lang = "zh-CN") {
+  if (lang === "en") return imageCopyEn(item);
   const s = style(item);
   const blob = Object.values(s).join(" ");
   const white = /#fff\b|#ffffff|white|rgb\(\s*255\s*,\s*255\s*,\s*255/i.test(blob);
@@ -2280,7 +2371,8 @@ function imageCopy(item) {
   else if (bits[0]) title = `\u7167\u7247${bits[0]}`;
   return { title, say };
 }
-function textCopy(item) {
+function textCopy(item, lang = "zh-CN") {
+  if (lang === "en") return textCopyEn(item);
   const before = item.anchor?.text?.trim();
   const after = item.patch?.text?.trim();
   const s = style(item);
@@ -2303,7 +2395,8 @@ function px(value) {
   const n = parseFloat(value);
   return Number.isFinite(n) ? n : NaN;
 }
-function rampCopy(members) {
+function rampCopy(members, lang = "zh-CN") {
+  if (lang === "en") return rampCopyEn(members);
   const books = bookish(members);
   const noun = books ? "\u4E66\u76EE" : "\u5217\u8868";
   const rows = members.map((i) => {
@@ -2328,7 +2421,8 @@ function rampCopy(members) {
   const title = cut >= 2 ? `${noun}\u6539\u6210\u7531\u5927\u5230\u5C0F\u7684\u5B57\u53F7\u9636\u68AF` : `${noun}\u7684\u5916\u89C2\u6539\u4E86`;
   return { title, say: `${bits.join("\uFF0C")}\u3002` };
 }
-function genericCopy(item) {
+function genericCopy(item, lang = "zh-CN") {
+  if (lang === "en") return genericCopyEn(item);
   const s = style(item);
   const bits = [];
   if (s["font-style"] === "italic") bits.push("\u6539\u6210\u4E86\u659C\u4F53");
@@ -2341,31 +2435,31 @@ function genericCopy(item) {
   if (s.border || s["border-color"]) bits.push("\u8FB9\u6846\u6539\u4E86");
   if (s["text-decoration"] || s["text-decoration-line"]) bits.push("\u6587\u5B57\u88C5\u9970\u6539\u4E86");
   if (s.opacity) bits.push("\u900F\u660E\u5EA6\u6539\u4E86");
-  const where = targetWords(item);
+  const where = targetWords(item, "zh-CN");
   if (!bits.length) return { title: "\u8FD9\u4E00\u5757\u7684\u5916\u89C2\u6539\u4E86", say: `${where}\u7684\u5916\u89C2\u6539\u4E86\uFF0C\u5DEE\u522B\u770B\u4E0B\u9762\u7684\u6539\u524D\u548C\u6539\u540E\u3002` };
   return { title: "\u8FD9\u4E00\u5757\u7684\u5916\u89C2\u6539\u4E86", say: `${where}${bits.join("\uFF0C")}\u3002` };
 }
-function noteCopy(item) {
+function noteCopy(item, lang = "zh-CN") {
   const note = item.note.trim();
-  const line = note.split(/[。.!！?\n]/)[0]?.trim() || "\u6587\u5B57\u610F\u89C1";
+  const line = note.split(/[。.!！?\n]/)[0]?.trim() || (lang === "en" ? "Note" : "\u6587\u5B57\u610F\u89C1");
   return {
     title: clip2(line, 36),
     say: note,
-    where: `\u5173\u4E8E${targetWords(item)}`
+    where: lang === "en" ? `About ${targetWords(item, "en")}` : `\u5173\u4E8E${targetWords(item, "zh-CN")}`
   };
 }
-function copyFor(members, ramp) {
-  if (ramp) return rampCopy(members);
+function copyFor(members, ramp, lang = "zh-CN") {
+  if (ramp) return rampCopy(members, lang);
   const item = members[0];
-  if (!item || item.kind === "note") return noteCopy(item);
-  if (item.patch?.text !== void 0) return textCopy(item);
-  if (isImage(item)) return imageCopy(item);
-  return genericCopy(item);
+  if (!item || item.kind === "note") return noteCopy(item, lang);
+  if (item.patch?.text !== void 0) return textCopy(item, lang);
+  if (isImage(item)) return imageCopy(item, lang);
+  return genericCopy(item, lang);
 }
-function entryFrom(members, extras, ramp) {
+function entryFrom(members, extras, ramp, lang = "zh-CN") {
   const root = ramp ? listRootSelector(members[0].selector) : null;
   const primary = ramp ? members.find((m) => norm(m.selector) === root) ?? [...members].sort((a, b) => a.selector.length - b.selector.length || a.n - b.n)[0] : members[0];
-  const copy = copyFor(members, ramp);
+  const copy = copyFor(members, ramp, lang);
   const ordered = [...members].sort((a, b) => a.n - b.n);
   const lines = [...ordered, ...extras].map(techOf);
   return {
@@ -2394,7 +2488,7 @@ function rampGroups(patches) {
   }
   return [...buckets.values()].filter((g) => g.length >= 2);
 }
-function readerEntries(items) {
+function readerEntries(items, lang = "zh-CN") {
   const paths = [...new Set(items.map((i) => i.path))];
   const out = [];
   for (const path18 of paths) {
@@ -2408,9 +2502,9 @@ function readerEntries(items) {
     const extras = rest.filter((i) => folded.has(i.id));
     const singles = rest.filter((i) => !folded.has(i.id));
     const built = [
-      ...notes.map((i) => entryFrom([i], [], false)),
-      ...ramps.map((g) => entryFrom(g, extras.filter((e) => g.some((m) => isAncestorSelector(e.selector, m.selector))), true)),
-      ...singles.map((i) => entryFrom([i], extras.filter((e) => isAncestorSelector(e.selector, i.selector)), false))
+      ...notes.map((i) => entryFrom([i], [], false, lang)),
+      ...ramps.map((g) => entryFrom(g, extras.filter((e) => g.some((m) => isAncestorSelector(e.selector, m.selector))), true, lang)),
+      ...singles.map((i) => entryFrom([i], extras.filter((e) => isAncestorSelector(e.selector, i.selector)), false, lang))
     ];
     out.push(...built);
   }
@@ -2431,9 +2525,13 @@ function mdImage(label, src) {
   if (!src) return [];
   return [`**${label}**`, "", `![${label}](${src})`, ""];
 }
-function reviewMarkdown(target, items, approvals) {
-  const entries = readerEntries(items);
+function reviewMarkdown(target, items, approvals, lang = "zh-CN") {
+  const entries = readerEntries(items, lang);
+  const before = lang === "en" ? "Before" : "\u6539\u524D";
+  const after = lang === "en" ? "After" : "\u6539\u540E";
+  const details = lang === "en" ? "Selector and style" : "\u9009\u62E9\u5668\u548C\u6837\u5F0F";
   const open = entries.filter((e) => e.status === "open").length;
+  const who = (name) => name === "\u533F\u540D" || name === "Anonymous" ? lang === "en" ? "Anonymous" : "\u533F\u540D" : name;
   const lines = [`# Page review`, "", `Site: ${target}`, `Items: ${entries.length} (${open} open)`, ""];
   const paths = [.../* @__PURE__ */ new Set([...entries.map((e) => e.path), ...approvals.map((a) => a.path)])];
   for (const p of paths) {
@@ -2447,15 +2545,15 @@ function reviewMarkdown(target, items, approvals) {
       for (const note of authorNotes(e)) lines.push(note, "");
       const look = e.primary.look;
       if (e.kind === "patch") {
-        lines.push(...mdImage("\u6539\u524D", look?.beforePage ?? look?.beforeImage), ...mdImage("\u6539\u540E", look?.afterPage ?? look?.afterImage));
+        lines.push(...mdImage(before, look?.beforePage ?? look?.beforeImage), ...mdImage(after, look?.afterPage ?? look?.afterImage));
         if (!look?.beforeImage && !look?.afterImage && !look?.beforePage && !look?.afterPage) {
           const text = e.lines.find((l) => l.text);
-          if (text?.text) lines.push(`\u6539\u524D \u2192 \u6539\u540E\uFF1A${text.text}`, "");
+          if (text?.text) lines.push(lang === "en" ? `${before} \u2192 ${after}: ${text.text}` : `${before} \u2192 ${after}\uFF1A${text.text}`, "");
         }
       }
-      lines.push(`By ${e.authorName}`, "");
+      lines.push(`By ${who(e.authorName)}`, "");
       if (e.lines.length) {
-        lines.push("<details>", "<summary>\u9009\u62E9\u5668\u548C\u6837\u5F0F</summary>", "");
+        lines.push("<details>", `<summary>${details}</summary>`, "");
         for (const line of e.lines) {
           lines.push(`- \`${line.selector}\``);
           if (line.css) lines.push(`  - CSS: \`${line.css}\``);
@@ -2465,7 +2563,7 @@ function reviewMarkdown(target, items, approvals) {
         lines.push("", "</details>", "");
       }
       const replies = e.members.flatMap((m) => m.replies);
-      for (const r of replies) lines.push(`- ${r.author.name}: ${r.text.replace(/\n/g, " ")}`);
+      for (const r of replies) lines.push(`- ${who(r.author.name)}: ${r.text.replace(/\n/g, " ")}`);
       if (replies.length) lines.push("");
     }
   }
@@ -2997,10 +3095,76 @@ function packageVersion() {
   }
   return "0.0.0";
 }
+var BM = "\u2726 Page-Harness";
+var CMD = "page-harness <url> --no-agent";
+var HOME_COPY = {
+  en: {
+    title: "Drag to your bookmarks bar",
+    sub: "Click it on any page to start marking.",
+    mine: "My notes ({n})",
+    back: "\u2190 Home",
+    bar: "Bookmarks",
+    docs: "Docs",
+    gh: "GitHub",
+    trouble: "Having trouble?",
+    helpTitle: "Bookmark did nothing?",
+    help: [
+      [
+        { k: "t", v: "HTTPS pages can block requests to 127.0.0.1 on this machine. Use " },
+        { k: "c", v: CMD },
+        { k: "t", v: " and the proxy will carry them." }
+      ],
+      [{ k: "t", v: "Some sites set a CSP, which stops the page from reaching this machine." }],
+      [{ k: "t", v: "The bookmark only works for this run. Drag it again after a restart." }]
+    ],
+    md: "Export Markdown",
+    json: "Export JSON",
+    copy: "Copy prompt",
+    copied: "Copied",
+    empty: "No notes for this site yet.",
+    none: "No notes yet.",
+    ungrouped: "(ungrouped)"
+  },
+  "zh-CN": {
+    title: "\u62D6\u5230\u4E66\u7B7E\u680F\uFF0C\u5C31\u80FD\u7528",
+    sub: "\u5728\u4EFB\u4F55\u7F51\u9875\u4E0A\u70B9\u4E00\u4E0B\uFF0C\u5C31\u80FD\u76F4\u63A5\u6807\u8BB0\u3002",
+    mine: "\u6211\u7684\u6807\u8BB0 ({n})",
+    back: "\u2190 \u9996\u9875",
+    bar: "\u4E66\u7B7E\u680F",
+    docs: "\u6587\u6863",
+    gh: "GitHub",
+    trouble: "\u9047\u5230\u95EE\u9898\uFF1F",
+    helpTitle: "\u70B9\u4E86\u4E66\u7B7E\u6CA1\u53CD\u5E94\uFF1F",
+    help: [
+      [
+        { k: "t", v: "HTTPS \u7F51\u9875\u53EF\u80FD\u4F1A\u62E6\u4E0B\u53D1\u5F80\u672C\u673A 127.0.0.1 \u7684\u8BF7\u6C42\uFF0C\u6362\u7528 " },
+        { k: "c", v: CMD },
+        { k: "t", v: " \u8D70\u4EE3\u7406\u5C31\u884C\u3002" }
+      ],
+      [{ k: "t", v: "\u6709\u7684\u7F51\u7AD9\u8BBE\u4E86 CSP\uFF0C\u4F1A\u7981\u6B62\u9875\u9762\u8FDE\u672C\u673A\u3002" }],
+      [{ k: "t", v: "\u4E66\u7B7E\u53EA\u5728\u8FD9\u6B21\u542F\u52A8\u671F\u95F4\u6709\u6548\uFF0C\u91CD\u65B0\u542F\u52A8\u540E\u8981\u518D\u62D6\u4E00\u6B21\u3002" }]
+    ],
+    md: "\u5BFC\u51FA Markdown",
+    json: "\u5BFC\u51FA JSON",
+    copy: "\u590D\u5236 Prompt",
+    copied: "\u5DF2\u590D\u5236",
+    empty: "\u8FD9\u4E2A\u7F51\u7AD9\u8FD8\u6CA1\u6709\u6807\u8BB0\u3002",
+    none: "\u8FD8\u6CA1\u6709\u6807\u8BB0\u3002",
+    ungrouped: "\uFF08\u672A\u5206\u7EC4\uFF09"
+  }
+};
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function helpInner(lines) {
+  return lines.map((line) => `<p>\xB7 ${line.map((bit) => bit.k === "c" ? `<code>${esc(bit.v)}</code>` : esc(bit.v)).join("")}</p>`).join("");
+}
 function homeHtml(boot) {
   const json2 = JSON.stringify(boot).replace(/</g, "\\u003c");
+  const t = HOME_COPY[boot.lang ?? "en"];
+  const htmlLang = boot.lang ?? "en";
   return `<!doctype html>
-<html lang="en">
+<html lang="${htmlLang}">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -3008,35 +3172,42 @@ function homeHtml(boot) {
   <link rel="stylesheet" href="/__ph/home.css">
 </head>
 <body>
-  <div class="app">
-    <aside>
-      <div class="brand"><i></i><span>page-harness</span><span class="tag" id="tag">Review only \xB7 no agent</span></div>
-      <section class="card">
-        <b id="step">Drag the button to the bookmarks bar</b>
-        <p class="lead" id="lead">Open any site and click the bookmark. The dock is Pick and Notes only.</p>
-        <p class="drag"><a class="bm" id="bm" href="#" draggable="true">PH Review</a></p>
-        <div class="cdn"><span id="src-label">Source</span>
-          <select id="src" data-testid="bookmarklet-source">
-            <option value="local">local</option>
-            <option value="cdn">jsDelivr CDN</option>
-          </select>
+  <div class="top">
+    <div class="brand"><i></i><span>page-harness</span></div>
+    <a class="navl" id="tonotes" href="#notes">${esc(t.mine.replace("{n}", "0"))}</a>
+  </div>
+  <div class="view on" id="home">
+    <div class="hero">
+      <div class="bar" id="bar"><span id="bar-label">${esc(t.bar)}</span><span class="chip" id="chip-docs">${esc(t.docs)}</span><span class="chip" id="chip-gh">${esc(t.gh)}</span></div>
+      <div class="copy">
+        <h1 id="hero-title">${esc(t.title)}</h1>
+        <p class="sub" id="hero-sub">${esc(t.sub)}</p>
+      </div>
+      <a class="bm" id="bm" href="#" draggable="true">${BM}</a>
+    </div>
+    <button type="button" class="help" id="help">${esc(t.trouble)}</button>
+  </div>
+  <div class="view" id="notes">
+    <div class="notes">
+      <div class="side" id="doms"></div>
+      <section class="main">
+        <div class="mh">
+          <h2 id="host-title"></h2>
+          <span class="actions">
+            <button type="button" class="sb" id="exmd" data-testid="export-md">${esc(t.md)}</button>
+            <button type="button" class="sb" id="exjson" data-testid="export-json">${esc(t.json)}</button>
+            <button type="button" class="sb p" id="cp" data-testid="copy-prompt">${esc(t.copy)}</button>
+          </span>
         </div>
-        <p class="limit" id="limit"></p>
+        <div id="list"></div>
       </section>
-      <div class="label" id="by">By site</div>
-      <div id="doms"></div>
-    </aside>
-    <section class="main">
-      <header>
-        <h1 id="title">Pick a site</h1>
-        <span class="actions">
-          <button type="button" class="btn sm" id="exmd" data-testid="export-md">Export Markdown</button>
-          <button type="button" class="btn sm" id="exjson" data-testid="export-json">Export JSON</button>
-          <button type="button" class="btn sm copy" id="cp" data-testid="copy-prompt">Copy prompt</button>
-        </span>
-      </header>
-      <div id="list"></div>
-    </section>
+    </div>
+  </div>
+  <div class="modal" id="modal">
+    <div class="mc" id="modal-card" role="dialog" aria-modal="true" aria-labelledby="help-title">
+      <b id="help-title">${esc(t.helpTitle)}</b>
+      <div id="help-body">${helpInner(t.help)}</div>
+    </div>
   </div>
   <script type="application/json" id="ph-boot">${json2}</script>
   <script src="/__ph/home.js"></script>
@@ -3055,145 +3226,158 @@ ${HOME_FONTS_CSS}
 * { box-sizing: border-box; }
 html, body { height: 100%; margin: 0; }
 body { background: var(--base); color: var(--fg); font: var(--fs)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
-button, select { font: inherit; color: inherit; }
-button { cursor: pointer; }
+button { font: inherit; color: inherit; cursor: pointer; }
 button:disabled { cursor: not-allowed; opacity: .45; }
-button:focus-visible, select:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus); }
-[hidden] { display: none !important; }
-.app { height: 100%; display: grid; grid-template-columns: 320px 1fr; }
-aside { background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
-.brand { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; font-weight: 700; font-size: var(--fs-lg); }
+button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus); }
+.top { position: fixed; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px 28px; }
+.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; }
 .brand i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); transform: rotate(45deg); flex: none; }
-.tag { font-weight: 600; font-size: var(--fs-xs); color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius: 999px; }
-.card { margin: 4px 12px 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shadow-sm); }
-.card b { font-size: var(--fs); }
-.lead { margin: 6px 0 12px; color: var(--fg2); font-size: var(--fs-sm); }
-.drag { margin: 0 0 10px; }
-.bm { display: inline-flex; align-items: center; height: var(--h-lg); padding: 0 14px; border-radius: var(--r); background: var(--accent); color: var(--accent-fg); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-sm); cursor: grab; }
-.bm:hover { background: var(--accent-hover); }
+.navl { color: var(--fg2); text-decoration: none; font-size: 14px; padding: 6px 12px; border-radius: 8px; }
+.navl:hover { background: var(--bg2); color: var(--fg); }
+.navl.back { background: var(--bg); border: 1px solid var(--line); color: var(--fg2); box-shadow: var(--shadow-sm); }
+.view { display: none; }
+.view.on { display: block; }
+.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 80px 24px; text-align: center; background: radial-gradient(600px 300px at 50% 42%, var(--accent-soft), transparent 70%); }
+.bar { width: min(520px, 100%); height: 40px; border-radius: 10px; background: var(--bg); border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--line-strong)); display: flex; align-items: center; padding: 0 12px; gap: 8px; color: var(--fg3); font-size: 13px; }
+.bar.hot { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
+.chip { background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; color: var(--fg); font-size: 13px; line-height: 1.2; }
+.copy { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+.hero h1 { margin: 0; font-size: 30px; letter-spacing: -0.02em; font-weight: 700; line-height: 1.25; }
+.sub { margin: 0; color: var(--fg2); font-size: 15px; }
+.bm { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 12px; background: var(--accent); color: var(--accent-fg); font-weight: 600; font-size: 16px; text-decoration: none; box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); cursor: grab; transition: transform .15s var(--ease); }
+.bm:hover { transform: translateY(-2px); }
 .bm:active { cursor: grabbing; }
-.cdn { display: flex; gap: 8px; align-items: center; color: var(--fg2); font-size: var(--fs-sm); }
-select { height: var(--h); padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--fg); }
-.limit { margin: 10px 0 0; color: var(--fg3); font-size: var(--fs-xs); line-height: 1.5; }
-.label { padding: 8px 14px 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--fg3); }
-#doms { flex: 1; overflow: auto; padding: 4px 8px; display: flex; flex-direction: column; gap: 2px; }
-.dom { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px; border-radius: var(--r); cursor: pointer; }
-.dom:hover { background: var(--bg3); }
-.dom.on { background: var(--accent-soft); }
-.dom .n { flex: none; font-size: var(--fs-xs); color: var(--fg3); }
-.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
-header { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
-h1 { flex: 1; min-width: 0; margin: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
-.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h); padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
-.btn:hover:not(:disabled) { background: var(--bg2); }
-.btn.sm { height: var(--h-sm); padding: 0 8px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
-.btn.copy { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: transparent; color: var(--accent); font-weight: 600; }
-.btn.copy:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 20%, transparent); }
-.btn.copy.on, .btn.copy.on:hover:not(:disabled) { background: var(--ok); border-color: var(--ok); color: #fff; }
-#list { flex: 1; overflow: auto; padding: 8px 12px 24px; }
-.note { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0; padding: 8px; border-radius: var(--r); border-left: 3px solid var(--accent); }
-.note:hover { background: var(--bg2); }
-.note.issue { border-color: var(--err); }
-.note.info { border-color: var(--fg3); }
-.note.patch { border-color: var(--ok); }
-.note.done { opacity: .55; }
-.num { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: var(--fs-xs); line-height: 20px; text-align: center; font-weight: 600; }
-.note.issue .num { background: var(--err); color: #fff; }
-.note.info .num { background: var(--fg2); color: var(--bg); }
-.note.patch .num { background: var(--ok); color: #fff; border-radius: 4px; }
-.say { word-break: break-word; }
-.sel { margin-top: 2px; font: var(--fs-xs)/1.4 var(--mono); color: var(--fg3); word-break: break-word; }
+.help { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); border: 0; background: none; font-size: 13px; color: var(--fg3); padding: 4px 8px; }
+.help:hover { color: var(--fg2); }
+.modal { position: fixed; z-index: 20; inset: 0; background: var(--mask); display: none; align-items: center; justify-content: center; padding: 24px; }
+.modal.on { display: flex; }
+.mc { background: var(--bg); color: var(--fg2); border-radius: 14px; padding: 22px 24px; width: min(440px, 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.13); font-size: 14px; line-height: 1.6; }
+.mc b { display: block; color: var(--fg); margin: 0 0 8px; font-size: 15px; }
+.mc p { margin: 0 0 6px; }
+.mc code { font-family: var(--mono); font-size: 12px; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
+.notes { display: grid; grid-template-columns: 240px 1fr; height: 100vh; padding-top: 64px; }
+.side { border-right: 1px solid var(--line); padding: 12px; overflow: auto; }
+.site { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 14px; }
+.site:hover { background: var(--bg2); }
+.site.on { background: var(--accent-soft); color: var(--accent-hover); }
+.site .n { flex: none; color: var(--fg3); font-size: 12px; }
+.site.on .n { color: var(--accent); }
+.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 8px 28px 24px; }
+.mh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 4px; }
+.mh h2 { margin: 0; min-width: 0; font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
+.sb { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; white-space: nowrap; }
+.sb:hover:not(:disabled) { background: var(--bg2); }
+.sb.p { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
+.sb.p:hover:not(:disabled) { background: var(--accent-hover); }
+.sb.p.on, .sb.p.on:hover:not(:disabled) { background: var(--ok); border-color: var(--ok); color: #fff; }
+#list { flex: 1; overflow: auto; min-height: 0; }
+.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line2); }
+.pin { flex: none; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 12px; background: var(--accent); color: var(--accent-fg); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
+.say { font-size: 14px; word-break: break-word; }
+.q { margin-top: 3px; color: var(--fg3); font-size: 12px; line-height: 1.4; word-break: break-word; }
 .empty { color: var(--fg2); font-size: var(--fs-sm); padding: 12px 6px; }
 @media (max-width: 800px) {
-  .app { grid-template-columns: 1fr; }
-  aside { max-height: 46vh; border-right: 0; border-bottom: 1px solid var(--line); }
-  header { padding: 12px; align-items: flex-start; flex-wrap: wrap; }
+  .top { padding: 14px 16px; }
+  .hero { padding: 88px 16px 80px; }
+  .hero h1 { font-size: 26px; }
+  .notes { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
+  .side { max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line); }
+  .main { padding: 8px 16px 24px; }
+  .mh { align-items: flex-start; flex-wrap: wrap; }
+}
+@media (prefers-reduced-motion: reduce) {
+  * { transition: none !important; }
+  .bm:hover { transform: none; }
 }
-@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
 `;
 var HOME_JS = `
 const boot = JSON.parse(document.getElementById('ph-boot').textContent)
-const zh = (navigator.language || '').toLowerCase().startsWith('zh')
-const t = zh ? {
-  tag: '\u4EC5\u8BC4\u5BA1 \xB7 \u65E0 Agent',
-  step: '\u628A\u6309\u94AE\u62D6\u5230\u6536\u85CF\u5939\u680F',
-  lead: '\u5728\u4EFB\u610F\u7F51\u7AD9\u70B9\u8FD9\u4E2A\u4E66\u7B7E\u3002\u5E95\u680F\u53EA\u6709\u53D6\u70B9\u548C\u610F\u89C1\u3002',
-  src: '\u6765\u6E90',
-  local: '\u672C\u673A ' + location.host,
-  cdn: 'jsDelivr CDN',
-  by: '\u6309\u7F51\u7AD9',
-  pick: '\u9009\u62E9\u4E00\u4E2A\u7F51\u7AD9',
-  notes: '\u6761',
-  empty: '\u8FD9\u4E2A\u7F51\u7AD9\u8FD8\u6CA1\u6709\u610F\u89C1\u3002',
-  none: '\u8FD8\u6CA1\u6709\u610F\u89C1\u3002\u5728\u7F51\u9875\u4E0A\u70B9\u4E66\u7B7E\uFF0C\u53D6\u70B9\u540E\u5199\u4E00\u6761\u3002',
-  md: '\u5BFC\u51FA Markdown',
-  json: '\u5BFC\u51FA JSON',
-  copy: '\u590D\u5236 Prompt',
-  copied: '\u5DF2\u590D\u5236',
-  bm: 'PH \u8BC4\u5BA1',
-  limit: '\u672C\u673A\u811A\u672C\u6765\u81EA ' + location.origin + '\uFF0C\u9002\u5408 http \u9875\u9762\u3002https \u9875\u9762\u7ECF\u5E38\u4F1A\u62E6\u622A http://127.0.0.1 \u7684\u811A\u672C\uFF0C\u8FD9\u65F6\u6539\u7528 jsDelivr\uFF08\u811A\u672C\u8D70 https\uFF09\u3002\u610F\u89C1\u4ECD\u8981\u5199\u56DE\u672C\u673A\u7684 http \u63A7\u5236\u7AEF\u53E3\uFF1AChrome \u901A\u5E38\u5141\u8BB8\u8BBF\u95EE 127.0.0.1\uFF0C\u5E76\u53EF\u80FD\u5F39\u51FA\u672C\u5730\u7F51\u7EDC\u6743\u9650\uFF08\u670D\u52A1\u4F1A\u56DE\u5E94 Access-Control-Allow-Private-Network\uFF09\uFF1BFirefox \u548C Safari \u591A\u534A\u4F1A\u5F53\u6210\u6DF7\u5408\u5185\u5BB9\u62E6\u6389\u3002\u88AB\u62E6\u4F4F\u65F6\uFF0C\u7528 page-harness <\u7F51\u5740> --no-agent \u8D70\u4EE3\u7406\u3002\u4E66\u7B7E\u91CC\u6709\u672C\u6B21\u8FD0\u884C\u7684\u4EE4\u724C\uFF0C\u53EA\u5728\u4F60\u70B9\u8FC7\u4E66\u7B7E\u7684\u9875\u9762\u91CC\u6709\u6548\u3002\u9875\u9762\u7684 CSP \u5982\u679C\u7981\u6B62\u8FDE\u63A5 127.0.0.1\uFF0C\u4FDD\u5B58\u4E5F\u4F1A\u5931\u8D25\u3002',
-  ungrouped: '\uFF08\u672A\u5206\u7EC4\uFF09',
-} : {
-  tag: 'Review only \xB7 no agent',
-  step: 'Drag the button to the bookmarks bar',
-  lead: 'Click it on any site. The dock is Pick and Notes only.',
-  src: 'Source',
-  local: 'This server ' + location.host,
-  cdn: 'jsDelivr CDN',
-  by: 'By site',
-  pick: 'Pick a site',
-  notes: 'notes',
-  empty: 'No notes for this site yet.',
-  none: 'No notes yet. Open a page, click the bookmark, pick an element and comment.',
-  md: 'Export Markdown',
-  json: 'Export JSON',
-  copy: 'Copy prompt',
-  copied: 'Copied',
-  bm: 'PH Review',
-  limit: 'The local script is served from ' + location.origin + ' and works on http pages. HTTPS pages often block a script from http://127.0.0.1 (mixed content); switch the source to jsDelivr so the script itself loads over HTTPS. Saving a note still calls this http control port. Chrome usually allows 127.0.0.1 and may ask for local-network permission (the server answers Access-Control-Allow-Private-Network). Firefox and Safari often block it as mixed content. When that happens, run page-harness <url> --no-agent and use the proxy. The bookmarklet carries this run\\'s token and only works on pages where you click it. A host page CSP that forbids connections to 127.0.0.1 will also block saving.',
-  ungrouped: '(ungrouped)',
-}
-document.documentElement.lang = zh ? 'zh-CN' : 'en'
+const copy = ${JSON.stringify(HOME_COPY)}
+const lang = boot.lang === 'zh-CN' || boot.lang === 'en' ? boot.lang : ((navigator.language || '').toLowerCase().startsWith('zh') ? 'zh-CN' : 'en')
+const t = copy[lang]
+const BM = '\u2726 Page-Harness'
+document.documentElement.lang = lang
 document.title = 'page-harness'
-tag.textContent = t.tag
-step.textContent = t.step
-lead.textContent = t.lead
-document.getElementById('src-label').textContent = t.src
-src.options[0].textContent = t.local
-src.options[1].textContent = t.cdn
-by.textContent = t.by
-exmd.textContent = t.md
-exjson.textContent = t.json
-cp.textContent = t.copy
-bm.textContent = t.bm
-limit.textContent = t.limit
+const bm = document.getElementById('bm')
+const bar = document.getElementById('bar')
+const home = document.getElementById('home')
+const notes = document.getElementById('notes')
+const tonotes = document.getElementById('tonotes')
+const doms = document.getElementById('doms')
+const list = document.getElementById('list')
+const hostTitle = document.getElementById('host-title')
+const exmd = document.getElementById('exmd')
+const exjson = document.getElementById('exjson')
+const cp = document.getElementById('cp')
+const modal = document.getElementById('modal')
+const helpTitle = document.getElementById('help-title')
+const helpBody = document.getElementById('help-body')
 
-function bookmarklet(scriptUrl) {
-  const cfg = JSON.stringify({ controlOrigin: location.origin, bookmarklet: true, noAgent: true, token: boot.token }).replace(/</g, '\\\\u003c')
-  const srcUrl = JSON.stringify(scriptUrl).replace(/</g, '\\\\u003c')
+function fillHelp() {
+  helpTitle.textContent = t.helpTitle
+  helpBody.replaceChildren()
+  for (const line of t.help) {
+    const p = document.createElement('p')
+    p.append('\xB7 ')
+    for (const bit of line) {
+      if (bit.k === 'c') {
+        const code = document.createElement('code')
+        code.textContent = bit.v
+        p.append(code)
+      } else p.append(bit.v)
+    }
+    helpBody.append(p)
+  }
+}
+function applyCopy() {
+  document.getElementById('hero-title').textContent = t.title
+  document.getElementById('hero-sub').textContent = t.sub
+  document.getElementById('bar-label').textContent = t.bar
+  document.getElementById('chip-docs').textContent = t.docs
+  document.getElementById('chip-gh').textContent = t.gh
+  document.getElementById('help').textContent = t.trouble
+  bm.textContent = BM
+  exmd.textContent = t.md
+  exjson.textContent = t.json
+  cp.textContent = t.copy
+  fillHelp()
+}
+function bookmarklet() {
+  const cfgObj = { controlOrigin: location.origin, bookmarklet: true, noAgent: true, token: boot.token }
+  if (boot.lang) cfgObj.lang = boot.lang
+  const cfg = JSON.stringify(cfgObj).replace(/</g, '\\\\u003c')
+  const srcUrl = JSON.stringify(location.origin + '/__ph/overlay.js').replace(/</g, '\\\\u003c')
   return 'javascript:(function(){if(window.__phOverlay)return;window.__PH_CONFIG=' + cfg + ';var s=document.createElement(\\'script\\');s.src=' + srcUrl + ';document.documentElement.appendChild(s);})();'
 }
-function scriptUrl() {
-  if (src.value === 'cdn') return 'https://cdn.jsdelivr.net/npm/page-harness@' + boot.version + '/dist/client/page/overlay.js'
-  return location.origin + '/__ph/overlay.js'
-}
-function paintBm() { bm.href = bookmarklet(scriptUrl()) }
-src.addEventListener('change', paintBm)
-paintBm()
+bm.href = bookmarklet()
+applyCopy()
 
 let sites = []
 let cur = ''
-const doms = document.getElementById('doms')
-const list = document.getElementById('list')
+let total = 0
+let ready = false
 function label(host) { return host || t.ungrouped }
+function notesOpen() { return location.hash === '#notes' }
+function applyView() {
+  const on = notesOpen()
+  home.classList.toggle('on', !on)
+  notes.classList.toggle('on', on)
+  tonotes.textContent = on ? t.back : t.mine.replace('{n}', String(total))
+  tonotes.href = on ? '#' : '#notes'
+  tonotes.classList.toggle('back', on)
+}
+function setExport(on) { exmd.disabled = exjson.disabled = cp.disabled = !on }
 async function loadSites() {
   const r = await fetch('/__ph/api/review/sites', { headers: { Accept: 'application/json' } })
   const data = await r.json()
   sites = data.sites || []
-  if (!sites.some((s) => s.host === cur)) cur = (location.hash.slice(1) && sites.some((s) => s.host === decodeURIComponent(location.hash.slice(1))) ? decodeURIComponent(location.hash.slice(1)) : sites[0]?.host) || ''
+  total = sites.reduce((n, s) => n + (Number(s.total) || 0), 0)
+  if (!sites.some((s) => s.host === cur)) cur = sites[0] ? sites[0].host : ''
+  ready = true
+  applyView()
   renderSites()
-  await renderNotes()
+  if (notesOpen()) await renderNotes()
 }
 function renderSites() {
   doms.replaceChildren()
@@ -3205,56 +3389,69 @@ function renderSites() {
     return
   }
   for (const s of sites) {
-    const e = document.createElement('div')
-    e.className = 'dom' + (s.host === cur ? ' on' : '')
+    const e = document.createElement('button')
+    e.type = 'button'
+    e.className = 'site' + (s.host === cur ? ' on' : '')
     e.dataset.testid = 'domain'
     e.dataset.host = s.host
     const name = document.createElement('span')
     name.textContent = label(s.host)
     const n = document.createElement('span')
     n.className = 'n'
-    n.textContent = s.total + ' ' + t.notes
+    n.textContent = String(s.total)
     e.append(name, n)
-    e.addEventListener('click', () => { cur = s.host; history.replaceState(null, '', '#' + encodeURIComponent(s.host)); renderSites(); void renderNotes() })
+    e.addEventListener('click', () => { cur = s.host; renderSites(); void renderNotes() })
     doms.append(e)
   }
 }
 async function renderNotes() {
-  title.textContent = cur ? label(cur) : t.pick
-  const on = !!cur || sites.some((s) => s.host === '')
-  exmd.disabled = exjson.disabled = cp.disabled = !cur && cur !== ''
-  if (!sites.length) { list.replaceChildren(); const e = document.createElement('div'); e.className = 'empty'; e.textContent = t.none; list.append(e); exmd.disabled = exjson.disabled = cp.disabled = true; return }
+  const has = sites.some((s) => s.host === cur)
+  hostTitle.textContent = has ? label(cur) : ''
+  setExport(has)
+  list.replaceChildren()
+  if (!has) {
+    const e = document.createElement('div')
+    e.className = 'empty'
+    e.textContent = t.none
+    list.append(e)
+    return
+  }
   const r = await fetch('/__ph/api/review/host?host=' + encodeURIComponent(cur), { headers: { Accept: 'application/json' } })
   const data = await r.json()
   list.replaceChildren()
   const items = data.items || []
-  if (!items.length) { const e = document.createElement('div'); e.className = 'empty'; e.textContent = t.empty; list.append(e); return }
+  if (!items.length) {
+    const e = document.createElement('div')
+    e.className = 'empty'
+    e.textContent = t.empty
+    list.append(e)
+    return
+  }
   for (const item of items) {
     const e = document.createElement('div')
-    const kind = item.kind === 'patch' ? 'patch' : (item.severity || 'suggestion')
-    e.className = 'note ' + kind + (item.status === 'resolved' ? ' done' : '')
+    e.className = 'note'
     e.dataset.testid = 'note'
-    const num = document.createElement('span')
-    num.className = 'num'
-    num.textContent = String(item.n || '')
+    const pin = document.createElement('span')
+    pin.className = 'pin'
+    pin.textContent = String(item.n || '')
     const col = document.createElement('div')
     const body = document.createElement('div')
     body.className = 'say'
-    body.textContent = item.note || item.say || ''
+    body.textContent = item.note || ''
     const meta = document.createElement('div')
-    meta.className = 'sel'
-    const bits = [item.selector, item.text ? '\u201C' + item.text + '\u201D' : '', item.path, item.status].filter(Boolean)
-    meta.textContent = bits.join(' \xB7 ')
+    meta.className = 'q'
+    const quote = item.text ? '\u201C' + item.text + '\u201D' : (item.selector || '')
+    meta.textContent = [quote, item.path].filter(Boolean).join(' \xB7 ')
+    if (item.selector) meta.title = item.selector
     col.append(body, meta)
-    e.append(num, col)
+    e.append(pin, col)
     list.append(e)
   }
-  void on
 }
 function download(kind) {
-  if (!cur && cur !== '') return
+  if (!sites.some((s) => s.host === cur)) return
   const a = document.createElement('a')
-  a.href = '/__ph/api/review/export.' + kind + '?host=' + encodeURIComponent(cur)
+  a.href = '/__ph/api/review/export.' + kind + '?host=' + encodeURIComponent(cur) + '&lang=' + encodeURIComponent(lang)
   a.download = ''
   a.click()
 }
@@ -3278,14 +3475,21 @@ async function writeClipboard(text) {
 }
 cp.addEventListener('click', async () => {
   if (cp.disabled) return
-  const lang = zh ? 'zh-CN' : 'en'
-  const r = await fetch('/__ph/api/review/prompt?host=' + encodeURIComponent(cur) + '&lang=' + lang, { headers: { Accept: 'text/plain' } })
+  const r = await fetch('/__ph/api/review/prompt?host=' + encodeURIComponent(cur) + '&lang=' + encodeURIComponent(lang), { headers: { Accept: 'text/plain' } })
   const text = await r.text()
   if (!(await writeClipboard(text))) return
   cp.textContent = t.copied
   cp.classList.add('on')
   setTimeout(() => { cp.textContent = t.copy; cp.classList.remove('on') }, 1500)
 })
+bm.addEventListener('dragstart', () => bar.classList.add('hot'))
+bm.addEventListener('dragend', () => bar.classList.remove('hot'))
+document.getElementById('help').addEventListener('click', () => modal.classList.add('on'))
+modal.addEventListener('click', () => modal.classList.remove('on'))
+document.getElementById('modal-card').addEventListener('click', (e) => e.stopPropagation())
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape') modal.classList.remove('on') })
+window.addEventListener('hashchange', () => { applyView(); if (notesOpen() && ready) void renderNotes() })
+applyView()
 void loadSites()
 `;
 
@@ -4704,7 +4908,7 @@ async function startServers(o) {
       if (!existsSync9(p)) return send(res, 503, `/* page-harness: ${file} missing, run npm run build */`, "text/javascript");
       let body = readFileSync9(p, "utf8");
       if (file === "overlay.js") {
-        body = `window.__PH_CONFIG=${JSON.stringify({ controlOrigin: controlOrigin(req), appPort: o.appPort, target: o.target.host, relay: proxy.site, ...o.noAgent ? { noAgent: true } : {} })};
+        body = `window.__PH_CONFIG=${JSON.stringify({ controlOrigin: controlOrigin(req), appPort: o.appPort, target: o.target.host, relay: proxy.site, ...o.noAgent ? { noAgent: true } : {}, ...o.lang ? { lang: o.lang } : {} })};
 ` + body;
       }
       return send(res, 200, body, "text/javascript; charset=utf-8", { "Cross-Origin-Resource-Policy": "same-origin" });
@@ -4765,7 +4969,7 @@ async function startServers(o) {
       }
       if (o.bookmarklet && (p === "/" || p === "/__ph" || p === "/__ph/" || p === "/__ph/home") && req.method === "GET") {
         o.auth.issuePageSession(req, res);
-        return send(res, 200, homeHtml({ token: o.bookmarkletToken ?? "", version: packageVersion() }), "text/html; charset=utf-8", {
+        return send(res, 200, homeHtml({ token: o.bookmarkletToken ?? "", version: packageVersion(), lang: o.lang }), "text/html; charset=utf-8", {
           "Content-Security-Policy": "default-src 'none'; script-src 'self'; style-src 'self'; font-src 'self'; connect-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'",
           "Referrer-Policy": "no-referrer"
         });
@@ -5010,8 +5214,9 @@ async function serveReviewExtras(o, req, res, url) {
     const slice = o.gateway.reviewSlice(host);
     if (p === "/__ph/api/review/host") return json(res, { host, items: slice.items.map(slimItem) }), true;
     const fileHost = (host || "ungrouped").replace(/[^\w.-]+/g, "_");
+    const lang = url.searchParams.get("lang") === "en" ? "en" : "zh-CN";
     if (p === "/__ph/api/review/export.md") {
-      const md = reviewMarkdown(siteUrl(host), slice.items, slice.approvals);
+      const md = reviewMarkdown(siteUrl(host), slice.items, slice.approvals, lang);
       return send(res, 200, md, "text/markdown; charset=utf-8", { "Content-Disposition": `attachment; filename="review-${fileHost}.md"` }), true;
     }
     if (p === "/__ph/api/review/export.json") {
@@ -5019,7 +5224,6 @@ async function serveReviewExtras(o, req, res, url) {
         "Content-Disposition": `attachment; filename="review-${fileHost}.json"`
       }), true;
     }
-    const lang = url.searchParams.get("lang") === "en" ? "en" : "zh-CN";
     const page = siteUrl(host);
     const text = reviewPrompt(slice.items, {
       site: page,
@@ -5337,18 +5541,18 @@ function turnText(turn) {
 
 // src/server/prompt.ts
 import path14 from "path";
-var esc = (s) => s.replace(/</g, "&lt;");
+var esc2 = (s) => s.replace(/</g, "&lt;");
 function buildPrompt(msg, opts) {
   const parts = [];
   const images = [];
-  if (msg.pageUrl) parts.push(`<page url="${esc(msg.pageUrl)}" />`);
+  if (msg.pageUrl) parts.push(`<page url="${esc2(msg.pageUrl)}" />`);
   if (msg.picks.length) {
     const lines = msg.picks.map((p, i) => {
       const html = truncate(p.outerHTML.replace(/\s+/g, " "), 1200);
       return `${i + 1}. <${p.tagName.toLowerCase()}> selector: ${p.selector}${p.text ? `
    text: ${JSON.stringify(truncate(p.text, 200))}` : ""}${p.url && p.url !== msg.pageUrl ? `
    page: ${p.url}` : ""}
-   html: ${esc(html)}`;
+   html: ${esc2(html)}`;
     });
     parts.push(`<picked-elements>
 ${lines.join("\n")}
@@ -6426,7 +6630,8 @@ async function startHarness(o) {
     keepHost: o.keepHost,
     noAgent,
     bookmarklet,
-    bookmarkletToken
+    bookmarkletToken,
+    lang: o.lang
   });
   let closed = false;
   return {
@@ -6463,6 +6668,15 @@ function lanAddress() {
   return void 0;
 }
 
+// src/shared/lang.ts
+function parseLang(raw) {
+  if (raw === void 0 || raw.trim() === "") return void 0;
+  const s = raw.trim().toLowerCase();
+  if (s === "en" || s.startsWith("en-")) return "en";
+  if (s === "zh" || s.startsWith("zh-")) return "zh-CN";
+  throw new Error("--lang must be zh or en");
+}
+
 // src/cli/index.ts
 var HELP = `page-harness \u2014 Pick, Chat and Artifacts on top of any running frontend, driven by your local coding agent.
 Without a URL it starts review-only: a home page with a bookmarklet, and notes grouped by site. No agent.
@@ -6495,6 +6709,7 @@ Options
   --no-agent             Review only. Do not detect or start an agent CLI. The dock is Pick and Notes
                          (comment, edit, reply, resolve, approve). No Chat, Artifacts, Live or page control.
                          Implied when no frontend URL is given.
+  --lang <zh|en>         Home page and dock language. Omit it and each browser keeps its own.
   --share                Listen on the network and print an invite link: teammates join as reviewers
                          (comment, reply, resolve, approve, edit text/style in review mode; never the agent)
   --verbose / --quiet
@@ -6579,6 +6794,7 @@ async function main(argv = process.argv.slice(2)) {
       review: { type: "boolean" },
       source: { type: "boolean" },
       "no-agent": { type: "boolean" },
+      lang: { type: "string" },
       share: { type: "boolean" },
       verbose: { type: "boolean" },
       quiet: { type: "boolean" },
@@ -6596,6 +6812,7 @@ async function main(argv = process.argv.slice(2)) {
   }
   if (values.verbose) log.setVerbose(true);
   if (values.quiet) log.setQuiet(true);
+  const lang = parseLang(values.lang);
   const rawTarget = positionals[0];
   if (!rawTarget) {
     if (values.source) throw new Error("--source needs a frontend URL");
@@ -6612,7 +6829,8 @@ async function main(argv = process.argv.slice(2)) {
       controlPort: controlPort2,
       allowHosts: values["allow-host"],
       publicScheme: schemeOf(values["public-scheme"]),
-      noAgent: true
+      noAgent: true,
+      lang
     });
     log.info(`v${version()}`);
     process.stderr.write(
@@ -6657,7 +6875,8 @@ async function main(argv = process.argv.slice(2)) {
     liveGuardHook: values["live-guard-hook"],
     mode: values.review ? "review" : values.source ? "source" : void 0,
     share: values.share,
-    noAgent
+    noAgent,
+    lang
   });
   const agentLine = h.agents.map((a) => a.available ? `${a.id === h.defaultAgent ? log.bold(a.id) : a.id}${a.version ? ` ${log.dim(a.version)}` : ""}` : log.dim(`${a.id} (not found)`)).join("  ");
   log.info(`v${version()}`);