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

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

@@ -0,0 +1,287 @@
+// The agent, on every page: a footer under the content with the agent's button on the right, opening a chat. The chat
+// is one thread of comments for the agent (the box agent in a PR review, the developer's own agent in a local one),
+// each message labelled with the page it was written on.
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { addComment, Body, dedent, onAskInChat, onReferToChat, retryComment, type Quote, type ReviewComment } from "./comments";
+import { Listening } from "./finish";
+import { highlight } from "./code";
+import { liveComments, useLive } from "./live";
+import { pr } from "./pr";
+import { Icon } from "./ui";
+
+export const isChat = (c: ReviewComment) => !!c.topic?.chat;
+
+// the chat: the reviewer's messages and the agent's answers to them, in order
+export function chatOf(all: ReviewComment[]): ReviewComment[] {
+  const mine = new Set(all.filter(isChat).map((c) => c.id));
+  return all.filter((c) => mine.has(c.id) || (c.by === "agent" && c.replyTo && mine.has(c.replyTo)));
+}
+
+// where the reviewer is, so the agent knows what they are looking at
+// label: what the agent reads; short: what the chip shows
+export interface Page { label: string; short: string; chapter?: string }
+
+// whether the chat is open, and floating over the page or docked next to the content, for as long as the tab lives
+const KEY = "review-agent";
+const SEEN = "review-agent-seen";
+interface ChatState { open: boolean; docked: boolean }
+const readState = (): ChatState => {
+  try {
+    const v = JSON.parse(sessionStorage.getItem(KEY) ?? "{}");
+    return { open: v.open === true, docked: v.docked === true };
+  } catch {
+    return { open: false, docked: false };
+  }
+};
+const writeState = (v: ChatState) => {
+  try {
+    sessionStorage.setItem(KEY, JSON.stringify(v));
+  } catch {}
+};
+
+export function Footer({ page }: { page: Page }) {
+  const { comments } = useLive();
+  const chat = chatOf(comments);
+  const [{ open, docked }, setState] = useState(readState);
+  const update = (next: Partial<ChatState>) =>
+    setState((v) => {
+      const out = { ...v, ...next };
+      writeState(out);
+      return out;
+    });
+  const setOpen = (o: boolean) => update({ open: o });
+  // comments brought into the chat from the page; they go with the next message
+  const [refs, setRefs] = useState<Quote[]>([]);
+  useEffect(() => onReferToChat((q) => {
+    update({ open: true });
+    setRefs((r) => (r.some((x) => x.text === q.text && x.where === q.where) ? r : [...r, q]));
+  }), []);
+  const dock = (d: boolean) => update({ docked: d });
+  // a message to the agent, with the page it was written on and what it quotes, as the next turn of the one thread
+  const sendChat = (body: string, quotes: Quote[]) => {
+    const root = chatOf(liveComments()).find((c) => c.by === "reviewer");
+    return addComment({ to: "agent", topic: { chat: true, label: page.label, ...(page.chapter && { chapter: page.chapter }) }, ...(quotes.length && { quotes }), ...(root && { replyTo: root.id }), body });
+  };
+  // Ask agent in a comment: the chat opens and sends it
+  const sendRef = useRef(sendChat);
+  sendRef.current = sendChat;
+  useEffect(() => onAskInChat((m) => {
+    update({ open: true });
+    return sendRef.current(m.body, m.quotes);
+  }), []);
+  // the dock is a slot next to the content (in App.tsx); it exists once the frame has mounted
+  const [, mounted] = useState(false);
+  useEffect(() => mounted(true), []);
+  const slot = document.getElementById("agent-dock");
+  // an answer that came while the chat was closed fills the cursor. The newest answer seen is kept for the tab; what
+  // is there when a tab first connects counts as seen.
+  const { connected } = useLive();
+  const newest = [...chat].reverse().find((c) => c.by === "agent")?.id;
+  const [seen, setSeen] = useState(() => {
+    try {
+      return sessionStorage.getItem(SEEN) ?? undefined;
+    } catch {
+      return undefined;
+    }
+  });
+  const markSeen = (id?: string) => {
+    setSeen(id);
+    try {
+      if (id) sessionStorage.setItem(SEEN, id);
+    } catch {}
+  };
+  useEffect(() => {
+    if (connected && (open || seen === undefined) && newest !== seen) markSeen(newest ?? "");
+  }, [connected, open, newest]);
+  const last = [...chat].reverse().find((c) => c.by === "reviewer");
+  const state = last?.status === "working" || last?.status === "sent" ? "busy" : last?.status === "stopped" ? "stopped" : connected && newest && seen !== undefined && newest !== seen ? "new" : "";
+  useEffect(() => {
+    if (!open || docked) return;
+    const key = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
+    addEventListener("keydown", key);
+    return () => removeEventListener("keydown", key);
+  }, [open, docked]);
+  const chatEl = open && <Chat page={page} chat={chat} refs={refs} setRefs={setRefs} send={sendChat} docked={docked} onDock={() => dock(!docked)} onClose={() => setOpen(false)} />;
+  return (
+    <footer className="foot">
+      {!pr.number && <Listening />}
+      <span className="grow" />
+      <button className={`agent-btn${state ? ` ${state}` : ""}`} aria-expanded={open} aria-controls="agent-chat" onClick={() => setOpen(!open)}>
+        {Icon.cursor}
+        Agent
+      </button>
+      {docked && slot ? chatEl && createPortal(chatEl, slot) : chatEl}
+    </footer>
+  );
+}
+
+// where a selection is: lines of a file in a diff, or the picture it is in
+function whereOf(r: Range): string | undefined {
+  const el = (n: Node) => (n instanceof Element ? n : n.parentElement);
+  const a = el(r.startContainer), b = el(r.endContainer);
+  const file = a?.closest<HTMLElement>("[data-file]")?.dataset.file;
+  if (file && file === b?.closest<HTMLElement>("[data-file]")?.dataset.file) {
+    const lines = [a, b].map((x) => Number(x?.closest<HTMLElement>("[data-line]")?.dataset.line)).filter(Boolean);
+    const name = file.split("/").pop();
+    const [lo, hi] = [Math.min(...lines), Math.max(...lines)];
+    return !lines.length ? name : lo === hi ? `${name}, line ${lo}` : `${name}, lines ${lo} to ${hi}`;
+  }
+  const fig = a?.closest(".fig")?.querySelector(".fig-title")?.textContent?.trim();
+  return fig ? `the picture "${fig}"` : undefined;
+}
+
+// what the reviewer selects on the page while the chat is open, until they deselect it, remove it or send
+function useSelection(): [Quote | undefined, () => void] {
+  const [quote, setQuote] = useState<Quote>();
+  useEffect(() => {
+    let t: ReturnType<typeof setTimeout>;
+    const on = () => {
+      clearTimeout(t);
+      t = setTimeout(() => {
+        const s = document.getSelection();
+        if (!s || !s.rangeCount) return;
+        const r = s.getRangeAt(0);
+        const at = r.commonAncestorContainer instanceof Element ? r.commonAncestorContainer : r.commonAncestorContainer.parentElement;
+        // working in the chat keeps what was selected; deselecting on the page drops it
+        if (!at || at.closest(".chat")) return;
+        if (s.isCollapsed) return setQuote(undefined);
+        const text = dedent(s.toString().replace(/\s+$/, "").replace(/^\n+/, "").split("\n"));
+        if (!text.trim()) return;
+        setQuote({ text: text.slice(0, 8000), kind: "selection", ...(whereOf(r) && { where: whereOf(r) }) });
+      }, 120);
+    };
+    document.addEventListener("selectionchange", on);
+    return () => (clearTimeout(t), document.removeEventListener("selectionchange", on));
+  }, []);
+  return [quote, () => setQuote(undefined)];
+}
+
+// a selection in a few words: file:lines for code, else the start of what was selected
+const chipOf = (q: Quote) => {
+  // a comment by whose it is: "dwelle's comment", "Your comment", "Agent's answer"
+  if (q.kind === "comment") return (q.where?.match(/^(.*?) on /)?.[1] ?? q.where ?? "Comment").replace(/^your/, "Your").replace(/^the agent's/, "Agent's");
+  const picture = q.where?.match(/^the picture "(.+)"$/);
+  if (picture) return picture[1];
+  const code = q.where?.match(/^(.+), lines? (\d+)(?: to (\d+))?$/);
+  if (code) return `${code[1]}:${code[2]}${code[3] ? `\u2013${code[3]}` : ""}`;
+  return `\u201c${clip(q.text.replace(/\s+/g, " "), 24)}\u201d`;
+};
+// the agent at work: a sail riding two waves, as in the porthole on the page that shows while the tour is set up
+// one wave is a crest and a trough, 16 units; long enough to still fill the view after rolling a full wave
+const WAVE = "q4-2.5 8 0t8 0 8 0 8 0 8 0 8 0 8 0 8 0 8 0 8 0";
+function Sailing() {
+  return (
+    <svg className="sailing" width="30" height="21" viewBox="0 -3 30 21" aria-hidden="true">
+      <path className="sea back wave slow" d={`M-8 12.5${WAVE}V18H-8Z`} />
+      <path className="boat" d="M13 3v11h7.5Z" />
+      <path className="sea wave" d={`M0 14${WAVE}V18H0Z`} />
+    </svg>
+  );
+}
+
+// a quoted selection in a message: where it is, then the text, highlighted when it is code; long ones fade out
+function QuoteCard({ quote }: { quote: Quote }) {
+  const comment = quote.kind === "comment";
+  const code = !comment && /, lines? \d/.test(quote.where ?? "");
+  return (
+    <div className={`msg-quote${comment ? " comment" : ""}`} title={quote.where}>
+      <div className="msg-quote-head">{comment ? Icon.comment : code ? Icon.code : Icon.quote}<span>{comment ? quote.where : quote.where ? chipOf(quote) : "Selection"}</span></div>
+      {comment ? <div className="msg-quote-body"><Body text={quote.text} /></div> : <pre className={`${code ? "code" : ""}${quote.text.split("\n").length > 5 ? " long" : ""}`}>{code ? highlight(quote.text) : quote.text}</pre>}
+    </div>
+  );
+}
+
+const clip = (s: string, n: number) => (s.length > n ? s.slice(0, n - 1).trimEnd() + "\u2026" : s);
+
+function Chat({ page, chat, refs, setRefs, send: sendChat, docked, onDock, onClose }: { page: Page; chat: ReviewComment[]; refs: Quote[]; setRefs: (r: Quote[]) => void; send: (body: string, quotes: Quote[]) => Promise<string | undefined>; docked: boolean; onDock: () => void; onClose: () => void }) {
+  const { agent } = useLive();
+  const [body, setBody] = useState("");
+  const [error, setError] = useState<string>();
+  const [busy, setBusy] = useState(false);
+  const list = useRef<HTMLDivElement>(null);
+  const input = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => input.current?.focus(), []);
+  // the newest message in view, as in any chat
+  useLayoutEffect(() => {
+    list.current?.scrollTo(0, list.current.scrollHeight);
+  }, [chat.length]);
+  useEffect(() => {
+    const t = input.current;
+    if (t) {
+      t.style.height = "auto";
+      t.style.height = `${t.scrollHeight}px`;
+    }
+  }, [body]);
+  const [quote, dropQuote] = useSelection();
+  const send = async () => {
+    const text = body.trim();
+    if (!text || busy) return;
+    setBusy(true);
+    const e = await sendChat(text, [...refs, ...(quote ? [quote] : [])]);
+    setBusy(false);
+    setError(e);
+    if (!e) {
+      setBody("");
+      dropQuote();
+      setRefs([]);
+    }
+  };
+  const last = [...chat].reverse().find((c) => c.by === "reviewer");
+  const where = pr.number ? "box" : "local";
+  return (
+    <div className={`chat${docked ? " docked" : ""}`} id="agent-chat" role={docked ? "complementary" : "dialog"} aria-label="Chat with the agent">
+      <div className="chat-head">
+        <b>Agent</b>
+        <span className="chat-where" title={pr.number ? "The agent in the review's box" : `Your own agent, ${agent.listening ? "listening" : "not listening"}`}>({where})</span>
+        <span className="grow" />
+        <button className="icon-btn" onClick={onDock} title={docked ? "Float over the page" : "Dock next to the page"} aria-label={docked ? "Float the chat over the page" : "Dock the chat next to the page"}>{docked ? Icon.float : Icon.dock}</button>
+        <button className="icon-btn" onClick={onClose} title={docked ? "Close" : "Close (Esc)"} aria-label="Close the chat">{Icon.cross}</button>
+      </div>
+      <div className="chat-list" ref={list}>
+        {chat.length === 0 && <p className="chat-empty">Ask about the change, the tour, or anything on this page. {pr.number ? "Ask it to change something and it commits and pushes, as Fix it does." : "Your agent answers here."}</p>}
+        {chat.map((c, i) => (
+          <div key={c.id} className={`msg ${c.by}`}>
+            {/* the page, when it is not the one the last message came from */}
+            {c.by === "reviewer" && c.topic?.label && c.topic.label !== chat.slice(0, i).reverse().find((x) => x.by === "reviewer")?.topic?.label && <span className="msg-from">{c.topic.label}</span>}
+            <div className="msg-body">
+              {c.quotes?.map((q, i) => <QuoteCard key={i} quote={q} />)}
+              <Body text={c.body} />
+            </div>
+            {c.commit && <span className="msg-from mono">{c.commit.slice(0, 7)}</span>}
+          </div>
+        ))}
+        {last && (last.status === "sent" || last.status === "working") && <div className="msg agent typing" aria-live="polite"><Sailing />{last.status === "sent" ? "Sent, waiting for the agent" : "Working on it"}</div>}
+        {last?.status === "stopped" && (
+          <div className="msg agent stopped">The agent stopped without answering. <button className="link" onClick={async () => setError(await retryComment(last.id))}>Send again</button></div>
+        )}
+      </div>
+      {error && <div className="composer-error chat-error" role="alert">{error}</div>}
+      <div className="chat-box" onClick={(e) => e.target === e.currentTarget && input.current?.focus()}>
+        <div className="chat-chips">
+          <span className="ctx-chip" title={`You are on ${page.label}`}>{Icon.page}<span>{page.short}</span></span>
+          {refs.map((q, i) => (
+            <span key={`${q.where}${i}`} className="ctx-chip" title={`${q.where ?? "A comment"}\n\n${q.text}`}>
+              {Icon.comment}<span>{chipOf(q)}</span>
+              <button onClick={() => setRefs(refs.filter((x) => x !== q))} aria-label="Leave this comment out">{Icon.cross}</button>
+            </span>
+          ))}
+          {quote && (
+            <span className="ctx-chip" title={quote.where ? `${quote.where}\n\n${quote.text}` : quote.text}>
+              {Icon.quote}<span>{chipOf(quote)}</span>
+              <button onClick={dropQuote} aria-label="Leave the selection out">{Icon.cross}</button>
+            </span>
+          )}
+        </div>
+        <textarea ref={input} rows={1} value={body} placeholder="Message the agent" aria-label="Message" onChange={(e) => setBody(e.target.value)} onKeyDown={(e) => {
+          // Enter sends, Shift+Enter is a new line, as in chat apps
+          if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); void send(); }
+        }} />
+        <div className="chat-box-bar">
+          <span className="chip-hint">{quote || refs.length ? "" : "Select something on the page, or add a comment, to bring it in"}</span>
+          <button className="send" disabled={!body.trim() || busy} onClick={() => void send()} aria-label="Send" title="Send">{Icon.send}</button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,178 @@
+// A chapter of the tour: the guide on the left (why, what should happen and what did, the code), the evidence on the right.
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { runStep, useLive, type ReviewEvent } from "./live";
+import { ChapterContext, outcomeOf, useChapter, useNav, type Instance } from "./review";
+import { FlowCompare, type FlowDef } from "./flow";
+import { Live } from "./media";
+import { Diff } from "./code";
+import { pr } from "./pr";
+import { FileLine, Icon, Label } from "./ui";
+
+// events since Run was last pressed for each step, so a rerun starts clean
+const since: Record<string, number> = {};
+
+export function Chapter({
+  title, children, step, expect, flow, here, group, evidence,
+}: {
+  title: ReactNode;
+  // why this chapter matters and what it does, in a sentence or two
+  children?: ReactNode;
+  // ~/review/steps/<step>.sh, run by the Run button
+  step?: string;
+  // what should happen on each instance, by instance id
+  expect?: Record<string, ReactNode>;
+  flow?: FlowDef;
+  // the flow node this chapter is about
+  here?: string;
+  // the group of the diff behind this chapter
+  group?: string;
+  // what the reviewer looks at, on the right; the live instances when left out
+  evidence?: ReactNode;
+}) {
+  const { review, chapter, go } = useNav();
+  const live = useLive();
+  const [, rerender] = useState(0);
+  const index = chapter?.index ?? 0, total = review.chapters.length;
+  const events = step ? live.events.filter((e) => e.step === step && e.seq > (since[step] ?? 0)) : [];
+  const state = step ? live.steps[step] : undefined;
+  const g = group ? review.groups.find((x) => x.id === group) : undefined;
+  const insts = review.instances.filter((i) => !expect || i.id in expect);
+  const prev = index > 0 ? { chapter: review.chapters[index - 1].id } : "overview";
+  const next = index < total - 1 ? { chapter: review.chapters[index + 1].id } : "changes";
+  const run = () => {
+    if (!step) return;
+    since[step] = live.events.at(-1)?.seq ?? 0;
+    rerender((n) => n + 1);
+    runStep(step);
+  };
+  const file = g && pr.files.find((f) => f.path === g.file);
+
+  // the code behind the chapter opens in place of the evidence; Escape closes it
+  const [code, setCode] = useState(false);
+  useEffect(() => {
+    if (!code) return;
+    const key = (e: KeyboardEvent) => e.key === "Escape" && setCode(false);
+    addEventListener("keydown", key);
+    return () => removeEventListener("keydown", key);
+  }, [code]);
+  const status = state?.status === "running" ? ["run", "Running"] : state?.status === "failed" ? ["fail", "Step failed"] : state?.status === "done" ? ["done", "Done"] : undefined;
+  const results = insts.map((i) => ({ inst: i, outcome: outcomeOf(events, i.id) }));
+  const ran = results.some((r) => r.outcome);
+
+  return (
+    <ChapterContext.Provider value={{ step, events, instances: insts }}>
+      <section className="view chapter">
+        <aside className="guide">
+          <div>
+            <h1 className="h">{title}</h1>
+            {children && <Clamped>{children}</Clamped>}
+          </div>
+          {expect && (
+            <div>
+              <div className="label-row">
+                <Label>{ran ? "What happened" : "What should happen"}</Label>
+                {step && <button className="btn sm" id="run" onClick={run} disabled={state?.status === "running"}>{Icon.play} {state?.status === "running" ? "Running" : state ? "Run again" : "Run"}</button>}
+              </div>
+              <div className="cols" style={{ gridTemplateColumns: `repeat(${results.length}, minmax(0, 1fr))` }}>
+                {results.map(({ inst, outcome }) => (
+                  <div key={inst.id} className="col">
+                    <b>{inst.label}</b>
+                    {outcome
+                      ? <><p className={`got ${outcome.kind}`}>{outcome.overlay?.title ?? outcome.text}</p><Clamped lines={2} className="should">Should: {expect[inst.id]}</Clamped></>
+                      : <p>{expect[inst.id]}</p>}
+                  </div>
+                ))}
+              </div>
+              {step && (events.length > 0 || status) && <Events events={events} status={status} />}
+              {state?.status === "failed" && state.output && <pre className="failed">{state.output}</pre>}
+            </div>
+          )}
+          {flow && (
+            <div>
+              <Label>Where</Label>
+              <FlowCompare def={flow} here={here} instances={insts} events={events} />
+            </div>
+          )}
+          {g && file && <button className="code-link" aria-pressed={code} onClick={() => setCode(!code)}><FileLine path={g.file} add={file.add} del={file.del} /></button>}
+          <div className="pager">
+            <button onClick={() => go(prev)}><kbd>K</kbd><span>{index > 0 ? review.chapters[index - 1].title : "Overview"}</span></button>
+            <button onClick={() => go(next)}><span>{index < total - 1 ? review.chapters[index + 1].title : "Changes"}</span><kbd>J</kbd></button>
+          </div>
+        </aside>
+        {evidence ? <div className="evidence scroll" hidden={code}>{evidence}</div> : <div className="evidence" hidden={code}><Live /></div>}
+        {code && g && file && (
+          <div className="evidence code-view">
+            <div className="file">
+              <div className="fh">
+                <FileLine path={g.file} add={file.add} del={file.del} />
+                <button className="btn ghost sm" onClick={() => go({ group: g.id })}>{Icon.code} In all changes</button>
+                <button className="icon-btn" onClick={() => setCode(false)} title="Close (Esc)" aria-label="Close the code">{Icon.cross}</button>
+              </div>
+              <Diff file={g.file} lines={g.lines} />
+            </div>
+          </div>
+        )}
+      </section>
+    </ChapterContext.Provider>
+  );
+}
+
+// text cut to a few lines, with More when it runs longer
+function Clamped({ children, lines = 3, className = "prose" }: { children: ReactNode; lines?: number; className?: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [long, setLong] = useState(false);
+  const [open, setOpen] = useState(false);
+  useLayoutEffect(() => { const el = ref.current; if (el && !open) setLong(el.scrollHeight > el.clientHeight + 1); }, [children, open]);
+  return (
+    <>
+      <div ref={ref} className={`${className}${open ? "" : " clamp"}`} style={open ? undefined : { WebkitLineClamp: lines }}>{children}</div>
+      {long && <button className="show-more" onClick={() => setOpen(!open)}>{open ? "Less" : "More"}</button>}
+    </>
+  );
+}
+
+// what the step reported, as a card row that opens in place, with the run's status
+function Events({ events, status }: { events: ReviewEvent[]; status?: string[] }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="events" data-open={open || undefined}>
+      <button className="events-head" aria-expanded={open} onClick={() => setOpen(!open)} disabled={!events.length}>
+        <span className="acc-chev">{Icon.chevron}</span>
+        <span className="events-title">Events <span className="c">{events.length}</span></span>
+        {status && <span className={`chip ${status[0]}`}>{status[1]}</span>}
+      </button>
+      <div className="acc-body" inert={!open}>
+        <div><div className="events-lines">{events.map((e) => <div key={e.seq}><b>{e.instance}</b>{e.text}</div>)}</div></div>
+      </div>
+    </div>
+  );
+}
+
+// what each instance reported, for results that are not visible in the app: test output, a script's result, an API response.
+// One row per instance: its result as a heading, the details (the overlay body) under it at full width, so long output
+// like an email reads as a page; instances still running say so. Before the first run it is one line saying what Run does.
+export function Outcome({ ids, empty = "Press Run to see what each instance reports." }: { ids?: string[]; empty?: ReactNode }) {
+  const { step, events, instances } = useChapter();
+  const running = useLive().steps[step ?? ""]?.status === "running";
+  const list = instances.filter((i) => !ids || ids.includes(i.id)).map((i) => ({ inst: i, o: outcomeOf(events, i.id) }));
+  if (!running && !list.some((r) => r.o)) return <div className="outcomes"><p className="oe">{empty}</p></div>;
+  return (
+    <div className="outcomes">
+      {list.map(({ inst, o }) => {
+        const title = o ? o.overlay?.title ?? o.text : undefined;
+        const body = o?.overlay?.body?.trim();
+        const status = o ? o.overlay?.status ?? o.kind : running ? "wait" : "none";
+        return (
+          <div key={inst.id} className={`outcome ${status}`}>
+            <div className="oh">
+              <span className="lamp" />
+              <span className="on">{inst.label}</span>
+              <span className="ot">{title ?? (running ? "Running" : "Nothing reported")}</span>
+            </div>
+            {body && body !== title && (body.includes("\n") || body.length > 160 ? <pre className="ob">{body}</pre> : <p className="os">{body}</p>)}
+          </div>
+        );
+      })}
+    </div>
+  );
+}