proto-comments 0.1.0 → 0.2.1

package/README.md

@@ -4,7 +4,7 @@ Figma-style review comments on a running React prototype.
 
 - **Comments are split by screen, not only by URL.** Prototypes often show every screen on one URL. Tell the plugin what a "screen" is, and a comment left in Settings won't show up on the deal page.
 - **Pinned to elements.** A pin follows its element when the window is resized or scrolled. Each comment records the block it's in, for example "Review before I send these invites › Emails".
-- **History.** All comments, grouped by screen. Click one to reopen its screen in the saved state, scroll to the element and open the thread.
+- **History.** All comments in one list, by number, each with the screen it was left on. Click one to reopen its screen in the saved state, scroll to the element and open the thread.
 - **Made for a coding agent.** Comments live in one JSON file in your project. Mark the ones you want, tell the agent "apply the comments", and it resolves each with a reply saying what changed.
 
 ## Install
@@ -65,12 +65,13 @@ Either way, comments are saved to `comments/comments.json`, relative to the fold
 | --- | --- |
 | **C** | Start commenting: hover outlines an element, click it to leave a comment |
 | **V** | Stop commenting |
-| **Esc** | Close the open comment or History |
+| **H** | Open or close History |
+| **Esc** | Close the draft, the open comment or History |
 | Toolbar | Bottom center. Drag it by the dots; it stays where you put it |
 
 The shortcuts use physical keys, so they work in any keyboard layout. In text fields C types a letter.
 
-In a comment you can reply, resolve, mark it for the agent, or delete it. In History you can filter (Open, For Agent, Resolved, All), select several comments and **Mark for Agent**, or delete everything.
+In a comment you can reply, resolve, mark it for the agent, or delete it. In History you can filter (All, Open, For Agent, Resolved). Only open comments are numbered. In History they come first, in order of their numbers, then the resolved ones; each row shows the screen it's on. A resolved comment shows a check and who resolved it, so the next new comment can be #1 again. Each row has the same actions as an open comment, and you can select several comments to resolve, mark for the agent or delete them at once.
 
 ## Screens in single-URL prototypes
 
@@ -104,13 +105,13 @@ export default function Review() {
 | --- | --- | --- |
 | `endpoint` | `'/api/comments'` | Where comments are stored |
 | `author` | `'Reviewer'` | Name on new comments and replies |
-| `getScreen` | URL | `() => ({ key, label })`. Comments show only on a screen with the same `key`; `label` groups History |
+| `getScreen` | URL | `() => ({ key, label })`. Comments show only on a screen with the same `key`; `label` is the screen's name in History |
 | `getSnapshot` | `{ url }` | JSON saved with each comment |
 | `restoreSnapshot` | go to `url` | `(snapshot, comment) => void \| Promise`. Called from History when the comment is on another screen |
 | `getContext` | none | `() => string` shown in History, e.g. `"new client · admin"` |
 | `headingSelector` | none | Extra selectors for block titles, e.g. `'.card-title'`. Built-in: `h1`–`h6`, `legend`, `[class*="title"]`, `label` |
 
-**Better anchors.** A pin is found by a CSS path from the nearest ancestor with an `id` or `data-cid`, plus the element's text. Add `data-cid="…"` to key containers if your markup has few ids.
+**Better anchors.** A pin is found by a CSS path from the nearest ancestor with an `id` or `data-cid`, plus the element's text. Add `data-cid="…"` to key containers if your markup has few ids. If the element can't be found any more, the comment has no pin, but it still opens from History.
 
 **Theming.** Colors are CSS variables on `.pc-root` (`--pc-primary`, `--pc-dark`, `--pc-agent`, …). Override them in your own CSS.
 
@@ -126,7 +127,7 @@ npx proto-comments resolve 3 "Shortened the subtitle to one sentence"
 npx proto-comments reply 4 "Should this apply to the popup too?"
 ```
 
-Options: `--file <path>`, `--author <name>` (default `Agent`).
+Options: `--file <path>`, `--author <name>` (default `Agent`). A comment or reply can be up to 5000 characters.
 
 The page doesn't poll. It reloads comments when its tab becomes active again, so the agent's replies show up when you come back.
 
@@ -153,6 +154,8 @@ Comments on the prototype live in `comments/comments.json` (proto-comments).
 }
 ```
 
+A resolved comment also has `resolvedBy` (the `author` prop, or `--author` in the CLI) and `resolvedAt`. Reopening clears them.
+
 ## License
 
 MIT

package/bin/proto-comments.js

@@ -26,7 +26,7 @@ function parse(argv) {
 }
 
 const place = a => [...new Set([a.block, a.text].filter(Boolean))].join(' › ') || `<${a.tag}>`;
-const line = c => `#${c.n} ${c.status}${c.queued ? ' [For Agent]' : ''} · ${c.screenLabel} · ${place(c.anchor)}\n    ${c.text}`;
+const line = c => `${c.status === 'resolved' ? '✓' : `#${c.n}`} ${c.status}${c.resolvedBy ? ` by ${c.resolvedBy}` : ''}${c.queued ? ' [For Agent]' : ''} · ${c.screenLabel} · ${place(c.anchor)}\n    ${c.text}`;
 /** Marked "For Agent" if any are marked, otherwise every open comment. */
 const todo = list => { const open = list.filter(c => c.status === 'open'); const q = open.filter(c => c.queued); return q.length ? q : open; };
 
@@ -62,7 +62,8 @@ async function main() {
   const opts = parse(process.argv.slice(2));
   const [cmd, n, ...words] = opts._;
   const storage = createStorage(opts.file);
-  const find = list => list.find(c => c.n === Number(n)) || (console.error(`No comment #${n}`), process.exit(1));
+  /* Resolved comments can share a number with an open one; the open one wins. */
+  const find = list => list.find(c => c.n === Number(n) && c.status === 'open') || list.findLast(c => c.n === Number(n)) || (console.error(`No comment #${n}`), process.exit(1));
 
   if (cmd === 'serve') return serve(storage, Number(opts.port) || 4848);
   const list = await storage.read();
@@ -78,8 +79,10 @@ async function main() {
   }
   if (cmd === 'resolve' || cmd === 'reply') {
     const c = find(list);
-    c.replies.push({ author: opts.author || 'Agent', text: words.join(' ') || 'Done.', createdAt: new Date().toISOString() });
-    if (cmd === 'resolve') { c.status = 'resolved'; c.queued = false; }
+    const author = opts.author || 'Agent';
+    const at = new Date().toISOString();
+    c.replies.push({ author, text: words.join(' ') || 'Done.', createdAt: at });
+    if (cmd === 'resolve') Object.assign(c, { status: 'resolved', queued: false, resolvedBy: author, resolvedAt: at });
     await storage.write(list);
     return console.log(line(c));
   }

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/index.jsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/store.js
@@ -9,7 +9,17 @@ import { useSyncExternalStore } from "react";
 
 // src/anchors.js
 var ROOT_SEL = (el) => el.id ? `#${CSS.escape(el.id)}` : el.dataset?.cid ? `[data-cid="${el.dataset.cid}"]` : null;
-var textOf = (el) => (el.innerText || el.getAttribute?.("aria-label") || "").replace(/\s+/g, " ").trim().slice(0, 60);
+var segmenter = typeof Intl !== "undefined" && Intl.Segmenter ? new Intl.Segmenter() : null;
+var cut = (s, n) => {
+  if (s.length <= n || !segmenter) return s.slice(0, n);
+  let out = "";
+  for (const { segment } of segmenter.segment(s)) {
+    if (out.length + segment.length > n) break;
+    out += segment;
+  }
+  return out;
+};
+var textOf = (el) => cut((el.innerText || el.getAttribute?.("aria-label") || "").replace(/\s+/g, " ").trim(), 60);
 function selectorFor(el) {
   const parts = [];
   for (let n = el; n && n !== document.body; n = n.parentElement) {
@@ -57,14 +67,14 @@ function findAnchor(a) {
   }
   if (el && (!a.text || textOf(el) === a.text)) return el;
   if (a.text) {
-    const match = [...document.querySelectorAll(a.tag)].find((n) => textOf(n) === a.text && !n.closest(".pc-root"));
-    if (match) return match;
+    const same = [...document.querySelectorAll(a.tag)].filter((n) => !n.closest(".pc-root") && textOf(n) === a.text);
+    if (same.length === 1) return same[0];
   }
   return el;
 }
 
 // src/store.js
-var state = { list: [], mode: false, historyOpen: false, openId: null, draft: null, flashId: null, filter: "open" };
+var state = { list: [], mode: false, historyOpen: false, openId: null, draft: null, flashId: null, bornId: null, filter: "all" };
 var subs = /* @__PURE__ */ new Set();
 var getC = () => state;
 var setC = (patch) => {
@@ -112,10 +122,13 @@ async function loadComments() {
 async function addComment(anchor, text) {
   const screen = cfg.getScreen();
   const c = await api("POST", { screen: screen.key, screenLabel: screen.label, context: cfg.getContext(), snapshot: cfg.getSnapshot(), anchor, text, author: cfg.author });
-  setC({ list: [...state.list, c], draft: null });
+  setC({ list: [...state.list, c], draft: null, bornId: c.id });
+  setTimeout(() => {
+    if (state.bornId === c.id) setC({ bornId: null });
+  }, 400);
 }
 async function patchComment(id, patch) {
-  const c = await api("PATCH", { id, ...patch });
+  const c = await api("PATCH", { id, author: cfg.author, ...patch });
   setC({ list: state.list.map((x) => x.id === id ? c : x) });
 }
 async function markComments(ids, queued) {
@@ -125,12 +138,9 @@ async function deleteComment(id) {
   await api("DELETE", { id });
   setC({ list: state.list.filter((x) => x.id !== id), openId: null });
 }
-async function deleteAllComments() {
-  await api("DELETE", { all: true });
-  setC({ list: [], openId: null, draft: null });
-}
 function reveal(c) {
-  findAnchor(c.anchor)?.scrollIntoView({ block: "center", behavior: "smooth" });
+  const smooth = !matchMedia("(prefers-reduced-motion: reduce)").matches;
+  findAnchor(c.anchor)?.scrollIntoView({ block: "center", behavior: smooth ? "smooth" : "auto" });
   setC({ openId: c.id, flashId: c.id });
   setTimeout(() => setC({ flashId: null }), 1600);
 }
@@ -154,37 +164,73 @@ function resumePendingGo() {
 }
 
 // src/ui.jsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 // src/icons.jsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var PATHS = {
-  comment: /* @__PURE__ */ jsx("path", { d: "M3 4.5A1.5 1.5 0 0 1 4.5 3h7A1.5 1.5 0 0 1 13 4.5v5a1.5 1.5 0 0 1-1.5 1.5H7l-3 2.5V11h0a1 1 0 0 1-1-1z" }),
-  list: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("path", { d: "M6 4.5h7M6 8h7M6 11.5h7" }),
-    /* @__PURE__ */ jsx("path", { d: "M3 4.5h.01M3 8h.01M3 11.5h.01" })
+  comment: /* @__PURE__ */ jsx("path", { d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" }),
+  history: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 7v5l4 2" })
+  ] }),
+  x: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }),
+  check: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }),
+  reopen: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
   ] }),
