bottleship 0.1.0-prototype.1 → 0.1.0-prototype.2

package/review-app/src/kit/code.tsx

@@ -0,0 +1,217 @@
+// The changes, grouped in tour order with the reason for each group; files no group covers come last.
+import { useEffect, useState, type ReactNode } from "react";
+import { diffs, pr, rows, type Row as DiffRow } from "./pr";
+import { useNav, type Group } from "./review";
+import { addComment, anchorOf, askInChat, Composer, dedent, rangeLabel, rowAt, ThreadView, threadsFor, useComments, type Anchor, type Thread } from "./comments";
+import { FileLine, Icon } from "./ui";
+
+// a small highlighter for C-like languages, enough to read a diff
+const KW = /^(const|let|var|function|return|if|else|export|import|from|async|await|for|of|new|type|interface|try|catch|finally|throw|as|in|class|extends|def|fn|func|pub|struct|enum|match|switch|case|break|continue|while|default|package|static|val)$/;
+const TY = /^(string|number|boolean|null|undefined|true|false|void|None|True|False|self|this)$/;
+export function highlight(src: string): ReactNode[] {
+  const re = /(\/\/.*$|#.*$)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\b0x[0-9a-f]+\b|\b\d+(?:\.\d+)?\b)|([A-Za-z_$][\w$]*)(?=\s*\()|([A-Za-z_$][\w$]*)/gi;
+  const out: ReactNode[] = [];
+  let last = 0, m: RegExpExecArray | null;
+  while ((m = re.exec(src))) {
+    out.push(src.slice(last, m.index));
+    const tok = m[0];
+    const cls = m[1] ? "com" : m[2] ? "str" : m[3] ? "num" : KW.test(tok) ? "kw" : m[4] ? "fn" : TY.test(tok) ? "ty" : "";
+    out.push(cls ? <span key={m.index} className={`tok-${cls}`}>{tok}</span> : tok);
+    last = m.index + tok.length;
+  }
+  out.push(src.slice(last));
+  return out;
+}
+
+function Line({ r, sel, onPick, onEnter }: { r: DiffRow; sel?: boolean; onPick?: (e: React.MouseEvent) => void; onEnter?: () => void }) {
+  const c = r.t === "c" ? "" : r.t;
+  return (
+    <div className={`lr${sel ? " sel" : ""}`} onMouseEnter={onEnter}>
+      <div className={`ln ${c}`}>
+        {onPick && <button className="add-c" aria-label={`Comment on line ${r.t === "d" ? r.o : r.n}`} title="Comment, or drag for several lines" onMouseDown={onPick}>{Icon.plus}</button>}
+        {r.t === "d" ? "\u2212" : r.n}
+      </div>
+      <div className={`code ${c}`} data-line={r.t === "d" ? undefined : r.n}>{highlight(r.s)}{r.s ? "" : " "}</div>
+    </div>
+  );
+}
+
+// the lines in range; everything else folds behind an expander. PR files take comments: press or drag in the gutter.
+// Threads show where their line is in range; with strays, also those no other range of the file holds.
+export function Diff({ file, lines, strays }: { file: string; lines?: [number, number][]; strays?: boolean }) {
+  const all = rows(diffs[file] ?? "");
+  const commentable = true;
+  const comments = useComments();
+  const threads = commentable ? threadsFor(file, comments) : [];
+  const [open, setOpen] = useState<Set<number>>(new Set());
+  // the rows being picked by a drag in the gutter, then commented on
+  const [pick, setPick] = useState<{ from: number; to: number; dragging: boolean }>();
+  useEffect(() => {
+    if (!pick?.dragging) return;
+    const up = () => setPick((p) => p && { ...p, dragging: false });
+    addEventListener("mouseup", up);
+    return () => removeEventListener("mouseup", up);
+  }, [pick?.dragging]);
+
+  // where each thread sits; one whose line left the diff shows at the end
+  const at = new Map<number, Thread[]>();
+  const loose: Thread[] = [];
+  const within = (i: number, ranges = lines) => !ranges || ranges.some(([a, b]) => (all[i].n ?? all[i].at!) >= a && (all[i].n ?? all[i].at!) <= b);
+  const { review } = useNav();
+  const others = strays ? review.groups.filter((g) => g.file === file && g.lines !== lines) : [];
+  for (const t of threads) {
+    const i = t.outdated ? -1 : rowAt(all, t.side!, t.line!);
+    const mine = i >= 0 ? within(i) || (!!strays && !others.some((g) => within(i, g.lines))) : !lines || !!strays;
+    if (!mine) continue;
+    if (i < 0) loose.push(t);
+    else at.set(i, [...(at.get(i) ?? []), t]);
+  }
+  const lo = pick ? Math.min(pick.from, pick.to) : -1;
+  const hi = pick ? Math.max(pick.from, pick.to) : -1;
+  const linesOf = (a: Partial<Anchor>) => {
+    if (!a.side || !a.line) return undefined;
+    const end = rowAt(all, a.side, a.line);
+    const begin = a.startLine ? rowAt(all, a.startSide ?? a.side, a.startLine) : end;
+    return begin < 0 || end < 0 ? undefined : all.slice(begin, end + 1).filter((r) => r.t !== "d").map((r) => r.s);
+  };
+  const picked = (): Anchor => {
+    const end = anchorOf(all[hi]);
+    const begin = anchorOf(all[lo]);
+    return lo === hi ? end : { ...end, startSide: begin.side, startLine: begin.line };
+  };
+
+  const out: ReactNode[] = [];
+  const after = (i: number) => {
+    for (const t of at.get(i) ?? []) out.push(<div key={`t${t.key}`} className="dl-span"><ThreadView thread={t} original={linesOf(t)} /></div>);
+    if (pick && !pick.dragging && i === hi) {
+      const a = picked();
+      const rs = all.slice(lo, hi + 1);
+      out.push(
+        <div key="composer" className="dl-span">
+          <div className="thread">
+            <Composer github label={rangeLabel(a)} suggest={rs.every((r) => r.t !== "d") ? rs.map((r) => r.s) : undefined} onCancel={() => setPick(undefined)}
+              onSave={async (body, d) => {
+                const e = await addComment({ ...d, path: file, ...a, body });
+                if (!e) setPick(undefined);
+                return e;
+              }}
+              onAsk={async (body) => {
+                const e = await askInChat({ body, quotes: [{ kind: "selection", text: dedent(rs.map((r) => r.s)), where: `${file.split("/").pop()}, ${rangeLabel(a).toLowerCase()}` }] });
+                if (!e) setPick(undefined);
+                return e;
+              }} />
+          </div>
+        </div>,
+      );
+    }
+  };
+  let hidden: [DiffRow, number][] = [];
+  const show = (r: DiffRow, i: number) => {
+    out.push(<Line key={i} r={r} sel={i >= lo && i <= hi} onPick={commentable ? (e) => { e.preventDefault(); setPick({ from: i, to: i, dragging: true }); } : undefined} onEnter={pick?.dragging ? () => setPick({ ...pick, to: i }) : undefined} />);
+    after(i);
+  };
+  const flush = (key: number) => {
+    if (!hidden.length) return;
+    const rs = hidden;
+    hidden = [];
+    if (open.has(key)) rs.forEach(([r, i]) => show(r, i));
+    else out.push(<button key={`f${key}`} className="more" onClick={() => setOpen(new Set(open).add(key))}>{Icon.expand}<span>{rs.length} {rs.every(([r]) => r.t === "c") ? (rs.length === 1 ? "unchanged line" : "unchanged lines") : `${rs.length === 1 ? "line" : "lines"} from other parts of the tour`}</span></button>);
+  };
+  const inRange = (_: DiffRow, i: number) => at.has(i) || within(i);
+  all.forEach((r, i) => {
+    if (inRange(r, i)) {
+      flush(i);
+      show(r, i);
+    } else hidden.push([r, i]);
+  });
+  flush(all.length);
+  return (
+    <div className={`diff${pick?.dragging ? " picking" : ""}`} data-file={file}>
+      <div className="dl">{out}</div>
+      {loose.length > 0 && <div className="loose">{loose.map((t) => <ThreadView key={t.key} thread={t} />)}</div>}
+    </div>
+  );
+}
+
+const reviewed = new Set<string>();
+
+function GroupView({ g, strays }: { g: Group; strays?: boolean }) {
+  const { review, go } = useNav();
+  const [done, setDone] = useState(reviewed.has(g.id));
+  // reviewing a file folds its diff; the file line opens it again
+  const [open, setOpen] = useState(!done);
+  const ci = review.chapters.findIndex((c) => c.id === g.chapter);
+  const f = pr.files.find((x) => x.path === g.file);
+  return (
+    <section className={`group${done ? " done" : ""}`} id={`g-${g.id}`}>
+      <div className="head">
+        <h2 className="h">{g.title}</h2>
+        <p className="prose">{g.why}</p>
+      </div>
+      <div className={`file${open ? "" : " closed"}`}>
+        <div className="fh">
+          <button className="fh-toggle" aria-expanded={open} onClick={() => setOpen(!open)}><FileLine path={g.file} add={f?.add} del={f?.del} /></button>
+          {ci >= 0 && <button className="btn ghost sm" onClick={() => go({ chapter: g.chapter! })}>{Icon.play} Chapter {ci + 1}</button>}
+          <label className="reviewed">
+            <input type="checkbox" checked={done} onChange={(e) => { e.target.checked ? reviewed.add(g.id) : reviewed.delete(g.id); setDone(e.target.checked); setOpen(!e.target.checked); window.dispatchEvent(new Event("reviewed")); }} />
+            Reviewed
+          </label>
+        </div>
+        {open && <Diff file={g.file} lines={g.lines} strays={strays} />}
+      </div>
+    </section>
+  );
+}
+
+export const isReviewed = (id: string) => reviewed.has(id);
+
+// a changed file the tour does not talk about: one row, as in GitHub's list of changed files, its diff opening in place
+function OtherFile({ path, focus }: { path: string; focus?: string }) {
+  const id = `file-${path}`;
+  const f = pr.files.find((x) => x.path === path);
+  const threads = threadsFor(path, useComments()).length;
+  const [done, setDone] = useState(reviewed.has(id));
+  const [open, setOpen] = useState(focus === id);
+  useEffect(() => {
+    if (focus === id) setOpen(true);
+  }, [focus]);
+  return (
+    <div className={`file other${open ? "" : " closed"}${done ? " done" : ""}`} id={`g-${id}`}>
+      <div className="fh">
+        <button className="fh-toggle" aria-expanded={open} onClick={() => setOpen(!open)}><span className="chev">{Icon.chevron}</span><FileLine path={path} add={f?.add} del={f?.del} /></button>
+        {threads > 0 && <span className="fh-threads" title={`${threads} ${threads === 1 ? "thread" : "threads"}`}>{Icon.comment}{threads}</span>}
+        <label className="reviewed">
+          <input type="checkbox" checked={done} onChange={(e) => { e.target.checked ? reviewed.add(id) : reviewed.delete(id); setDone(e.target.checked); if (e.target.checked) setOpen(false); window.dispatchEvent(new Event("reviewed")); }} />
+          Reviewed
+        </label>
+      </div>
+      {open && <Diff file={path} />}
+    </div>
+  );
+}
+
+// every group in tour order, then the changed files no group mentions, as a list
+export function Changes({ focus }: { focus?: string }) {
+  const { review, go } = useNav();
+  const covered = new Set(review.groups.map((g) => g.file));
+  const rest = pr.files.filter((f) => !covered.has(f.path) && diffs[f.path]).map((f) => f.path).sort();
+  useEffect(() => {
+    if (focus) document.getElementById(`g-${focus}`)?.scrollIntoView({ block: "start" });
+  }, [focus]);
+  return (
+    <section className="view changes">
+      <div className="groups">
+        {review.groups.map((g, i) => <GroupView key={g.id} g={g} strays={review.groups.findIndex((x) => x.file === g.file) === i} />)}
+        {rest.length > 0 && (
+          <section className="group" id="g-other">
+            <div className="head"><h2 className="h">Not in the tour <span className="count">{rest.length}</span></h2></div>
+            <div className="file-stack">{rest.map((p) => <OtherFile key={p} path={p} focus={focus} />)}</div>
+          </section>
+        )}
+        <div className="cta">
+          <button className="btn primary" onClick={() => go("finish")}>Finish the review {Icon.arrow}</button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/review-app/src/kit/comments.tsx

@@ -0,0 +1,377 @@
+// Comments: threads already on GitHub, and the reviewer's own, kept by the review server. A comment goes to GitHub
+// (the reviewer's pending review, or a single comment, as on github.com) or to the agent: the box agent in a PR
+// review, the developer's own agent in a review of local changes. Lines take both; chapters and pictures the agent only.
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import Markdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { setComments, liveComments, useLive } from "./live";
+import { pr, type GhComment, type Row } from "./pr";
+import { highlight } from "./code";
+import { Icon } from "./ui";
+
+export type Side = "LEFT" | "RIGHT";
+// the same shape as ReviewComment in src/review/contract.ts
+export interface ReviewComment {
+  id: string;
+  at: string;
+  by: "reviewer" | "agent";
+  to: "github" | "agent";
+  body: string;
+  path?: string;
+  side?: Side;
+  line?: number;
+  startSide?: Side;
+  startLine?: number;
+  topic?: Topic;
+  quotes?: Quote[];
+  inReplyTo?: number;
+  replyTo?: string;
+  github?: { state: "pending" | "posted"; node: string; id: number; url?: string; thread?: string };
+  agent?: true;
+  status?: "sent" | "working" | "done" | "stopped";
+  commit?: string;
+}
+// what the reviewer had selected on the page, and where, e.g. "unread-emails.ts, lines 37 to 39"
+export interface Quote { text: string; where?: string; kind?: "selection" | "comment" }
+
+// code as it reads quoted on its own: without the indent its lines share
+export function dedent(lines: string[]): string {
+  const indent = Math.min(...lines.filter((l) => l.trim()).map((l) => l.match(/^[ \t]*/)![0].length));
+  return lines.map((l) => l.slice(Number.isFinite(indent) ? indent : 0)).join("\n");
+}
+
+// things the reviewer brings into the chat from elsewhere on the page, e.g. a comment; the chat (agent.tsx) listens
+const toChat = new Set<(q: Quote) => void>();
+export const onReferToChat = (f: (q: Quote) => void) => (toChat.add(f), () => void toChat.delete(f));
+export const referToChat = (q: Quote) => toChat.forEach((f) => f(q));
+// a message sent to the chat from elsewhere, e.g. Ask agent in a comment; the chat opens and sends it
+type Ask = (m: { body: string; quotes: Quote[] }) => Promise<string | undefined>;
+let asker: Ask | undefined;
+export const onAskInChat = (f: Ask) => ((asker = f), () => void (asker === f && (asker = undefined)));
+export const askInChat: Ask = (m) => (asker ? asker(m) : Promise.resolve("The chat is not open on this page."));
+// a part of the tour a comment is on: a chapter, or a picture in it
+export interface Topic { chapter?: string; figure?: string; chat?: boolean; label: string }
+export type CommentInput = Pick<ReviewComment, "to" | "body" | "path" | "side" | "line" | "startSide" | "startLine" | "topic" | "quotes" | "inReplyTo" | "replyTo"> & { mode?: "single" | "review" };
+
+// where a comment sits: a line on one side, or a range ending there
+export interface Anchor { side: Side; line: number; startSide?: Side; startLine?: number }
+
+async function call(path: string, method: string, body?: unknown): Promise<string | undefined> {
+  try {
+    const r = await fetch(path, { method, headers: { "content-type": "application/json" }, body: JSON.stringify(body ?? {}) });
+    if (r.ok) {
+      if (r.status !== 204 && /^api\/comments/.test(path)) {
+        const c = (await r.json()) as ReviewComment;
+        setComments(method === "POST" ? [...liveComments().filter((d) => d.id !== c.id), c] : liveComments().map((d) => (d.id === c.id ? c : d)));
+      }
+      return undefined;
+    }
+    const e = (await r.json().catch(() => ({}))) as { errors?: string[] };
+    return e.errors?.join(", ") ?? `The review server answered ${r.status}.`;
+  } catch {
+    return "The review server is not answering.";
+  }
+}
+export const addComment = (c: CommentInput) => call("api/comments", "POST", c);
+export const editComment = (id: string, body: string) => call(`api/comments/${id}`, "PATCH", { body });
+export async function dropComment(id: string) {
+  const err = await call(`api/comments/${id}`, "DELETE");
+  if (!err) setComments(liveComments().filter((d) => d.id !== id));
+  return err;
+}
+// local reviews: tells the developer's agent the reviewer is done
+export const finishReview = (note?: string) => call("api/finish", "POST", { note });
+
+// GitHub's rule: once a review is in progress, comments join it
+export const reviewInProgress = (cs: ReviewComment[]) => cs.some((c) => c.github?.state === "pending");
+
+interface Note { key: string; who: string; at: string; body: string; mine?: ReviewComment; agent?: ReviewComment; bot?: boolean }
+export interface Thread extends Partial<Anchor> { key: string; path?: string; topic?: Topic; root?: number; local?: string; notes: Note[]; resolved: boolean; outdated: boolean; url?: string }
+
+const fromGh = (c: GhComment): Note => ({ key: `g${c.id}`, who: c.user.login.replace(/\[bot\]$/, ""), at: c.created_at, body: c.body, bot: c.user.type === "Bot" || /\[bot\]$/.test(c.user.login) });
+const fromHere = (c: ReviewComment): Note => (c.by === "agent" ? { key: c.id, who: "Agent", at: c.at, body: c.body, agent: c } : { key: c.id, who: "You", at: c.at, body: c.body, mine: c });
+
+const rootOf = (c: ReviewComment, all: ReviewComment[]) => {
+  let r = c;
+  for (let i = 0; r.replyTo && i < all.length; i++) r = all.find((x) => x.id === r.replyTo) ?? r;
+  return r;
+};
+// the thread a comment belongs to: a GitHub thread by its first comment's id, else the comment it started from here
+const keyOf = (c: ReviewComment, all: ReviewComment[]) => {
+  const r = rootOf(c, all);
+  return r.inReplyTo ? `g${r.inReplyTo}` : r.github ? `g${r.github.id}` : `l${r.id}`;
+};
+const byTime = (a: Note, b: Note) => a.at.localeCompare(b.at);
+
+// every thread on a file: GitHub's, then the ones started here, each with what was said in it here
+export function threadsFor(path: string, all: ReviewComment[]): Thread[] {
+  const posted = new Set(all.map((c) => c.github?.id));
+  const here = new Map<string, ReviewComment[]>();
+  for (const c of all) {
+    const k = keyOf(c, all);
+    here.set(k, [...(here.get(k) ?? []), c]);
+  }
+  const gh = pr.reviewComments.filter((c) => c.path === path && !posted.has(c.id));
+  const out: Thread[] = gh
+    .filter((c) => !c.in_reply_to_id)
+    .map((c) => ({
+      key: `g${c.id}`,
+      root: c.id,
+      path,
+      side: c.side ?? "RIGHT",
+      line: c.line ?? c.original_line ?? 0,
+      startSide: c.start_line ? (c.start_side ?? c.side ?? "RIGHT") : undefined,
+      startLine: c.start_line ?? undefined,
+      notes: [fromGh(c), ...[...gh.filter((r) => r.in_reply_to_id === c.id).map(fromGh), ...(here.get(`g${c.id}`) ?? []).map(fromHere)].sort(byTime)],
+      resolved: !!c.resolved,
+      outdated: c.line == null,
+      url: c.html_url,
+    }));
+  for (const r of all.filter((c) => c.path === path && !c.inReplyTo && !c.replyTo)) {
+    const k = keyOf(r, all);
+    out.push({ key: k, ...(r.github ? { root: r.github.id } : { local: r.id }), path, side: r.side, line: r.line, startSide: r.startSide, startLine: r.startLine, notes: (here.get(k) ?? [r]).map(fromHere).sort(byTime), resolved: false, outdated: false, url: r.github?.url });
+  }
+  return out;
+}
+
+
+// the row a comment on this side and line belongs under
+export const rowAt = (rows: Row[], side: Side, line: number) => rows.findIndex((r) => (side === "LEFT" ? r.o === line && r.t !== "a" : r.n === line && r.t !== "d"));
+export const anchorOf = (r: Row): { side: Side; line: number } => (r.t === "d" ? { side: "LEFT", line: r.o! } : { side: "RIGHT", line: r.n! });
+
+const ago = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+function when(at: string) {
+  const s = (Date.parse(at) - Date.now()) / 1000;
+  for (const [unit, n] of [["year", 31536000], ["month", 2592000], ["day", 86400], ["hour", 3600], ["minute", 60]] as const)
+    if (Math.abs(s) >= n) return ago.format(Math.round(s / n), unit);
+  return "just now";
+}
+
+// GitHub markdown, read safely: raw HTML never renders and javascript: links are dropped (react-markdown's defaults).
+// Suggestions show as a diff against the lines they replace; images show as links, so nothing loads from a comment.
+type HastNode = { type: string; value?: string; tagName?: string; properties?: Record<string, unknown>; children?: HastNode[] };
+const textOf = (n: HastNode): string => (n.type === "text" ? (n.value ?? "") : (n.children ?? []).map(textOf).join(""));
+
+export function Body({ text, original }: { text: string; original?: string[] }) {
+  // HTML comments and the tags review bots wrap their notes in are dropped; any other HTML shows as text
+  const clean = text.replace(/<!--[\s\S]*?-->/g, "").replace(/<\/?(details|summary|p|br|div|span|sub|sup|b|i|strong|em)\b[^>]*>/gi, "").trim();
+  const components: Components = {
+    pre: ({ node }) => {
+      const code = (node as HastNode | undefined)?.children?.[0];
+      const lang = ((code?.properties?.className as string[] | undefined) ?? []).find((c) => c.startsWith("language-"))?.slice(9);
+      const src = code ? textOf(code).replace(/\n$/, "") : "";
+      if (lang === "suggestion")
+        return (
+          <div className="suggestion">
+            <div className="suggestion-head">Suggested change</div>
+            <div className="dl">
+              {(original ?? []).map((s, k) => <Code key={`o${k}`} t="d" s={s} />)}
+              {(src ? src.split("\n") : []).map((s, k) => <Code key={`n${k}`} t="a" s={s} />)}
+            </div>
+          </div>
+        );
+      return <pre className="code-block">{highlight(src)}</pre>;
+    },
+    a: ({ href, children }) => <a className="link" href={href} target="_blank" rel="noreferrer noopener">{children}</a>,
+    img: ({ src, alt }) => (typeof src === "string" && src ? <a className="link" href={src} target="_blank" rel="noreferrer noopener">{alt || "image"}</a> : null),
+  };
+  return <div className="note-body"><Markdown remarkPlugins={[remarkGfm]} components={components}>{clean}</Markdown></div>;
+}
+const Code = ({ t, s }: { t: "a" | "d"; s: string }) => <><div className={`ln ${t}`}>{t === "a" ? "+" : "−"}</div><div className={`code ${t}`}>{highlight(s)}{s ? "" : " "}</div></>;
+
+// where a comment goes on GitHub: a single comment, or the review
+export type Dest = { to: "github"; mode: "single" | "review" };
+
+// writing a comment: GitHub's buttons on the right, Ask agent on the left, which sends it to the chat instead.
+// ⌘↵ takes the last button, Esc cancels; ± in the corner fills in the lines to rewrite. edit: one Save button.
+export function Composer({ initial = "", suggest, label, github = false, edit, onSave, onAsk, onCancel }: { initial?: string; suggest?: string[]; label?: ReactNode; github?: boolean; edit?: boolean; onSave?: (body: string, d: Dest) => Promise<string | undefined>; onAsk?: (body: string) => Promise<string | undefined>; onCancel: () => void }) {
+  const { comments } = useLive();
+  const [body, setBody] = useState(initial);
+  const [error, setError] = useState<string>();
+  const [busy, setBusy] = useState(false);
+  const ref = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => {
+    const t = ref.current;
+    if (!t) return;
+    t.focus();
+    t.setSelectionRange(t.value.length, t.value.length);
+  }, []);
+  // grows with what is written, up to the cap in kit.css
+  useEffect(() => {
+    const t = ref.current;
+    if (t) {
+      t.style.height = "auto";
+      t.style.height = `${t.scrollHeight}px`;
+    }
+  }, [body]);
+  const text = body;
+  // GitHub's buttons where GitHub takes the comment; without them, asking the agent is the main action
+  const buttons: { label: string; dest: Dest }[] = edit
+    ? [{ label: "Save", dest: { to: "github", mode: "review" } }]
+    : github && pr.number && onSave
+      ? reviewInProgress(comments)
+        ? [{ label: "Add review comment", dest: { to: "github", mode: "review" } }]
+        : [{ label: "Add single comment", dest: { to: "github", mode: "single" } }, { label: "Start a review", dest: { to: "github", mode: "review" } }]
+      : [];
+  const ask = async () => {
+    if (!text.trim() || busy || !onAsk) return;
+    setBusy(true);
+    const err = await onAsk(text);
+    setBusy(false);
+    if (err) setError(err);
+  };
+  const save = async (d: Dest) => {
+    if (!text.trim() || busy || !onSave) return;
+    setBusy(true);
+    const err = await onSave(text, d);
+    setBusy(false);
+    if (err) setError(err);
+  };
+  const addSuggestion = () => {
+    const block = "```suggestion\n" + (suggest ?? []).join("\n") + "\n```";
+    setBody((b) => (b.trim() ? `${b.replace(/\s+$/, "")}\n\n${block}` : block));
+    ref.current?.focus();
+  };
+  const primary = () => (buttons.length ? void save(buttons[buttons.length - 1].dest) : void ask());
+  return (
+    <div className="composer" onKeyDown={(e) => {
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); primary(); }
+      else if (e.key === "Escape") { e.preventDefault(); onCancel(); }
+    }}>
+      {label && <div className="composer-label">{label}</div>}
+      <div className="composer-field">
+        <textarea ref={ref} value={body} rows={2} placeholder={buttons.length || edit ? "Leave a comment" : "Ask the agent about these lines"} aria-label="Comment" onChange={(e) => (setBody(e.target.value), setError(undefined))} />
+        {suggest && <button className="composer-tool" onClick={addSuggestion} title="Suggest a change to these lines" aria-label="Suggest a change">{Icon.suggest}</button>}
+      </div>
+      {error && <div className="composer-error" role="alert">{error}</div>}
+      <div className="composer-bar">
+        {onAsk && !edit && buttons.length > 0 && <button className="btn ghost sm ask" disabled={!text.trim() || busy} onClick={() => void ask()} title="Send it to the chat with the agent, with these lines">{Icon.cursor} Ask agent</button>}
+        <span className="grow" />
+        <button className="btn ghost sm" onClick={onCancel}>Cancel</button>
+        {buttons.map((b, i) => (
+          <button key={b.label} className={`btn sm${i === buttons.length - 1 ? " primary" : ""}`} disabled={!text.trim() || busy} onClick={() => void save(b.dest)}>{b.label}</button>
+        ))}
+        {onAsk && !edit && !buttons.length && <button className="btn sm primary ask" disabled={!text.trim() || busy} onClick={() => void ask()}>{Icon.cursor} Ask agent</button>}
+      </div>
+    </div>
+  );
+}
+
+export const rangeLabel = (a: Partial<Anchor>) => (a.startLine && a.startLine !== a.line ? `Lines ${a.startLine} to ${a.line}` : `Line ${a.line}`);
+
+// how a comment is named when it is brought into the chat
+const referWhere = (note: Note, t: Thread) => {
+  const whose = note.who === "You" ? "your comment" : note.agent ? "the agent's answer" : `${note.who}'s comment`;
+  return t.path ? `${whose} on ${t.path.split("/").pop()}, ${rangeLabel(t).toLowerCase()}` : t.topic ? `${whose} on ${t.topic.label}` : whose;
+};
+
+const STATUS = { sent: "Sent", working: "Working on it", done: "Answered", stopped: "Stopped" } as const;
+const editable = (c: ReviewComment) => c.to === "github" || c.status === "sent" || c.status === "stopped";
+export const retryComment = (id: string) => call(`api/comments/${id}/retry`, "POST");
+
+function NoteView({ note, thread, original }: { note: Note; thread: Thread; original?: string[] }) {
+  const [editing, setEditing] = useState(false);
+  const [error, setError] = useState<string>();
+  const [adding, setAdding] = useState(false);
+  const live = useLive();
+  const d = note.mine;
+  const a = note.agent;
+  // an agent's suggested change goes into the reviewer's review on GitHub, on the lines the thread is on
+  const suggestion = a && !!pr.number && !!thread.path && !!thread.line && /^```suggestion$/m.test(a.body) ? a.body : undefined;
+  const adopted = suggestion && live.comments.some((c) => c.to === "github" && c.body === suggestion);
+  const adopt = async () => {
+    setAdding(true);
+    const e = await addComment({ to: "github", mode: "review", path: thread.path, side: thread.side, line: thread.line, ...(thread.startLine && { startLine: thread.startLine, startSide: thread.startSide }), ...(thread.root && { inReplyTo: thread.root }), body: suggestion as string });
+    setAdding(false);
+    setError(e);
+  };
+  return (
+    <div className={`note${d && d.github?.state !== "posted" ? " draft" : ""}${a ? " from-agent" : ""}`}>
+      <div className="note-head">
+        <span className="avatar">{note.who[0]?.toUpperCase()}</span>
+        <b>{note.who}</b>
+        {note.bot && <span className="note-tag">bot</span>}
+        {d?.agent && <span className="note-tag">Drafted by the agent</span>}
+        {d?.github?.state === "pending" && <span className="note-tag pending">Pending</span>}
+        {d?.to === "agent" && d.status && <span className={`note-tag agent ${d.status}`}>{d.status === "working" && <span className="lamp" />}{STATUS[d.status]}</span>}
+        {a?.commit && <span className="note-tag mono">{a.commit.slice(0, 7)}</span>}
+        {!(d?.github?.state === "pending") && !(d?.to === "agent") && <span className="note-when">{when(note.at)}</span>}
+        <button className="icon-btn refer" onClick={() => referToChat({ text: note.body, where: referWhere(note, thread), kind: "comment" })} title="Add to the chat with the agent" aria-label="Add this comment to the chat with the agent">{Icon.cursorPlus}</button>
+        {d && editable(d) && !editing && (
+          <span className="note-actions">
+            <button className="btn ghost sm" onClick={() => setEditing(true)}>Edit</button>
+            <button className="btn ghost sm" onClick={async () => setError(await dropComment(d.id))}>Delete</button>
+          </span>
+        )}
+      </div>
+      {editing && d ? (
+        <Composer edit initial={d.body} suggest={d.side === "RIGHT" ? original : undefined} onCancel={() => setEditing(false)} onSave={async (b) => { const e = await editComment(d.id, b); if (!e) setEditing(false); return e; }} />
+      ) : (
+        <Body text={note.body} original={original} />
+      )}
+      {d?.status === "stopped" && (
+        <div className="note-foot stopped">
+          <span>The agent stopped without answering.</span>
+          <button className="btn sm" onClick={async () => setError(await retryComment(d.id))}>Send again</button>
+        </div>
+      )}
+      {suggestion && (
+        <div className="note-foot">
+          {adopted ? <span className="note-when">In your review</span> : <button className="btn sm" disabled={adding} onClick={() => void adopt()}>{adding ? "Adding" : "Add to your review"}</button>}
+        </div>
+      )}
+      {error && <div className="composer-error" role="alert">{error}</div>}
+    </div>
+  );
+}
+
+// a thread under the line or part of the tour it is on; resolved ones fold to a line
+export function ThreadView({ thread, original }: { thread: Thread; original?: string[] }) {
+  const [open, setOpen] = useState(!thread.resolved);
+  const [replying, setReplying] = useState(false);
+  const onGitHub = thread.root !== undefined;
+  const first = thread.notes[0];
+  if (!open)
+    return (
+      <button className="thread folded" onClick={() => setOpen(true)} aria-expanded={false}>
+        {Icon.check}<span className="thread-state">Resolved</span><b>{first.who}</b><span className="thread-gist">{first.body.replace(/<[^>]*>|```[\s\S]*?```/g, "").replace(/\s+/g, " ").trim()}</span>
+        {thread.notes.length > 1 && <span className="thread-count">{thread.notes.length}</span>}
+      </button>
+    );
+  const at = thread.path ? { path: thread.path, side: thread.side, line: thread.line } : {};
+  return (
+    <div className="thread">
+      {(thread.resolved || thread.outdated) && (
+        <div className="thread-top">
+          {thread.resolved && <span className="thread-state resolved">{Icon.check} Resolved</span>}
+          {thread.outdated && <span className="thread-state">Outdated, was {rangeLabel(thread).toLowerCase()}</span>}
+          {thread.resolved && <button className="link thread-hide" onClick={() => setOpen(false)}>Hide</button>}
+        </div>
+      )}
+      {thread.notes.map((n) => <NoteView key={n.key} note={n} thread={thread} original={original} />)}
+      {replying ? (
+        <Composer github={onGitHub} onCancel={() => setReplying(false)}
+          onSave={async (body, d) => {
+            const e = await addComment({ ...d, ...at, inReplyTo: thread.root, body });
+            if (!e) setReplying(false);
+            return e;
+          }}
+          onAsk={async (body) => {
+            // the lines the thread is on, and how it started
+            const lines = original?.length && thread.path ? [{ kind: "selection" as const, text: dedent(original), where: `${thread.path.split("/").pop()}, ${rangeLabel(thread).toLowerCase()}` }] : [];
+            const e = await askInChat({ body, quotes: [...lines, { kind: "comment", text: first.body, where: referWhere(first, thread) }] });
+            if (!e) setReplying(false);
+            return e;
+          }} />
+      ) : (
+        <button className="reply" onClick={() => setReplying(true)}>Reply</button>
+      )}
+    </div>
+  );
+}
+
+
+
+export const useComments = () => useLive().comments;
+// what the reviewer still has open: pending on GitHub, or not yet answered by the agent
+export const openCount = (cs: ReviewComment[]) => cs.filter((c) => c.github?.state === "pending").length;