@shiyuphan/follow-me 0.1.1 → 0.3.0

package/dist/ui/app.js

@@ -1,797 +0,0 @@
-import {
-  buildScript,
-  commitAt,
-  commitStart,
-  lineKey,
-  lineStates,
-  parseSpeed,
-  pickVoice,
-  SPEEDS,
-  speechTimeout,
-  stepDelay,
-} from "/playback.js";
-
-const $ = (id) => document.getElementById(id);
-
-/** "/s/<id>": this page's session on the shared server. Every session API sits under it. */
-const sessionPrefix = /^\/s\/[^/]+/.exec(location.pathname)?.[0] ?? "";
-
-/** Builds an element. Text always goes through textContent, never innerHTML. */
-function el(tag, props = {}, ...children) {
-  const node = document.createElement(tag);
-  for (const [key, value] of Object.entries(props)) {
-    if (value === undefined || value === false) continue;
-    if (key === "class") node.className = value;
-    else if (key === "text") node.textContent = value;
-    else if (key.startsWith("on")) node.addEventListener(key.slice(2), value);
-    else node.setAttribute(key, value === true ? "" : value);
-  }
-  for (const child of children) if (child) node.append(child);
-  return node;
-}
-
-let state = null;
-let selected = 0;
-let unitsById = new Map();
-/** unit id -> (change index -> index of the commit that owns the line) */
-let owners = new Map();
-/** "commit:unit" -> change indices the reader clicked, to anchor a comment to them */
-const picks = new Map();
-/** Unsent textarea contents survive re-renders, keyed like the boxes. */
-const drafts = new Map();
-const openBoxes = new Set();
-const editing = new Set();
-
-async function api(method, path, body) {
-  const res = await fetch(`${sessionPrefix}${path}`, {
-    method,
-    headers: { "content-type": "application/json" },
-    body: body === undefined ? undefined : JSON.stringify(body),
-  });
-  const payload = await res.json().catch(() => ({}));
-  if (!res.ok) throw new Error(payload.error ?? `${method} ${path} failed with ${res.status}`);
-  return payload;
-}
-
-/** Links to every session the server hosts, so one tab can move between workstreams. */
-async function renderSwitcher() {
-  const res = await fetch("/api/sessions").catch(() => null);
-  if (!res?.ok) return;
-  const sessions = await res.json();
-  const here = `${sessionPrefix}/`;
-  const nav = $("sessions");
-  nav.hidden = sessions.length < 2;
-  nav.replaceChildren(
-    ...sessions.map((s) =>
-      el("a", {
-        href: s.url,
-        title: s.repo,
-        "aria-current": s.url === here ? "page" : undefined,
-        text: s.mode === "walk" ? `${s.branch} (walk)` : `${s.branch} v${s.version}`,
-      }),
-    ),
-    el("a", { href: "/", text: "All sessions" }),
-  );
-}
-
-function report(error) {
-  $("status").textContent = error ? error.message : "";
-}
-
-async function guarded(action) {
-  try {
-    report(null);
-    await action();
-  } catch (error) {
-    report(error);
-  }
-}
-
-function indexOwnership() {
-  unitsById = new Map(state.units.map((unit) => [unit.id, unit]));
-  owners = new Map();
-  for (const commit of state.commits) {
-    for (const ref of commit.refs) {
-      if (ref.select.kind !== "lines") continue;
-      const byChange = owners.get(ref.unit) ?? new Map();
-      for (const change of ref.select.changes) byChange.set(change, commit.index);
-      owners.set(ref.unit, byChange);
-    }
-  }
-}
-
-async function reloadComments() {
-  const fresh = await api("GET", "/api/state");
-  state.comments = fresh.comments;
-  render();
-}
-
-function sameAnchor(a, b) {
-  if (a.kind !== b.kind) return false;
-  if (a.kind === "plan") return true;
-  if (a.commit !== b.commit) return false;
-  return a.kind !== "hunk" || a.unit === b.unit;
-}
-
-function commentsAt(anchor) {
-  return state.comments.filter((comment) => sameAnchor(comment.anchor, anchor));
-}
-
-function firstLine(message) {
-  return message.split("\n")[0] ?? "";
-}
-
-function describeChanges(changes) {
-  return changes === null ? "whole hunk" : `lines ${changes.join(", ")}`;
-}
-
-function commentView(comment) {
-  const key = `edit:${comment.id}`;
-  if (editing.has(comment.id)) {
-    const area = el("textarea", {
-      oninput: () => drafts.set(key, area.value),
-    });
-    area.value = drafts.get(key) ?? comment.body;
-    return el(
-      "div",
-      { class: "comment" },
-      area,
-      el(
-        "div",
-        { class: "row box" },
-        el("button", {
-          class: "primary",
-          text: "Save",
-          onclick: () =>
-            guarded(async () => {
-              await api("PUT", `/api/comments/${comment.id}`, { ...comment, body: area.value });
-              editing.delete(comment.id);
-              drafts.delete(key);
-              await reloadComments();
-            }),
-        }),
-        el("button", {
-          text: "Cancel",
-          onclick: () => {
-            editing.delete(comment.id);
-            drafts.delete(key);
-            render();
-          },
-        }),
-      ),
-    );
-  }
-  const where =
-    comment.anchor.kind === "hunk" ? ` · ${describeChanges(comment.anchor.changes)}` : "";
-  return el(
-    "div",
-    { class: "comment" },
-    el("div", { class: "meta" }, `${comment.id}${where}`),
-    el("div", { class: "text", text: comment.body }),
-    el(
-      "div",
-      { class: "meta" },
-      el("button", {
-        class: "link",
-        text: "edit",
-        onclick: () => {
-          editing.add(comment.id);
-          render();
-        },
-      }),
-      el("button", {
-        class: "link",
-        text: "delete",
-        onclick: () =>
-          guarded(async () => {
-            await api("DELETE", `/api/comments/${comment.id}`);
-            await reloadComments();
-          }),
-      }),
-    ),
-  );
-}
-
-/**
- * A collapsed button that opens into a textarea. `makeAnchor` runs at save time so a
- * hunk comment picks up whichever lines are selected then.
- */
-function commentBox({ key, label, placeholder, makeAnchor, context, onSaved }) {
-  if (!openBoxes.has(key)) {
-    return el("button", {
-      text: typeof label === "function" ? label() : label,
-      onclick: () => {
-        openBoxes.add(key);
-        render();
-      },
-    });
-  }
-  const area = el("textarea", { placeholder, oninput: () => drafts.set(key, area.value) });
-  area.value = drafts.get(key) ?? "";
-  const close = () => {
-    openBoxes.delete(key);
-    drafts.delete(key);
-  };
-  return el(
-    "div",
-    { class: "box" },
-    area,
-    el(
-      "div",
-      { class: "row" },
-      el("button", {
-        class: "primary",
-        text: "Comment",
-        onclick: () =>
-          guarded(async () => {
-            const body = area.value.trim();
-            if (!body) return;
-            await api("POST", "/api/comments", { anchor: makeAnchor(), context, body });
-            close();
-            onSaved?.();
-            await reloadComments();
-          }),
-      }),
-      el("button", {
-        text: "Cancel",
-        onclick: () => {
-          close();
-          render();
-        },
-      }),
-    ),
-  );
-}
-
-function describeFileUnit(unit) {
-  const change = unit.before === null ? "added" : unit.after === null ? "deleted" : "changed";
-  return `${unit.reason} file ${change}`;
-}
-
-function diffLine(unit, commit, line, index, pickKey) {
-  const base = el("span", { class: "op", text: line.op });
-  const text = el("span", { text: line.text.replace(/\n$/, "") });
-  const key = lineKey(unit.id, index);
-  if (line.op === " ")
-    return el(
-      "div",
-      { class: "dl", "data-line": key },
-      el("span", { class: "gutter" }),
-      base,
-      text,
-    );
-
-  const owner = owners.get(unit.id)?.get(line.change);
-  const mine = owner === commit.index;
-  const picked = picks.get(pickKey)?.has(line.change) ?? false;
-  const classes = ["dl", line.op === "+" ? "add" : "del", mine ? "mine pickable" : "other"];
-  if (picked) classes.push("picked");
-  const node = el(
-    "div",
-    {
-      class: classes.join(" "),
-      "data-line": key,
-      title: mine ? "Click to select this line for a comment" : undefined,
-      onclick: mine
-        ? () => {
-            const set = picks.get(pickKey) ?? new Set();
-            if (!set.delete(line.change)) set.add(line.change);
-            picks.set(pickKey, set);
-            render();
-          }
-        : undefined,
-    },
-    el("span", { class: "gutter", text: String(line.change) }),
-    base,
-    text,
-  );
-  if (!mine && owner !== undefined)
-    node.append(el("span", { class: "label", text: `→ commit ${owner + 1}` }));
-  return node;
-}
-
-function unitComments(unit, commit) {
-  const anchor = { kind: "hunk", unit: unit.id, commit: commit.index, changes: null };
-  const pickKey = `${commit.index}:${unit.id}`;
-  const existing = commentsAt(anchor);
-  const picked = () => [...(picks.get(pickKey) ?? [])].sort((a, b) => a - b);
-  return el(
-    "div",
-    { class: "comments" },
-    ...existing.map(commentView),
-    el(
-      "div",
-      { class: "controls" },
-      commentBox({
-        key: `box:${pickKey}`,
-        label: () => {
-          const n = picked().length;
-          return n > 0 ? `Comment on ${n} selected line${n === 1 ? "" : "s"}` : "Comment";
-        },
-        placeholder: "What about this change?",
-        makeAnchor: () => ({ ...anchor, changes: picked().length > 0 ? picked() : null }),
-        context: { commitMessage: commit.message, path: unit.path },
-        onSaved: () => picks.delete(pickKey),
-      }),
-    ),
-  );
-}
-
-function unitView(unit, commit) {
-  const pickKey = `${commit.index}:${unit.id}`;
-  const head = el("div", { class: "unit-head" }, el("span", { text: unit.id }));
-  let content;
-  if (unit.kind === "hunk") {
-    const mineCount = [...(owners.get(unit.id) ?? [])].filter(([, o]) => o === commit.index).length;
-    head.append(
-      el("span", { class: "spacer" }),
-      el("span", { text: `takes ${mineCount} of ${unit.changeCount} changes` }),
-    );
-    content = el(
-      "div",
-      { class: "diff" },
-      ...unit.body.map((line, index) => diffLine(unit, commit, line, index, pickKey)),
-    );
-  } else {
-    const summary =
-      unit.kind === "file" ? describeFileUnit(unit) : `mode change ${unit.from} → ${unit.to}`;
-    content = el("div", { class: "card", text: `${summary}: ${unit.path}` });
-  }
-  return el(
-    "div",
-    { class: "unit", "data-unit": unit.id },
-    head,
-    content,
-    unitComments(unit, commit),
-  );
-}
-
-function renderList() {
-  const list = $("commits");
-  list.replaceChildren(
-    ...state.commits.map((commit, i) => {
-      const count = state.comments.filter(
-        (c) => c.anchor.kind !== "plan" && c.anchor.commit === commit.index,
-      ).length;
-      return el(
-        "li",
-        {
-          class: i === selected ? "selected" : undefined,
-          onclick: () => select(i),
-        },
-        el("span", { class: "index", text: String(i + 1) }),
-        el("span", { class: "title", text: firstLine(commit.message) }),
-        count > 0 ? el("span", { class: "badge", text: String(count) }) : null,
-      );
-    }),
-  );
-  list.children[selected]?.scrollIntoView({ block: "nearest" });
-}
-
-function renderPlanNote() {
-  const anchor = { kind: "plan" };
-  const walk = isWalk();
-  $("plan-note").replaceChildren(
-    el("strong", { text: walk ? "General comment" : "Plan note" }),
-    ...commentsAt(anchor).map(commentView),
-    commentBox({
-      key: "box:plan",
-      label: walk ? "Add a general comment" : "Add a note on the whole plan",
-      placeholder: walk
-        ? "Anything about the change as a whole"
-        : "Anything about the plan as a whole",
-      makeAnchor: () => anchor,
-      context: { commitMessage: "", path: null },
-    }),
-  );
-}
-
-function renderMain() {
-  const main = $("main");
-  const scroll = main.scrollTop;
-  const commit = state.commits[selected];
-  if (!commit) {
-    main.replaceChildren(el("p", { class: "muted", text: "This plan has no commits." }));
-    return;
-  }
-  const messageAnchor = { kind: "message", commit: commit.index };
-  const positionAnchor = { kind: "position", commit: commit.index };
-  const context = { commitMessage: commit.message, path: null };
-
-  const groups = new Map();
-  for (const ref of commit.refs) {
-    const unit = unitsById.get(ref.unit);
-    if (!unit) continue;
-    groups.set(unit.path, [...(groups.get(unit.path) ?? []), unit]);
-  }
-
-  main.replaceChildren(
-    el(
-      "div",
-      { class: "commit-head" },
-      el("h2", { text: `Commit ${selected + 1} of ${state.commits.length}` }),
-      el("div", { class: "message", text: commit.message }),
-      ...commentsAt(messageAnchor).map(commentView),
-      // A walk plan's messages and order are the planner's, not the author's, so only code is
-      // up for comment there.
-      isWalk()
-        ? null
-        : el(
-            "div",
-            { class: "controls" },
-            commentBox({
-              key: `box:message:${commit.index}`,
-              label: "Comment on the message",
-              placeholder: "What should this message say?",
-              makeAnchor: () => messageAnchor,
-              context,
-            }),
-            commentBox({
-              key: `box:position:${commit.index}`,
-              label: "This belongs elsewhere",
-              placeholder: "Where should this go, and why?",
-              makeAnchor: () => positionAnchor,
-              context,
-            }),
-          ),
-      ...commentsAt(positionAnchor).map(commentView),
-    ),
-    ...[...groups].map(([path, units]) =>
-      el(
-        "section",
-        { class: "file-group" },
-        el("h3", { text: path }),
-        ...units.map((unit) => unitView(unit, commit)),
-      ),
-    ),
-  );
-  main.scrollTop = scroll;
-  applyPlayback();
-}
-
-function render() {
-  renderList();
-  renderPlanNote();
-  renderMain();
-}
-
-function select(index) {
-  const next = Math.max(0, Math.min(state.commits.length - 1, index));
-  if (player.view === "play") {
-    seek(commitStart(script, next));
-    return;
-  }
-  selected = next;
-  render();
-  $("main").scrollTop = 0;
-}
-
-function isWalk() {
-  return state?.mode === "walk";
-}
-
-const synth = "speechSynthesis" in window ? window.speechSynthesis : null;
-/**
- * view "play" hides lines the playback has not written yet; "browse" shows every line.
- * position counts performed steps of the script. generation retires a loop on every seek.
- */
-const player = {
-  view: "browse",
-  playing: false,
-  position: 0,
-  generation: 0,
-  speed: 1,
-  muted: false,
-  voice: null,
-};
-let script = [];
-let voices = [];
-
-function stored(key) {
-  try {
-    return localStorage.getItem(`follow-me.${key}`);
-  } catch {
-    return null;
-  }
-}
-
-function store(key, value) {
-  try {
-    localStorage.setItem(`follow-me.${key}`, value);
-  } catch {
-    // Private windows may refuse storage; the setting then lasts for this page only.
-  }
-}
-
-function silent() {
-  return player.muted || synth === null;
-}
-
-/** Resolves true after `ms` of playing time, or false once a seek retires this loop. */
-function sleep(ms, generation) {
-  return new Promise((resolve) => {
-    let left = ms;
-    let last = performance.now();
-    const tick = () => {
-      if (generation !== player.generation) return resolve(false);
-      const now = performance.now();
-      if (player.playing) left -= now - last;
-      last = now;
-      if (left <= 0 && player.playing) return resolve(true);
-      setTimeout(tick, Math.max(16, Math.min(left, 100)));
-    };
-    tick();
-  });
-}
-
-function speak(text) {
-  if (silent() || !text) return null;
-  const utterance = new SpeechSynthesisUtterance(text);
-  utterance.rate = player.speed;
-  const voice = voices.find((v) => v.name === player.voice);
-  if (voice) {
-    utterance.voice = voice;
-    utterance.lang = voice.lang;
-  }
-  synth.speak(utterance);
-  return utterance;
-}
-
-/** Some engines never fire "end", so a pause-aware timeout bounds the wait. */
-function speakAndWait(text, generation) {
-  const utterance = speak(text);
-  if (!utterance) return Promise.resolve(true);
-  const ended = new Promise((resolve) => {
-    utterance.addEventListener("end", () => resolve(true));
-    utterance.addEventListener("error", () => resolve(true));
-  });
-  return Promise.race([ended, sleep(speechTimeout(text, player.speed), generation)]);
-}
-
-function setCaption(text) {
-  $("caption").textContent = text;
-}
-
-function applyPlayback() {
-  const { states, current } =
-    player.view === "play"
-      ? lineStates(script, player.position, selected)
-      : { states: new Map(), current: null };
-  for (const node of $("main").querySelectorAll("[data-line]")) {
-    const key = node.dataset.line;
-    const lineState = states.get(key);
-    node.classList.toggle("pending", lineState === "hidden");
-    node.classList.toggle("gone", lineState === "gone");
-    node.classList.toggle("current", key === current);
-  }
-}
-
-async function perform(step, generation) {
-  player.position += 1;
-  if (step.kind === "commit") {
-    if (selected === step.commit) applyPlayback();
-    else {
-      selected = step.commit;
-      render();
-      $("main").scrollTop = 0;
-    }
-    setCaption(step.say);
-    speak(step.say);
-  } else if (step.kind === "unit") {
-    applyPlayback();
-    $("main")
-      .querySelector(`[data-unit="${step.unit}"]`)
-      ?.scrollIntoView({ block: "start", behavior: "smooth" });
-    if (step.say) {
-      setCaption(step.say);
-      await speakAndWait(step.say, generation);
-    }
-  } else {
-    applyPlayback();
-    $("main")
-      .querySelector(".dl.current")
-      ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }
-  return sleep(stepDelay(step, player.speed), generation);
-}
-
-async function playLoop(generation) {
-  while (player.position < script.length) {
-    if (!(await sleep(0, generation))) return;
-    if (!(await perform(script[player.position], generation))) return;
-  }
-  player.playing = false;
-  setCaption(
-    isWalk()
-      ? "That is the whole branch. Leave any last comments, then finish the code review."
-      : "That is the whole plan.",
-  );
-  updatePlayer();
-}
-
-/** Moves playback to a step and starts a fresh loop, which waits while paused. */
-function seek(position) {
-  synth?.cancel();
-  player.position = position;
-  player.generation += 1;
-  selected = script[position]?.commit ?? commitAt(script, position);
-  render();
-  $("main").scrollTop = 0;
-  setCaption("");
-  playLoop(player.generation);
-}
-
-function play() {
-  if (player.view !== "play") enterPlay();
-  if (player.position >= script.length) seek(0);
-  player.playing = true;
-  synth?.resume();
-  updatePlayer();
-}
-
-/** Pausing preselects the line just written, so the comment button is ready for it. */
-function pause() {
-  player.playing = false;
-  synth?.pause();
-  updatePlayer();
-  const key = $("main").querySelector(".dl.current")?.dataset.line;
-  if (key === undefined) return;
-  const at = key.lastIndexOf(":");
-  const unitId = key.slice(0, at);
-  const change = unitsById.get(unitId)?.body?.[Number(key.slice(at + 1))]?.change;
-  const pickKey = `${selected}:${unitId}`;
-  if (change === undefined || (picks.get(pickKey)?.size ?? 0) > 0) return;
-  picks.set(pickKey, new Set([change]));
-  render();
-}
-
-function enterPlay() {
-  player.view = "play";
-  $("player").hidden = false;
-  seek(commitStart(script, selected));
-  updatePlayer();
-}
-
-function enterBrowse() {
-  player.view = "browse";
-  player.playing = false;
-  player.generation += 1;
-  synth?.cancel();
-  $("player").hidden = true;
-  render();
-  updatePlayer();
-}
-
-function updatePlayer() {
-  $("play").textContent = player.playing ? "Pause" : "Play";
-  $("view-toggle").textContent = player.view === "play" ? "Show all" : "Play";
-  const mute = $("mute");
-  mute.disabled = synth === null;
-  mute.textContent = synth === null ? "No speech" : player.muted ? "Unmute" : "Mute";
-  mute.setAttribute("aria-pressed", String(player.muted));
-}
-
-function loadVoices() {
-  if (synth === null) return;
-  voices = synth.getVoices();
-  if (!voices.some((v) => v.name === player.voice)) {
-    player.voice = pickVoice(voices, stored("voice"), navigator.language);
-  }
-  const picker = $("voice");
-  picker.replaceChildren(
-    el("option", { value: "", text: "Browser default" }),
-    ...voices.map((v) => el("option", { value: v.name, text: `${v.name} (${v.lang})` })),
-  );
-  picker.value = player.voice ?? "";
-}
-
-function setUpPlayer() {
-  player.speed = parseSpeed(stored("speed"));
-  player.muted = stored("muted") === "true";
-  const speed = $("speed");
-  speed.replaceChildren(...SPEEDS.map((s) => el("option", { value: String(s), text: `${s}x` })));
-  speed.value = String(player.speed);
-  speed.addEventListener("change", () => {
-    player.speed = parseSpeed(speed.value);
-    store("speed", String(player.speed));
-  });
-  const picker = $("voice");
-  picker.disabled = synth === null;
-  picker.addEventListener("change", () => {
-    player.voice = picker.value || null;
-    store("voice", picker.value);
-  });
-  synth?.addEventListener("voiceschanged", loadVoices);
-  loadVoices();
-  $("play").addEventListener("click", () => (player.playing ? pause() : play()));
-  $("prev").addEventListener("click", () => select(selected - 1));
-  $("next").addEventListener("click", () => select(selected + 1));
-  $("mute").addEventListener("click", () => {
-    player.muted = !player.muted;
-    store("muted", String(player.muted));
-    if (player.muted) synth?.cancel();
-    updatePlayer();
-  });
-  $("view-toggle").addEventListener("click", () =>
-    player.view === "play" ? enterBrowse() : play(),
-  );
-  updatePlayer();
-}
-
-function hasUnsentText() {
-  return [...drafts.values()].some((text) => text.trim() !== "");
-}
-
-async function endReview() {
-  if (
-    hasUnsentText() &&
-    !window.confirm("Some comment boxes have text you have not sent. End anyway?")
-  ) {
-    return;
-  }
-  await api("POST", "/api/end");
-  player.generation += 1;
-  synth?.cancel();
-  const done = $("done");
-  const saved = `reviews/v${state.version}.json`;
-  done.replaceChildren(
-    isWalk()
-      ? el(
-          "p",
-          {},
-          `Code review saved to ${saved}. The author can run `,
-          el("code", { text: "follow-me feedback" }),
-          " to read it.",
-        )
-      : el(
-          "p",
-          {},
-          `Review saved to ${saved}. Run `,
-          el("code", { text: "follow-me feedback" }),
-          " or hand the session to your agent.",
-        ),
-    el("p", {}, el("a", { href: "/", text: "All sessions" })),
-  );
-  done.hidden = false;
-}
-
-document.addEventListener("keydown", (event) => {
-  const target = event.target;
-  if (
-    target instanceof HTMLTextAreaElement ||
-    target instanceof HTMLInputElement ||
-    target instanceof HTMLSelectElement
-  ) {
-    return;
-  }
-  if (event.metaKey || event.ctrlKey || event.altKey) return;
-  // A focused button already answers space by clicking itself.
-  if (event.key === " " && !(target instanceof HTMLButtonElement)) {
-    event.preventDefault();
-    if (player.playing) pause();
-    else play();
-  }
-  if (event.key === "j" || event.key === "n") select(selected + 1);
-  if (event.key === "k" || event.key === "p") select(selected - 1);
-});
-
-$("end").addEventListener("click", () => guarded(endReview));
-window.addEventListener("focus", () => renderSwitcher());
-renderSwitcher();
-
-guarded(async () => {
-  state = await api("GET", "/api/state");
-  indexOwnership();
-  script = buildScript(state.commits, state.units);
-  const walk = isWalk();
-  document.title = walk ? "follow-me code review" : "follow-me review";
-  $("summary").textContent = walk
-    ? `${state.anchor.branch} · Code review`
-    : `${state.anchor.branch} · Review of plan v${state.version}`;
-  $("end").textContent = walk ? "Finish code review" : "End review";
-  setUpPlayer();
-  if (walk) {
-    enterPlay();
-    setCaption("Press Play or space to watch this branch being written.");
-  } else render();
-});