-  x: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }),
+  agent: /* @__PURE__ */ jsx("path", { d: "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" }),
   trash: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("path", { d: "M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.5 8.5h6l.5-8.5" }),
-    /* @__PURE__ */ jsx("path", { d: "M7 7v3.5M9 7v3.5" })
+    /* @__PURE__ */ jsx("path", { d: "M10 11v6M14 11v6M3 6h18" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
   ] })
 };
 function Icon({ name }) {
-  return /* @__PURE__ */ jsx("svg", { className: "pc-i", viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: PATHS[name] });
+  return /* @__PURE__ */ jsx("svg", { className: "pc-i", viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: PATHS[name] });
 }
 function Grip() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: [4, 8, 12].map((y) => [6, 10].map((x) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: "1.3" }, `${x}${y}`))) });
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "currentColor", "aria-hidden": "true", children: [5, 12, 19].map((y) => [9, 15].map((x) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: "1.75" }, `${x}${y}`))) });
 }
 
 // src/ui.jsx
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var when = (iso) => new Date(iso).toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
-var popStyle = (x, y) => ({
-  left: Math.max(8, Math.min(x + 18, window.innerWidth - 328)),
-  top: Math.max(8, Math.min(y - 8, window.innerHeight - 260))
-});
-function Field({ placeholder, submit, onCancel, label }) {
+var nameOf = (a) => a.text || a.block || `<${a.tag}>`;
+var when = (iso) => {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  const year = d.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? void 0 : "numeric";
+  return d.toLocaleString("en-US", { year, month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+};
+var byline = (author, iso) => [author, when(iso)].filter(Boolean).join(" \xB7 ");
+function Clip({ as: Tag = "span", tip, children }) {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    el.classList.toggle("pc-cut", el.scrollWidth > el.clientWidth);
+  });
+  return /* @__PURE__ */ jsx2(Tag, { ref, className: "pc-clip", "data-tip": tip, children });
+}
+function usePop(x, y, lost) {
+  const ref = useRef(null);
+  const [h, setH] = useState(0);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    setH(el.offsetHeight);
+    const ro = new ResizeObserver(() => setH(el.offsetHeight));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const w = Math.min(320, window.innerWidth - 16);
+  const left = Math.max(8, Math.min(x + 18, window.innerWidth - w - 8));
+  const top = Math.max(8, Math.min(y - 8, window.innerHeight - h - 8));
+  return { ref, style: { left, top, transformOrigin: lost ? "center top" : `${x - left}px ${y - top}px` } };
+}
+var reducedMotion = () => matchMedia("(prefers-reduced-motion: reduce)").matches;
+var MAX_TEXT = 5e3;
+function Field({ placeholder, submit, onCancel, label, bare }) {
   const [text, setText] = useState("");
   const [busy, setBusy] = useState(false);
   const go = async () => {
@@ -204,6 +250,7 @@ function Field({ placeholder, submit, onCancel, label }) {
         className: "pc-input",
         autoFocus: true,
         rows: 3,
+        maxLength: MAX_TEXT,
         placeholder,
         value: text,
         onChange: (e) => setText(e.target.value),
@@ -215,144 +262,159 @@ function Field({ placeholder, submit, onCancel, label }) {
         }
       }
     ),
-    /* @__PURE__ */ jsxs2("div", { className: "pc-actions", children: [
+    !bare && /* @__PURE__ */ jsxs2("div", { className: "pc-actions", children: [
       onCancel && /* @__PURE__ */ jsx2("button", { className: "pc-btn", onClick: onCancel, children: "Cancel" }),
       /* @__PURE__ */ jsx2("button", { className: "pc-btn primary", disabled: !text.trim() || busy, onClick: go, children: label })
     ] })
   ] });
 }
 function Draft({ draft }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "pc-pop", style: popStyle(draft.x, draft.y), children: [
-    /* @__PURE__ */ jsx2("div", { className: "pc-target", title: placeOf(draft.anchor), children: placeOf(draft.anchor) }),
-    /* @__PURE__ */ jsx2(Field, { placeholder: "Leave a comment", label: "Comment", submit: (text) => addComment(draft.anchor, text), onCancel: () => setC({ draft: null }) })
+  const pop = usePop(draft.x, draft.y);
+  return /* @__PURE__ */ jsxs2("div", { className: "pc-pop", ref: pop.ref, style: pop.style, children: [
+    /* @__PURE__ */ jsx2("div", { className: "pc-head", children: /* @__PURE__ */ jsx2(Clip, { as: "b", tip: placeOf(draft.anchor), children: nameOf(draft.anchor) }) }),
+    /* @__PURE__ */ jsx2("div", { className: "pc-pane", children: /* @__PURE__ */ jsx2(Field, { placeholder: "Leave a comment", label: "Comment", submit: (text) => addComment(draft.anchor, text), onCancel: () => setC({ draft: null }) }) })
   ] });
 }
+var resolvedOf = (c) => ({ status: c.status === "resolved" ? "open" : "resolved" });
+var toggleResolved = (c) => patchComment(c.id, resolvedOf(c));
+var toggleQueued = (c) => markComments([c.id], !c.queued);
 function Thread({ c, x, y, lost }) {
   const resolved = c.status === "resolved";
-  return /* @__PURE__ */ jsxs2("div", { className: "pc-pop", style: popStyle(x, y), children: [
+  const pop = usePop(x, y, lost);
+  const msgs = useRef(null);
+  useLayoutEffect(() => {
+    msgs.current.scrollTop = msgs.current.scrollHeight;
+  }, [c.replies.length]);
+  return /* @__PURE__ */ jsxs2("div", { className: "pc-pop", ref: pop.ref, style: pop.style, children: [
     /* @__PURE__ */ jsxs2("div", { className: "pc-head", children: [
-      /* @__PURE__ */ jsxs2("b", { children: [
-        "#",
-        c.n
-      ] }),
-      /* @__PURE__ */ jsx2("span", { children: c.screenLabel }),
+      /* @__PURE__ */ jsx2(Clip, { as: "b", tip: placeOf(c.anchor), children: nameOf(c.anchor) }),
       c.queued && /* @__PURE__ */ jsx2("i", { className: "pc-tag", children: "For Agent" }),
-      /* @__PURE__ */ jsx2("button", { className: "pc-ibtn", onClick: () => setC({ openId: null }), "aria-label": "Close", title: "Close", children: /* @__PURE__ */ jsx2(Icon, { name: "x" }) })
+      /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-trash", onClick: () => deleteComment(c.id), "aria-label": "Delete comment", "data-tip": "Delete", children: /* @__PURE__ */ jsx2(Icon, { name: "trash" }) }),
+      /* @__PURE__ */ jsx2("button", { className: "pc-ibtn", onClick: () => setC({ openId: null }), "aria-label": "Close", "data-tip": "Close", children: /* @__PURE__ */ jsx2(Icon, { name: "x" }) })
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: "pc-target", title: placeOf(c.anchor), children: placeOf(c.anchor) }),
-    lost && /* @__PURE__ */ jsx2("div", { className: "pc-lost", children: "The element isn't on this screen any more." }),
-    /* @__PURE__ */ jsxs2("div", { className: "pc-msg", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "pc-meta", children: [
-        c.author,
-        " \xB7 ",
-        when(c.createdAt)
+    /* @__PURE__ */ jsxs2("div", { className: "pc-pane msgs", ref: msgs, children: [
+      lost && /* @__PURE__ */ jsx2("div", { className: "pc-lost", children: "The element isn't on this screen any more." }),
+      /* @__PURE__ */ jsxs2("div", { className: "pc-msg", children: [
+        /* @__PURE__ */ jsx2("div", { className: "pc-meta", children: byline(c.author, c.createdAt) }),
+        c.text
       ] }),
-      c.text
+      c.replies.map((r, i) => /* @__PURE__ */ jsxs2("div", { className: "pc-msg", children: [
+        /* @__PURE__ */ jsx2("div", { className: "pc-meta", children: byline(r.author, r.createdAt) }),
+        r.text
+      ] }, i)),
+      resolved && c.resolvedBy && /* @__PURE__ */ jsx2("div", { className: "pc-meta", children: ["Resolved by " + c.resolvedBy, when(c.resolvedAt)].filter(Boolean).join(" \xB7 ") })
     ] }),
-    c.replies.map((r, i) => /* @__PURE__ */ jsxs2("div", { className: "pc-msg", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "pc-meta", children: [
-        r.author,
-        " \xB7 ",
-        when(r.createdAt)
-      ] }),
-      r.text
-    ] }, i)),
-    /* @__PURE__ */ jsx2(Field, { placeholder: "Reply", label: "Reply", submit: (text) => patchComment(c.id, { reply: { author: getConfig().author, text } }) }),
-    /* @__PURE__ */ jsxs2("div", { className: "pc-actions start", children: [
-      /* @__PURE__ */ jsx2("button", { className: "pc-btn", onClick: () => patchComment(c.id, { status: resolved ? "open" : "resolved" }), children: resolved ? "Reopen" : "Resolve" }),
-      !resolved && /* @__PURE__ */ jsx2("button", { className: "pc-btn", onClick: () => markComments([c.id], !c.queued), children: c.queued ? "Unmark" : "Mark for Agent" }),
-      /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-trash", onClick: () => deleteComment(c.id), "aria-label": "Delete comment", title: "Delete", children: /* @__PURE__ */ jsx2(Icon, { name: "trash" }) })
+    /* @__PURE__ */ jsx2("div", { className: "pc-pane", children: /* @__PURE__ */ jsx2(Field, { bare: true, placeholder: "Add a comment", submit: (text) => patchComment(c.id, { reply: { author: getConfig().author, text } }) }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "pc-actions foot", children: [
+      /* @__PURE__ */ jsx2("button", { className: "pc-btn sm tertiary", onClick: () => toggleResolved(c), children: resolved ? "Reopen" : "Resolve" }),
+      !resolved && /* @__PURE__ */ jsx2("button", { className: "pc-btn sm primary", onClick: () => toggleQueued(c), children: c.queued ? "Unmark" : "Mark for Agent" })
     ] })
   ] });
 }
 function Pin({ c, x, y }) {
   const open = useC((s) => s.openId === c.id);
   const flash = useC((s) => s.flashId === c.id);
+  const born = useC((s) => s.bornId === c.id);
   return /* @__PURE__ */ jsx2(
     "button",
     {
-      className: `pc-pin${c.status === "resolved" ? " done" : ""}${c.queued ? " queued" : ""}${open ? " on" : ""}${flash ? " flash" : ""}`,
+      className: `pc-pin${c.status === "resolved" ? " done" : ""}${c.queued ? " queued" : ""}${open ? " on" : ""}${flash ? " flash" : ""}${born ? " born" : ""}`,
       style: { left: x, top: y },
       onClick: () => setC({ openId: open ? null : c.id, draft: null }),
-      "aria-label": `Comment ${c.n}`,
-      children: c.n
+      "aria-label": c.status === "resolved" ? "Resolved comment" : `Comment ${c.n}`,
+      children: c.status === "resolved" ? /* @__PURE__ */ jsx2(Icon, { name: "check" }) : c.n
     }
   );
 }
-var FILTERS = [["open", "Open"], ["queued", "For Agent"], ["resolved", "Resolved"], ["all", "All"]];
+var FILTERS = [["all", "All"], ["open", "Open"], ["queued", "For Agent"], ["resolved", "Resolved"]];
 var matches = (c, f) => f === "all" || (f === "queued" ? c.queued && c.status === "open" : c.status === f);
-var groupBy = (items, key) => items.reduce((m, it) => {
-  var _a;
-  (m[_a = key(it)] || (m[_a] = [])).push(it);
-  return m;
-}, {});
+var metaOf = (c, place2) => [c.screenLabel, place2, c.context, when(c.createdAt), c.replies.length && `${c.replies.length + 1} comments`].filter(Boolean).join(" \xB7 ");
 function History() {
+  const isOpen = useC((s) => s.historyOpen);
   const list = useC((s) => s.list);
   const filter = useC((s) => s.filter);
-  const shown = list.filter((c) => matches(c, filter));
-  const groups = Object.entries(groupBy(shown, (c) => c.screenLabel));
+  const rank = (c) => c.status === "resolved" ? Infinity : c.n;
+  const shown = list.filter((c) => matches(c, filter)).sort((a, b) => rank(a) - rank(b) || 0);
   const count = (f) => list.filter((c) => matches(c, f)).length;
-  const [confirm, setConfirm] = useState(false);
   const [picked, setPicked] = useState([]);
-  const selectable = shown.filter((c) => c.status === "open").map((c) => c.id);
+  const selectable = shown.map((c) => c.id);
   const sel = picked.filter((id) => selectable.includes(id));
   const allPicked = selectable.length > 0 && sel.length === selectable.length;
   const toggle = (id) => setPicked((p) => p.includes(id) ? p.filter((x) => x !== id) : [...p, id]);
-  const anyQueued = sel.some((id) => list.find((c) => c.id === id)?.queued);
-  const mark = (queued) => markComments(sel, queued).then(() => setPicked([]));
-  return /* @__PURE__ */ jsxs2("aside", { className: "pc-history", "aria-label": "Comments", children: [
+  useEffect(() => {
+    if (!isOpen) setPicked([]);
+  }, [isOpen]);
+  const [leaving, setLeaving] = useState([]);
+  const leave = async (items, next, action) => {
+    const ids = items.filter((c) => !next || !matches({ ...c, ...next(c) }, filter)).map((c) => c.id);
+    if (ids.length) {
+      setLeaving((l) => [...l, ...ids]);
+      if (!reducedMotion()) await new Promise((res) => setTimeout(res, 150));
+    }
+    try {
+      await action();
+    } finally {
+      setLeaving((l) => l.filter((id) => !ids.includes(id)));
+    }
+  };
+  const picks = shown.filter((c) => sel.includes(c.id));
+  const open = picks.filter((c) => c.status === "open");
+  const allResolved = picks.length > 0 && !open.length;
+  const allQueued = open.length > 0 && open.every((c) => c.queued);
+  const done = () => setPicked([]);
+  const setStatus = (status) => leave(picks, () => ({ status }), async () => {
+    for (const c of picks) if (c.status !== status) await patchComment(c.id, { status });
+    done();
+  });
+  const mark = () => leave(open, () => ({ queued: !allQueued }), () => markComments(open.map((c) => c.id), !allQueued).then(done));
+  const remove = () => leave(picks, null, async () => {
+    for (const c of picks) await deleteComment(c.id);
+    done();
+  });
+  return /* @__PURE__ */ jsxs2("aside", { className: "pc-history", "data-open": isOpen || void 0, "aria-label": "Comments", children: [
     /* @__PURE__ */ jsxs2("header", { children: [
       /* @__PURE__ */ jsx2("b", { children: "Comments" }),
-      list.length > 0 && /* @__PURE__ */ jsx2("button", { className: "pc-btn ghost danger", onClick: () => setConfirm(true), children: "Delete all" }),
-      /* @__PURE__ */ jsx2("button", { className: "pc-ibtn", onClick: () => setC({ historyOpen: false }), "aria-label": "Close", title: "Close", children: /* @__PURE__ */ jsx2(Icon, { name: "x" }) })
-    ] }),
-    confirm && /* @__PURE__ */ jsxs2("div", { className: "pc-confirm", children: [
-      /* @__PURE__ */ jsxs2("span", { children: [
-        "Delete all ",
-        list.length,
-        " comments, open and resolved? This can't be undone."
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "pc-actions", children: [
-        /* @__PURE__ */ jsx2("button", { className: "pc-btn", onClick: () => setConfirm(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx2("button", { className: "pc-btn danger solid", onClick: () => deleteAllComments().then(() => setConfirm(false)), children: "Delete all" })
-      ] })
+      /* @__PURE__ */ jsx2("button", { className: "pc-ibtn", onClick: () => setC({ historyOpen: false }), "aria-label": "Close", "data-tip": "Close", children: /* @__PURE__ */ jsx2(Icon, { name: "x" }) })
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: "pc-chips", children: FILTERS.map(([f, l]) => /* @__PURE__ */ jsxs2("button", { className: `pc-chip${filter === f ? " on" : ""}`, onClick: () => setC({ filter: f }), children: [
+    /* @__PURE__ */ jsx2("div", { className: "pc-tabs", role: "tablist", children: FILTERS.map(([f, l]) => /* @__PURE__ */ jsxs2("button", { className: "pc-tab", role: "tab", "aria-selected": filter === f, onClick: () => setC({ filter: f }), children: [
       l,
-      " ",
-      count(f)
+      /* @__PURE__ */ jsx2("span", { children: count(f) })
     ] }, f)) }),
     selectable.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "pc-selbar", children: [
       /* @__PURE__ */ jsxs2("label", { className: "pc-check", children: [
         /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: allPicked, onChange: () => setPicked(allPicked ? [] : selectable) }),
         sel.length ? `${sel.length} selected` : "Select all"
       ] }),
-      sel.length > 0 && anyQueued && /* @__PURE__ */ jsx2("button", { className: "pc-btn", onClick: () => mark(false), children: "Unmark" }),
-      sel.length > 0 && /* @__PURE__ */ jsxs2("button", { className: "pc-btn primary", onClick: () => mark(true), children: [
-        "Mark for Agent (",
-        sel.length,
-        ")"
+      sel.length > 0 && /* @__PURE__ */ jsxs2("span", { className: "pc-bulk", children: [
+        /* @__PURE__ */ jsx2("button", { className: "pc-ibtn", onClick: () => setStatus(allResolved ? "open" : "resolved"), "aria-label": allResolved ? "Reopen" : "Resolve", "data-tip": allResolved ? "Reopen" : "Resolve", children: /* @__PURE__ */ jsx2(Icon, { name: allResolved ? "reopen" : "check" }) }),
+        open.length > 0 && /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-agent", "aria-pressed": allQueued, onClick: mark, "aria-label": allQueued ? "Unmark" : "Mark for Agent", "data-tip": allQueued ? "Unmark" : "Mark for Agent", children: /* @__PURE__ */ jsx2(Icon, { name: "agent" }) }),
+        /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-trash", onClick: remove, "aria-label": "Delete selected", "data-tip": "Delete", children: /* @__PURE__ */ jsx2(Icon, { name: "trash" }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "pc-groups", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "pc-list", children: [
       !shown.length && /* @__PURE__ */ jsx2("p", { className: "pc-empty", children: "No comments here. Press C and click an element to leave one." }),
-      groups.map(([label, items]) => /* @__PURE__ */ jsxs2("section", { children: [
-        /* @__PURE__ */ jsx2("h5", { children: label }),
-        items.map((c) => /* @__PURE__ */ jsxs2("div", { className: `pc-row${c.status === "resolved" ? " done" : ""}`, children: [
-          c.status === "open" ? /* @__PURE__ */ jsx2("input", { type: "checkbox", className: "pc-pick", checked: sel.includes(c.id), onChange: () => toggle(c.id), "aria-label": `Select comment ${c.n}` }) : /* @__PURE__ */ jsx2("span", { className: "pc-pick" }),
-          /* @__PURE__ */ jsxs2("button", { className: "pc-item", onClick: () => goToComment(c), children: [
-            /* @__PURE__ */ jsx2("span", { className: `pc-n${c.queued ? " queued" : ""}`, children: c.n }),
-            /* @__PURE__ */ jsxs2("span", { className: "pc-body", children: [
-              /* @__PURE__ */ jsxs2("span", { className: "pc-place", children: [
-                c.queued && /* @__PURE__ */ jsx2("i", { className: "pc-tag", children: "For Agent" }),
-                placeOf(c.anchor)
-              ] }),
-              /* @__PURE__ */ jsx2("span", { className: "pc-text", children: c.text }),
-              /* @__PURE__ */ jsx2("span", { className: "pc-meta", children: [c.context, when(c.createdAt), c.replies.length && `${c.replies.length} ${c.replies.length > 1 ? "replies" : "reply"}`].filter(Boolean).join(" \xB7 ") })
+      shown.map((c) => /* @__PURE__ */ jsxs2("div", { className: `pc-row${c.status === "resolved" ? " done" : ""}${leaving.includes(c.id) ? " leaving" : ""}`, children: [
+        /* @__PURE__ */ jsx2("input", { type: "checkbox", className: "pc-pick", checked: sel.includes(c.id), onChange: () => toggle(c.id), "aria-label": `Select comment ${c.n}` }),
+        /* @__PURE__ */ jsxs2("button", { className: "pc-item", onClick: () => goToComment(c), children: [
+          /* @__PURE__ */ jsx2("span", { className: `pc-n${c.queued ? " queued" : ""}`, children: c.status === "resolved" ? /* @__PURE__ */ jsx2(Icon, { name: "check" }) : c.n }),
+          /* @__PURE__ */ jsxs2("span", { className: "pc-body", children: [
+            /* @__PURE__ */ jsx2("span", { className: "pc-text", children: c.text }),
+            /* @__PURE__ */ jsxs2("span", { className: "pc-meta", children: [
+              c.queued && /* @__PURE__ */ jsx2("i", { className: "pc-tag", children: "For Agent" }),
+              /* @__PURE__ */ jsx2(Clip, { tip: metaOf(c, placeOf(c.anchor)), children: metaOf(c, nameOf(c.anchor)) })
+            ] }),
+            c.status === "resolved" && c.resolvedBy && /* @__PURE__ */ jsxs2("span", { className: "pc-meta", children: [
+              "Resolved by ",
+              c.resolvedBy
             ] })
           ] })
-        ] }, c.id))
-      ] }, label))
+        ] }),
+        /* @__PURE__ */ jsxs2("span", { className: "pc-row-actions", children: [
+          /* @__PURE__ */ jsx2("button", { className: "pc-ibtn", onClick: () => leave([c], resolvedOf, () => toggleResolved(c)), "aria-label": c.status === "resolved" ? "Reopen" : "Resolve", "data-tip": c.status === "resolved" ? "Reopen" : "Resolve", children: /* @__PURE__ */ jsx2(Icon, { name: c.status === "resolved" ? "reopen" : "check" }) }),
+          c.status === "open" && /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-agent", "aria-pressed": !!c.queued, onClick: () => leave([c], (x) => ({ queued: !x.queued }), () => toggleQueued(c)), "aria-label": c.queued ? "Unmark" : "Mark for Agent", "data-tip": c.queued ? "Unmark" : "Mark for Agent", children: /* @__PURE__ */ jsx2(Icon, { name: "agent" }) }),
+          /* @__PURE__ */ jsx2("button", { className: "pc-ibtn pc-trash", onClick: () => leave([c], null, () => deleteComment(c.id)), "aria-label": "Delete comment", "data-tip": "Delete", children: /* @__PURE__ */ jsx2(Icon, { name: "trash" }) })
+        ] })
+      ] }, c.id))
     ] })
   ] });
 }
@@ -390,40 +452,132 @@ function Toolbar() {
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { className: "pc-bar", style: pos ? { left: pos.x, top: pos.y, bottom: "auto", transform: "none" } : void 0, role: "toolbar", "aria-label": "Comments", children: [
-    /* @__PURE__ */ jsx2("span", { className: "pc-grip", onPointerDown: onDown, onPointerMove: onMove, onPointerUp: onUp, "aria-hidden": "true", title: "Drag", children: /* @__PURE__ */ jsx2(Grip, {}) }),
-    /* @__PURE__ */ jsxs2("button", { "aria-pressed": mode, onClick: () => setC({ mode: !getC().mode, draft: null, openId: null }), title: mode ? "Stop commenting (V)" : "Comment (C)", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "pc-bar", "data-tips": pos && pos.y < 48 ? "below" : void 0, style: pos ? { left: pos.x, top: pos.y, bottom: "auto", transform: "none" } : void 0, role: "toolbar", "aria-label": "Comments", children: [
+    /* @__PURE__ */ jsx2("span", { className: "pc-grip", onPointerDown: onDown, onPointerMove: onMove, onPointerUp: onUp, "aria-hidden": "true", children: /* @__PURE__ */ jsx2(Grip, {}) }),
+    /* @__PURE__ */ jsxs2("button", { "aria-pressed": mode, onClick: () => setC({ mode: !getC().mode, draft: null, openId: null }), "aria-label": mode ? "Stop commenting" : "Comment", "aria-keyshortcuts": mode ? "V" : "C", children: [
       /* @__PURE__ */ jsx2(Icon, { name: "comment" }),
-      /* @__PURE__ */ jsx2("span", { children: "Comment" }),
-      /* @__PURE__ */ jsx2("kbd", { children: mode ? "V" : "C" })
+      /* @__PURE__ */ jsxs2("span", { className: "pc-tip", "aria-hidden": "true", children: [
+        mode ? "Stop commenting" : "Comment",
+        /* @__PURE__ */ jsx2("kbd", { children: mode ? "V" : "C" })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs2("button", { "aria-pressed": historyOpen, onClick: () => setC({ historyOpen: !historyOpen }), title: "All comments", children: [
-      /* @__PURE__ */ jsx2(Icon, { name: "list" }),
-      /* @__PURE__ */ jsx2("span", { children: "History" }),
-      open > 0 && /* @__PURE__ */ jsx2("b", { children: open })
+    /* @__PURE__ */ jsxs2("button", { "aria-pressed": historyOpen, onClick: () => setC({ historyOpen: !historyOpen }), "aria-label": open ? `History, ${open} open` : "History", "aria-keyshortcuts": "H", children: [
+      /* @__PURE__ */ jsx2(Icon, { name: "history" }),
+      open > 0 && /* @__PURE__ */ jsx2("i", { className: "pc-dot" }),
+      /* @__PURE__ */ jsxs2("span", { className: "pc-tip", "aria-hidden": "true", children: [
+        open ? `History \xB7 ${open} open` : "History",
+        /* @__PURE__ */ jsx2("kbd", { children: "H" })
+      ] })
     ] })
   ] });
 }
+var TIP_DELAY = 300;
+function Tooltip() {
+  const [tip, setTip] = useState(null);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!matchMedia("(hover: hover)").matches) return;
+    let el = null, timer, hiddenAt = 0;
+    const hide = () => {
+      clearTimeout(timer);
+      if (el) hiddenAt = Date.now();
+      el = null;
+      setTip(null);
+    };
+    const over = (e) => {
+      const next = e.target.closest?.(".pc-root [data-tip]");
+      if (next === el) return;
+      if (!next) return hide();
+      const warm = el || Date.now() - hiddenAt < TIP_DELAY;
+      clearTimeout(timer);
+      el = next;
+      timer = setTimeout(() => setTip({ text: next.dataset.tip, rect: next.getBoundingClientRect() }), warm ? 0 : TIP_DELAY);
+    };
+    document.addEventListener("pointerover", over);
+    document.addEventListener("pointerdown", hide, true);
+    window.addEventListener("scroll", hide, true);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("pointerover", over);
+      document.removeEventListener("pointerdown", hide, true);
+      window.removeEventListener("scroll", hide, true);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!tip || !node) return;
+    const { rect } = tip;
+    const half = node.offsetWidth / 2;
+    const below = rect.top - node.offsetHeight - 10 < 8;
+    node.style.left = `${Math.max(8 + half, Math.min(rect.left + rect.width / 2, window.innerWidth - 8 - half))}px`;
+    if (below) {
+      node.dataset.side = "below";
+      node.style.top = `${rect.bottom + 10}px`;
+    } else node.style.bottom = `${window.innerHeight - rect.top + 10}px`;
+    node.getBoundingClientRect();
+    node.setAttribute("data-open", "");
+  }, [tip]);
+  return tip && /* @__PURE__ */ jsx2("span", { ref, className: "pc-tip float", role: "tooltip", children: tip.text }, tip.text + tip.rect.x + tip.rect.y);
+}
 
 // src/styles.js
 var styles_default = `
 .pc-root{
-  --pc-dark:#262A3D; --pc-dark-hover:#30354B; --pc-dark-text:#C5CAD8; --pc-dark-kbd:#3A3F57;
-  --pc-primary:#3366DD; --pc-primary-hover:#2A56C0;
-  --pc-surface:#FFFFFF; --pc-surface-2:#F6F7F9; --pc-surface-3:#EEF0F4;
-  --pc-border:#E2E5EB; --pc-border-strong:#CDD2DB;
-  --pc-text:#3B4152; --pc-text-strong:#2B3040; --pc-muted:#7A8194; --pc-faint:#A3A9B8;
-  --pc-danger:#C93C3C; --pc-danger-soft:#FDEDED; --pc-warn:#A86A00; --pc-warn-soft:#FFF3DC;
-  --pc-agent:#6B5BD6; --pc-agent-soft:#EFEDFC;
-  --pc-shadow:0 12px 32px rgba(30,35,55,.16), 0 2px 6px rgba(30,35,55,.08);
+  /* surfaces */
+  --pc-popover:#FFFFFF;                 /* component-on-sunken: Popover */
+  --pc-container:#FFFFFF;               /* container: Drawer */
+  --pc-field:#FFFFFF;                   /* component-on-container-strong: Textarea, secondary Button, active Tab */
+  --pc-field-hover:#F9F9F9;
+  --pc-component:#0000000f;             /* component: Tabs track, Badge, Kbd */
+  --pc-hover:#0000000f;                 /* transparent-hover */
+  --pc-active:#0000001f;
+  --pc-row-hover:#F0F0F0;               /* --pc-hover over the container, as a solid */
+  --pc-dark:#202020;                    /* standout: toolbar, Tooltip */
+  --pc-inverted:#000000f2; --pc-inverted-hover:#000000cc; --pc-inverted-active:#000000b3; --pc-on-inverted:#FFFFFF;
+  /* text */
+  --pc-text-strong:#000000df;           /* primary-foreground */
+  --pc-text:#0000009b;                  /* secondary-foreground */
+  --pc-faint:#00000072;                 /* tertiary-foreground */
+  --pc-disabled:#00000044;
+  /* lines */
+  --pc-border:#0000000f;                /* border-default */
+  --pc-border-strong:#00000026;
+  --pc-tab-border:#D9D9D9;              /* gray-6: Tabs indicator */
+  /* accents */
+  --pc-primary:#0090FF; --pc-primary-hover:#0588F0; --pc-primary-soft:#008FF519; --pc-primary-text:#0D74CE;
+  --pc-focus:#0080FF8c;                 /* brand-border-focus */
+  --pc-danger:#C12400cc; --pc-danger-solid:#E54D2E; --pc-danger-solid-hover:#DD4425; --pc-danger-solid-active:#D13415;
+  --pc-danger-soft:#FF200008; --pc-danger-soft-hover:#F52B0018; --pc-danger-soft-active:#FF35003a;
+  --pc-warn:#CC4E00; --pc-warn-soft:#FF9C0026;
+  --pc-agent:#6E56CF; --pc-agent-soft:#3201FF1a; --pc-agent-text:#6550B9;
+  --pc-done:#BBBBBB;
+  /* shadows: s-default, s-extra-large */
+  --pc-shadow-sm:0 0 0 .5px #0000000f, 0 1px 1px -1px #0000001a, 0 1px 2px 0 #0000000d;
+  --pc-shadow:0 0 0 .5px #0000000f, 0 8px 40px 0 #0000000d, 0 12px 32px -16px #00000026;
   --pc-z:2147483000;
-  font:13px/1.45 Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--pc-text);
-  -webkit-font-smoothing:antialiased;
+  font:400 13px/20px InterVariable, Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-feature-settings:"ss03";
+  color:var(--pc-text-strong); -webkit-font-smoothing:antialiased;
+}
+:root.dark .pc-root, .dark .pc-root, .pc-root.dark{
+  --pc-popover:#2A2A2A; --pc-container:#111111; --pc-field:#ffffff12; --pc-field-hover:#ffffff1b;
+  --pc-component:#ffffff12; --pc-hover:#ffffff1b; --pc-active:#ffffff22; --pc-row-hover:#282828;
+  --pc-dark:#222222;
+  --pc-inverted:#fffffff2; --pc-inverted-hover:#ffffffcc; --pc-inverted-active:#ffffffb3; --pc-on-inverted:#000000;
+  --pc-text-strong:#ffffffed; --pc-text:#ffffffaf; --pc-faint:#ffffff64; --pc-disabled:#ffffff55;
+  --pc-border:#ffffff12; --pc-border-strong:#ffffff2c; --pc-tab-border:#484848;
+  --pc-primary:#0090FF; --pc-primary-hover:#3B9EFF; --pc-primary-soft:#0077FF3a; --pc-primary-text:#70B8FF; --pc-focus:#3B94FFf7;
+  --pc-danger:#FF7A57d9; --pc-danger-solid:#E54D2E; --pc-danger-solid-hover:#EC6142; --pc-danger-solid-active:#FF977D;
+  --pc-danger-soft:#FF60390d; --pc-danger-soft-hover:#FF482D26; --pc-danger-soft-active:#FF6F4F4a;
+  --pc-warn:#FFA057; --pc-warn-soft:#FF7C0021;
+  --pc-agent-soft:#7A5BFF26; --pc-agent-text:#BAA7FF; --pc-done:#606060;
+  --pc-shadow-sm:0 0 0 .5px #ffffff12 inset;
+  --pc-shadow:0 0 0 .5px #ffffff12 inset, 0 8px 40px 0 #0000000d, 0 12px 32px -16px #00000026;
 }
 .pc-root *, .pc-root *::before, .pc-root *::after{ box-sizing:border-box; }
-.pc-root button{ font:inherit; color:inherit; cursor:pointer; }
-.pc-root textarea, .pc-root input{ font:inherit; color:inherit; }
-.pc-root :focus-visible{ outline:2px solid var(--pc-primary); outline-offset:2px; }
+/* :where() keeps these resets weaker than the component classes below */
+:where(.pc-root) button{ font:inherit; color:inherit; cursor:pointer; }
+:where(.pc-root) :is(textarea, input){ font:inherit; color:inherit; }
+.pc-root :focus-visible{ outline:2px solid var(--pc-focus); outline-offset:1px; }
 .pc-i{ flex:none; }
 
 html.pc-mode, html.pc-mode *{ cursor:crosshair !important; }
@@ -431,82 +585,152 @@ html.pc-mode .pc-root, html.pc-mode .pc-root *{ cursor:auto !important; }
 html.pc-mode .pc-root button, html.pc-mode .pc-root label{ cursor:pointer !important; }
 html.pc-mode .pc-grip{ cursor:grab !important; }
 
-/* buttons */
-.pc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; padding:0 10px; border-radius:6px; border:1px solid var(--pc-border-strong); background:var(--pc-surface); color:var(--pc-text); font-weight:500; white-space:nowrap; }
-.pc-btn:hover{ border-color:var(--pc-muted); }
-.pc-btn.primary{ background:var(--pc-primary); border-color:var(--pc-primary); color:#fff; }
-.pc-btn.primary:hover{ background:var(--pc-primary-hover); }
-.pc-btn[disabled]{ opacity:.5; cursor:not-allowed; }
-.pc-btn.ghost{ border-color:transparent; background:transparent; padding:0 8px; }
-.pc-btn.danger{ color:var(--pc-danger); }
-.pc-btn.danger:hover{ background:var(--pc-danger-soft); }
-.pc-btn.danger.solid{ background:var(--pc-danger); border-color:var(--pc-danger); color:#fff; }
-.pc-btn.danger.solid:hover{ filter:brightness(.92); }
-.pc-ibtn{ width:28px; height:28px; display:inline-grid; place-items:center; border:0; border-radius:6px; background:transparent; color:var(--pc-muted); }
-.pc-ibtn:hover{ background:var(--pc-surface-3); color:var(--pc-text); }
-.pc-trash{ margin-left:auto; }
-.pc-trash:hover{ color:var(--pc-danger); background:var(--pc-danger-soft); }
-.pc-chip{ height:28px; padding:0 10px; border-radius:14px; border:1px solid var(--pc-border-strong); background:var(--pc-surface); color:var(--pc-text); }
-.pc-chip:hover{ border-color:var(--pc-muted); }
-.pc-chip.on{ background:var(--pc-dark); border-color:var(--pc-dark); color:#fff; }
-.pc-tag{ display:inline-flex; align-items:center; height:18px; padding:0 7px; margin-right:6px; border-radius:9px; background:var(--pc-agent-soft); color:var(--pc-agent); font-style:normal; font-size:10px; font-weight:600; letter-spacing:.02em; }
+/* Button (int-btn). Default = secondary, md: 28px, 10px padding, 6px radius, 13px medium. */
+.pc-btn{ --bg:var(--pc-field); --bg-hover:var(--pc-field-hover); --bg-active:var(--bg-hover); --fg:var(--pc-text-strong); --fg-hover:var(--fg);
+  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:28px; padding:0 10px; border:0; border-radius:6px;
+  background:var(--bg); color:var(--fg); box-shadow:var(--pc-shadow-sm); font-size:13px; line-height:20px; font-weight:500; white-space:nowrap; user-select:none;
+  transition:color .15s cubic-bezier(0,0,.2,1), background-color .15s cubic-bezier(0,0,.2,1), transform .15s cubic-bezier(0,0,.2,1); }
+@media (hover:hover){ .pc-btn:enabled:hover{ background:var(--bg-hover); color:var(--fg-hover); } }
+.pc-btn:enabled:active{ background:var(--bg-active); transform:scale(.97); }
+.pc-btn.sm{ height:24px; padding:0 8px; gap:4px; }
+.pc-btn.primary{ --bg:var(--pc-inverted); --bg-hover:var(--pc-inverted-hover); --bg-active:var(--pc-inverted-active); --fg:var(--pc-on-inverted); box-shadow:none; }
+.pc-btn.tertiary{ --bg:var(--pc-component); --bg-hover:var(--pc-active); box-shadow:none; }
+.pc-btn.ghost{ --bg:transparent; --bg-hover:var(--pc-hover); --fg:var(--pc-text); --fg-hover:var(--pc-text-strong); box-shadow:none; }
+.pc-btn:disabled{ background:var(--pc-component); color:var(--pc-disabled); box-shadow:none; cursor:not-allowed; }
+/* icon-only transparent, sm: 24px */
+.pc-ibtn{ width:24px; height:24px; flex:none; display:inline-grid; place-items:center; padding:0; border:0; border-radius:6px; background:transparent; color:var(--pc-text); transition:background-color .15s, color .15s, transform .15s cubic-bezier(0,0,.2,1); }
+@media (hover:hover){ .pc-ibtn:hover{ background:var(--pc-hover); color:var(--pc-text-strong); } }
+.pc-ibtn:active{ transform:scale(.97); }
+@media (hover:hover){ .pc-trash:hover{ color:var(--pc-danger); background:var(--pc-danger-soft-hover); } }
+
+/* Badge: 20px, 6px padding, 12px, 4px radius */
+.pc-tag{ display:inline-flex; align-items:center; flex:none; height:20px; padding:0 6px; margin-right:6px; border-radius:4px; background:var(--pc-agent-soft); color:var(--pc-agent-text); font-style:normal; font-size:12px; line-height:16px; font-weight:400; user-select:none; }
+
+/* Tabs: gray track, white indicator with a gray-6 border */
+.pc-tabs{ display:inline-flex; align-self:flex-start; padding:0; border-radius:6px; background:var(--pc-component); font-weight:500; }
+.pc-tab{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--pc-text); white-space:nowrap; transition:color .2s cubic-bezier(.4,0,.2,1); }
+.pc-tab span{ color:var(--pc-faint); font-variant-numeric:tabular-nums; }
+@media (hover:hover){ .pc-tab:hover{ color:var(--pc-text-strong); } }
+.pc-tab[aria-selected="true"]{ background:var(--pc-field); border-color:var(--pc-tab-border); color:var(--pc-text-strong); }
+
+/* Kbd: 16px, 0.5px border, 4px radius, 11px medium uppercase */
+.pc-root kbd{ display:inline-flex; align-items:center; justify-content:center; flex:none; height:16px; min-width:16px; padding:0 3px; border:.5px solid var(--pc-border); border-radius:4px; background:var(--pc-component); color:var(--pc-text); font-family:inherit; font-size:11px; line-height:16px; font-weight:500; font-feature-settings:"ss02"; text-transform:uppercase; }
 
-/* toolbar */
-.pc-bar{ position:fixed; z-index:calc(var(--pc-z) + 4); left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:2px; padding:4px; border-radius:10px; background:var(--pc-dark); color:var(--pc-dark-text); box-shadow:var(--pc-shadow); user-select:none; }
-.pc-bar button{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:inherit; }
-.pc-bar button:hover{ background:var(--pc-dark-hover); color:#fff; }
-.pc-bar button[aria-pressed="true"]{ background:var(--pc-primary); color:#fff; }
-.pc-bar kbd{ font:inherit; font-size:11px; padding:0 5px; border-radius:4px; background:var(--pc-dark-kbd); color:#D9DCE6; }
-.pc-bar b{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--pc-primary); color:#fff; font-size:11px; display:grid; place-items:center; }
-.pc-grip{ display:grid; place-items:center; width:20px; height:30px; margin-left:2px; opacity:.6; cursor:grab; touch-action:none; }
-.pc-grip:hover{ opacity:1; }
-.pc-hint{ position:fixed; z-index:calc(var(--pc-z) + 1); left:50%; bottom:calc(68px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--pc-dark); color:#fff; padding:8px 12px; border-radius:8px; box-shadow:var(--pc-shadow); }
+/* Checkbox: 14px, 1.5px border, 4px radius, brand fill when checked */
+.pc-root input[type=checkbox]{ appearance:none; -webkit-appearance:none; position:relative; width:14px; height:14px; margin:0; flex:none; border:1.5px solid var(--pc-border-strong); border-radius:4px; background:transparent; background-size:60%; cursor:pointer; transition:background-color .2s cubic-bezier(.23,1,.32,1), background-size .15s cubic-bezier(.23,1,.32,1), transform .15s cubic-bezier(.23,1,.32,1); }
+@media (hover:hover){ .pc-root input[type=checkbox]:hover{ background-color:var(--pc-hover); } }
+.pc-root input[type=checkbox]:active{ transform:scale(.97); }
+.pc-root input[type=checkbox]:checked{ border-color:transparent; background:var(--pc-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
+@media (hover:hover){ .pc-root input[type=checkbox]:checked:hover{ background-color:var(--pc-primary-hover); } }
 
-/* pins and popovers */
-.pc-outline{ position:fixed; z-index:var(--pc-z); pointer-events:none; outline:2px solid var(--pc-primary); outline-offset:1px; border-radius:3px; background:rgba(51,102,221,.06); }
-.pc-outline.flash{ animation:pc-flash 1.6s ease-out forwards; }
+/* Textarea: white field with s-default, 8px radius; blue ring on focus */
+.pc-input{ display:block; width:100%; min-height:80px; resize:none; field-sizing:content; max-height:200px; border:0; border-radius:8px; padding:4px 8px; background:var(--pc-field); color:var(--pc-text-strong); caret-color:var(--pc-text); box-shadow:var(--pc-shadow-sm); font-size:13px; line-height:20px; transition:color .15s, background-color .15s, box-shadow .15s; }
+.pc-input::placeholder{ color:var(--pc-faint); }
+@media (hover:hover){ .pc-input:hover{ background:var(--pc-field-hover); } }
+.pc-input:focus{ outline:none; background:var(--pc-field); box-shadow:0 0 0 1px var(--pc-focus), inset 0 0 0 .5px var(--pc-focus); }
+
+/* toolbar: standout surface, dark like the Tooltip */
+.pc-bar{ position:fixed; z-index:calc(var(--pc-z) + 4); left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:2px; padding:4px; border-radius:10px; background:var(--pc-dark); color:#ffffffaf; box-shadow:0 0 0 .5px #ffffff12 inset, 0 8px 40px 0 #0000000d, 0 12px 32px -16px #00000026; user-select:none; }
+.pc-bar button{ --pc-tint:transparent; position:relative; display:inline-grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:inherit; transition:background-color .15s, color .15s, transform .15s cubic-bezier(0,0,.2,1); }
+@media (hover:hover){ .pc-bar button:hover{ --pc-tint:#ffffff1b; background:var(--pc-tint); color:#ffffffed; } }
+.pc-bar button:active{ transform:scale(.97); }
+.pc-bar button[aria-pressed="true"]{ --pc-tint:#ffffff22; background:var(--pc-tint); color:#ffffffed; box-shadow:0 0 0 .5px #ffffff12 inset; }
+.pc-bar kbd{ border-color:#ffffff12; background:#ffffff12; color:#ffffffaf; }
+/* open comments: a dot on the History icon. Its ring is the button's own color: the bar, plus the button's tint when hovered or pressed. */
+.pc-dot{ position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--pc-primary); box-shadow:0 0 0 1.5px var(--pc-tint), 0 0 0 1.5px var(--pc-dark); transition:box-shadow .15s; }
+/* Tooltip (DS): standout surface, 8px radius, 12px medium; shows after a short delay, hides at once */
+.pc-tip{ position:absolute; left:50%; bottom:calc(100% + 10px); display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background:var(--pc-dark); color:#ffffffed; box-shadow:0 0 0 .5px #ffffff12 inset; font-size:12px; line-height:16px; font-weight:500; white-space:nowrap; pointer-events:none; opacity:0; transform:translate(-50%, 4px) scale(.95); transform-origin:50% 100%; transition:opacity .15s, transform .15s cubic-bezier(.23,1,.32,1); }
+.pc-bar[data-tips="below"] .pc-tip{ bottom:auto; top:calc(100% + 10px); transform:translate(-50%, -4px) scale(.95); transform-origin:50% 0; }
+.pc-bar button:hover .pc-tip, .pc-bar button:focus-visible .pc-tip{ opacity:1; transform:translate(-50%, 0) scale(1); transition-duration:.2s; transition-delay:.3s; }
+@media (hover:none){ .pc-tip{ display:none; } }
+/* The same Tooltip for [data-tip] controls: <Tooltip> places it by the control, so a scrolling panel can't clip it */
+/* max-content: near the right edge, shrink-to-fit would wrap it narrower than it needs */
+.pc-tip.float{ position:fixed; z-index:calc(var(--pc-z) + 5); bottom:auto; width:max-content; max-width:min(320px, calc(100vw - 16px)); white-space:normal; overflow-wrap:anywhere; }
+.pc-tip.float[data-side="below"]{ transform:translate(-50%, -4px) scale(.95); transform-origin:50% 0; }
+.pc-tip.float[data-open]{ opacity:1; transform:translate(-50%, 0) scale(1); transition-duration:.2s; }
+.pc-grip{ display:grid; place-items:center; width:20px; height:28px; opacity:.5; cursor:grab; touch-action:none; transition:opacity .15s; }
+@media (hover:hover){ .pc-grip:hover{ opacity:1; } }
+/* Tooltip */
+.pc-hint{ position:fixed; z-index:calc(var(--pc-z) + 1); left:50%; bottom:calc(60px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); padding:6px 10px; border-radius:8px; background:var(--pc-dark); color:#ffffffed; box-shadow:0 0 0 .5px #ffffff12 inset; font-size:12px; line-height:16px; font-weight:500; white-space:nowrap; animation:pc-hint-in .15s cubic-bezier(0,0,.2,1); }
+/* translate (the property) composes with the centering transform above */
+@keyframes pc-hint-in{ from{ opacity:0; translate:0 4px; } }
+
+/* pins */
+.pc-outline{ position:fixed; z-index:var(--pc-z); pointer-events:none; outline:1.5px solid var(--pc-primary); outline-offset:1px; border-radius:4px; background:var(--pc-primary-soft); }
+.pc-outline.flash{ animation:pc-flash 1.6s cubic-bezier(0,0,.2,1) forwards; }
 @keyframes pc-flash{ 0%,60%{ opacity:1 } 100%{ opacity:0 } }
-.pc-pin{ position:fixed; z-index:calc(var(--pc-z) + 1); transform:translate(-2px,-100%); min-width:26px; height:26px; padding:0 7px; border:2px solid #fff; border-radius:13px 13px 13px 2px; background:var(--pc-primary); color:#fff !important; font-size:12px !important; font-weight:600; box-shadow:var(--pc-shadow); }
-.pc-pin.on{ background:var(--pc-dark); }
+.pc-pin{ position:fixed; z-index:calc(var(--pc-z) + 1); transform:translate(-2px,-100%); min-width:24px; height:24px; padding:0 7px; border:2px solid #fff; border-radius:12px 12px 12px 2px; background:var(--pc-primary); color:#fff !important; font-size:12px !important; font-weight:500; font-variant-numeric:tabular-nums; box-shadow:var(--pc-shadow); transform-origin:left bottom; }
+.pc-pin.on{ background:#202020; z-index:calc(var(--pc-z) + 2); }
 .pc-pin.queued, .pc-n.queued{ background:var(--pc-agent); }
-.pc-pin.done{ background:var(--pc-faint); }
-.pc-pin.flash{ animation:pc-pin .5s ease-out 2; }
-@keyframes pc-pin{ 50%{ transform:translate(-2px,-100%) scale(1.25) } }
-.pc-pop{ position:fixed; z-index:calc(var(--pc-z) + 2); width:320px; padding:12px; display:flex; flex-direction:column; gap:10px; background:var(--pc-surface); border:1px solid var(--pc-border); border-radius:8px; box-shadow:var(--pc-shadow); max-height:calc(100vh - 16px); overflow:auto; }
-.pc-head{ display:flex; align-items:center; gap:8px; }
-.pc-head span{ flex:1; color:var(--pc-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-.pc-head .pc-tag{ margin:0; }
-.pc-target, .pc-place{ font-size:12px; color:var(--pc-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-.pc-head + .pc-target{ margin-top:-4px; }
-.pc-input{ width:100%; resize:vertical; border:1px solid var(--pc-border-strong); border-radius:6px; padding:8px 10px; font-size:14px !important; background:var(--pc-surface); }
-.pc-input:focus{ outline:none; border-color:var(--pc-primary); }
+.pc-pin.done{ background:var(--pc-done); padding:0; width:24px; display:grid; place-items:center; }
+.pc-pin .pc-i, .pc-n .pc-i{ width:12px; height:12px; }
+.pc-pin.flash{ animation:pc-pin .5s cubic-bezier(.23,1,.32,1) 2; }
+@keyframes pc-pin{ 50%{ transform:translate(-2px,-100%) scale(1.15) } }
+/* a pin that was just left: grows out of its tail, where the draft popover was */
+.pc-pin.born{ animation:pc-pin-in .2s cubic-bezier(.32,.72,0,1); }
+@keyframes pc-pin-in{ from{ opacity:0; transform:translate(-2px,-100%) scale(.8) } }
+
+/* Popover: 10px radius, s-extra-large, 0.5px dividers */
+.pc-pop{ position:fixed; z-index:calc(var(--pc-z) + 5); width:min(320px, calc(100vw - 16px)); padding:0; display:flex; flex-direction:column; background:var(--pc-popover); color:var(--pc-text-strong); border-radius:10px; box-shadow:var(--pc-shadow); max-height:calc(100vh - 16px); overflow:hidden; animation:pc-pop-in .18s cubic-bezier(.32,.72,0,1); }
+/* transform-origin is set inline, at the pin or click point */
+@keyframes pc-pop-in{ from{ opacity:0; transform:scale(.97) } }
+.pc-head{ flex:none; display:flex; align-items:center; gap:2px; min-height:40px; padding:8px 8px 8px 12px; border-bottom:.5px solid var(--pc-border); }
+.pc-head b{ flex:1; font-weight:500; }
+.pc-head .pc-tag{ margin:0 6px; }
+/* header, reply field and actions stay put; only the messages scroll */
+.pc-pane{ flex:none; display:flex; flex-direction:column; gap:10px; padding:12px; }
+.pc-pane.msgs{ flex:0 1 auto; min-height:48px; overflow:auto; overscroll-behavior:contain; padding-bottom:0; }
+.pc-pane.msgs + .pc-pane{ padding-top:10px; }
 .pc-actions{ display:flex; justify-content:flex-end; gap:8px; }
-.pc-actions.start{ justify-content:flex-start; border-top:1px solid var(--pc-border); padding-top:10px; }
-.pc-msg{ font-size:14px; color:var(--pc-text-strong); white-space:pre-wrap; }
-.pc-meta{ display:block; font-size:12px; color:var(--pc-muted); margin-bottom:2px; }
-.pc-lost{ font-size:12px; color:var(--pc-warn); background:var(--pc-warn-soft); border-radius:6px; padding:6px 8px; }
+.pc-actions.foot{ flex:none; padding:6px 8px; border-top:.5px solid var(--pc-border); }
+.pc-msg{ white-space:pre-wrap; overflow-wrap:anywhere; }
+.pc-meta{ display:block; font-size:12px; line-height:16px; color:var(--pc-faint); margin-bottom:2px; }
+.pc-lost{ font-size:12px; line-height:16px; color:var(--pc-warn); background:var(--pc-warn-soft); border-radius:6px; padding:6px 8px; }
 
-/* history */
-.pc-history{ position:fixed; z-index:calc(var(--pc-z) + 3); top:0; right:0; bottom:0; width:360px; max-width:100%; background:var(--pc-surface); border-left:1px solid var(--pc-border); box-shadow:var(--pc-shadow); display:flex; flex-direction:column; }
-.pc-history header{ display:flex; align-items:center; gap:4px; padding:12px 12px 8px 16px; font-size:15px; }
-.pc-history header b{ flex:1; color:var(--pc-text-strong); }
-.pc-confirm{ margin:0 16px 12px; padding:10px 12px; border-radius:8px; background:var(--pc-danger-soft); color:var(--pc-text-strong); display:flex; flex-direction:column; gap:8px; }
-.pc-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px; border-bottom:1px solid var(--pc-border); }
-.pc-selbar{ display:flex; align-items:center; gap:8px; min-height:44px; padding:6px 16px; border-bottom:1px solid var(--pc-border); }
-.pc-check{ flex:1; display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
-.pc-check input, .pc-pick{ width:16px; height:16px; margin:0; accent-color:var(--pc-primary); flex:none; }
-.pc-groups{ flex:1; overflow:auto; padding:8px 0 16px; }
-.pc-groups h5{ margin:12px 16px 4px; font-size:12px; font-weight:600; color:var(--pc-muted); text-transform:uppercase; letter-spacing:.04em; }
-.pc-row{ display:flex; align-items:flex-start; padding-left:16px; }
-.pc-row:hover{ background:var(--pc-surface-2); }
-.pc-pick{ margin-top:11px; }
-.pc-item{ flex:1; min-width:0; display:flex; gap:10px; padding:8px 16px 8px 10px; border:0; background:transparent; text-align:left; }
-.pc-n{ flex:none; min-width:22px; height:22px; padding:0 6px; border-radius:11px 11px 11px 2px; background:var(--pc-primary); color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center; }
-.pc-row.done .pc-n{ background:var(--pc-faint); }
-.pc-body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
-.pc-text{ color:var(--pc-text-strong); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
-.pc-row.done .pc-text{ color:var(--pc-muted); }
-.pc-empty{ margin:16px; color:var(--pc-muted); }
+/* History: right Drawer */
+.pc-history{ position:fixed; z-index:calc(var(--pc-z) + 3); top:0; right:0; bottom:0; width:384px; max-width:100%; background:var(--pc-container); color:var(--pc-text-strong); border-left:.5px solid var(--pc-border); box-shadow:var(--pc-shadow); display:flex; flex-direction:column;
+  transform:translateX(100%); visibility:hidden; transition:transform .18s cubic-bezier(.32,.72,0,1), visibility 0s .18s; }
+/* a transition, not keyframes: toggling History mid-slide reverses it smoothly. Closing is faster than opening */
+.pc-history[data-open]{ transform:none; visibility:visible; transition:transform .25s cubic-bezier(.32,.72,0,1); }
+.pc-history header{ display:flex; align-items:center; gap:6px; padding:16px 16px 12px 20px; }
+.pc-history header b{ flex:1; font-size:18px; line-height:24px; font-weight:500; }
+.pc-history > .pc-tabs{ display:flex; align-self:stretch; margin:0 20px 12px; }
+/* narrow drawer or 4-digit counts: tabs shrink instead of overflowing */
+.pc-history > .pc-tabs .pc-tab{ flex:1 1 auto; min-width:0; justify-content:center; gap:4px; padding:0 6px; overflow:hidden; }
+.pc-selbar{ display:flex; align-items:center; gap:6px; min-height:40px; padding:6px 16px 6px 20px; border-top:.5px solid var(--pc-border); border-bottom:.5px solid var(--pc-border); }
+/* only the box and its text toggle; margin:0 against the page's own label styles */
+.pc-check{ flex:none; display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer; color:var(--pc-text); font-weight:500; user-select:none; }
+.pc-check:has(:checked){ color:var(--pc-text-strong); }
+.pc-bulk{ display:flex; gap:2px; margin:0 -4px 0 auto; }
+/* Command list: 6px-radius items */
+/* the bottom padding keeps the last row clear of the toolbar when the drawer is full width */
+.pc-list{ flex:1; overflow:auto; padding:8px 12px 72px; }
+/* row: checkbox, pin and the first text line share one 20px line */
+.pc-row{ position:relative; display:flex; align-items:flex-start; gap:10px; padding:8px; border-radius:6px; transition:background-color .15s, opacity .15s cubic-bezier(.4,0,1,1); }
+/* fades before it leaves the filtered list */
+.pc-row.leaving{ opacity:0; pointer-events:none; }
+@media (hover:hover){ .pc-row:hover{ background:var(--pc-hover); } }
+.pc-root .pc-row .pc-pick{ width:14px; height:14px; flex:none; margin:3px 0 0; }
+.pc-item{ flex:1; min-width:0; display:flex; align-items:flex-start; gap:10px; padding:0; border:0; background:transparent; text-align:left; }
+.pc-n{ flex:none; min-width:20px; height:20px; padding:0 5px; border-radius:10px 10px 10px 2px; background:var(--pc-primary); color:#fff; font-size:11px; font-weight:500; font-variant-numeric:tabular-nums; display:grid; place-items:center; }
+/* row actions: the thread's Resolve, Mark for Agent and Delete; shown on hover or focus, always on touch */
+/* overlaid at the row's right edge so hidden actions take no width; the fade matches the row's hover fill */
+.pc-row-actions{ position:absolute; top:6px; right:6px; display:flex; gap:2px; padding-left:20px; border-radius:6px; background:linear-gradient(to right, transparent, var(--pc-row-hover) 20px); opacity:0; pointer-events:none; transition:opacity .15s; }
+.pc-row:hover .pc-row-actions, .pc-row:focus-within .pc-row-actions{ opacity:1; pointer-events:auto; }
+/* on touch they are always there, so they take their own column instead of covering the text */
+@media (hover:none){ .pc-row-actions{ position:static; flex:none; opacity:1; pointer-events:auto; padding-left:0; background:none; margin:-2px -2px 0 0; } }
+.pc-agent[aria-pressed="true"]{ color:var(--pc-agent-text); background:var(--pc-agent-soft); }
+.pc-row.done .pc-n{ background:var(--pc-done); padding:0; width:20px; }
+.pc-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
+.pc-text{ font-weight:450; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+.pc-row.done .pc-text{ color:var(--pc-faint); }
+.pc-body .pc-meta{ display:flex; align-items:center; gap:6px; min-width:0; margin:0; }
+.pc-clip{ min-width:0; overflow:hidden; white-space:nowrap; }
+.pc-clip.pc-cut{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent); }
+.pc-body .pc-tag{ margin:0; }
+.pc-empty{ margin:8px; color:var(--pc-faint); }
+
+@media (prefers-reduced-motion:reduce){ .pc-root *{ transition:none !important; animation:none !important; } }
 `;
 
 // src/index.jsx
@@ -528,20 +752,77 @@ function useStyles() {
     document.head.appendChild(s);
   }, []);
 }
+var clippers = (el) => {
+  const out = [];
+  for (let n = el.parentElement; n && n !== document.body; n = n.parentElement) {
+    const s = getComputedStyle(n);
+    if (s.overflowX !== "visible" || s.overflowY !== "visible") out.push(n);
+  }
+  return out;
+};
+var inside = (x, y, els) => els.every((n) => {
+  const r = n.getBoundingClientRect();
+  return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+});
+var PIN_H = 24;
+var pinWidth = (c) => c.status === "resolved" ? 24 : Math.max(24, 18 + 7 * String(c.n).length);
+function place(list, pos) {
+  const placed = [];
+  list.filter((c) => pos[c.id]).sort((a, b) => a.n - b.n).forEach((c) => {
+    const p = pos[c.id], w = pinWidth(c);
+    p.x = Math.max(4, Math.min(p.x, window.innerWidth - w - 2));
+    p.y = Math.max(PIN_H + 4, Math.min(p.y, window.innerHeight - 4));
+    const startX = p.x;
+    for (let moved = true; moved; ) {
+      moved = false;
+      for (const q of placed) {
+        if (Math.abs(p.y - q.y) < PIN_H && p.x < q.x + q.w + 2 && p.x + w + 2 > q.x) {
+          p.x = q.x + q.w + 2;
+          moved = true;
+        }
+      }
+      if (p.x + w > window.innerWidth - 2) {
+        p.x = startX;
+        p.y += PIN_H + 2;
+        moved = true;
+      }
+    }
+    placed.push({ x: p.x, y: p.y, w });
+  });
+}
 function useFrame(list, openId, flashId) {
   const [frame, setFrame] = useState2({ screen: null, pos: {} });
   useEffect2(() => {
-    let raf, last = "";
+    let raf, last = "", lastScreen = null, dirty = true, found = {};
+    const mo = new MutationObserver((records) => {
+      if (records.some((r) => !ours(r.target.nodeType === 1 ? r.target : r.target.parentElement))) dirty = true;
+    });
+    mo.observe(document.body, { childList: true, characterData: true, subtree: true });
+    const timer = setInterval(() => {
+      dirty = true;
+    }, 1e3);
     const tick = () => {
       const screen = getConfig().getScreen().key;
+      const shown = list.filter((c) => c.screen === screen && (c.status === "open" || c.id === openId));
+      if (dirty || screen !== lastScreen) {
+        found = {};
+        shown.forEach((c) => {
+          const el = findAnchor(c.anchor);
+          if (el) found[c.id] = { el, clip: clippers(el) };
+        });
+        dirty = false;
+        lastScreen = screen;
+      }
       const pos = {};
-      list.forEach((c) => {
-        if (c.screen !== screen || c.status !== "open" && c.id !== openId) return;
-        const el = findAnchor(c.anchor);
-        if (!el || !el.getClientRects().length) return;
-        const r = rectOf(el);
-        pos[c.id] = { x: r.left + c.anchor.offset.x * r.width, y: r.top + c.anchor.offset.y * r.height, rect: c.id === flashId ? r : null };
+      shown.forEach((c) => {
+        const f = found[c.id];
+        if (!f || !f.el.isConnected || !f.el.getClientRects().length) return;
+        const r = rectOf(f.el);
+        const x = r.left + c.anchor.offset.x * r.width, y = r.top + c.anchor.offset.y * r.height;
+        if (c.id !== openId && !inside(x, y, f.clip)) return;
+        pos[c.id] = { x, y, rect: c.id === flashId ? r : null };
       });
+      place(shown, pos);
       const key = JSON.stringify([screen, pos]);
       if (key !== last) {
         last = key;
@@ -550,7 +831,11 @@ function useFrame(list, openId, flashId) {
       raf = requestAnimationFrame(tick);
     };
     tick();
-    return () => cancelAnimationFrame(raf);
+    return () => {
+      cancelAnimationFrame(raf);
+      clearInterval(timer);
+      mo.disconnect();
+    };
   }, [list, openId, flashId]);
   return frame;
 }
@@ -566,7 +851,7 @@ function ProtoComments(props) {
     setRoot(el);
     return () => el.remove();
   }, []);
-  const { list, mode, draft, openId, historyOpen, flashId } = useC((s) => s);
+  const { list, mode, draft, openId, flashId } = useC((s) => s);
   const [hover, setHover] = useState2(null);
   useEffect2(() => {
     const load = () => {
@@ -597,6 +882,7 @@ function ProtoComments(props) {
         setC({ mode: false, draft: null });
       }
       if (e.code === "KeyC" && !c.mode && !typing(e.target)) setC({ mode: true, openId: null });
+      if (e.code === "KeyH" && !typing(e.target)) setC({ historyOpen: !c.historyOpen });
     };
     window.addEventListener("keydown", onKey, true);
     return () => window.removeEventListener("keydown", onKey, true);
@@ -623,7 +909,12 @@ function ProtoComments(props) {
       document.documentElement.classList.remove("pc-mode");
     };
   }, [mode, cfg2.headingSelector]);
-  const { pos } = useFrame(list, openId, flashId);
+  const { screen, pos } = useFrame(list, openId, flashId);
+  const lastScreen = useRef2(screen);
+  useEffect2(() => {
+    if (lastScreen.current !== null && screen !== lastScreen.current) setC({ openId: null, draft: null });
+    lastScreen.current = screen;
+  }, [screen]);
   const here = list.filter((c) => pos[c.id]);
   const open = list.find((c) => c.id === openId);
   if (!root) return null;
@@ -633,9 +924,10 @@ function ProtoComments(props) {
       here.map((c) => /* @__PURE__ */ jsx3(Pin, { c, x: pos[c.id].x, y: pos[c.id].y }, c.id)),
       here.map((c) => pos[c.id].rect && /* @__PURE__ */ jsx3("div", { className: "pc-outline flash", style: pos[c.id].rect }, `f${c.id}`)),
       draft && /* @__PURE__ */ jsx3(Draft, { draft }),
-      open && (pos[open.id] ? /* @__PURE__ */ jsx3(Thread, { c: open, x: pos[open.id].x, y: pos[open.id].y }) : /* @__PURE__ */ jsx3(Thread, { c: open, x: window.innerWidth / 2 - 160, y: 120, lost: true })),
-      historyOpen && /* @__PURE__ */ jsx3(History, {}),
+      open && (pos[open.id] ? /* @__PURE__ */ jsx3(Thread, { c: open, x: pos[open.id].x, y: pos[open.id].y }, open.id) : /* @__PURE__ */ jsx3(Thread, { c: open, x: window.innerWidth / 2 - 160, y: 120, lost: true }, open.id)),
+      /* @__PURE__ */ jsx3(History, {}),
       /* @__PURE__ */ jsx3(Toolbar, {}),
+      /* @__PURE__ */ jsx3(Tooltip, {}),
       mode && /* @__PURE__ */ jsx3("div", { className: "pc-hint", children: "Click an element to comment \xB7 V to stop" })
     ] }),
     root

package/package.json

@@ -1,10 +1,20 @@
 {
   "name": "proto-comments",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Figma-style review comments on a running React prototype, split by screen even in single-URL apps, stored in a JSON file a coding agent can apply.",
   "type": "module",
   "license": "MIT",
-  "keywords": ["react", "prototype", "comments", "review", "feedback", "annotations", "design", "ai-agent", "claude"],
+  "keywords": [
+    "react",
+    "prototype",
+    "comments",
+    "review",
+    "feedback",
+    "annotations",
+    "design",
+    "ai-agent",
+    "claude"
+  ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -13,10 +23,20 @@
     "./storage": "./server/storage.js",
     "./package.json": "./package.json"
   },
-  "bin": { "proto-comments": "./bin/proto-comments.js" },
-  "files": ["dist", "server", "bin", "README.md", "LICENSE"],
+  "bin": {
+    "proto-comments": "bin/proto-comments.js"
+  },
+  "files": [
+    "dist",
+    "server",
+    "bin",
+    "README.md",
+    "LICENSE"
+  ],
   "sideEffects": false,
-  "engines": { "node": ">=18" },
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
     "build": "node build.mjs",
     "prepublishOnly": "npm run build"

package/server/storage.js

@@ -3,6 +3,8 @@ import path from 'node:path';
 
 /* Comments live in one JSON file in the project, so a coding agent can read and resolve them directly. */
 export const DEFAULT_FILE = 'comments/comments.json';
+/* Same limit as the comment field in src/ui.jsx. */
+export const MAX_TEXT = 5000;
 
 export function createStorage(file = DEFAULT_FILE) {
   const abs = path.resolve(process.cwd(), file);
@@ -18,21 +20,25 @@ export function createStorage(file = DEFAULT_FILE) {
     await fs.writeFile(abs, JSON.stringify(list, null, 2) + '\n');
   }
   const now = () => new Date().toISOString();
+  /* Numbers count open comments only: resolved ones show a check, so a new comment after them is #1 again. */
+  const nextN = list => Math.max(0, ...list.filter(c => c.status === 'open').map(c => c.n)) + 1;
 
   /** One entry point for every transport (Next route, standalone server): returns { status, json }. */
   async function handle(method, body) {
     if (method === 'GET') return { status: 200, json: await read() };
+    const text = body?.text ?? body?.reply?.text;
+    if (typeof text === 'string' && text.length > MAX_TEXT) return { status: 413, json: { error: `Comment is longer than ${MAX_TEXT} characters` } };
     return locked(async () => {
       const list = await read();
       if (method === 'POST') {
         const { screen, screenLabel, context, snapshot, anchor, text, author } = body;
-        const n = Math.max(0, ...list.map(c => c.n)) + 1;
+        const n = nextN(list);
         const c = { id: `c${Date.now().toString(36)}`, n, screen, screenLabel, context, anchor, text, author, status: 'open', queued: false, createdAt: now(), replies: [], snapshot };
         await write([...list, c]);
         return { status: 200, json: c };
       }
       if (method === 'PATCH') {
-        const { id, ids, queued, status, reply } = body;
+        const { id, ids, queued, status, reply, author } = body;
         if (ids) {
           list.forEach(x => { if (ids.includes(x.id)) x.queued = !!queued; });
           await write(list);
@@ -40,8 +46,13 @@ export function createStorage(file = DEFAULT_FILE) {
         }
         const c = list.find(x => x.id === id);
         if (!c) return { status: 404, json: { error: 'Not found' } };
+        if (status === 'open' && c.status === 'resolved') {
+          /* Reopened: its old number may belong to a newer open comment by now. */
+          if (list.some(x => x.status === 'open' && x.n === c.n)) c.n = nextN(list);
+          delete c.resolvedBy; delete c.resolvedAt;
+        }
         if (status) c.status = status;
-        if (status === 'resolved') c.queued = false;
+        if (status === 'resolved') Object.assign(c, { queued: false, resolvedBy: author, resolvedAt: now() });
         if (reply) c.replies.push({ ...reply, createdAt: now() });
         await write(list);
         return { status: 200, json: c };